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

O Operator
Diff

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

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

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