1:root {
2 --bg: #f4f5f7;
3 --card: #ffffff;
4 --text: #1c1e21;
5 --muted: #5f646b;
6 --border: #dfe2e6;
7 --accent: #1f5fa8;
8 --ok: #1a7f37;
9 --bad: #b42318;
10 --warn-bg: #fff4e0;
11 --warn: #8a5a00;
12 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
13 color: var(--text);
14 background: var(--bg);
15 line-height: 1.45;
16}
18* {
19 box-sizing: border-box;
20}
22body {
23 margin: 0;
24}
26.app {
27 max-width: 1100px;
28 margin: 0 auto;
29 padding: 16px 16px 48px;
30}
32.app-header h1 {
33 margin: 8px 0 4px;
34 font-size: 1.7rem;
35}
37.app-header p,
38.hint {
39 color: var(--muted);
40 margin: 0 0 14px;
41 max-width: 75em;
42}
44.app-footer {
45 color: var(--muted);
46 font-size: 0.85rem;
47 margin-top: 16px;
48}
50.card {
51 background: var(--card);
52 border: 1px solid var(--border);
53 border-radius: 8px;
54 padding: 14px 16px 16px;
55 margin-bottom: 16px;
56}
58.card h2 {
59 margin: 0 0 10px;
60 font-size: 1.15rem;
61}
63.card.status {
64 color: var(--muted);
65}
67.plot {
68 display: block;
69 width: 100%;
70 background: #fff;
71}
73.line-plot {
74 height: 170px;
75}
77.waveform-plot {
78 height: 130px;
79 margin-top: 6px;
80}
82.spectrogram-plot {
83 height: 240px;
84}
86.spectrograms {
87 display: grid;
88 grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
89 gap: 8px;
90}
92.response-plots {
93 display: grid;
94 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
95 gap: 8px 16px;
96 margin-top: 8px;
97}
99.plot-label {
100 font-size: 0.8rem;
101 color: var(--muted);
102 margin: 10px 0 2px;
103}
105.button-row {
106 display: flex;
107 align-items: center;
108 gap: 8px;
109 flex-wrap: wrap;
110}
112.divider {
113 width: 1px;
114 height: 22px;
115 background: var(--border);
116 margin: 0 4px;
117}
119button {
120 font: inherit;
121 font-size: 0.9rem;
122 padding: 6px 12px;
123 border-radius: 6px;
124 border: 1px solid var(--border);
125 background: #fff;
126 color: var(--text);
127 cursor: pointer;
128}
130button:hover:not(:disabled) {
131 background: #f0f2f5;
132}
134button:disabled {
135 opacity: 0.5;
136 cursor: default;
137}
139button.primary {
140 background: var(--accent);
141 border-color: var(--accent);
142 color: #fff;
143}
145button.primary:hover:not(:disabled) {
146 background: #184c87;
147}
149button.selected {
150 border-color: var(--accent);
151 box-shadow: inset 0 0 0 1px var(--accent);
152 font-weight: 600;
153}
155.playing-indicator {
156 color: var(--muted);
157 font-size: 0.9rem;
158 min-width: 8em;
159}
161.view-controls {
162 display: flex;
163 align-items: center;
164 flex-wrap: wrap;
165 gap: 8px 16px;
166 margin: 10px 0 2px;
167}
169.spacer {
170 flex: 1;
171}
173button.small {
174 font-size: 0.8rem;
175 padding: 4px 10px;
176}
178.global-controls,
179.zoom-controls {
180 display: flex;
181 flex-wrap: wrap;
182 gap: 10px 24px;
183 align-items: center;
184 margin: 6px 0;
185}
187.global-controls label,
188.zoom-controls label,
189.scrub {
190 display: flex;
191 align-items: center;
192 gap: 8px;
193 font-size: 0.9rem;
194}
196.global-controls label > span:first-child,
197.zoom-controls label > span:first-child,
198.scrub > span:first-child {
199 white-space: nowrap;
200}
202.zoom-controls .grow {
203 flex: 1;
204 min-width: 260px;
205}
207.scrub {
208 margin: 10px 0 4px;
209}
211.scrub input[type='range'] {
212 flex: 1;
213 max-width: 480px;
214}
216.wide-range {
217 width: 220px;
218}
220.info {
221 color: var(--muted);
222 font-size: 0.85rem;
223 white-space: nowrap;
224}
226select {
227 font: inherit;
228 font-size: 0.9rem;
229 padding: 4px 6px;
230 border-radius: 6px;
231 border: 1px solid var(--border);
232 background: #fff;
233}
235input[type='range'] {
236 min-width: 80px;
237 accent-color: var(--accent);
238}
240.slider-value {
241 font: inherit;
242 font-size: 0.85rem;
243 width: 5.5em;
244 padding: 2px 4px;
245 border: 1px solid var(--border);
246 border-radius: 4px;
247}
249.slider-unit {
250 color: var(--muted);
251 font-size: 0.85rem;
252 white-space: nowrap;
253}
255.source-info {
256 margin-top: 10px;
257 font-size: 0.9rem;
258 color: var(--muted);
259}
261.error {
262 color: var(--bad);
263 margin-top: 8px;
264 font-size: 0.9rem;
265}
267.warning {
268 background: var(--warn-bg);
269 color: var(--warn);
270 border-radius: 6px;
271 padding: 8px 10px;
272 margin: 8px 0;
273 font-size: 0.9rem;
274}