1.app {
2 display: flex;
3 height: 100%;
4}
6.sidebar {
7 width: 340px;
8 flex-shrink: 0;
9 overflow-y: auto;
10 padding: 20px;
11 background: #1e2128;
12 border-right: 1px solid #2c313a;
13}
15.sidebar h1 {
16 margin: 0 0 4px;
17 font-size: 20px;
18 color: #fff;
19}
21.tagline {
22 margin: 0 0 10px;
23 color: #9aa1ac;
24 font-size: 13px;
25}
27.tagline a {
28 color: #7fb0e0;
29}
31.engine-status {
32 margin: 0 0 16px;
33 font-size: 12px;
34}
36.engine-status.loading {
37 color: #ecc477;
38}
40.engine-status.ready {
41 color: #8fd7ab;
42}
44.engine-status.error {
45 color: #f2a3a3;
46}
48.sidebar section {
49 margin-bottom: 22px;
50}
52.sidebar h2 {
53 font-size: 12px;
54 text-transform: uppercase;
55 letter-spacing: 0.08em;
56 color: #7f8794;
57 margin: 0 0 8px;
58}
60.button-row {
61 display: flex;
62 gap: 8px;
63}
65button {
66 font: inherit;
67 padding: 7px 12px;
68 border-radius: 6px;
69 border: 1px solid #3a4150;
70 background: #2a2f39;
71 color: #e2e5ea;
72 cursor: pointer;
73}
75button:hover {
76 background: #333947;
77}
79button.primary {
80 margin-top: 10px;
81 width: 100%;
82 background: #2f6fb3;
83 border-color: #2f6fb3;
84 color: #fff;
85 font-weight: 600;
86}
88button.primary:hover {
89 background: #3a80c9;
90}
92select {
93 font: inherit;
94 width: 100%;
95 padding: 7px 8px;
96 border-radius: 6px;
97 border: 1px solid #3a4150;
98 background: #2a2f39;
99 color: #e2e5ea;
100}
102.error {
103 margin-top: 10px;
104 padding: 8px 10px;
105 border-radius: 6px;
106 background: rgba(220, 70, 70, 0.12);
107 border: 1px solid rgba(220, 70, 70, 0.45);
108 color: #f2a3a3;
109 font-size: 13px;
110}
112.warning {
113 margin-top: 10px;
114 padding: 8px 10px;
115 border-radius: 6px;
116 background: rgba(230, 170, 50, 0.1);
117 border: 1px solid rgba(230, 170, 50, 0.45);
118 color: #ecc477;
119 font-size: 13px;
120}
122.ok {
123 margin-top: 10px;
124 padding: 8px 10px;
125 border-radius: 6px;
126 background: rgba(80, 190, 120, 0.1);
127 border: 1px solid rgba(80, 190, 120, 0.4);
128 color: #8fd7ab;
129 font-size: 13px;
130}
132.mesh-info .source {
133 color: #7f8794;
134 font-size: 12px;
135 margin-bottom: 4px;
136 overflow-wrap: anywhere;
137}
139.chips {
140 display: flex;
141 flex-wrap: wrap;
142 gap: 6px;
143 margin-top: 8px;
144}
146.chip {
147 padding: 2px 8px;
148 border-radius: 999px;
149 font-size: 12px;
150 border: 1px solid #3a4150;
151 color: #6b7280;
152 text-decoration: line-through;
153}
155.chip.on {
156 color: #a8d5b8;
157 border-color: rgba(80, 190, 120, 0.5);
158 text-decoration: none;
159}
161.format-blurb {
162 margin: 8px 0 0;
163 color: #9aa1ac;
164 font-size: 13px;
165}
167.format-table {
168 width: 100%;
169 border-collapse: collapse;
170 font-size: 13px;
171}
173.format-table th,
174.format-table td {
175 text-align: left;
176 padding: 4px 6px;
177 border-bottom: 1px solid #2c313a;
178}
180.format-table th {
181 color: #7f8794;
182 font-weight: 500;
183}
185.format-table tbody tr {
186 cursor: pointer;
187}
189.format-table tbody tr:hover {
190 background: #262b34;
191}
193.format-table tbody tr.selected {
194 background: rgba(47, 111, 179, 0.18);
195}
197.format-table tbody tr.selected td:first-child {
198 color: #9cc4ea;
199}
201.format-table th:not(:first-child),
202.format-table td:not(:first-child) {
203 text-align: center;
204}
206.ext {
207 color: #7f8794;
208 font-size: 12px;
209}
211.format-table td.size {
212 color: #9aa1ac;
213 white-space: nowrap;
214}
216button.subtle {
217 margin-top: 8px;
218 padding: 3px 8px;
219 font-size: 12px;
220 color: #9aa1ac;
221 background: transparent;
222 border-color: #2c313a;
223}
225button.subtle:hover {
226 background: #2a2f39;
227}
229button.subtle:disabled {
230 opacity: 0.5;
231 cursor: default;
232}
234.footnote {
235 margin: 8px 0 0;
236 color: #6b7280;
237 font-size: 12px;
238}
240.viewport {
241 flex: 1;
242 min-width: 0;
243 position: relative;
244}
246.view-toolbar {
247 position: absolute;
248 top: 12px;
249 right: 12px;
250 z-index: 1;
251 display: flex;
252 gap: 0;
253 border: 1px solid #3a4150;
254 border-radius: 6px;
255 overflow: hidden;
256 background: rgba(30, 33, 40, 0.85);
257}
259.view-toolbar button {
260 border: none;
261 border-radius: 0;
262 background: transparent;
263 padding: 5px 10px;
264 font-size: 12px;
265 color: #9aa1ac;
266}
268.view-toolbar button + button {
269 border-left: 1px solid #3a4150;
270}
272.view-toolbar button:hover {
273 background: #2a2f39;
274 color: #e2e5ea;
275}
277.view-toolbar button.active {
278 background: rgba(47, 111, 179, 0.35);
279 color: #d9e8f7;
280}
282.empty-state {
283 height: 100%;
284 display: flex;
285 flex-direction: column;
286 align-items: center;
287 justify-content: center;
288 color: #6b7280;
289}
291.empty-state p {
292 margin: 4px 0;
293}