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.trackrow-knobs { display: flex; flex-direction: column; gap: 2px; }
102.knob { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9aa0ab; }
103.knob .knoblabel { flex: none; width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
104.knob input[type='range'] { flex: 1; }
105.knob .knobvalue { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
107.addtrack { margin-top: 2px; }
109.pianoroll { flex: 1; min-width: 0; position: relative; }
110.pianoroll canvas { position: absolute; inset: 0; display: block; touch-action: none; }
112.statusbar {
113 flex: none;
114 padding: 3px 10px;
115 background: #191c22;
116 border-top: 1px solid #262a33;
117 color: #8a8f99;
118 font-size: 12px;
119 white-space: nowrap;
120 overflow: hidden;
121 text-overflow: ellipsis;
122}
124.modal-backdrop {
125 position: fixed;
126 inset: 0;
127 background: rgba(0, 0, 0, 0.55);
128 display: flex;
129 align-items: center;
130 justify-content: center;
131 z-index: 10;
132}
133.modal {
134 background: #191c22;
135 border: 1px solid #333a47;
136 border-radius: 8px;
137 width: min(560px, 92vw);
138 max-height: 80vh;
139 display: flex;
140 flex-direction: column;
141 padding: 14px;
142 gap: 10px;
143}
144.modal-head { display: flex; align-items: center; gap: 8px; }
145.modal-head h2 { margin: 0; font-size: 16px; flex: none; }
146.songlist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
147.songrow { display: flex; align-items: center; gap: 6px; }
148.songrow.active .songname { color: #5aa9e6; }
149.songopen {
150 flex: 1;
151 display: flex;
152 flex-direction: column;
153 align-items: flex-start;
154 gap: 2px;
155 text-align: left;
156}
157.dim { color: #777; font-size: 11px; }