Diff -- /var/www/vhosts/3dshawn.com/affiliate.3dshawn.com/assets/css/site.css

O Operator
Diff

/var/www/vhosts/3dshawn.com/affiliate.3dshawn.com/assets/css/site.css

added on local at 2026-07-09 23:25:36

Added
+2320
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to 27843403b245
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1/* =====================================================================
2 Creator Platform — site.css
3 Dark, modern, "operations-grade" theme for the unified 3D creator
4 platform. Inspired by the WebSTLs blue palette but pushed harder
5 on gradients, glow, and dashboard density.
6===================================================================== */
7
8/* ---------------------------------------------------------------------
9 1. Design tokens
10--------------------------------------------------------------------- */
11:root {
12 /* Background scale — deep purple-tinted (warmth recipe: brand bleeds INTO the dark base) */
13 --col-bg: #0a0612;
14 --col-bg-2: #0e0a1d;
15 --col-surface-1: #161028;
16 --col-surface-2: #1c1838;
17 --col-surface-3: #251f47;
18 --col-surface-4: #322857;
19 --col-border: #2b2349;
20 --col-border-2: #3b2f6a;
21
22 /* Brand — deep purple primary, light purple as the gradient endpoint */
23 --col-accent: #5b21b6;
24 --col-accent-deep: #2e1065;
25 --col-accent-bright:#7c3aed;
26 --col-accent-glow: rgba(91,33,182,0.35);
27
28 --col-violet: #5b21b6;
29 --col-violet-bright:#7c3aed;
30 --col-cyan: #06b6d4;
31 --col-cyan-bright: #22d3ee;
32 --col-pink: #ec4899;
33
34 /* Brand RGB triples (per warmth recipe) — referenced in overlays */
35 --brand-rgb: 124, 58, 237;
36 --brand-2-rgb: 167, 139, 250;
37
38 /* Status colors */
39 --col-success: #22c55e;
40 --col-warning: #f59e0b;
41 --col-danger: #ef4444;
42 --col-info: #38bdf8;
43
44 /* Text */
45 --col-text: #e6ecf6;
46 --col-text-2: #a8b6d1;
47 --col-text-3: #6f7e9c;
48 --col-text-dim: #4a5878;
49 --col-white: #ffffff;
50
51 /* Gradients */
52 --grad-brand: linear-gradient(130deg, #2e1065 0%, #7c3aed 100%);
53 --grad-brand-soft: linear-gradient(130deg, rgba(124,58,237,0.18) 0%, rgba(167,139,250,0.18) 100%);
54 --grad-cyan: linear-gradient(130deg, #06b6d4 0%, #7c3aed 100%);
55 --grad-success: linear-gradient(130deg, #16a34a 0%, #22c55e 100%);
56 --grad-card: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
57 --grad-border: linear-gradient(130deg, rgba(124,58,237,0.55), rgba(167,139,250,0.45));
58
59 /* Typography */
60 --font-display: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
61 --font-ui: 'Inter', 'Rajdhani', system-ui, sans-serif;
62 --font-mono: 'JetBrains Mono', 'Source Code Pro', monospace;
63
64 /* Spacing */
65 --space-2xs: 4px;
66 --space-xs: 6px;
67 --space-sm: 10px;
68 --space-md: 16px;
69 --space-lg: 24px;
70 --space-xl: 40px;
71 --space-2xl: 64px;
72 --space-3xl: 96px;
73
74 /* Radii */
75 --radius-xs: 4px;
76 --radius-sm: 6px;
77 --radius-md: 10px;
78 --radius-lg: 16px;
79 --radius-xl: 22px;
80 --radius-2xl: 28px;
81
82 /* Shadow */
83 --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
84 --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
85 --shadow-lg: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
86 --shadow-glow: 0 0 32px rgba(124,58,237,0.30);
87
88 /* Transitions */
89 --t-fast: 0.14s ease;
90 --t-med: 0.26s cubic-bezier(.4,0,.2,1);
91 --t-slow: 0.5s cubic-bezier(.4,0,.2,1);
92
93 /* Layout */
94 --sidebar-w: 240px;
95 --topbar-h: 64px;
96 --content-max: 1480px;
97}
98
99
100/* ---------------------------------------------------------------------
101 2. Reset
102--------------------------------------------------------------------- */
103*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
104html { font-size: 16px; scroll-behavior: smooth; }
105body {
106 background: var(--col-bg);
107 color: var(--col-text);
108 font-family: var(--font-ui);
109 font-weight: 400;
110 line-height: 1.55;
111 min-height: 100vh;
112 overflow-x: hidden;
113 -webkit-font-smoothing: antialiased;
114}
115a { color: inherit; text-decoration: none; }
116button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; }
117img { max-width: 100%; display: block; }
118ul, ol { list-style: none; }
119input, textarea, select { font-family: var(--font-ui); }
120
121/* Background atmosphere — every page gets a subtle radial-gradient
122 wash so pure black never shows through. */
123body::before {
124 content: '';
125 position: fixed; inset: 0;
126 background:
127 radial-gradient(ellipse 1200px 700px at 8% -5%, rgba(124,58,237,0.18), transparent 60%),
128 radial-gradient(ellipse 900px 600px at 100% 30%, rgba(167,139,250,0.12), transparent 60%),
129 radial-gradient(ellipse 700px 400px at 50% 110%, rgba(124,58,237,0.10), transparent 60%);
130 pointer-events: none;
131 z-index: 0;
132}
133body > * { position: relative; z-index: 1; }
134
135
136/* ---------------------------------------------------------------------
137 3. Layout shell — sidebar + topbar + main
138--------------------------------------------------------------------- */
139.app {
140 display: grid;
141 grid-template-columns: var(--sidebar-w) 1fr;
142 min-height: 100vh;
143}
144
145.app-main {
146 display: flex;
147 flex-direction: column;
148 min-width: 0;
149}
150
151.app-content {
152 flex: 1;
153 padding: 24px 40px;
154 width: 100%;
155 /* No max-width cap -- main content fills the freed viewport space.
156 Pages with deliberately narrower content (sign-in, settings forms)
157 set their own max-width on their inner wrappers. */
158}
159
160
161/* ---------------------------------------------------------------------
162 4. Sidebar
163--------------------------------------------------------------------- */
164.sidebar {
165 background: linear-gradient(180deg, var(--col-surface-1) 0%, var(--col-bg-2) 100%);
166 border-right: 1px solid var(--col-border);
167 display: flex;
168 flex-direction: column;
169 position: sticky;
170 top: 0;
171 height: 100vh;
172}
173
174/* Diagonal shimmer (sidebar-glisten) -- ambient brand-tinted band sweeps
175 top-left -> bottom-right of the menu BG. Full recipe + bug list:
176 [[feedback-sidebar-glisten-recipe]] in user auto-memory. */
177.sidebar::before {
178 content: '';
179 position: absolute;
180 inset: 0;
181 pointer-events: none;
182 background: linear-gradient(
183 135deg,
184 transparent 30%,
185 rgba(190,160,255,0.07) 48%,
186 rgba(220,200,255,0.11) 52%,
187 transparent 70%
188 );
189 background-size: 250% 250%;
190 background-repeat: no-repeat;
191 background-position: 150% 150%;
192 animation: sidebar-glisten 14s linear infinite;
193 z-index: 0;
194}
195.sidebar > * { position: relative; z-index: 1; }
196@keyframes sidebar-glisten {
197 0% { background-position: 150% 150%; }
198 55% { background-position: -150% -150%; }
199 100% { background-position: -150% -150%; }
200}
201@media (prefers-reduced-motion: reduce) {
202 .sidebar::before { animation: none; opacity: 0; }
203}
204
205.sidebar-brand {
206 padding: var(--space-lg) var(--space-lg) var(--space-md);
207 border-bottom: 1px solid var(--col-border);
208 display: flex;
209 align-items: center;
210 gap: 12px;
211}
212.brand-mark {
213 width: 38px; height: 38px;
214 background: #1e1b4b;
215 border: 1px solid #ffffff;
216 border-radius: var(--radius-md);
217 display: inline-flex !important;
218 flex-direction: row !important;
219 flex-wrap: nowrap !important;
220 align-items: center;
221 justify-content: center;
222 gap: 1px;
223 letter-spacing: -0.5px;
224 line-height: 1;
225 white-space: nowrap;
226 color: #fff;
227 font-family: var(--font-display);
228 font-weight: 700;
229 font-size: 18px;
230 box-shadow: 0 6px 18px var(--col-accent-glow);
231 position: relative;
232}
233.brand-mark::after {
234 content: '';
235 position: absolute; inset: -2px;
236 border-radius: inherit;
237 background: var(--grad-brand);
238 filter: blur(12px);
239 opacity: 0.45;
240 z-index: -1;
241}
242.brand-text {
243 display: flex; flex-direction: column; line-height: 1;
244}
245.brand-name {
246 font-family: var(--font-display);
247 font-weight: 700;
248 font-size: 18px;
249 letter-spacing: 0.4px;
250 color: #fff;
251}
252.brand-sub {
253 font-size: 10px;
254 letter-spacing: 2px;
255 text-transform: uppercase;
256 color: var(--col-text-3);
257 margin-top: 4px;
258}
259
260.sidebar-nav {
261 flex: 1;
262 overflow-y: auto;
263 padding: var(--space-md) var(--space-sm);
264}
265.sidebar-section-label {
266 font-size: 13px;
267 font-weight: 800;
268 letter-spacing: 2px;
269 text-transform: uppercase;
270 color: #6d28d9;
271 padding: var(--space-md) var(--space-md) var(--space-xs);
272}
273.sidebar-link {
274 display: flex;
275 align-items: center;
276 gap: 12px;
277 padding: 9px 14px;
278 margin-bottom: 2px;
279 border-radius: var(--radius-md);
280 color: var(--col-text-2);
281 font-size: 14px;
282 font-weight: 500;
283 transition: background var(--t-fast), color var(--t-fast);
284 position: relative;
285}
286.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
287.sidebar-link:hover {
288 background: var(--col-surface-2);
289 color: var(--col-text);
290}
291.sidebar-link.active {
292 background: linear-gradient(90deg, rgba(91,33,182,0.22), rgba(46,16,101,0.14));
293 color: #fff;
294 box-shadow: inset 0 0 0 1px rgba(91,33,182,0.30);
295}
296.sidebar-link.active::before {
297 content: '';
298 position: absolute;
299 left: -10px; top: 8px; bottom: 8px;
300 width: 3px;
301 border-radius: 0 4px 4px 0;
302 background: var(--grad-brand);
303 box-shadow: 0 0 12px var(--col-accent-glow);
304}
305.sidebar-link .badge {
306 margin-left: auto;
307 background: var(--col-accent);
308 color: #fff;
309 font-size: 10px;
310 font-weight: 700;
311 padding: 2px 7px;
312 border-radius: 5px;
313}
314
315.sidebar-foot {
316 padding: var(--space-md);
317 border-top: 1px solid var(--col-border);
318 display: flex;
319 align-items: center;
320 gap: 10px;
321}
322.user-chip {
323 display: flex; align-items: center; gap: 10px;
324 flex: 1; min-width: 0;
325}
326.user-avatar {
327 width: 34px; height: 34px;
328 border-radius: 50%;
329 background: var(--grad-brand);
330 display: grid; place-items: center;
331 font-weight: 700; font-size: 13px; color: #fff;
332 flex-shrink: 0;
333}
334.user-meta { min-width: 0; }
335.user-name { font-size: 13px; font-weight: 600; color: var(--col-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
336.user-tier { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-cyan-bright); }
337
338
339/* ---------------------------------------------------------------------
340 5. Topbar
341--------------------------------------------------------------------- */
342.topbar {
343 height: var(--topbar-h);
344 border-bottom: 1px solid var(--col-border);
345 background: rgba(8, 12, 26, 0.7);
346 backdrop-filter: blur(12px);
347 -webkit-backdrop-filter: blur(12px);
348 display: flex;
349 align-items: center;
350 justify-content: space-between;
351 padding: 0 var(--space-xl);
352 position: sticky;
353 top: 0;
354 z-index: 150;
355}
356.topbar-title {
357 font-family: var(--font-display);
358 font-size: 18px;
359 font-weight: 600;
360 color: #fff;
361 letter-spacing: 0.3px;
362}
363.topbar-tools { display: flex; align-items: center; gap: 12px; }
364.search-box {
365 display: flex; align-items: center; gap: 8px;
366 background: var(--col-surface-2);
367 border: 1px solid var(--col-border);
368 border-radius: var(--radius-md);
369 padding: 7px 12px;
370 width: 375px;
371 color: var(--col-text-2);
372 transition: border-color var(--t-fast), background var(--t-fast);
373}
374.search-box:focus-within {
375 border-color: var(--col-accent);
376 background: var(--col-surface-1);
377}
378.search-box svg { width: 16px; height: 16px; opacity: 0.7; }
379.search-box input {
380 background: none; border: none; outline: none;
381 color: var(--col-text); font-size: 13px; flex: 1;
382}
383.search-box input::placeholder { color: var(--col-text-3); }
384.search-box .kbd {
385 font-family: var(--font-mono);
386 font-size: 11px;
387 background: var(--col-surface-3);
388 padding: 2px 6px;
389 border-radius: 4px;
390 color: var(--col-text-3);
391 border: 1px solid var(--col-border);
392 white-space: nowrap;
393 flex-shrink: 0;
394}
395
396.icon-btn {
397 width: 36px; height: 36px;
398 border-radius: var(--radius-md);
399 background: var(--col-surface-2);
400 border: 1px solid var(--col-border);
401 display: grid; place-items: center;
402 color: var(--col-text-2);
403 position: relative;
404 transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
405}
406.icon-btn:hover { background: var(--col-surface-3); color: var(--col-text); border-color: var(--col-border-2); }
407.icon-btn svg { width: 16px; height: 16px; }
408.icon-btn .dot {
409 position: absolute;
410 top: 7px; right: 7px;
411 width: 8px; height: 8px;
412 border-radius: 50%;
413 background: var(--col-danger);
414 box-shadow: 0 0 0 2px var(--col-surface-2);
415}
416
417
418/* ---------------------------------------------------------------------
419 6. Buttons
420--------------------------------------------------------------------- */
421.btn {
422 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
423 padding: 10px 18px;
424 font-family: var(--font-ui);
425 font-size: 13px; font-weight: 600;
426 letter-spacing: 0.3px;
427 border-radius: var(--radius-md);
428 border: 1px solid transparent;
429 transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast),
430 border-color var(--t-fast), box-shadow var(--t-fast);
431 cursor: pointer;
432 white-space: nowrap;
433}
434.btn svg { width: 15px; height: 15px; }
435.btn:active { transform: translateY(1px); }
436
437.btn-primary {
438 background: var(--grad-brand);
439 color: #fff;
440 box-shadow: 0 6px 16px rgba(124,58,237,0.35);
441}
442.btn-primary:hover { box-shadow: 0 8px 22px rgba(124,58,237,0.5); filter: brightness(1.08); }
443
444.btn-secondary {
445 background: var(--col-surface-2);
446 color: var(--col-text);
447 border-color: var(--col-border);
448}
449.btn-secondary:hover { background: var(--col-surface-3); border-color: var(--col-border-2); }
450
451.btn-ghost {
452 background: transparent;
453 color: var(--col-text-2);
454}
455.btn-ghost:hover { color: var(--col-text); background: var(--col-surface-2); }
456
457.btn-danger {
458 background: rgba(239,68,68,0.15);
459 color: var(--col-danger);
460 border-color: rgba(239,68,68,0.3);
461}
462.btn-danger:hover { background: rgba(239,68,68,0.25); }
463
464.btn-success {
465 background: rgba(34,197,94,0.16);
466 color: var(--col-success);
467 border-color: rgba(34,197,94,0.3);
468}
469
470.btn-sm { padding: 7px 12px; font-size: 12px; }
471.btn-lg { padding: 14px 28px; font-size: 14px; }
472.btn-block { width: 100%; }
473
474
475/* ---------------------------------------------------------------------
476 7. Cards
477--------------------------------------------------------------------- */
478.card {
479 background: var(--col-surface-1);
480 border: 1px solid var(--col-border);
481 border-radius: var(--radius-lg);
482 padding: var(--space-lg);
483 position: relative;
484}
485.card-elevated {
486 background: linear-gradient(160deg, var(--col-surface-1) 0%, var(--col-surface-2) 100%);
487 box-shadow: var(--shadow-md);
488}
489.card-glow {
490 position: relative;
491 overflow: hidden;
492}
493.card-glow::before {
494 content: '';
495 position: absolute;
496 inset: -1px;
497 border-radius: inherit;
498 background: var(--grad-border);
499 z-index: -1;
500 opacity: 0.55;
501}
502.card-glow::after {
503 content: '';
504 position: absolute;
505 inset: 0;
506 background: var(--col-surface-1);
507 border-radius: inherit;
508 z-index: -1;
509}
510
511.card-head {
512 display: flex; align-items: center; justify-content: space-between;
513 margin-bottom: var(--space-md);
514 gap: 12px;
515}
516.card-title {
517 font-family: var(--font-display);
518 font-size: 16px;
519 font-weight: 600;
520 color: var(--col-text);
521 display: flex; align-items: center; gap: 10px;
522}
523.card-title svg { width: 18px; height: 18px; color: var(--col-accent-bright); }
524.card-actions { display: flex; gap: 8px; }
525
526
527/* ---------------------------------------------------------------------
528 8. Page header
529--------------------------------------------------------------------- */
530.page-head {
531 display: flex; align-items: flex-end; justify-content: space-between;
532 gap: var(--space-md);
533 margin-bottom: var(--space-xl);
534 flex-wrap: wrap;
535}
536.page-eyebrow {
537 display: inline-flex; align-items: center; gap: 8px;
538 font-size: 11px;
539 font-weight: 700;
540 letter-spacing: 2.4px;
541 text-transform: uppercase;
542 color: var(--col-accent-bright);
543 margin-bottom: var(--space-sm);
544}
545.page-eyebrow .dot {
546 width: 6px; height: 6px; border-radius: 50%;
547 background: var(--col-accent-bright);
548 box-shadow: 0 0 8px var(--col-accent-bright);
549 animation: pulse 1.8s ease-in-out infinite;
550}
551@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
552.page-title {
553 font-family: var(--font-display);
554 font-size: 32px;
555 font-weight: 700;
556 color: #fff;
557 letter-spacing: -0.5px;
558 line-height: 1.1;
559}
560.page-subtitle {
561 color: var(--col-text-2);
562 font-size: 14px;
563 margin-top: var(--space-xs);
564 max-width: 640px;
565}
566.page-actions { display: flex; gap: 10px; }
567
568
569/* ---------------------------------------------------------------------
570 9. Stat tiles
571--------------------------------------------------------------------- */
572.stat-row {
573 display: grid;
574 grid-template-columns: repeat(4, 1fr);
575 gap: var(--space-md);
576 margin-bottom: var(--space-xl);
577}
578.stat {
579 background: linear-gradient(160deg, var(--col-surface-1) 0%, var(--col-surface-2) 100%);
580 border: 1px solid var(--col-border);
581 border-radius: var(--radius-lg);
582 padding: var(--space-lg);
583 position: relative;
584 overflow: hidden;
585}
586.stat::before {
587 content: '';
588 position: absolute;
589 top: 0; right: 0;
590 width: 160px; height: 160px;
591 background: radial-gradient(circle, var(--col-accent-glow) 0%, transparent 70%);
592 filter: blur(40px);
593 opacity: 0.35;
594 pointer-events: none;
595}
596.stat-label {
597 font-size: 11px;
598 letter-spacing: 1.5px;
599 text-transform: uppercase;
600 color: var(--col-text-3);
601 font-weight: 600;
602 display: flex; align-items: center; gap: 8px;
603}
604.stat-label svg { width: 14px; height: 14px; color: var(--col-accent-bright); }
605.stat-value {
606 font-family: var(--font-display);
607 font-size: 32px;
608 font-weight: 700;
609 color: #fff;
610 margin-top: var(--space-xs);
611 letter-spacing: -0.5px;
612}
613.stat-meta { display: flex; align-items: center; gap: 6px; margin-top: var(--space-xs); font-size: 12px; }
614.stat-delta {
615 font-weight: 600;
616 display: inline-flex; align-items: center; gap: 3px;
617 padding: 2px 8px;
618 border-radius: 999px;
619 font-size: 11px;
620}
621.stat-delta.up { color: var(--col-success); background: rgba(34,197,94,0.12); }
622.stat-delta.down { color: var(--col-danger); background: rgba(239,68,68,0.12); }
623.stat-meta-label { color: var(--col-text-3); }
624
625
626/* ---------------------------------------------------------------------
627 10. Module / dashboard grid
628--------------------------------------------------------------------- */
629.dash-grid {
630 display: grid;
631 grid-template-columns: 2fr 1fr;
632 gap: var(--space-md);
633}
634.dash-grid-3 {
635 display: grid;
636 grid-template-columns: repeat(3, 1fr);
637 gap: var(--space-md);
638}
639.dash-grid-2 {
640 display: grid;
641 grid-template-columns: 1fr 1fr;
642 gap: var(--space-md);
643}
644
645
646/* ---------------------------------------------------------------------
647 11. Tables
648--------------------------------------------------------------------- */
649.table-wrap {
650 overflow-x: auto;
651 border-radius: var(--radius-md);
652 border: 1px solid var(--col-border);
653}
654.table {
655 width: 100%;
656 border-collapse: collapse;
657 font-size: 13px;
658}
659.table th {
660 text-align: left;
661 font-weight: 600;
662 font-size: 11px;
663 letter-spacing: 1.4px;
664 text-transform: uppercase;
665 color: var(--col-text-3);
666 padding: 12px 16px;
667 background: var(--col-surface-2);
668 border-bottom: 1px solid var(--col-border);
669 white-space: nowrap;
670}
671.table td {
672 padding: 14px 16px;
673 border-bottom: 1px solid var(--col-border);
674 color: var(--col-text);
675}
676.table tr:last-child td { border-bottom: none; }
677.table tr:hover td { background: rgba(255,255,255,0.02); }
678.table .num { font-variant-numeric: tabular-nums; text-align: right; }
679
680
681/* ---------------------------------------------------------------------
682 12. Pills, chips, status indicators
683--------------------------------------------------------------------- */
684.pill {
685 display: inline-flex; align-items: center; gap: 6px;
686 padding: 4px 10px;
687 font-size: 11px;
688 font-weight: 700;
689 letter-spacing: 0.6px;
690 /* Less-rounded corners + brighter text so pills read clearly on
691 deeply-tinted theme backgrounds (purple, neon, etc.) where the
692 prior pill-shape + soft text washed out against the page. */
693 border-radius: 6px;
694 background: rgba(0,0,0,0.30);
695 color: #fff;
696 border: 1px solid var(--col-border);
697}
698.pill svg { width: 11px; height: 11px; }
699.pill.success { color: var(--col-success); background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); }
700.pill.warning { color: var(--col-warning); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
701.pill.danger { color: var(--col-danger); background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); }
702.pill.info { color: var(--col-info); background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.25); }
703.pill.brand { color: var(--col-accent-bright); background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); }
704.pill.violet { color: var(--col-violet-bright); background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); }
705
706.dot-status {
707 width: 8px; height: 8px;
708 border-radius: 50%;
709 display: inline-block;
710}
711.dot-status.green { background: var(--col-success); box-shadow: 0 0 8px var(--col-success); }
712.dot-status.yellow { background: var(--col-warning); box-shadow: 0 0 8px var(--col-warning); }
713.dot-status.red { background: var(--col-danger); box-shadow: 0 0 8px var(--col-danger); }
714.dot-status.gray { background: var(--col-text-dim); }
715
716
717/* ---------------------------------------------------------------------
718 13. Forms
719--------------------------------------------------------------------- */
720.form-group { margin-bottom: var(--space-md); }
721.form-label {
722 display: block;
723 font-size: 12px;
724 font-weight: 600;
725 letter-spacing: 0.5px;
726 color: var(--col-text-2);
727 margin-bottom: 6px;
728}
729.form-label .req { color: var(--col-danger); margin-left: 4px; }
730.form-help { font-size: 11px; color: var(--col-text-3); margin-top: 4px; }
731
732.input, .textarea, .select {
733 width: 100%;
734 padding: 10px 14px;
735 background: var(--col-surface-2);
736 border: 1px solid var(--col-border);
737 border-radius: var(--radius-md);
738 color: var(--col-text);
739 font-size: 13px;
740 outline: none;
741 transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
742}
743.input:focus, .textarea:focus, .select:focus {
744 border-color: var(--col-accent);
745 box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
746 background: var(--col-surface-1);
747}
748.input::placeholder, .textarea::placeholder { color: var(--col-text-dim); }
749.textarea { min-height: 90px; resize: vertical; font-family: inherit; }
750.select {
751 appearance: none;
752 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
753 background-repeat: no-repeat;
754 background-position: right 14px center;
755 padding-right: 32px;
756}
757
758.checkbox, .radio {
759 display: flex; align-items: center; gap: 10px;
760 cursor: pointer;
761 font-size: 13px;
762 color: var(--col-text);
763}
764.checkbox input, .radio input { width: 16px; height: 16px; accent-color: var(--col-accent); }
765
766.toggle {
767 display: inline-block;
768 position: relative;
769 width: 40px; height: 22px;
770 background: var(--col-surface-3);
771 border-radius: 999px;
772 cursor: pointer;
773 transition: background var(--t-fast);
774 flex-shrink: 0;
775 border: 1px solid var(--col-border);
776 vertical-align: middle;
777}
778.toggle::after {
779 content: '';
780 position: absolute;
781 top: 2px; left: 2px;
782 width: 16px; height: 16px;
783 border-radius: 50%;
784 background: #fff;
785 transition: transform var(--t-fast);
786}
787.toggle.on { background: var(--col-accent); border-color: var(--col-accent-deep); }
788.toggle.on::after { transform: translateX(18px); }
789
790
791/* ---------------------------------------------------------------------
792 14. Module cards (dashboard sections)
793--------------------------------------------------------------------- */
794.module {
795 background: var(--col-surface-1);
796 border: 1px solid var(--col-border);
797 border-radius: var(--radius-lg);
798 overflow: hidden;
799 position: relative;
800}
801
802/* ---------------------------------------------------------------- */
803/* Tutorial mode chrome. */
804/* Banner = always-on header strip across the top of a tutorial page. */
805/* Intro = longer preamble paragraphs beneath the banner. */
806/* Explainer = per-module "How this works" caption inside the body. */
807/* */
808/* All three share an indigo-blue palette plus a left accent stripe */
809/* so the talking blocks read as distinct from the rest of the page */
810/* chrome the moment they enter view. */
811/* ---------------------------------------------------------------- */
812.tutorial-banner {
813 position: relative;
814 display: flex;
815 align-items: flex-start;
816 gap: 16px;
817 padding: 18px 22px 18px 26px;
818 margin-bottom: var(--space-lg);
819 background:
820 linear-gradient(135deg,
821 rgba(30,58,138,0.45) 0%,
822 rgba(30,64,175,0.38) 45%,
823 rgba(91,33,182,0.28) 100%);
824 border: 1px solid rgba(124,58,237,0.55);
825 border-radius: var(--radius-lg);
826 box-shadow:
827 0 0 0 1px rgba(124,58,237,0.18) inset,
828 0 10px 30px rgba(30,58,138,0.32);
829 overflow: hidden;
830}
831.tutorial-banner::before {
832 content: '';
833 position: absolute;
834 top: 0; bottom: 0; left: 0;
835 width: 5px;
836 background: linear-gradient(180deg, #5b21b6 0%, #7c3aed 100%);
837}
838.tutorial-banner-icon {
839 width: 38px; height: 38px;
840 border-radius: 50%;
841 display: grid; place-items: center;
842 background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
843 color: #fff;
844 flex-shrink: 0;
845 box-shadow: 0 0 16px rgba(91,33,182,0.55);
846}
847.tutorial-banner-icon svg { width: 20px; height: 20px; }
848.tutorial-banner-body { flex: 1; min-width: 0; }
849.tutorial-banner-title {
850 font-size: 15px;
851 font-weight: 800;
852 color: #7c3aed;
853 letter-spacing: 0.3px;
854 margin-bottom: 5px;
855 text-shadow: 0 0 10px rgba(91,33,182,0.45);
856}
857.tutorial-banner-text {
858 font-size: 13px;
859 line-height: 1.6;
860 color: #cbd5e1;
861}
862.tutorial-banner-text strong { color: #e2e8f0; font-weight: 700; }
863.tutorial-banner .btn { flex-shrink: 0; align-self: center; }
864
865/* Per-module explainer caption ("How this works..."). Smaller than
866 the banner but uses the same accent-stripe + blue glow so it
867 reads as part of the same family of talking blocks. */
868.tutorial-explainer {
869 position: relative;
870 background:
871 linear-gradient(135deg,
872 rgba(30,58,138,0.28) 0%,
873 rgba(30,64,175,0.22) 60%,
874 rgba(91,33,182,0.16) 100%);
875 border: 1px solid rgba(124,58,237,0.45);
876 border-radius: 10px;
877 padding: 12px 14px 12px 18px;
878 font-size: 12.5px;
879 line-height: 1.6;
880 color: #cbd5e1;
881 box-shadow: 0 4px 14px rgba(30,58,138,0.22);
882 overflow: hidden;
883}
884.tutorial-explainer::before {
885 content: '';
886 position: absolute;
887 top: 0; bottom: 0; left: 0;
888 width: 4px;
889 background: linear-gradient(180deg, #5b21b6 0%, #7c3aed 100%);
890}
891.tutorial-explainer strong {
892 color: #e2e8f0;
893 font-weight: 700;
894 letter-spacing: 0.3px;
895}
896.tutorial-explainer code {
897 font-size: 11px;
898 background: rgba(0,0,0,0.38);
899 padding: 1px 6px;
900 border-radius: 4px;
901 color: #c4b5fd;
902 font-weight: 600;
903}
904.tutorial-explainer a { color: #c4b5fd; font-weight: 700; }
905
906/* Longer-form preamble shown beneath the banner. Brighter background
907 than before with the same left accent stripe so it visually links
908 to the banner above. */
909.tutorial-intro {
910 position: relative;
911 background:
912 linear-gradient(180deg,
913 rgba(30,58,138,0.20) 0%,
914 rgba(30,64,175,0.12) 55%,
915 rgba(91,33,182,0.06) 100%);
916 border: 1px solid rgba(124,58,237,0.28);
917 border-radius: var(--radius-lg);
918 padding: 26px 30px 26px 34px;
919 margin-bottom: var(--space-lg);
920 box-shadow: 0 4px 16px rgba(30,58,138,0.14);
921 overflow: hidden;
922}
923.tutorial-intro::before {
924 content: '';
925 position: absolute;
926 top: 0; bottom: 0; left: 0;
927 width: 4px;
928 background: linear-gradient(180deg, #5b21b6 0%, #7c3aed 100%);
929 opacity: 0.55;
930}
931.tutorial-intro-eyebrow {
932 display: inline-block;
933 font-size: 12px;
934 font-weight: 800;
935 letter-spacing: 2.5px;
936 text-transform: uppercase;
937 color: #c4b5fd;
938 background: rgba(124,58,237,0.15);
939 border: 1px solid rgba(124,58,237,0.40);
940 border-radius: 7px;
941 padding: 7px 14px;
942 margin-bottom: 16px;
943}
944.tutorial-intro-title {
945 font-size: 24px;
946 font-weight: 800;
947 margin: 0 0 16px 0;
948 line-height: 1.25;
949 letter-spacing: -0.2px;
950 background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #8b5cf6 100%);
951 -webkit-background-clip: text;
952 background-clip: text;
953 -webkit-text-fill-color: transparent;
954 color: transparent;
955 text-shadow: 0 0 28px rgba(91,33,182,0.30);
956}
957.tutorial-intro-text {
958 font-size: 14px;
959 line-height: 1.7;
960 color: #cbd5e1;
961 margin: 0 0 14px 0;
962}
963.tutorial-intro-text:last-child { margin-bottom: 0; }
964.tutorial-intro-text strong { color: #e2e8f0; font-weight: 700; }
965.tutorial-intro-text em { color: #c4b5fd; font-style: italic; }
966.tutorial-intro-text a { color: #c4b5fd; font-weight: 700; }
967.tutorial-intro-text code {
968 font-size: 12.5px;
969 background: rgba(0,0,0,0.40);
970 padding: 2px 7px;
971 border-radius: 4px;
972 color: #c4b5fd;
973 font-weight: 600;
974}
975.tutorial-intro-foot {
976 margin-top: 18px;
977 padding-top: 16px;
978 border-top: 1px dashed rgba(91,33,182,0.45);
979 font-size: 13.5px;
980}
981
982/* Search-results thumbnail. Square tile next to each model row so the
983 user can identify a product visually instead of by title alone.
984 Empty state shows a colored gradient with the first letter of the
985 title so rows without an uploaded image still have a visual anchor. */
986.search-thumb {
987 width: 120px; height: 120px;
988 border-radius: 12px;
989 object-fit: cover;
990 display: block;
991 background: var(--col-surface-2);
992 border: 1px solid var(--col-border);
993}
994.search-thumb.search-thumb-empty {
995 display: grid; place-items: center;
996 background: linear-gradient(135deg, rgba(124,58,237,0.30) 0%, rgba(124,58,237,0.25) 100%);
997 color: rgba(255,255,255,0.65);
998 font-size: 42px; font-weight: 800;
999 letter-spacing: 0.5px;
1000 text-transform: uppercase;
1001}
1002
1003/* Search-page Edit pill. Matches the topbar Help chip so the action
1004 reads as a real button instead of a tucked-away link. */
1005.search-edit-btn {
1006 display: inline-flex;
1007 align-items: center;
1008 gap: 7px;
1009 height: 36px;
1010 padding: 0 14px;
1011 border-radius: 10px;
1012 background: linear-gradient(135deg, rgba(124,58,237,0.22) 0%, rgba(91,33,182,0.18) 100%);
1013 border: 1px solid rgba(124,58,237,0.55);
1014 color: #c4b5fd;
1015 font-size: 13px;
1016 font-weight: 700;
1017 letter-spacing: 0.3px;
1018 text-decoration: none;
1019 box-shadow: 0 0 14px rgba(91,33,182,0.32);
1020 transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
1021}
1022.search-edit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
1023.search-edit-btn:hover {
1024 background: linear-gradient(135deg, rgba(124,58,237,0.32) 0%, rgba(91,33,182,0.28) 100%);
1025 color: #fff;
1026 transform: translateY(-1px);
1027 box-shadow: 0 0 18px rgba(91,33,182,0.55);
1028}
1029
1030/* Live red unread dot used next to nav entries (Messages right now,
1031 but reusable). Only rendered server-side when there are real unread
1032 items so the indicator never lies. */
1033.menu-dot {
1034 display: inline-block;
1035 width: 8px; height: 8px;
1036 border-radius: 50%;
1037 background: #ef4444;
1038 margin-left: 6px;
1039 vertical-align: middle;
1040 box-shadow: 0 0 8px rgba(239,68,68,0.6);
1041}
1042
1043/* ---------------------------------------------------------------- */
1044/* Promotions (.pr-*) -- shared between seller (/promotions.cgi) and */
1045/* admin (/admin_promotions.cgi) templates. */
1046/* ---------------------------------------------------------------- */
1047.pr-kpis { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px; }
1048.pr-kpi { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:12px; padding:14px 16px; }
1049.pr-kpi .lbl { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
1050.pr-kpi .val { font-size:24px; font-weight:700; color:#fff; font-family: var(--font-mono, monospace); margin-top:4px; }
1051.pr-kpi.is-active { border-color: rgba(34,197,94,0.40); }
1052.pr-kpi.is-active .val { color: #4ade80; }
1053.pr-kpi.is-scheduled .val { color: #a78bfa; }
1054.pr-kpi.is-paused .val { color: #fbbf24; }
1055.pr-kpi.is-expired .val { color: #94a3b8; }
1056
1057.pr-table {
1058 width:100%; border-collapse:separate; border-spacing:0;
1059 background: var(--col-surface-1); border:1px solid var(--col-border);
1060 border-radius:12px; overflow:hidden;
1061}
1062.pr-table thead th {
1063 background: var(--col-surface-2); padding:11px 14px; text-align:left;
1064 font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
1065 color: var(--col-text-3); font-weight:700; border-bottom:1px solid var(--col-border);
1066}
1067.pr-table tbody td { padding:12px 14px; border-bottom:1px solid var(--col-border); font-size:13px; color:var(--col-text-2); vertical-align:middle; }
1068.pr-table tbody tr:last-child td { border-bottom: none; }
1069.pr-table tbody tr:hover td { background: rgba(124,58,237,0.06); }
1070.pr-table .num { text-align:right; font-family: var(--font-mono, monospace); }
1071.pr-table .name { color: var(--col-text); font-weight:600; }
1072.pr-table .meta { font-size:11px; color: var(--col-text-3); margin-top:2px; }
1073.pr-table code { background: rgba(0,0,0,0.30); padding:1px 6px; border-radius:4px; font-size:11px; color: #c4b5fd; }
1074.pr-table .pill { font-size:9px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:1px; text-transform:uppercase; }
1075.pr-table .pill.active { background: rgba(34,197,94,0.18); color: #4ade80; }
1076.pr-table .pill.paused { background: rgba(245,158,11,0.18); color: #fbbf24; }
1077.pr-table .pill.scheduled { background: rgba(124,58,237,0.18); color: #a78bfa; }
1078.pr-table .pill.expired { background: rgba(100,116,139,0.20); color: #94a3b8; }
1079.pr-table .pill.draft { background: rgba(168,85,247,0.18); color: #c084fc; }
1080.pr-table .pill.kind { background: rgba(124,58,237,0.18); color: #c4b5fd; }
1081.pr-table .pill.kind.bundle { background: rgba(34,197,94,0.18); color: #86efac; }
1082.pr-table .pill.kind.sale { background: rgba(245,158,11,0.18); color: #fcd34d; }
1083.pr-table .pill.kind.flash { background: rgba(236,72,153,0.18); color: #f9a8d4; }
1084.pr-table .actions a, .pr-table .actions button {
1085 color: #c4b5fd; font-size: 12px; font-weight:700; text-decoration:none;
1086 background:none; border:none; cursor:pointer; padding:0; font-family:inherit;
1087}
1088.pr-table .actions a:hover, .pr-table .actions button:hover { text-decoration: underline; }
1089.pr-table .actions form { display:inline; margin:0; }
1090.pr-table .actions .sep { color: var(--col-text-3); margin:0 6px; }
1091
1092.pr-form { background: var(--col-surface-1); border:1px solid var(--col-border); border-radius:14px; padding: 22px 26px; }
1093.pr-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px 24px; }
1094@media (max-width: 800px) { .pr-form-grid { grid-template-columns: 1fr; } }
1095.pr-field { display:flex; flex-direction:column; gap:6px; }
1096.pr-field.full { grid-column: 1 / -1; }
1097.pr-field label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--col-text-3); font-weight:700; }
1098.pr-field input[type="text"],
1099.pr-field input[type="number"],
1100.pr-field input[type="datetime-local"],
1101.pr-field textarea,
1102.pr-field select {
1103 background: var(--col-surface-2); border:1px solid var(--col-border);
1104 color: var(--col-text); padding:9px 12px; border-radius:8px;
1105 font-size:14px; font-family:inherit;
1106}
1107.pr-field textarea { min-height: 70px; resize: vertical; }
1108.pr-field .hint { font-size: 11px; color: var(--col-text-3); }
1109.pr-radio-row { display:flex; gap:10px; flex-wrap:wrap; }
1110.pr-radio { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; border:1px solid var(--col-border); background: var(--col-surface-2); cursor:pointer; font-size:13px; }
1111.pr-radio input { accent-color: #7c3aed; }
1112.pr-radio.is-on { border-color: #7c3aed; background: rgba(124,58,237,0.10); }
1113.pr-actions { margin-top: 24px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
1114
1115.pr-models-box { background: var(--col-surface-2); border:1px solid var(--col-border); border-radius:10px; padding:12px; max-height: 240px; overflow-y: auto; }
1116.pr-model-row { display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:6px; }
1117.pr-model-row:hover { background: rgba(124,58,237,0.06); }
1118.pr-model-row input { accent-color: #7c3aed; }
1119
1120.pr-flash { padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13px; }
1121.pr-flash.ok { background: rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.35); color: #86efac; }
1122.pr-flash.err { background: rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.35); color: #fca5a5; }
1123
1124/* ---------------------------------------------------------------- */
1125/* SEO editor pages (storefront_seo.cgi + admin_seo.cgi). */
1126/* Two-column layout: form on the left, live SERP preview on right. */
1127/* ---------------------------------------------------------------- */
1128.seo-grid {
1129 display: grid;
1130 grid-template-columns: 1.5fr 1fr;
1131 gap: 18px;
1132 align-items: start;
1133}
1134@media (max-width: 1000px) { .seo-grid { grid-template-columns: 1fr; } }
1135
1136.seo-preview {
1137 background: var(--col-surface-1);
1138 border: 1px solid var(--col-border);
1139 border-radius: 14px;
1140 padding: 18px 22px;
1141 position: sticky;
1142 top: 80px;
1143}
1144.seo-preview-head {
1145 font-size: 11px;
1146 letter-spacing: 1.5px;
1147 text-transform: uppercase;
1148 color: var(--col-text-3);
1149 font-weight: 700;
1150 margin-bottom: 12px;
1151}
1152.seo-preview-card {
1153 /* Dark surface matching the rest of the dashboard. Still reads as a
1154 search result preview but no longer glares against the page. */
1155 background: var(--col-surface-2);
1156 color: var(--col-text);
1157 padding: 14px 16px;
1158 border-radius: 8px;
1159 font-family: arial, sans-serif;
1160 border: 1px solid var(--col-border);
1161}
1162.seo-preview-card .seo-preview-url {
1163 font-size: 12px;
1164 color: #94a3b8;
1165 margin-bottom: 4px;
1166 word-break: break-all;
1167}
1168.seo-preview-card .seo-preview-title {
1169 font-size: 18px;
1170 color: #a78bfa;
1171 line-height: 1.3;
1172 margin-bottom: 4px;
1173 font-weight: 600;
1174}
1175.seo-preview-card .seo-preview-desc {
1176 font-size: 13px;
1177 color: #cbd5e1;
1178 line-height: 1.45;
1179}
1180.seo-preview-note {
1181 margin-top: 14px;
1182 font-size: 11.5px;
1183 line-height: 1.6;
1184 color: var(--col-text-3);
1185}
1186.module-head {
1187 display: flex; align-items: center; justify-content: space-between;
1188 padding: var(--space-md) var(--space-lg);
1189 border-bottom: 1px solid var(--col-border);
1190 background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
1191 gap: 12px;
1192}
1193.module-head .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
1194.module-icon {
1195 width: 32px; height: 32px;
1196 border-radius: var(--radius-sm);
1197 display: grid; place-items: center;
1198 background: var(--grad-brand-soft);
1199 color: var(--col-accent-bright);
1200 flex-shrink: 0;
1201}
1202.module-icon svg { width: 16px; height: 16px; }
1203.module-title {
1204 font-family: var(--font-display);
1205 font-size: 15px;
1206 font-weight: 600;
1207 color: #fff;
1208}
1209.module-sub {
1210 font-size: 11px;
1211 color: var(--col-text-3);
1212 letter-spacing: 0.5px;
1213 margin-top: 1px;
1214}
1215.module-body { padding: var(--space-lg); }
1216
1217
1218/* ---------------------------------------------------------------------
1219 15. Marketing / landing page
1220--------------------------------------------------------------------- */
1221.landing-nav {
1222 position: sticky;
1223 top: 0; z-index: 100;
1224 background: rgba(5, 8, 19, 0.7);
1225 backdrop-filter: blur(16px);
1226 border-bottom: 1px solid var(--col-border);
1227}
1228.landing-nav-inner {
1229 max-width: var(--content-max);
1230 margin: 0;
1231 padding: 16px var(--space-xl);
1232 display: flex;
1233 align-items: center;
1234 justify-content: space-between;
1235}
1236.landing-nav .links { display: flex; gap: 28px; }
1237.landing-nav .links a {
1238 font-size: 13px;
1239 color: var(--col-text-2);
1240 font-weight: 500;
1241 transition: color var(--t-fast);
1242}
1243.landing-nav .links a:hover { color: var(--col-text); }
1244.landing-nav .auth-actions { display: flex; gap: 10px; align-items: center; }
1245
1246.hero {
1247 padding: 100px var(--space-xl) 80px;
1248 position: relative;
1249 overflow: hidden;
1250}
1251.hero-glow-1, .hero-glow-2, .hero-glow-3 {
1252 position: absolute; pointer-events: none; border-radius: 50%;
1253 filter: blur(80px);
1254}
1255.hero-glow-1 { width: 720px; height: 720px; top: -260px; right: -120px; background: radial-gradient(circle, rgba(91,33,182,0.28), transparent 65%); }
1256.hero-glow-2 { width: 560px; height: 560px; bottom: -160px; left: 6%; background: radial-gradient(circle, rgba(76,29,149,0.26), transparent 65%); }
1257.hero-glow-3 { width: 480px; height: 480px; top: 20%; left: 40%; background: radial-gradient(circle, rgba(6,182,212,0.10), transparent 65%); }
1258
1259.hero-grid-bg {
1260 position: absolute; inset: 0; pointer-events: none;
1261 background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
1262 background-size: 38px 38px;
1263 mask-image: radial-gradient(ellipse 800px 600px at 50% 50%, black 30%, transparent 80%);
1264 -webkit-mask-image: radial-gradient(ellipse 800px 600px at 50% 50%, black 30%, transparent 80%);
1265}
1266
1267.hero-inner {
1268 max-width: var(--content-max);
1269 margin: 0;
1270 position: relative;
1271 z-index: 2;
1272 display: grid;
1273 grid-template-columns: 1.1fr 1fr;
1274 gap: var(--space-2xl);
1275 align-items: center;
1276}
1277.hero-pill {
1278 display: inline-flex; align-items: center; gap: 8px;
1279 padding: 6px 14px;
1280 border-radius: 999px;
1281 background: rgba(124,58,237,0.10);
1282 border: 1px solid rgba(124,58,237,0.30);
1283 color: var(--col-accent-bright);
1284 font-size: 11px;
1285 font-weight: 700;
1286 letter-spacing: 1.8px;
1287 text-transform: uppercase;
1288 margin-bottom: var(--space-lg);
1289}
1290.hero-pill .dot {
1291 width: 6px; height: 6px;
1292 border-radius: 50%;
1293 background: var(--col-accent-bright);
1294 box-shadow: 0 0 8px var(--col-accent-bright);
1295 animation: pulse 1.8s infinite;
1296}
1297.hero-title {
1298 font-family: var(--font-display);
1299 font-size: clamp(40px, 5.6vw, 76px);
1300 line-height: 0.98;
1301 font-weight: 700;
1302 letter-spacing: -1.5px;
1303 color: #fff;
1304 margin-bottom: var(--space-md);
1305}
1306.hero-title .grad {
1307 background: var(--grad-brand);
1308 -webkit-background-clip: text;
1309 background-clip: text;
1310 -webkit-text-fill-color: transparent;
1311}
1312.hero-sub {
1313 font-size: 17px;
1314 color: var(--col-text-2);
1315 max-width: 520px;
1316 margin-bottom: var(--space-xl);
1317 line-height: 1.65;
1318}
1319.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
1320.hero-trust {
1321 display: flex; gap: 24px;
1322 margin-top: var(--space-xl);
1323 padding-top: var(--space-md);
1324 border-top: 1px solid var(--col-border);
1325 flex-wrap: wrap;
1326}
1327.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--col-text-3); }
1328.hero-trust-item svg { width: 16px; height: 16px; color: var(--col-success); }
1329
1330/* Hero visual: stacked floating cards mock */
1331.hero-visual {
1332 position: relative;
1333 height: 540px;
1334}
1335.float-card {
1336 position: absolute;
1337 background: linear-gradient(160deg, var(--col-surface-2) 0%, var(--col-surface-1) 100%);
1338 border: 1px solid var(--col-border-2);
1339 border-radius: var(--radius-lg);
1340 box-shadow: var(--shadow-lg);
1341 padding: var(--space-md);
1342 backdrop-filter: blur(8px);
1343}
1344.fc-1 {
1345 top: 20px; left: 0; width: 280px;
1346 animation: floaty 6s ease-in-out infinite;
1347}
1348.fc-2 {
1349 top: 100px; right: 0; width: 300px;
1350 animation: floaty 6s ease-in-out -2s infinite;
1351}
1352.fc-3 {
1353 bottom: 40px; left: 60px; width: 320px;
1354 animation: floaty 6s ease-in-out -4s infinite;
1355}
1356@keyframes floaty {
1357 0%,100% { transform: translateY(0); }
1358 50% { transform: translateY(-10px); }
1359}
1360
1361/* Section pattern */
1362.section {
1363 padding: var(--space-3xl) var(--space-xl);
1364 max-width: var(--content-max);
1365 margin: 0 auto;
1366 position: relative;
1367}
1368.section-eyebrow {
1369 display: inline-block;
1370 color: var(--col-accent-bright);
1371 font-size: 12px;
1372 font-weight: 700;
1373 letter-spacing: 2.5px;
1374 text-transform: uppercase;
1375 margin-bottom: var(--space-sm);
1376}
1377.section-title {
1378 font-family: var(--font-display);
1379 font-size: clamp(28px, 3vw, 44px);
1380 font-weight: 700;
1381 letter-spacing: -0.6px;
1382 line-height: 1.15;
1383 color: #fff;
1384 margin-bottom: var(--space-md);
1385 max-width: 760px;
1386}
1387.section-title .grad {
1388 background: var(--grad-brand);
1389 -webkit-background-clip: text;
1390 background-clip: text;
1391 -webkit-text-fill-color: transparent;
1392}
1393.section-sub {
1394 font-size: 16px;
1395 color: var(--col-text-2);
1396 max-width: 720px;
1397 line-height: 1.65;
1398 margin-bottom: var(--space-2xl);
1399}
1400
1401.feature-grid {
1402 display: grid;
1403 grid-template-columns: repeat(3, 1fr);
1404 gap: var(--space-md);
1405}
1406.feature {
1407 background: var(--col-surface-1);
1408 border: 1px solid var(--col-border);
1409 border-radius: var(--radius-lg);
1410 padding: var(--space-lg);
1411 transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
1412 position: relative;
1413 overflow: hidden;
1414}
1415.feature:hover {
1416 transform: translateY(-4px);
1417 border-color: var(--col-border-2);
1418 box-shadow: var(--shadow-md);
1419}
1420.feature-icon {
1421 width: 44px; height: 44px;
1422 border-radius: var(--radius-md);
1423 display: grid; place-items: center;
1424 background: var(--grad-brand-soft);
1425 color: var(--col-accent-bright);
1426 margin-bottom: var(--space-md);
1427 border: 1px solid rgba(124,58,237,0.25);
1428}
1429.feature-icon svg { width: 22px; height: 22px; }
1430.feature-title {
1431 font-family: var(--font-display);
1432 font-size: 18px;
1433 font-weight: 600;
1434 color: #fff;
1435 margin-bottom: var(--space-xs);
1436}
1437.feature-desc { font-size: 13px; color: var(--col-text-2); line-height: 1.65; }
1438.feature-tag {
1439 position: absolute;
1440 top: var(--space-md);
1441 right: var(--space-md);
1442 font-size: 9px;
1443 font-weight: 700;
1444 letter-spacing: 1.5px;
1445 text-transform: uppercase;
1446 padding: 3px 8px;
1447 border-radius: 999px;
1448 background: rgba(124,58,237,0.18);
1449 color: var(--col-violet-bright);
1450 border: 1px solid rgba(124,58,237,0.3);
1451}
1452
1453/* Pricing */
1454.pricing-grid {
1455 display: grid;
1456 grid-template-columns: repeat(4, 1fr);
1457 gap: var(--space-md);
1458}
1459.price-card {
1460 background: var(--col-surface-1);
1461 border: 1px solid var(--col-border);
1462 border-radius: var(--radius-lg);
1463 padding: var(--space-lg);
1464 display: flex;
1465 flex-direction: column;
1466 position: relative;
1467}
1468.price-card.featured {
1469 border-color: rgba(124,58,237,0.5);
1470 background: linear-gradient(160deg, var(--col-surface-2) 0%, var(--col-surface-1) 100%);
1471 box-shadow: 0 0 40px rgba(124,58,237,0.18);
1472}
1473.price-card.featured::before {
1474 content: 'MOST POPULAR';
1475 position: absolute;
1476 top: -10px; left: 50%; transform: translateX(-50%);
1477 background: var(--grad-brand);
1478 color: #fff;
1479 font-size: 10px;
1480 font-weight: 700;
1481 letter-spacing: 1.6px;
1482 padding: 4px 12px;
1483 border-radius: 999px;
1484}
1485.price-tier {
1486 font-family: var(--font-display);
1487 font-size: 18px;
1488 font-weight: 600;
1489 color: #fff;
1490 margin-bottom: var(--space-xs);
1491}
1492.price-amt {
1493 font-family: var(--font-display);
1494 font-size: 38px;
1495 font-weight: 700;
1496 color: #fff;
1497 letter-spacing: -1px;
1498}
1499.price-amt .per { font-size: 13px; color: var(--col-text-3); font-weight: 500; }
1500.price-desc { color: var(--col-text-2); font-size: 13px; margin: var(--space-sm) 0 var(--space-md); }
1501.price-list {
1502 margin: var(--space-md) 0 var(--space-lg);
1503 display: flex; flex-direction: column; gap: 8px;
1504}
1505.price-list li {
1506 font-size: 13px;
1507 color: var(--col-text-2);
1508 display: flex; align-items: flex-start; gap: 8px;
1509}
1510.price-list svg { width: 14px; height: 14px; color: var(--col-success); flex-shrink: 0; margin-top: 3px; }
1511
1512
1513/* ---------------------------------------------------------------------
1514 16. Auth pages (login, signup)
1515--------------------------------------------------------------------- */
1516.auth-shell {
1517 min-height: 100vh;
1518 display: grid;
1519 grid-template-columns: 1fr 1fr;
1520}
1521.auth-side {
1522 position: relative;
1523 background: linear-gradient(140deg, #0a0f24 0%, #1a1142 50%, #0a0f24 100%);
1524 display: flex;
1525 flex-direction: column;
1526 justify-content: space-between;
1527 padding: var(--space-2xl);
1528 overflow: hidden;
1529}
1530.auth-side::before {
1531 content: '';
1532 position: absolute;
1533 inset: 0;
1534 background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
1535 background-size: 40px 40px;
1536 pointer-events: none;
1537}
1538.auth-side-glow {
1539 position: absolute;
1540 width: 700px; height: 700px;
1541 top: -160px; right: -200px;
1542 background: radial-gradient(circle, rgba(124,58,237,0.30), transparent 60%);
1543 filter: blur(60px);
1544}
1545.auth-side-content { position: relative; z-index: 2; max-width: 460px; }
1546.auth-quote {
1547 font-family: var(--font-display);
1548 font-size: 26px;
1549 line-height: 1.35;
1550 color: #fff;
1551 font-weight: 500;
1552 letter-spacing: -0.3px;
1553 margin-bottom: var(--space-md);
1554}
1555.auth-quote-attr { font-size: 13px; color: var(--col-text-2); }
1556
1557.auth-main {
1558 display: flex; flex-direction: column;
1559 padding: var(--space-2xl);
1560 background: var(--col-bg);
1561 position: relative;
1562}
1563.auth-form-wrap {
1564 width: 100%; max-width: 420px;
1565 margin: auto;
1566}
1567.auth-title {
1568 font-family: var(--font-display);
1569 font-size: 30px;
1570 font-weight: 700;
1571 color: #fff;
1572 letter-spacing: -0.5px;
1573 margin-bottom: var(--space-xs);
1574}
1575.auth-sub { color: var(--col-text-2); font-size: 14px; margin-bottom: var(--space-xl); }
1576.auth-divider {
1577 display: flex; align-items: center; gap: 10px;
1578 color: var(--col-text-3);
1579 font-size: 11px;
1580 letter-spacing: 1.5px;
1581 text-transform: uppercase;
1582 margin: var(--space-md) 0;
1583}
1584.auth-divider::before, .auth-divider::after {
1585 content: '';
1586 flex: 1;
1587 height: 1px;
1588 background: var(--col-border);
1589}
1590.auth-foot {
1591 text-align: center;
1592 font-size: 13px;
1593 color: var(--col-text-2);
1594 margin-top: var(--space-lg);
1595}
1596.auth-foot a { color: var(--col-accent-bright); font-weight: 600; }
1597
1598
1599/* ---------------------------------------------------------------------
1600 17. Charts (lightweight CSS-only sparklines / bars)
1601--------------------------------------------------------------------- */
1602.chart {
1603 width: 100%;
1604 height: 220px;
1605 position: relative;
1606}
1607.bars {
1608 display: flex; align-items: flex-end; gap: 8px;
1609 height: 100%;
1610 padding: var(--space-md) 0;
1611}
1612.bar {
1613 flex: 1;
1614 background: var(--grad-brand);
1615 border-radius: 6px 6px 0 0;
1616 min-height: 8px;
1617 position: relative;
1618 transition: filter var(--t-fast);
1619}
1620.bar:hover { filter: brightness(1.2); }
1621.bar::after {
1622 content: attr(data-label);
1623 position: absolute;
1624 bottom: -22px; left: 50%; transform: translateX(-50%);
1625 font-size: 10px;
1626 color: var(--col-text-3);
1627 letter-spacing: 0.5px;
1628}
1629
1630.spark {
1631 width: 100%;
1632 height: 80px;
1633 display: block;
1634}
1635.spark path { fill: none; stroke: var(--col-accent-bright); stroke-width: 2; }
1636.spark .area { fill: rgba(124,58,237,0.18); stroke: none; }
1637
1638
1639/* ---------------------------------------------------------------------
1640 18. Upload zone
1641--------------------------------------------------------------------- */
1642.dropzone {
1643 border: 2px dashed var(--col-border-2);
1644 background: var(--col-surface-1);
1645 border-radius: var(--radius-lg);
1646 padding: var(--space-2xl);
1647 text-align: center;
1648 transition: border-color var(--t-fast), background var(--t-fast);
1649 cursor: pointer;
1650}
1651.dropzone:hover, .dropzone.drag {
1652 border-color: var(--col-accent);
1653 background: rgba(124,58,237,0.05);
1654}
1655.dropzone-icon {
1656 width: 64px; height: 64px;
1657 border-radius: 50%;
1658 background: var(--grad-brand-soft);
1659 display: grid; place-items: center;
1660 margin: 0 auto var(--space-md);
1661 color: var(--col-accent-bright);
1662}
1663.dropzone-icon svg { width: 28px; height: 28px; }
1664.dropzone-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 6px; }
1665.dropzone-sub { color: var(--col-text-3); font-size: 13px; }
1666
1667
1668/* ---------------------------------------------------------------------
1669 19. Model cards
1670--------------------------------------------------------------------- */
1671.model-grid {
1672 display: grid;
1673 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1674 gap: var(--space-md);
1675}
1676.model-card {
1677 background: var(--col-surface-1);
1678 border: 1px solid var(--col-border);
1679 border-radius: var(--radius-lg);
1680 overflow: hidden;
1681 transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
1682 position: relative;
1683}
1684.model-card:hover {
1685 transform: translateY(-3px);
1686 border-color: var(--col-border-2);
1687 box-shadow: var(--shadow-md);
1688}
1689.model-thumb {
1690 aspect-ratio: 4 / 3;
1691 background: var(--col-surface-2);
1692 position: relative;
1693 overflow: hidden;
1694}
1695.model-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
1696.model-card:hover .model-thumb img { transform: scale(1.05); }
1697.model-thumb-overlay {
1698 position: absolute;
1699 inset: 0;
1700 background: linear-gradient(180deg, transparent 50%, rgba(5,8,19,0.85) 100%);
1701 display: flex;
1702 flex-direction: column;
1703 justify-content: flex-end;
1704 padding: var(--space-md);
1705}
1706.model-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
1707.model-info { padding: var(--space-md); }
1708.model-name {
1709 font-family: var(--font-display);
1710 font-size: 15px;
1711 font-weight: 600;
1712 color: #fff;
1713 margin-bottom: 4px;
1714 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
1715}
1716.model-row {
1717 display: flex; align-items: center; justify-content: space-between;
1718 font-size: 12px;
1719 color: var(--col-text-3);
1720}
1721.model-price {
1722 font-family: var(--font-display);
1723 font-size: 16px;
1724 font-weight: 700;
1725 color: var(--col-accent-bright);
1726}
1727
1728
1729/* ---------------------------------------------------------------------
1730 20. Tabs
1731--------------------------------------------------------------------- */
1732.tabs {
1733 display: flex;
1734 gap: 4px;
1735 padding: 4px;
1736 background: var(--col-surface-2);
1737 border: 1px solid var(--col-border);
1738 border-radius: var(--radius-md);
1739 margin-bottom: var(--space-lg);
1740 width: fit-content;
1741}
1742.tab {
1743 padding: 8px 16px;
1744 font-size: 13px;
1745 font-weight: 600;
1746 color: var(--col-text-2);
1747 border-radius: var(--radius-sm);
1748 cursor: pointer;
1749 transition: background var(--t-fast), color var(--t-fast);
1750 white-space: nowrap;
1751}
1752.tab:hover { color: var(--col-text); }
1753.tab.active {
1754 background: var(--col-surface-3);
1755 color: #fff;
1756 box-shadow: inset 0 0 0 1px var(--col-border-2);
1757}
1758
1759
1760/* ---------------------------------------------------------------------
1761 21. Progress bar
1762--------------------------------------------------------------------- */
1763.progress {
1764 width: 100%;
1765 height: 6px;
1766 background: var(--col-surface-3);
1767 border-radius: 999px;
1768 overflow: hidden;
1769}
1770.progress-fill {
1771 height: 100%;
1772 background: var(--grad-brand);
1773 border-radius: inherit;
1774 transition: width var(--t-slow);
1775}
1776
1777
1778/* ---------------------------------------------------------------------
1779 22. Banners / alerts
1780--------------------------------------------------------------------- */
1781.banner {
1782 display: flex; align-items: center; gap: 12px;
1783 padding: 12px 16px;
1784 border-radius: var(--radius-md);
1785 font-size: 13px;
1786 border: 1px solid;
1787}
1788.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
1789.banner.info { background: rgba(56,189,248,0.10); color: #bae6fd; border-color: rgba(56,189,248,0.25); }
1790.banner.success { background: rgba(34,197,94,0.10); color: #bbf7d0; border-color: rgba(34,197,94,0.25); }
1791.banner.warning { background: rgba(245,158,11,0.10); color: #fde68a; border-color: rgba(245,158,11,0.25); }
1792.banner.danger { background: rgba(239,68,68,0.10); color: #fecaca; border-color: rgba(239,68,68,0.25); }
1793.banner-action { margin-left: auto; }
1794
1795
1796/* ---------------------------------------------------------------------
1797 23. Footer (landing)
1798--------------------------------------------------------------------- */
1799.site-foot {
1800 border-top: 1px solid var(--col-border);
1801 background: var(--col-bg-2);
1802 padding: var(--space-2xl) var(--space-xl);
1803 margin-top: var(--space-3xl);
1804}
1805.foot-grid {
1806 max-width: var(--content-max);
1807 margin: 0 auto;
1808 display: grid;
1809 grid-template-columns: 2fr repeat(4, 1fr);
1810 gap: var(--space-2xl);
1811}
1812.foot-col h5 {
1813 font-size: 11px;
1814 font-weight: 700;
1815 letter-spacing: 2px;
1816 text-transform: uppercase;
1817 color: var(--col-text-3);
1818 margin-bottom: var(--space-md);
1819}
1820.foot-col ul { display: flex; flex-direction: column; gap: 8px; }
1821.foot-col a { color: var(--col-text-2); font-size: 13px; transition: color var(--t-fast); }
1822.foot-col a:hover { color: var(--col-text); }
1823.foot-bottom {
1824 max-width: var(--content-max);
1825 margin: var(--space-xl) auto 0;
1826 padding-top: var(--space-md);
1827 border-top: 1px solid var(--col-border);
1828 display: flex;
1829 justify-content: space-between;
1830 font-size: 12px;
1831 color: var(--col-text-3);
1832}
1833
1834
1835/* ---------------------------------------------------------------------
1836 24. Utilities
1837--------------------------------------------------------------------- */
1838.flex { display: flex; }
1839.flex-col { display: flex; flex-direction: column; }
1840.items-center { align-items: center; }
1841.items-end { align-items: flex-end; }
1842.justify-between { justify-content: space-between; }
1843.justify-center { justify-content: center; }
1844.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
1845.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
1846.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
1847.text-center { text-align: center; }
1848.text-dim { color: var(--col-text-3); }
1849.text-secondary { color: var(--col-text-2); }
1850.text-success { color: var(--col-success); }
1851.text-danger { color: var(--col-danger); }
1852.text-warning { color: var(--col-warning); }
1853.text-brand { color: var(--col-accent-bright); }
1854.font-mono { font-family: var(--font-mono); }
1855.text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-md { font-size: 15px; }
1856.text-lg { font-size: 18px; } .text-xl { font-size: 24px; }
1857.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
1858.tabular { font-variant-numeric: tabular-nums; }
1859.divider { height: 1px; background: var(--col-border); margin: var(--space-md) 0; }
1860.hide { display: none !important; }
1861
1862
1863/* ---------------------------------------------------------------------
1864 25. Scrollbar
1865--------------------------------------------------------------------- */
1866::-webkit-scrollbar { width: 10px; height: 10px; }
1867::-webkit-scrollbar-track { background: var(--col-bg-2); }
1868::-webkit-scrollbar-thumb { background: var(--col-surface-3); border-radius: 999px; border: 2px solid var(--col-bg-2); }
1869::-webkit-scrollbar-thumb:hover { background: var(--col-surface-4); }
1870
1871
1872/* ---------------------------------------------------------------------
1873 26. Responsive
1874--------------------------------------------------------------------- */
1875@media (max-width: 1100px) {
1876 .stat-row { grid-template-columns: repeat(2, 1fr); }
1877 .feature-grid { grid-template-columns: repeat(2, 1fr); }
1878 .pricing-grid { grid-template-columns: repeat(2, 1fr); }
1879 .foot-grid { grid-template-columns: 1fr 1fr; }
1880 .dash-grid, .dash-grid-3, .dash-grid-2 { grid-template-columns: 1fr; }
1881 .auth-shell { grid-template-columns: 1fr; }
1882 .auth-side { display: none; }
1883 .hero-inner { grid-template-columns: 1fr; }
1884 .hero-visual { display: none; }
1885}
1886@media (max-width: 760px) {
1887 /* Landing / marketing pages (not the dashboard wrapper). The dashboard
1888 sidebar overlay logic lives in the <=1200px block below; do NOT
1889 re-introduce `.sidebar { display: none; }` here -- it broke the
1890 slide-in toggle because display:none beats the overlay's
1891 position:fixed regardless of source order. */
1892 .search-box { display: none; }
1893 .section { padding: var(--space-2xl) var(--space-md); }
1894 .hero { padding: 60px var(--space-md); }
1895}
1896
1897/* ---------------------------------------------------------------------
1898 Tablet / foldable / landscape-phone (<= 1200px).
1899 --------------------------------------------------------------------- */
1900@media (max-width: 1200px) {
1901
1902 /* Layout: no sidebar column on mobile -- it becomes a slide-in
1903 overlay (rules below). Main content gets the full width by
1904 default; tapping the toggle slides the sidebar in on top of it.
1905 CRITICAL: must be a SINGLE column. Sidebar + toggle below are
1906 `position: fixed`, which removes them from grid flow -- if the
1907 template still declares two columns (`0 1fr`), .app-main lands
1908 in column 1 (width 0) and the entire content collapses. */
1909 .app { grid-template-columns: 1fr; }
1910 .topbar-brand { display: inline-flex; }
1911 .topbar { padding-left: 56px; } /* leave room for the collapse toggle */
1912
1913 /* Sidebar -> overlay panel. Pulled out of the grid via position:fixed,
1914 translated off-screen by default, slid in when html.mobile-nav-open
1915 is on the root element. Box-shadow gives it depth over the content. */
1916 /* Stacking order at narrow widths (topbar is z:150 so we sit above it
1917 so the dim also covers the topbar -- otherwise the topbar pokes
1918 through the backdrop and reads as "weird, not darkened"):
1919 backdrop = 160, sidebar = 170, toggle (open) = 180. */
1920 .sidebar {
1921 position: fixed !important;
1922 top: 0; left: 0; bottom: 0;
1923 width: 260px;
1924 height: 100vh;
1925 transform: translateX(-100%);
1926 opacity: 1 !important;
1927 visibility: visible !important;
1928 transition: transform 0.25s ease;
1929 z-index: 170;
1930 box-shadow: 4px 0 20px rgba(0,0,0,0.5);
1931 }
1932 html.mobile-nav-open .sidebar {
1933 transform: translateX(0);
1934 }
1935
1936 /* Backdrop catches taps outside the sidebar so the nav closes when
1937 you tap the page. Transparent on purpose -- the user disliked the
1938 dim effect; the sliding panel + box-shadow already reads as a
1939 foreground element without needing a darkened layer behind it. */
1940 html.mobile-nav-open body::before {
1941 content: "";
1942 position: fixed;
1943 top: 0; left: 0; right: 0; bottom: 0;
1944 background: transparent;
1945 z-index: 160;
1946 }
1947
1948 /* Toggle button: pinned to the left edge when nav is closed (chevron
1949 points right = "open me"). When nav is open it rides on the right
1950 edge of the sidebar panel (chevron points left = "close me").
1951 !important needed because the base rule lives in an inline <style>
1952 block AFTER the link to this stylesheet. */
1953 .sidebar-toggle { left: 0 !important; }
1954 .sidebar-toggle svg { transform: rotate(180deg) !important; }
1955 html.mobile-nav-open .sidebar-toggle { left: 260px !important; z-index: 180; }
1956 html.mobile-nav-open .sidebar-toggle svg { transform: rotate(0deg) !important; }
1957
1958 /* All multi-column form layouts collapse to a single column so labels
1959 stack above inputs and inputs reach the full content width. */
1960 .pr-form-grid,
1961 .dash-grid,
1962 .dash-grid-3,
1963 .dash-grid-2,
1964 .seo-grid,
1965 .auth-shell,
1966 .hero-inner,
1967 .foot-grid,
1968 .feature-grid,
1969 .pricing-grid,
1970 .stat-row {
1971 grid-template-columns: 1fr !important;
1972 }
1973 .auth-side,
1974 .hero-visual { display: none; }
1975
1976 /* Form modules tighten in -- the 22/26 desktop padding feels cavernous
1977 on a phone-width container. */
1978 .pr-form { padding: 18px 16px; }
1979 .module { padding: 16px; }
1980
1981 /* Inputs go thumb-friendly. 16px is the magic number that suppresses
1982 iOS Safari's auto-zoom on focus; 44px min-height matches the Apple
1983 HIG / Material touch target guideline. */
1984 .input, .textarea, .select,
1985 .pr-field input[type="text"],
1986 .pr-field input[type="number"],
1987 .pr-field input[type="datetime-local"],
1988 .pr-field input[type="email"],
1989 .pr-field input[type="password"],
1990 .pr-field textarea,
1991 .pr-field select {
1992 font-size: 16px;
1993 padding: 12px 14px;
1994 min-height: 44px;
1995 width: 100%;
1996 box-sizing: border-box;
1997 }
1998 .pr-field textarea,
1999 .textarea { min-height: 96px; }
2000
2001 /* Labels stay uppercase + tracked even on the smallest device --
2002 reinforces the existing rule in case a UA stylesheet leaks in. */
2003 .pr-field label,
2004 .form-label {
2005 text-transform: uppercase;
2006 letter-spacing: 1.5px;
2007 font-size: 11px;
2008 font-weight: 700;
2009 }
2010
2011 /* Touch-friendly buttons. The base .btn loses its lat-padding on
2012 small screens; bumping min-height keeps it hittable. */
2013 .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
2014 .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 13px; }
2015
2016 /* Headings scale down a step. .page-title is 36-40px on desktop. */
2017 .page-head .page-title { font-size: 28px; line-height: 1.2; }
2018 .page-subtitle { font-size: 14px; }
2019
2020 /* Section + content padding tightens. */
2021 .app-content { padding: 20px 32px; }
2022
2023 /* Tables that don't fit the viewport get horizontal scroll instead of
2024 overflowing the layout. Wrap any .table in a .table-wrap div for
2025 this to work; most pages already do. */
2026 .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
2027 .table { min-width: 560px; }
2028
2029 /* Tab strips (Settings, Admin, etc.) -- base style uses
2030 `width: fit-content` + `white-space: nowrap`, which overflows the
2031 viewport when there are 4+ tabs on a phone. Let the strip take the
2032 full width and scroll its contents horizontally so every tab stays
2033 reachable without the page itself scrolling sideways. */
2034 .tabs {
2035 width: 100%;
2036 max-width: 100%;
2037 overflow-x: auto;
2038 -webkit-overflow-scrolling: touch;
2039 scrollbar-width: thin;
2040 }
2041
2042 /* Topbar tools row -- chat-pill, msg-pill, help-btn. Tighter padding
2043 at narrow widths so all three fit alongside the brand + title, but
2044 the text labels ("Chat", "Messages", "Help") stay visible at every
2045 viewport size per product preference -- the buttons never collapse
2046 to bare dots/icons. */
2047 .topbar-tools { gap: 6px; }
2048 .chat-pill,
2049 .msg-pill { padding: 0 10px; height: 32px; gap: 6px; }
2050 .help-btn { padding: 0 10px; height: 32px; gap: 6px; }
2051}
2052
2053/* Small phone -- Samsung phone external panel, iPhone SE in portrait, etc. */
2054@media (max-width: 700px) {
2055 .page-head .page-title { font-size: 22px; }
2056 .page-subtitle { font-size: 13px; }
2057 .topbar { padding-right: 8px; }
2058 .pill { padding: 6px 10px; font-size: 12px; }
2059 .module { padding: 12px; border-radius: 10px; }
2060 .pr-form { padding: 14px 12px; }
2061 .pr-actions .btn { flex: 1; } /* full-width submit on phones */
2062}
2063
2064
2065/* =====================================================================
2066 ── BRAND WARMTH OVERLAYS (deep-purple) ──
2067 Layered radial overlays + brand-tinted borders/shadows that make the
2068 sunset/glow bleed through every piece of chrome. Ported from the
2069 ABForge sunset recipe, recoloured to AffSoft's deep purple. The
2070 overlays sit on TOP of the existing dark fills -- the colour and
2071 layout cascade above is untouched; this section only ADDS warmth.
2072===================================================================== */
2073
2074/* ---- Sidebar (most visible brand surface) ---------------------- */
2075.sidebar {
2076 background:
2077 radial-gradient(ellipse 150% 50% at 0% 0%, rgba(124,58,237,0.26), transparent 65%),
2078 radial-gradient(ellipse 130% 45% at 100% 30%, rgba(167,139,250,0.12), transparent 60%),
2079 radial-gradient(ellipse 120% 45% at 20% 100%, rgba(124,58,237,0.16), transparent 65%),
2080 linear-gradient(180deg, #1a1028 0%, #150c22 55%, #0d0719 100%);
2081 border-right: 1px solid rgba(124,58,237,0.28);
2082 box-shadow: 1px 0 26px rgba(124,58,237,0.10);
2083}
2084.sidebar-section-label {
2085 color: #6d28d9;
2086 opacity: 0.78;
2087}
2088.sidebar-link.active {
2089 background: linear-gradient(90deg,
2090 rgba(91,33,182,0.28),
2091 rgba(76,29,149,0.10) 70%,
2092 transparent);
2093 box-shadow: inset 0 0 0 1px rgba(91,33,182,0.30);
2094}
2095
2096/* ---- Topbar ---------------------------------------------------- */
2097.topbar {
2098 background:
2099 linear-gradient(90deg,
2100 rgba(124,58,237,0.12) 0%,
2101 rgba(167,139,250,0.05) 40%,
2102 rgba(14,10,29,0.72) 100%),
2103 rgba(14,10,29,0.72);
2104 border-bottom: 1px solid rgba(124,58,237,0.24);
2105 box-shadow: 0 8px 24px rgba(124,58,237,0.05);
2106}
2107
2108/* ---- Cards (generic) ------------------------------------------- */
2109.card {
2110 background:
2111 linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 40%),
2112 var(--col-surface-1);
2113 border: 1px solid rgba(124,58,237,0.16);
2114 box-shadow: 0 1px 0 rgba(167,139,250,0.06) inset;
2115}
2116.card:hover { border-color: rgba(124,58,237,0.28); }
2117
2118.card-elevated {
2119 background:
2120 linear-gradient(180deg, rgba(124,58,237,0.07) 0%, transparent 45%),
2121 var(--col-surface-1);
2122}
2123
2124/* ---- KPI cards (hero numbers, brighter) ------------------------ */
2125.kpi,
2126.stat-card,
2127.kpi-card {
2128 position: relative;
2129 background:
2130 linear-gradient(140deg, rgba(124,58,237,0.12) 0%, transparent 55%),
2131 var(--col-surface-1) !important;
2132 border: 1px solid rgba(124,58,237,0.24) !important;
2133 box-shadow: 0 8px 24px rgba(124,58,237,0.07);
2134 transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
2135}
2136.kpi:hover,
2137.stat-card:hover,
2138.kpi-card:hover {
2139 border-color: rgba(124,58,237,0.48) !important;
2140 box-shadow: 0 10px 30px rgba(124,58,237,0.14);
2141 transform: translateY(-1px);
2142}
2143
2144/* ---- Tables ---------------------------------------------------- */
2145.table th {
2146 color: var(--col-violet-bright);
2147 border-bottom: 1px solid rgba(124,58,237,0.22);
2148}
2149.table tr:hover td { background: rgba(124,58,237,0.05); }
2150
2151/* ---- Forms ----------------------------------------------------- */
2152.form-label,
2153label.form-label,
2154.field-label {
2155 color: var(--col-violet-bright);
2156}
2157.form-input:focus,
2158.form-select:focus,
2159.form-textarea:focus,
2160input[type="text"]:focus,
2161input[type="email"]:focus,
2162input[type="password"]:focus,
2163input[type="number"]:focus,
2164input[type="url"]:focus,
2165input[type="search"]:focus,
2166textarea:focus,
2167select:focus {
2168 border-color: var(--col-accent) !important;
2169 box-shadow: 0 0 0 3px rgba(124,58,237,0.18) !important;
2170 outline: none;
2171}
2172
2173/* ---- Page header h1 -- gradient text -------------------------- */
2174.page-header h1,
2175.page-head .page-title,
2176h1.page-title {
2177 background: linear-gradient(135deg, #fff 0%, #fff 38%, var(--col-violet-bright) 100%);
2178 -webkit-background-clip: text;
2179 background-clip: text;
2180 -webkit-text-fill-color: transparent;
2181}
2182
2183/* ---- Auth box (login / signup) -------------------------------- */
2184.auth-box,
2185.auth-card,
2186.signin-box {
2187 background:
2188 linear-gradient(160deg, rgba(124,58,237,0.10) 0%, transparent 45%),
2189 var(--col-surface-1);
2190 border: 1px solid rgba(124,58,237,0.24);
2191 box-shadow: 0 24px 60px rgba(124,58,237,0.12);
2192}
2193
2194/* ---- Hero glows -- swap remaining cyan to soft violet --------- */
2195.hero-glow-3 {
2196 background: radial-gradient(circle, rgba(167,139,250,0.16), transparent 65%);
2197}
2198
2199/* ---- Snippet / code blocks ------------------------------------ */
2200.snippet,
2201pre.snippet,
2202code.snippet {
2203 background:
2204 linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 30%),
2205 #0a0612;
2206 border: 1px solid rgba(124,58,237,0.22);
2207 color: #ddd6fe;
2208 box-shadow: inset 0 0 0 1px rgba(167,139,250,0.04), 0 0 20px rgba(124,58,237,0.06);
2209}
2210
2211
2212/* =====================================================================
2213 ── Named profile chip (TaskForge-style topbar avatar + name) ──
2214 Replaces the bare 38px avatar with a wider chip that shows the
2215 user's display name + tier subtitle next to the avatar circle and
2216 opens the profile dropdown on click.
2217===================================================================== */
2218.profile-chip {
2219 display: inline-flex;
2220 align-items: center;
2221 gap: 10px;
2222 height: 44px;
2223 padding: 4px 12px 4px 4px;
2224 border-radius: 12px;
2225 background: linear-gradient(135deg, rgba(124,58,237,0.16) 0%, rgba(124,58,237,0.10) 100%);
2226 border: 1px solid rgba(124,58,237,0.36);
2227 color: #fff;
2228 text-decoration: none;
2229 cursor: pointer;
2230 transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
2231 box-shadow: 0 0 12px rgba(124,58,237,0.10);
2232}
2233.profile-chip:hover {
2234 background: linear-gradient(135deg, rgba(124,58,237,0.26) 0%, rgba(124,58,237,0.18) 100%);
2235 border-color: rgba(124,58,237,0.58);
2236 box-shadow: 0 0 18px rgba(124,58,237,0.32);
2237 transform: translateY(-1px);
2238}
2239.profile-chip-avatar {
2240 width: 34px; height: 34px;
2241 border-radius: 50%;
2242 background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 50%, #5b21b6 100%);
2243 display: grid; place-items: center;
2244 font-weight: 800;
2245 font-size: 13px;
2246 color: #1a0d2e;
2247 box-shadow: 0 0 0 2px rgba(167,139,250,0.45), 0 0 12px rgba(124,58,237,0.55);
2248 flex-shrink: 0;
2249}
2250.profile-chip-meta {
2251 display: flex; flex-direction: column; line-height: 1.15;
2252 min-width: 0;
2253 text-align: left;
2254}
2255.profile-chip-name {
2256 font-size: 13px;
2257 font-weight: 700;
2258 color: #fff;
2259 white-space: nowrap;
2260 overflow: hidden;
2261 text-overflow: ellipsis;
2262 max-width: 180px;
2263}
2264.profile-chip-sub {
2265 font-size: 10.5px;
2266 color: var(--col-violet-bright);
2267 opacity: 0.85;
2268 white-space: nowrap;
2269 overflow: hidden;
2270 text-overflow: ellipsis;
2271 max-width: 180px;
2272 letter-spacing: 0.3px;
2273}
2274.profile-chip-chev {
2275 width: 14px; height: 14px;
2276 color: var(--col-violet-bright);
2277 opacity: 0.85;
2278 transition: transform 0.15s;
2279 flex-shrink: 0;
2280 margin-left: 2px;
2281}
2282.profile-menu:hover .profile-chip-chev,
2283.profile-menu.open .profile-chip-chev {
2284 transform: rotate(180deg);
2285}
2286
2287@media (max-width: 800px) {
2288 .profile-chip-meta { display: none; }
2289 .profile-chip { padding: 4px; height: 40px; }
2290}
2291
2292/* WIDTH-STANDARDIZATION: neutralize legacy inline max-width caps and extra horizontal padding on the page wrapper so all sites match PTMatrix. */
2293.app-content > div { max-width: none !important; }
2294.app-content > div:not(.card):not(.card-elevated):not(.module):not(.myc-shell):not(.mte-shell):not(.gov-shell):not([class*="-wrap"]):not([class*="-card"]):not(.afnl-hero):not(.fnl-hero):not([class*=hero]) { padding-left: 0 !important; padding-right: 0 !important; }
2295
2296
2297/* Chip range picker: Custom datetime-local inputs -- brand-themed to
2298 match the site (2026-07-09). Scoped to #customWrap so it only styles
2299 the chip-picker's Custom inputs, never other forms on the page. */
2300#customWrap input[type="datetime-local"] {
2301 background: var(--col-surface, #0f1a26);
2302 color: var(--col-text, #e5e7eb);
2303 border: 1px solid var(--col-border, rgba(255,255,255,.12));
2304 border-radius: 8px;
2305 padding: 5px 10px;
2306 font-size: 12px;
2307 font-family: inherit;
2308 color-scheme: dark;
2309 outline: none;
2310 transition: border-color .15s ease;
2311}
2312#customWrap input[type="datetime-local"]:hover,
2313#customWrap input[type="datetime-local"]:focus {
2314 border-color: var(--col-brand, var(--col-primary, var(--col-accent, #5aa9ff)));
2315}
2316#customWrap input[type="datetime-local"]::-webkit-calendar-picker-indicator {
2317 filter: invert(1) brightness(1.4);
2318 cursor: pointer;
2319 opacity: 0.75;
2320}