1:root {
2 --bg: #0b0f1a;
3 --bg-elev: #131a2a;
4 --panel: #141b2c;
5 --panel-2: #1b2438;
6 --border: #263349;
7 --text: #e6ecf5;
8 --muted: #8b98ad;
9 --accent: #4fd1c5;
10 --accent-2: #6aa6ff;
11 --danger: #ff6b6b;
12 --danger-bg: #3a1e26;
13 color-scheme: dark;
14}
16* {
17 box-sizing: border-box;
18}
20html,
21body,
22#root {
23 height: 100%;
24 margin: 0;
25}
27body {
28 background: var(--bg);
29 color: var(--text);
30 font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
31 font-size: 14px;
32 line-height: 1.5;
33}
35code {
36 font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
37 background: rgba(255, 255, 255, 0.06);
38 padding: 0 4px;
39 border-radius: 4px;
40 font-size: 0.9em;
41}
43a {
44 color: var(--accent-2);
45 text-decoration: none;
46}
47a:hover {
48 text-decoration: underline;
49}
51.app {
52 display: flex;
53 flex-direction: column;
54 height: 100%;
55}
57/* Header */
58.app-header {
59 display: flex;
60 align-items: center;
61 justify-content: space-between;
62 padding: 14px 20px;
63 border-bottom: 1px solid var(--border);
64 background: linear-gradient(180deg, var(--bg-elev), var(--bg));
65}
66.brand {
67 display: flex;
68 align-items: center;
69 gap: 14px;
70}
71.logo {
72 font-size: 32px;
73 color: var(--accent);
74 line-height: 1;
75}
76.app-header h1 {
77 margin: 0;
78 font-size: 18px;
79 letter-spacing: 0.3px;
80}
81.app-header p {
82 margin: 2px 0 0;
83 color: var(--muted);
84 font-size: 12.5px;
85 max-width: 640px;
86}
87.header-link {
88 font-size: 13px;
89 padding: 6px 12px;
90 border: 1px solid var(--border);
91 border-radius: 8px;
92}
94/* Layout */
95.layout {
96 flex: 1;
97 display: grid;
98 grid-template-columns: 340px 1fr;
99 min-height: 0;
100}
101.sidebar {
102 border-right: 1px solid var(--border);
103 overflow-y: auto;
104 padding: 16px;
105 display: flex;
106 flex-direction: column;
107 gap: 16px;
108 background: var(--bg);
109}
110.main {
111 min-width: 0;
112 min-height: 0;
113 padding: 20px;
114 display: flex;
115 overflow: auto;
116}
118/* Panels */
119.panel {
120 background: var(--panel);
121 border: 1px solid var(--border);
122 border-radius: 12px;
123 padding: 14px;
124}
125.panel-head {
126 display: flex;
127 align-items: center;
128 justify-content: space-between;
129 gap: 8px;
130 margin-bottom: 10px;
131}
132.panel-head h2 {
133 margin: 0;
134 font-size: 13px;
135 text-transform: uppercase;
136 letter-spacing: 0.8px;
137 color: var(--muted);
138}
140.muted {
141 color: var(--muted);
142}
143.small {
144 font-size: 12px;
145}
147/* Buttons */
148.btn {
149 font: inherit;
150 border: 1px solid var(--border);
151 background: var(--panel-2);
152 color: var(--text);
153 padding: 9px 16px;
154 border-radius: 8px;
155 cursor: pointer;
156 transition: filter 0.12s, background 0.12s;
157}
158.btn:hover:not(:disabled) {
159 filter: brightness(1.15);
160}
161.btn:disabled {
162 opacity: 0.45;
163 cursor: not-allowed;
164}
165.btn.primary {
166 background: linear-gradient(180deg, var(--accent), #35b0a4);
167 color: #04231f;
168 border-color: transparent;
169 font-weight: 600;
170}
171.btn.danger {
172 background: var(--danger-bg);
173 border-color: #5a2a33;
174 color: #ffb3b3;
175}
176.btn-small {
177 font: inherit;
178 font-size: 12.5px;
179 padding: 5px 10px;
180 border-radius: 7px;
181 border: 1px solid var(--border);
182 background: var(--panel-2);
183 color: var(--text);
184 cursor: pointer;
185}
186.btn-small:hover {
187 filter: brightness(1.2);
188}
190/* Dropzone */
191.dropzone {
192 border: 1.5px dashed var(--border);
193 border-radius: 10px;
194 padding: 14px;
195 text-align: center;
196 color: var(--muted);
197 font-size: 12.5px;
198 margin-bottom: 12px;
199 transition: border-color 0.12s, background 0.12s;
200}
201.dropzone.dragging {
202 border-color: var(--accent);
203 background: rgba(79, 209, 197, 0.08);
204 color: var(--text);
205}
207/* Sequence list */
208.seq-list {
209 list-style: none;
210 margin: 0;
211 padding: 0;
212 display: flex;
213 flex-direction: column;
214 gap: 6px;
215}
216.seq-list li {
217 border: 1px solid var(--border);
218 border-radius: 9px;
219 padding: 8px 10px;
220 cursor: pointer;
221 background: var(--panel-2);
222 transition: border-color 0.12s, background 0.12s;
223}
224.seq-list li:hover {
225 border-color: #35486a;
226}
227.seq-list li.selected {
228 border-color: var(--accent);
229 background: rgba(79, 209, 197, 0.09);
230}
231.seq-row {
232 display: flex;
233 align-items: center;
234 gap: 8px;
235}
236.seq-name {
237 flex: 1;
238 overflow: hidden;
239 text-overflow: ellipsis;
240 white-space: nowrap;
241 font-weight: 500;
242}
243.seq-actions {
244 display: flex;
245 gap: 2px;
246}
247.icon-btn {
248 border: none;
249 background: transparent;
250 color: var(--muted);
251 cursor: pointer;
252 font-size: 13px;
253 padding: 3px 5px;
254 border-radius: 6px;
255}
256.icon-btn:hover {
257 background: rgba(255, 255, 255, 0.08);
258 color: var(--text);
259}
260.icon-btn.danger:hover {
261 color: var(--danger);
262}
263.seq-meta {
264 color: var(--muted);
265 font-size: 11.5px;
266 margin-left: 26px;
267}
268.rename-input {
269 flex: 1;
270 font: inherit;
271 background: var(--bg);
272 border: 1px solid var(--accent);
273 color: var(--text);
274 border-radius: 6px;
275 padding: 3px 6px;
276}
278/* Phantom panel */
279.phantom-options {
280 display: flex;
281 gap: 8px;
282 margin-bottom: 12px;
283}
284.phantom-option {
285 flex: 1;
286 display: grid;
287 grid-template-columns: auto 1fr;
288 grid-template-rows: auto auto;
289 gap: 1px 8px;
290 align-items: center;
291 padding: 9px 11px;
292 border: 1px solid var(--border);
293 border-radius: 9px;
294 background: var(--panel-2);
295 cursor: pointer;
296}
297.phantom-option.selected {
298 border-color: var(--accent);
299 background: rgba(79, 209, 197, 0.09);
300}
301.phantom-option input {
302 grid-row: 1 / 3;
303}
304.phantom-label {
305 font-weight: 600;
306}
307.phantom-desc {
308 grid-column: 2;
309 color: var(--muted);
310 font-size: 11.5px;
311}
312.phantom-preview-wrap {
313 display: flex;
314 gap: 14px;
315 align-items: center;
316}
317.phantom-preview {
318 background: radial-gradient(circle at 50% 45%, #0f1830, #070b14);
319 border: 1px solid var(--border);
320 border-radius: 10px;
321 width: 150px;
322 height: 150px;
323}
324.phantom-stats {
325 font-size: 12.5px;
326 display: flex;
327 flex-direction: column;
328 gap: 3px;
329}
330.phantom-stats strong {
331 font-size: 16px;
332 color: var(--accent);
333}
335/* Run panel */
336.seq-summary {
337 display: flex;
338 flex-direction: column;
339 gap: 5px;
340 margin-bottom: 12px;
341 font-size: 12.5px;
342}
343.seq-summary > div {
344 display: flex;
345 justify-content: space-between;
346 gap: 12px;
347}
348.seq-summary .k {
349 color: var(--muted);
350}
351.seq-summary .v {
352 font-variant-numeric: tabular-nums;
353 text-align: right;
354}
355.run-controls {
356 display: flex;
357 gap: 8px;
358}
359.run-controls .btn {
360 flex: 1;
361}
362.progress {
363 margin-top: 12px;
364}
365.progress-bar {
366 height: 8px;
367 background: var(--bg);
368 border-radius: 5px;
369 overflow: hidden;
370 border: 1px solid var(--border);
371}
372.progress-fill {
373 height: 100%;
374 background: linear-gradient(90deg, var(--accent), var(--accent-2));
375 transition: width 0.15s ease-out;
376}
377.progress-text {
378 margin-top: 6px;
379 font-size: 12px;
380 color: var(--muted);
381 font-variant-numeric: tabular-nums;
382}
383.error-banner {
384 background: var(--danger-bg);
385 border: 1px solid #5a2a33;
386 color: #ffb3b3;
387 padding: 9px 11px;
388 border-radius: 9px;
389 font-size: 12.5px;
390}
392/* K-space view */
393.kspace {
394 display: flex;
395 flex-direction: column;
396 gap: 12px;
397 width: 100%;
398 min-height: 0;
399}
400.kspace-toolbar {
401 display: flex;
402 justify-content: space-between;
403 align-items: center;
404}
405.segmented {
406 display: inline-flex;
407 border: 1px solid var(--border);
408 border-radius: 9px;
409 overflow: hidden;
410}
411.segmented button {
412 font: inherit;
413 font-size: 12.5px;
414 border: none;
415 background: var(--panel);
416 color: var(--muted);
417 padding: 7px 13px;
418 cursor: pointer;
419 border-right: 1px solid var(--border);
420}
421.segmented button:last-child {
422 border-right: none;
423}
424.segmented button:hover {
425 color: var(--text);
426}
427.segmented button.active {
428 background: var(--accent);
429 color: #04231f;
430 font-weight: 600;
431}
432.kspace-canvas-wrap {
433 flex: 1;
434 min-height: 0;
435 display: flex;
436 align-items: center;
437 justify-content: center;
438 background: #05070d;
439 border: 1px solid var(--border);
440 border-radius: 12px;
441 padding: 16px;
442}
443.kspace-canvas {
444 image-rendering: pixelated;
445 max-width: 100%;
446 max-height: 68vh;
447 object-fit: contain;
448 border-radius: 4px;
449}
450.kspace-info {
451 display: flex;
452 gap: 20px;
453 flex-wrap: wrap;
454 color: var(--muted);
455 font-size: 12.5px;
456 font-variant-numeric: tabular-nums;
457}
459/* Placeholder / spinner */
460.placeholder {
461 flex: 1;
462 display: flex;
463 align-items: center;
464 justify-content: center;
465 border: 1px dashed var(--border);
466 border-radius: 12px;
467 width: 100%;
468}
469.placeholder-inner {
470 text-align: center;
471 color: var(--muted);
472}
473.placeholder-icon {
474 font-size: 56px;
475 color: var(--border);
476 display: block;
477 margin-bottom: 12px;
478}
479.spinner {
480 width: 34px;
481 height: 34px;
482 border: 3px solid var(--border);
483 border-top-color: var(--accent);
484 border-radius: 50%;
485 margin: 0 auto 14px;
486 animation: spin 0.8s linear infinite;
487}
488@keyframes spin {
489 to {
490 transform: rotate(360deg);
491 }
492}
494@media (max-width: 820px) {
495 .layout {
496 grid-template-columns: 1fr;
497 }
498 .sidebar {
499 border-right: none;
500 border-bottom: 1px solid var(--border);
501 }
502}