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 16px;
23 color: #9aa1ac;
24 font-size: 13px;
25}
27.sidebar section {
28 margin-bottom: 22px;
29}
31.sidebar h2 {
32 font-size: 12px;
33 text-transform: uppercase;
34 letter-spacing: 0.08em;
35 color: #7f8794;
36 margin: 0 0 8px;
37}
39.button-row {
40 display: flex;
41 gap: 8px;
42}
44button {
45 font: inherit;
46 padding: 7px 12px;
47 border-radius: 6px;
48 border: 1px solid #3a4150;
49 background: #2a2f39;
50 color: #e2e5ea;
51 cursor: pointer;
52}
54button:hover {
55 background: #333947;
56}
58button.primary {
59 margin-top: 10px;
60 width: 100%;
61 background: #2f6fb3;
62 border-color: #2f6fb3;
63 color: #fff;
64 font-weight: 600;
65}
67button.primary:hover {
68 background: #3a80c9;
69}
71select {
72 font: inherit;
73 width: 100%;
74 padding: 7px 8px;
75 border-radius: 6px;
76 border: 1px solid #3a4150;
77 background: #2a2f39;
78 color: #e2e5ea;
79}
81.error {
82 margin-top: 10px;
83 padding: 8px 10px;
84 border-radius: 6px;
85 background: rgba(220, 70, 70, 0.12);
86 border: 1px solid rgba(220, 70, 70, 0.45);
87 color: #f2a3a3;
88 font-size: 13px;
89}
91.warning {
92 margin-top: 10px;
93 padding: 8px 10px;
94 border-radius: 6px;
95 background: rgba(230, 170, 50, 0.1);
96 border: 1px solid rgba(230, 170, 50, 0.45);
97 color: #ecc477;
98 font-size: 13px;
99}
101.ok {
102 margin-top: 10px;
103 padding: 8px 10px;
104 border-radius: 6px;
105 background: rgba(80, 190, 120, 0.1);
106 border: 1px solid rgba(80, 190, 120, 0.4);
107 color: #8fd7ab;
108 font-size: 13px;
109}
111.mesh-info .source {
112 color: #7f8794;
113 font-size: 12px;
114 margin-bottom: 4px;
115 overflow-wrap: anywhere;
116}
118.chips {
119 display: flex;
120 flex-wrap: wrap;
121 gap: 6px;
122 margin-top: 8px;
123}
125.chip {
126 padding: 2px 8px;
127 border-radius: 999px;
128 font-size: 12px;
129 border: 1px solid #3a4150;
130 color: #6b7280;
131 text-decoration: line-through;
132}
134.chip.on {
135 color: #a8d5b8;
136 border-color: rgba(80, 190, 120, 0.5);
137 text-decoration: none;
138}
140.format-blurb {
141 margin: 8px 0 0;
142 color: #9aa1ac;
143 font-size: 13px;
144}
146.format-table {
147 width: 100%;
148 border-collapse: collapse;
149 font-size: 13px;
150}
152.format-table th,
153.format-table td {
154 text-align: left;
155 padding: 4px 6px;
156 border-bottom: 1px solid #2c313a;
157}
159.format-table th {
160 color: #7f8794;
161 font-weight: 500;
162}
164.format-table th:not(:first-child),
165.format-table td:not(:first-child) {
166 text-align: center;
167}
169.ext {
170 color: #7f8794;
171 font-size: 12px;
172}
174.footnote {
175 margin: 8px 0 0;
176 color: #6b7280;
177 font-size: 12px;
178}
180.viewport {
181 flex: 1;
182 min-width: 0;
183 position: relative;
184}
186.empty-state {
187 height: 100%;
188 display: flex;
189 flex-direction: column;
190 align-items: center;
191 justify-content: center;
192 color: #6b7280;
193}
195.empty-state p {
196 margin: 4px 0;
197}