Diff

/var/www/vhosts/3dshawn.com/admin.3dshawn.com/assets/css/meta.css

added on local at 2026-07-11 08:10:04

Added

lines

Removed

-0

lines

Context

2839

unchanged

Blobs

from 4f925e03a778
to 4f925e03a778

Restore this content →

Unified diff

Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.

1	1	/* Meta-Admin -- ported from PTMatrix site.css with neon synthwave palette substituted. */
2	2	/* =====================================================================
3	3	TaskForge -- site.css
4	4	Dark-first SaaS design system.
5	5	Brand: deep wine #2d1810 -> rose #991b1b (gradient, decorative).
6	6	Primary CTA: cool blue #450a0a (per UX rule). Accent violet #b300ff.
7	7	Success: #aaff00. Warn: #7c2d12. Danger: #b53048 (warnings only).
8	8	===================================================================== */
9	9
10	10	:root {
11	11	--col-bg-0: #020201;
12	12	--col-bg-1: #080604;
13	13	--col-bg-2: #0d0a07;
14	14	--col-bg-3: #15100b;
15	15	--col-bg-4: #1f160e;
16	16	--col-surface: #0d0a07;
17	17	--col-surface-2: #15100b;
18	18	--col-surface-3: #1f160e;
19	19
20	20	--col-border: #1f160e;
21	21	--col-border-2: #2a1d12;
22	22
23	23	--col-text: #e8e0d2;
24	24	--col-text-muted: #a89978;
25	25	--col-text-dim: #6e5f43;
26	26
27	27	--col-primary: #450a0a;
28	28	--col-primary-2: #7c2d12;
29	29	--col-primary-soft:#2d1810;
30	30
31	31	--col-accent: #b300ff;
32	32	--col-accent-soft: #2c1e4c;
33	33
34	34	/* Brand palette — cool decorative gradient (logo, hero highlight,
35	35	sidebar-active, tooltip glow). Never used for CTAs. */
36	36	--col-brand-1: #2d1810;
37	37	--col-brand-2: #991b1b;
38	38	--col-brand-glow: rgba(69,10,10,.45);
39	39	--col-brand-glow-2:rgba(69,10,10,.30);
40	40	--grad-brand: linear-gradient(135deg, #2d1810 0%, #991b1b 100%);
41	41	--grad-brand-h: linear-gradient(90deg, #2d1810 0%, #991b1b 100%);
42	42
43	43	--col-success: #aaff00;
44	44	--col-success-soft:#1a2c0a;
45	45	--col-warn: #7c2d12;
46	46	--col-warn-soft: #3f2c0d;
47	47	--col-danger: #b53048;
48	48	--col-danger-soft: #401717;
49	49
50	50	--col-pri-low: #94a3b8;
51	51	--col-pri-med: #450a0a;
52	52	--col-pri-high: #7c2d12;
53	53	--col-pri-urgent: #f97316;
54	54	--col-pri-crit: #b53048;
55	55
56	56	--radius-sm: 6px;
57	57	--radius: 10px;
58	58	--radius-lg: 14px;
59	59	--radius-xl: 20px;
60	60
61	61	--shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.02);
62	62	--shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
63	63	--shadow-lg: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
64	64
65	65	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
66	66	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
67	67	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
68	68
69	69	--sidebar-width: 248px;
70	70	--sidebar-collapsed-width: 60px;
71	71	--topbar-height: 56px;
72	72
73	73	--t-fast: 120ms ease-out;
74	74	--t: 200ms ease-out;
75	75	}
76	76
77	77	* { box-sizing: border-box; }
78	78	html, body {
79	79	margin: 0;
80	80	padding: 0;
81	81	background: var(--col-bg-0);
82	82	color: var(--col-text);
83	83	font-family: var(--font-body);
84	84	font-size: 14px;
85	85	line-height: 1.5;
86	86	-webkit-font-smoothing: antialiased;
87	87	-moz-osx-font-smoothing: grayscale;
88	88	}
89	89	body { min-height: 100vh; position: relative; }
90	90
91	91	/* Ambient brand atmosphere — three overlapping radial washes per the
92	92	warmth-recipe pattern, ported to cyan/lavender. Fixed-attachment so
93	93	it stays put while content scrolls; sits behind everything. */
94	94	body::before {
95	95	content: '';
96	96	position: fixed;
97	97	inset: 0;
98	98	z-index: -1;
99	99	pointer-events: none;
100	100	background:
101	101	radial-gradient(ellipse 90% 60% at 15% -10%, rgba(69,10,10,.18) 0%, transparent 55%),
102	102	radial-gradient(ellipse 80% 50% at 100% 0%, rgba(69,10,10,.10) 0%, transparent 60%),
103	103	radial-gradient(ellipse 60% 50% at 50% 100%, rgba(69,10,10,.06) 0%, transparent 60%);
104	104	}
105	105	/* Top accent strip — thin brand gradient line that runs across the
106	106	very top of every page like a stage light. */
107	107	body::after {
108	108	content: '';
109	109	position: fixed;
110	110	left: 0; right: 0; top: 0;
111	111	height: 2px;
112	112	background: linear-gradient(90deg,
113	113	transparent 0%,
114	114	var(--col-brand-1) 28%,
115	115	var(--col-brand-2) 72%,
116	116	transparent 100%);
117	117	opacity: .55;
118	118	z-index: 100;
119	119	pointer-events: none;
120	120	}
121	121
122	122	a { color: var(--col-primary); text-decoration: none; transition: color var(--t-fast); }
123	123	a:hover { color: var(--col-primary-2); }
124	124
125	125	h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .4em; color: var(--col-text); }
126	126	h1 { font-size: 28px; line-height: 1.2; }
127	127	h2 { font-size: 22px; line-height: 1.25; }
128	128	h3 { font-size: 18px; line-height: 1.3; }
129	129	h4 { font-size: 15px; line-height: 1.4; }
130	130
131	131	p { margin: 0 0 .8em; color: var(--col-text-muted); }
132	132	code, kbd {
133	133	font-family: var(--font-mono); font-size: .92em;
134	134	background: linear-gradient(180deg, rgba(69,10,10,.06) 0%, transparent 100%), var(--col-bg-2);
135	135	padding: 2px 6px;
136	136	border-radius: 4px;
137	137	border: 1px solid rgba(69,10,10,.22);
138	138	color: #bae6fd;
139	139	}
140	140
141	141	hr { border: 0; border-top: 1px solid var(--col-border); margin: 24px 0; }
142	142
143	143	::-webkit-scrollbar { width: 10px; height: 10px; }
144	144	::-webkit-scrollbar-track { background: var(--col-bg-1); }
145	145	::-webkit-scrollbar-thumb { background: var(--col-bg-3); border-radius: 8px; border: 2px solid var(--col-bg-1); }
146	146	::-webkit-scrollbar-thumb:hover { background: var(--col-bg-4); }
147	147
148	148	/* ====== buttons ====== */
149	149	.btn {
150	150	display: inline-flex; align-items: center; gap: 8px;
151	151	padding: 9px 16px;
152	152	font-family: var(--font-display);
153	153	font-size: 13.5px; font-weight: 500;
154	154	border: 1px solid var(--col-border-2);
155	155	background: var(--col-surface-3);
156	156	color: var(--col-text);
157	157	border-radius: var(--radius-sm);
158	158	cursor: pointer;
159	159	transition: all var(--t-fast);
160	160	text-decoration: none;
161	161	user-select: none;
162	162	white-space: nowrap;
163	163	}
164	164	.btn:hover { background: var(--col-bg-4); border-color: var(--col-text-dim); color: var(--col-text); }
165	165	.btn:active { transform: translateY(1px); }
166	166
167	167	/* PRIMARY = SOLID BRAND (changed 2026-06-08 from blue per
168	168	feedback-brand-warmth-recipe). Workhorse CTA: Save/Submit/Update/Create. */
169	169	.btn-primary {
170	170	background: var(--col-brand-1);
171	171	border-color: var(--col-brand-2);
172	172	color: #fff;
173	173	font-weight: 700;
174	174	box-shadow: 0 4px 14px var(--col-brand-glow);
175	175	}
176	176	.btn-primary:hover {
177	177	background: var(--col-brand-2);
178	178	border-color: var(--col-brand-2);
179	179	color: #fff;
180	180	box-shadow: 0 6px 18px rgba(69,10,10,.55);
181	181	}
182	182
183	183	/* BRAND = GRADIENT — hero / brand-marketing moments only (Add, Start free,
184	184	Upgrade). Heavier than .btn-primary; use sparingly (~1-2 per page). */
185	185	.btn-brand {
186	186	background: var(--grad-brand);
187	187	border-color: var(--col-brand-2);
188	188	color: #fff;
189	189	font-weight: 700;
190	190	box-shadow: 0 4px 14px var(--col-brand-glow);
191	191	}
192	192	.btn-brand:hover {
193	193	filter: brightness(1.10);
194	194	color: #fff;
195	195	}
196	196
197	197	/* SECONDARY = NEUTRAL DARK — paired with primary (Cancel, Back, Dismiss). */
198	198	.btn-secondary {
199	199	background: var(--col-bg-3);
200	200	color: var(--col-text);
201	201	border-color: var(--col-border);
202	202	}
203	203	.btn-secondary:hover { background: var(--col-bg-4); }
204	204
205	205	.btn-ghost {
206	206	background: transparent;
207	207	border-color: var(--col-border);
208	208	}
209	209	.btn-ghost:hover { background: var(--col-surface-3); }
210	210
211	211	.btn-danger {
212	212	background: var(--col-danger);
213	213	border-color: var(--col-danger);
214	214	color: #fff;
215	215	}
216	216	.btn-danger:hover { background: #dc3030; }
217	217
218	218	.btn-success {
219	219	background: var(--col-success);
220	220	border-color: var(--col-success);
221	221	color: #fff;
222	222	}
223	223
224	224	.btn-sm { padding: 6px 12px; font-size: 12.5px; }
225	225	.btn-lg { padding: 12px 20px; font-size: 15px; }
226	226	.btn-xl { padding: 14px 26px; font-size: 16px; font-weight: 600; }
227	227
228	228	.btn svg { width: 16px; height: 16px; }
229	229
230	230	/* ====== forms ====== */
231	231	.field { margin-bottom: 16px; }
232	232	.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--col-brand-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
233	233	.field .help { font-size: 12px; color: var(--col-text-dim); margin-top: 4px; }
234	234	.input, .textarea, .select {
235	235	width: 100%;
236	236	padding: 10px 12px;
237	237	background: var(--col-bg-1);
238	238	color: var(--col-text);
239	239	border: 1px solid var(--col-border);
240	240	border-radius: var(--radius-sm);
241	241	font-family: var(--font-body);
242	242	font-size: 14px;
243	243	transition: border-color var(--t-fast), box-shadow var(--t-fast);
244	244	}
245	245	.input:focus, .textarea:focus, .select:focus {
246	246	outline: none;
247	247	border-color: var(--col-brand-1);
248	248	box-shadow: 0 0 0 3px rgba(69,10,10,.18), 0 0 12px rgba(69,10,10,.18);
249	249	}
250	250	.textarea { min-height: 100px; resize: vertical; }
251	251	.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2395a0b3' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
252	252
253	253	.checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--col-text); }
254	254	.checkbox input, .radio input { accent-color: var(--col-brand-1); }
255	255
256	256	.error-msg { background: var(--col-danger-soft); color: var(--col-danger); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(77,14,21,.3); font-size: 13.5px; margin-bottom: 16px; }
257	257	.flash-msg { background: var(--col-success-soft); color: var(--col-success); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(170,255,0,.3); font-size: 13.5px; margin-bottom: 16px; }
258	258	.info-msg { background: var(--col-primary-soft); color: var(--col-primary); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(69,10,10,.3); font-size: 13.5px; margin-bottom: 16px; }
259	259
260	260	/* ====== cards / panels ====== */
261	261	.card {
262	262	background:
263	263	linear-gradient(180deg, rgba(69,10,10,.05) 0%, transparent 40%),
264	264	var(--col-surface);
265	265	border: 1px solid rgba(69,10,10,.14);
266	266	border-radius: var(--radius);
267	267	padding: 18px;
268	268	box-shadow: 0 1px 0 rgba(69,10,10,.06) inset, var(--shadow-sm);
269	269	position: relative;
270	270	transition: border-color var(--t-fast);
271	271	}
272	272	.card:hover { border-color: rgba(69,10,10,.28); }
273	273	.card-header {
274	274	display: flex; align-items: center; justify-content: space-between;
275	275	padding-bottom: 14px;
276	276	border-bottom: 1px solid var(--col-border);
277	277	margin-bottom: 14px;
278	278	}
279	279	.card-header h2, .card-header h3 { margin: 0; position: relative; padding-left: 12px; color: #fff; }
280	280	.card-header h2::before, .card-header h3::before {
281	281	content: '';
282	282	position: absolute;
283	283	left: 0; top: 4px; bottom: 4px;
284	284	width: 3px;
285	285	border-radius: 3px;
286	286	background: linear-gradient(180deg, var(--col-brand-1), var(--col-brand-2));
287	287	box-shadow: 0 0 8px var(--col-brand-glow);
288	288	}
289	289	.panel {
290	290	background:
291	291	linear-gradient(180deg, rgba(69,10,10,.05) 0%, transparent 40%),
292	292	var(--col-surface);
293	293	border: 1px solid rgba(69,10,10,.14);
294	294	border-radius: var(--radius);
295	295	box-shadow: 0 1px 0 rgba(69,10,10,.06) inset;
296	296	}
297	297
298	298	/* ====== badges & chips ====== */
299	299	.badge {
300	300	display: inline-flex; align-items: center; gap: 4px;
301	301	padding: 2px 8px;
302	302	border-radius: 5px;
303	303	font-size: 11.5px;
304	304	font-weight: 500;
305	305	background: var(--col-bg-3);
306	306	color: var(--col-text-muted);
307	307	border: 1px solid var(--col-border-2);
308	308	}
309	309	.badge.primary { background: var(--col-primary-soft); color: var(--col-primary); border-color: rgba(69,10,10,.3); }
310	310	.badge.success { background: var(--col-success-soft); color: var(--col-success); border-color: rgba(170,255,0,.3); }
311	311	.badge.warn { background: var(--col-warn-soft); color: var(--col-warn); border-color: rgba(69,10,10,.3); }
312	312	.badge.danger { background: var(--col-danger-soft); color: var(--col-danger); border-color: rgba(77,14,21,.3); }
313	313	.badge.accent { background: var(--col-accent-soft); color: var(--col-accent); border-color: rgba(179,0,255,.3); }
314	314	.badge.brand {
315	315	background: linear-gradient(135deg, rgba(69,10,10,.18) 0%, rgba(69,10,10,.16) 100%);
316	316	color: #bae6fd;
317	317	border-color: rgba(69,10,10,.45);
318	318	box-shadow: 0 0 0 1px rgba(69,10,10,.12) inset;
319	319	}
320	320
321	321	.priority-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
322	322	.priority-low { background: rgba(148,163,184,.15); color: var(--col-pri-low); }
323	323	.priority-medium { background: rgba(69,10,10,.15); color: var(--col-pri-med); }
324	324	.priority-high { background: rgba(69,10,10,.15); color: var(--col-pri-high); }
325	325	.priority-urgent { background: rgba(249,115,22,.15); color: var(--col-pri-urgent); }
326	326	.priority-critical { background: rgba(77,14,21,.15); color: var(--col-pri-crit); }
327	327
328	328	/* ====== sidebar (in-app) ====== */
329	329	.app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }
330	330	html.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-collapsed-width) 1fr; }
331	331
332	332	.sidebar {
333	333	background:
334	334	radial-gradient(ellipse 150% 50% at 0% 0%, rgba(69,10,10,.26) 0%, transparent 65%),
335	335	radial-gradient(ellipse 130% 45% at 100% 30%, rgba(69,10,10,.12) 0%, transparent 60%),
336	336	radial-gradient(ellipse 120% 45% at 20% 100%, rgba(69,10,10,.16) 0%, transparent 65%),
337	337	linear-gradient(180deg, #1e0e10 0%, #160a0c 55%, #0e0a0c 100%);
338	338	border-right: 1px solid rgba(69,10,10,.25);
339	339	padding: 12px 12px 24px;
340	340	overflow-y: auto;
341	341	overflow-x: hidden;
342	342	position: sticky;
343	343	top: 0;
344	344	height: 100vh;
345	345	transition: width var(--t);
346	346	box-shadow: 1px 0 26px rgba(69,10,10,.10);
347	347	scrollbar-color: #991b1b transparent;
348	348	scrollbar-width: thin;
349	349	}
350	350	.sidebar::-webkit-scrollbar { width: 10px; }
351	351	.sidebar::-webkit-scrollbar-track { background: rgba(72,12,15,.35); }
352	352	.sidebar::-webkit-scrollbar-thumb {
353	353	background: linear-gradient(180deg, #991b1b 0%, #7a2730 100%);
354	354	border-radius: 8px;
355	355	border: 2px solid transparent;
356	356	background-clip: padding-box;
357	357	}
358	358	.sidebar::-webkit-scrollbar-thumb:hover {
359	359	background: linear-gradient(180deg, #d05f6b 0%, #9a3340 100%);
360	360	background-clip: padding-box;
361	361	}
362	362
363	363	/* Diagonal shimmer (sidebar-glisten) -- ambient brand-tinted band sweeps
364	364	top-left -> bottom-right of the menu BG. Full recipe + bug list:
365	365	[[feedback-sidebar-glisten-recipe]] in user auto-memory. */
366	366	.sidebar::before {
367	367	content: '';
368	368	position: absolute;
369	369	inset: 0;
370	370	pointer-events: none;
371	371	background: linear-gradient(
372	372	135deg,
373	373	transparent 30%,
374	374	rgba(255,170,180,0.07) 48%,
375	375	rgba(255,200,210,0.11) 52%,
376	376	transparent 70%
377	377	);
378	378	background-size: 250% 250%;
379	379	background-repeat: no-repeat;
380	380	background-position: 150% 150%;
381	381	animation: sidebar-glisten 14s linear infinite;
382	382	z-index: 0;
383	383	}
384	384	.sidebar > * { position: relative; z-index: 1; }
385	385	@keyframes sidebar-glisten {
386	386	0% { background-position: 150% 150%; }
387	387	55% { background-position: -150% -150%; }
388	388	100% { background-position: -150% -150%; }
389	389	}
390	390	@media (prefers-reduced-motion: reduce) {
391	391	.sidebar::before { animation: none; opacity: 0; }
392	392	}
393	393
394	394	.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 10px 6px 18px; border-bottom: 1px solid var(--col-border); margin-bottom: 14px; }
395	395	.sidebar-brand .logo { width: 38px; height: 38px; border-radius: 10px; background: #2d1810; border: 1px solid #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; position: relative; box-shadow: 0 6px 20px rgba(77,14,21,0.40); }
396	396	.sidebar-brand .logo::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, #4d0e15 0%, #f87171 100%); filter: blur(12px); opacity: 0.32; z-index: -1; }
397	397	.sidebar-brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
398	398	.sidebar-brand .brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 17px; color: var(--col-text); line-height: 1.1; }
399	399	.sidebar-brand .brand-sub {
400	400	font-family: var(--font-display);
401	401	font-size: 9.5px;
402	402	font-weight: 600;
403	403	color: var(--col-text-dim);
404	404	letter-spacing: .18em;
405	405	text-transform: uppercase;
406	406	margin-top: 6px;
407	407	}
408	408	html.sidebar-collapsed .sidebar-brand .brand-text { display: none; }
409	409
410	410	.sidebar-section-label { font-size: 10.5px; text-transform: uppercase; color: var(--col-brand-2); opacity: .75; padding: 14px 10px 6px; letter-spacing: .12em; font-weight: 700; }
411	411	html.sidebar-collapsed .sidebar-section-label { display: none; }
412	412
413	413	.sidebar-link {
414	414	display: flex; align-items: center; gap: 12px;
415	415	padding: 8px 10px;
416	416	border-radius: var(--radius-sm);
417	417	color: var(--col-text-muted);
418	418	text-decoration: none;
419	419	font-size: 13.5px;
420	420	margin-bottom: 1px;
421	421	transition: background var(--t-fast), color var(--t-fast);
422	422	white-space: nowrap;
423	423	overflow: hidden;
424	424	}
425	425	.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
426	426	.sidebar-link:hover { background: var(--col-surface-3); color: var(--col-text); }
427	427	.sidebar-link.active {
428	428	background: linear-gradient(90deg, rgba(69,10,10,.28) 0%, rgba(69,10,10,.10) 70%, transparent 100%);
429	429	color: #fff;
430	430	position: relative;
431	431	box-shadow: inset 0 0 0 1px rgba(69,10,10,.25);
432	432	}
433	433	.sidebar-link.active::before {
434	434	content: '';
435	435	position: absolute;
436	436	left: -12px;
437	437	top: 7px; bottom: 7px;
438	438	width: 3px;
439	439	border-radius: 0 3px 3px 0;
440	440	background: var(--col-brand-1);
441	441	}
442	442	.sidebar-link.active svg { color: currentColor; }
443	443	html.sidebar-collapsed .sidebar-link span { display: none; }
444	444
445	445	/* When collapsed, tighten left/right padding so 18px icons aren't clipped
446	446	inside the 60px rail. Center the icon and re-anchor the active stripe. */
447	447	html.sidebar-collapsed .sidebar { padding-left: 6px; padding-right: 6px; }
448	448	html.sidebar-collapsed .sidebar-link { padding-left: 0; padding-right: 0; justify-content: center; gap: 0; }
449	449	html.sidebar-collapsed .sidebar-link.active::before { left: -6px; }
450	450	html.sidebar-collapsed .sidebar-brand { padding-left: 0; padding-right: 0; justify-content: center; }
451	451
452	452	/* ====== topbar ====== */
453	453	.topbar {
454	454	background:
455	455	linear-gradient(90deg, rgba(69,10,10,.10) 0%, rgba(69,10,10,.04) 40%, rgba(12,16,24,.72) 100%),
456	456	rgba(12,16,24,.72);
457	457	border-bottom: 1px solid rgba(69,10,10,.22);
458	458	height: var(--topbar-height);
459	459	display: flex; align-items: center;
460	460	padding: 0 20px;
461	461	gap: 14px;
462	462	position: sticky;
463	463	top: 0;
464	464	z-index: 50;
465	465	box-shadow: 0 8px 24px rgba(69,10,10,.04);
466	466	}
467	467	.topbar-search:focus-within {
468	468	border-color: var(--col-brand-1);
469	469	box-shadow: 0 0 0 3px rgba(69,10,10,.16), 0 0 14px rgba(69,10,10,.18);
470	470	}
471	471	/* (topbar-title gradient defined below near .page-header) */
472	472	.topbar-spacer { flex: 1; }
473	473	.topbar-search { display: flex; align-items: center; gap: 8px; background: var(--col-bg-2); border: 1px solid var(--col-border); padding: 6px 12px; border-radius: var(--radius-sm); width: 320px; max-width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
474	474	.topbar-search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--col-text); font-size: 13px; }
475	475	.topbar-search svg { width: 14px; height: 14px; color: var(--col-text-dim); }
476	476	.topbar-actions { display: flex; align-items: center; gap: 8px; }
477	477	.topbar-iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--col-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; position: relative; transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
478	478	.topbar-iconbtn:hover { background: transparent; color: var(--col-text); border-color: var(--col-brand-2); box-shadow: 0 0 8px rgba(69,10,10,.35); }
479	479	.topbar-iconbtn svg { width: 18px; height: 18px; }
480	480	.topbar-iconbtn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--col-danger); border: 2px solid var(--col-bg-1); }
481	481
482	482	/* ====== topbar pills (Chat / Messages / Help) ====== */
483	483	.topbar-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; height: 34px; border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(69,10,10,0.10), rgba(69,10,10,0.04)); border: 1px solid rgba(69,10,10,0.25); color: var(--col-text); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); position: relative; }
484	484	.topbar-pill:hover { color: #fff; border-color: rgba(69,10,10,0.65); background: linear-gradient(180deg, rgba(69,10,10,0.18), rgba(69,10,10,0.08)); box-shadow: 0 0 0 3px rgba(69,10,10,0.10); }
485	485	.topbar-pill svg { width: 14px; height: 14px; color: #450a0a; }
486	486	.topbar-pill.tp-active { color: #fff; border-color: rgba(69,10,10,0.6); background: rgba(69,10,10,0.10); }
487	487	.topbar-pill .tp-badge { background: var(--col-danger, #991b1b); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; min-width: 16px; text-align: center; line-height: 1.35; }
488	488	.topbar-pill .tp-chev { opacity: 0.7; margin-left: 1px; }
489	489	button.topbar-pill { font-family: inherit; }
490	490
491	491	/* Attention-grabbing pulse for the admin Support-queue pill when there are
492	492	unread admin threads. Border + glow ripple so the admin sees it the moment
493	493	they hit any page. Stays subtle when nothing's pending (no class applied). */
494	494	.topbar-pill.tp-attention {
495	495	color: #fff;
496	496	border-color: rgba(124, 45, 18, 0.7);
497	497	background: rgba(124, 45, 18, 0.18);
498	498	animation: tp-attention-pulse 1.6s ease-in-out infinite;
499	499	position: relative;
500	500	}
501	501	.topbar-pill.tp-attention:hover {
502	502	border-color: rgba(124, 45, 18, 0.95);
503	503	background: rgba(124, 45, 18, 0.28);
504	504	}
505	505	.topbar-pill.tp-attention .tp-badge {
506	506	background: #b53048;
507	507	box-shadow: 0 0 0 0 rgba(77, 14, 21, 0.55);
508	508	animation: tp-attention-dot 1.6s ease-in-out infinite;
509	509	}
510	510	.topbar-pill .tp-pulse-dot {
511	511	position: absolute;
512	512	top: 6px; right: 6px;
513	513	width: 8px; height: 8px;
514	514	border-radius: 50%;
515	515	background: #b53048;
516	516	box-shadow: 0 0 0 0 rgba(77, 14, 21, 0.75);
517	517	animation: tp-attention-dot 1.6s ease-in-out infinite;
518	518	}
519	519	@keyframes tp-attention-pulse {
520	520	0%, 100% { box-shadow: 0 0 0 0 rgba(77, 14, 21, 0.0); }
521	521	50% { box-shadow: 0 0 0 4px rgba(77, 14, 21, 0.18); }
522	522	}
523	523	@keyframes tp-attention-dot {
524	524	0%, 100% { box-shadow: 0 0 0 0 rgba(77, 14, 21, 0.60); }
525	525	50% { box-shadow: 0 0 0 6px rgba(77, 14, 21, 0.00); }
526	526	}
527	527
528	528	/* Help dropdown */
529	529	.topbar-help-menu { position: relative; }
530	530	.topbar-help-menu .topbar-help-dropdown {
531	531	display: none; position: absolute; right: 0; top: calc(100% + 6px);
532	532	min-width: 260px; background: var(--col-bg-2, #080604);
533	533	border: 1px solid var(--col-border); border-radius: var(--radius-md, 8px);
534	534	box-shadow: 0 12px 28px rgba(0,0,0,0.45); padding: 4px 0; z-index: 1000;
535	535	}
536	536	/* Invisible bridge — covers the 6px gap between the trigger button and the
537	537	dropdown so mouse-out doesn't fire before the cursor reaches the menu.
538	538	Hovering the bridge still hovers the dropdown's parent, so the menu
539	539	stays open while the cursor crosses. */
540	540	.topbar-help-menu .topbar-help-dropdown::before {
541	541	content: ''; position: absolute;
542	542	top: -10px; left: 0; right: 0; height: 10px;
543	543	}
544	544	.topbar-help-menu:hover .topbar-help-dropdown,
545	545	.topbar-help-menu:focus-within .topbar-help-dropdown { display: block; }
546	546	.topbar-help-dropdown .thd-section { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--col-text-dim); padding: 12px 16px 6px; }
547	547	.topbar-help-dropdown a {
548	548	display: flex; align-items: center; gap: 9px;
549	549	padding: 9px 16px; font-size: 13px; font-weight: 500;
550	550	color: var(--col-text); text-decoration: none;
551	551	transition: background var(--t-fast), color var(--t-fast);
552	552	}
553	553	.topbar-help-dropdown a svg { opacity: 0.8; }
554	554	.topbar-help-dropdown a:hover { background: rgba(69,10,10,0.08); color: var(--col-accent, #450a0a); }
555	555	.topbar-help-dropdown a.thd-primary { color: var(--col-accent, #450a0a); }
556	556	.topbar-help-dropdown a .thd-badge { margin-left: auto; background: var(--col-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
557	557
558	558	/* ====== avatar / profile dropdown ====== */
559	559	.avatar {
560	560	width: 32px; height: 32px;
561	561	border-radius: 50%;
562	562	background: var(--col-primary);
563	563	display: grid; place-items: center;
564	564	font-size: 12px; font-weight: 600; color: #fff;
565	565	text-transform: uppercase;
566	566	}
567	567	.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
568	568	.avatar-lg { width: 44px; height: 44px; font-size: 16px; }
569	569	.avatar-xl { width: 64px; height: 64px; font-size: 22px; }
570	570
571	571	.profile-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--col-text); }
572	572	.profile-btn:hover { background: var(--col-surface-3); }
573	573
574	574	.profile-dropdown { position: relative; }
575	575	.profile-dropdown-menu {
576	576	position: absolute; right: 0; top: calc(100% + 6px);
577	577	background:
578	578	radial-gradient(220px 140px at 100% 0%, rgba(69,10,10,.10) 0%, transparent 70%),
579	579	radial-gradient(220px 160px at 0% 100%, rgba(69,10,10,.08) 0%, transparent 70%),
580	580	var(--col-surface);
581	581	border: 1px solid var(--col-border);
582	582	border-top: 1px solid transparent;
583	583	border-radius: var(--radius);
584	584	min-width: 240px;
585	585	box-shadow: var(--shadow-lg), 0 0 0 1px rgba(69,10,10,.10);
586	586	padding: 6px;
587	587	display: none;
588	588	z-index: 100;
589	589	position: absolute;
590	590	background-clip: padding-box;
591	591	max-height: calc(100vh - 90px);
592	592	overflow-y: auto;
593	593	}
594	594	.profile-dropdown-menu::before {
595	595	content: '';
596	596	position: absolute;
597	597	left: 10px; right: 10px; top: -1px;
598	598	height: 2px;
599	599	border-radius: 2px;
600	600	background: var(--grad-brand-h);
601	601	opacity: .7;
602	602	}
603	603	.profile-dropdown-menu.open { display: block; }
604	604	.profile-dropdown-menu a {
605	605	display: flex; align-items: center; gap: 10px;
606	606	padding: 8px 10px;
607	607	color: var(--col-text);
608	608	text-decoration: none;
609	609	border-radius: 5px;
610	610	font-size: 13px;
611	611	}
612	612	.profile-dropdown-menu a:hover { background: var(--col-surface-3); }
613	613	.profile-dropdown-menu a.profile-admin { color: #f97316; }
614	614	.profile-dropdown-section { padding: 8px 10px 4px; font-size: 10.5px; text-transform: uppercase; color: var(--col-text-dim); letter-spacing: .08em; font-weight: 600; }
615	615	.profile-dropdown-divider { height: 1px; background: var(--col-border); margin: 4px 0; }
616	616	.profile-dropdown-icon { width: 16px; height: 16px; color: var(--col-text-muted); }
617	617
618	618	/* ====== main area ====== */
619	619	.app-main { display: flex; flex-direction: column; min-width: 0; }
620	620	.app-content { padding: 24px; flex: 1; min-width: 0; }
621	621
622	622	.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
623	623	.page-header h1 {
624	624	margin: 0;
625	625	background: linear-gradient(135deg, #fff 0%, #fff 35%, var(--col-brand-2) 75%, var(--col-brand-1) 100%);
626	626	-webkit-background-clip: text;
627	627	background-clip: text;
628	628	-webkit-text-fill-color: transparent;
629	629	letter-spacing: -.01em;
630	630	}
631	631	.page-header .subtitle { color: var(--col-text-muted); font-size: 13.5px; margin: 4px 0 0; }
632	632	.topbar-title {
633	633	font-family: var(--font-display); font-weight: 700; font-size: 16px;
634	634	background: linear-gradient(135deg, #fff 0%, var(--col-brand-2) 100%);
635	635	-webkit-background-clip: text;
636	636	background-clip: text;
637	637	-webkit-text-fill-color: transparent;
638	638	}
639	639
640	640	.crumbs { font-size: 12.5px; color: var(--col-text-dim); margin-bottom: 4px; }
641	641	.crumbs a { color: var(--col-text-dim); }
642	642	.crumbs a:hover { color: var(--col-text); }
643	643	.crumbs .sep { margin: 0 6px; }
644	644
645	645	/* ====== KPI tiles ====== */
646	646	.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
647	647	.kpi {
648	648	background:
649	649	linear-gradient(140deg, rgba(69,10,10,.10) 0%, transparent 55%),
650	650	var(--col-surface);
651	651	border: 1px solid rgba(69,10,10,.22);
652	652	border-radius: var(--radius);
653	653	padding: 16px 18px;
654	654	position: relative;
655	655	overflow: hidden;
656	656	box-shadow: 0 8px 24px rgba(69,10,10,.06);
657	657	transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
658	658	}
659	659	.kpi:hover {
660	660	border-color: rgba(69,10,10,.45);
661	661	box-shadow: 0 10px 30px rgba(69,10,10,.12);
662	662	transform: translateY(-1px);
663	663	}
664	664	.kpi::before {
665	665	content: '';
666	666	position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
667	667	background: var(--grad-brand);
668	668	}
669	669	.kpi.success::before { background: var(--col-success); }
670	670	.kpi.warn::before { background: var(--col-warn); }
671	671	.kpi.danger::before { background: var(--col-danger); }
672	672	.kpi.accent::before { background: var(--grad-brand); }
673	673	.kpi.brand::before { background: var(--grad-brand); }
674	674	.kpi-label { font-size: 11.5px; text-transform: uppercase; color: var(--col-text-muted); letter-spacing: .06em; font-weight: 500; }
675	675	.kpi-value {
676	676	font-size: 26px; font-weight: 700; margin: 6px 0 4px; font-family: var(--font-display);
677	677	background: linear-gradient(135deg, #fff 0%, var(--col-brand-2) 130%);
678	678	-webkit-background-clip: text;
679	679	background-clip: text;
680	680	-webkit-text-fill-color: transparent;
681	681	}
682	682	.kpi-delta { font-size: 12px; color: var(--col-text-dim); display: flex; align-items: center; gap: 4px; }
683	683	.kpi-delta.up { color: var(--col-success); }
684	684	.kpi-delta.down { color: var(--col-danger); }
685	685
686	686	/* ====== tables ====== */
687	687	.table { width: 100%; border-collapse: collapse; }
688	688	.table th, .table td {
689	689	padding: 10px 14px;
690	690	text-align: left;
691	691	border-bottom: 1px solid var(--col-border);
692	692	font-size: 13.5px;
693	693	}
694	694	.table th {
695	695	color: var(--col-brand-2);
696	696	font-weight: 600;
697	697	font-size: 12px;
698	698	text-transform: uppercase;
699	699	letter-spacing: .06em;
700	700	background: linear-gradient(180deg, rgba(69,10,10,.06) 0%, rgba(69,10,10,.04) 100%), var(--col-bg-1);
701	701	border-bottom-color: rgba(69,10,10,.22);
702	702	}
703	703	.table tbody tr:hover { background: rgba(69,10,10,.05); }
704	704	.table tbody tr.clickable { cursor: pointer; }
705	705
706	706	/* ====== sectioned layouts (auth + simple panels) ====== */
707	707	.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--col-bg-0); }
708	708	.auth-side {
709	709	background: linear-gradient(135deg, var(--col-bg-1) 0%, var(--col-surface) 50%, var(--col-bg-2) 100%);
710	710	padding: 56px 48px;
711	711	display: flex; flex-direction: column; justify-content: flex-start; gap: 32px;
712	712	border-right: 1px solid var(--col-border);
713	713	position: relative; overflow: hidden;
714	714	}
715	715	.auth-side::after {
716	716	content: '';
717	717	position: absolute; right: -120px; bottom: -120px;
718	718	width: 400px; height: 400px;
719	719	background:
720	720	radial-gradient(circle at 35% 40%, rgba(69,10,10,.22) 0%, transparent 55%),
721	721	radial-gradient(circle at 65% 60%, rgba(69,10,10,.18) 0%, transparent 60%);
722	722	pointer-events: none;
723	723	}
724	724	.auth-side .brand { display: flex; align-items: center; gap: 12px; }
725	725	.auth-side .brand .logo { width: 38px; height: 38px; border-radius: 10px; background: #2d1810; border: 1px solid #fff; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 18px; box-shadow: 0 8px 26px var(--col-brand-glow); }
726	726	.auth-side .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
727	727	.auth-headline { max-width: 480px; }
728	728	.auth-headline h1 { font-size: 38px; line-height: 1.15; margin-bottom: 12px; }
729	729	.auth-headline p { font-size: 16px; color: var(--col-text-muted); line-height: 1.55; }
730	730	.auth-quote { font-size: 13.5px; color: var(--col-text-muted); border-left: 2px solid var(--col-brand-1); padding-left: 14px; }
731	731
732	732	.auth-form-wrap { padding: 56px 48px; display: flex; align-items: center; justify-content: center; }
733	733	.auth-form-inner { width: 100%; max-width: 380px; }
734	734	.auth-form-inner h2 { font-size: 22px; margin-bottom: 6px; }
735	735	.auth-form-inner > p { color: var(--col-text-muted); margin-bottom: 28px; }
736	736	.auth-form-inner .form-footer { margin-top: 18px; text-align: center; font-size: 13px; color: var(--col-text-muted); }
737	737
738	738	@media (max-width: 880px) {
739	739	.auth-shell { grid-template-columns: 1fr; }
740	740	.auth-side { display: none; }
741	741	}
742	742
743	743	/* ====== marketing pages ====== */
744	744	.marketing-nav { display: flex; align-items: center; padding: 18px 32px; gap: 24px; max-width: 1200px; margin: 0; }
745	745	.marketing-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
746	746	.marketing-nav .brand .logo { width: 38px; height: 38px; border-radius: 10px; background: #2d1810; border: 1px solid #fff; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 18px; position: relative; box-shadow: 0 6px 20px rgba(77,14,21,0.40); }
747	747	.marketing-nav .brand .logo::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, #4d0e15 0%, #f87171 100%); filter: blur(12px); opacity: 0.32; z-index: -1; }
748	748	.marketing-nav .brand .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--col-text); }
749	749	.marketing-nav .nav-links { display: flex; gap: 18px; margin-left: 30px; }
750	750	.marketing-nav .nav-links a { color: var(--col-text-muted); font-size: 14px; }
751	751	.marketing-nav .nav-links a:hover { color: var(--col-text); }
752	752	.marketing-nav .spacer { flex: 1; }
753	753	.marketing-nav .actions { display: flex; gap: 10px; align-items: center; }
754	754
755	755	.hero {
756	756	position: relative;
757	757	padding: 80px 32px 100px;
758	758	text-align: center;
759	759	overflow: hidden;
760	760	}
761	761	.hero::before {
762	762	content: '';
763	763	position: absolute; inset: 0;
764	764	background:
765	765	radial-gradient(circle at 22% 18%, rgba(69,10,10,.22) 0%, transparent 42%),
766	766	radial-gradient(circle at 78% 78%, rgba(69,10,10,.20) 0%, transparent 48%),
767	767	radial-gradient(circle at 50% 50%, rgba(69,10,10,.08) 0%, transparent 60%);
768	768	pointer-events: none;
769	769	}
770	770	.hero-inner { max-width: 880px; margin: 0 auto; position: relative; }
771	771	.hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 18px; }
772	772	.hero h1 .grad { background: linear-gradient(90deg, #c95560 0%, #5e1c25 50%, #c95560 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
773	773	.hero p.lead { font-size: 19px; color: var(--col-text-muted); max-width: 640px; margin: 0 auto 28px; }
774	774	.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
775	775	.hero .trust-bar { margin-top: 56px; color: var(--col-text-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; }
776	776
777	777	.section { padding: 56px 32px; max-width: 1720px; margin: 0 auto; }
778	778	.section h2 { font-size: 36px; text-align: center; margin-bottom: 12px; }
779	779	.section .section-lead { text-align: center; font-size: 17px; color: var(--col-text-muted); margin-bottom: 36px; max-width: 660px; margin-left: auto; margin-right: auto; }
780	780
781	781	.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
782	782	.feature {
783	783	background: var(--col-surface);
784	784	border: 1px solid var(--col-border);
785	785	border-radius: var(--radius-lg);
786	786	padding: 28px;
787	787	transition: transform var(--t), border-color var(--t);
788	788	}
789	789	.feature:hover { transform: translateY(-2px); border-color: rgba(69,10,10,.45); box-shadow: 0 10px 30px rgba(69,10,10,.12); }
790	790	.feature .icon { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, rgba(69,10,10,.32), rgba(69,10,10,.20)); color: #ffb8c0; display: grid; place-items: center; margin-bottom: 16px; box-shadow: 0 0 16px rgba(69,10,10,.35); }
791	791	.feature .icon svg { width: 22px; height: 22px; }
792	792	.feature h3 { font-size: 17px; margin-bottom: 8px; }
793	793	.feature p { font-size: 14px; color: var(--col-text-muted); }
794	794
795	795	/* pricing cards */
796	796	.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)); gap: 18px; max-width: 1720px; margin: 0 auto; }
797	797	.pricing-card {
798	798	background: var(--col-surface);
799	799	border: 1px solid var(--col-border);
800	800	border-radius: var(--radius-lg);
801	801	padding: 28px 24px;
802	802	position: relative;
803	803	display: flex; flex-direction: column;
804	804	}
805	805	.pricing-card.featured { border-color: rgba(69,10,10,.55); box-shadow: 0 12px 40px rgba(69,10,10,.20), 0 0 0 1px rgba(69,10,10,.20); transform: translateY(-4px); }
806	806	.pricing-card .featured-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--grad-brand); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 4px 14px var(--col-brand-glow); }
807	807	.pricing-card .discount-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #16a34a, #aaff00); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(170,255,0,.35); }
808	808	.pricing-card .price-original { text-decoration: line-through; color: var(--col-text-dim); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
809	809	.pricing-card .discount-label { font-size: 12px; color: #aaff00; font-weight: 600; margin-top: 4px; margin-bottom: 6px; }
810	810	.pricing-card .feature-extras { margin-top: -8px; margin-bottom: 12px; }
811	811	.pricing-card .feature-extras > summary { cursor: pointer; list-style: none; color: var(--col-text-muted); font-size: 12.5px; padding: 6px 0; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
812	812	.pricing-card .feature-extras > summary::-webkit-details-marker { display: none; }
813	813	.pricing-card .feature-extras > summary::before { content: '\25B8'; display: inline-block; transition: transform .15s ease; font-size: 10px; }
814	814	.pricing-card .feature-extras[open] > summary::before { transform: rotate(90deg); }
815	815	.pricing-card .feature-extras > summary:hover { color: var(--col-text); }
816	816	.pricing-card .feature-extras > ul { margin-top: 4px; }
817	817	.pricing-card h3 { font-size: 17px; }
818	818	.pricing-card .price { font-size: 38px; font-weight: 700; margin: 14px 0 2px; font-family: var(--font-display); }
819	819	.pricing-card .price small { font-size: 14px; font-weight: 400; color: var(--col-text-muted); }
820	820	.pricing-card .tagline { color: var(--col-text-muted); font-size: 13px; margin-bottom: 18px; min-height: 2.4em; }
821	821	.pricing-card ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
822	822	.pricing-card li { font-size: 13.5px; padding: 6px 0; display: flex; align-items: start; gap: 8px; color: var(--col-text-muted); }
823	823	.pricing-card li.included { color: var(--col-text); }
824	824	.pricing-card li::before {
825	825	content: '';
826	826	width: 14px; height: 14px;
827	827	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
828	828	background-repeat: no-repeat;
829	829	background-position: center;
830	830	background-size: contain;
831	831	flex-shrink: 0;
832	832	margin-top: 3px;
833	833	}
834	834	.pricing-card li:not(.included)::before {
835	835	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a0b3' stroke-width='2'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
836	836	opacity: .5;
837	837	}
838	838
839	839	footer.site-footer {
840	840	padding: 40px 32px;
841	841	border-top: 1px solid var(--col-border);
842	842	color: var(--col-text-dim);
843	843	font-size: 13px;
844	844	text-align: center;
845	845	}
846	846	footer.site-footer a { color: var(--col-text-muted); }
847	847
848	848	/* ====== impersonation banner ====== */
849	849	.impersonation-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; background: var(--col-warn); color: #1a1303; font-size: 13px; font-weight: 600; }
850	850	.impersonation-banner-msg { display: flex; align-items: center; gap: 8px; }
851	851	.impersonation-banner-stop { background: rgba(0,0,0,.2); color: #1a1303; border: 1px solid rgba(0,0,0,.25); border-radius: 4px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
852	852	.impersonation-banner-stop:hover { background: rgba(0,0,0,.3); }
853	853
854	854	/* ====== trial banner ====== */
855	855	.trial-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 13px; }
856	856	.trial-banner a { font-weight: 600; text-decoration: underline; }
857	857	.trial-banner-gentle { background: linear-gradient(135deg, rgba(69,10,10,.14), rgba(69,10,10,.06)); border: 1px solid rgba(69,10,10,.30); color: #c7dbf0; }
858	858	.trial-banner-gentle a { color: #450a0a; }
859	859	.trial-banner-amber { background: linear-gradient(135deg, rgba(69,10,10,.16), rgba(69,10,10,.06)); border: 1px solid rgba(69,10,10,.40); color: #fbd38d; }
860	860	.trial-banner-amber a { color: #991b1b; }
861	861	.trial-banner-red { background: linear-gradient(135deg, rgba(77,14,21,.18), rgba(77,14,21,.07)); border: 1px solid rgba(77,14,21,.45); color: #fca5a5; }
862	862	.trial-banner-red a { color: #f87171; }
863	863
864	864	/* ====== kanban board ====== */
865	865	.kanban-board { display: flex; gap: 14px; padding: 8px; overflow-x: auto; min-height: calc(100vh - 200px); }
866	866	.kanban-column {
867	867	flex: 0 0 300px;
868	868	background: var(--col-bg-1);
869	869	border: 1px solid var(--col-border);
870	870	border-radius: var(--radius);
871	871	display: flex; flex-direction: column;
872	872	max-height: calc(100vh - 200px);
873	873	}
874	874	.kanban-column-header { padding: 12px 14px; border-bottom: 1px solid var(--col-border); display: flex; align-items: center; gap: 8px; }
875	875	.kanban-column-header .dot { width: 9px; height: 9px; border-radius: 50%; }
876	876	.kanban-column-header .title { font-weight: 600; font-size: 13.5px; flex: 1; }
877	877	.kanban-column-header .count { font-size: 11.5px; color: var(--col-text-dim); background: var(--col-bg-3); padding: 2px 7px; border-radius: 999px; }
878	878	.kanban-column-body { padding: 10px; overflow-y: auto; flex: 1; min-height: 60px; }
879	879	.kanban-column.drag-over { background: var(--col-surface-3); border-color: var(--col-brand-1); box-shadow: 0 0 0 3px rgba(69,10,10,.18); }
880	880
881	881	.kanban-card {
882	882	background: var(--col-surface);
883	883	border: 1px solid var(--col-border);
884	884	border-left: 3px solid var(--col-primary);
885	885	border-radius: 8px;
886	886	padding: 10px 12px;
887	887	margin-bottom: 8px;
888	888	cursor: grab;
889	889	transition: transform var(--t-fast), box-shadow var(--t-fast);
890	890	user-select: none;
891	891	-webkit-user-select: none;
892	892	/* Kill the iOS long-press callout (Copy / Share / Save) AND the Android
893	893	text-selection menu. Without this, a long-press on a kanban card pops
894	894	the native context menu instead of arming our drag. */
895	895	-webkit-touch-callout: none;
896	896	/* Prevent iOS Safari from activating its system drag-and-drop on
897	897	long-press (which shows its own Download/Share/Print context menu).
898	898	Belt-and-suspenders: also remove `draggable` from the template HTML. */
899	899	-webkit-user-drag: none;
900	900	}
901	901	.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
902	902	.kanban-card.dragging { opacity: .5; cursor: grabbing; }
903	903	/* Long-press pickup cue on touch -- card lifts slightly + glows before the
904	904	user starts moving, so they know the drag is "armed". */
905	905	.kanban-card.kanban-card-armed {
906	906	transform: scale(1.04);
907	907	box-shadow: 0 8px 24px rgba(69,10,10,.45), 0 0 0 1px rgba(69,10,10,.55);
908	908	}
909	909	.kanban-card .ticket { font-size: 10.5px; color: var(--col-text-dim); font-family: var(--font-mono); font-weight: 600; letter-spacing: .03em; }
910	910	.kanban-card .title { font-size: 13.5px; margin: 4px 0 8px; line-height: 1.35; color: var(--col-text); }
911	911	.kanban-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--col-text-dim); }
912	912	.kanban-card .labels { display: flex; gap: 4px; }
913	913	.kanban-card .label-pill { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
914	914	.kanban-add-task { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--col-text-dim); cursor: pointer; border-radius: 6px; font-size: 13px; }
915	915	.kanban-add-task:hover { background: var(--col-surface-3); color: var(--col-text); }
916	916
917	917	/* ====== gantt chart ====== */
918	918	.gantt-wrap { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--radius); overflow: hidden; }
919	919	.gantt-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--col-border); background: var(--col-bg-1); }
920	920	.gantt-scroll { overflow: auto; max-height: calc(100vh - 240px); }
921	921	.gantt-table { display: grid; min-width: 100%; }
922	922	.gantt-row { display: contents; }
923	923	.gantt-cell { border-bottom: 1px solid var(--col-border); padding: 6px 10px; font-size: 13px; min-height: 32px; box-sizing: border-box; }
924	924	.gantt-cell.head { background: var(--col-bg-1); position: sticky; top: 0; z-index: 2; font-size: 11px; text-transform: uppercase; color: var(--col-text-muted); }
925	925	.gantt-task-label { font-weight: 500; }
926	926	.gantt-bar-area { position: relative; overflow: hidden; padding: 0 !important; min-height: 32px; }
927	927	.gantt-bar {
928	928	position: absolute; top: 6px; height: 20px;
929	929	background: linear-gradient(90deg, var(--col-primary) 0%, var(--col-primary-2) 100%);
930	930	border-radius: 5px;
931	931	color: #fff;
932	932	font-size: 11px;
933	933	padding: 2px 7px;
934	934	cursor: pointer;
935	935	box-shadow: 0 1px 3px rgba(0,0,0,.3);
936	936	white-space: nowrap;
937	937	overflow: hidden;
938	938	text-overflow: ellipsis;
939	939	}
940	940	.gantt-bar:hover { transform: translateY(-1px); }
941	941	.gantt-bar-overdue {
942	942	position: absolute; top: 6px; height: 20px;
943	943	border-radius: 5px;
944	944	pointer-events: none;
945	945	background: repeating-linear-gradient(45deg,
946	946	rgba(77,14,21, 0.28) 0,
947	947	rgba(77,14,21, 0.28) 6px,
948	948	rgba(77, 14, 21, 0.45) 6px,
949	949	rgba(77, 14, 21, 0.45) 12px);
950	950	border: 1px solid rgba(77, 14, 21, 0.55);
951	951	box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
952	952	}
953	953	.gantt-bar-overdue::after {
954	954	content: '';
955	955	position: absolute;
956	956	top: 50%; left: 6px; transform: translateY(-50%);
957	957	width: 6px; height: 6px;
958	958	border-radius: 50%;
959	959	background: var(--col-danger);
960	960	box-shadow: 0 0 6px rgba(77,14,21,.7);
961	961	animation: tf-overdue-pulse 1.8s ease-in-out infinite;
962	962	}
963	963	@keyframes tf-overdue-pulse {
964	964	0%, 100% { opacity: .55; transform: translateY(-50%) scale(.85); }
965	965	50% { opacity: 1; transform: translateY(-50%) scale(1.15); }
966	966	}
967	967
968	968	/* Same style for the company-level Gantt overview project bars */
969	969	.gantt-ov-overdue {
970	970	position: absolute; top: 9px; height: 26px;
971	971	border-radius: 6px;
972	972	pointer-events: none;
973	973	background: repeating-linear-gradient(45deg,
974	974	rgba(77,14,21, 0.28) 0,
975	975	rgba(77,14,21, 0.28) 6px,
976	976	rgba(77, 14, 21, 0.45) 6px,
977	977	rgba(77, 14, 21, 0.45) 12px);
978	978	border: 1px solid rgba(77, 14, 21, 0.55);
979	979	}
980	980	.gantt-ov-overdue::after {
981	981	content: '';
982	982	position: absolute;
983	983	top: 50%; left: 7px; transform: translateY(-50%);
984	984	width: 7px; height: 7px;
985	985	border-radius: 50%;
986	986	background: var(--col-danger);
987	987	box-shadow: 0 0 7px rgba(77,14,21,.7);
988	988	animation: tf-overdue-pulse 1.8s ease-in-out infinite;
989	989	}
990	990	.gantt-grid-vline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--col-border); }
991	991	.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--col-warn); z-index: 1; }
992	992	.gantt-dep-line { position: absolute; pointer-events: none; }
993	993
994	994	/* ====== modal ====== */
995	995	.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; }
996	996	.modal-backdrop.open { display: flex; }
997	997	.modal {
998	998	background:
999	999	radial-gradient(420px 280px at 100% 0%, rgba(69,10,10,.10) 0%, transparent 60%),
1000	1000	radial-gradient(420px 280px at 0% 100%, rgba(69,10,10,.08) 0%, transparent 60%),
1001	1001	var(--col-surface);
1002	1002	border: 1px solid var(--col-border);
1003	1003	border-radius: var(--radius-lg);
1004	1004	width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
1005	1005	box-shadow: var(--shadow-lg), 0 0 0 1px rgba(69,10,10,.10), 0 0 40px rgba(69,10,10,.10);
1006	1006	position: relative;
1007	1007	background-clip: padding-box;
1008	1008	}
1009	1009	.modal::before {
1010	1010	content: '';
1011	1011	position: absolute;
1012	1012	left: 0; right: 0; top: 0;
1013	1013	height: 2px;
1014	1014	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
1015	1015	background: var(--grad-brand-h);
1016	1016	opacity: .75;
1017	1017	pointer-events: none;
1018	1018	}
1019	1019	.modal.modal-lg { max-width: 880px; }
1020	1020	.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--col-border); display: flex; align-items: center; justify-content: space-between; }
1021	1021	.modal-header h2 { margin: 0; font-size: 18px; }
1022	1022	.modal-close { background: transparent; border: 0; color: var(--col-text-muted); cursor: pointer; padding: 4px; }
1023	1023	.modal-body { padding: 22px; }
1024	1024	.modal-footer { padding: 16px 22px; border-top: 1px solid var(--col-border); display: flex; justify-content: flex-end; gap: 10px; }
1025	1025
1026	1026	/* ====== task detail ====== */
1027	1027	.task-detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
1028	1028	@media (max-width: 920px) { .task-detail-grid { grid-template-columns: 1fr; } }
1029	1029	.task-meta-table { width: 100%; font-size: 13px; }
1030	1030	.task-meta-table td { padding: 6px 8px; vertical-align: top; }
1031	1031	.task-meta-table td.lbl { color: var(--col-text-muted); width: 40%; }
1032	1032	.comment { background: var(--col-bg-1); border: 1px solid var(--col-border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
1033	1033	.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--col-text-muted); }
1034	1034	.comment-body { font-size: 13.5px; white-space: pre-wrap; }
1035	1035
1036	1036	/* ====== custom color picker ====== */
1037	1037	.tf-picker-swatch {
1038	1038	display: inline-flex; align-items: center; gap: 8px;
1039	1039	height: 38px; padding: 0 12px;
1040	1040	border-radius: var(--radius-sm);
1041	1041	border: 1px solid var(--col-border-2);
1042	1042	background: var(--col-primary);
1043	1043	color: #fff;
1044	1044	font-family: var(--font-mono);
1045	1045	font-size: 12px;
1046	1046	cursor: pointer;
1047	1047	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
1048	1048	transition: transform var(--t-fast);
1049	1049	}
1050	1050	.tf-picker-swatch:hover { transform: translateY(-1px); }
1051	1051	.tf-picker-swatch .tf-picker-hex-label {
1052	1052	padding: 2px 6px;
1053	1053	background: rgba(0,0,0,.45);
1054	1054	border-radius: 4px;
1055	1055	text-shadow: 0 1px 1px rgba(0,0,0,.4);
1056	1056	}
1057	1057	.tf-picker-panel {
1058	1058	position: absolute; z-index: 10000;
1059	1059	min-width: 280px; max-width: 320px;
1060	1060	padding: 12px;
1061	1061	background: linear-gradient(135deg, rgba(20,27,45,.98) 0%, rgba(28,22,52,.98) 100%);
1062	1062	border: 1px solid var(--col-border-2);
1063	1063	border-radius: var(--radius);
1064	1064	box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(69,10,10,.25), 0 0 28px rgba(179,0,255,.2);
1065	1065	backdrop-filter: blur(10px);
1066	1066	opacity: 0;
1067	1067	transform: translateY(6px) scale(.98);
1068	1068	pointer-events: none;
1069	1069	transition: opacity 150ms ease-out, transform 150ms ease-out;
1070	1070	}
1071	1071	.tf-picker-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
1072	1072	.tf-picker-sv {
1073	1073	position: relative;
1074	1074	width: 200px; height: 140px;
1075	1075	border-radius: 6px;
1076	1076	cursor: crosshair;
1077	1077	background:
1078	1078	linear-gradient(to top, #000, transparent),
1079	1079	linear-gradient(to right, #fff, hsl(210,100%,50%));
1080	1080	overflow: hidden;
1081	1081	}
1082	1082	.tf-picker-sv-handle {
1083	1083	position: absolute;
1084	1084	width: 14px; height: 14px;
1085	1085	border: 2px solid #fff;
1086	1086	border-radius: 50%;
1087	1087	margin: -7px 0 0 -7px;
1088	1088	box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.5);
1089	1089	pointer-events: none;
1090	1090	}
1091	1091	.tf-picker-hue-wrap { display: flex; align-items: stretch; }
1092	1092	.tf-picker-hue {
1093	1093	position: relative;
1094	1094	width: 18px; height: 140px;
1095	1095	border-radius: 4px;
1096	1096	cursor: ns-resize;
1097	1097	background: linear-gradient(to bottom,
1098	1098	#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
1099	1099	#0000ff 67%, #ff00ff 83%, #ff0000 100%);
1100	1100	}
1101	1101	.tf-picker-hue-handle {
1102	1102	position: absolute; left: -3px; width: 24px; height: 6px;
1103	1103	border-radius: 3px; background: #fff; border: 1px solid rgba(0,0,0,.4);
1104	1104	margin-top: -3px;
1105	1105	box-shadow: 0 1px 3px rgba(0,0,0,.5);
1106	1106	pointer-events: none;
1107	1107	}
1108	1108	.tf-picker-out {
1109	1109	display: flex; align-items: center; gap: 8px; margin-top: 10px;
1110	1110	}
1111	1111	.tf-picker-preview {
1112	1112	width: 36px; height: 28px;
1113	1113	border-radius: 5px;
1114	1114	border: 1px solid rgba(255,255,255,.1);
1115	1115	box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
1116	1116	background: var(--col-primary);
1117	1117	}
1118	1118	.tf-picker-hex {
1119	1119	flex: 1;
1120	1120	height: 28px;
1121	1121	background: var(--col-bg-1);
1122	1122	border: 1px solid var(--col-border);
1123	1123	color: var(--col-text);
1124	1124	padding: 0 8px;
1125	1125	font-family: var(--font-mono);
1126	1126	font-size: 12px;
1127	1127	border-radius: 5px;
1128	1128	text-transform: lowercase;
1129	1129	}
1130	1130	.tf-picker-hex:focus { outline: none; border-color: var(--col-brand-1); box-shadow: 0 0 0 2px rgba(69,10,10,.22); }
1131	1131	.tf-picker-label {
1132	1132	font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
1133	1133	color: var(--col-text-dim); margin: 12px 0 6px; font-weight: 600;
1134	1134	}
1135	1135	.tf-picker-grid {
1136	1136	display: grid;
1137	1137	grid-template-columns: repeat(12, 1fr);
1138	1138	gap: 4px;
1139	1139	}
1140	1140	.tf-picker-cell {
1141	1141	width: 100%; aspect-ratio: 1/1; min-height: 18px;
1142	1142	border-radius: 4px;
1143	1143	border: 1px solid rgba(255,255,255,.06);
1144	1144	cursor: pointer;
1145	1145	box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
1146	1146	transition: transform 80ms ease-out;
1147	1147	padding: 0;
1148	1148	}
1149	1149	.tf-picker-cell:hover { transform: scale(1.15); border-color: rgba(255,255,255,.4); z-index: 1; }
1150	1150
1151	1151	/* Compact swatch variant for inline use in forms */
1152	1152	.tf-picker-compact .tf-picker-swatch { height: 32px; padding: 0 8px; font-size: 11px; }
1153	1153	.tf-picker-compact .tf-picker-swatch .tf-picker-hex-label { font-size: 10.5px; }
1154	1154
1155	1155	/* ====== kanban quick-edit drawer ====== */
1156	1156	.tf-drawer-backdrop {
1157	1157	position: fixed; inset: 0;
1158	1158	background: rgba(0,0,0,.45);
1159	1159	backdrop-filter: blur(3px);
1160	1160	z-index: 950;
1161	1161	opacity: 0;
1162	1162	transition: opacity 200ms ease-out;
1163	1163	pointer-events: none;
1164	1164	}
1165	1165	.tf-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
1166	1166
1167	1167	.tf-drawer {
1168	1168	position: fixed; top: 0; right: 0; bottom: 0;
1169	1169	width: 560px; max-width: 92vw;
1170	1170	background: var(--col-surface);
1171	1171	border-left: 1px solid var(--col-border-2);
1172	1172	box-shadow: -24px 0 60px rgba(0,0,0,.5);
1173	1173	transform: translateX(100%);
1174	1174	transition: transform 240ms cubic-bezier(.4,0,.2,1);
1175	1175	z-index: 960;
1176	1176	display: flex; flex-direction: column;
1177	1177	overflow: hidden;
1178	1178	}
1179	1179	.tf-drawer.open { transform: translateX(0); }
1180	1180	.tf-drawer-header {
1181	1181	display: flex; align-items: center; gap: 12px;
1182	1182	padding: 14px 18px;
1183	1183	border-bottom: 1px solid var(--col-border);
1184	1184	background: var(--col-bg-1);
1185	1185	flex-shrink: 0;
1186	1186	}
1187	1187	.tf-drawer-header .ticket {
1188	1188	font-family: var(--font-mono);
1189	1189	font-size: 11.5px;
1190	1190	color: var(--col-text-dim);
1191	1191	padding: 2px 6px;
1192	1192	background: var(--col-bg-3);
1193	1193	border-radius: 4px;
1194	1194	}
1195	1195	.tf-drawer-header h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
1196	1196	.tf-drawer-close {
1197	1197	width: 32px; height: 32px;
1198	1198	background: transparent;
1199	1199	border: 1px solid transparent;
1200	1200	color: var(--col-text-muted);
1201	1201	border-radius: 6px;
1202	1202	cursor: pointer;
1203	1203	}
1204	1204	.tf-drawer-close:hover { background: var(--col-surface-3); color: var(--col-text); }
1205	1205	.tf-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
1206	1206	.tf-drawer-footer {
1207	1207	padding: 12px 18px;
1208	1208	border-top: 1px solid var(--col-border);
1209	1209	display: flex; justify-content: space-between; align-items: center; gap: 10px;
1210	1210	background: var(--col-bg-1);
1211	1211	flex-shrink: 0;
1212	1212	}
1213	1213	.tf-drawer.loading .tf-drawer-body { opacity: .5; pointer-events: none; }
1214	1214
1215	1215	/* ====== kanban card visual rules ====== */
1216	1216	.kanban-card { position: relative; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
1217	1217	.kanban-card[data-bg-tint] {
1218	1218	background: linear-gradient(to right, var(--card-tint-color, var(--col-surface)) 0%, var(--col-surface) 100%);
1219	1219	}
1220	1220
1221	1221	/* ====== tooltips (the POP ones) ====== */
1222	1222	@keyframes tf-tip-in {
1223	1223	0% { opacity: 0; transform: translateY(6px) scale(.92); filter: blur(2px); }
1224	1224	60% { opacity: 1; transform: translateY(-1px) scale(1.02); filter: blur(0); }
1225	1225	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
1226	1226	}
1227	1227	@keyframes tf-tip-glow {
1228	1228	0%, 100% { box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(69,10,10,.4), 0 0 24px rgba(69,10,10,.25), 0 0 60px rgba(179,0,255,.18); }
1229	1229	50% { box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(179,0,255,.55), 0 0 28px rgba(179,0,255,.32), 0 0 70px rgba(69,10,10,.22); }
1230	1230	}
1231	1231
1232	1232	.tf-tip {
1233	1233	position: absolute;
1234	1234	z-index: 9999;
1235	1235	pointer-events: none;
1236	1236	max-width: 320px;
1237	1237	padding: 11px 14px 11px 18px;
1238	1238	background: linear-gradient(135deg, rgba(20,27,45,.96) 0%, rgba(28,22,52,.96) 50%, rgba(18,25,42,.96) 100%);
1239	1239	backdrop-filter: blur(10px) saturate(140%);
1240	1240	-webkit-backdrop-filter: blur(10px) saturate(140%);
1241	1241	color: #f1f6ff;
1242	1242	font-family: var(--font-display);
1243	1243	font-size: 12.5px;
1244	1244	font-weight: 500;
1245	1245	line-height: 1.5;
1246	1246	letter-spacing: .005em;
1247	1247	border-radius: 10px;
1248	1248	border: 1px solid transparent;
1249	1249	background-clip: padding-box;
1250	1250	opacity: 0;
1251	1251	transform: translateY(6px) scale(.92);
1252	1252	transition: opacity 80ms ease-out;
1253	1253	text-shadow: 0 1px 2px rgba(0,0,0,.5);
1254	1254	}
1255	1255	.tf-tip.open {
1256	1256	opacity: 1;
1257	1257	animation: tf-tip-in 240ms cubic-bezier(.22,.61,.36,1) both,
1258	1258	tf-tip-glow 3.6s ease-in-out 240ms infinite;
1259	1259	}
1260	1260	.tf-tip strong { color: #fff; font-weight: 600; }
1261	1261	.tf-tip code {
1262	1262	font-family: var(--font-mono);
1263	1263	background: rgba(69,10,10,.18);
1264	1264	color: #cee3ff;
1265	1265	padding: 1px 5px;
1266	1266	border-radius: 4px;
1267	1267	font-size: 11.5px;
1268	1268	border: 1px solid rgba(69,10,10,.3);
1269	1269	}
1270	1270
1271	1271	/* Animated gradient left bar */
1272	1272	.tf-tip::before {
1273	1273	content: '';
1274	1274	position: absolute;
1275	1275	left: 0; top: 0; bottom: 0;
1276	1276	width: 3px;
1277	1277	border-radius: 10px 0 0 10px;
1278	1278	background: linear-gradient(180deg, var(--col-brand-1) 0%, var(--col-brand-2) 50%, var(--col-brand-1) 100%);
1279	1279	background-size: 100% 200%;
1280	1280	animation: tf-bar-flow 2.4s linear infinite;
1281	1281	}
1282	1282	@keyframes tf-bar-flow {
1283	1283	0% { background-position: 0 0; }
1284	1284	100% { background-position: 0 -200%; }
1285	1285	}
1286	1286
1287	1287	/* Pointing arrow — anchored at --tf-tip-arrow (set by JS to the trigger's horiz center) */
1288	1288	.tf-tip::after {
1289	1289	content: '';
1290	1290	position: absolute;
1291	1291	left: var(--tf-tip-arrow, 50%);
1292	1292	transform: translateX(-50%) rotate(45deg);
1293	1293	width: 10px;
1294	1294	height: 10px;
1295	1295	background: linear-gradient(135deg, rgba(20,27,45,.96), rgba(28,22,52,.96));
1296	1296	border-left: 1px solid rgba(69,10,10,.35);
1297	1297	border-top: 1px solid rgba(69,10,10,.35);
1298	1298	backdrop-filter: blur(10px);
1299	1299	}
1300	1300	.tf-tip[data-placement="below"]::after {
1301	1301	top: -6px;
1302	1302	}
1303	1303	.tf-tip[data-placement="above"]::after {
1304	1304	bottom: -6px;
1305	1305	border-left: none; border-top: none;
1306	1306	border-right: 1px solid rgba(179,0,255,.35);
1307	1307	border-bottom: 1px solid rgba(179,0,255,.35);
1308	1308	}
1309	1309
1310	1310	/* The 'i' icon prefix — auto-prepended via a span when content has no <strong> already */
1311	1311	.tf-tip-icon {
1312	1312	display: inline-block;
1313	1313	width: 14px; height: 14px;
1314	1314	border-radius: 50%;
1315	1315	background: var(--grad-brand);
1316	1316	color: #fff;
1317	1317	text-align: center;
1318	1318	line-height: 14px;
1319	1319	font-size: 10px;
1320	1320	font-weight: 700;
1321	1321	font-style: normal;
1322	1322	margin-right: 6px;
1323	1323	vertical-align: -1px;
1324	1324	box-shadow: 0 0 10px var(--col-brand-glow);
1325	1325	}
1326	1326
1327	1327	/* Subtle "has helper" indicator on focusable form fields */
1328	1328	.field [data-tip]:not(input):not(textarea):not(select),
1329	1329	label[data-tip] {
1330	1330	cursor: help;
1331	1331	}
1332	1332	label[data-tip]::after {
1333	1333	content: '?';
1334	1334	display: inline-block;
1335	1335	width: 13px; height: 13px;
1336	1336	border-radius: 50%;
1337	1337	background: var(--col-bg-3);
1338	1338	color: var(--col-text-muted);
1339	1339	font-size: 9.5px;
1340	1340	font-weight: 700;
1341	1341	line-height: 13px;
1342	1342	text-align: center;
1343	1343	margin-left: 5px;
1344	1344	vertical-align: 1px;
1345	1345	transition: background var(--t-fast), color var(--t-fast);
1346	1346	}
1347	1347	label[data-tip]:hover::after {
1348	1348	background: var(--col-primary);
1349	1349	color: #fff;
1350	1350	}
1351	1351	html.tips-off label[data-tip]::after { display: none; }
1352	1352
1353	1353	/* When tips are off, suppress entirely */
1354	1354	html.tips-off .tf-tip { display: none !important; }
1355	1355
1356	1356	/* ====== misc utility ====== */
1357	1357	.row { display: flex; gap: 16px; }
1358	1358	.col { flex: 1; min-width: 0; }
1359	1359	.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
1360	1360	.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
1361	1361	.text-muted { color: var(--col-text-muted); }
1362	1362	.text-dim { color: var(--col-text-dim); }
1363	1363	.flex { display: flex; gap: 10px; align-items: center; }
1364	1364	.flex-between { display: flex; justify-content: space-between; align-items: center; }
1365	1365	.flex-end { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
1366	1366	.hidden { display: none !important; }
1367	1367	.muted-empty { text-align: center; padding: 60px 24px; color: var(--col-text-dim); }
1368	1368	.muted-empty h3 {
1369	1369	margin-bottom: 6px;
1370	1370	background: var(--grad-brand-h);
1371	1371	-webkit-background-clip: text;
1372	1372	background-clip: text;
1373	1373	color: transparent;
1374	1374	display: inline-block;
1375	1375	}
1376	1376
1377	1377	/* ====== Round 4 — board toolbar + filter chips + per-card gradient ====== */
1378	1378
1379	1379	.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 8px 12px; flex-wrap: wrap; }
1380	1380	.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
1381	1381	.chip {
1382	1382	display: inline-flex; align-items: center; gap: 6px;
1383	1383	padding: 5px 11px;
1384	1384	background: var(--col-surface-2);
1385	1385	border: 1px solid var(--col-border);
1386	1386	color: var(--col-text-muted);
1387	1387	font-size: 12.5px;
1388	1388	border-radius: 999px;
1389	1389	text-decoration: none;
1390	1390	transition: background .15s, border-color .15s, color .15s, transform .15s;
1391	1391	cursor: pointer;
1392	1392	line-height: 1.4;
1393	1393	}
1394	1394	.chip:hover { background: var(--col-surface-3); color: var(--col-text); border-color: var(--col-border-2); transform: translateY(-1px); }
1395	1395	.chip.chip-on {
1396	1396	background: linear-gradient(135deg, rgba(69,10,10,.24), rgba(69,10,10,.10));
1397	1397	color: var(--col-text);
1398	1398	border-color: rgba(69,10,10,.55);
1399	1399	box-shadow: 0 0 0 1px rgba(69,10,10,.18) inset;
1400	1400	}
1401	1401	.chip.chip-warn { color: var(--col-warn); border-color: rgba(69,10,10,.4); background: rgba(69,10,10,.07); }
1402	1402	.chip.chip-warn.chip-on { background: linear-gradient(135deg, rgba(69,10,10,.25), rgba(69,10,10,.08)); }
1403	1403
1404	1404	/* Top "+" on each kanban column header */
1405	1405	.kanban-column-header { position: relative; }
1406	1406	.col-add-top {
1407	1407	width: 24px; height: 24px;
1408	1408	display: inline-grid; place-items: center;
1409	1409	background: var(--col-surface-3);
1410	1410	border: 1px solid var(--col-border-2);
1411	1411	color: var(--col-text-muted);
1412	1412	border-radius: 6px;
1413	1413	cursor: pointer;
1414	1414	font-size: 18px;
1415	1415	line-height: 1;
1416	1416	padding: 0 0 2px;
1417	1417	transition: background .15s, color .15s, transform .15s;
1418	1418	}
1419	1419	.col-add-top:hover {
1420	1420	background: linear-gradient(135deg, rgba(69,10,10,.35), rgba(69,10,10,.14));
1421	1421	border-color: rgba(69,10,10,.6);
1422	1422	color: #fff;
1423	1423	transform: scale(1.08);
1424	1424	}
1425	1425
1426	1426	/* Card background gradient modes — picked by user prefs.
1427	1427	--card-edge = resolved priority/custom edge color
1428	1428	--card-accent = assignee color (or edge if unassigned)
1429	1429	--grad-from / --grad-to = board-wide custom palette */
1430	1430	.kanban-board.board-grad-off .kanban-card { background: var(--col-surface); }
1431	1431	.kanban-board.board-grad-priority .kanban-card {
1432	1432	background:
1433	1433	linear-gradient(135deg,
1434	1434	color-mix(in srgb, var(--card-edge) 18%, transparent) 0%,
1435	1435	var(--col-surface) 72%);
1436	1436	}
1437	1437	.kanban-board.board-grad-assignee .kanban-card {
1438	1438	background:
1439	1439	linear-gradient(135deg,
1440	1440	color-mix(in srgb, var(--card-accent) 22%, transparent) 0%,
1441	1441	var(--col-surface) 75%);
1442	1442	}
1443	1443	.kanban-board.board-grad-custom .kanban-card {
1444	1444	background: linear-gradient(135deg, var(--grad-from) 0%, var(--grad-to) 90%);
1445	1445	color: var(--col-text);
1446	1446	}
1447	1447	@supports not (background: color-mix(in srgb, red 50%, blue)) {
1448	1448	.kanban-board.board-grad-priority .kanban-card,
1449	1449	.kanban-board.board-grad-assignee .kanban-card {
1450	1450	background: linear-gradient(135deg, var(--col-surface-3) 0%, var(--col-surface) 75%);
1451	1451	}
1452	1452	}
1453	1453
1454	1454	.kanban-board.density-compact .kanban-card { padding: 8px 10px; }
1455	1455	.kanban-board.density-comfortable .kanban-card { padding: 11px 12px; }
1456	1456	.kanban-board.density-spacious .kanban-card { padding: 16px 14px 14px; }
1457	1457
1458	1458	/* Card meta pills */
1459	1459	.kanban-card .meta-left { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
1460	1460	.kanban-card .meta-due { color: var(--col-text-dim); }
1461	1461	.kanban-card .meta-due.is-overdue { color: var(--col-danger); font-weight: 600; }
1462	1462	.meta-pill {
1463	1463	display: inline-flex; align-items: center; gap: 3px;
1464	1464	font-size: 10.5px; padding: 1px 6px;
1465	1465	border-radius: 4px;
1466	1466	background: rgba(255,255,255,.04);
1467	1467	color: var(--col-text-dim);
1468	1468	border: 1px solid var(--col-border);
1469	1469	}
1470	1470	.meta-pill.pill-warn { color: var(--col-warn); background: rgba(69,10,10,.08); border-color: rgba(69,10,10,.3); }
1471	1471	.meta-pill.pill-muted { color: var(--col-text-dim); }
1472	1472
1473	1473	.kanban-card.card-pending-arch {
1474	1474	background-image: repeating-linear-gradient(135deg,
1475	1475	rgba(69,10,10,.10) 0 6px,
1476	1476	transparent 6px 14px);
1477	1477	border-color: rgba(69,10,10,.35);
1478	1478	}
1479	1479	.kanban-card.card-archived {
1480	1480	opacity: .55;
1481	1481	filter: grayscale(.4);
1482	1482	}
1483	1483
1484	1484	/* ====== Round 4 — attachments drop zone ====== */
1485	1485	.attach-zone {
1486	1486	position: relative;
1487	1487	border: 2px dashed var(--col-border-2);
1488	1488	border-radius: var(--radius);
1489	1489	background: var(--col-surface-2);
1490	1490	padding: 22px 18px;
1491	1491	text-align: center;
1492	1492	color: var(--col-text-muted);
1493	1493	transition: border-color .15s, background .15s, transform .15s;
1494	1494	cursor: pointer;
1495	1495	}
1496	1496	.attach-zone:hover { border-color: var(--col-text-dim); background: var(--col-surface-3); }
1497	1497	.attach-zone.dragover {
1498	1498	border-color: var(--col-brand-1);
1499	1499	background: linear-gradient(135deg, rgba(69,10,10,.20), rgba(69,10,10,.08));
1500	1500	color: #fff;
1501	1501	transform: scale(1.01);
1502	1502	box-shadow: 0 0 0 3px rgba(69,10,10,.16);
1503	1503	}
1504	1504	.attach-zone .attach-icon { font-size: 28px; display: block; margin-bottom: 6px; opacity: .8; }
1505	1505	.attach-zone strong { color: var(--col-text); display: block; margin-top: 2px; }
1506	1506	.attach-list { display: grid; gap: 6px; margin-top: 10px; }
1507	1507	.attach-row {
1508	1508	display: flex; align-items: center; gap: 10px;
1509	1509	padding: 8px 10px;
1510	1510	background: var(--col-surface-2);
1511	1511	border: 1px solid var(--col-border);
1512	1512	border-radius: var(--radius-sm);
1513	1513	}
1514	1514	.attach-row .att-thumb { width: 36px; height: 36px; background: var(--col-surface-3); border-radius: 6px; display: grid; place-items: center; color: var(--col-text-dim); font-size: 14px; flex-shrink: 0; overflow: hidden; }
1515	1515	.attach-row .att-thumb img { width: 100%; height: 100%; object-fit: cover; }
1516	1516	.attach-row .att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--col-text); }
1517	1517	.attach-row .att-meta { font-size: 11px; color: var(--col-text-dim); }
1518	1518	.attach-row .btn { padding: 4px 8px; font-size: 11.5px; }
1519	1519	.attach-progress { height: 4px; background: var(--col-border); border-radius: 99px; overflow: hidden; margin-top: 6px; }
1520	1520	.attach-progress span { display: block; height: 100%; background: var(--grad-brand-h); transition: width .2s; }
1521	1521
1522	1522	/* ====== Round 4 — onboarding wizard ====== */
1523	1523	.onb-shell { max-width: 760px; margin: 30px auto; padding: 28px; background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--radius); box-shadow: var(--shadow); }
1524	1524	.onb-step-dots { display: flex; gap: 6px; margin-bottom: 18px; }
1525	1525	.onb-step-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--col-border-2); }
1526	1526	.onb-step-dots span.on { background: var(--grad-brand); box-shadow: 0 0 0 2px rgba(69,10,10,.30); }
1527	1527	.preset-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 14px; }
1528	1528	.preset-card {
1529	1529	border: 1px solid var(--col-border);
1530	1530	border-radius: var(--radius);
1531	1531	background: var(--col-surface-2);
1532	1532	padding: 14px;
1533	1533	cursor: pointer;
1534	1534	transition: border-color .15s, transform .15s, background .15s;
1535	1535	}
1536	1536	.preset-card:hover { border-color: var(--col-border-2); background: var(--col-surface-3); transform: translateY(-2px); }
1537	1537	.preset-card.selected {
1538	1538	border-color: var(--col-brand-1);
1539	1539	background: linear-gradient(135deg, rgba(69,10,10,.18), rgba(69,10,10,.06));
1540	1540	box-shadow: 0 0 0 2px rgba(69,10,10,.18);
1541	1541	}
1542	1542	.preset-card h4 { font-size: 14px; margin: 0 0 4px; }
1543	1543	.preset-card p { font-size: 12px; margin: 0; color: var(--col-text-dim); }
1544	1544	.preset-card .preset-terms { font-size: 11.5px; color: var(--col-text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--col-border); }
1545	1545
1546	1546	.watchers-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
1547	1547	.watcher-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; background: var(--col-surface-2); border: 1px solid var(--col-border); border-radius: 999px; font-size: 12px; }
1548	1548	.watcher-chip .avatar { width: 18px; height: 18px; font-size: 10px; }
1549	1549	.watcher-chip button { background: transparent; border: 0; color: var(--col-text-dim); cursor: pointer; padding: 0 4px; font-size: 14px; }
1550	1550	.watcher-chip button:hover { color: var(--col-danger); }
1551	1551	.watcher-add { display: inline-flex; gap: 4px; align-items: center; }
1552	1552	.watcher-add .select { padding: 4px 8px; font-size: 12px; }
1553	1553
1554	1554	/* QR area for 2FA */
1555	1555	.qr-card { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: var(--radius-sm); width: 220px; margin: 0 auto; }
1556	1556	.qr-card img { width: 188px; height: 188px; image-rendering: pixelated; }
1557	1557	.recovery-codes { font-family: var(--font-mono); background: var(--col-bg-2); padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--col-border); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
1558	1558	.recovery-codes code { background: transparent; border: 0; padding: 0; font-size: 13px; color: var(--col-text); }
1559	1559
1560	1560	/* Stripe card */
1561	1561	.stripe-card { background: var(--col-surface-2); border: 1px solid var(--col-border); border-radius: var(--radius); padding: 16px; }
1562	1562	.stripe-card .price { font-size: 28px; font-weight: 700; color: var(--col-text); }
1563	1563	.stripe-card .price small { font-size: 12px; color: var(--col-text-dim); font-weight: 400; }
1564	1564
1565	1565	/* Gradient swatch preview for preferences page */
1566	1566	.grad-preview { width: 100%; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--col-border); margin-top: 8px; }
1567	1567
1568	1568	/* User preferences mode picker */
1569	1569	.mode-radios { display: flex; gap: 8px; flex-wrap: wrap; }
1570	1570	.mode-radios label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; background: var(--col-surface-2); border: 1px solid var(--col-border); border-radius: var(--radius-sm); cursor: pointer; min-width: 84px; font-size: 12px; }
1571	1571	.mode-radios label:hover { background: var(--col-surface-3); border-color: var(--col-border-2); }
1572	1572	.mode-radios input { display: none; }
1573	1573	.mode-radios input:checked + .mode-swatch + span { color: var(--col-text); font-weight: 600; }
1574	1574	.mode-radios input:checked ~ * { color: var(--col-text); }
1575	1575	.mode-radios label:has(input:checked) {
1576	1576	background: linear-gradient(135deg, rgba(69,10,10,.22), rgba(69,10,10,.06));
1577	1577	border-color: var(--col-brand-1);
1578	1578	box-shadow: 0 0 0 1px rgba(69,10,10,.22) inset;
1579	1579	}
1580	1580	.mode-swatch { width: 56px; height: 26px; border-radius: 5px; border: 1px solid var(--col-border); }
1581	1581
1582	1582	/* ======================================================================
1583	1583	MOBILE / TABLET (<= 760px)
1584	1584	Off-canvas sidebar, single-column page header, scrollable kanban,
1585	1585	touch-tuned drag affordances.
1586	1586	====================================================================== */
1587	1587
1588	1588	/* Kanban: never let the browser steal touchstart for scroll/zoom on cards.
1589	1589	Without touch-action:none, pointer drag aborts the instant the card moves. */
1590	1590	.kanban-card { touch-action: none; }
1591	1591	.gantt-bar {
1592	1592	touch-action: none;
1593	1593	user-select: none;
1594	1594	-webkit-user-select: none;
1595	1595	-webkit-touch-callout: none;
1596	1596	-webkit-user-drag: none;
1597	1597	}
1598	1598
1599	1599	/* Mobile backdrop for the off-canvas sidebar. */
1600	1600	.sidebar-backdrop {
1601	1601	position: fixed;
1602	1602	inset: 0;
1603	1603	background: rgba(0,0,0,.55);
1604	1604	backdrop-filter: blur(2px);
1605	1605	z-index: 90;
1606	1606	opacity: 0;
1607	1607	pointer-events: none;
1608	1608	transition: opacity var(--t);
1609	1609	}
1610	1610	html.sidebar-open .sidebar-backdrop {
1611	1611	opacity: 1;
1612	1612	pointer-events: auto;
1613	1613	}
1614	1614	@media (min-width: 761px) { .sidebar-backdrop { display: none; } }
1615	1615
1616	1616	@media (max-width: 760px) {
1617	1617	/* App shell becomes single-column; sidebar is overlaid, not gridded. */
1618	1618	.app-shell { grid-template-columns: 1fr; }
1619	1619	html.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
1620	1620
1621	1621	.sidebar {
1622	1622	position: fixed;
1623	1623	top: 0;
1624	1624	left: 0;
1625	1625	width: 260px;
1626	1626	height: 100vh;
1627	1627	z-index: 100;
1628	1628	transform: translateX(-100%);
1629	1629	transition: transform .26s ease;
1630	1630	/* keep its full styling; just slide it in */
1631	1631	}
1632	1632	html.sidebar-open .sidebar { transform: translateX(0); }
1633	1633	/* While the drawer is open, force its expanded form even if global
1634	1634	sidebar-collapsed is set from desktop preferences. */
1635	1635	html.sidebar-collapsed.sidebar-open .sidebar-brand .brand-text,
1636	1636	html.sidebar-collapsed.sidebar-open .sidebar-link span,
1637	1637	html.sidebar-collapsed.sidebar-open .sidebar-section-label {
1638	1638	display: revert;
1639	1639	}
1640	1640	html.sidebar-collapsed.sidebar-open .sidebar-link {
1641	1641	padding-left: 10px; padding-right: 10px; justify-content: flex-start; gap: 12px;
1642	1642	}
1643	1643
1644	1644	/* Topbar tightens. */
1645	1645	.topbar { padding: 0 12px; gap: 8px; }
1646	1646	.topbar-title { font-size: 14px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1647	1647	.topbar-search { display: none; } /* hidden on phones; tap search icon instead if you add one */
1648	1648	.profile-btn > div:not(.avatar) { display: none; } /* hide name/email next to avatar */
1649	1649	.profile-btn svg { display: none; } /* hide chevron */
1650	1650
1651	1651	.app-content { padding: 14px; }
1652	1652
1653	1653	/* Page header stacks. */
1654	1654	.page-header { flex-direction: column; align-items: stretch; gap: 12px; }
1655	1655	.page-header h1 { font-size: 22px; }
1656	1656	.page-header .flex-end { flex-wrap: wrap; gap: 8px; }
1657	1657	.page-header .flex-end .btn { flex: 1 1 auto; min-width: 0; }
1658	1658
1659	1659	/* Board toolbar wraps + scrolls horizontally for filter chips. */
1660	1660	.board-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
1661	1661	.filter-chips { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
1662	1662	.filter-chips .chip { white-space: nowrap; flex: 0 0 auto; }
1663	1663
1664	1664	/* Kanban: slightly narrower columns, full-height scroll. */
1665	1665	.kanban-board { gap: 10px; padding: 4px; min-height: calc(100vh - 240px); }
1666	1666	.kanban-column { flex: 0 0 84vw; max-width: 320px; max-height: calc(100vh - 240px); }
1667	1667	.kanban-column-body { padding: 8px; }
1668	1668
1669	1669	/* Marketing/auth pages already had an 880px breakpoint -- this one
1670	1670	further compresses headings on small phones. */
1671	1671	.hero { padding: 56px 18px 64px; }
1672	1672	.hero h1 { font-size: 36px; }
1673	1673	.hero p.lead { font-size: 16px; }
1674	1674	.section { padding: 56px 18px; }
1675	1675	.section h2 { font-size: 26px; }
1676	1676
1677	1677	/* Tables get horizontal scroll instead of being squashed. */
1678	1678	.table { font-size: 12.5px; }
1679	1679	.table-wrap, .table-scroll { overflow-x: auto; }
1680	1680
1681	1681	/* Forms: full-width buttons. */
1682	1682	.modal { max-width: 100%; border-radius: 0; max-height: 100vh; }
1683	1683	.modal-footer .btn { flex: 1 1 auto; }
1684	1684	}
1685	1685
1686	1686	/* Phones in portrait (very narrow). */
1687	1687	@media (max-width: 380px) {
1688	1688	.topbar-title { display: none; }
1689	1689	.kpi-grid { grid-template-columns: 1fr; }
1690	1690	.kanban-column { flex: 0 0 88vw; }
1691	1691	}
1692	1692
1693	1693
1694	1694	/* ===========================================================================
1695	1695	* Meta-Admin compat layer -- classes the existing CGIs already use
1696	1696	* (.dash-grid / .module / .module-head / .kpi-* / .glow-*). These layer
1697	1697	* cleanly on top of the PTMatrix port so the original page markup keeps
1698	1698	* rendering without a rewrite. Colors driven from CSS vars above.
1699	1699	* =========================================================================== */
1700	1700
1701	1701	.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 22px; }
1702	1702	.module {
1703	1703	background: var(--col-surface);
1704	1704	border: 1px solid var(--col-border);
1705	1705	border-radius: var(--radius);
1706	1706	overflow: hidden;
1707	1707	}
1708	1708	.module-head {
1709	1709	display: flex; align-items: center; justify-content: space-between;
1710	1710	padding: 12px 16px;
1711	1711	border-bottom: 1px solid var(--col-border);
1712	1712	background: rgba(69,10,10,.04);
1713	1713	}
1714	1714	.module-head .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
1715	1715	.module-head .right { font-size: 11px; color: var(--col-text-dim); padding-right: 4px; }
1716	1716	.module-icon {
1717	1717	width: 26px; height: 26px; border-radius: 7px;
1718	1718	display: inline-flex; align-items: center; justify-content: center;
1719	1719	background: rgba(69,10,10,.08);
1720	1720	color: var(--col-primary);
1721	1721	border: 1px solid rgba(69,10,10,.25);
1722	1722	}
1723	1723	.module-title { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--col-text); }
1724	1724	.module-subtitle { font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: #d6cdb8; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--col-border); line-height: 1.35; }
1725	1725	.module-body { padding: 16px; }
1726	1726
1727	1727	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12); }
1728	1728	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12); }
1729	1729	.module.glow-lime { box-shadow: 0 0 0 1px rgba(170,255,0,.25), 0 0 26px rgba(170,255,0,.12); }
1730	1730	.module.glow-violet { box-shadow: 0 0 0 1px rgba(179,0,255,.25), 0 0 26px rgba(179,0,255,.12); }
1731	1731
1732	1732	/* KPI tile -- compact module variant */
1733	1733	.kpi .num {
1734	1734	font-family: var(--font-display);
1735	1735	font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
1736	1736	}
1737	1737	.kpi .lbl {
1738	1738	margin-top: 4px;
1739	1739	font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
1740	1740	color: var(--col-text-dim);
1741	1741	}
1742	1742	.kpi .sub { margin-top: 6px; font-size: 12px; color: var(--col-text-dim); }
1743	1743	.kpi.kpi-cyan .num { color: #450a0a; text-shadow: 0 0 14px rgba(69,10,10,.45); }
1744	1744	.kpi.kpi-magenta .num { color: #991b1b; text-shadow: 0 0 14px rgba(69,10,10,.45); }
1745	1745	.kpi.kpi-lime .num { color: #aaff00; text-shadow: 0 0 14px rgba(170,255,0,.45); }
1746	1746	.kpi.kpi-violet .num { color: #b300ff; text-shadow: 0 0 14px rgba(179,0,255,.45); }
1747	1747
1748	1748	/* page-head pattern */
1749	1749	.page-head { margin-bottom: 22px; }
1750	1750	.page-head .left { min-width: 0; }
1751	1751	.page-head-actions { display: inline-flex; gap: 10px; }
1752	1752	.page-eyebrow {
1753	1753	display: inline-flex; align-items: center; gap: 6px;
1754	1754	font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
1755	1755	color: var(--col-primary);
1756	1756	text-shadow: 0 0 8px rgba(69,10,10,.55);
1757	1757	}
1758	1758	.page-eyebrow .dot {
1759	1759	width: 6px; height: 6px; border-radius: 50%;
1760	1760	background: var(--col-primary);
1761	1761	box-shadow: 0 0 8px var(--col-primary);
1762	1762	}
1763	1763	.page-title {
1764	1764	margin: 6px 0 4px;
1765	1765	font-family: var(--font-display);
1766	1766	font-size: 30px; font-weight: 800; line-height: 1.15;
1767	1767	background: linear-gradient(90deg, #450a0a 0%, #991b1b 70%);
1768	1768	-webkit-background-clip: text; background-clip: text; color: transparent;
1769	1769	}
1770	1770	.page-subtitle { color: var(--col-text-dim); font-size: 13px; }
1771	1771
1772	1772	/* table */
1773	1773	table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
1774	1774	table.tbl th {
1775	1775	text-align: left; padding: 10px 14px;
1776	1776	font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
1777	1777	color: var(--col-text-dim);
1778	1778	border-bottom: 1px solid var(--col-border);
1779	1779	background: rgba(69,10,10,.03);
1780	1780	}
1781	1781	table.tbl td { padding: 12px 14px; border-bottom: 1px solid rgba(38,28,77,.5); }
1782	1782	table.tbl tr:hover td { background: rgba(69,10,10,.04); }
1783	1783	table.tbl .mono { font-family: var(--font-mono); }
1784	1784	table.tbl .dim { color: var(--col-text-dim); }
1785	1785
1786	1786	/* pills */
1787	1787	.pill {
1788	1788	display: inline-flex; align-items: center;
1789	1789	padding: 2px 10px;
1790	1790	font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
1791	1791	border-radius: 999px;
1792	1792	border: 1px solid var(--col-border);
1793	1793	}
1794	1794	.pill-ok { color: #aaff00; border-color: #aaff00; background: rgba(170,255,0,.10); box-shadow: 0 0 10px rgba(170,255,0,.25); }
1795	1795	.pill-warn { color: #7c2d12; border-color: #7c2d12; background: rgba(69,10,10,.10); }
1796	1796	.pill-bad { color: #b53048; border-color: #b53048; background: rgba(77,14,21,.10); box-shadow: 0 0 10px rgba(77,14,21,.25); }
1797	1797	.pill-info { color: #450a0a; border-color: #450a0a; background: rgba(69,10,10,.10); }
1798	1798
1799	1799	/* banner */
1800	1800	.banner { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--col-border); margin-bottom: 14px; font-size: 13px; }
1801	1801	.banner.success { color: #aaff00; border-color: #aaff00; background: rgba(170,255,0,.06); }
1802	1802	.banner.danger { color: #b53048; border-color: #b53048; background: rgba(77,14,21,.06); }
1803	1803	.banner.warn { color: #7c2d12; border-color: #7c2d12; background: rgba(69,10,10,.06); }
1804	1804
1805	1805	/* misc helpers */
1806	1806	.text-dim { color: var(--col-text-dim); }
1807	1807	.text-sm { font-size: 13px; }
1808	1808	.text-xs { font-size: 11.5px; }
1809	1809	.fw-600 { font-weight: 600; }
1810	1810	.fw-700 { font-weight: 700; }
1811	1811	.mono { font-family: var(--font-mono); }
1812	1812	.dot {
1813	1813	display: inline-block; width: 10px; height: 10px; border-radius: 50%;
1814	1814	vertical-align: middle; margin-right: 8px;
1815	1815	box-shadow: 0 0 8px currentColor;
1816	1816	}
1817	1817	.lbl { display: block; margin-bottom: 14px; }
1818	1818	.lbl .t {
1819	1819	display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
1820	1820	color: var(--col-text-dim);
1821	1821	margin-bottom: 4px;
1822	1822	}
1823	1823	input.input, .input { width: 100%; }
1824	1824
1825	1825	/* container width inside the app-content area */
1826	1826	.container { max-width: 1280px; margin: 0 auto; }
1827	1827	/* ===========================================================================
1828	1828	* Topbar pill + profile chip -- override the neon-cyan back to PTMatrix's
1829	1829	* softer cool-blue so the action controls feel inviting rather than
1830	1830	* aggressive. Keep neon synthwave everywhere else (page titles, module
1831	1831	* glows, KPI colors).
1832	1832	* =========================================================================== */
1833	1833	.topbar-pill {
1834	1834	background: linear-gradient(180deg, rgba(69,10,10,0.12), rgba(69,10,10,0.05));
1835	1835	border-color: rgba(69,10,10,0.30);
1836	1836	color: var(--col-text);
1837	1837	}
1838	1838	.topbar-pill:hover {
1839	1839	border-color: rgba(69,10,10,0.65);
1840	1840	background: linear-gradient(180deg, rgba(69,10,10,0.20), rgba(69,10,10,0.09));
1841	1841	box-shadow: 0 0 0 3px rgba(69,10,10,0.12);
1842	1842	}
1843	1843	.topbar-pill svg { color: #991b1b; }
1844	1844
1845	1845	/* Profile chip -- match PTMatrix's exact shape + colors. Bigger avatar,
1846	1846	* 2-line text (name on top, workspace subtitle below), caret on the right. */
1847	1847	.profile-btn {
1848	1848	display: flex; align-items: center; gap: 10px;
1849	1849	padding: 4px 12px 4px 4px;
1850	1850	background: rgba(20,16,43,0.55);
1851	1851	border: 1px solid var(--col-border);
1852	1852	border-radius: 999px;
1853	1853	color: inherit; cursor: pointer;
1854	1854	font-family: inherit; font-size: 13px;
1855	1855	height: 44px;
1856	1856	transition: all 0.15s ease;
1857	1857	}
1858	1858	.profile-btn:hover { border-color: rgba(69,10,10,0.55); box-shadow: 0 0 0 3px rgba(69,10,10,0.10); }
1859	1859	.profile-btn .avatar {
1860	1860	width: 34px; height: 34px; border-radius: 50%;
1861	1861	background: linear-gradient(135deg, #991b1b 0%, #450a0a 100%) !important;
1862	1862	color: #0c1018; font-weight: 700; font-size: 13px;
1863	1863	display: flex; align-items: center; justify-content: center;
1864	1864	box-shadow: 0 0 10px rgba(69,10,10,0.40);
1865	1865	border: 0;
1866	1866	flex: 0 0 34px;
1867	1867	}
1868	1868	/* ===========================================================================
1869	1869	* Full cool-blue family: every KPI tile + module glow uses a shade of blue
1870	1870	* rather than mixed lime/violet/cyan accents. Keeps the page calm and
1871	1871	* cohesive while still letting each tile stand apart via blue gradations.
1872	1872	* =========================================================================== */
1873	1873
1874	1874	/* KPI tile numbers -- blue family */
1875	1875	.kpi.kpi-cyan .num { color: #450a0a !important; text-shadow: 0 0 14px rgba(69,10,10,.45) !important; }
1876	1876	.kpi.kpi-magenta .num { color: #991b1b !important; text-shadow: 0 0 14px rgba(69,10,10,.45) !important; }
1877	1877	.kpi.kpi-lime .num { color: #7c2d12 !important; text-shadow: 0 0 14px rgba(69,10,10,.45) !important; }
1878	1878	.kpi.kpi-violet .num { color: #450a0a !important; text-shadow: 0 0 14px rgba(69,10,10,.45) !important; }
1879	1879
1880	1880	/* Module glow borders -- blue family */
1881	1881	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12) !important; }
1882	1882	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12) !important; }
1883	1883	.module.glow-lime { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12) !important; }
1884	1884	.module.glow-violet { box-shadow: 0 0 0 1px rgba(69,10,10,.25), 0 0 26px rgba(69,10,10,.12) !important; }
1885	1885
1886	1886	/* Module-head icon backgrounds when overridden inline -- nudge to blue family. */
1887	1887	.module-head .module-icon[style*="170,255,0"] { color: #7c2d12 !important; background: rgba(69,10,10,.08) !important; border-color: rgba(69,10,10,.25) !important; }
1888	1888	.module-head .module-icon[style*="179,0,255"] { color: #450a0a !important; background: rgba(69,10,10,.08) !important; border-color: rgba(69,10,10,.25) !important; }
1889	1889	/* ===========================================================================
1890	1890	* Brighten the text + key accent values so they read clearly against the
1891	1891	* deep black background. Body text becomes warmer cream; KPI numbers and
1892	1892	* page titles use brighter amber/honey for legibility while the chrome
1893	1893	* stays dark.
1894	1894	* =========================================================================== */
1895	1895	:root {
1896	1896	--col-text: #f5ede0 !important;
1897	1897	--col-text-muted: #c8baa0 !important;
1898	1898	--col-text-dim: #9c8e6e !important;
1899	1899	}
1900	1900
1901	1901	/* Page title -- lift the gradient so headlines pop */
1902	1902	.page-title {
1903	1903	background: linear-gradient(90deg, #fcd34d 0%, #f59e0b 70%) !important;
1904	1904	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
1905	1905	}
1906	1906
1907	1907	/* KPI numbers -- step back up two shades so they read at a glance */
1908	1908	.kpi.kpi-cyan .num { color: #fcd34d !important; text-shadow: 0 0 14px rgba(252,211,77,.40) !important; }
1909	1909	.kpi.kpi-magenta .num { color: #4d0e15 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
1910	1910	.kpi.kpi-lime .num { color: #f59e0b !important; text-shadow: 0 0 14px rgba(245,158,11,.40) !important; }
1911	1911	.kpi.kpi-violet .num { color: #4d0e15 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
1912	1912
1913	1913	/* Page eyebrow + dots -- lift to honey */
1914	1914	.page-eyebrow { color: #fcd34d !important; text-shadow: 0 0 8px rgba(252,211,77,.45) !important; }
1915	1915	.page-eyebrow .dot { background: #fcd34d !important; box-shadow: 0 0 8px #fcd34d !important; }
1916	1916
1917	1917	/* Table headers brighter */
1918	1918	table.tbl th { color: #c8baa0 !important; }
1919	1919
1920	1920	/* Links in body content readable */
1921	1921	a { color: #4d0e15 !important; }
1922	1922	a:hover { color: #fcd34d !important; }
1923	1923
1924	1924	/* Code spans + key tag accents -- warmer cream */
1925	1925	code, kbd { color: #fcd34d !important; }
1926	1926	/* ===========================================================================
1927	1927	* Brand icon plate -- mini MT-logo treatment for per-site rows. Dark
1928	1928	* warm-brown plate with white hairline border, the site's brand color
1929	1929	* powers the soft glow underneath via the --site-glow custom property.
1930	1930	* Sized at roughly 2/3 of the sidebar MT logo so it lines up with body text.
1931	1931	* =========================================================================== */
1932	1932	.brand-icon {
1933	1933	display: inline-flex; align-items: center; justify-content: center;
1934	1934	width: 24px; height: 24px;
1935	1935	border-radius: 5px;
1936	1936	background: #2d1810;
1937	1937	border: 1px solid #fff;
1938	1938	position: relative;
1939	1939	vertical-align: middle;
1940	1940	flex: 0 0 24px;
1941	1941	--site-glow: #4d0e15;
1942	1942	}
1943	1943	.brand-icon::after {
1944	1944	content: '';
1945	1945	position: absolute; inset: -2px;
1946	1946	border-radius: inherit;
1947	1947	background: var(--site-glow);
1948	1948	filter: blur(8px);
1949	1949	opacity: 0.45;
1950	1950	z-index: -1;
1951	1951	}
1952	1952	/* Optional inner letter glyph -- pass via data-letter for sites that want it */
1953	1953	.brand-icon::before {
1954	1954	content: attr(data-letter);
1955	1955	color: #fff;
1956	1956	font-weight: 700;
1957	1957	font-size: 10px;
1958	1958	font-family: var(--font-display);
1959	1959	letter-spacing: -.02em;
1960	1960	line-height: 1;
1961	1961	}
1962	1962	/* ===========================================================================
1963	1963	* Swap the warm honey/amber accent text -> bright lime green to match the
1964	1964	* ACTIVE-pill glow. Background chrome stays warm dark; only the bright
1965	1965	* type accents flip color.
1966	1966	* =========================================================================== */
1967	1967	.page-title {
1968	1968	background: linear-gradient(90deg, #c4ff44 0%, #aaff00 70%) !important;
1969	1969	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
1970	1970	}
1971	1971	.page-eyebrow { color: #aaff00 !important; text-shadow: 0 0 8px rgba(170,255,0,.45) !important; }
1972	1972	.page-eyebrow .dot { background: #aaff00 !important; box-shadow: 0 0 8px #aaff00 !important; }
1973	1973
1974	1974	.kpi.kpi-cyan .num { color: #c4ff44 !important; text-shadow: 0 0 14px rgba(196,255,68,.40) !important; }
1975	1975	.kpi.kpi-magenta .num { color: #aaff00 !important; text-shadow: 0 0 14px rgba(170,255,0,.40) !important; }
1976	1976	.kpi.kpi-lime .num { color: #88cc00 !important; text-shadow: 0 0 14px rgba(136,204,0,.40) !important; }
1977	1977	.kpi.kpi-violet .num { color: #66a000 !important; text-shadow: 0 0 14px rgba(102,160,0,.40) !important; }
1978	1978
1979	1979	a, a:link { color: #aaff00 !important; }
1980	1980	a:hover { color: #c4ff44 !important; }
1981	1981
1982	1982	code, kbd { color: #c4ff44 !important; }
1983	1983
1984	1984	/* table headers + active sidebar -- soft lime tint */
1985	1985	table.tbl th { color: #aaff00 !important; }
1986	1986	/* ===========================================================================
1987	1987	* Teal + amber two-tone -- match the cool teal ribbons + warm amber
1988	1988	* underglow from the reference. Backgrounds stay deep black. Lime
1989	1989	* accents get swapped to teal; some accents stay warm amber so the
1990	1990	* page has the cool/warm dance.
1991	1991	* =========================================================================== */
1992	1992
1993	1993	/* Page title -- cool teal -> warm amber gradient (cool-to-warm transition) */
1994	1994	.page-title {
1995	1995	background: linear-gradient(90deg, #5eead4 0%, #4d0e15 80%) !important;
1996	1996	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
1997	1997	}
1998	1998	.page-eyebrow { color: #2ec4b6 !important; text-shadow: 0 0 8px rgba(46,196,182,.55) !important; }
1999	1999	.page-eyebrow .dot { background: #2ec4b6 !important; box-shadow: 0 0 8px #2ec4b6 !important; }
2000	2000
2001	2001	/* KPI numbers alternate cool/warm to mimic the reference image */
2002	2002	.kpi.kpi-cyan .num { color: #5eead4 !important; text-shadow: 0 0 14px rgba(94,234,212,.40) !important; }
2003	2003	.kpi.kpi-magenta .num { color: #4d0e15 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
2004	2004	.kpi.kpi-lime .num { color: #2ec4b6 !important; text-shadow: 0 0 14px rgba(46,196,182,.40) !important; }
2005	2005	.kpi.kpi-violet .num { color: #4d0e15 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
2006	2006
2007	2007	/* Module glow borders -- also alternate */
2008	2008	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(94,234,212,.22), 0 0 26px rgba(94,234,212,.12) !important; }
2009	2009	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(77,14,21,.22), 0 0 26px rgba(77,14,21,.12) !important; }
2010	2010	.module.glow-lime { box-shadow: 0 0 0 1px rgba(46,196,182,.22), 0 0 26px rgba(46,196,182,.12) !important; }
2011	2011	.module.glow-violet { box-shadow: 0 0 0 1px rgba(77,14,21,.22), 0 0 26px rgba(77,14,21,.12) !important; }
2012	2012
2013	2013	/* Links + code -- cool teal */
2014	2014	a, a:link { color: #2ec4b6 !important; }
2015	2015	a:hover { color: #5eead4 !important; }
2016	2016	code, kbd { color: #5eead4 !important; }
2017	2017
2018	2018	/* Table headers brighter teal */
2019	2019	table.tbl th { color: #2ec4b6 !important; }
2020	2020
2021	2021	/* ACTIVE pill -- emerald teal to match the new family */
2022	2022	.pill-ok, .pill.pill-ok {
2023	2023	color: #5eead4 !important;
2024	2024	border-color: #2ec4b6 !important;
2025	2025	background: rgba(46,196,182,.10) !important;
2026	2026	box-shadow: 0 0 10px rgba(46,196,182,.30) !important;
2027	2027	}
2028	2028
2029	2029	/* Topbar pill accent -- swap blue tint for teal */
2030	2030	.topbar-pill {
2031	2031	background: linear-gradient(180deg, rgba(46,196,182,0.12), rgba(46,196,182,0.05)) !important;
2032	2032	border-color: rgba(46,196,182,0.30) !important;
2033	2033	}
2034	2034	.topbar-pill:hover {
2035	2035	border-color: rgba(46,196,182,0.65) !important;
2036	2036	background: linear-gradient(180deg, rgba(46,196,182,0.20), rgba(46,196,182,0.09)) !important;
2037	2037	box-shadow: 0 0 0 3px rgba(46,196,182,0.12) !important;
2038	2038	}
2039	2039	.topbar-pill svg { color: #5eead4 !important; }
2040	2040
2041	2041	/* Profile avatar -- teal->amber gradient (matches the cool/warm theme) */
2042	2042	.profile-btn .avatar {
2043	2043	background: linear-gradient(135deg, #2ec4b6 0%, #4d0e15 100%) !important;
2044	2044	box-shadow: 0 0 10px rgba(46,196,182,0.40) !important;
2045	2045	}
2046	2046
2047	2047	/* Sidebar active state in teal */
2048	2048	.sidebar-link.active {
2049	2049	background: linear-gradient(90deg, rgba(46,196,182,.22) 0%, rgba(94,234,212,.08) 70%, transparent 100%) !important;
2050	2050	box-shadow: inset 0 0 0 1px rgba(46,196,182,.25) !important;
2051	2051	}
2052	2052	.sidebar-link.active::before { background: #2ec4b6 !important; }
2053	2053	/* ===========================================================================
2054	2054	* Red text accents -- swap the teal/amber pair to a unified red family
2055	2055	* (light red -> mid red -> deep red). Backgrounds + chrome stay deep
2056	2056	* warm black so the reds pop.
2057	2057	* =========================================================================== */
2058	2058
2059	2059	/* Page title -- light red -> deep red gradient */
2060	2060	.page-title {
2061	2061	background: linear-gradient(90deg, #fca5a5 0%, #b53048 80%) !important;
2062	2062	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
2063	2063	}
2064	2064
2065	2065	/* Eyebrow + indicator dot */
2066	2066	.page-eyebrow { color: #f87171 !important; text-shadow: 0 0 8px rgba(248,113,113,.55) !important; }
2067	2067	.page-eyebrow .dot { background: #f87171 !important; box-shadow: 0 0 8px #f87171 !important; }
2068	2068
2069	2069	/* KPI tile numbers -- gradations of red so all four still read distinct */
2070	2070	.kpi.kpi-cyan .num { color: #fca5a5 !important; text-shadow: 0 0 14px rgba(252,165,165,.40) !important; }
2071	2071	.kpi.kpi-magenta .num { color: #f87171 !important; text-shadow: 0 0 14px rgba(248,113,113,.40) !important; }
2072	2072	.kpi.kpi-lime .num { color: #b53048 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
2073	2073	.kpi.kpi-violet .num { color: #4d0e15 !important; text-shadow: 0 0 14px rgba(77,14,21,.40) !important; }
2074	2074
2075	2075	/* Module glow borders -- red family */
2076	2076	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(252,165,165,.22), 0 0 26px rgba(252,165,165,.12) !important; }
2077	2077	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(248,113,113,.22), 0 0 26px rgba(248,113,113,.12) !important; }
2078	2078	.module.glow-lime { box-shadow: 0 0 0 1px rgba(77,14,21,.22), 0 0 26px rgba(77,14,21,.12) !important; }
2079	2079	.module.glow-violet { box-shadow: 0 0 0 1px rgba(77,14,21,.22), 0 0 26px rgba(77,14,21,.12) !important; }
2080	2080
2081	2081	/* Links + code -- red */
2082	2082	a, a:link { color: #f87171 !important; }
2083	2083	a:hover { color: #fca5a5 !important; }
2084	2084	code, kbd { color: #fca5a5 !important; }
2085	2085
2086	2086	/* Table headers */
2087	2087	table.tbl th { color: #f87171 !important; }
2088	2088
2089	2089	/* ACTIVE pill -- shifted to red (still reads as "live/lit" -- the
2090	2090	* universal-green semantic isn't strong here since this is an internal
2091	2091	* operator console) */
2092	2092	.pill-ok, .pill.pill-ok {
2093	2093	color: #fca5a5 !important;
2094	2094	border-color: #b53048 !important;
2095	2095	background: rgba(77,14,21,.10) !important;
2096	2096	box-shadow: 0 0 10px rgba(77,14,21,.30) !important;
2097	2097	}
2098	2098
2099	2099	/* Topbar pills */
2100	2100	.topbar-pill {
2101	2101	background: linear-gradient(180deg, rgba(77,14,21,0.12), rgba(77,14,21,0.05)) !important;
2102	2102	border-color: rgba(77,14,21,0.30) !important;
2103	2103	}
2104	2104	.topbar-pill:hover {
2105	2105	border-color: rgba(77,14,21,0.65) !important;
2106	2106	background: linear-gradient(180deg, rgba(77,14,21,0.20), rgba(77,14,21,0.09)) !important;
2107	2107	box-shadow: 0 0 0 3px rgba(77,14,21,0.12) !important;
2108	2108	}
2109	2109	.topbar-pill svg { color: #f87171 !important; }
2110	2110
2111	2111	/* Profile avatar -- light red -> deep red gradient */
2112	2112	.profile-btn .avatar {
2113	2113	background: linear-gradient(135deg, #fca5a5 0%, #b53048 100%) !important;
2114	2114	box-shadow: 0 0 10px rgba(77,14,21,0.40) !important;
2115	2115	}
2116	2116
2117	2117	/* Sidebar active state */
2118	2118	.sidebar-link.active {
2119	2119	background: linear-gradient(90deg, rgba(77,14,21,.24) 0%, rgba(252,165,165,.08) 70%, transparent 100%) !important;
2120	2120	box-shadow: inset 0 0 0 1px rgba(77,14,21,.28) !important;
2121	2121	}
2122	2122	.sidebar-link.active::before { background: #b53048 !important; }
2123	2123	/* Brand-icon plate -- punch the glow harder so each site's color reads
2124	2124	* at a glance against the deep black background. */
2125	2125	.brand-icon::after {
2126	2126	inset: -3px !important;
2127	2127	filter: blur(10px) !important;
2128	2128	opacity: 0.75 !important;
2129	2129	}
2130	2130	.brand-icon {
2131	2131	width: 26px !important; height: 26px !important;
2132	2132	flex: 0 0 26px !important;
2133	2133	}
2134	2134	.brand-icon::before {
2135	2135	font-size: 11px !important;
2136	2136	}
2137	2137	/* ===========================================================================
2138	2138	* Brand icon -- each plate is now a mini version of that site's actual
2139	2139	* logo: site brand color as the plate background + white letters inside +
2140	2140	* white hairline border + glow underneath in the same color. Matches the
2141	2141	* MT plate shape exactly.
2142	2142	* =========================================================================== */
2143	2143	.brand-icon {
2144	2144	display: inline-flex; align-items: center; justify-content: center;
2145	2145	width: 30px !important; height: 30px !important;
2146	2146	border-radius: 7px !important;
2147	2147	background: var(--site-glow) !important;
2148	2148	border: 1.5px solid #fff !important;
2149	2149	position: relative;
2150	2150	vertical-align: middle;
2151	2151	flex: 0 0 30px !important;
2152	2152	--site-glow: #4d0e15;
2153	2153	color: #fff;
2154	2154	font-weight: 800;
2155	2155	font-size: 12px !important;
2156	2156	font-family: var(--font-display);
2157	2157	line-height: 1;
2158	2158	letter-spacing: -.02em;
2159	2159	box-shadow: 0 4px 14px var(--site-glow), 0 0 0 1px rgba(255,255,255,.06);
2160	2160	}
2161	2161	.brand-icon::before {
2162	2162	content: attr(data-letter);
2163	2163	color: #fff;
2164	2164	position: relative;
2165	2165	z-index: 2;
2166	2166	text-shadow: 0 1px 2px rgba(0,0,0,.4);
2167	2167	}
2168	2168	.brand-icon::after {
2169	2169	content: '';
2170	2170	position: absolute; inset: -3px;
2171	2171	border-radius: inherit;
2172	2172	background: var(--site-glow);
2173	2173	filter: blur(12px);
2174	2174	opacity: 0.55;
2175	2175	z-index: -1;
2176	2176	}
2177	2177
2178	2178	/* Hover lift on site rows -- subtle brand-color glow on the row */
2179	2179	table.tbl tr:hover .brand-icon {
2180	2180	box-shadow: 0 6px 20px var(--site-glow), 0 0 0 1px rgba(255,255,255,.10);
2181	2181	transform: translateY(-1px);
2182	2182	transition: all 0.15s ease;
2183	2183	}
2184	2184	table.tbl tr .brand-icon { transition: all 0.15s ease; }
2185	2185	/* ===========================================================================
2186	2186	* Color rebalance -- red is the HERO brand accent only (page title +
2187	2187	* eyebrow + sidebar active + brand-icon plates). For the working text
2188	2188	* (links, KPI numbers, table headers, code) use cool tones (soft blue /
2189	2189	* lighter cream) so the page reads calm + grown-up instead of monochrome.
2190	2190	* =========================================================================== */
2191	2191
2192	2192	/* Page-title gradient stays red (hero moment) */
2193	2193	.page-title {
2194	2194	background: linear-gradient(90deg, #fca5a5 0%, #b53048 80%) !important;
2195	2195	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
2196	2196	}
2197	2197	/* Eyebrow stays red */
2198	2198	.page-eyebrow { color: #f87171 !important; }
2199	2199	.page-eyebrow .dot { background: #f87171 !important; box-shadow: 0 0 8px #f87171 !important; }
2200	2200
2201	2201	/* KPI numbers -- shift to a cool / neutral progression so they read clean */
2202	2202	.kpi.kpi-cyan .num { color: #93c5fd !important; text-shadow: 0 0 14px rgba(147,197,253,.35) !important; }
2203	2203	.kpi.kpi-magenta .num { color: #f5ede0 !important; text-shadow: 0 0 14px rgba(245,237,224,.30) !important; }
2204	2204	.kpi.kpi-lime .num { color: #7dd3fc !important; text-shadow: 0 0 14px rgba(125,211,252,.35) !important; }
2205	2205	.kpi.kpi-violet .num { color: #cbd5e1 !important; text-shadow: 0 0 14px rgba(203,213,225,.30) !important; }
2206	2206
2207	2207	/* Module border glows -- subtle warm-cream so they don't shout */
2208	2208	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(147,197,253,.18), 0 0 24px rgba(147,197,253,.10) !important; }
2209	2209	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(248,113,113,.22), 0 0 26px rgba(248,113,113,.12) !important; }
2210	2210	.module.glow-lime { box-shadow: 0 0 0 1px rgba(125,211,252,.18), 0 0 24px rgba(125,211,252,.10) !important; }
2211	2211	.module.glow-violet { box-shadow: 0 0 0 1px rgba(203,213,225,.15), 0 0 22px rgba(203,213,225,.08) !important; }
2212	2212
2213	2213	/* Links + code -- soft cool blue (PTMatrix pattern -- brand for hero, blue for action) */
2214	2214	a, a:link { color: #7dd3fc !important; }
2215	2215	a:hover { color: #bae6fd !important; }
2216	2216	code, kbd { color: #bae6fd !important; }
2217	2217
2218	2218	/* Table headers -- dim cream, not screaming */
2219	2219	table.tbl th { color: #a89978 !important; }
2220	2220
2221	2221	/* ACTIVE pill -- emerald (universally "live/ok") */
2222	2222	.pill-ok, .pill.pill-ok {
2223	2223	color: #86efac !important;
2224	2224	border-color: #22c55e !important;
2225	2225	background: rgba(34,197,94,.10) !important;
2226	2226	box-shadow: 0 0 10px rgba(34,197,94,.25) !important;
2227	2227	}
2228	2228
2229	2229	/* Topbar pills -- soft cool blue tint (matches links) */
2230	2230	.topbar-pill {
2231	2231	background: linear-gradient(180deg, rgba(125,211,252,0.10), rgba(125,211,252,0.04)) !important;
2232	2232	border-color: rgba(125,211,252,0.25) !important;
2233	2233	}
2234	2234	.topbar-pill:hover {
2235	2235	border-color: rgba(125,211,252,0.55) !important;
2236	2236	background: linear-gradient(180deg, rgba(125,211,252,0.18), rgba(125,211,252,0.08)) !important;
2237	2237	box-shadow: 0 0 0 3px rgba(125,211,252,0.10) !important;
2238	2238	}
2239	2239	.topbar-pill svg { color: #7dd3fc !important; }
2240	2240
2241	2241	/* Profile avatar stays red (brand identity moment) */
2242	2242	.profile-btn .avatar {
2243	2243	background: linear-gradient(135deg, #fca5a5 0%, #b53048 100%) !important;
2244	2244	box-shadow: 0 0 10px rgba(77,14,21,0.40) !important;
2245	2245	}
2246	2246
2247	2247	/* Sidebar active stays red (brand identity moment) */
2248	2248	.sidebar-link.active {
2249	2249	background: linear-gradient(90deg, rgba(77,14,21,.22) 0%, rgba(252,165,165,.06) 70%, transparent 100%) !important;
2250	2250	box-shadow: inset 0 0 0 1px rgba(77,14,21,.25) !important;
2251	2251	}
2252	2252	.sidebar-link.active::before { background: #b53048 !important; }
2253	2253
2254	2254	/* Row hover -- subtle warmth so the table feels alive without being noisy */
2255	2255	table.tbl tr:hover td { background: rgba(252,165,165,.03) !important; }
2256	2256	/* ===========================================================================
2257	2257	* Monochrome palette -- black + gray + white only. Brand-icon plates
2258	2258	* keep their per-site colors since that's the only way to tell the
2259	2259	* rows apart at a glance, but everything else is grayscale.
2260	2260	* =========================================================================== */
2261	2261	:root {
2262	2262	--col-bg-0: #0a0a0a !important; /* page */
2263	2263	--col-bg-1: #111111 !important;
2264	2264	--col-bg-2: #1a1a1a !important;
2265	2265	--col-bg-3: #242424 !important;
2266	2266	--col-bg-4: #2e2e2e !important;
2267	2267	--col-surface: #141414 !important;
2268	2268	--col-surface-2: #1c1c1c !important;
2269	2269	--col-surface-3: #262626 !important;
2270	2270
2271	2271	--col-border: #262626 !important;
2272	2272	--col-border-2: #3a3a3a !important;
2273	2273
2274	2274	--col-text: #f5f5f5 !important;
2275	2275	--col-text-muted: #a3a3a3 !important;
2276	2276	--col-text-dim: #737373 !important;
2277	2277	}
2278	2278	body { background: #0a0a0a !important; }
2279	2279	body::before { background: none !important; } /* kill any colored backdrop */
2280	2280	body::after { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.18) 72%, transparent 100%) !important; }
2281	2281
2282	2282	/* Page title -- soft white gradient (subtle shimmer, not screaming) */
2283	2283	.page-title {
2284	2284	background: linear-gradient(90deg, #ffffff 0%, #a3a3a3 100%) !important;
2285	2285	-webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
2286	2286	}
2287	2287	.page-eyebrow { color: #a3a3a3 !important; text-shadow: none !important; letter-spacing: 2.5px !important; }
2288	2288	.page-eyebrow .dot { background: #ffffff !important; box-shadow: 0 0 6px rgba(255,255,255,.5) !important; }
2289	2289	.page-subtitle { color: #737373 !important; }
2290	2290
2291	2291	/* KPI numbers -- clean white, very different weights so they differ */
2292	2292	.kpi.kpi-cyan .num { color: #ffffff !important; text-shadow: none !important; }
2293	2293	.kpi.kpi-magenta .num { color: #f5f5f5 !important; text-shadow: none !important; }
2294	2294	.kpi.kpi-lime .num { color: #e5e5e5 !important; text-shadow: none !important; }
2295	2295	.kpi.kpi-violet .num { color: #d4d4d4 !important; text-shadow: none !important; }
2296	2296	.kpi .lbl { color: #737373 !important; }
2297	2297	.kpi .sub { color: #525252 !important; }
2298	2298
2299	2299	/* Module borders -- subtle white tint, no colored glows */
2300	2300	.module { background: #111111 !important; border-color: #262626 !important; }
2301	2301	.module-head { background: rgba(255,255,255,.02) !important; border-bottom-color: #262626 !important; }
2302	2302	.module-icon {
2303	2303	color: #d4d4d4 !important;
2304	2304	background: rgba(255,255,255,.04) !important;
2305	2305	border-color: rgba(255,255,255,.10) !important;
2306	2306	}
2307	2307	.module-title { color: #f5f5f5 !important; }
2308	2308	.module.glow-cyan { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255,255,255,.04) !important; }
2309	2309	.module.glow-magenta { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 24px rgba(255,255,255,.05) !important; }
2310	2310	.module.glow-lime { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255,255,255,.04) !important; }
2311	2311	.module.glow-violet { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 24px rgba(255,255,255,.03) !important; }
2312	2312
2313	2313	/* Links + code -- off-white, no color */
2314	2314	a, a:link { color: #d4d4d4 !important; text-decoration: none !important; }
2315	2315	a:hover { color: #ffffff !important; text-decoration: underline !important; text-decoration-color: rgba(255,255,255,.3) !important; }
2316	2316	code, kbd { color: #e5e5e5 !important; background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }
2317	2317
2318	2318	/* Tables */
2319	2319	table.tbl th { color: #737373 !important; background: rgba(255,255,255,.02) !important; }
2320	2320	table.tbl td { border-bottom-color: rgba(255,255,255,.05) !important; }
2321	2321	table.tbl tr:hover td { background: rgba(255,255,255,.025) !important; }
2322	2322
2323	2323	/* Pills */
2324	2324	.pill-ok, .pill.pill-ok { color: #f5f5f5 !important; border-color: #525252 !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; }
2325	2325	.pill-warn, .pill.pill-warn { color: #d4d4d4 !important; border-color: #525252 !important; background: rgba(255,255,255,.04) !important; }
2326	2326	.pill-bad, .pill.pill-bad { color: #a3a3a3 !important; border-color: #404040 !important; background: rgba(255,255,255,.02) !important; box-shadow: none !important; }
2327	2327	.pill-info, .pill.pill-info { color: #e5e5e5 !important; border-color: #525252 !important; background: rgba(255,255,255,.04) !important; }
2328	2328	.badge.primary { color: #f5f5f5 !important; border-color: #525252 !important; background: rgba(255,255,255,.06) !important; }
2329	2329
2330	2330	/* Topbar pills -- subtle white outline */
2331	2331	.topbar-pill {
2332	2332	background: rgba(255,255,255,.04) !important;
2333	2333	border-color: rgba(255,255,255,.12) !important;
2334	2334	color: #f5f5f5 !important;
2335	2335	}
2336	2336	.topbar-pill:hover {
2337	2337	border-color: rgba(255,255,255,.30) !important;
2338	2338	background: rgba(255,255,255,.08) !important;
2339	2339	box-shadow: 0 0 0 3px rgba(255,255,255,.05) !important;
2340	2340	}
2341	2341	.topbar-pill svg { color: #d4d4d4 !important; }
2342	2342
2343	2343	/* Topbar bell etc. */
2344	2344	.topbar-iconbtn { color: #a3a3a3 !important; }
2345	2345	.topbar-iconbtn:hover { color: #ffffff !important; background: rgba(255,255,255,.04) !important; }
2346	2346
2347	2347	/* Topbar background -- subtle dark, no gradient */
2348	2348	.topbar {
2349	2349	background: rgba(20,20,20,.85) !important;
2350	2350	border-bottom-color: rgba(255,255,255,.06) !important;
2351	2351	box-shadow: none !important;
2352	2352	}
2353	2353	.topbar-search {
2354	2354	background: rgba(255,255,255,.04) !important;
2355	2355	border-color: rgba(255,255,255,.10) !important;
2356	2356	}
2357	2357	.topbar-search:focus-within {
2358	2358	border-color: rgba(255,255,255,.30) !important;
2359	2359	box-shadow: 0 0 0 3px rgba(255,255,255,.06) !important;
2360	2360	}
2361	2361
2362	2362	/* Profile chip -- monochrome avatar */
2363	2363	.profile-btn {
2364	2364	background: rgba(255,255,255,.04) !important;
2365	2365	border-color: rgba(255,255,255,.12) !important;
2366	2366	}
2367	2367	.profile-btn:hover { border-color: rgba(255,255,255,.30) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.05) !important; }
2368	2368	.profile-btn .avatar {
2369	2369	background: linear-gradient(135deg, #ffffff 0%, #737373 100%) !important;
2370	2370	color: #0a0a0a !important;
2371	2371	box-shadow: 0 0 8px rgba(255,255,255,.20) !important;
2372	2372	border: 1px solid rgba(255,255,255,.40) !important;
2373	2373	}
2374	2374
2375	2375	/* Profile dropdown */
2376	2376	.profile-dropdown-menu { background: #141414 !important; border-color: rgba(255,255,255,.10) !important; }
2377	2377	.profile-dropdown-menu a { color: #d4d4d4 !important; }
2378	2378	.profile-dropdown-menu a:hover { color: #ffffff !important; background: rgba(255,255,255,.05) !important; }
2379	2379	.profile-dropdown-divider { background: rgba(255,255,255,.08) !important; }
2380	2380	.profile-dropdown-head { border-bottom-color: rgba(255,255,255,.08) !important; }
2381	2381
2382	2382	/* Sidebar -- pure dark with subtle white-tint active state */
2383	2383	.sidebar {
2384	2384	background: #0d0d0d !important;
2385	2385	border-right: 1px solid rgba(255,255,255,.06) !important;
2386	2386	}
2387	2387	.sidebar-brand { border-bottom-color: rgba(255,255,255,.08) !important; }
2388	2388	.sidebar-brand .logo {
2389	2389	background: #1a1a1a !important;
2390	2390	box-shadow: 0 4px 14px rgba(255,255,255,.15) !important;
2391	2391	}
2392	2392	.sidebar-brand .logo::after {
2393	2393	background: linear-gradient(135deg, #ffffff 0%, #737373 100%) !important;
2394	2394	opacity: .15 !important;
2395	2395	}
2396	2396	.sidebar-brand .brand-name { color: #f5f5f5 !important; }
2397	2397	.sidebar-brand .brand-sub { color: #737373 !important; }
2398	2398	.sidebar-section-label { color: #525252 !important; opacity: 1 !important; }
2399	2399	.sidebar-link { color: #a3a3a3 !important; }
2400	2400	.sidebar-link:hover { color: #ffffff !important; background: rgba(255,255,255,.05) !important; }
2401	2401	.sidebar-link.active {
2402	2402	background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 70%, transparent 100%) !important;
2403	2403	box-shadow: inset 0 0 0 1px rgba(255,255,255,.10) !important;
2404	2404	color: #ffffff !important;
2405	2405	}
2406	2406	.sidebar-link.active::before { background: #ffffff !important; }
2407	2407
2408	2408	/* Buttons */
2409	2409	.btn { background: #1a1a1a !important; border-color: rgba(255,255,255,.10) !important; color: #f5f5f5 !important; }
2410	2410	.btn:hover { background: #242424 !important; border-color: rgba(255,255,255,.30) !important; }
2411	2411	.btn-primary { background: #f5f5f5 !important; border-color: #f5f5f5 !important; color: #0a0a0a !important; box-shadow: 0 4px 14px rgba(255,255,255,.20) !important; }
2412	2412	.btn-primary:hover { background: #ffffff !important; border-color: #ffffff !important; color: #000 !important; box-shadow: 0 6px 18px rgba(255,255,255,.30) !important; }
2413	2413	.btn-secondary{ background: #1a1a1a !important; border-color: rgba(255,255,255,.10) !important; color: #d4d4d4 !important; }
2414	2414	.btn-danger { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.20) !important; color: #f5f5f5 !important; }
2415	2415
2416	2416	/* Banner -- subtle outline only */
2417	2417	.banner.success { color: #f5f5f5 !important; border-color: rgba(255,255,255,.20) !important; background: rgba(255,255,255,.03) !important; }
2418	2418	.banner.danger { color: #f5f5f5 !important; border-color: rgba(255,255,255,.30) !important; background: rgba(255,255,255,.05) !important; }
2419	2419	.banner.warn { color: #e5e5e5 !important; border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.02) !important; }
2420	2420
2421	2421	/* Scrollbar -- mono */
2422	2422	::-webkit-scrollbar-track { background: #0d0d0d !important; }
2423	2423	::-webkit-scrollbar-thumb { background: #2a2a2a !important; border-color: #0d0d0d !important; }
2424	2424	::-webkit-scrollbar-thumb:hover { background: #404040 !important; }
2425	2425	/* ===========================================================================
2426	2426	* Per-site brand-icon text color overrides for plates whose backgrounds
2427	2427	* are too light/dark for white text. Matches each site's actual favicon.
2428	2428	* Also a custom amber color for ABForge to match its favicon AB letters.
2429	2429	* =========================================================================== */
2430	2430	/* ShopCart: pale cream plate -> needs dark text */
2431	2431	.brand-icon[style*="#e8efc7"]::before { color: #4d4d2e !important; text-shadow: none !important; }
2432	2432
2433	2433	/* ABForge: amber-on-dark text like the real favicon */
2434	2434	.brand-icon[style*="#3a1505"]::before { color: #ffb347 !important; text-shadow: none !important; }
2435	2435	/* ===========================================================================
2436	2436	* ShopCart logo: dark forest plate + olive SC letters (matches the actual
2437	2437	* brand mark). Topbar title brightened to clean white.
2438	2438	* =========================================================================== */
2439	2439
2440	2440	/* ShopCart plate -- override the prior light-cream selector that no longer
2441	2441	* matches the dark-forest brand color, plus set olive letters on top. */
2442	2442	.brand-icon[style*="#1a3d2e"]::before {
2443	2443	color: #b5c93d !important;
2444	2444	text-shadow: none !important;
2445	2445	}
2446	2446
2447	2447	/* Topbar page title -- clean white instead of the soft gray it inherited */
2448	2448	.topbar-title {
2449	2449	color: #f5f5f5 !important;
2450	2450	font-weight: 600 !important;
2451	2451	background: none !important;
2452	2452	-webkit-text-fill-color: #f5f5f5 !important;
2453	2453	}
2454	2454	/* ===========================================================================
2455	2455	* Profile chip -- match PTMatrix's pill exactly: taller + bigger avatar
2456	2456	* so the border-radius:999px reads as a true pill instead of a soft
2457	2457	* rounded-rectangle.
2458	2458	* =========================================================================== */
2459	2459	.profile-btn {
2460	2460	height: 50px !important;
2461	2461	padding: 5px 16px 5px 5px !important;
2462	2462	border-radius: 999px !important;
2463	2463	gap: 12px !important;
2464	2464	}
2465	2465	.profile-btn .avatar {
2466	2466	width: 40px !important;
2467	2467	height: 40px !important;
2468	2468	flex: 0 0 40px !important;
2469	2469	font-size: 14px !important;
2470	2470	}
2471	2471	.profile-btn .who .nm, .profile-btn > div > div:first-child { font-size: 14px !important; }
2472	2472	.profile-btn .who .sub, .profile-btn > div > div:nth-child(2) { font-size: 11.5px !important; }
2473	2473	/* ===========================================================================
2474	2474	* Module accent -- warm copper-amber left-edge stripe + matching icon
2475	2475	* fill on the module-head circle. Applied to every .module across every
2476	2476	* page so the entire console reads with the same warm accent.
2477	2477	* =========================================================================== */
2478	2478	.module {
2479	2479	position: relative;
2480	2480	overflow: hidden;
2481	2481	}
2482	2482	.module::before {
2483	2483	content: '';
2484	2484	position: absolute;
2485	2485	top: 0; bottom: 0; left: 0;
2486	2486	width: 3px;
2487	2487	background: linear-gradient(180deg, #b53048 0%, #4d0e15 100%);
2488	2488	box-shadow: 0 0 18px rgba(77,14,21,.55), 6px 0 24px rgba(77,14,21,.18);
2489	2489	pointer-events: none;
2490	2490	z-index: 2;
2491	2491	}
2492	2492	.module-head {
2493	2493	position: relative;
2494	2494	z-index: 1;
2495	2495	}
2496	2496
2497	2497	/* All module-head icons in warm copper-amber (overrides every CGI's
2498	2498	* inline color/background/border-color trio in one place). */
2499	2499	.module-icon,
2500	2500	.module-head .module-icon {
2501	2501	color: #4d0e15 !important;
2502	2502	background: rgba(77,14,21,.10) !important;
2503	2503	border-color: rgba(77,14,21,.35) !important;
2504	2504	box-shadow: 0 0 12px rgba(77,14,21,.20) !important;
2505	2505	}
2506	2506	/* ===========================================================================
2507	2507	* Profile chip -- match the rounded-square shape of Help/Support pills
2508	2508	* next to it (5px corners) instead of the full-pill 999px.
2509	2509	* =========================================================================== */
2510	2510	.profile-btn {
2511	2511	border-radius: 5px !important;
2512	2512	height: 44px !important;
2513	2513	padding: 4px 14px 4px 4px !important;
2514	2514	}
2515	2515	.profile-btn .avatar {
2516	2516	width: 34px !important;
2517	2517	height: 34px !important;
2518	2518	flex: 0 0 34px !important;
2519	2519	font-size: 13px !important;
2520	2520	border-radius: 5px !important; /* slight rounding to mirror the chip */
2521	2521	}
2522	2522	.profile-dropdown-menu {
2523	2523	border-radius: 5px !important;
2524	2524	}
2525	2525	/* Icon stroke override -- some inline styles colored the SVG via
2526	2526	* stroke="currentColor", so we lock the parent .module-icon color
2527	2527	* AND override any inline color attribute on the inner svg/path/circle
2528	2528	* for absolute consistency. */
2529	2529	.module-icon,
2530	2530	.module-head .module-icon,
2531	2531	.module-head .left .module-icon {
2532	2532	color: #4d0e15 !important;
2533	2533	background: rgba(77,14,21,.10) !important;
2534	2534	border: 1px solid rgba(77,14,21,.35) !important;
2535	2535	box-shadow: 0 0 12px rgba(77,14,21,.20) !important;
2536	2536	}
2537	2537	.module-icon svg,
2538	2538	.module-icon svg * {
2539	2539	color: #4d0e15 !important;
2540	2540	stroke: #4d0e15 !important;
2541	2541	}
2542	2542	/* ============================================================
2543	2543	* FINAL OVERRIDES (v=28)
2544	2544	* - Topbar bg: solid (no see-through scrolling under it)
2545	2545	* - SVG chart labels: force topbar-title font via CSS so SVG
2546	2546	* honors the font (font-family attribute with quoted family
2547	2547	* names doesnt apply reliably in all browsers; CSS wins).
2548	2548	* - .tbl first column: tight 24px brand-icon plate, no extra
2549	2549	* horizontal padding eating the row.
2550	2550	* ============================================================ */
2551	2551
2552	2552	.topbar {
2553	2553	background: #0a0a0a !important;
2554	2554	backdrop-filter: none !important;
2555	2555	-webkit-backdrop-filter: none !important;
2556	2556	}
2557	2557
2558	2558	svg text {
2559	2559	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Variable', Roboto, Helvetica, Arial, sans-serif !important;
2560	2560	font-weight: 700 !important;
2561	2561	}
2562	2562
2563	2563	table.tbl td:first-child,
2564	2564	table.tbl th:first-child {
2565	2565	width: 36px !important;
2566	2566	padding: 10px 4px 10px 12px !important;
2567	2567	}
2568	2568	table.tbl .brand-icon {
2569	2569	width: 22px !important;
2570	2570	height: 22px !important;
2571	2571	flex: 0 0 22px !important;
2572	2572	}
2573	2573	table.tbl .brand-icon::before {
2574	2574	font-size: 9px !important;
2575	2575	}
2576	2576	/* ============================================================
2577	2577	* HTML horizontal bar chart (replaces SVG-text labels)
2578	2578	* Used by support.cgi (and any other roll-up that calls svg_hbars).
2579	2579	* Labels are real HTML so they inherit the page font 100%.
2580	2580	* ============================================================ */
2581	2581	.hbar-chart { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
2582	2582	.hbar-row { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 14px; }
2583	2583	.hbar-label { font-weight: 700; color: var(--col-text); font-size: 13.5px; letter-spacing: -.005em; }
2584	2584	.hbar-track { height: 14px; background: #0d0a07; border: 1px solid rgba(255,255,255,.04); border-radius: 4px; overflow: hidden; }
2585	2585	.hbar-fill { height: 100%; border-radius: 4px; opacity: 0.92; transition: width .25s ease; }
2586	2586	.hbar-value { text-align: right; font-weight: 700; color: var(--col-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
2587	2587	/* Un-bold the site-name labels in both the hbar chart and tables */
2588	2588	.hbar-label { font-weight: 500 !important; }
2589	2589	table.tbl td strong { font-weight: 500 !important; }
2590	2590	/* Brand-icon plate inside hbar-label so the chart matches the table below. */
2591	2591	.hbar-label {
2592	2592	display: flex !important;
2593	2593	align-items: center !important;
2594	2594	gap: 10px !important;
2595	2595	}
2596	2596	.hbar-label .brand-icon {
2597	2597	width: 22px !important;
2598	2598	height: 22px !important;
2599	2599	flex: 0 0 22px !important;
2600	2600	}
2601	2601	.hbar-label .brand-icon::before {
2602	2602	font-size: 9px !important;
2603	2603	}
2604	2604	/* Bump the label column a touch to fit the plate + text comfortably. */
2605	2605	.hbar-row { grid-template-columns: 170px 1fr 60px !important; }
2606	2606	/* Status pills (HOT / OPEN / CLEAN) -- passive badges, NOT buttons. */
2607	2607	.status-pill {
2608	2608	border: 0 !important;
2609	2609	background: transparent !important;
2610	2610	padding: 2px 8px !important;
2611	2611	font-size: 10px !important;
2612	2612	font-weight: 700 !important;
2613	2613	letter-spacing: .06em !important;
2614	2614	text-transform: uppercase !important;
2615	2615	cursor: default !important;
2616	2616	}
2617	2617	.status-pill.pill-bad { color: #b53048 !important; }
2618	2618	.status-pill.pill-warn { color: #f59e0b !important; }
2619	2619	.status-pill.pill-ok { color: #10b981 !important; }
2620	2620	/* ============================================================
2621	2621	* Form inputs -- match the topbar search box (dark bg + subtle
2622	2622	* border + amber focus ring). Replaces the browser default
2623	2623	* white-on-black look that bled through on settings.cgi.
2624	2624	* ============================================================ */
2625	2625	input[type="text"],
2626	2626	input[type="password"],
2627	2627	input[type="email"],
2628	2628	input[type="number"],
2629	2629	input[type="url"],
2630	2630	input[type="search"],
2631	2631	input[type="tel"],
2632	2632	input[type="date"],
2633	2633	input[type="time"],
2634	2634	input[type="datetime-local"],
2635	2635	textarea,
2636	2636	select {
2637	2637	background: var(--col-bg-2) !important;
2638	2638	color: var(--col-text) !important;
2639	2639	border: 1px solid var(--col-border) !important;
2640	2640	border-radius: var(--radius-sm, 5px) !important;
2641	2641	padding: 8px 12px !important;
2642	2642	font-size: 13px !important;
2643	2643	font-family: inherit !important;
2644	2644	outline: none !important;
2645	2645	box-sizing: border-box !important;
2646	2646	transition: border-color .15s ease, box-shadow .15s ease !important;
2647	2647	}
2648	2648	/* Default width inside any label-wrapped input (login form, settings, etc.) */
2649	2649	.lbl input[type="text"],
2650	2650	.lbl input[type="password"],
2651	2651	.lbl input[type="email"],
2652	2652	.lbl input[type="number"],
2653	2653	.lbl input[type="url"],
2654	2654	.lbl input[type="search"],
2655	2655	.lbl input[type="tel"],
2656	2656	.lbl input[type="date"],
2657	2657	.lbl textarea,
2658	2658	.lbl select { width: 100% !important; }
2659	2659	input[type="text"]:focus,
2660	2660	input[type="password"]:focus,
2661	2661	input[type="email"]:focus,
2662	2662	input[type="number"]:focus,
2663	2663	input[type="url"]:focus,
2664	2664	input[type="search"]:focus,
2665	2665	input[type="tel"]:focus,
2666	2666	textarea:focus,
2667	2667	select:focus {
2668	2668	border-color: #4d0e15 !important;
2669	2669	box-shadow: 0 0 0 2px rgba(77,14,21,.18) !important;
2670	2670	}
2671	2671	input::placeholder,
2672	2672	textarea::placeholder { color: var(--col-text-dim, #807aa8) !important; opacity: 0.7 !important; }
2673	2673	/* Compact KPI module bodies (donut/gauge cards). Without this the
2674	2674	* KPI tiles stretch to match whichever neighbour grew tallest, leaving
2675	2675	* acres of empty space. */
2676	2676	.kpi-card-compact,
2677	2677	.module-body.kpi-compact { padding: 14px 16px 18px !important; min-height: 0 !important; }
2678	2678	/* Donut legend on revenue.cgi -- brand plate + site name + MTD value */
2679	2679	.donut-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 260px; }
2680	2680	.legend-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
2681	2681	.legend-row .brand-icon { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; }
2682	2682	.legend-row .brand-icon::before { font-size: 8px !important; }
2683	2683	.legend-name { color: var(--col-text); font-weight: 500; }
2684	2684	.legend-val { color: var(--col-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
2685	2685	/* Dial down the big KPI numerals in dashboard tiles (Server / Revenue
2686	2686	* / Support top row). Default was 26px/700 -- too loud against
2687	2687	* the rest of the chrome. */
2688	2688	.module-body.kpi .num,
2689	2689	.kpi .num {
2690	2690	font-size: 20px !important;
2691	2691	font-weight: 500 !important;
2692	2692	letter-spacing: -.01em !important;
2693	2693	}
2694	2694	/* Meta-admin's brand plate variant -- matches its own sidebar mark
2695	2695	* (dark plate + thin white border + subtle drop shadow, NO colored
2696	2696	* glow underneath). Apply via class="brand-icon meta-plate". */
2697	2697	.brand-icon.meta-plate::after { display: none !important; }
2698	2698	.brand-icon.meta-plate {
2699	2699	background: #2d1810 !important;
2700	2700	border: 1px solid #fff !important;
2701	2701	box-shadow: 0 4px 12px rgba(77,14,21,0.18) !important;
2702	2702	}
2703	2703	/* Module icon plates -- brighter red than the burgundy module borders. */
2704	2704	.module-icon,
2705	2705	.module-head .module-icon {
2706	2706	color: #b53048 !important;
2707	2707	background: rgba(77,14,21,.10) !important;
2708	2708	border: 1px solid rgba(77,14,21,.45) !important;
2709	2709	box-shadow: 0 0 12px rgba(77,14,21,.22) !important;
2710	2710	}
2711	2711	.module-icon svg,
2712	2712	.module-icon svg * {
2713	2713	color: #b53048 !important;
2714	2714	stroke: #b53048 !important;
2715	2715	}
2716	2716	/* === Exploratory red-highlight pass === */
2717	2717	/* Active sidebar link: bright red left-edge stripe + faint glow */
2718	2718	.sidebar-link.active {
2719	2719	position: relative;
2720	2720	background: linear-gradient(90deg, rgba(181,48,72,.55) 0%, rgba(77,14,21,.22) 50%, rgba(77,14,21,0) 88%) !important;
2721	2721	box-shadow: inset 0 -1px 0 #b53048 !important;
2722	2722	}
2723	2723	/* === Wine wash across every module/card header (matches sidebar active) === */
2724	2724	.module-head,
2725	2725	.card-header {
2726	2726	background: linear-gradient(90deg, rgba(181,48,72,.55) 0%, rgba(77,14,21,.22) 50%, rgba(77,14,21,0) 88%) !important;
2727	2727	}
2728	2728	.sidebar-link.active::before {
2729	2729	content: '';
2730	2730	position: absolute;
2731	2731	left: 0; top: 6px; bottom: 6px; width: 3px;
2732	2732	background: #b53048;
2733	2733	border-radius: 0 3px 3px 0;
2734	2734	box-shadow: 0 0 8px rgba(77,14,21,.5);
2735	2735	}
2736	2736	.sidebar-link:hover {
2737	2737	color: #b53048 !important;
2738	2738	}
2739	2739
2740	2740	/* Inline links in page subtitles + body copy -- give them a red tone */
2741	2741	.page-subtitle a,
2742	2742	.module-body a:not(.btn):not(.sidebar-link) {
2743	2743	color: #b53048 !important;
2744	2744	}
2745	2745	.page-subtitle a:hover,
2746	2746	.module-body a:not(.btn):not(.sidebar-link):hover {
2747	2747	color: #f87171 !important;
2748	2748	text-decoration-color: rgba(77,14,21,.6);
2749	2749	}
2750	2750
2751	2751	/* Eyebrow dot (the little bullet next to OVERVIEW/ROLL-UP labels) */
2752	2752	.page-eyebrow .dot {
2753	2753	background: #b53048 !important;
2754	2754	box-shadow: 0 0 6px rgba(77,14,21,.55) !important;
2755	2755	}
2756	2756
2757	2757	/* KPI number text-shadow -- subtle red glow under the big numbers */
2758	2758	.module-body.kpi .num,
2759	2759	.kpi .num {
2760	2760	text-shadow: 0 0 16px rgba(77,14,21,.22) !important;
2761	2761	}
2762	2762
2763	2763	/* Topbar profile chip + bell hover -- red accent on hover */
2764	2764	.topbar-iconbtn:hover {
2765	2765	color: #b53048 !important;
2766	2766	}
2767	2767	/* Red accent for checkboxes (uses CSS accent-color, supported Chrome 93+). */
2768	2768	input[type="checkbox"],
2769	2769	input[type="radio"] {
2770	2770	accent-color: #4d0e15;
2771	2771	}
2772	2772	/* === More red on the sidebar menus === */
2773	2773	/* Section labels (PORTFOLIO / CONFIGURATION) -- red tint */
2774	2774	.sidebar-section-label {
2775	2775	color: #b53048 !important;
2776	2776	letter-spacing: .12em;
2777	2777	}
2778	2778	/* Menu item icons -- subtle red wash by default; brighter on hover/active */
2779	2779	.sidebar-link svg {
2780	2780	color: #b53048 !important;
2781	2781	transition: color .15s ease;
2782	2782	}
2783	2783	.sidebar-link:hover svg,
2784	2784	.sidebar-link.active svg {
2785	2785	color: #b53048 !important;
2786	2786	}
2787	2787	/* Active label text -- pull toward bright */
2788	2788	.sidebar-link.active {
2789	2789	color: #fff !important;
2790	2790	}
2791	2791	/* Active sidebar item: hide the left-edge stripe, icon goes white. */
2792	2792	.sidebar-link.active::before { display: none !important; }
2793	2793	.sidebar-link.active svg,
2794	2794	.sidebar-link.active svg * {
2795	2795	color: #fff !important;
2796	2796	stroke: #fff !important;
2797	2797	}
2798	2798
2799	2799	/* Chip range picker: Custom datetime-local inputs -- brand-themed to
2800	2800	match the site (2026-07-09). Scoped to #customWrap so it only styles
2801	2801	the chip-picker's Custom inputs, never other forms on the page. */
2802	2802	#customWrap input[type="datetime-local"] {
2803	2803	background: var(--col-surface, #0f1a26);
2804	2804	color: var(--col-text, #e5e7eb);
2805	2805	border: 1px solid var(--col-border, rgba(255,255,255,.12));
2806	2806	border-radius: 8px;
2807	2807	padding: 5px 10px;
2808	2808	font-size: 12px;
2809	2809	font-family: inherit;
2810	2810	color-scheme: dark;
2811	2811	outline: none;
2812	2812	transition: border-color .15s ease;
2813	2813	}
2814	2814	#customWrap input[type="datetime-local"]:hover,
2815	2815	#customWrap input[type="datetime-local"]:focus {
2816	2816	border-color: var(--col-brand, var(--col-primary, var(--col-accent, #5aa9ff)));
2817	2817	}
2818	2818	#customWrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
2819	2819	filter: invert(1) brightness(1.4);
2820	2820	cursor: pointer;
2821	2821	opacity: 0.75;
2822	2822	}
2823	2823	/* =========================================================================
2824	2824	* CANONICAL CHIP RANGE PICKER (portfolio-wide .tr-chip pattern)
2825	2825	* ========================================================================= */
2826	2826	.tr-chip {
2827	2827	display: inline-flex; align-items: center;
2828	2828	padding: 5px 12px; border-radius: 999px;
2829	2829	font-size: 12px; font-weight: 600;
2830	2830	color: var(--col-text-muted); text-decoration: none;
2831	2831	background: transparent; border: 1px solid var(--col-border);
2832	2832	cursor: pointer; transition: all .15s ease; font-family: inherit;
2833	2833	}
2834	2834	.tr-chip:hover { color: var(--col-text); border-color: var(--col-brand, var(--col-primary, #b53048)); }
2835	2835	.tr-chip.is-active {
2836	2836	background: var(--col-brand, var(--col-primary, #b53048));
2837	2837	color: #fff;
2838	2838	border-color: var(--col-brand, var(--col-primary, #b53048));
2839	2839	}