/* ============================================================
Garage Manager — Global Stylesheet
============================================================
Structure:
1. Base typography & reset
2. Theme tokens
3. Layout shell
4. Surfaces
5. Buttons
6. Tags
7. Toast & confirm modal
8. Views & tabs
9. Search & inputs
10. Filter sheet
11. Car modal
12. Modal header & badges
13. Star selector
14. Stats tab
15. EVO selector
16. Garage cards
17. Compare view
18. Dashboard
19. Settings footer
20. Season calendar
21. Date picker
22. Welcome & auth
23. Floating action button & navigation modal
24. Scroll-to-top
25. Utilities & keyframes
============================================================ */
/* ============================================================
1. BASE TYPOGRAPHY & RESET
============================================================ */
/* Reduce global sizing by 20% on mobile screens */
@media (max-width: 768px) {
html {
font-size: 80%;
}
}
html,
body {
font-family: 'Kanit', sans-serif;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
h1, h2, h3, h4, h5, h6,
button, a, input, select, textarea,
.font-kanit, .font-black, .uppercase {
font-family: 'Kanit', sans-serif !important;
}
/* ============================================================
2. THEME TOKENS
============================================================ */
input,
select,
textarea {
border-radius: var(--radius-md);
}
:root {
--bg-primary: #15151E;
--bg-secondary: #1C1C28;
--bg-card: #1C1C28;
--text-primary: #f0f0f0;
--text-secondary: #9ca3af;
--border-color: rgba(254,218,0,.15);
--glass-bg: rgba(28,28,40,.95);
--shadow-color: rgba(0,0,0,.6);
--input-bg: #15151E;
--input-border: rgba(254,218,0,.3);
--placeholder: #6b7280;
--nav-height: 54px;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 1rem;
--accent: #FFEA00;
--accent-hover: #Fec607;
--ink: 255 255 255;
--body-strong: 209 213 219;
--body: 156 163 175;
--label: 107 114 128;
--mute: 75 85 99;
--ghost: 55 65 81;
--on-fill: 255 255 255;
--on-accent: 0 0 0;
--on-ink: 0 0 0;
--canvas: 21 21 30;
--surface: 28 28 40;
--inset: 10 10 15;
--input: 21 21 30;
--locked: 26 26 36;
--accent-fill: 254 218 0;
--accent-fill-hover: 254 198 7;
--accent-ink: 254 218 0;
--accent-ink-500: 254 198 7;
--accent-edge: 254 218 0;
--brand-fill: 104 52 182;
--brand-ink: 163 102 255;
--brand-accent: 163 102 255;
--brand-deep: 186 141 255;
--purple-ink: 192 132 252;
--teal-ink: 45 212 191;
--border-hairline: rgba(255,255,255,.05);
--border-hairline-strong: rgba(255,255,255,.10);
--border-ghost-20: rgba(255,255,255,.20);
--border-faint: rgba(104,52,182,.10);
--border-soft: rgba(104,52,182,.20);
--border-control: rgba(104,52,182,.30);
--border-strong-40: rgba(104,52,182,.40);
--border-strong-50: rgba(104,52,182,.50);
--border-accent: rgba(254,218,0,1);
--border-accent-soft-30: rgba(254,218,0,.30);
--border-accent-soft-40: rgba(254,218,0,.40);
--border-accent-soft-50: rgba(254,218,0,.50);
--border-danger-soft: rgba(220,38,38,.40);
--veil-5: rgba(255,255,255,.05);
--veil-10: rgba(255,255,255,.10);
--scrim-40: rgba(0,0,0,.40);
--scrim-50: rgba(0,0,0,.50);
--scrim-60: rgba(0,0,0,.60);
--scrim-70: rgba(0,0,0,.70);
--scrim-80: rgba(0,0,0,.80);
--brand-veil-5: rgba(104,52,182,.05);
--brand-veil-10: rgba(104,52,182,.10);
--brand-veil-20: rgba(104,52,182,.20);
--brand-veil-30: rgba(104,52,182,.30);
--brand-veil-40: rgba(104,52,182,.40);
--brand-veil-50: rgba(104,52,182,.50);
--accent-veil-10: rgba(254,218,0,.10);
--accent-veil-20: rgba(254,218,0,.20);
--accent-veil-30: rgba(254,218,0,.30);
--glass-3d-bg: rgba(28,28,40,.70);
--glass-3d-border-light: rgba(255,255,255,.15);
--glass-3d-border-dark: rgba(255,255,255,.08);
--success-ink-400: 77 255 125;
--success-ink-500: 0 255 68;
--success-fill-400: 77 255 125;
--success-fill-500: 0 255 68;
--success-fill-600: 0 204 54;
--danger-ink-200: 254 202 202;
--danger-ink-400: 248 113 113;
--danger-ink-500: 239 68 68;
--danger-fill-500: 239 68 68;
--danger-fill-600: 220 38 38;
--warning-ink-400: 251 191 36;
--warning-ink-500: 245 158 11;
--warning-fill-500: 245 158 11;
--info-ink-vivid: 0 170 255;
--info-ink-400: 96 165 250;
--info-ink-500: 59 130 246;
--info-fill-vivid: 0 170 255;
--info-fill-500: 59 130 246;
--oc-ink: 255 107 53;
--oc-fill: 255 107 53;
--evo-ink: 145 94 220;
--evo-fill: 145 94 220;
--stat-fill: rgba(255, 255, 255, 0.75);
--shadow-card: none;
--btn-normal-hover: #e5e7eb;
--btn-success-bg: #Bdfe10;
--btn-attention-shadow: none;
--feat-tag-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
--feat-tag-filter: none;
--feat-max-outline: 0 solid transparent;
--evo-bar-fill: #A366FF;
--csb-down-fill: #f87171;
--csb-avg-marker: rgba(255,255,255,.7);
--max-cut-shadow: none;
--watermark-color: rgba(0, 0, 0, 0.04);
--evo-triangle-gradient: linear-gradient(135deg,transparent 0%,transparent 52%,#915EDC 52%,#915EDC 56%,rgba(255,255,255,0.9) 56%,rgba(255,255,255,0.1) 57.5%,#252630 57.5%,#252630 100%);
--star-empty-color: rgba(0, 0, 0, 0.5);
--cal-today-border: rgba(255, 234, 0, 0.35);
--cal-selected-bg: #FFEA00;
--cal-selected-border: #FFEA00;
--cal-selected-color: #000;
--glass-blur: blur(16px);
--glass-shadow: 0 8px 24px rgba(0,0,0,.5);
--status-strip: #15151E;
--scrim-20: rgba(0,0,0,.20);
--scrim-30: rgba(0,0,0,.30);
--danger-ink-hex-200: 252 165 165;
--accent-500-tint-5: rgba(254,198,7,.05);
--bg-hex-bdfe10: 189 254 16;
--border-hex-bdfe10: 189 254 16;
--bg-neutral-500-20: rgba(107,114,128,.20);
--border-hex-a366ff-50: rgba(163,102,255,.50);
--bg-danger-500-10: rgba(239,68,68,.10);
--border-danger-500-40: rgba(239,68,68,.40);
--border-hex-4dff7d-50: rgba(77,255,125,.50);
--border-danger-500-30: rgba(239,68,68,.30);
--text-hex-7ed5f3: 126 213 243;
--bg-hex-4dff7d-20: rgba(77,255,125,.20);
--border-success-500-40: rgba(0,255,68,.40);
--border-hex-4dff7d-30: rgba(77,255,125,.30);
--border-danger-400: 248 113 113;
--text-hex-d1b3ff: 209 179 255;
--bg-hex-8b5cf6-60: rgba(139,92,246,.60);
--border-hex-4dff7d-40: rgba(77,255,125,.40);
--form-accent-danger-500: 239 68 68;
--text-hex-10b981: 16 185 129;
--text-hex-fde047: 253 224 71;
--bg-success-500-10: rgba(0,255,68,.10);
--border-danger-500-50: rgba(239,68,68,.50);
--border-danger-500: 239 68 68;
--bg-warning-500-10: rgba(245,158,11,.10);
--text-hex-c4a6ff: 196 166 255;
--bg-danger-400-50: rgba(248,113,113,.50);
--border-danger-500-20: rgba(239,68,68,.20);
--text-hex-2563eb: 37 99 235;
--bg-danger-800-50: rgba(153,27,27,.50);
--bg-danger-600-90: rgba(220,38,38,.90);
--text-hex-8b5cf6: 139 92 246;
--border-hex-f59e0b-50: rgba(245,158,11,.50);
--bg-info-400: 96 165 250;
--bg-success-500-20: rgba(0,255,68,.20);
--bg-neutral-700: 55 65 81;
--bg-hex-1c1c28-80: rgba(28,28,40,.80);
--bg-hex-f59e0b-20: rgba(245,158,11,.20);
--border-hex-a366ff-40: rgba(163,102,255,.40);
--bg-danger-500-90: rgba(239,68,68,.90);
--border-warning-500-40: rgba(245,158,11,.40);
--bg-danger-500-20: rgba(239,68,68,.20);
--bg-hex-1c1c28-70: rgba(28,28,40,.70);
--text-purple-500: 168 85 247;
--bg-hex-1c1c28-40: rgba(28,28,40,.40);
--border-hex-ef4444-50: rgba(239,68,68,.50);
--border-hex-cca300: 204 163 0;
--bg-success-500-5: rgba(0,255,68,.5);
--border-hex-ffea00-50: rgba(255,234,0,.50);
--bg-purple-500: 168 85 247;
--bg-hex-ef4444-20: rgba(239,68,68,.20);
--border-success-500-50: rgba(0,255,68,.50);
--bg-warning-500-5: rgba(245,158,11,.5);
--bg-neutral-500-50: rgba(107,114,128,.50);
--border-warning-500-60: rgba(245,158,11,.60);
--border-warning-500-50: rgba(245,158,11,.50);
--bg-danger-500-5: rgba(239,68,68,.5);
--border-accent-500: rgba(254,198,7,1);
--border-accent-500-40: rgba(254,198,7,.40);
--border-accent-400-20: rgba(254,218,0,.20);
--accent-500-tint-20: rgba(254,198,7,.20);
--accent-500-tint-10: rgba(254,198,7,.10);
--yellow-ink-400: 250 204 21;
}
/* ============================================================
LIGHT THEME BLOCKS
============================================================ */
html.light {
--ink: 27 21 38;
--body-strong: 56 50 74;
--body: 79 72 95;
--label: 106 95 133;
--mute: 142 135 162;
--ghost: 180 175 196;
--on-fill: 255 255 255;
--on-accent: 27 21 38;
--on-ink: 255 255 255;
--canvas: 236 233 243;
--surface: 255 255 255;
--inset: 226 221 238;
--input: 246 244 251;
--locked: 230 226 238;
--accent-fill: 254 218 0;
--accent-fill-hover: 242 197 0;
--accent-ink: 122 92 0;
--accent-ink-500: 122 92 0;
--accent-edge: 201 162 0;
--brand-fill: 104 52 182;
--brand-ink: 123 63 214;
--brand-accent: 163 102 255;
--brand-deep: 104 52 182;
--purple-ink: 123 63 214;
--teal-ink: 15 118 110;
--border-hairline: rgba(27,21,38,.08);
--border-hairline-strong: rgba(27,21,38,.14);
--border-ghost-20: rgba(27,21,38,.22);
--border-faint: rgba(104,52,182,.07);
--border-soft: rgba(104,52,182,.14);
--border-control: rgba(104,52,182,.34);
--border-strong-40: rgba(104,52,182,.44);
--border-strong-50: rgba(104,52,182,.58);
--border-accent: rgba(201,162,0,1);
--border-accent-soft-30: rgba(201,162,0,.45);
--border-accent-soft-40: rgba(201,162,0,.55);
--border-accent-soft-50: rgba(201,162,0,.65);
--border-danger-soft: rgba(198,34,34,.40);
--veil-5: rgba(27,21,38,.04);
--veil-10: rgba(27,21,38,.06);
--scrim-40: rgba(27,21,38,.30);
--scrim-50: rgba(27,21,38,.38);
--scrim-60: rgba(27,21,38,.45);
--scrim-70: rgba(27,21,38,.50);
--scrim-80: rgba(27,21,38,.58);
--brand-veil-5: rgba(104,52,182,.04);
--brand-veil-10: rgba(104,52,182,.07);
--brand-veil-20: rgba(104,52,182,.12);
--brand-veil-30: rgba(104,52,182,.16);
--brand-veil-40: rgba(104,52,182,.22);
--brand-veil-50: rgba(104,52,182,.28);
--accent-veil-10: rgba(254,218,0,.18);
--accent-veil-20: rgba(254,218,0,.26);
--accent-veil-30: rgba(254,218,0,.32);
--glass-3d-bg: rgba(255,255,255,.65);
--glass-3d-border-light: rgba(255,255,255,.90);
--glass-3d-border-dark: rgba(104,52,182,.18);
--success-ink-400: 8 122 49;
--success-ink-500: 8 122 49;
--success-fill-400: 23 182 85;
--success-fill-500: 23 182 85;
--success-fill-600: 23 182 85;
--danger-ink-200: 198 34 34;
--danger-ink-400: 198 34 34;
--danger-ink-500: 198 34 34;
--danger-fill-500: 220 38 38;
--danger-fill-600: 220 38 38;
--warning-ink-400: 154 84 0;
--warning-ink-500: 154 84 0;
--warning-fill-500: 245 158 11;
--info-ink-vivid: 11 106 174;
--info-ink-400: 11 106 174;
--info-ink-500: 11 106 174;
--info-fill-vivid: 0 170 255;
--info-fill-500: 59 130 246;
--oc-ink: 201 63 18;
--oc-fill: 255 107 53;
--evo-ink: 122 69 199;
--evo-fill: 145 94 220;
--stat-fill: #3B3150;
--shadow-card: 0 1px 2px rgba(46,0,123,.08), 0 4px 14px rgba(46,0,123,.07);
--btn-normal-hover: #2B2140;
--btn-success-bg: #17B655;
--btn-attention-shadow: 0 3px 0 #C9A200;
--feat-tag-text-shadow: 0 1px 2px rgba(0,0,0,.35);
--feat-tag-filter: drop-shadow(0 1px 2px rgba(27,21,38,.28));
--feat-max-outline: 1px solid rgba(122,92,0,.5);
--evo-bar-fill: #8B4DF2;
--csb-down-fill: #EF4444;
--csb-avg-marker: #1B1526;
--max-cut-shadow: inset 0 0 0 1px rgba(122,92,0,.55), 0 6px 16px rgba(122,92,0,.28);
--watermark-color: rgba(0,0,0,.07);
--evo-triangle-gradient: linear-gradient(135deg,transparent 0%,transparent 52%,#A97BE6 52%,#A97BE6 56%,rgba(255,255,255,0.9) 56%,rgba(255,255,255,0.1) 57.5%,#6834b6 57.5%,#6834b6 100%);
--star-empty-color: rgba(27,21,38,.15);
--cal-today-border: #C9A200;
--cal-selected-bg: #feda00;
--cal-selected-border: #C9A200;
--cal-selected-color: rgb(27 21 38);
--glass-blur: blur(16px) saturate(1.4);
--glass-shadow: 0 8px 24px rgba(46,0,123,.08), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(104,52,182,.14);
--status-strip: #15151E;
--bg-primary: #ECE9F3;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--text-primary: #1B1526;
--text-secondary: #4F485F;
--border-color: rgba(27,21,38,.12);
--glass-bg: rgba(255,255,255,.82);
--shadow-color: rgba(46,0,123,.16);
--input-bg: #F6F4FB;
--input-border: rgba(104,52,182,.36);
--placeholder: #8A839E;
--accent: #feda00;
--accent-hover: #F2C500;
--scrim-20: rgba(27,21,38,.18);
--scrim-30: rgba(27,21,38,.22);
--danger-ink-hex-200: 198 34 34;
--accent-500-tint-5: rgba(254,218,0,.12);
--bg-hex-bdfe10: 23 182 85;
--border-hex-bdfe10: rgba(107,143,0,1);
--bg-neutral-500-20: rgba(106,95,133,.12);
--border-hex-a366ff-50: rgba(123,63,214,.58);
--bg-danger-500-10: rgba(220,38,38,.09);
--border-danger-500-40: rgba(198,34,34,.40);
--border-hex-4dff7d-50: rgba(8,122,49,.45);
--border-danger-500-30: rgba(198,34,34,.30);
--text-hex-7ed5f3: 11 106 174;
--bg-hex-4dff7d-20: rgba(23,182,85,.15);
--border-success-500-40: rgba(8,122,49,.40);
--border-hex-4dff7d-30: rgba(8,122,49,.30);
--border-danger-400: rgba(198,34,34,1);
--text-hex-d1b3ff: 104 52 182;
--bg-hex-8b5cf6-60: rgba(139,92,246,.60);
--border-hex-4dff7d-40: rgba(8,122,49,.40);
--form-accent-danger-500: 220 38 38;
--text-hex-10b981: 8 122 49;
--text-hex-fde047: 122 92 0;
--bg-success-500-10: rgba(23,182,85,.10);
--border-danger-500-50: rgba(198,34,34,.50);
--border-danger-500: rgba(198,34,34,1);
--bg-warning-500-10: rgba(245,158,11,.12);
--text-hex-c4a6ff: 104 52 182;
--bg-danger-400-50: rgba(220,38,38,.30);
--border-danger-500-20: rgba(198,34,34,.22);
--text-hex-2563eb: 37 99 235;
--bg-danger-800-50: rgba(220,38,38,.14);
--bg-danger-600-90: rgba(220,38,38,.90);
--text-hex-8b5cf6: 123 63 214;
--border-hex-f59e0b-50: rgba(154,84,0,.50);
--bg-info-400: 96 165 250;
--bg-success-500-20: rgba(23,182,85,.15);
--bg-neutral-700: 214 209 227;
--bg-hex-1c1c28-80: rgba(255,255,255,.80);
--bg-hex-f59e0b-20: rgba(245,158,11,.18);
--border-hex-a366ff-40: rgba(123,63,214,.44);
--bg-danger-500-90: rgba(220,38,38,.90);
--border-warning-500-40: rgba(154,84,0,.42);
--bg-danger-500-20: rgba(220,38,38,.14);
--bg-hex-1c1c28-70: rgba(255,255,255,.70);
--text-purple-500: 123 63 214;
--bg-hex-1c1c28-40: rgba(255,255,255,.40);
--border-hex-ef4444-50: rgba(198,34,34,.50);
--border-hex-cca300: rgba(204,163,0,1);
--bg-success-500-5: rgba(23,182,85,.07);
--border-hex-ffea00-50: rgba(201,162,0,.65);
--bg-purple-500: 168 85 247;
--bg-hex-ef4444-20: rgba(220,38,38,.14);
--border-success-500-50: rgba(8,122,49,.45);
--bg-warning-500-5: rgba(245,158,11,.08);
--bg-neutral-500-50: rgba(106,95,133,.30);
--border-warning-500-60: rgba(154,84,0,.58);
--border-warning-500-50: rgba(154,84,0,.50);
--bg-danger-500-5: rgba(220,38,38,.06);
--border-accent-500: rgba(201,162,0,1);
--border-accent-500-40: rgba(201,162,0,.55);
--border-accent-400-20: rgba(201,162,0,.35);
--accent-500-tint-20: rgba(254,218,0,.26);
--accent-500-tint-10: rgba(254,218,0,.18);
--yellow-ink-400: 122 92 0;
}
html.light [data-theme="dark"] {
color-scheme: dark;
color: rgb(var(--ink));
--ink: 255 255 255;
--body-strong: 209 213 219;
--body: 156 163 175;
--label: 107 114 128;
--mute: 75 85 99;
--ghost: 55 65 81;
--on-fill: 255 255 255;
--on-accent: 0 0 0;
--on-ink: 0 0 0;
--canvas: 21 21 30;
--surface: 28 28 40;
--inset: 10 10 15;
--input: 21 21 30;
--locked: 26 26 36;
--accent-fill: 254 218 0;
--accent-fill-hover: 254 198 7;
--accent-ink: 254 218 0;
--accent-ink-500: 254 198 7;
--accent-edge: 254 218 0;
--brand-fill: 104 52 182;
--brand-ink: 163 102 255;
--brand-accent: 163 102 255;
--brand-deep: 186 141 255;
--purple-ink: 192 132 252;
--teal-ink: 45 212 191;
--border-hairline: rgba(255,255,255,.05);
--border-hairline-strong: rgba(255,255,255,.10);
--border-ghost-20: rgba(255,255,255,.20);
--border-faint: rgba(104,52,182,.10);
--border-soft: rgba(104,52,182,.20);
--border-control: rgba(104,52,182,.30);
--border-strong-40: rgba(104,52,182,.40);
--border-strong-50: rgba(104,52,182,.50);
--border-accent: rgba(254,218,0,1);
--border-accent-soft-30: rgba(254,218,0,.30);
--border-accent-soft-40: rgba(254,218,0,.40);
--border-accent-soft-50: rgba(254,218,0,.50);
--border-danger-soft: rgba(220,38,38,.40);
--veil-5: rgba(255,255,255,.05);
--veil-10: rgba(255,255,255,.10);
--scrim-40: rgba(0,0,0,.40);
--scrim-50: rgba(0,0,0,.50);
--scrim-60: rgba(0,0,0,.60);
--scrim-70: rgba(0,0,0,.70);
--scrim-80: rgba(0,0,0,.80);
--brand-veil-5: rgba(104,52,182,.05);
--brand-veil-10: rgba(104,52,182,.10);
--brand-veil-20: rgba(104,52,182,.20);
--brand-veil-30: rgba(104,52,182,.30);
--brand-veil-40: rgba(104,52,182,.40);
--brand-veil-50: rgba(104,52,182,.50);
--accent-veil-10: rgba(254,218,0,.10);
--accent-veil-20: rgba(254,218,0,.20);
--accent-veil-30: rgba(254,218,0,.30);
--glass-3d-bg: rgba(28,28,40,.70);
--glass-3d-border-light: rgba(255,255,255,.15);
--glass-3d-border-dark: rgba(255,255,255,.08);
--success-ink-400: 77 255 125;
--success-ink-500: 0 255 68;
--success-fill-400: 77 255 125;
--success-fill-500: 0 255 68;
--success-fill-600: 0 204 54;
--danger-ink-200: 254 202 202;
--danger-ink-400: 248 113 113;
--danger-ink-500: 239 68 68;
--danger-fill-500: 239 68 68;
--danger-fill-600: 220 38 38;
--warning-ink-400: 251 191 36;
--warning-ink-500: 245 158 11;
--warning-fill-500: 245 158 11;
--info-ink-vivid: 0 170 255;
--info-ink-400: 96 165 250;
--info-ink-500: 59 130 246;
--info-fill-vivid: 0 170 255;
--info-fill-500: 59 130 246;
--oc-ink: 255 107 53;
--oc-fill: 255 107 53;
--evo-ink: 145 94 220;
--evo-fill: 145 94 220;
--stat-fill: rgba(255, 255, 255, 0.75);
--shadow-card: none;
--btn-normal-hover: #e5e7eb;
--btn-success-bg: #Bdfe10;
--btn-attention-shadow: none;
--feat-tag-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
--feat-tag-filter: none;
--feat-max-outline: 0 solid transparent;
--evo-bar-fill: #A366FF;
--csb-down-fill: #f87171;
--csb-avg-marker: rgba(255,255,255,.7);
--max-cut-shadow: none;
--watermark-color: rgba(0, 0, 0, 0.04);
--evo-triangle-gradient: linear-gradient(135deg,transparent 0%,transparent 52%,#915EDC 52%,#915EDC 56%,rgba(255,255,255,0.9) 56%,rgba(255,255,255,0.1) 57.5%,#252630 57.5%,#252630 100%);
--star-empty-color: rgba(0, 0, 0, 0.5);
--cal-today-border: rgba(255, 234, 0, 0.35);
--cal-selected-bg: #FFEA00;
--cal-selected-border: #FFEA00;
--cal-selected-color: #000;
--glass-blur: blur(16px);
--glass-shadow: 0 8px 24px rgba(0,0,0,.5);
--status-strip: #15151E;
--bg-primary: #15151E;
--bg-secondary: #1C1C28;
--bg-card: #1C1C28;
--text-primary: #f0f0f0;
--text-secondary: #9ca3af;
--border-color: rgba(254,218,0,.15);
--glass-bg: rgba(28,28,40,.95);
--shadow-color: rgba(0,0,0,.6);
--input-bg: #15151E;
--input-border: rgba(254,218,0,.3);
--placeholder: #6b7280;
--accent: #FFEA00;
--accent-hover: #Fec607;
--scrim-20: rgba(0,0,0,.20);
--scrim-30: rgba(0,0,0,.30);
--danger-ink-hex-200: 252 165 165;
--accent-500-tint-5: rgba(254,198,7,.05);
--bg-hex-bdfe10: 189 254 16;
--border-hex-bdfe10: 189 254 16;
--bg-neutral-500-20: rgba(107,114,128,.20);
--border-hex-a366ff-50: rgba(163,102,255,.50);
--bg-danger-500-10: rgba(239,68,68,.10);
--border-danger-500-40: rgba(239,68,68,.40);
--border-hex-4dff7d-50: rgba(77,255,125,.50);
--border-danger-500-30: rgba(239,68,68,.30);
--text-hex-7ed5f3: 126 213 243;
--bg-hex-4dff7d-20: rgba(77,255,125,.20);
--border-success-500-40: rgba(0,255,68,.40);
--border-hex-4dff7d-30: rgba(77,255,125,.30);
--border-danger-400: 248 113 113;
--text-hex-d1b3ff: 209 179 255;
--bg-hex-8b5cf6-60: rgba(139,92,246,.60);
--border-hex-4dff7d-40: rgba(77,255,125,.40);
--form-accent-danger-500: 239 68 68;
--text-hex-10b981: 16 185 129;
--text-hex-fde047: 253 224 71;
--bg-success-500-10: rgba(0,255,68,.10);
--border-danger-500-50: rgba(239,68,68,.50);
--border-danger-500: 239 68 68;
--bg-warning-500-10: rgba(245,158,11,.10);
--text-hex-c4a6ff: 196 166 255;
--bg-danger-400-50: rgba(248,113,113,.50);
--border-danger-500-20: rgba(239,68,68,.20);
--text-hex-2563eb: 37 99 235;
--bg-danger-800-50: rgba(153,27,27,.50);
--bg-danger-600-90: rgba(220,38,38,.90);
--text-hex-8b5cf6: 139 92 246;
--border-hex-f59e0b-50: rgba(245,158,11,.50);
--bg-info-400: 96 165 250;
--bg-success-500-20: rgba(0,255,68,.20);
--bg-neutral-700: 55 65 81;
--bg-hex-1c1c28-80: rgba(28,28,40,.80);
--bg-hex-f59e0b-20: rgba(245,158,11,.20);
--border-hex-a366ff-40: rgba(163,102,255,.40);
--bg-danger-500-90: rgba(239,68,68,.90);
--border-warning-500-40: rgba(245,158,11,.40);
--bg-danger-500-20: rgba(239,68,68,.20);
--bg-hex-1c1c28-70: rgba(28,28,40,.70);
--text-purple-500: 168 85 247;
--bg-hex-1c1c28-40: rgba(28,28,40,.40);
--border-hex-ef4444-50: rgba(239,68,68,.50);
--border-hex-cca300: 204 163 0;
--bg-success-500-5: rgba(0,255,68,.5);
--border-hex-ffea00-50: rgba(255,234,0,.50);
--bg-purple-500: 168 85 247;
--bg-hex-ef4444-20: rgba(239,68,68,.20);
--border-success-500-50: rgba(0,255,68,.50);
--bg-warning-500-5: rgba(245,158,11,.5);
--bg-neutral-500-50: rgba(107,114,128,.50);
--border-warning-500-60: rgba(245,158,11,.60);
--border-warning-500-50: rgba(245,158,11,.50);
--bg-danger-500-5: rgba(239,68,68,.5);
--border-accent-500: rgba(254,198,7,1);
--border-accent-500-40: rgba(254,198,7,.40);
--border-accent-400-20: rgba(254,218,0,.20);
--accent-500-tint-20: rgba(254,198,7,.20);
--accent-500-tint-10: rgba(254,198,7,.10);
--yellow-ink-400: 250 204 21;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
}
/* ============================================================
3. LAYOUT SHELL
============================================================ */
#app-root {
height: 100dvh;
overflow: hidden;
background: radial-gradient(circle at top right, #2a1148 0%, #15151E 50%, #0a0a0f 100%);
background-attachment: fixed;
}
#main-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
overscroll-behavior-y: contain;
padding-bottom: 100px;
-ms-overflow-style: none;
scrollbar-width: none;
}
#main-scroll::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
/* ============================================================
4. SURFACES
============================================================ */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.car-card {
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
/* ============================================================
5. BUTTONS
============================================================ */
.btn-normal,
.btn-attention,
.btn-danger,
.btn-success {
border-radius: var(--radius-md);
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.05em;
text-transform: uppercase;
font-style: italic;
cursor: pointer;
border: none;
transition: transform 0.15s, background 0.15s, color 0.15s;
}
/* ============================================================
Stark White Default Button
============================================================ */
.btn-normal {
background: #ffffff !important;
color: #000000 !important;
border: 1px solid #ffffff !important;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-normal:hover {
background: #e5e7eb !important; /* Crisp light gray on hover */
border-color: #e5e7eb !important;
color: #000000 !important;
}
/* Force all SVGs (icons) inside normal buttons to be black */
.btn-normal svg {
color: #000000 !important;
}
/* ============================================================
Filter Button Protections
(Prevents white-on-white text for the small filter pills)
============================================================ */
#global-class-filters .btn-normal,
#leaderboard-class-filters .btn-normal,
#sheet-sort-options .btn-normal {
background: transparent !important;
color: #9ca3af !important; /* Default gray text */
border: 1px solid transparent !important;
}
#global-class-filters .btn-normal:hover,
#leaderboard-class-filters .btn-normal:hover,
#sheet-sort-options .btn-normal:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
/* Keep the active filter pills yellow */
#global-class-filters .btn-normal.active,
#leaderboard-class-filters .btn-normal.active,
#sheet-sort-options .btn-normal.border-accent-400 {
background: rgba(254, 218, 0, 0.15) !important;
color: #feda00 !important;
border: 1px solid #feda00 !important;
}
.btn-attention {
background: var(--accent);
color: #000;
}
.btn-attention:hover {
background: var(--accent-hover);
}
.btn-danger {
background: #dc2626;
color: #fff;
}
.btn-success {
background: #Bdfe10;
color: #000;
}
.btn-normal:active,
.btn-attention:active,
.btn-danger:active,
.btn-success:active {
transform: scale(0.95);
}
/* Generic accordion — used by the register and settings
security-question dropdowns. */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.open {
max-height: 300px;
}
/* ============================================================
6. TAGS
============================================================
Unified tag system. Image-based tags (KEY, EVO, OC) are
rendered as ![]()
elements and need no CSS. Text tags
(ELITE, PNB, MAX) share the .feat-tag base.
============================================================ */
.feat-tag {
display: inline-block;
padding: 3px 6px;
font-size: 8px;
text-transform: uppercase;
font-style: italic;
letter-spacing: 0.15em;
border-radius: var(--radius-sm);
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
line-height: 1;
}
.feat-tag.feat-elite {
background: linear-gradient(135deg, #8b5cf6, #5A12C5);
box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}
.feat-tag.feat-pnb {
background: linear-gradient(135deg, #00aaff, #0066cc);
box-shadow: 0 2px 4px rgba(0, 170, 255, 0.3);
}
.feat-tag.feat-max {
background: linear-gradient(135deg, #FFEA00, #CCBA00);
color: #000;
text-shadow: none;
box-shadow: 0 2px 4px rgba(255, 234, 0, 0.3);
}
.feat-tag.feat-key {
background: linear-gradient(135deg, #dc2626, #991b1b);
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}
.feat-tag.feat-delisted {
background: linear-gradient(135deg, #dc2626, #7f1d1d);
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4);
border: 1px solid rgba(255, 100, 100, 0.3);
}
/* ============================================================
7. TOAST & CONFIRM MODAL
============================================================ */
#toast-container {
transition: opacity 0.3s ease, transform 0.3s ease;
}
#toast-container.hidden {
opacity: 0;
transform: translateY(-1.5rem);
pointer-events: none;
}
#toast-msg {
border-radius: var(--radius-lg);
}
#custom-confirm-overlay .glass {
border-radius: var(--radius-lg);
}
/* ============================================================
8. VIEWS & TABS
============================================================ */
.view-container {
display: none;
animation: fadeUp 0.3s ease;
padding-bottom: 16px;
}
.view-container.active {
display: block;
}
.tab-btn {
border-bottom: 2px solid transparent;
color: #6b7280;
font-weight: 600;
transition: color 0.2s, border-color 0.2s;
font-style: italic;
}
.tab-btn.active {
border-bottom-color: var(--accent);
color: var(--accent);
font-weight: 700;
}
.admin-tab {
color: #6b7280;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.admin-tab:hover {
color: #fff;
}
.admin-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 900;
}
/* ============================================================
9. SEARCH & INPUTS
============================================================ */
.search-wrapper {
position: relative;
display: flex;
align-items: center;
flex: 1;
transition: flex 0.3s ease;
min-width: 60px;
}
.search-wrapper input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.2rem;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text-primary);
font-size: 0.875rem;
outline: none;
border-radius: var(--radius-md);
transition: border-color 0.3s, flex 0.3s;
height: 48px;
}
.search-wrapper input:focus {
border-color: var(--accent);
}
.search-wrapper input::placeholder {
color: var(--placeholder);
}
.search-wrapper .search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--placeholder);
pointer-events: none;
font-size: 0.9rem;
}
.search-wrapper.focused {
flex: 3;
}
.search-wrapper .clear-btn,
#planner-search-wrapper .planner-clear-btn {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: #fff;
color: #000;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
display: none;
padding: 4px;
}
.search-wrapper .clear-btn.visible,
#planner-search-wrapper .planner-clear-btn.visible {
display: block;
}
.filter-btn,
.view-btn {
height: 48px;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #000;
border: none;
border-radius: var(--radius-md);
transition: background 0.2s;
flex-shrink: 0;
cursor: pointer;
}
.filter-btn:hover,
.view-btn:hover {
background: #e5e5e5;
}
@keyframes refresh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#btn-refresh-data {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
}
#btn-refresh-data:hover {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
}
#btn-refresh-data svg {
color: #4DFF7D !important;
stroke: #4DFF7D !important;
transition: color 0.15s;
}
#btn-refresh-data:hover svg {
color: #6effa0 !important;
stroke: #6effa0 !important;
}
#btn-refresh-data.refreshing svg {
animation: refresh-spin 0.8s linear infinite;
}
#btn-refresh-data:disabled {
opacity: 0.7;
cursor: wait;
}
.share-btn {
background: var(--accent);
color: #000;
font-weight: 700;
padding: 0 1rem;
height: 48px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-style: italic;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
flex-shrink: 0;
}
.share-btn:hover {
background: var(--accent-hover);
}
.share-btn svg {
width: 1rem;
height: 1rem;
}
#planner-search-wrapper {
position: relative;
margin-bottom: 8px;
}
#planner-search-wrapper input {
width: 100%;
padding: 0.5rem 0.75rem 0.5rem 2rem;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text-primary);
font-size: 0.8rem;
outline: none;
border-radius: var(--radius-md);
transition: border-color 0.2s;
height: 38px;
}
#planner-search-wrapper input:focus {
border-color: var(--accent);
}
#planner-search-wrapper input::placeholder {
color: var(--placeholder);
}
#planner-search-wrapper .planner-search-icon {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
color: var(--placeholder);
pointer-events: none;
}
/* ============================================================
10. FILTER SHEET
============================================================ */
#filter-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
opacity: 0;
transition: opacity 0.3s ease;
justify-content: center;
align-items: flex-end;
}
#filter-overlay.open {
display: flex;
opacity: 1;
}
#filter-sheet {
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
width: 100%;
max-width: 600px;
max-height: 85dvh;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
margin: 0 auto;
}
#filter-overlay.open #filter-sheet {
transform: translateY(0);
}
#filter-sheet .sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px 12px 20px;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
#filter-sheet .sheet-header h3 {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-style: italic;
color: var(--text-primary);
}
#filter-sheet .sheet-header .close-btn {
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
}
#filter-sheet .sheet-body {
flex: 1;
overflow-y: auto;
padding: 12px 20px 20px 20px;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
#filter-sheet .sheet-body::-webkit-scrollbar {
display: none;
}
#filter-sheet .sheet-footer {
display: flex;
gap: 12px;
padding: 12px 20px 20px 20px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}
#filter-sheet .sheet-footer button {
flex: 1;
padding: 10px 0;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-style: italic;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
}
.filter-accordion {
border-bottom: 1px solid var(--border-color);
}
.filter-accordion:last-child {
border-bottom: none;
}
.filter-accordion .accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
border-radius: var(--radius-md);
}
.filter-accordion .accordion-header .label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.filter-accordion .accordion-header .value {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
margin-right: 8px;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-accordion .accordion-header .arrow {
color: var(--text-secondary);
transition: transform 0.25s ease;
flex-shrink: 0;
}
.filter-accordion .accordion-header .arrow.open {
transform: rotate(180deg);
}
.filter-accordion .accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-accordion .accordion-content::-webkit-scrollbar {
display: none;
}
.filter-accordion .accordion-content.open {
max-height: 300px;
padding: 0 0 12px 0;
overflow-y: auto;
}
.filter-accordion .accordion-content.open.brand-content {
max-height: 340px;
}
.filter-option {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.filter-option:hover {
background: var(--bg-primary);
}
.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
accent-color: var(--accent);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.filter-option .opt-label {
font-size: 0.8rem;
color: var(--text-primary);
}
.brand-search-input {
width: 100%;
padding: 6px 10px;
background: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text-primary);
font-size: 0.75rem;
outline: none;
border-radius: var(--radius-md);
margin-bottom: 8px;
transition: border-color 0.2s;
}
.brand-search-input:focus {
border-color: var(--accent);
}
.brand-checkbox-list {
max-height: 160px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.brand-checkbox-list::-webkit-scrollbar {
display: none;
}
/* Sort direction row */
.sort-direction-row {
display: flex;
gap: 0.5rem;
padding: 0.25rem 0 0.75rem 0;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.sort-direction-row .dir-btn {
flex: 1;
min-width: 60px;
padding: 0.5rem 0.25rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-style: italic;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
text-align: center;
}
.sort-direction-row .dir-btn.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
}
.sort-direction-row .dir-btn:active {
transform: scale(0.95);
}
/* ============================================================
11. CAR MODAL
============================================================ */
.modal-overlay {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
}
#car-modal {
overflow: hidden;
}
.modal-content {
height: 100%;
display: flex;
flex-direction: column;
background: var(--bg-secondary);
position: relative;
z-index: 60;
overflow: hidden;
}
.modal-scroll {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
-ms-overflow-style: none;
scrollbar-width: none;
}
.modal-scroll::-webkit-scrollbar {
display: none;
}
/* ============================================================
12. MODAL HEADER & BADGES
============================================================ */
#modal-header {
position: relative;
overflow: hidden;
background-color: #1C1C28;
}
/* No transition here. The header tracks scrollTop 1:1 as the user
scrolls; any easing would make it lag behind the finger. */
#modal-header::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(28, 28, 40, 0.9) 0%,
rgba(28, 28, 40, 0.2) 50%,
rgba(28, 28, 40, 0.95) 100%
);
z-index: 0;
}
#modal-header > * {
position: relative;
z-index: 1;
}
.modal-badges-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: 22px;
}
.modal-tag-icon-wrapper {
display: inline-flex;
align-items: center;
height: 22px;
}
.modal-tag-icon {
display: block;
height: 22px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* ============================================================
13. STAR SELECTOR
============================================================ */
.star-btn-row {
display: flex !important;
gap: 4px !important;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
scrollbar-width: none;
}
.star-btn-row::-webkit-scrollbar {
display: none;
}
.star-btn {
flex: 0 0 auto !important;
min-width: 42px !important;
max-width: none !important;
min-height: unset !important;
padding: 5px 9px !important;
background: #1C1C28 !important;
border: 1px solid rgba(255, 234, 0, 0.15) !important;
color: #9ca3af !important;
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 10px !important;
letter-spacing: 0.08em;
border-radius: var(--radius-md) !important;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
text-align: center;
}
.star-btn:hover {
border-color: rgba(255, 234, 0, 0.4) !important;
color: #fff !important;
}
.star-btn.active {
background: var(--accent) !important;
color: #000 !important;
border-color: var(--accent) !important;
font-weight: 900 !important;
}
.star-btn.inactive {
background: #1C1C28 !important;
color: #9ca3af !important;
}
.star-btn .star-row {
font-size: 10px !important;
}
/* Card star display (bottom-right corner of image) */
.card-star-display {
position: absolute;
top: 4px;
right: 4px;
font-size: 10px;
font-weight: 700;
z-index: 20;
line-height: 1;
letter-spacing: 1px;
}
.card-star-display .gold {
color: var(--accent);
}
.card-star-display .empty {
color: #000 !important;
opacity: 1 !important;
}
.dark .card-star-display .empty {
text-shadow: 0 0 2px rgba(255, 255, 255, 0.08);
}
/* ============================================================
14. STATS TAB
============================================================ */
.req-strip {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 8px 10px !important;
background: #1C1C28 !important;
border: 1px solid rgba(139, 61, 255, 0.4) !important;
border-radius: var(--radius-lg) !important;
margin-bottom: 10px !important;
}
.req-strip-pattern {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.req-strip-icon {
width: 14px;
height: 14px;
object-fit: contain;
flex-shrink: 0;
}
.req-strip-bp {
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 11px;
font-style: normal !important;
color: #fff;
padding: 1px 5px;
background: #15151E;
border: 1px solid rgba(139, 61, 255, 0.35);
border-radius: var(--radius-sm);
line-height: 1.2;
}
.req-strip-total {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
font-size: 14px;
font-style: normal !important;
color: var(--accent);
flex-shrink: 0;
padding-left: 10px;
border-left: 1px solid rgba(139, 61, 255, 0.3);
}
.req-strip-total img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* Tier selector */
.stat-tier-row {
display: flex;
gap: 4px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
margin-bottom: 12px;
}
.stat-tier-row::-webkit-scrollbar {
display: none;
}
.stat-tier-btn {
flex-shrink: 0;
padding: 5px 9px;
background: #1C1C28;
border: 1px solid rgba(255, 234, 0, 0.15);
color: #9ca3af;
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-style: normal !important;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
min-width: 42px;
text-align: center;
}
.stat-tier-btn:hover {
border-color: rgba(255, 234, 0, 0.4);
color: #fff;
}
.stat-tier-btn.active {
background: var(--accent);
color: #000;
border-color: var(--accent);
font-weight: 900;
}
/* Stat block */
.stat-block {
background: #1C1C28;
border: 1px solid rgba(139, 61, 255, 0.35);
border-radius: var(--radius-lg);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-rank-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 234, 0, 0.12);
}
.stat-rank-label {
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 700;
font-size: 10px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.stat-rank-value {
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
font-size: 26px;
font-style: normal !important;
color: #fff;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.stat-rank-badge {
display: inline-block;
background: var(--accent);
color: #000;
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 900;
font-size: 9px;
padding: 3px 7px;
border-radius: var(--radius-sm);
letter-spacing: 0.12em;
margin-left: 8px;
vertical-align: middle;
}
.stat-bar {
display: flex;
align-items: center;
gap: 10px;
}
.stat-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
object-fit: contain;
}
.stat-bar-content {
flex: 1;
min-width: 0;
}
.stat-bar-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.stat-bar-label {
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 700;
font-size: 10px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.stat-bar-unit {
font-family: 'Kanit', sans-serif !important;
font-style: normal !important;
font-weight: 700;
font-size: 8px;
color: #6b7280;
letter-spacing: 0.05em;
text-transform: lowercase;
}
.stat-bar-value {
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 13px;
font-style: normal !important;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.stat-bar-value.oc-boosted {
color: #FF6B35;
}
.stat-bar-value.evo-boosted {
color: #A366FF;
}
.stat-bar-track {
height: 5px;
background: #15151E;
border-radius: 2px;
overflow: hidden;
display: flex;
border: 1px solid rgba(255, 234, 0, 0.1);
}
.stat-bar-fill-base {
background: rgba(255, 255, 255, 0.75);
height: 100%;
flex-shrink: 0;
}
.stat-bar-fill-boost {
background: #FF6B35;
height: 100%;
flex-shrink: 0;
}
.stat-bar-fill-evo {
background: #A366FF;
height: 100%;
flex-shrink: 0;
}
.stat-bar-fill-drop {
background: #dc2626;
height: 100%;
flex-shrink: 0;
}
/* Advanced nitro flames row */
.adv-nitro-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 8px 6px;
background: rgba(0, 0, 0, 0.25);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 234, 0, 0.08);
}
.adv-nitro-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.adv-nitro-cell img {
width: 16px;
height: 16px;
object-fit: contain;
}
.adv-nitro-value {
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 11px;
font-style: normal !important;
color: #fff;
}
.adv-nitro-label {
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 700;
font-size: 7px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Air speed row */
.air-speed-row {
display: flex;
align-items: center;
gap: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 234, 0, 0.1);
}
.air-speed-row svg {
width: 22px;
height: 22px;
color: #6b7280;
flex-shrink: 0;
}
.air-speed-row .air-speed-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: baseline;
}
/* OC toggle */
.oc-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 12px;
background: #1C1C28;
border: 1px solid rgba(255, 234, 0, 0.15);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 0.15s;
width: 100%;
margin-bottom: 10px;
}
.oc-toggle-btn:hover {
border-color: rgba(255, 107, 53, 0.5);
}
.oc-toggle-btn.active {
border-color: #FF6B35;
}
.oc-toggle-btn img {
height: 22px;
object-fit: contain;
}
.oc-toggle-label {
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9ca3af;
}
.oc-toggle-btn.active .oc-toggle-label {
color: #FF6B35;
}
/* Cost + parts block */
.cost-parts-block {
background: #1C1C28;
border: 1px solid rgba(255, 234, 0, 0.15);
border-radius: var(--radius-lg);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.cost-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Kanit', sans-serif !important;
font-weight: 700;
font-size: 18px;
font-style: normal !important;
color: #fff;
}
.cost-row img {
width: 22px;
height: 22px;
object-fit: contain;
}
.cost-row .cost-label {
font-size: 10px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-left: auto;
}
.parts-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
border-top: 1px solid rgba(255, 234, 0, 0.1);
padding-top: 10px;
}
.part-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.part-cell img {
width: 26px;
height: 26px;
object-fit: contain;
}
.part-cell .part-count {
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
font-size: 15px;
font-style: normal !important;
color: #fff;
line-height: 1;
}
.part-cell .part-name {
font-family: 'Kanit', sans-serif !important;
font-style: italic;
font-weight: 700;
font-size: 8px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ============================================================
15. EVO SELECTOR
============================================================ */
.evo-section {
margin-top: 12px;
background: #1C1C28;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(139, 61, 255, 0.2);
}
.evo-selector {
display: flex;
align-items: center;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
position: relative;
transition: background 0.15s;
gap: 10px;
}
.evo-selector::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #A366FF, #5A12C5);
}
.evo-selector:hover {
background: rgba(139, 61, 255, 0.06);
}
.evo-selector-tag {
width: 42px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #5A12C5, #2E007B);
border-radius: var(--radius-sm);
flex-shrink: 0;
box-shadow: 0 0 10px rgba(139, 61, 255, 0.35);
}
.evo-selector-tag img {
height: 18px;
max-width: 34px;
object-fit: contain;
}
.evo-selector-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.evo-selector-label {
font-family: 'Kanit', sans-serif !important;
font-size: 8px;
font-weight: 700;
color: #A366FF;
text-transform: uppercase;
letter-spacing: 0.15em;
line-height: 1;
}
.evo-selector-name {
font-family: 'Kanit', sans-serif !important;
font-size: 12px;
font-weight: 700;
font-style: normal !important;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.evo-selector-rank {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
padding: 4px 8px;
background: rgba(139, 61, 255, 0.12);
border-radius: var(--radius-sm);
}
.evo-rank-from {
font-family: 'Kanit', sans-serif !important;
font-size: 10px;
font-weight: 700;
color: #6b7280;
}
.evo-rank-arrow {
width: 10px;
height: 10px;
color: #A366FF;
flex-shrink: 0;
}
.evo-rank-to {
font-family: 'Kanit', sans-serif !important;
font-size: 12px;
font-weight: 900;
color: #A366FF;
}
.evo-selector-arrow {
width: 12px;
height: 12px;
color: #A366FF;
transition: transform 0.2s;
flex-shrink: 0;
}
.evo-selector-arrow.open {
transform: rotate(180deg);
}
.evo-options {
background: #0a0a0f;
max-height: 220px;
overflow-y: auto;
border-top: 1px solid rgba(139, 61, 255, 0.15);
border-bottom: 1px solid rgba(139, 61, 255, 0.15);
scrollbar-width: none;
}
.evo-options::-webkit-scrollbar {
display: none;
}
.evo-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 14px;
cursor: pointer;
border-bottom: 1px solid rgba(139, 61, 255, 0.08);
transition: background 0.15s;
border-left: 3px solid transparent;
}
.evo-option:last-child {
border-bottom: none;
}
.evo-option:hover {
background: rgba(139, 61, 255, 0.1);
}
.evo-option.active {
background: linear-gradient(90deg, rgba(90, 18, 197, 0.4), transparent);
border-left-color: #A366FF;
}
.evo-option-name {
font-family: 'Kanit', sans-serif !important;
font-size: 11px;
font-weight: 700;
color: #fff;
}
.evo-option.active .evo-option-name {
color: #A366FF;
}
.evo-option-rank {
font-family: 'Kanit', sans-serif !important;
font-size: 11px;
font-weight: 900;
color: #fff;
}
.evo-option.active .evo-option-rank {
color: #A366FF;
}
.evo-details {
padding: 12px;
background: #15151E;
}
.evo-details:empty {
display: none;
}
.evo-parts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(139, 61, 255, 0.15);
}
.evo-part-item {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.evo-part-label {
font-family: 'Kanit', sans-serif !important;
font-size: 8px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1;
}
.evo-part-value {
font-family: 'Kanit', sans-serif !important;
font-size: 10px;
font-weight: 700;
color: #e5e7eb;
line-height: 1.3;
word-break: break-word;
}
.evo-description {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(139, 61, 255, 0.15);
font-family: 'Kanit', sans-serif !important;
font-size: 10px;
font-style: italic;
color: #6b7280;
line-height: 1.5;
}
/* ============================================================
16. GARAGE CARDS
============================================================ */
.star-gold {
color: var(--accent);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.star-empty {
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.star-black {
color: #000;
}
.star-black-empty {
color: rgba(0, 0, 0, 0.2);
}
/* Feature tags under model name (Elite, PNB) */
.feat-tag {
display: inline-block;
padding: 3px 6px;
font-size: 8px;
text-transform: uppercase;
font-style: italic;
letter-spacing: 0.15em;
border-radius: var(--radius-sm);
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
line-height: 1;
}
.feat-elite {
background: linear-gradient(135deg, #8b5cf6, #5A12C5);
box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}
.feat-pnb {
background: linear-gradient(135deg, #00aaff, #0066cc);
box-shadow: 0 2px 4px rgba(0, 170, 255, 0.3);
}
/* Active EVO triangle (bottom-right of gold-max-style cards) */
.evo-triangle {
z-index: 25 !important;
background: linear-gradient(
135deg,
transparent 0%,
transparent 52%,
#915EDC 52%,
#915EDC 56%,
rgba(255, 255, 255, 0.9) 56%,
rgba(255, 255, 255, 0.1) 57.5%,
#252630 57.5%,
#252630 100%
);
filter: drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.4));
}
/* Diagonal ASPHALT watermark (gold-max cards only) */
.bg-watermark {
position: absolute;
bottom: -60px;
left: -30px;
transform: rotate(-20deg);
transform-origin: bottom left;
font-family: 'Kanit', sans-serif !important;
font-weight: 900;
font-style: italic;
font-size: 250px;
line-height: 1;
color: rgba(0, 0, 0, 0.04);
z-index: 0;
pointer-events: none;
user-select: none;
letter-spacing: -0.05em;
}
/* List-view variant: shorter row context. Scaled down and re-anchored
so it still clips gracefully — the watermark reads as texture,
matching the grid card's intent. */
.bg-watermark-list {
font-size: 140px;
bottom: -50px;
left: -20px;
}
/* Active EVO badge on list-view rows.
Nested: purple outer frame, black inner chip, EVO tag on top. */
.evo-badge-nested {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #915EDC, #5A12C5);
padding: 2px;
border-radius: 3px;
margin-left: 6px;
vertical-align: middle;
box-shadow: 0 1px 3px rgba(139, 61, 255, 0.4);
}
.evo-badge-inner {
display: inline-flex;
align-items: center;
justify-content: center;
background: #0a0a0f;
padding: 1px 4px;
border-radius: 2px;
}
.evo-badge-inner img {
height: 10px;
width: auto;
display: block;
}
/* Colour-cut backgrounds for max / evo / oc states */
.bg-max-cut {
background: linear-gradient(135deg, #feda00 0%, #e6b800 60%, #cca300 100%) !important;
color: #000 !important;
}
.bg-max-cut h3,
.bg-max-cut p,
.bg-max-cut span {
color: #000 !important;
}
/* Tags keep their own colours on gold-max rows. The rule above
exists for the brand/model/rank text, not for tag chips which
have coloured backgrounds and need white text to stay legible. */
.bg-max-cut .feat-tag.feat-elite,
.bg-max-cut .feat-tag.feat-pnb,
.bg-max-cut .feat-tag.feat-key,
.bg-max-cut .feat-tag.feat-delisted,
.bg-max-cut .car-class-badge {
color: #fff !important;
}
.bg-evo-cut {
background:
linear-gradient(to top, rgba(37, 99, 235, 0.85) 0%, rgba(37, 99, 235, 0.35) 45%, transparent 80%),
linear-gradient(135deg, #feda00 0%, #e6b800 60%, #cca300 100%) !important;
border-bottom: 2px solid #2563eb !important;
}
.bg-oc-cut {
background:
linear-gradient(to top, rgba(255, 107, 53, 0.7) 0%, rgba(255, 107, 53, 0.2) 45%, transparent 80%),
#1C1C28 !important;
border-bottom: 2px solid #FF6B35 !important;
}
/* Locked badge overlay */
.locked-badge-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 15;
pointer-events: none;
}
.locked-badge {
background: rgba(28, 28, 40, 0.9);
color: var(--accent);
font-weight: 900;
font-style: italic;
font-size: 11px;
letter-spacing: 0.1em;
padding: 4px 16px;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ============================================================
17. COMPARE VIEW
============================================================ */
/* Cards inside the compare grid should clip their own corners,
otherwise the inner content paints square edges over the
outer rounded shell. */
#compare-cards-container > .glass {
overflow: hidden;
}
#view-compare {
padding-bottom: 140px !important;
}
#compare-cards-container {
scroll-snap-type: x mandatory;
}
#compare-cards-container > .glass {
scroll-snap-align: center;
}
/* Compare table text */
#compare-table-container table {
width: 100%;
border-collapse: collapse;
font-size: 8px !important;
text-transform: uppercase !important;
}
#compare-table-container th,
#compare-table-container td {
padding: 3px 2px !important;
text-align: center;
border-bottom: 1px solid rgba(139, 61, 255, 0.1);
font-size: 8px !important;
line-height: 1.1 !important;
}
#compare-table-container th {
color: #9ca3af;
font-weight: 700;
font-size: 7px !important;
letter-spacing: 0.03em;
}
#compare-table-container td {
color: #f0f0f0;
font-family: 'Kanit', sans-serif !important;
font-style: italic !important;
font-weight: 700 !important;
}
/* EVO dropdown menus in compare cards */
.compare-evo-menu-dropdown {
border-radius: var(--radius-md);
}
/* /* ============================================================
18. DASHBOARD
============================================================ */
.dash-amount-wrapper {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-height: 0;
overflow: hidden;
container-type: inline-size;
}
.dash-amount {
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
font-size: clamp(1.75rem, 22cqw, 5rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.dash-amount-icon {
height: clamp(1.25rem, 16cqw, 3.5rem);
width: auto;
object-fit: contain;
flex-shrink: 0;
}
/* ============================================================
19. SETTINGS FOOTER
============================================================ */
.footer-credits {
border-top: 1px solid var(--border-color);
padding-top: 16px;
margin-top: 16px;
}
.footer-credits .footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 12px;
font-size: 9px;
color: var(--text-secondary);
text-align: center;
}
.footer-credits .footer-row .separator {
color: var(--border-color);
font-weight: 300;
}
.footer-credits .footer-row .highlight {
color: var(--text-primary);
font-weight: 700;
}
.footer-credits .footer-row .accent {
color: var(--accent);
font-weight: 700;
}
.footer-credits .footer-row .credit-link {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.2s;
font-weight: 600;
}
.footer-credits .footer-row .credit-link:hover {
color: var(--accent);
}
.footer-credits .footer-row .report-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: 2px 12px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Kanit', sans-serif !important;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
border-radius: var(--radius-sm);
}
.footer-credits .footer-row .report-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.footer-credits .footer-row .report-btn:active {
transform: scale(0.95);
}
.footer-credits .footer-bottom {
margin-top: 8px;
font-size: 7px;
color: var(--text-secondary);
text-align: center;
opacity: 0.6;
line-height: 1.4;
}
/* ============================================================
20. SEASON CALENDAR
============================================================ */
.season-info-line {
text-align: center;
padding: 2rem 1rem;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #6b7280;
font-style: italic;
}
.season-main-header {
border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}
.season-banner-img {
width: 100%;
height: auto;
max-height: 250px;
object-fit: cover;
display: block;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.season-header-content {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.season-header-name {
font-size: 18px;
font-weight: 900;
font-style: italic;
color: var(--text-primary);
}
.event-filters {
display: flex;
gap: 8px;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
.evt-filter-btn {
background: transparent;
border: none;
color: #6b7280;
font-size: 10px;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 8px;
cursor: pointer;
transition: color 0.2s;
}
.evt-filter-btn.active {
color: var(--accent);
border-bottom: 2px solid var(--accent);
}
.evt-card {
background: rgba(28, 28, 40, 0.6);
border: 1px solid var(--border-color);
border-left: 4px solid #6b7280;
border-radius: var(--radius-lg);
margin-bottom: 12px;
}
.evt-card.live {
border-left-color: #4DFF7D;
}
.evt-card.upcoming {
border-left-color: var(--accent);
}
.evt-card-header {
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
}
.evt-card-title {
font-size: 14px;
font-weight: 900;
font-style: italic;
color: var(--text-primary);
line-height: 1.1;
}
.evt-card-dates {
font-size: 9px;
font-weight: 700;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.evt-status-badge {
font-size: 8px;
font-weight: 900;
font-style: italic;
padding: 2px 6px;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: var(--radius-sm);
}
.evt-roster {
display: flex;
gap: 8px;
padding: 12px;
overflow-x: auto;
}
.evt-roster::-webkit-scrollbar {
display: none;
}
.evt-car-chip {
flex-shrink: 0;
width: 180px;
background: #15151E;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
gap: 10px;
padding: 6px;
cursor: pointer;
transition: border-color 0.2s;
}
.evt-car-chip:hover {
border-color: var(--accent);
}
.evt-car-chip.locked {
opacity: 0.5;
filter: grayscale(100%);
}
.evt-car-img {
width: 64px;
height: 44px;
object-fit: cover;
border-radius: var(--radius-sm);
}
.evt-car-details {
flex: 1;
min-width: 0;
}
.evt-car-name {
font-size: 11px;
font-weight: 900;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.evt-car-stars {
font-size: 12px;
color: var(--accent);
letter-spacing: -1px;
margin-top: 2px;
}
/* ============================================================
21. DATE PICKER
============================================================ */
.cal-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.cal-overlay.hidden {
display: none;
}
.cal-modal {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
width: 100%;
max-width: 320px;
padding: 1rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.cal-header button {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-primary);
width: 32px;
height: 32px;
cursor: pointer;
font-size: 1.15rem;
line-height: 1;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: var(--radius-md);
}
.cal-header button:hover {
border-color: var(--accent);
color: var(--accent);
}
.cal-header span {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
color: var(--accent);
font-style: italic;
}
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 0.25rem;
}
.cal-weekdays > div {
text-align: center;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
padding: 0.25rem 0;
font-style: italic;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--text-primary);
font-size: 0.75rem;
font-weight: 700;
font-style: italic;
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
padding: 0;
}
.cal-day:hover {
border-color: var(--accent);
color: var(--accent);
}
.cal-day:active {
transform: scale(0.9);
}
.cal-day.empty {
visibility: hidden;
pointer-events: none;
}
.cal-day.today {
color: var(--accent);
border-color: rgba(255, 234, 0, 0.35);
}
.cal-day.selected {
background: var(--accent);
color: #000 !important;
border-color: var(--accent);
}
.cal-footer {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-color);
display: flex;
gap: 0.5rem;
}
.cal-footer button {
flex: 1;
padding: 0.6rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-style: italic;
border-radius: var(--radius-md);
cursor: pointer;
}
/* ============================================================
22. WELCOME & AUTH
============================================================ */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.static-grid {
position: absolute;
inset: 0;
z-index: -2;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 50px 50px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 80%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 80%);
}
.bg-slash-accent {
position: absolute;
width: 150%;
height: 300px;
background: linear-gradient(90deg, rgba(139, 61, 255, 0.08), rgba(139, 61, 255, 0.01));
transform: rotate(-35deg);
top: 15%;
left: -25%;
z-index: -2;
pointer-events: none;
}
.bg-slash-nitro {
position: absolute;
width: 150%;
height: 3px;
background: rgba(196, 255, 0, 0.15);
transform: rotate(-35deg);
top: 55%;
left: -25%;
z-index: -2;
pointer-events: none;
box-shadow: 0 0 15px rgba(196, 255, 0, 0.3);
}
.glass-3d {
background: rgba(28, 28, 40, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-lg);
animation: float 6s ease-in-out infinite;
transform-style: preserve-3d;
perspective: 1000px;
}
.glass-3d-alt {
animation: float-alt 5s ease-in-out infinite;
}
.app-icon {
width: 110px;
height: 110px;
position: relative;
overflow: hidden;
background: #1C1C28;
border-radius: var(--radius-lg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-slash-purple {
position: absolute;
width: 200%;
height: 50px;
background: linear-gradient(90deg, #2E007B, #5A12C5);
transform: rotate(-55deg);
top: 15%;
left: -50%;
}
.neon-beam {
position: absolute;
width: 200%;
height: 6px;
background: linear-gradient(90deg, #FFEA00, #a3ff00);
transform: rotate(-55deg);
top: 48%;
left: -50%;
z-index: 2;
box-shadow: 0 0 15px #FFEA00;
}
.logo-text {
font-weight: 900;
font-size: 60px;
z-index: 3;
line-height: 1;
letter-spacing: -2px;
margin-right: 2px;
text-shadow: 4px 4px 0px #15151E;
}
.dot {
transition: width 0.3s ease, background 0.3s ease;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 0;
}
.dot.active {
width: 24px;
background: var(--accent);
box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}
/* ============================================================
INSTALL APP BANNER
Floating pill above the nav FAB on mobile. On desktop the FAB
is hidden, so the banner drops down to 24px.
============================================================ */
#install-banner {
position: fixed;
left: 50%;
transform: translateX(-50%) translateY(0);
bottom: 84px;
width: calc(100% - 32px);
max-width: 360px;
background: rgba(28, 28, 40, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 234, 0, 0.35);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 234, 0, 0.12);
display: flex;
align-items: stretch;
z-index: 54;
opacity: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#install-banner.hidden {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(20px);
}
@media (min-width: 768px) {
#install-banner {
bottom: 24px;
}
}
.install-banner-main {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
text-align: left;
transition: background 0.15s;
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.install-banner-main:hover {
background: rgba(255, 234, 0, 0.06);
}
.install-banner-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: rgba(255, 234, 0, 0.15);
border: 1px solid rgba(255, 234, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.install-banner-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.install-banner-title {
font-family: 'Kanit', sans-serif !important;
font-size: 12px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
line-height: 1.1;
}
.install-banner-sub {
font-family: 'Kanit', sans-serif !important;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9ca3af;
line-height: 1.2;
}
.install-banner-dismiss {
width: 40px;
background: transparent;
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.08);
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
border-top-right-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
.install-banner-dismiss:hover {
color: #dc2626;
background: rgba(220, 38, 38, 0.08);
}
/* ============================================================
23. FLOATING ACTION BUTTON & NAVIGATION MODAL
============================================================ */
#nav-fab {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #1E0F33;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 234, 0, 0.3);
padding: 0;
cursor: pointer;
z-index: 55;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 234, 0, 0.15);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease, box-shadow 0.3s ease;
}
#nav-fab:hover {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 234, 0, 0.3);
}
#nav-fab:active {
transform: translateX(-50%) scale(0.92);
}
/* Slides out to the bottom instead of vanishing */
#nav-fab.nav-fab-hidden {
transform: translateX(-50%) translateY(150%);
pointer-events: none;
}
/* Idle fade state */
#nav-fab.nav-fab-idle {
opacity: 0.4;
}
#nav-fab svg, #nav-fab img {
width: 22px;
height: 22px;
}
#nav-fab.hidden {
display: none;
}
#nav-modal-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: none;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
#nav-modal-overlay.open {
display: flex;
opacity: 1;
}
#nav-modal {
width: 100%;
max-width: 480px;
background: #1C1C28;
border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xl);
border: 1px solid rgba(139, 61, 255, 0.3);
border-bottom: none;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
max-height: 70dvh;
display: flex;
flex-direction: column;
}
#nav-modal-overlay.open #nav-modal {
transform: translateY(0);
}
#nav-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid rgba(139, 61, 255, 0.2);
flex-shrink: 0;
}
#nav-modal-header h3 {
font-size: 12px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
#nav-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
border-radius: var(--radius-md);
transition: color 0.15s, background 0.15s;
}
#nav-modal-close:hover {
color: #dc2626;
background: rgba(220, 38, 38, 0.1);
}
#nav-modal-body {
padding: 16px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
scrollbar-width: none;
}
#nav-modal-body::-webkit-scrollbar {
display: none;
}
.nav-modal-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px 12px;
border-radius: var(--radius-lg);
color: #9ca3af;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
width: 100%;
text-align: center;
font-family: inherit;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-modal-item:hover {
background: rgba(139, 61, 255, 0.1);
color: #fff;
}
.nav-modal-item.active {
background: rgba(255, 234, 0, 0.08);
color: var(--accent);
border-color: rgba(255, 234, 0, 0.3);
}
.nav-modal-item svg {
width: 22px;
height: 22px;
flex-shrink: 0;
color: inherit;
}
.nav-modal-item span {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-style: italic;
}
/* FAB is desktop-hidden — the sidebar already covers navigation. */
@media (min-width: 768px) {
#nav-fab {
display: none !important;
}
}
/* ============================================================
24. SCROLL-TO-TOP
============================================================ */
#scroll-top {
border-radius: 50%;
transition: opacity 0.25s, transform 0.25s;
}
#scroll-top.hidden {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
/* ============================================================
25. UTILITIES & KEYFRAMES
============================================================ */
/* Kept as an alias so any legacy markup using .font-kanit still works. */
.font-kanit {
font-family: 'Kanit', sans-serif !important;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0% {
transform: translateY(0) rotateX(5deg) rotateY(-5deg);
}
50% {
transform: translateY(-12px) rotateX(8deg) rotateY(-2deg);
}
100% {
transform: translateY(0) rotateX(5deg) rotateY(-5deg);
}
}
@keyframes float-alt {
0% {
transform: translateY(0) rotateZ(-2deg);
}
50% {
transform: translateY(-8px) rotateZ(1deg);
}
100% {
transform: translateY(0) rotateZ(-2deg);
}
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(139, 61, 255, 0.3), inset 0 0 15px rgba(139, 61, 255, 0.2);
}
50% {
box-shadow: 0 0 40px rgba(139, 61, 255, 0.6), inset 0 0 25px rgba(139, 61, 255, 0.4);
}
}
@keyframes bounce-pause {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-2px);
}
}
.animate-attention {
animation: bounce-pause 3.5s infinite;
}
@keyframes gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes float-gentle {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
.animate-gradient-flow {
animation: gradient-flow 8s ease infinite;
}
.animate-float {
animation: float-gentle 4s ease-in-out infinite;
}
/* Guest Mode Lockdown Visuals */
.guest-active .auth-required {
opacity: 0.5;
filter: grayscale(100%);
pointer-events: auto !important; /* Forces the click interceptor to catch it */
}
/* Shared View Strict Lockdown */
.shared-view-locked #car-container,
.shared-view-locked #dash-season-cars,
.shared-view-locked .glass[onclick] {
pointer-events: none !important;
}
/* Dim and disable the Garage toolbars */
.shared-view-locked #search-wrapper,
.shared-view-locked #filter-toggle-btn,
.shared-view-locked #btn-more-options {
pointer-events: none !important;
opacity: 0.4;
}
/* Shared View Marquee */
@keyframes marquee {
0% { transform: translateX(100vw); }
100% { transform: translateX(-100%); }
}
.animate-marquee {
animation: marquee 12s linear infinite;
will-change: transform;
}
/* ============================================================
EVO WORKSHOP: ADVANCED UI UPDATES
============================================================ */
/* Segmented Weight Bar */
.weight-tick-container {
display: flex;
justify-content: space-between; /* This is the magic that spaces the lines out evenly */
align-items: center;
height: 24px;
width: 100%;
padding: 0 4px;
}
.weight-tick {
width: 2px;
height: 65%; /* Made the ticks significantly taller */
background: rgba(255, 255, 255, 0.15);
transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.weight-tick.active-tick {
height: 100%;
width: 3px;
background: #fff !important;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
/* Expandable Part Cards */
.evo-part-wrapper {
background: #1C1C28;
border: 1px solid rgba(139, 61, 255, 0.2);
border-radius: var(--radius-md);
margin-bottom: 8px;
transition: border-color 0.2s, background 0.2s;
overflow: hidden;
}
.evo-part-wrapper.active {
border-color: #A366FF;
background: rgba(90, 18, 197, 0.1);
}
.evo-part-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
cursor: pointer;
}
.evo-part-header:hover {
background: rgba(139, 61, 255, 0.05);
}
.evo-part-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: #15151E;
}
.evo-part-details.open {
max-height: 300px;
padding: 12px 16px;
border-top: 1px solid rgba(139, 61, 255, 0.1);
}
.part-chevron {
transition: transform 0.3s ease;
}
.part-chevron.open {
transform: rotate(180deg);
}
/* Acceleration Graph */
/* EVO-GRAPH-V2 */
#evo-svg-wrapper {
position: relative;
width: 100%;
height: 230px;
margin-top: 8px;
touch-action: pan-y;
}
#evo-svg-wrapper .graph-tooltip {
transform: none;
top: 8px;
padding: 8px 10px;
line-height: 1.55;
min-width: 118px;
}
#evo-svg-wrapper .graph-tooltip::after { display: none; }
#evo-svg-wrapper .graph-crosshair { display: none; }
.evo-readout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.evo-ro-cell {
background: #15151E;
border: 1px solid rgba(163, 102, 255, 0.2);
border-radius: 6px;
padding: 8px 10px;
}
.evo-ro-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
margin-bottom: 4px;
}
.evo-ro-vals {
display: flex;
align-items: baseline;
gap: 6px;
font-family: 'Kanit', sans-serif;
font-size: 12px;
}
.evo-ro-s { color: #9ca3af; }
.evo-ro-b { color: #feda00; font-weight: 700; }
.evo-ro-arrow { color: #4b5563; font-size: 10px; }
.evo-ro-delta {
margin-top: 2px;
font-family: 'Kanit', sans-serif;
font-size: 10px;
font-weight: 700;
color: #6b7280;
}
.evo-ro-delta.good { color: #4ade80; }
.evo-ro-delta.bad { color: #f87171; }
.graph-tooltip {
position: absolute;
background: rgba(28, 28, 40, 0.95);
border: 1px solid #A366FF;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-family: 'Kanit', sans-serif;
font-size: 10px;
pointer-events: none;
transform: translate(-50%, -120%);
z-index: 10;
opacity: 0;
transition: opacity 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
white-space: nowrap;
}
.graph-tooltip::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: rgba(28, 28, 40, 0.95);
border-right: 1px solid #A366FF;
border-bottom: 1px solid #A366FF;
}
.graph-crosshair {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(163, 102, 255, 0.5);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 5;
}
/* ============================================================
HEADER AUTO-HIDE (mobile only)
iOS-style collapsing header. The header is pinned to the
top of the viewport and translated upward by exactly the
scroll distance on every rAF tick, so it tracks the finger
directly. #main-scroll carries a matching top padding so
content starts below the header when scrollTop is 0.
============================================================ */
@media (max-width: 767px) {
#header-container {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 45; /* Bumped from 40 to fix overlap with key icons */
height: 65px;
transform: none !important;
}
/* Kill GPU-heavy blur on mobile header to stop scroll lag */
#header-container .glass {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #15151E !important;
}
#main-scroll {
padding-top: 65px;
}
}
/* ============================================================
DESKTOP SIDEBAR RAIL
Collapsible left rail for >=768px. Expanded = full labels.
Collapsed = icons only (64px). State persisted in
localStorage under 'agu_sidebar_rail'.
============================================================ */
@media (min-width: 768px) {
#desktop-sidebar {
width: 256px;
transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
#desktop-sidebar[data-rail="collapsed"] {
width: 64px;
}
/* Hide full title, show GM short label */
#desktop-sidebar[data-rail="collapsed"] .sidebar-title {
display: none !important;
}
#desktop-sidebar[data-rail="collapsed"] .sidebar-title-short {
display: block !important;
}
/* Hide any label that lives directly inside a link or button
(icons are