1* { box-sizing: border-box; }
2html, body, #root { height: 100%; margin: 0; }
3body {
4 background: #0f1115;
5 color: #d7dae0;
6 font: 13px/1.4 system-ui, sans-serif;
7 overflow: hidden;
8}
9.app { display: flex; flex-direction: column; height: 100%; }
10.loading { padding: 2rem; color: #888; }
12header, .transport {
13 display: flex;
14 align-items: center;
15 gap: 8px;
16 padding: 6px 10px;
17 background: #191c22;
18 border-bottom: 1px solid #262a33;
19 flex: none;
20}
21.brand { font-weight: 700; color: #5aa9e6; letter-spacing: 0.5px; }
22.spacer { flex: 1; }
24button {
25 background: #262b35;
26 color: #d7dae0;
27 border: 1px solid #333a47;
28 border-radius: 4px;
29 padding: 4px 10px;
30 cursor: pointer;
31 font: inherit;
32}
33button:hover { background: #303747; }
34button:disabled { opacity: 0.5; cursor: default; }
35button.toggled { background: #3a5b82; border-color: #5aa9e6; }
36button.rec { color: #ff5252; }
37button.rec.toggled { background: #6e2424; border-color: #ff5252; }
38button.mini { padding: 1px 6px; font-size: 11px; }
39button.danger:hover { background: #6e2424; border-color: #ff5252; }
41input, select {
42 background: #10131a;
43 color: #d7dae0;
44 border: 1px solid #333a47;
45 border-radius: 4px;
46 padding: 3px 6px;
47 font: inherit;
48}
49input[type='number'] { width: 56px; }
50input[type='checkbox'] { accent-color: #5aa9e6; }
51input[type='range'] { padding: 0; flex: 1; accent-color: #5aa9e6; }
52label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
54.songname { width: 200px; }
55.devicebar { display: flex; align-items: center; gap: 8px; }
56.dot { width: 9px; height: 9px; border-radius: 50%; background: #555; display: inline-block; }
57.dot.ok { background: #4cd964; }
58.err { color: #e07a7a; }
60.transport .pos {
61 font-variant-numeric: tabular-nums;
62 background: #10131a;
63 border: 1px solid #333a47;
64 border-radius: 4px;
65 padding: 3px 8px;
66 min-width: 52px;
67 text-align: center;
68}
69.transport .status { color: #aaa; }
71.main { display: flex; flex: 1; min-height: 0; }
73.tracklist {
74 width: 250px;
75 flex: none;
76 overflow-y: auto;
77 background: #14161c;
78 border-right: 1px solid #262a33;
79 padding: 6px;
80 display: flex;
81 flex-direction: column;
82 gap: 6px;
83}
84.trackrow {
85 background: #1b1f27;
86 border: 1px solid #262a33;
87 border-radius: 6px;
88 padding: 6px;
89 cursor: pointer;
90 display: flex;
91 flex-direction: column;
92 gap: 5px;
93}
94.trackrow.active { border-color: #5aa9e6; background: #1e2530; }
95.trackrow-top, .trackrow-bottom, .trackrow-vol { display: flex; align-items: center; gap: 5px; }
96.trackrow .chip { width: 10px; height: 10px; border-radius: 3px; flex: none; }
97.trackrow .trackname { flex: 1; min-width: 0; background: transparent; border-color: transparent; }
98.trackrow .trackname:hover, .trackrow .trackname:focus { border-color: #333a47; background: #10131a; }
99.trackrow select { flex: 1; min-width: 0; }
100.trackrow .notecount { color: #777; font-size: 11px; white-space: nowrap; }
101.addtrack { margin-top: 2px; }
103.pianoroll { flex: 1; min-width: 0; position: relative; }
104.pianoroll canvas { position: absolute; inset: 0; display: block; touch-action: none; }
106.statusbar {
107 flex: none;
108 padding: 3px 10px;
109 background: #191c22;
110 border-top: 1px solid #262a33;
111 color: #8a8f99;
112 font-size: 12px;
113 white-space: nowrap;
114 overflow: hidden;
115 text-overflow: ellipsis;
116}
118.modal-backdrop {
119 position: fixed;
120 inset: 0;
121 background: rgba(0, 0, 0, 0.55);
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 z-index: 10;
126}
127.modal {
128 background: #191c22;
129 border: 1px solid #333a47;
130 border-radius: 8px;
131 width: min(560px, 92vw);
132 max-height: 80vh;
133 display: flex;
134 flex-direction: column;
135 padding: 14px;
136 gap: 10px;
137}
138.modal-head { display: flex; align-items: center; gap: 8px; }
139.modal-head h2 { margin: 0; font-size: 16px; flex: none; }
140.songlist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
141.songrow { display: flex; align-items: center; gap: 6px; }
142.songrow.active .songname { color: #5aa9e6; }
143.songopen {
144 flex: 1;
145 display: flex;
146 flex-direction: column;
147 align-items: flex-start;
148 gap: 2px;
149 text-align: left;
150}
151.dim { color: #777; font-size: 11px; }