/* * Copyright (c) 2026 Tuning-Database. * All rights reserved. Proprietary and confidential. * Licensed exclusively for instatuner.tuning-database.co.uk. * * INSTATuner 2.0 design system -- Phase 1.5. * Per masterplan sections 9.2-9.7. CSS custom properties = single source of truth. * Theme switching via [data-theme] attribute on . */ /* ==================================================================== 1. DESIGN TOKENS :root + [data-theme="glass"] = default OLED-deep glass theme. ==================================================================== */ :root, [data-theme="glass"] { /* Surfaces (RGB triplets, used as rgb(var(--token) / alpha)) */ --bg-base: 8 8 12; --bg-surface: 18 18 26; --bg-surface-2: 27 27 38; --bg-elevated: 24 24 36; /* opaque surface for dropdowns/popovers */ /* z-index scale -- single source of truth so popovers can't get hidden behind sibling glass cards (which create their own stacking context via backdrop-filter). Always reference these tokens. */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* Borders */ --border-hairline: 64 64 80; --border-strong: 90 90 110; /* Text */ --text-primary: 240 240 245; --text-secondary: 176 176 186; --text-muted: 112 112 128; /* Brand (race orange) */ --accent: 255 106 0; --accent-hot: 255 60 0; --accent-cool: 255 176 112; /* Signals */ --signal-cyan: 34 211 238; --signal-lime: 132 204 22; --signal-amber: 245 158 11; --signal-crimson: 239 68 68; --signal-ok: 76 217 100; /* Spacing scale (8-pt) -- reuse instead of magic px in components */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Z-index scale */ --z-bg: 0; --z-default: 1; --z-overlay: 10; --z-nav: 20; --z-toast: 60; --z-modal: 70; /* Radii */ --r-tight: 6px; --r-default: 10px; --r-card: 14px; --r-lg: 20px; --r-pill: 9999px; /* Motion */ --motion-fast: 150ms; --motion-base: 240ms; --motion-slow: 480ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasized: cubic-bezier(0.3, 0, 0, 1); --easing-decel: cubic-bezier(0, 0, 0, 1); /* Glass + shadow */ --blur-glass: 18px; --shadow-card: 0 8px 32px -8px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-elev: 0 16px 64px -16px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-glow-accent: 0 0 24px -4px rgba(255, 106, 0, 0.4); color-scheme: dark; } /* Light theme (override only diverging tokens) */ [data-theme="light"] { --bg-base: 250 250 252; --bg-surface: 255 255 255; --bg-surface-2: 244 244 248; --border-hairline: 212 212 220; --border-strong: 175 175 188; --text-primary: 15 23 42; --text-secondary: 71 85 105; --text-muted: 113 113 128; --shadow-card: 0 4px 16px -4px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-elev: 0 12px 48px -12px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.06); color-scheme: light; } /* "Spotify-dark" theme (recognizable to existing users from related products) */ [data-theme="spotify-dark"] { --bg-base: 18 18 18; --bg-surface: 24 24 24; --bg-surface-2: 40 40 40; --border-hairline: 60 60 60; --border-strong: 90 90 90; --text-primary: 255 255 255; --text-secondary: 179 179 179; --text-muted: 130 130 130; --shadow-card: 0 8px 32px -8px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.04); color-scheme: dark; } /* ==================================================================== 2. RESET + BASE ==================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; height: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: rgb(var(--bg-base)); color: rgb(var(--text-primary)); font-size: 16px; line-height: 1.5; font-feature-settings: "tnum" 1, "ss01" 1; min-height: 100%; transition: background-color var(--motion-base) var(--easing-standard), color var(--motion-base) var(--easing-standard); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: rgb(var(--accent)); text-decoration: none; transition: color var(--motion-fast) var(--easing-standard); } a:hover { color: rgb(var(--accent-hot)); } ::selection { background: rgba(255, 106, 0, 0.3); color: rgb(var(--text-primary)); } /* ==================================================================== 3. TYPOGRAPHY ==================================================================== */ .font-display { font-family: 'Inter', system-ui, sans-serif; font-weight: 900; letter-spacing: -0.02em; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum" 1; } h1, .h1 { font-size: 36px; line-height: 40px; font-weight: 900; letter-spacing: -0.02em; margin: 0; } h2, .h2 { font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.015em; margin: 0; } h3, .h3 { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; } .text-xs { font-size: 12px; line-height: 16px; } .text-sm { font-size: 14px; line-height: 20px; } .text-base { font-size: 16px; line-height: 24px; } .text-lg { font-size: 18px; line-height: 28px; } .text-xl { font-size: 20px; line-height: 28px; } .text-2xl { font-size: 24px; line-height: 32px; } .text-3xl { font-size: 30px; line-height: 36px; } .text-4xl { font-size: 36px; line-height: 40px; } .text-5xl { font-size: 48px; line-height: 52px; } .text-6xl { font-size: 60px; line-height: 64px; } .text-7xl { font-size: 72px; line-height: 76px; } .text-primary { color: rgb(var(--text-primary)); } .text-secondary { color: rgb(var(--text-secondary)); } .text-muted { color: rgb(var(--text-muted)); } .text-accent { color: rgb(var(--accent)); } .text-cyan { color: rgb(var(--signal-cyan)); } .text-lime { color: rgb(var(--signal-lime)); } .text-amber { color: rgb(var(--signal-amber)); } .text-crimson { color: rgb(var(--signal-crimson)); } /* ==================================================================== 4. BRAND MARK ==================================================================== */ .brand-wordmark { display: inline-flex; align-items: baseline; gap: 0; font-weight: 900; letter-spacing: -0.02em; line-height: 1; } .brand-wordmark__head { color: rgb(var(--text-primary)); } .brand-wordmark__slash { color: rgb(var(--accent)); transform: skewX(-12deg); display: inline-block; padding: 0 2px; font-weight: 900; } .brand-wordmark__tail { color: rgb(var(--text-secondary)); font-weight: 500; } /* ==================================================================== 5. CARDS / SURFACES ==================================================================== */ .card { background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-card); } .card--glass { background: rgb(var(--bg-surface) / 0.6); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .card--elevated { background: rgb(var(--bg-surface-2)); box-shadow: var(--shadow-elev); } .card--padded { padding: 32px; } .card--tight { padding: 16px; } /* ==================================================================== 6. BUTTONS ==================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--r-default); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; user-select: none; transition: background var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), transform var(--motion-fast) var(--easing-standard); } .btn:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: rgb(var(--accent)); color: white; } .btn--primary:hover { background: rgb(var(--accent-hot)); box-shadow: var(--shadow-glow-accent); } .btn--secondary { background: rgb(var(--bg-surface-2)); color: rgb(var(--text-primary)); border-color: rgb(var(--border-hairline)); } .btn--secondary:hover { border-color: rgb(var(--accent)); } .btn--ghost { background: transparent; color: rgb(var(--text-secondary)); } .btn--ghost:hover { color: rgb(var(--accent)); } .btn--danger { background: rgb(var(--signal-crimson)); color: white; } .btn--sm { padding: 8px 14px; font-size: 14px; } .btn--lg { padding: 16px 28px; font-size: 18px; } .btn--block { width: 100%; } /* ==================================================================== 7. FORMS ==================================================================== */ .field { margin-bottom: 16px; } .field__label { display: block; font-size: 13px; color: rgb(var(--text-secondary)); margin-bottom: 6px; font-weight: 600; } .field__hint { font-size: 12px; color: rgb(var(--text-muted)); margin-top: 4px; } .field__error { font-size: 12px; color: rgb(var(--signal-crimson)); margin-top: 4px; } .input, .textarea, .select { width: 100%; padding: 12px 14px; background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); color: rgb(var(--text-primary)); font-family: inherit; font-size: 16px; line-height: 1.5; transition: border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15); } .textarea { min-height: 120px; resize: vertical; } /* ==================================================================== 8. BADGES + PILLS ==================================================================== */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1; } .badge--lime { background: rgb(var(--signal-lime) / 0.15); color: rgb(var(--signal-lime)); } .badge--cyan { background: rgb(var(--signal-cyan) / 0.15); color: rgb(var(--signal-cyan)); } .badge--amber { background: rgb(var(--signal-amber) / 0.15); color: rgb(var(--signal-amber)); } .badge--crimson { background: rgb(var(--signal-crimson) / 0.15); color: rgb(var(--signal-crimson)); } .badge--accent { background: rgb(var(--accent) / 0.15); color: rgb(var(--accent)); } .badge--muted { background: rgb(var(--text-muted) / 0.15); color: rgb(var(--text-muted)); } /* Tier badges */ .tier-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .tier-badge--standard { background: rgb(var(--text-secondary) / 0.15); color: rgb(var(--text-secondary)); } .tier-badge--premium { background: rgb(var(--accent) / 0.15); color: rgb(var(--accent)); } .tier-badge--vip { background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-hot))); color: white; } /* ==================================================================== 9. ALERTS ==================================================================== */ .alert { background: rgb(var(--bg-surface-2) / 0.8); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; } .alert--error { background: rgb(var(--signal-crimson) / 0.08); border-color: rgb(var(--signal-crimson) / 0.3); color: rgb(var(--signal-crimson)); } .alert--success { background: rgb(var(--signal-lime) / 0.08); border-color: rgb(var(--signal-lime) / 0.3); color: rgb(var(--signal-lime)); } .alert--warning { background: rgb(var(--signal-amber) / 0.08); border-color: rgb(var(--signal-amber) / 0.3); color: rgb(var(--signal-amber)); } /* ==================================================================== 10. LAYOUT UTILITIES ==================================================================== */ .container { max-width: 1280px; margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .container { padding: 0 24px; } } @media (min-width: 1024px) { .container { padding: 0 32px; } } @media (min-width: 1280px) { .container { padding: 0 48px; } } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-baseline { align-items: baseline; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .grid { display: grid; } .grid-cols-1 { grid-template-columns: 1fr; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 768px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; } .mt-20 { margin-top: 80px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-8 { padding-top: 32px; padding-bottom: 32px; } .py-12 { padding-top: 48px; padding-bottom: 48px; } .py-16 { padding-top: 64px; padding-bottom: 64px; } .py-20 { padding-top: 80px; padding-bottom: 80px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-6 { padding-left: 24px; padding-right: 24px; } .hidden { display: none !important; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .w-full { width: 100%; } .max-w-md { max-width: 448px; } .max-w-lg { max-width: 512px; } .max-w-xl { max-width: 640px; } .max-w-2xl { max-width: 768px; } .divider { height: 1px; background: rgb(var(--border-hairline)); margin: 24px 0; border: none; } .divider--dashed { border: 0; border-top: 1px dashed rgb(var(--border-hairline)); background: transparent; height: 0; } /* ==================================================================== 11. ACCESSIBILITY + REDUCED MOTION ==================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } [data-perf-mode="minimum"] *, [data-perf-mode="minimum"] *::before, [data-perf-mode="minimum"] *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } /* ==================================================================== 12. APP SHELL (top nav + main) ==================================================================== */ .appshell { min-height: 100vh; display: flex; flex-direction: column; } .appshell__nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-base) / 0.85); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); position: sticky; top: 0; z-index: 40; } .appshell__main { flex: 1; padding: 32px 24px; } .appshell__footer { border-top: 1px solid rgb(var(--border-hairline)); padding: 24px; color: rgb(var(--text-muted)); font-size: 13px; text-align: center; } /* ==================================================================== 13. CHANGELOG ENTRY (Phase 1.3.5) ==================================================================== */ .changelog-entry { padding: 16px 0; border-bottom: 1px dashed rgb(var(--border-hairline)); } .changelog-entry:last-child { border-bottom: 0; } .changelog-entry__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .changelog-entry__version { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgb(var(--text-muted)); } .changelog-entry__date { font-size: 12px; color: rgb(var(--text-muted)); margin-left: auto; } .changelog-entry__title { font-size: 15px; font-weight: 600; color: rgb(var(--text-primary)); margin: 0; } .changelog-entry__body { font-size: 14px; color: rgb(var(--text-secondary)); margin-top: 6px; line-height: 1.6; } /* ==================================================================== 14. ANIMATED BACKGROUND EFFECTS (Phase 1.5.5) Gated by [data-perf-mode] for fps. Reduced-motion respected. ==================================================================== */ .bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } /* Layer 1: rotating gradient mesh */ .bg-fx__mesh { position: absolute; inset: -25%; background: radial-gradient(circle at 22% 28%, rgb(var(--accent) / 0.18) 0%, transparent 35%), radial-gradient(circle at 78% 72%, rgb(var(--accent-hot) / 0.12) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(var(--signal-cyan) / 0.05) 0%, transparent 45%); filter: blur(70px); animation: bgfx-mesh-rotate 90s linear infinite; will-change: transform; } @keyframes bgfx-mesh-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Layer 2: faint engineering grid masked to top-fade */ .bg-fx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(var(--border-hairline) / 0.10) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--border-hairline) / 0.10) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 70%); } /* Layer 3: HUD-style horizontal scanline drifting top-to-bottom */ .bg-fx__scanline { position: absolute; left: 0; right: 0; height: 2px; top: -2px; background: linear-gradient(90deg, transparent 0%, rgb(var(--accent) / 0.4) 30%, rgb(var(--accent-hot) / 0.7) 50%, rgb(var(--accent) / 0.4) 70%, transparent 100%); box-shadow: 0 0 18px rgb(var(--accent) / 0.6); animation: bgfx-scan 14s linear infinite; opacity: 0.55; will-change: transform; } @keyframes bgfx-scan { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } /* Layer 4: floating orbs (3 colored bokeh blobs) */ .bg-fx__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; animation: bgfx-orb-float 22s ease-in-out infinite; will-change: transform; } .bg-fx__orb--1 { width: 480px; height: 480px; top: -120px; left: -180px; background: radial-gradient(circle, rgb(var(--accent) / 0.7) 0%, transparent 70%); } .bg-fx__orb--2 { width: 600px; height: 600px; top: 30%; right: -240px; background: radial-gradient(circle, rgb(var(--accent-hot) / 0.55) 0%, transparent 70%); animation-delay: -7s; animation-duration: 26s; } .bg-fx__orb--3 { width: 360px; height: 360px; bottom: -120px; left: 40%; background: radial-gradient(circle, rgb(var(--signal-cyan) / 0.35) 0%, transparent 70%); animation-delay: -14s; animation-duration: 30s; } @keyframes bgfx-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.05); } 66% { transform: translate(-30px, 50px) scale(0.95); } } /* Layer 5: subtle noise grain (SVG-data-uri, perf-cheap) */ .bg-fx__noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.025; pointer-events: none; mix-blend-mode: overlay; } /* Layer 6: corner vignette */ .bg-fx__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgb(var(--bg-base) / 0.7) 100%); pointer-events: none; } /* Performance-mode gates (per masterplan section 9.11) */ [data-perf-mode="reduced"] .bg-fx__mesh { animation: none; } [data-perf-mode="reduced"] .bg-fx__scanline { display: none; } [data-perf-mode="reduced"] .bg-fx__orb { animation: none; opacity: 0.25; } [data-perf-mode="reduced"] .bg-fx__noise { display: none; } [data-perf-mode="minimum"] .bg-fx { display: none; } @media (prefers-reduced-motion: reduce) { .bg-fx__mesh, .bg-fx__scanline, .bg-fx__orb { animation: none !important; } } /* ==================================================================== 15. PERFORMANCE-MODE TOGGLE (UI control in nav) ==================================================================== */ .perf-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); background: rgb(var(--bg-surface) / 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; color: rgb(var(--text-secondary)); cursor: pointer; user-select: none; text-transform: uppercase; letter-spacing: 0.06em; transition: border-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard); } .perf-toggle:hover { border-color: rgb(var(--accent)); color: rgb(var(--text-primary)); } .perf-toggle__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--signal-lime)); box-shadow: 0 0 10px rgb(var(--signal-lime) / 0.8); animation: perf-pulse 2s ease-in-out infinite; } @keyframes perf-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.8); } } [data-perf-mode="balanced"] .perf-toggle__dot { background: rgb(var(--signal-cyan)); box-shadow: 0 0 10px rgb(var(--signal-cyan) / 0.8); } [data-perf-mode="reduced"] .perf-toggle__dot { background: rgb(var(--signal-amber)); box-shadow: 0 0 8px rgb(var(--signal-amber) / 0.7); animation: none; } [data-perf-mode="minimum"] .perf-toggle__dot { background: rgb(var(--text-muted)); box-shadow: none; animation: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.6); backdrop-filter: blur(12px); color: rgb(var(--text-secondary)); cursor: pointer; transition: border-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard); } .theme-toggle:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); } /* ==================================================================== 16. SPINNERS (Phase 1.6.5) Three visual variants, all gated by [data-perf-mode]. ==================================================================== */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgb(var(--text-muted) / 0.3); border-top-color: rgb(var(--accent)); border-radius: 50%; animation: spinner-rotate 0.8s linear infinite; vertical-align: middle; } .spinner--sm { width: 12px; height: 12px; border-width: 1.5px; } .spinner--lg { width: 24px; height: 24px; border-width: 3px; } .spinner--inverse { border-color: rgba(255, 255, 255, 0.3); border-top-color: white; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } .spinner-dots { display: inline-flex; gap: 4px; align-items: center; } .spinner-dots > span { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent)); animation: spinner-dots-bounce 1.2s ease-in-out infinite; } .spinner-dots > span:nth-child(2) { animation-delay: 0.15s; } .spinner-dots > span:nth-child(3) { animation-delay: 0.30s; } @keyframes spinner-dots-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1.1); opacity: 1; } } .spinner-pulse { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--accent)); animation: spinner-pulse-ring 1.4s ease-out infinite; box-shadow: 0 0 0 0 rgb(var(--accent) / 0.7); } @keyframes spinner-pulse-ring { 0% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0.7); } 70% { box-shadow: 0 0 0 10px rgb(var(--accent) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); } } [data-perf-mode="reduced"] .spinner { animation-duration: 1.6s; } [data-perf-mode="reduced"] .spinner-dots > span { animation: none; opacity: 0.7; } [data-perf-mode="reduced"] .spinner-pulse { animation: none; } [data-perf-mode="minimum"] .spinner, [data-perf-mode="minimum"] .spinner-dots, [data-perf-mode="minimum"] .spinner-pulse { animation: none !important; border-top-color: rgb(var(--text-muted)); } @media (prefers-reduced-motion: reduce) { .spinner, .spinner-dots > span, .spinner-pulse { animation: none !important; } } /* Wire:loading helpers */ [wire\:loading] { display: none; } [wire\:loading].inline { display: inline-block; } .is-loading { pointer-events: none; opacity: 0.65; cursor: wait; } .btn[disabled] .spinner, .btn.is-loading .spinner { margin-right: 8px; } /* ==================================================================== 17. TOP PROGRESS BAR (Livewire wire:navigate auto-uses this) ==================================================================== */ .top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; background: transparent; overflow: hidden; } .top-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, rgb(var(--accent)) 0%, rgb(var(--accent-hot)) 50%, rgb(var(--accent)) 100%); box-shadow: 0 0 12px rgb(var(--accent) / 0.6); transition: width var(--motion-base) var(--easing-decel), opacity var(--motion-fast) ease-out; } .top-progress.is-active .top-progress__bar { animation: top-progress-fly 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes top-progress-fly { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 90%; } } .top-progress.is-done .top-progress__bar { width: 100% !important; opacity: 0; transition: width 200ms ease-out, opacity 400ms 200ms ease-out; } /* ==================================================================== 18. TOAST NOTIFICATIONS (Alpine store-driven) ==================================================================== */ .toast-container { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 380px; width: calc(100% - 32px); } .toast { pointer-events: auto; background: rgb(var(--bg-surface) / 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgb(var(--border-hairline)); border-left: 3px solid rgb(var(--accent)); border-radius: var(--r-default); padding: 12px 14px 12px 16px; box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5); color: rgb(var(--text-primary)); font-size: 14px; line-height: 1.4; display: flex; align-items: flex-start; gap: 10px; animation: toast-in var(--motion-base) var(--easing-emphasized); will-change: transform, opacity; } .toast[data-leaving="true"] { animation: toast-out var(--motion-base) var(--easing-accel) forwards; } @keyframes toast-in { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; max-height: 200px; } to { transform: translateX(110%); opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; } } .toast--success { border-left-color: rgb(var(--signal-lime)); } .toast--info { border-left-color: rgb(var(--signal-cyan)); } .toast--warning { border-left-color: rgb(var(--signal-amber)); } .toast--error { border-left-color: rgb(var(--signal-crimson)); } .toast__icon { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .toast--success .toast__icon { color: rgb(var(--signal-lime)); } .toast--info .toast__icon { color: rgb(var(--signal-cyan)); } .toast--warning .toast__icon { color: rgb(var(--signal-amber)); } .toast--error .toast__icon { color: rgb(var(--signal-crimson)); } .toast__body { flex: 1; min-width: 0; } .toast__title { font-weight: 600; } .toast__message { color: rgb(var(--text-secondary)); font-size: 13px; margin-top: 2px; word-break: break-word; } .toast__close { background: transparent; border: 0; color: rgb(var(--text-muted)); cursor: pointer; padding: 0; margin-left: 8px; line-height: 1; transition: color var(--motion-fast) var(--easing-standard); } .toast__close:hover { color: rgb(var(--text-primary)); } [data-perf-mode="reduced"] .toast { animation-duration: 0ms; } [data-perf-mode="minimum"] .toast { animation: none; } @media (prefers-reduced-motion: reduce) { .toast { animation: none !important; } } /* ==================================================================== 19. PAGE TRANSITION (wire:navigate target) ==================================================================== */ [data-page-transition] { animation: page-fade-in var(--motion-base) var(--easing-emphasized); } @keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } [data-perf-mode="minimum"] [data-page-transition] { animation: none; } @media (prefers-reduced-motion: reduce) { [data-page-transition] { animation: none !important; } } /* ==================================================================== 20. LIVEWIRE OVERRIDES ==================================================================== */ /* Ensure Livewire's default progress bar uses our accent color when present */ :root { --livewire-progress-bar-color: rgb(var(--accent)); } /* Live region for screen readers (a11y) */ .live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Livewire single-root wrapper -- transparent, does not affect layout / stacking. */ .livewire-root { display: contents; } /* ==================================================================== 21. TV MODE (Phase 6.1, 3xl+ breakpoints) For workshop bay displays / large monitors. Larger fonts, simpler nav, visible focus rings for D-pad / remote keyboards. Auto-applied at >= 1920px. ==================================================================== */ @media (min-width: 1920px) { html { font-size: 18px; } /* scale entire type system */ body { line-height: 1.6; } .container { max-width: 1680px; } .text-base { font-size: 18px; line-height: 28px; } .text-lg { font-size: 22px; line-height: 32px; } .text-xl { font-size: 24px; line-height: 32px; } .btn { padding: 16px 28px; font-size: 18px; } .btn--lg { padding: 20px 36px; font-size: 22px; } .input, .select, .textarea { padding: 16px 18px; font-size: 18px; } .card { padding: 32px; } .appshell__nav { padding: 24px 40px; } .appshell__main { padding: 56px 40px; } } /* TV-mode opt-in via [data-tv="true"] on (set via JS for displays that report a remote-control user-agent or that the user manually chooses). */ html[data-tv="true"] :focus-visible { outline-width: 4px; outline-offset: 4px; } html[data-tv="true"] .btn:hover { transform: scale(1.02); } html[data-tv="true"] a:focus-visible, html[data-tv="true"] button:focus-visible { box-shadow: 0 0 0 4px rgb(var(--accent) / 0.4); } /* ==================================================================== 22. SCROLLBAR ==================================================================== */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: rgb(var(--bg-base)); } ::-webkit-scrollbar-thumb { background: rgb(var(--border-hairline)); border-radius: var(--r-pill); border: 3px solid rgb(var(--bg-base)); } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--border-strong)); } * { scrollbar-color: rgb(var(--border-hairline)) rgb(var(--bg-base)); } /* ==================================================================== 23. PRINT ==================================================================== */ @media print { .bg-fx, .top-progress, .toast-container, .perf-toggle, .theme-toggle, .appshell__nav .btn, button { display: none !important; } body { background: white !important; color: black !important; } a { color: black; text-decoration: underline; } } /* ==================================================================== 24. HERO -- editorial asymmetric grid (welcome page) ==================================================================== */ .hero { position: relative; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; } @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-10); } } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--text-secondary)); background: rgb(var(--bg-surface) / 0.4); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); margin-bottom: var(--space-6); } .hero__eyebrow-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: rgb(var(--accent)); box-shadow: 0 0 0 0 rgb(var(--accent) / 0.6); animation: hero-pulse 2.6s ease-out infinite; } @keyframes hero-pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0.55); } 70% { box-shadow: 0 0 0 10px rgb(var(--accent) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); } } .hero__headline { font-size: clamp(48px, 7.5vw, 92px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 var(--space-6); } .hero__headline-row { display: flex; align-items: center; gap: var(--space-4); } .hero__headline-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(var(--border-hairline)) 0%, rgb(var(--border-hairline) / 0) 100%); } .hero__headline-cursor { display: inline-block; width: 14px; height: 0.7em; background: rgb(var(--accent)); margin-left: var(--space-1); animation: hero-cursor 1s steps(1, end) infinite; } @keyframes hero-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .hero__lede { font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0 0 var(--space-8); } .hero__cta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-12); } .hero__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgb(var(--border-hairline)); margin: 0; } .hero__metrics dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-1); } .hero__metrics dd { margin: 0; font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; } .hero__metric-num { color: rgb(var(--text-primary)); } .hero__metric-unit { font-family: 'JetBrains Mono', monospace; font-size: 16px; color: rgb(var(--text-muted)); margin-left: 2px; } /* ==================================================================== 25. DYNO HUD CARD ==================================================================== */ .hud { background: linear-gradient(135deg, rgb(var(--bg-surface) / 0.85), rgb(var(--bg-surface-2) / 0.7)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); box-shadow: var(--shadow-elev); overflow: hidden; position: relative; } .hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgb(var(--accent) / 0.08), transparent 60%); pointer-events: none; } .hud__head { display: flex; align-items: baseline; gap: var(--space-8); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgb(var(--border-hairline)); font-family: 'JetBrains Mono', monospace; } .hud__head-meta { display: flex; flex-direction: column; gap: 2px; } .hud__head-meta--right { margin-left: auto; text-align: right; } .hud__head-label { font-size: 9px; letter-spacing: 0.2em; color: rgb(var(--text-muted)); } .hud__head-value { font-size: 12px; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; } .hud__head-value--accent { color: rgb(var(--accent)); font-weight: 600; } .hud__chart-wrap { padding: var(--space-2) var(--space-3) var(--space-1); position: relative; } .hud__chart { width: 100%; height: auto; display: block; } .hud__curve--tuned { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: hud-draw 2.6s cubic-bezier(.55,.1,.2,1) 0.25s forwards; } .hud__area { opacity: 0; animation: hud-fade 1.2s ease-out 2.6s forwards; } .hud__peak { opacity: 0; animation: hud-fade 0.6s ease-out 2.85s forwards; } .hud__peak-pulse { transform-origin: 515px 68px; animation: hud-peak-pulse 2.4s ease-out 3.1s infinite; } .hud__scanner line { animation: hud-scan 5s linear 0.5s infinite; } @keyframes hud-draw { to { stroke-dashoffset: 0; } } @keyframes hud-fade { to { opacity: 1; } } @keyframes hud-peak-pulse { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } @keyframes hud-scan { 0% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(520px); opacity: 0.5; } 50.1%{ transform: translateX(520px); opacity: 0; } 99.9%{ transform: translateX(0); opacity: 0; } 100% { transform: translateX(0); opacity: 0.5; } } .hud__foot { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-top: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.4); font-family: 'JetBrains Mono', monospace; } .hud__delta { display: flex; flex-direction: column; gap: 2px; } .hud__delta-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); } .hud__delta-value { font-size: 22px; font-variant-numeric: tabular-nums; color: rgb(var(--accent)); line-height: 1; letter-spacing: -0.02em; } .hud__delta-value--good { color: rgb(var(--signal-ok)); font-size: 13px; } .hud__delta-divider { width: 1px; height: 24px; background: rgb(var(--border-hairline)); } .hud__delta-divider--push { margin-left: auto; } .hud__delta--meta .hud__delta-label { letter-spacing: 0.14em; } /* Reduced motion + perf=minimum: kill HUD animations */ @media (prefers-reduced-motion: reduce) { .hero__eyebrow-dot, .hero__headline-cursor, .hud__curve--tuned, .hud__area, .hud__peak, .hud__peak-pulse, .hud__scanner line { animation: none !important; } .hud__curve--tuned { stroke-dasharray: 0; stroke-dashoffset: 0; } .hud__area, .hud__peak { opacity: 1; } } [data-perf="minimum"] .hero__eyebrow-dot, [data-perf="minimum"] .hero__headline-cursor, [data-perf="minimum"] .hud__scanner, [data-perf="minimum"] .hud__peak-pulse { animation: none !important; } [data-perf="minimum"] .hud__curve--tuned { stroke-dasharray: 0; stroke-dashoffset: 0; } [data-perf="minimum"] .hud__area, [data-perf="minimum"] .hud__peak { opacity: 1; } /* ==================================================================== 26. KPI CARD with mini-sparkline (dashboard widgets) ==================================================================== */ .kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 880px) { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .kpi { grid-template-columns: 1fr; } } .kpi__card { position: relative; background: rgb(var(--bg-surface) / 0.65); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); padding: var(--space-5); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; transition: border-color var(--motion-fast) var(--easing-standard), transform var(--motion-fast) var(--easing-standard); } .kpi__card:hover { border-color: rgb(var(--accent) / 0.4); } .kpi__card--accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent) / 0)); } .kpi__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); } .kpi__label-tag { font-size: 9px; padding: 1px 6px; border-radius: var(--r-tight); background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); letter-spacing: 0.08em; } .kpi__value { font-size: 36px; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: rgb(var(--text-primary)); } .kpi__value--accent { color: rgb(var(--accent)); } .kpi__unit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: rgb(var(--text-muted)); margin-left: 4px; } .kpi__sub { font-size: 12px; color: rgb(var(--text-secondary)); margin-top: var(--space-2); font-variant-numeric: tabular-nums; } .kpi__sub--good { color: rgb(var(--signal-ok)); } .kpi__sub--warn { color: rgb(var(--signal-amber)); } .kpi__spark { margin-top: var(--space-3); width: 100%; height: 32px; display: block; } .kpi__spark-line { fill: none; stroke: rgb(var(--accent)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .kpi__spark-fill { fill: rgb(var(--accent) / 0.15); } .kpi__spark-dot { fill: rgb(var(--accent)); stroke: rgb(var(--bg-surface)); stroke-width: 2; } /* ==================================================================== 27. ACTIVITY FEED ==================================================================== */ .activity { padding: 0; margin: 0; list-style: none; } .activity__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px dashed rgb(var(--border-hairline)); } .activity__item:last-child { border-bottom: 0; } .activity__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-secondary)); } .activity__icon--accent { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); } .activity__icon--cyan { color: rgb(var(--signal-cyan)); border-color: rgb(var(--signal-cyan) / 0.4); } .activity__icon--lime { color: rgb(var(--signal-lime)); border-color: rgb(var(--signal-lime) / 0.4); } .activity__icon--amber { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); } .activity__icon--crimson{ color: rgb(var(--signal-crimson)); border-color: rgb(var(--signal-crimson) / 0.4); } .activity__body { min-width: 0; } .activity__event { font-size: 13px; color: rgb(var(--text-primary)); font-weight: 500; word-break: break-word; } .activity__detail { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity__time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); white-space: nowrap; } /* ==================================================================== 28. RECENT TUNES (carousel-style horizontal cards) ==================================================================== */ .recent-tunes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .recent-tunes__card { position: relative; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: var(--space-4); background: rgb(var(--bg-surface) / 0.5); transition: border-color var(--motion-fast) var(--easing-standard), transform var(--motion-fast) var(--easing-standard); } .recent-tunes__card:hover { border-color: rgb(var(--accent) / 0.5); transform: translateY(-1px); } .recent-tunes__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .recent-tunes__source { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-tight); background: rgb(var(--bg-surface-2)); color: rgb(var(--text-secondary)); } .recent-tunes__source--match { color: rgb(var(--signal-ok)); } .recent-tunes__source--miss { color: rgb(var(--signal-amber)); } .recent-tunes__time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(var(--text-muted)); } .recent-tunes__name { font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); word-break: break-word; margin-bottom: var(--space-1); line-height: 1.3; } .recent-tunes__match { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--accent)); line-height: 1.4; } .recent-tunes__match--miss { color: rgb(var(--text-muted)); } .recent-tunes__sha { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(var(--text-muted)); margin-top: var(--space-2); letter-spacing: 0.02em; word-break: break-all; } /* ==================================================================== 29. SECTION HEADERS (reusable across dashboard panels) ==================================================================== */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgb(var(--border-hairline)); flex-wrap: wrap; } .section-head__title { font-size: 18px; font-weight: 600; margin: 0; color: rgb(var(--text-primary)); letter-spacing: -0.01em; } .section-head__hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--text-muted)); } /* ==================================================================== 30. DASHBOARD GRID -- two-column responsive ==================================================================== */ .dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); } @media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } } /* ==================================================================== 31. PRICING TIER CARDS -- distinct identity per tier ==================================================================== */ .tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; } @media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr; } } .tier { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); padding: var(--space-6); border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface) / 0.65); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); transition: transform var(--motion-base) var(--easing-standard), border-color var(--motion-base) var(--easing-standard), box-shadow var(--motion-base) var(--easing-standard); overflow: hidden; } .tier:hover { border-color: rgb(var(--accent) / 0.4); transform: translateY(-2px); box-shadow: var(--shadow-elev); } /* Standard tier: clean neutral */ .tier--standard { background: rgb(var(--bg-surface) / 0.55); } /* Premium tier: accent border, slightly elevated, "MOST POPULAR" highlight */ .tier--premium { border-color: rgb(var(--accent) / 0.6); box-shadow: var(--shadow-glow-accent); transform: translateY(-4px); background: linear-gradient(180deg, rgb(var(--accent) / 0.04), transparent 50%), rgb(var(--bg-surface) / 0.75); } .tier--premium::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, rgb(var(--accent-cool)), rgb(var(--accent)), rgb(var(--accent-hot))); } .tier--premium:hover { transform: translateY(-6px); } /* VIP tier: deep gradient, monochrome premium feel */ .tier--vip { background: linear-gradient(160deg, rgb(var(--bg-surface-2)) 0%, rgb(var(--bg-surface)) 60%); border-color: rgb(var(--border-strong)); } .tier--vip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgb(var(--accent-cool) / 0.08), transparent 50%); pointer-events: none; } .tier--vip > * { position: relative; z-index: 1; } .tier__most-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: rgb(var(--accent)); color: white; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; border-radius: var(--r-pill); box-shadow: var(--shadow-glow-accent); } .tier__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: rgb(var(--text-muted)); margin-bottom: var(--space-2); } .tier--standard .tier__eyebrow { color: rgb(var(--text-muted)); } .tier--premium .tier__eyebrow { color: rgb(var(--accent)); } .tier--vip .tier__eyebrow { color: rgb(var(--accent-cool)); } .tier__name { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-1); color: rgb(var(--text-primary)); } .tier__tagline { font-size: 13px; color: rgb(var(--text-secondary)); margin: 0 0 var(--space-5); } .tier__price-wrap { display: flex; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px dashed rgb(var(--border-hairline)); margin-bottom: var(--space-5); } .tier__price { font-size: 36px; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.025em; color: rgb(var(--text-primary)); } .tier__price-currency { font-size: 18px; color: rgb(var(--text-muted)); margin-right: 2px; font-family: 'JetBrains Mono', monospace; } .tier__price-period { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgb(var(--text-muted)); } .tier__price-tba { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: rgb(var(--text-muted)); letter-spacing: 0.08em; } .tier__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex-grow: 1; } .tier__features li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-2); padding: var(--space-2) 0; font-size: 13px; color: rgb(var(--text-secondary)); line-height: 1.4; } .tier__features li::before { content: "✓"; color: rgb(var(--signal-ok)); font-weight: 600; font-family: 'JetBrains Mono', monospace; } .tier--premium .tier__features li::before { color: rgb(var(--accent)); } .tier--vip .tier__features li::before { color: rgb(var(--accent-cool)); } .tier__features li[data-highlight="true"] { color: rgb(var(--text-primary)); font-weight: 500; } .tier__cta { display: block; text-align: center; } /* ==================================================================== 32. COMPARISON MATRIX (full feature grid below tier cards) ==================================================================== */ .compare-matrix-wrap { margin-top: var(--space-12); padding: var(--space-6); background: rgb(var(--bg-surface) / 0.4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); overflow-x: auto; } .compare-matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } .compare-matrix th, .compare-matrix td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid rgb(var(--border-hairline)); vertical-align: middle; } .compare-matrix thead th { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); border-bottom: 2px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.4); } .compare-matrix thead th.compare-matrix__col-premium { color: rgb(var(--accent)); } .compare-matrix thead th.compare-matrix__col-vip { color: rgb(var(--accent-cool)); } .compare-matrix tbody tr:hover { background: rgb(var(--bg-surface-2) / 0.4); } .compare-matrix__row-head { font-weight: 500; color: rgb(var(--text-primary)); } .compare-matrix__row-head-sub { display: block; font-size: 11px; color: rgb(var(--text-muted)); font-weight: 400; margin-top: 2px; font-family: 'JetBrains Mono', monospace; } .compare-matrix td.compare-matrix__cell { text-align: center; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: rgb(var(--text-secondary)); } .compare-matrix__yes { color: rgb(var(--signal-ok)); } .compare-matrix__no { color: rgb(var(--text-muted)); } .compare-matrix__star { color: rgb(var(--accent)); font-weight: 600; } .compare-matrix__group { background: rgb(var(--bg-surface-2) / 0.5); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--text-muted)); } .compare-matrix__group td { padding-top: var(--space-4); padding-bottom: var(--space-2); } /* ==================================================================== 33. RISK GAUGE -- circular SVG meter, 0-100 ==================================================================== */ .risk-gauge { position: relative; width: 180px; height: 180px; margin: 0 auto; } .risk-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .risk-gauge__track { stroke: rgb(var(--border-hairline)); fill: none; stroke-width: 14; } .risk-gauge__bar { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset var(--motion-slow) var(--easing-emphasized), stroke var(--motion-slow); } .risk-gauge__bar--lime { stroke: rgb(var(--signal-lime)); } .risk-gauge__bar--amber { stroke: rgb(var(--signal-amber)); } .risk-gauge__bar--crimson { stroke: rgb(var(--signal-crimson)); } .risk-gauge__readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .risk-gauge__value { font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; color: rgb(var(--text-primary)); } .risk-gauge__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-top: var(--space-1); } .risk-gauge__verdict { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: var(--space-1); } .risk-gauge__verdict--lime { color: rgb(var(--signal-lime)); } .risk-gauge__verdict--amber { color: rgb(var(--signal-amber)); } .risk-gauge__verdict--crimson { color: rgb(var(--signal-crimson)); } /* ==================================================================== 34. BYTE HEATMAP -- spatial visualization of where bytes changed ==================================================================== */ .byte-heatmap { --heatmap-cols: 16; display: grid; grid-template-columns: repeat(var(--heatmap-cols), 1fr); gap: 2px; padding: var(--space-3); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.4); } .byte-heatmap__block { aspect-ratio: 1; border-radius: 3px; background: rgb(var(--accent) / var(--density, 0.05)); position: relative; transition: transform var(--motion-fast) var(--easing-standard); cursor: help; } .byte-heatmap__block:hover { transform: scale(1.15); outline: 1px solid rgb(var(--accent)); z-index: 1; } .byte-heatmap__legend { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); } .byte-heatmap__legend-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, rgb(var(--accent) / 0.05), rgb(var(--accent) / 1)); } /* ==================================================================== 35. DYNO MINI -- SVG line chart for predicted dyno overlay ==================================================================== */ .dyno-mini { width: 100%; height: auto; aspect-ratio: 16 / 7; display: block; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.4); padding: var(--space-3); } .dyno-mini__grid line { stroke: rgb(var(--border-hairline)); stroke-width: 1; } .dyno-mini__grid--dashed line { stroke-dasharray: 3 4; } .dyno-mini__axis line { stroke: rgb(var(--text-muted) / 0.6); stroke-width: 1.25; } .dyno-mini__tick { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: rgb(var(--text-muted)); } .dyno-mini__before { fill: none; stroke: rgb(var(--text-muted)); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; } .dyno-mini__after { fill: none; stroke: rgb(var(--accent)); stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; } .dyno-mini__after-fill { fill: rgb(var(--accent) / 0.12); } .dyno-mini__legend { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; } .dyno-mini__legend-swatch { display: inline-block; width: 16px; height: 2px; margin-right: var(--space-2); vertical-align: middle; } .dyno-mini__legend-swatch--before { background: rgb(var(--text-muted)); } .dyno-mini__legend-swatch--after { background: rgb(var(--accent)); } /* ==================================================================== 36. HEX VIEWER -- offset / hex-bytes / ASCII columns ==================================================================== */ .hex-viewer { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.6; padding: var(--space-4); max-height: 70vh; overflow: auto; } .hex-viewer__row { display: grid; grid-template-columns: 110px 1fr 140px; gap: var(--space-3); border-radius: var(--r-tight); padding: 1px var(--space-1); } .hex-viewer__row:hover { background: rgb(var(--bg-surface-2) / 0.5); } .hex-viewer__row--active { background: rgb(var(--accent) / 0.08); box-shadow: inset 2px 0 0 rgb(var(--accent)); } .hex-viewer__offset { color: rgb(var(--text-muted)); } .hex-viewer__bytes { color: rgb(var(--text-primary)); letter-spacing: 0.02em; } .hex-viewer__ascii { color: rgb(var(--text-secondary)); white-space: pre; } .hex-viewer__byte--changed { color: rgb(var(--accent)); font-weight: 600; } /* ==================================================================== 37. WORKBENCH PANEL -- scaffolding for editor 3-column layout ==================================================================== */ .workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.85fr); gap: var(--space-4); min-height: 70vh; } @media (max-width: 1180px) { .workbench { grid-template-columns: 1fr; } } .panel { background: rgb(var(--bg-surface) / 0.65); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; display: flex; flex-direction: column; } .panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgb(var(--border-hairline)); } .panel__head-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); } .panel__head-title strong { color: rgb(var(--text-primary)); font-weight: 500; } .panel__head-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-secondary)); } .panel__body { flex: 1; overflow: auto; } .panel__body--padded { padding: var(--space-4); } /* Map list inside the workbench */ .map-list { padding: var(--space-2) 0; } .map-list__item { display: flex; width: 100%; text-align: left; padding: var(--space-2) var(--space-4); gap: var(--space-2); align-items: center; background: transparent; border: 0; border-left: 2px solid transparent; color: rgb(var(--text-primary)); cursor: pointer; font-family: inherit; font-size: 13px; transition: background var(--motion-fast) var(--easing-standard); } .map-list__item:hover { background: rgb(var(--bg-surface-2) / 0.5); } .map-list__item--active { background: rgb(var(--accent) / 0.08); border-left-color: rgb(var(--accent)); } .map-list__name { flex: 1; } .map-list__dims { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); } /* Map cell heatmap (6x6 / 8x8 etc.) */ .map-cells { display: grid; gap: 2px; font-family: 'JetBrains Mono', monospace; font-size: 10px; } .map-cells__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: white; cursor: pointer; transition: transform var(--motion-fast); } .map-cells__cell:hover { transform: scale(1.08); } /* Suggestion card */ .suggestion { background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: var(--space-3); margin-bottom: var(--space-3); transition: border-color var(--motion-fast) var(--easing-standard); } .suggestion:hover { border-color: rgb(var(--accent) / 0.4); } .suggestion__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; } .suggestion__title { font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); } .suggestion__why { font-size: 12px; color: rgb(var(--text-secondary)); line-height: 1.55; margin-bottom: var(--space-2); } .suggestion__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .suggestion__confidence { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); } .suggestion__confidence-num { color: rgb(var(--signal-cyan)); } /* ==================================================================== 38. RPM DIAL -- circular gauge with arc fill + tick marks ==================================================================== */ .rpm-cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); } .rpm-dial { position: relative; width: 100%; aspect-ratio: 1; max-width: 160px; margin: 0 auto; } .rpm-dial svg { width: 100%; height: 100%; display: block; transform: rotate(135deg); } .rpm-dial__track { fill: none; stroke: rgb(var(--border-hairline)); stroke-width: 8; stroke-linecap: round; } .rpm-dial__fill { fill: none; stroke: rgb(var(--accent)); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset var(--motion-slow) var(--easing-emphasized); } .rpm-dial__fill--cyan { stroke: rgb(var(--signal-cyan)); } .rpm-dial__fill--lime { stroke: rgb(var(--signal-lime)); } .rpm-dial__fill--amber { stroke: rgb(var(--signal-amber)); } .rpm-dial__ticks line { stroke: rgb(var(--text-muted) / 0.5); stroke-width: 1.5; stroke-linecap: round; } .rpm-dial__readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; font-family: 'JetBrains Mono', monospace; } .rpm-dial__value { font-size: 22px; line-height: 1; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .rpm-dial__unit { font-size: 10px; color: rgb(var(--text-muted)); letter-spacing: 0.14em; margin-top: 2px; } .rpm-dial__label { font-size: 9px; letter-spacing: 0.18em; color: rgb(var(--text-secondary)); text-transform: uppercase; margin-top: 4px; } /* ==================================================================== 39. FEATURE CARDS -- editorial layout with SVG illustration per feature ==================================================================== */ .features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } @media (max-width: 880px) { .features-grid { grid-template-columns: 1fr; } } .feature-card { display: flex; flex-direction: column; background: rgb(var(--bg-surface) / 0.65); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); padding: 0; backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; position: relative; transition: border-color var(--motion-base) var(--easing-standard), transform var(--motion-base) var(--easing-standard); } .feature-card:hover { border-color: rgb(var(--accent) / 0.5); transform: translateY(-2px); } .feature-card__art { height: 180px; background: linear-gradient(180deg, rgb(var(--accent) / 0.04), transparent 70%), rgb(var(--bg-surface-2) / 0.7); border-bottom: 1px solid rgb(var(--border-hairline)); position: relative; overflow: hidden; } .feature-card__art svg { width: 100%; height: 100%; display: block; } .feature-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .feature-card__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--accent)); margin-bottom: var(--space-2); } .feature-card--cyan .feature-card__eyebrow { color: rgb(var(--signal-cyan)); } .feature-card--lime .feature-card__eyebrow { color: rgb(var(--signal-lime)); } .feature-card__title { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--space-3); color: rgb(var(--text-primary)); } .feature-card__body p { font-size: 14px; color: rgb(var(--text-secondary)); line-height: 1.6; margin: 0 0 var(--space-4); flex: 1; } .feature-card__bullets { list-style: none; padding: 0; margin: 0; } .feature-card__bullets li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-2); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgb(var(--text-muted)); padding: 4px 0; } .feature-card__bullets li::before { content: "▸"; color: rgb(var(--accent)); } .feature-card--cyan .feature-card__bullets li::before { color: rgb(var(--signal-cyan)); } .feature-card--lime .feature-card__bullets li::before { color: rgb(var(--signal-lime)); } /* Feature illustration animations (paused for reduced motion) */ .feature-art__scan-1 { animation: feature-scan 3.6s ease-in-out 0s infinite; } .feature-art__scan-2 { animation: feature-scan 3.6s ease-in-out 0.2s infinite; } .feature-art__scan-3 { animation: feature-scan 3.6s ease-in-out 0.4s infinite; } @keyframes feature-scan { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(120px); opacity: 1; } } .feature-art__diff-marker { animation: feature-blink 2s ease-in-out infinite; } @keyframes feature-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .feature-art__cursor { animation: feature-cursor 1.2s steps(1) infinite; } @keyframes feature-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .feature-art__scan-1, .feature-art__scan-2, .feature-art__scan-3, .feature-art__diff-marker, .feature-art__cursor { animation: none !important; } } [data-perf="minimum"] .feature-art__scan-1, [data-perf="minimum"] .feature-art__scan-2, [data-perf="minimum"] .feature-art__scan-3, [data-perf="minimum"] .feature-art__diff-marker, [data-perf="minimum"] .feature-art__cursor { animation: none !important; } /* ==================================================================== 40. STAGE DEMO -- interactive stage-selector with dyno curve preview ==================================================================== */ .stage-demo { background: linear-gradient(135deg, rgb(var(--bg-surface) / 0.85), rgb(var(--bg-surface-2) / 0.7)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); box-shadow: var(--shadow-elev); overflow: hidden; position: relative; } .stage-demo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, rgb(var(--accent) / 0.06), transparent 60%); pointer-events: none; } .stage-demo__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgb(var(--border-hairline)); flex-wrap: wrap; } .stage-demo__head-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); } .stage-demo__tabs { display: inline-flex; gap: 2px; padding: 3px; background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); } .stage-demo__tab { padding: 6px var(--space-4); background: transparent; border: 0; border-radius: var(--r-pill); color: rgb(var(--text-secondary)); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: all var(--motion-fast) var(--easing-standard); } .stage-demo__tab:hover { color: rgb(var(--text-primary)); } .stage-demo__tab[aria-pressed="true"] { background: rgb(var(--accent)); color: white; box-shadow: var(--shadow-glow-accent); } .stage-demo__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; } @media (max-width: 880px) { .stage-demo__body { grid-template-columns: 1fr; } } .stage-demo__chart-wrap { padding: var(--space-5); } .stage-demo__chart { width: 100%; height: auto; display: block; aspect-ratio: 16 / 8; } .stage-demo__chart .stage-curve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: d var(--motion-slow) var(--easing-emphasized), stroke var(--motion-slow); } .stage-demo__chart .stage-curve--stock { stroke: rgb(var(--text-muted)); stroke-width: 2; stroke-dasharray: 5 5; } .stage-demo__chart .stage-curve--active { stroke: rgb(var(--accent)); filter: drop-shadow(0 0 8px rgb(var(--accent) / 0.5)); } .stage-demo__chart .stage-area--active { fill: rgb(var(--accent) / 0.12); transition: d var(--motion-slow) var(--easing-emphasized); } .stage-demo__readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(var(--border-hairline)); border-left: 1px solid rgb(var(--border-hairline)); } @media (max-width: 880px) { .stage-demo__readouts { border-left: 0; border-top: 1px solid rgb(var(--border-hairline)); } } .stage-demo__readouts > div { background: rgb(var(--bg-surface)); padding: var(--space-5); text-align: left; } .stage-demo__readout-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-2); } .stage-demo__readout-value { font-size: 32px; line-height: 1; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-family: 'Inter Display', 'Inter', system-ui, sans-serif; font-weight: 600; transition: color var(--motion-fast); } .stage-demo__readout-delta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgb(var(--accent)); margin-top: 4px; } /* ==================================================================== 41. SETTINGS SHELL -- enterprise SaaS layout (sidebar + content) ==================================================================== */ .settings-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-top: var(--space-6); } @media (max-width: 980px) { .settings-shell { grid-template-columns: 1fr; } } /* Page-header strip above the shell */ .settings-headstrip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid rgb(var(--border-hairline)); flex-wrap: wrap; } .settings-headstrip__left { min-width: 0; } .settings-headstrip__crumbs { display: flex; gap: var(--space-2); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-2); } .settings-headstrip__crumbs a { color: rgb(var(--text-muted)); text-decoration: none; } .settings-headstrip__crumbs a:hover { color: rgb(var(--accent)); } .settings-headstrip__crumbs span { color: rgb(var(--text-muted) / 0.5); } .settings-headstrip__title { font-size: 32px; line-height: 1.05; letter-spacing: -0.025em; margin: 0; } .settings-headstrip__user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); background: rgb(var(--bg-surface) / 0.5); } .settings-headstrip__avatar { width: 32px; height: 32px; border-radius: var(--r-pill); background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-hot))); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .settings-headstrip__user-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .settings-headstrip__user-email { font-size: 13px; color: rgb(var(--text-primary)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .settings-headstrip__user-tier { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--accent)); } /* Sidebar nav */ .settings-nav { position: sticky; top: var(--space-6); background: rgb(var(--bg-surface) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); padding: var(--space-3); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .settings-nav__group-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); padding: var(--space-3) var(--space-3) var(--space-2); } .settings-nav__item { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: var(--r-default); color: rgb(var(--text-secondary)); cursor: pointer; width: 100%; text-align: left; font-family: inherit; font-size: 14px; transition: background var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard); text-decoration: none; } .settings-nav__item:hover { background: rgb(var(--bg-surface-2) / 0.6); color: rgb(var(--text-primary)); } .settings-nav__item--active { background: rgb(var(--accent) / 0.1); color: rgb(var(--accent)); } .settings-nav__item--active .settings-nav__item-icon { color: rgb(var(--accent)); } .settings-nav__item-icon { color: rgb(var(--text-muted)); transition: color var(--motion-fast); } .settings-nav__item-icon svg { display: block; width: 18px; height: 18px; } .settings-nav__item-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 2px 6px; border-radius: var(--r-tight); background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); letter-spacing: 0.1em; } .settings-nav__divider { height: 1px; background: rgb(var(--border-hairline)); margin: var(--space-2) var(--space-3); } /* Content panel */ .settings-panel { background: rgb(var(--bg-surface) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; } .settings-panel__head { padding: var(--space-6); border-bottom: 1px solid rgb(var(--border-hairline)); } .settings-panel__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--accent)); margin-bottom: var(--space-2); } .settings-panel__title { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: rgb(var(--text-primary)); } .settings-panel__lede { font-size: 14px; color: rgb(var(--text-secondary)); margin: 0; line-height: 1.55; max-width: 60ch; } .settings-panel__body { padding: var(--space-6); } .settings-panel__body--tight { padding: var(--space-4) var(--space-6); } /* Form-row pattern: 240px label gutter | flex control */ .form-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid rgb(var(--border-hairline)); } .form-row:last-child { border-bottom: 0; padding-bottom: 0; } .form-row:first-child { padding-top: 0; } @media (max-width: 720px) { .form-row { grid-template-columns: 1fr; gap: var(--space-3); } } .form-row__label { font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); line-height: 1.3; margin-bottom: var(--space-1); } .form-row__help { font-size: 12px; color: rgb(var(--text-muted)); line-height: 1.5; margin-top: var(--space-1); } .form-row__control { min-width: 0; } /* ==================================================================== 42. THEME PICKER -- rich tile with mini-UI preview per theme ==================================================================== */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); } .theme-tile { cursor: pointer; border: 1.5px solid rgb(var(--border-hairline)); border-radius: var(--r-default); overflow: hidden; background: rgb(var(--bg-surface)); transition: border-color var(--motion-fast) var(--easing-standard), transform var(--motion-fast) var(--easing-standard); display: flex; flex-direction: column; } .theme-tile:hover { border-color: rgb(var(--accent) / 0.5); transform: translateY(-1px); } .theme-tile--selected { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18); } .theme-tile__preview { aspect-ratio: 16 / 10; position: relative; overflow: hidden; } .theme-tile__preview-frame { position: absolute; inset: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; } /* Mini UI elements inside preview */ .theme-tile__mini-bar { height: 6px; width: 70%; border-radius: 3px; } .theme-tile__mini-bar--short { width: 35%; } .theme-tile__mini-card { flex: 1; border-radius: 4px; margin-top: 4px; padding: 6px; display: flex; align-items: flex-end; justify-content: space-between; } .theme-tile__mini-button { width: 28%; height: 8px; border-radius: 4px; } .theme-tile__mini-spark { width: 36%; height: 14px; border-radius: 2px; } /* Theme-specific previews -- pure CSS, NO JS, NO inline color hardcoding except literals matching the theme tokens */ .theme-tile[data-theme-key="glass"] .theme-tile__preview { background: linear-gradient(135deg, #08080C, #13131C); } .theme-tile[data-theme-key="glass"] .theme-tile__mini-bar { background: rgb(240 240 245 / 0.85); } .theme-tile[data-theme-key="glass"] .theme-tile__mini-bar--short { background: rgb(240 240 245 / 0.4); } .theme-tile[data-theme-key="glass"] .theme-tile__mini-card { background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); } .theme-tile[data-theme-key="glass"] .theme-tile__mini-button { background: #FF6A00; } .theme-tile[data-theme-key="glass"] .theme-tile__mini-spark { background: linear-gradient(90deg, transparent, #FF6A00); border-radius: 1px; opacity: 0.85; } .theme-tile[data-theme-key="light"] .theme-tile__preview { background: linear-gradient(135deg, #FAFAFC, #F0F0F4); } .theme-tile[data-theme-key="light"] .theme-tile__mini-bar { background: rgb(15 23 42 / 0.85); } .theme-tile[data-theme-key="light"] .theme-tile__mini-bar--short { background: rgb(15 23 42 / 0.4); } .theme-tile[data-theme-key="light"] .theme-tile__mini-card { background: white; border: 1px solid #E5E5EA; box-shadow: 0 2px 8px rgb(0 0 0 / 0.04); } .theme-tile[data-theme-key="light"] .theme-tile__mini-button { background: #FF6A00; } .theme-tile[data-theme-key="light"] .theme-tile__mini-spark { background: linear-gradient(90deg, transparent, #FF6A00); } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__preview { background: linear-gradient(135deg, #121212, #1A1A1A); } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__mini-bar { background: #FFFFFF; } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__mini-bar--short { background: #B3B3B3; } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__mini-card { background: #282828; border: 1px solid #404040; } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__mini-button { background: #FF6A00; } .theme-tile[data-theme-key="spotify-dark"] .theme-tile__mini-spark { background: linear-gradient(90deg, transparent, #FF6A00); } .theme-tile__meta { padding: var(--space-3); border-top: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface)); } .theme-tile__name { font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .theme-tile__check { width: 18px; height: 18px; border-radius: var(--r-pill); border: 1.5px solid rgb(var(--border-hairline)); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .theme-tile--selected .theme-tile__check { background: rgb(var(--accent)); border-color: rgb(var(--accent)); } .theme-tile__check svg { width: 10px; height: 10px; opacity: 0; transition: opacity var(--motion-fast); } .theme-tile--selected .theme-tile__check svg { opacity: 1; } .theme-tile__desc { font-size: 11px; color: rgb(var(--text-muted)); line-height: 1.4; } /* ==================================================================== 43. PERF-MODE PICKER -- horizontal segmented control ==================================================================== */ .perf-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } @media (max-width: 720px) { .perf-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .perf-segment { cursor: pointer; border: 1.5px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: var(--space-3) var(--space-4); background: rgb(var(--bg-surface) / 0.5); transition: border-color var(--motion-fast), background var(--motion-fast); text-align: left; } .perf-segment:hover { border-color: rgb(var(--accent) / 0.5); } .perf-segment--selected { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.06); } .perf-segment__label { font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); } .perf-segment__bars { display: flex; gap: 2px; align-items: flex-end; } .perf-segment__bar { width: 4px; border-radius: 1px; background: rgb(var(--text-muted) / 0.3); } .perf-segment__bar--on { background: rgb(var(--accent)); } .perf-segment__desc { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); line-height: 1.45; } /* ==================================================================== 44. SWITCH (toggle) component ==================================================================== */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch__track { position: absolute; inset: 0; border-radius: var(--r-pill); background: rgb(var(--border-hairline)); transition: background var(--motion-fast) var(--easing-standard); cursor: pointer; } .switch__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r-pill); background: rgb(var(--text-primary)); transition: transform var(--motion-fast) var(--easing-emphasized); } .switch input:checked ~ .switch__track { background: rgb(var(--accent)); } .switch input:checked ~ .switch__track::before { transform: translateX(20px); background: white; } .switch input:disabled ~ .switch__track { opacity: 0.4; cursor: not-allowed; } /* Channel-row pattern (label + tier-tag + switch) */ .channel-row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px dashed rgb(var(--border-hairline)); } .channel-row:last-child { border-bottom: 0; } .channel-row__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); color: rgb(var(--text-secondary)); } .channel-row__icon svg { width: 16px; height: 16px; } .channel-row__name { font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); } .channel-row__sub { font-size: 12px; color: rgb(var(--text-muted)); margin-top: 2px; } .channel-row__lock { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: var(--r-tight); background: rgb(var(--bg-surface-2)); color: rgb(var(--text-muted)); letter-spacing: 0.1em; } /* ==================================================================== 45. SAVE BAR -- floating dirty-state toolbar ==================================================================== */ .save-bar { position: sticky; bottom: var(--space-4); z-index: var(--z-overlay); margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); box-shadow: var(--shadow-elev); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .save-bar--dirty { border-color: rgb(var(--accent)); box-shadow: 0 0 0 1px rgb(var(--accent)), var(--shadow-elev); } .save-bar__status { flex: 1; display: flex; align-items: center; gap: var(--space-3); } .save-bar__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: rgb(var(--text-muted)); } .save-bar--dirty .save-bar__dot { background: rgb(var(--accent)); animation: hero-pulse 2s ease-out infinite; } .save-bar__text { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgb(var(--text-secondary)); letter-spacing: 0.06em; } /* ==================================================================== 46. WORK HERO -- dashboard hero with drop-zone (left) + snapshot (right) ==================================================================== */ .work-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); } @media (max-width: 1080px) { .work-hero { grid-template-columns: 1fr; } } .work-hero__main { min-width: 0; } .work-hero__side { min-width: 0; } /* ==================================================================== 47. DROPZONE -- the file-drop work surface ==================================================================== */ .dropzone { position: relative; min-height: 340px; border-radius: var(--r-card); background: linear-gradient(135deg, rgb(var(--bg-surface) / 0.85), rgb(var(--bg-surface-2) / 0.7)); border: 1.5px dashed rgb(var(--border-hairline)); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; transition: border-color var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard), transform var(--motion-base) var(--easing-standard); } .dropzone:hover { border-color: rgb(var(--accent) / 0.6); } .dropzone__hit { position: absolute; inset: 0; cursor: pointer; z-index: 1; } .dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone__inner { position: relative; z-index: 2; padding: var(--space-8) var(--space-6); max-width: 540px; width: 100%; pointer-events: none; } .dropzone__inner > * { pointer-events: auto; } .dropzone__icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); color: rgb(var(--accent)); border: 1.5px solid rgb(var(--accent) / 0.35); border-radius: var(--r-pill); background: rgb(var(--accent) / 0.06); transition: transform var(--motion-base) var(--easing-emphasized); } .dropzone__icon svg { width: 32px; height: 32px; } .dropzone__title { font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-2); color: rgb(var(--text-primary)); } .dropzone__hint { font-size: 14px; line-height: 1.6; color: rgb(var(--text-secondary)); max-width: 460px; margin: 0 auto var(--space-4); } .dropzone__formats { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-3); } .dropzone__formats span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; padding: 3px 9px; border-radius: var(--r-tight); background: rgb(var(--bg-surface-2)); color: rgb(var(--text-muted)); border: 1px solid rgb(var(--border-hairline)); } .dropzone__cap { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); letter-spacing: 0.06em; } .dropzone__spinner-wrap { display: flex; justify-content: center; margin-bottom: var(--space-4); } .dropzone__inner--busy .dropzone__title { color: rgb(var(--text-primary)); } .dropzone__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--r-pill); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-3); } .dropzone__badge svg { width: 14px; height: 14px; } .dropzone__badge--ok { background: rgb(var(--signal-ok) / 0.12); color: rgb(var(--signal-ok)); border: 1px solid rgb(var(--signal-ok) / 0.4); } .dropzone__badge--miss { background: rgb(var(--signal-amber) / 0.12); color: rgb(var(--signal-amber)); border: 1px solid rgb(var(--signal-amber) / 0.4); } .dropzone__badge--error { background: rgb(var(--signal-crimson) / 0.12); color: rgb(var(--signal-crimson)); border: 1px solid rgb(var(--signal-crimson) / 0.4); } .dropzone__detail { font-size: 13px; color: rgb(var(--text-secondary)); margin-bottom: var(--space-4); display: inline-flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .dropzone__actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } /* drag-over visual */ .dropzone--drag { border-color: rgb(var(--accent)); background: linear-gradient(135deg, rgb(var(--accent) / 0.08), rgb(var(--bg-surface) / 0.8)); transform: scale(1.005); } .dropzone--drag .dropzone__icon { transform: scale(1.08); } /* state-driven background tints */ .dropzone--matched { border-color: rgb(var(--signal-ok) / 0.55); border-style: solid; } .dropzone--no_match { border-color: rgb(var(--signal-amber) / 0.55); border-style: solid; } .dropzone--error { border-color: rgb(var(--signal-crimson) / 0.55); border-style: solid; } .dropzone--matching, .dropzone--uploading { border-style: solid; } /* Animated accent pulse along the bottom edge while idle */ .dropzone__pulse { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgb(var(--accent) / 0) 0%, rgb(var(--accent) / 0.7) 50%, rgb(var(--accent) / 0) 100%); animation: dropzone-pulse 3.6s ease-in-out infinite; pointer-events: none; z-index: 0; } .dropzone--matching .dropzone__pulse, .dropzone--matched .dropzone__pulse, .dropzone--no_match .dropzone__pulse, .dropzone--error .dropzone__pulse { animation: none; opacity: 0; } @keyframes dropzone-pulse { 0%, 100% { transform: scaleX(0.2); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dropzone__pulse { animation: none !important; opacity: 0.4; } } [data-perf="minimum"] .dropzone__pulse { animation: none !important; opacity: 0.4; } /* Hidden state helper for the wire:loading.flex inner */ [wire\:loading][wire\:target="file"] { display: none; } /* ==================================================================== 48. SNAPSHOT -- live library counters next to the drop zone ==================================================================== */ .snapshot { background: rgb(var(--bg-surface) / 0.65); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); padding: var(--space-5); height: 100%; display: flex; flex-direction: column; } .snapshot__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .snapshot__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: rgb(var(--text-muted)); margin-bottom: 4px; } .snapshot__title { font-size: 18px; line-height: 1.1; letter-spacing: -0.015em; color: rgb(var(--text-primary)); } .snapshot__source-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; padding: 2px 8px; border-radius: var(--r-tight); } .snapshot__source-tag--live { background: rgb(var(--signal-ok) / 0.12); color: rgb(var(--signal-ok)); border: 1px solid rgb(var(--signal-ok) / 0.4); } .snapshot__source-tag--local { background: rgb(var(--bg-surface-2)); color: rgb(var(--text-muted)); border: 1px solid rgb(var(--border-hairline)); } .snapshot__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(var(--border-hairline)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); overflow: hidden; margin-bottom: var(--space-5); } .snapshot__metric { background: rgb(var(--bg-surface)); padding: var(--space-3) var(--space-4); } .snapshot__metric-value { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: rgb(var(--text-primary)); } .snapshot__metric-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: rgb(var(--text-muted)); text-transform: uppercase; margin-top: var(--space-1); } .snapshot__list { flex: 1; margin-bottom: var(--space-4); } .snapshot__list-head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid rgb(var(--border-hairline)); } .snapshot__list-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dashed rgb(var(--border-hairline)); font-size: 13px; align-items: baseline; } .snapshot__list-row:last-child { border-bottom: 0; } .snapshot__list-veh { color: rgb(var(--text-primary)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snapshot__list-ecu { font-size: 11px; color: rgb(var(--text-secondary)); white-space: nowrap; } .snapshot__list-empty { font-size: 12px; color: rgb(var(--text-muted)); padding: var(--space-3) 0; font-style: italic; } .snapshot__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-default); background: rgb(var(--accent) / 0.08); color: rgb(var(--accent)); text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid rgb(var(--accent) / 0.3); transition: background var(--motion-fast), border-color var(--motion-fast); } .snapshot__cta:hover { background: rgb(var(--accent) / 0.14); border-color: rgb(var(--accent) / 0.5); } /* ==================================================================== 49. MANUAL SEARCH -- typeahead under the drop zone ==================================================================== */ .manual-search { position: relative; } .manual-search__label { display: block; margin-bottom: var(--space-2); } .manual-search__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: rgb(var(--text-muted)); } .manual-search__bar { position: relative; display: flex; align-items: center; background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); padding: 0 var(--space-3); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .manual-search__bar:focus-within { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18); } .manual-search__icon { color: rgb(var(--text-muted)); display: flex; align-items: center; flex-shrink: 0; margin-right: var(--space-2); } .manual-search__icon svg { width: 18px; height: 18px; } .manual-search__input { flex: 1; background: transparent; border: 0; outline: 0; color: rgb(var(--text-primary)); font-family: inherit; font-size: 15px; padding: 12px 0; min-width: 0; } .manual-search__input::placeholder { color: rgb(var(--text-muted)); } .manual-search__spinner { display: flex; align-items: center; padding: 0 var(--space-2); } .manual-search__clear { background: transparent; border: 0; cursor: pointer; color: rgb(var(--text-muted)); padding: var(--space-2); border-radius: var(--r-pill); transition: background var(--motion-fast), color var(--motion-fast); display: flex; align-items: center; } .manual-search__clear:hover { background: rgb(var(--bg-surface-2)); color: rgb(var(--text-primary)); } .manual-search__results { margin-top: var(--space-3); background: rgb(var(--bg-surface) / 0.85); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-elev); } .manual-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px dashed rgb(var(--border-hairline)); text-decoration: none; color: inherit; transition: background var(--motion-fast); } .manual-search__row:last-child { border-bottom: 0; } .manual-search__row:hover { background: rgb(var(--accent) / 0.06); } .manual-search__row-main { min-width: 0; } .manual-search__row-name { color: rgb(var(--text-primary)); font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manual-search__row-info { color: rgb(var(--text-muted)); font-size: 12px; margin-top: 2px; font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manual-search__row-side { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .manual-search__stage { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; padding: 2px 8px; border-radius: var(--r-tight); background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-secondary)); } .manual-search__stage--original { color: rgb(var(--signal-cyan)); border-color: rgb(var(--signal-cyan) / 0.4); } .manual-search__stage--stage-1 { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); } .manual-search__stage--stage-2 { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); } .manual-search__stage--stage-3, .manual-search__stage--stage-4 { color: rgb(var(--signal-crimson)); border-color: rgb(var(--signal-crimson) / 0.4); } .manual-search__year { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); } .manual-search__msg { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-default); font-size: 13px; } .manual-search__msg--empty { color: rgb(var(--text-muted)); border: 1px dashed rgb(var(--border-hairline)); } .manual-search__msg--error { color: rgb(var(--signal-crimson)); background: rgb(var(--signal-crimson) / 0.06); border: 1px solid rgb(var(--signal-crimson) / 0.3); } /* ==================================================================== 50. FILE DETAIL PAGE ==================================================================== */ .file-detail { max-width: 1240px; } .file-detail__crumbs { display: flex; gap: var(--space-2); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: var(--space-3); } .file-detail__crumbs a { color: rgb(var(--text-muted)); text-decoration: none; } .file-detail__crumbs a:hover { color: rgb(var(--accent)); } .file-detail__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-5); margin-bottom: var(--space-6); border-bottom: 1px solid rgb(var(--border-hairline)); } .file-detail__title { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--space-2); color: rgb(var(--text-primary)); } .file-detail__sub { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgb(var(--text-secondary)); display: flex; gap: var(--space-3); flex-wrap: wrap; } .file-detail__sub span { display: inline-flex; align-items: center; gap: 4px; } .file-detail__hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); } @media (max-width: 980px) { .file-detail__hero { grid-template-columns: 1fr; } } /* Stats column */ .detail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(var(--border-hairline)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); overflow: hidden; } .detail-stat { background: rgb(var(--bg-surface) / 0.85); padding: var(--space-5) var(--space-6); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .detail-stat__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: rgb(var(--text-muted)); text-transform: uppercase; margin-bottom: var(--space-2); } .detail-stat__value { font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: rgb(var(--text-primary)); } .detail-stat__value--accent { color: rgb(var(--accent)); } .detail-stat__unit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: rgb(var(--text-muted)); margin-left: 4px; } .detail-stat__delta { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgb(var(--signal-ok)); margin-top: var(--space-2); } .detail-stat__delta--accent { color: rgb(var(--accent)); } .detail-meta { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); background: rgb(var(--bg-surface) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); margin-bottom: var(--space-6); } .detail-meta__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--text-muted)); padding: 6px 0; } .detail-meta__value { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgb(var(--text-primary)); padding: 6px 0; word-break: break-word; border-bottom: 1px dashed rgb(var(--border-hairline)); } .detail-meta__value:last-child, .detail-meta__label:last-of-type ~ .detail-meta__value { border-bottom: 0; } .detail-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .detail-file { border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); padding: var(--space-4); background: rgb(var(--bg-surface) / 0.5); transition: border-color var(--motion-fast), transform var(--motion-fast); } .detail-file:hover { border-color: rgb(var(--accent) / 0.5); transform: translateY(-1px); } .detail-file__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); } .detail-file__stage { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; padding: 3px 8px; border-radius: var(--r-tight); } .detail-file__name { font-size: 13px; color: rgb(var(--text-primary)); margin-bottom: var(--space-2); word-break: break-word; } .detail-file__cta { width: 100%; } /* ==================================================================== 51. DEVICE NOTICE (login) + DEVICE-LOCK BANNER (post-login) ==================================================================== */ .device-notice { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid rgb(var(--accent) / 0.3); background: linear-gradient(135deg, rgb(var(--accent) / 0.04), rgb(var(--bg-surface-2) / 0.4)); border-radius: var(--r-default); margin-bottom: var(--space-5); } .device-notice__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: rgb(var(--accent)); background: rgb(var(--accent) / 0.1); border-radius: var(--r-default); } .device-notice__icon svg { width: 18px; height: 18px; } .device-notice__body { min-width: 0; } .device-notice__title { display: block; font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); margin-bottom: 2px; } .device-notice__text { font-size: 12px; line-height: 1.55; color: rgb(var(--text-secondary)); margin: 0; } /* Soft-block banner shown when the user hit the 2-device cap. */ .device-lock-banner { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--r-card); border: 1px solid rgb(var(--signal-amber) / 0.5); background: linear-gradient(135deg, rgb(var(--signal-amber) / 0.08), rgb(var(--bg-surface-2) / 0.6)); margin-bottom: var(--space-5); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .device-lock-banner__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: rgb(var(--signal-amber)); background: rgb(var(--signal-amber) / 0.12); border-radius: var(--r-default); } .device-lock-banner__icon svg { width: 22px; height: 22px; } .device-lock-banner__body { flex: 1; min-width: 0; } .device-lock-banner__title { font-size: 15px; font-weight: 600; color: rgb(var(--text-primary)); margin-bottom: var(--space-1); } .device-lock-banner__text { font-size: 13px; line-height: 1.6; color: rgb(var(--text-secondary)); margin: 0 0 var(--space-3); } .device-lock-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ==================================================================== 52. DEVICE LIST (Settings -> Privacy) ==================================================================== */ .device-list { background: rgb(var(--bg-surface) / 0.55); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); overflow: hidden; } .device-list__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid rgb(var(--border-hairline)); flex-wrap: wrap; } .device-list__eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: 4px; } .device-list__title { font-size: 20px; line-height: 1.1; letter-spacing: -0.015em; color: rgb(var(--text-primary)); } .device-list__counter { display: inline-flex; align-items: baseline; gap: 6px; font-family: 'JetBrains Mono', monospace; color: rgb(var(--text-secondary)); font-size: 14px; } .device-list__counter-active { color: rgb(var(--accent)); font-size: 22px; font-weight: 600; } .device-list__counter-sep { color: rgb(var(--text-muted)); font-size: 18px; } .device-list__counter-limit { font-size: 18px; color: rgb(var(--text-secondary)); } .device-list__counter-pending { margin-left: var(--space-3); font-size: 11px; padding: 2px 8px; border-radius: var(--r-tight); background: rgb(var(--signal-amber) / 0.12); color: rgb(var(--signal-amber)); border: 1px solid rgb(var(--signal-amber) / 0.4); letter-spacing: 0.08em; } .device-list__flash { margin: 0 var(--space-5); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-default); font-size: 13px; } .device-list__flash--ok { background: rgb(var(--signal-ok) / 0.08); color: rgb(var(--signal-ok)); border: 1px solid rgb(var(--signal-ok) / 0.4); } .device-list__flash--info { background: rgb(var(--signal-cyan) / 0.08); color: rgb(var(--signal-cyan)); border: 1px solid rgb(var(--signal-cyan) / 0.4); } .device-list__flash--error { background: rgb(var(--signal-crimson) / 0.08); color: rgb(var(--signal-crimson)); border: 1px solid rgb(var(--signal-crimson) / 0.4); } .device-list__empty { padding: var(--space-6); text-align: center; color: rgb(var(--text-muted)); font-size: 13px; } .device-list__rows { list-style: none; padding: 0; margin: 0; } .device-list__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px dashed rgb(var(--border-hairline)); transition: background var(--motion-fast); } .device-list__row:last-child { border-bottom: 0; } .device-list__row--this { background: rgb(var(--accent) / 0.04); box-shadow: inset 3px 0 0 rgb(var(--accent)); } .device-list__row--revoked { opacity: 0.55; } .device-list__row-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-default); background: rgb(var(--bg-surface-2)); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-secondary)); } .device-list__row--active .device-list__row-icon { color: rgb(var(--signal-ok)); border-color: rgb(var(--signal-ok) / 0.4); } .device-list__row--pending .device-list__row-icon { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); } .device-list__row--revoked .device-list__row-icon { color: rgb(var(--text-muted)); } .device-list__row-icon svg { width: 18px; height: 18px; } .device-list__row-main { min-width: 0; } .device-list__row-label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); margin-bottom: 4px; } .device-list__row-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); } .device-list__row-meta-sep { color: rgb(var(--text-muted) / 0.5); } .device-list__row-ua { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgb(var(--text-muted) / 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .device-list__chip { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; padding: 2px 7px; border-radius: var(--r-tight); border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2)); color: rgb(var(--text-secondary)); } .device-list__chip--this { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); background: rgb(var(--accent) / 0.08); } .device-list__chip--active { color: rgb(var(--signal-ok)); border-color: rgb(var(--signal-ok) / 0.4); background: rgb(var(--signal-ok) / 0.08); } .device-list__chip--pending { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); background: rgb(var(--signal-amber) / 0.08); } .device-list__chip--revoked { color: rgb(var(--text-muted)); } .device-list__row-actions { display: flex; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; } .device-list__footnote { padding: var(--space-3) var(--space-5) var(--space-5); margin: 0; font-size: 12px; color: rgb(var(--text-muted)); line-height: 1.55; border-top: 1px solid rgb(var(--border-hairline)); } /* ==================================================================== 53. REASON BANNERS (universal, drained from session) ==================================================================== */ .reason-banners { position: fixed; top: var(--space-3); left: 50%; transform: translateX(-50%); width: min(100%, 920px); padding: 0 var(--space-4); z-index: var(--z-overlay); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .reason-banner { pointer-events: auto; } .reason-banner { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--r-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface) / 0.85); box-shadow: var(--shadow-card); animation: reason-banner-in var(--motion-base) var(--easing-emphasized) both; } @keyframes reason-banner-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .reason-banner__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-default); background: rgb(var(--bg-surface-2)); } .reason-banner__icon svg { width: 18px; height: 18px; } .reason-banner__body { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; } .reason-banner__msg { margin: 0; font-size: 13px; line-height: 1.5; color: rgb(var(--text-primary)); } .reason-banner__cta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-decoration: none; color: rgb(var(--accent)); border-bottom: 1px solid rgb(var(--accent) / 0.4); padding-bottom: 1px; transition: color var(--motion-fast), border-color var(--motion-fast); } .reason-banner__cta:hover { color: rgb(var(--accent-hot)); border-bottom-color: rgb(var(--accent-hot)); } /* Severity tints */ .reason-banner--info { border-color: rgb(var(--signal-cyan) / 0.4); } .reason-banner--info .reason-banner__icon { color: rgb(var(--signal-cyan)); background: rgb(var(--signal-cyan) / 0.1); } .reason-banner--notice { border-color: rgb(var(--accent) / 0.4); } .reason-banner--notice .reason-banner__icon { color: rgb(var(--accent)); background: rgb(var(--accent) / 0.1); } .reason-banner--warning { border-color: rgb(var(--signal-amber) / 0.5); } .reason-banner--warning .reason-banner__icon { color: rgb(var(--signal-amber)); background: rgb(var(--signal-amber) / 0.12); } .reason-banner--error { border-color: rgb(var(--signal-crimson) / 0.55); } .reason-banner--error .reason-banner__icon { color: rgb(var(--signal-crimson)); background: rgb(var(--signal-crimson) / 0.12); } .reason-banner--critical { border-color: rgb(var(--signal-crimson) / 0.7); box-shadow: 0 0 0 1px rgb(var(--signal-crimson) / 0.4), var(--shadow-elev); } .reason-banner--critical .reason-banner__icon { color: rgb(var(--signal-crimson)); background: rgb(var(--signal-crimson) / 0.18); } /* ==================================================================== 40. DASHBOARD HUB -- hero / gains showcase / history table ==================================================================== */ /* Hero row: dropzone on the left, gains showcase on the right. Dropzone is given more weight because it's the primary action. */ .dash-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-6); align-items: stretch; } @media (max-width: 1100px) { .dash-hero { grid-template-columns: 1fr; } } /* Gains showcase ------------------------------------------------------ */ .gains-showcase { position: relative; display: flex; flex-direction: column; padding: var(--space-5); overflow: hidden; } .gains-showcase__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px dashed rgb(var(--border-hairline)); } .gains-showcase__title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.005em; color: rgb(var(--text-primary)); } .gains-showcase__sub { margin: 4px 0 0; font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; } .gains-showcase__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(var(--signal-lime) / 0.1); border: 1px solid rgb(var(--signal-lime) / 0.4); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgb(var(--signal-lime)); text-transform: uppercase; } .gains-showcase__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--signal-lime)); box-shadow: 0 0 6px rgb(var(--signal-lime) / 0.7); animation: gains-pulse 2.4s var(--easing-standard) infinite; } @keyframes gains-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } .gains-list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .gains-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: 12px 14px; border-radius: var(--r-default); border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.4); transition: border-color var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard); } .gains-row:hover { border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.04); } .gains-row__name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: rgb(var(--text-primary)); line-height: 1.2; word-break: break-word; } .gains-row__meta { margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); letter-spacing: 0.04em; } .gains-row__delta { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; line-height: 1.1; } .gains-row__delta-hp { font-size: 16px; font-weight: 800; color: rgb(var(--accent)); } .gains-row__delta-nm { font-size: 11px; color: rgb(var(--text-muted)); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } .gains-row__bar { grid-column: 1 / -1; margin-top: 8px; height: 4px; background: rgb(var(--border-hairline)); border-radius: 2px; overflow: hidden; position: relative; } .gains-row__bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-2, var(--accent)))); border-radius: 2px; } .gains-showcase__foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed rgb(var(--border-hairline)); display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.08em; } .gains-showcase__foot a { color: rgb(var(--accent)); text-decoration: none; border-bottom: 1px dashed rgb(var(--accent) / 0.5); } .gains-showcase__foot a:hover { color: rgb(var(--text-primary)); } .gains-empty { text-align: center; padding: var(--space-6) var(--space-4); color: rgb(var(--text-muted)); font-size: 13px; border: 1px dashed rgb(var(--border-hairline)); border-radius: var(--r-default); } /* Contextual mode: spec strip + stock readout */ .gains-spec { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); } .gains-spec__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; background: rgb(var(--bg-elevated) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.3; } .gains-spec__k { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-muted)); } .gains-spec__v { font-weight: 600; color: rgb(var(--text-primary)); word-break: break-all; } .gains-stock { display: flex; gap: 12px; padding: var(--space-3) 0; margin-bottom: var(--space-3); border-top: 1px dashed rgb(var(--border-hairline)); border-bottom: 1px dashed rgb(var(--border-hairline)); flex-wrap: wrap; } .gains-stock__cell { display: flex; flex-direction: column; gap: 2px; flex: 1 1 80px; min-width: 80px; } .gains-stock__k { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-muted)); } .gains-stock__v { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; line-height: 1.1; } /* History table ------------------------------------------------------- */ .history { padding: 0; overflow: hidden; } .history__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgb(var(--border-hairline)); flex-wrap: wrap; } .history__title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.005em; color: rgb(var(--text-primary)); } .history__title-count { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); font-weight: 500; letter-spacing: 0.08em; } .history__filter { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .history__filter input { width: 280px; max-width: 100%; padding: 8px 12px; background: rgb(var(--bg-elevated) / 0.6); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); color: rgb(var(--text-primary)); font-family: 'JetBrains Mono', monospace; font-size: 13px; transition: border-color var(--motion-base) var(--easing-standard); } .history__filter input:focus { outline: none; border-color: rgb(var(--accent) / 0.7); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.12); } .history-table { width: 100%; border-collapse: collapse; font-size: 13px; } .history-table thead th { padding: 10px 16px; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--text-muted)); border-bottom: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.3); white-space: nowrap; } .history-table tbody tr { border-bottom: 1px dashed rgb(var(--border-hairline)); transition: background var(--motion-base) var(--easing-standard); } .history-table tbody tr:hover { background: rgb(var(--accent) / 0.04); } .history-table tbody tr:last-child { border-bottom: 0; } .history-table tbody td { padding: 12px 16px; vertical-align: middle; } .history-table .h-name { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: rgb(var(--text-primary)); word-break: break-all; max-width: 280px; } .history-table .h-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--text-muted)); margin-top: 2px; letter-spacing: 0.04em; } .history-table .h-vehicle { font-weight: 600; color: rgb(var(--text-primary)); line-height: 1.2; } .history-table .h-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; white-space: nowrap; } .history-table .h-status--match { color: rgb(var(--signal-lime)); border-color: rgb(var(--signal-lime) / 0.4); background: rgb(var(--signal-lime) / 0.08); } .history-table .h-status--miss { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); background: rgb(var(--signal-amber) / 0.08); } .history-table .h-time { color: rgb(var(--text-muted)); font-family: 'JetBrains Mono', monospace; font-size: 11px; white-space: nowrap; } .history-table .h-action a { color: rgb(var(--accent)); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px dashed rgb(var(--accent) / 0.5); transition: color var(--motion-base) var(--easing-standard); } .history-table .h-action a:hover { color: rgb(var(--text-primary)); } .history-empty { padding: var(--space-8) var(--space-5); text-align: center; color: rgb(var(--text-muted)); } /* Mobile-friendly: collapse table to stacked cards */ @media (max-width: 760px) { .history-table thead { display: none; } .history-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; } .history-table tbody td { padding: 0; } .history-table .h-name { grid-column: 1 / -1; } .history-table .h-vehicle { grid-column: 1 / -1; font-size: 13px; } .history-table .h-status { justify-self: start; } .history-table .h-time { justify-self: end; } .history-table .h-action { grid-column: 1 / -1; margin-top: 4px; } } /* ==================================================================== 41. DROPZONE -- rich match result + manual-search chips + editor badge ==================================================================== */ .dz-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .dz-card .dropzone { flex: 1; display: flex; } /* Match result top strip (badge left, confidence right) */ .dz-result__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; } .dz-result__confidence { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgb(var(--text-muted)); text-transform: uppercase; } /* Chip strip: ECU / Stage / SW / HW / Engine / Fuel */ .dz-result__chips, .dz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0; justify-content: center; } .dz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.5); font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; transition: border-color var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard), transform var(--motion-base) var(--easing-standard); } .dz-chip__k { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-muted)); } .dz-chip__v { font-weight: 600; color: rgb(var(--text-primary)); word-break: break-all; } .dz-chip--accent { border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.08); } .dz-chip--accent .dz-chip__v { color: rgb(var(--accent)); } /* Clickable chip (no-match manual-search). */ button.dz-chip--clickable { cursor: pointer; color: inherit; } button.dz-chip--clickable:hover { border-color: rgb(var(--accent) / 0.6); background: rgb(var(--accent) / 0.06); transform: translateY(-1px); } button.dz-chip--clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18); } /* Power readout: stock / gain / nm */ .dz-result__power { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; padding: var(--space-3) 0; margin: 0 auto; max-width: 480px; border-top: 1px dashed rgb(var(--border-hairline)); border-bottom: 1px dashed rgb(var(--border-hairline)); } .dz-result__power > div { display: flex; flex-direction: column; align-items: center; gap: 2px; } .dz-result__pl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--text-muted)); } .dz-result__pv { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; } .dz-result__pv--accent { color: rgb(var(--accent)); } /* AI editor availability badge */ .dz-editor-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; margin: var(--space-3) auto 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid; } .dz-editor-badge--on { color: rgb(var(--signal-lime)); border-color: rgb(var(--signal-lime) / 0.45); background: rgb(var(--signal-lime) / 0.08); } .dz-editor-badge--off { color: rgb(var(--text-muted)); border-color: rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.5); } /* AI solutions grid -- product tiles (Original / Stage 1/2/3 / DTC OFF / EGR OFF) */ .dz-solutions { margin: var(--space-4) 0 var(--space-3); padding: var(--space-3) var(--space-3) var(--space-4); background: rgb(var(--bg-elevated) / 0.4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); } .dz-solutions__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 10px; flex-wrap: wrap; } .dz-solutions__title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--text-secondary)); } .dz-solutions__sub { font-size: 11px; color: rgb(var(--text-muted)); } .dz-solutions__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .dz-sol { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgb(var(--bg-base) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: 8px; color: rgb(var(--text-primary)); font-family: var(--font-display); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: background 150ms, border-color 150ms, transform 150ms; } .dz-sol:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; } .dz-sol__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; } .dz-sol__label { flex: 1; } .dz-sol__tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; } /* Ready: clickable, accent ring on hover */ .dz-sol--ready { border-color: rgb(var(--signal-lime) / 0.4); background: rgb(var(--signal-lime) / 0.06); } .dz-sol--ready .dz-sol__icon { color: rgb(var(--signal-lime)); background: rgb(var(--signal-lime) / 0.18); border: 1px solid rgb(var(--signal-lime) / 0.4); } .dz-sol--ready:hover { transform: translateY(-1px); border-color: rgb(var(--signal-lime) / 0.7); background: rgb(var(--signal-lime) / 0.12); box-shadow: 0 4px 14px rgb(var(--signal-lime) / 0.18); } /* Locked: visible but not available for this match */ .dz-sol--locked { opacity: 0.55; cursor: not-allowed; border-style: dashed; } .dz-sol--locked .dz-sol__icon { color: rgb(var(--text-muted)); background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-hairline)); } .dz-sol--locked .dz-sol__tag { background: rgb(var(--bg-elevated)); color: rgb(var(--text-muted)); border: 1px solid rgb(var(--border-hairline)); } /* Upcoming: feature ships next iteration */ .dz-sol--upcoming { opacity: 0.7; cursor: not-allowed; border-color: rgb(var(--accent) / 0.35); background: rgb(var(--accent) / 0.04); } .dz-sol--upcoming .dz-sol__icon { color: rgb(var(--accent)); background: rgb(var(--accent) / 0.15); border: 1px solid rgb(var(--accent) / 0.4); } .dz-sol--upcoming .dz-sol__tag { background: rgb(var(--accent) / 0.15); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / 0.4); } /* ==================================================================== 42. NAVBAR v2 -- responsive, hamburger drawer, single source of truth ==================================================================== */ .navbar { position: sticky; top: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); /* More breathing room around the brand on desktop so the logo isn't glued to the viewport edge. Was: padding 14px var(--space-6). */ padding: 14px clamp(20px, 4vw, 56px); background: rgb(var(--bg-base) / 0.72); backdrop-filter: blur(var(--blur-glass)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); border-bottom: 1px solid rgb(var(--border-hairline)); } .navbar__brand { text-decoration: none; font-size: 22px; line-height: 1; white-space: nowrap; flex: 0 0 auto; /* Bigger hit area on touch + dedicated breathing room from page edge */ padding: 6px 12px; margin-left: 4px; border-radius: 8px; transition: background-color 150ms ease; } .navbar__brand:hover, .navbar__brand:focus-visible { background: rgb(var(--bg-surface-2) / 0.6); } .navbar__center { display: flex; justify-content: center; gap: 4px; } .navbar__link { position: relative; padding: 8px 14px; color: rgb(var(--text-secondary)); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; transition: color var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard); } .navbar__link:hover { color: rgb(var(--text-primary)); background: rgb(var(--bg-elevated) / 0.5); } .navbar__link--active { color: rgb(var(--text-primary)); background: rgb(var(--accent) / 0.1); } .navbar__link--active::after { content: ''; position: absolute; bottom: -3px; left: 50%; width: 18px; height: 2px; background: rgb(var(--accent)); transform: translateX(-50%); border-radius: 1px; } .navbar__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .navbar__icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-default); background: rgb(var(--bg-elevated) / 0.5); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-secondary)); cursor: pointer; transition: color var(--motion-base) var(--easing-standard), border-color var(--motion-base) var(--easing-standard), background var(--motion-base) var(--easing-standard); } .navbar__icon-btn:hover { color: rgb(var(--text-primary)); border-color: rgb(var(--accent) / 0.4); } .navbar__perf-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--signal-lime)); box-shadow: 0 0 5px rgb(var(--signal-lime) / 0.6); } .navbar__perf-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: rgb(var(--text-muted)); } .navbar__user-email { font-size: 12px; color: rgb(var(--text-muted)); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar__signout { display: inline-flex; } /* Hamburger -- hidden on desktop, visible mobile */ .navbar__hamburger { display: none; flex-direction: column; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.5); border-radius: var(--r-default); cursor: pointer; align-items: center; justify-content: center; } .navbar__hamburger-line { width: 18px; height: 2px; background: rgb(var(--text-primary)); border-radius: 1px; transition: transform var(--motion-base) var(--easing-standard), opacity var(--motion-base) var(--easing-standard); } .navbar--open .navbar__hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .navbar--open .navbar__hamburger-line:nth-child(2) { opacity: 0; } .navbar--open .navbar__hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Drawer + backdrop ------------------------------------------------- */ .navbar__drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: flex-end; pointer-events: auto; } .navbar__drawer-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .navbar__drawer-panel { position: relative; width: min(340px, 92vw); height: 100vh; background: rgb(var(--bg-base) / 0.95); backdrop-filter: blur(var(--blur-glass)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); border-left: 1px solid rgb(var(--border-hairline)); display: flex; flex-direction: column; box-shadow: -10px 0 40px rgb(0 0 0 / 0.4); } .navbar__drawer--enter, .navbar__drawer--leave { transition: opacity 240ms var(--easing-standard); } .navbar__drawer--enter .navbar__drawer-panel, .navbar__drawer--leave .navbar__drawer-panel { transition: transform 280ms var(--easing-standard); } .navbar__drawer--enter-start { opacity: 0; } .navbar__drawer--enter-start .navbar__drawer-panel { transform: translateX(100%); } .navbar__drawer--enter-end { opacity: 1; } .navbar__drawer--enter-end .navbar__drawer-panel { transform: translateX(0); } .navbar__drawer--leave-start { opacity: 1; } .navbar__drawer--leave-start .navbar__drawer-panel { transform: translateX(0); } .navbar__drawer--leave-end { opacity: 0; } .navbar__drawer--leave-end .navbar__drawer-panel { transform: translateX(100%); } .navbar__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--space-5); border-bottom: 1px solid rgb(var(--border-hairline)); } .navbar__drawer-close { background: transparent; border: 0; color: rgb(var(--text-secondary)); cursor: pointer; padding: 6px; display: inline-flex; border-radius: var(--r-default); transition: color var(--motion-base), background var(--motion-base); } .navbar__drawer-close:hover { color: rgb(var(--text-primary)); background: rgb(var(--bg-elevated) / 0.6); } .navbar__drawer-id { display: flex; align-items: center; gap: 12px; padding: 16px var(--space-5); border-bottom: 1px dashed rgb(var(--border-hairline)); } .navbar__drawer-id-text { min-width: 0; } .navbar__drawer-id-name { font-weight: 700; color: rgb(var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar__drawer-id-email { font-size: 12px; color: rgb(var(--text-muted)); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar__drawer-nav { display: flex; flex-direction: column; padding: 8px 12px; flex: 1; overflow-y: auto; } .navbar__drawer-link { display: flex; align-items: center; padding: 14px 16px; color: rgb(var(--text-secondary)); text-decoration: none; font-size: 15px; font-weight: 600; border-radius: var(--r-default); transition: color var(--motion-base), background var(--motion-base); } .navbar__drawer-link:hover { color: rgb(var(--text-primary)); background: rgb(var(--bg-elevated) / 0.5); } .navbar__drawer-link--active { color: rgb(var(--accent)); background: rgb(var(--accent) / 0.08); } .navbar__drawer-foot { padding: 16px var(--space-5); border-top: 1px solid rgb(var(--border-hairline)); } .navbar__drawer-signout button { width: 100%; justify-content: center; } .navbar__drawer-cta { margin: 16px; justify-content: center; } /* Mobile breakpoint -- collapse to hamburger ------------------------- */ @media (max-width: 979px) { .navbar { grid-template-columns: auto auto; gap: var(--space-3); padding: 12px var(--space-4); } .navbar__center { display: none; } .navbar__user-email { display: none; } .navbar__signout { display: none; } .navbar__icon-btn { display: none; } .navbar .tier-badge { display: none; } .navbar__hamburger { display: inline-flex; } } @media (min-width: 980px) { .navbar__hamburger { display: none; } .navbar__drawer { display: none !important; } } /* ============================================================ * Diagnostic Report (post-match dropzone result) * * Inspiration: ECM Titanium / WinOLS analysis panels. Dense, * monospace for technical values, hairline rules. Replaces the * old ceremonial 6-tile grid. * ============================================================ */ .dz-card { width: 100%; } /* Locked state — drop zone is disabled because a workspace is loaded. */ .dz-locked { text-align: center; padding: 40px 24px !important; align-items: center; gap: 12px; } .dz-locked__icon { color: rgb(var(--accent)); margin-bottom: 4px; opacity: 0.85; } .dz-locked__name { font-size: 16px; color: rgb(var(--text-primary)); margin: 0; max-width: 540px; font-weight: 600; } .dz-locked__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 11px; color: rgb(var(--text-secondary)); } .dz-locked__chips span { padding: 3px 9px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); background: rgb(var(--bg-base) / 0.5); } .dz-locked__chips strong { color: rgb(var(--text-muted)); font-weight: 700; margin-right: 6px; letter-spacing: 0.06em; } .dz-locked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } /* Match probability indicator on search rows. */ .manual-search__pct { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 56px; padding: 4px 8px; margin-right: 12px; border-radius: var(--r-tight); border: 1px solid currentColor; flex-shrink: 0; } .manual-search__pct--high { color: rgb(var(--signal-lime)); background: rgb(var(--signal-lime) / 0.10); } .manual-search__pct--mid { color: rgb(var(--signal-amber)); background: rgb(var(--signal-amber) / 0.10); } .manual-search__pct--low { color: rgb(var(--text-muted)); background: rgb(var(--text-muted) / 0.06); } .manual-search__pct-num { font-size: 13px; font-weight: 700; line-height: 1; } .manual-search__pct-num small { font-size: 9px; margin-left: 1px; opacity: 0.7; } .manual-search__pct-bar { width: 100%; height: 3px; background: rgb(var(--bg-base) / 0.5); border-radius: 2px; overflow: hidden; } .manual-search__pct-bar-fill { display: block; height: 100%; background: currentColor; transition: width 240ms ease; } .dz-card .dropzone { width: 100%; min-width: 0; } .dz-card .dropzone__inner { width: 100%; max-width: none; } .dz-card .dropzone__inner--matched { max-width: none; } .dz-report { gap: 18px; } /* Live progress (matching state) ----------------------------- */ .dz-progress { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 0; } .dz-progress__bar { height: 4px; border-radius: 2px; background: rgb(var(--bg-base) / 0.6); overflow: hidden; border: 1px solid rgb(var(--border-hairline)); } .dz-progress__bar-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--accent-hot)), rgb(var(--accent))); box-shadow: 0 0 12px rgb(var(--accent) / 0.5); transition: width 240ms cubic-bezier(0.2, 0, 0, 1); } .dz-progress__steps { list-style: none; margin: 0; padding: 12px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.5); } .dz-progress__step { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; padding: 4px 0; color: rgb(var(--text-muted)); font-size: 12px; transition: color 240ms; } .dz-progress__step.is-done { color: rgb(var(--signal-lime)); } .dz-progress__step.is-current { color: rgb(var(--accent)); } .dz-progress__step-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .dz-progress__step-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--text-muted) / 0.4); } .dz-progress__step-spinner { width: 12px; height: 12px; border: 2px solid rgb(var(--accent) / 0.25); border-top-color: rgb(var(--accent)); border-radius: 50%; animation: dz-spin 0.7s linear infinite; } .dz-progress__step.is-current { animation: dz-step-pulse 1.2s ease-in-out infinite; } @keyframes dz-spin { to { transform: rotate(360deg); } } @keyframes dz-step-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .dz-progress__step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; } @media (prefers-reduced-motion: reduce) { .dz-progress__step-spinner { animation: none; border-top-color: rgb(var(--accent)); } .dz-progress__step.is-current { animation: none; } } /* 1) Status bar -------------------------------------------- */ .dz-report__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border: 1px solid rgb(var(--signal-ok) / 0.32); border-radius: var(--r-default); background: linear-gradient(90deg, rgb(var(--signal-ok) / 0.10), transparent 60%), rgb(var(--bg-surface-2) / 0.6); } .dz-report__status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--signal-ok)); } .dz-report__status-badge svg { stroke: currentColor; } .dz-report__status-meta { display: inline-flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: 0.04em; } .dz-report__status-cell { display: inline-flex; align-items: baseline; gap: 6px; } .dz-report__status-k { color: rgb(var(--text-muted)); font-weight: 500; } .dz-report__status-v { color: rgb(var(--text-primary)); font-weight: 600; } /* 2) Vehicle headline -------------------------------------- */ .dz-report__vehicle { padding-top: 4px; } .dz-report__title { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: rgb(var(--text-primary)); margin: 0 0 6px; } .dz-report__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: rgb(var(--text-secondary)); font-size: 13px; } .dz-report__sub-sep { color: rgb(var(--text-muted)); } /* 3) Identity grid (2 columns) ----------------------------- */ .dz-report__identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; margin: 0; padding: 12px 16px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.5); } .dz-report__id-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55); } .dz-report__id-row:last-child, .dz-report__id-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .dz-report__id-row dt { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-muted)); margin: 0; } .dz-report__id-row dd { margin: 0; font-size: 13px; color: rgb(var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-report__id-v--small { font-size: 11.5px; color: rgb(var(--text-secondary)); } .dz-report__pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .dz-report__pill--ok { background: rgb(var(--signal-ok) / 0.12); color: rgb(var(--signal-ok)); border: 1px solid rgb(var(--signal-ok) / 0.35); } .dz-report__pill--off { background: rgb(var(--text-muted) / 0.10); color: rgb(var(--text-muted)); border: 1px solid rgb(var(--text-muted) / 0.30); } /* 4) Tunes list (table-style rows) ------------------------- */ .dz-report__tunes { border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.5); overflow: hidden; } .dz-report__tunes-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.5); } .dz-report__tunes-title { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: rgb(var(--text-primary)); } .dz-report__tunes-sub { font-size: 11px; color: rgb(var(--text-muted)); letter-spacing: 0.04em; } .dz-report__tunes-list { list-style: none; margin: 0; padding: 0; } .dz-report__tune { display: grid; grid-template-columns: 4px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 0; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55); transition: background var(--motion-fast); } .dz-report__tune:last-child { border-bottom: 0; } .dz-report__tune-rule { width: 4px; align-self: stretch; background: linear-gradient(180deg, rgb(var(--accent) / 0.85), rgb(var(--accent) / 0.25)); border-right: 1px solid rgb(var(--border-hairline)); } .dz-report__tune--locked .dz-report__tune-rule { background: linear-gradient(180deg, rgb(var(--text-muted) / 0.5), rgb(var(--text-muted) / 0.15)); } .dz-report__tune--upcoming .dz-report__tune-rule { background: linear-gradient(180deg, rgb(var(--signal-amber) / 0.7), rgb(var(--signal-amber) / 0.2)); } .dz-report__tune--ready:hover { background: rgb(var(--bg-surface-2) / 0.55); } .dz-report__tune-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dz-report__tune-name { font-size: 13.5px; font-weight: 600; color: rgb(var(--text-primary)); letter-spacing: -0.005em; } .dz-report__tune--locked .dz-report__tune-name, .dz-report__tune--upcoming .dz-report__tune-name { color: rgb(var(--text-secondary)); } .dz-report__tune-desc { font-size: 11.5px; color: rgb(var(--text-muted)); line-height: 1.35; } .dz-report__tune-power { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: rgb(var(--text-secondary)); } .dz-report__tune-tuned strong { font-weight: 700; color: rgb(var(--text-primary)); font-size: 14px; } .dz-report__tune-tuned small { font-size: 9.5px; letter-spacing: 0.08em; color: rgb(var(--text-muted)); margin-left: 2px; text-transform: uppercase; } .dz-report__tune-delta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; } .dz-report__delta { display: inline-flex; padding: 2px 7px; border-radius: var(--r-tight); font-weight: 600; letter-spacing: 0.02em; } .dz-report__delta--hp { color: rgb(var(--signal-lime)); background: rgb(var(--signal-lime) / 0.10); border: 1px solid rgb(var(--signal-lime) / 0.28); } .dz-report__delta--nm { color: rgb(var(--signal-cyan)); background: rgb(var(--signal-cyan) / 0.10); border: 1px solid rgb(var(--signal-cyan) / 0.28); } .dz-report__tune-cta { justify-self: end; } .dz-report__dl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 6px 12px; letter-spacing: 0.02em; white-space: nowrap; } .dz-report__lock, .dz-report__upcoming { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-tight); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; border: 1px dashed transparent; } .dz-report__lock { color: rgb(var(--text-muted)); background: rgb(var(--text-muted) / 0.06); border-color: rgb(var(--text-muted) / 0.30); } .dz-report__upcoming { color: rgb(var(--signal-amber)); background: rgb(var(--signal-amber) / 0.08); border-color: rgb(var(--signal-amber) / 0.30); } /* 5) Quick-copy row ---------------------------------------- */ .dz-report__copyrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; padding: 8px 10px; border: 1px dashed rgb(var(--surface-3) / 0.55); border-radius: 8px; } .dz-report__copyrow-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--ink-mute)); padding-right: 4px; } .dz-report__copybtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font: 500 11.5px/1 var(--font-body); background: rgb(var(--surface-2) / 0.45); border: 1px solid rgb(var(--surface-3) / 0.55); border-radius: 6px; color: rgb(var(--ink-strong)); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .dz-report__copybtn:hover { border-color: rgb(var(--accent-info)); color: rgb(var(--accent-info)); } .dz-report__copybtn-fig { font: 11px ui-monospace, monospace; color: rgb(var(--ink-mute)); } .dz-report__copybtn-ok { font-size: 10.5px; color: rgb(var(--accent-positive, var(--signal-green, 16 185 129))); margin-left: 2px; } /* 6) Action bar -------------------------------------------- */ .dz-report__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } /* Btn extra-small (used for download buttons in tunes list). */ .btn--xs { font-size: 11px; padding: 4px 10px; min-height: 28px; border-radius: var(--r-tight); } /* Responsive ----------------------------------------------- */ /* Tablet: identity grid collapses to 1 col, status meta wraps. */ @media (max-width: 880px) { .dz-report__identity { grid-template-columns: 1fr; column-gap: 0; } .dz-report__id-row { border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55) !important; } .dz-report__id-row:last-child { border-bottom: 0 !important; } .dz-report__tune { grid-template-columns: 4px minmax(0, 1fr) auto; grid-template-areas: "rule meta cta" "rule power power" "rule delta delta"; gap: 6px 12px; padding-bottom: 12px; } .dz-report__tune-rule { grid-area: rule; } .dz-report__tune-meta { grid-area: meta; } .dz-report__tune-power { grid-area: power; } .dz-report__tune-delta { grid-area: delta; } .dz-report__tune-cta { grid-area: cta; align-self: start; } .dz-report__tune-power:empty, .dz-report__tune-delta:empty { display: none; } } /* Mobile: tighter padding, status bar stacks. */ @media (max-width: 540px) { .dz-report { gap: 14px; } .dz-report__status { flex-direction: column; align-items: flex-start; gap: 6px; } .dz-report__status-meta { flex-wrap: wrap; gap: 10px 14px; } .dz-report__title { font-size: 22px; } .dz-report__identity { padding: 10px 12px; } .dz-report__id-row { grid-template-columns: 100px 1fr; gap: 8px; padding: 6px 0; } .dz-report__id-row dd { font-size: 12.5px; white-space: normal; word-break: break-all; } .dz-report__tunes-head { padding: 8px 12px; } .dz-report__tune { padding: 8px 12px 10px 0; gap: 5px 10px; } .dz-report__tune-name { font-size: 13px; } .dz-report__tune-desc { font-size: 11px; } .dz-report__dl-btn { padding: 5px 9px; } .dz-report__actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; } } /* Reduced motion: disable hover lift on tune rows. */ @media (prefers-reduced-motion: reduce) { .dz-report__tune--ready:hover { background: transparent; } } /* ============================================================ * Dropzone hero — sub-768px responsive polish * The hero card now stacks under the gains-showcase on mobile. * ============================================================ */ @media (max-width: 768px) { .dropzone__inner { padding: 20px 16px; gap: 12px; } .dropzone__title { font-size: 18px; } .dropzone__hint { font-size: 13px; } .dropzone__formats { gap: 4px; } .dropzone__formats span { font-size: 10px; padding: 2px 6px; } .dropzone__icon { width: 56px; height: 56px; } .dropzone__icon svg { width: 26px; height: 26px; } .dz-card .dropzone { min-height: 280px; } } @media (max-width: 480px) { .dropzone__inner { padding: 16px 12px; } .dropzone__cap { font-size: 10.5px; } .dropzone__actions .btn { flex: 1 1 100%; justify-content: center; } .dz-chips { gap: 4px; } .dz-chip { font-size: 11px; padding: 3px 7px; } } /* ============================================================ * My Tunes — table + A/B picker + sticky compare bar * ============================================================ */ .my-tunes__table-wrap { padding: 0; overflow: hidden; position: relative; } .my-tunes__table { width: 100%; border-collapse: collapse; font-size: 13px; } .my-tunes__table thead tr { text-align: left; color: rgb(var(--text-muted)); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid rgb(var(--border-hairline)); } .my-tunes__table th { padding: 12px 16px; font-weight: 500; } .my-tunes__table td { padding: 12px 16px; vertical-align: middle; } .my-tunes__row { border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55); transition: background var(--motion-fast); } .my-tunes__row:last-child { border-bottom: 0; } .my-tunes__row:hover { background: rgb(var(--accent) / 0.03); } .my-tunes__row.is-picked { background: rgb(var(--accent) / 0.08); box-shadow: inset 3px 0 0 rgb(var(--accent)); } .my-tunes__when { color: rgb(var(--text-muted)); font-size: 11px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; line-height: 1.4; } .my-tunes__name { font-weight: 600; font-size: 13.5px; color: rgb(var(--text-primary)); word-break: break-all; } .my-tunes__size { margin-top: 2px; color: rgb(var(--text-muted)); font-size: 10.5px; font-family: 'JetBrains Mono', monospace; } .my-tunes__veh { font-weight: 600; font-size: 13.5px; color: rgb(var(--text-primary)); } .my-tunes__veh-sub { margin-top: 2px; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; } .my-tunes__badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 3px 8px; } .my-tunes__cta { text-align: right; white-space: nowrap; } .my-tunes__pick-pair { display: inline-flex; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-pill); padding: 2px; margin-right: 8px; background: rgb(var(--bg-surface-2) / 0.6); } .my-tunes__pick { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; border: 0; background: transparent; color: rgb(var(--text-muted)); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--r-pill); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .my-tunes__pick:hover { color: rgb(var(--text-primary)); } .my-tunes__pick.is-active { background: rgb(var(--accent)); color: rgb(var(--bg-base)); } .my-tunes__pick:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } .my-tunes__open { font-size: 11.5px; padding: 5px 12px; } /* Sticky compare bar -- floats at the bottom of the card. */ .my-tunes__cmp-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgb(var(--bg-surface-2) / 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgb(var(--accent) / 0.4); z-index: 5; } .my-tunes__cmp-bar-enter { animation: my-tunes-cmp-enter 220ms ease-out both; } @keyframes my-tunes-cmp-enter { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .my-tunes__cmp-text { display: flex; flex-direction: column; font-size: 12px; color: rgb(var(--text-secondary)); font-family: 'JetBrains Mono', monospace; } .my-tunes__cmp-text strong { font-family: var(--font-display, system-ui); font-size: 13px; color: rgb(var(--text-primary)); letter-spacing: 0.02em; } .my-tunes__cmp-letter { color: rgb(var(--accent)); font-weight: 700; margin-right: 1px; } .my-tunes__cmp-actions { display: flex; gap: 8px; align-items: center; } /* Mobile: collapse table into card-style rows. */ @media (max-width: 768px) { .my-tunes__table thead { display: none; } .my-tunes__table tbody, .my-tunes__table tr, .my-tunes__table td { display: block; } .my-tunes__row { padding: 12px 14px 14px; border-bottom: 1px solid rgb(var(--border-hairline)); } .my-tunes__row.is-picked { box-shadow: inset 0 0 0 2px rgb(var(--accent) / 0.55); } .my-tunes__table td { padding: 4px 0; } .my-tunes__when { display: inline-block; margin-bottom: 4px; } .my-tunes__cta { text-align: left; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .my-tunes__cmp-bar { flex-direction: column; align-items: stretch; gap: 10px; } .my-tunes__cmp-actions { justify-content: flex-end; } } /* ============================================================ * FileSwitcher — reusable file picker dropdown * Drops into editor titlebar, compare slots, anywhere a tool * needs to let the user choose which file to operate on. * ============================================================ */ .fs { position: relative; display: inline-flex; /* Hoist the whole switcher above sibling glass cards. Without this the next .card--glass with backdrop-filter creates its own stacking context and steals the foreground regardless of .fs__panel z-index. */ z-index: var(--z-popover); } .fs.is-open { z-index: calc(var(--z-popover) + 1); } .fs__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.6); color: rgb(var(--text-primary)); cursor: pointer; font-size: 12px; transition: background 150ms, border-color 150ms; min-width: 180px; text-align: left; } .fs__trigger:hover { background: rgb(var(--accent) / 0.08); border-color: rgb(var(--accent) / 0.5); } .fs__trigger.is-open { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.08); } .fs__trigger > svg:first-child { color: rgb(var(--accent)); flex-shrink: 0; } .fs__trigger-label { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .fs__trigger-eyebrow { font: 700 8.5px 'JetBrains Mono', monospace; letter-spacing: 0.12em; color: rgb(var(--text-muted)); } .fs__trigger-name { font-size: 12px; color: rgb(var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs__chev { color: rgb(var(--text-muted)); transition: transform 150ms; flex-shrink: 0; } .fs__panel { position: absolute; top: calc(100% + 6px); left: 0; width: min(420px, 90vw); z-index: var(--z-popover); /* SOLID background -- popovers must NOT see-through to sibling cards. Removed backdrop-filter (it requires partial transparency to do anything useful, and the partial transparency is exactly the bug). */ background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); box-shadow: 0 12px 40px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.4); overflow: hidden; display: flex; flex-direction: column; max-height: 480px; } [data-theme="light"] .fs__panel, [data-theme="spotify-dark"] .fs__panel { background: rgb(var(--bg-surface)); } .fs__search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.5); } .fs__search svg { color: rgb(var(--text-muted)); flex-shrink: 0; } .fs__search-input { flex: 1; background: transparent; border: 0; outline: 0; color: rgb(var(--text-primary)); font-size: 12px; font-family: inherit; min-width: 0; } .fs__search-input::placeholder { color: rgb(var(--text-muted)); } .fs__empty { padding: 24px 18px; text-align: center; color: rgb(var(--text-secondary)); font-size: 12.5px; } .fs__empty p { margin: 0 0 12px; } .fs__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; } .fs__item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.45); transition: background 120ms; } .fs__item:last-child { border-bottom: 0; } .fs__item:hover { background: rgb(var(--accent) / 0.06); } .fs__item.is-current { background: rgb(var(--accent) / 0.10); } .fs__item-status { display: flex; align-items: center; justify-content: center; } .fs__item-dot { width: 8px; height: 8px; border-radius: 50%; } .fs__item-dot--current { background: rgb(var(--accent)); box-shadow: 0 0 6px rgb(var(--accent)); } .fs__item-dot--match { background: rgb(var(--signal-lime)); } .fs__item-dot--miss { background: rgb(var(--signal-amber)); } .fs__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fs__item-vehicle { font-size: 12.5px; font-weight: 600; color: rgb(var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs__item-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 10px; color: rgb(var(--text-muted)); } .fs__item-sha { color: rgb(var(--accent) / 0.7); } .fs__item-when { color: rgb(var(--text-muted)); font-size: 10px; flex-shrink: 0; } .fs__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.4); } .fs__foot-link { color: rgb(var(--text-secondary)); text-decoration: none; font-size: 11px; font-weight: 600; } .fs__foot-link:hover { color: rgb(var(--text-primary)); } .fs__foot-link--accent { color: rgb(var(--accent)); } .fs__foot-link--accent:hover { color: rgb(var(--accent-hot)); } /* ============================================================ * Compare — Slot B picker (3 sources: My Tunes / Library / Upload) * ============================================================ */ .cmp-slot-b { padding: 16px 18px; margin-bottom: 14px; position: relative; } .cmp-slot-b__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55); } .cmp-slot-b__current { font-size: 15px; font-weight: 600; color: rgb(var(--text-primary)); margin-top: 4px; } .cmp-slot-b__current--empty { color: rgb(var(--text-muted)); font-style: italic; font-size: 13px; } .cmp-slot-b__pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .cmp-slot-b__picker { display: flex; flex-direction: column; gap: 6px; } .cmp-slot-b__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: rgb(var(--text-muted)); text-transform: uppercase; } .cmp-slot-b__upload { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.5); cursor: pointer; transition: border-color 150ms, background 150ms; } .cmp-slot-b__upload:hover { border-color: rgb(var(--accent) / 0.55); background: rgb(var(--accent) / 0.06); } .cmp-slot-b__upload-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-tight); background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); flex-shrink: 0; } .cmp-slot-b__upload-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cmp-slot-b__upload-text strong { font-size: 12px; color: rgb(var(--text-primary)); font-weight: 600; } .cmp-slot-b__upload-text small { font-size: 10.5px; color: rgb(var(--text-muted)); } .cmp-slot-b__upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ============================================================ * Compare — library typeahead dropdown * ============================================================ */ .cmp-search-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); overflow: hidden; max-height: 280px; overflow-y: auto; background: rgb(var(--bg-surface) / 0.95); } .cmp-search-item { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; background: transparent; border: 0; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.45); color: rgb(var(--text-primary)); text-align: left; cursor: pointer; font-size: 12.5px; transition: background 150ms; } .cmp-search-item:last-child { border-bottom: 0; } .cmp-search-item:hover { background: rgb(var(--accent) / 0.06); } .cmp-search-id { color: rgb(var(--accent)); font-size: 11px; font-weight: 700; } .cmp-search-car { color: rgb(var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-search-arrow { color: rgb(var(--text-muted)); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; } /* ============================================================ * Active Workspace Bar — sticky strip under the top nav. * The single ECU file the user is currently working on. * Renders on every authed page except the editor itself. * ============================================================ */ .aw-bar { position: sticky; top: 56px; /* navbar height — keeps the bar pinned just below it */ z-index: calc(var(--z-sticky) - 1); /* below navbar, above content */ background: linear-gradient(180deg, rgb(var(--bg-surface-2) / 0.95), rgb(var(--bg-surface) / 0.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--accent) / 0.4); box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); } @media (max-width: 980px) { /* Mobile navbar is 60px (12px padding × 2 + ~36px content). */ .aw-bar { top: 60px; } } .aw-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; flex-wrap: wrap; } .aw-bar__main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; } .aw-bar__pulse { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .aw-bar__pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 10px rgb(var(--accent)); animation: aw-pulse 1.4s ease-in-out infinite; } @keyframes aw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } } .aw-bar__main-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .aw-bar__eyebrow { font-size: 9.5px; letter-spacing: 0.14em; color: rgb(var(--accent)); font-weight: 700; } .aw-bar__title { font-size: 14px; font-weight: 700; color: rgb(var(--text-primary)); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .aw-bar__sub { font-size: 10.5px; color: rgb(var(--text-muted)); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .aw-bar__chips { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .aw-bar__chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; border-radius: var(--r-tight); border: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-base) / 0.5); font-size: 10.5px; color: rgb(var(--text-primary)); } .aw-bar__chip-k { color: rgb(var(--text-muted)); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .aw-bar__chip--accent { border-color: rgb(var(--accent) / 0.45); background: rgb(var(--accent) / 0.08); } .aw-bar__chip--accent .aw-bar__chip-k { color: rgb(var(--accent) / 0.85); } .aw-bar__actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .aw-bar__btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-tight); background: rgb(var(--bg-base) / 0.4); color: rgb(var(--text-secondary)); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; transition: background 150ms, border-color 150ms, color 150ms; } .aw-bar__btn:hover { border-color: rgb(var(--accent) / 0.5); background: rgb(var(--accent) / 0.08); color: rgb(var(--text-primary)); } .aw-bar__btn:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; } .aw-bar__btn--primary { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: rgb(var(--bg-base)); } .aw-bar__btn--primary:hover { background: rgb(var(--accent-hot)); border-color: rgb(var(--accent-hot)); color: rgb(var(--bg-base)); } .aw-bar__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-tight); color: rgb(var(--text-muted)); cursor: pointer; padding: 0; margin-left: 4px; } .aw-bar__close:hover { color: rgb(var(--signal-crimson)); border-color: rgb(var(--signal-crimson) / 0.5); background: rgb(var(--signal-crimson) / 0.08); } @media (max-width: 768px) { .aw-bar__btn-label { display: none; } .aw-bar__title { max-width: 200px; } .aw-bar__sub { display: none; } .aw-bar__chips { display: none; } } @media (max-width: 480px) { .aw-bar__inner { padding: 6px 10px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .aw-bar__pulse-dot { animation: none; } } /* ============================================================ * Dashboard Command Center (per PROJECT_MASTERPLAN.md §9.9) * * Industrial / engineering aesthetic: monospace HUD chrome, * dense statbar with sparklines + bars, grid panels with * hairline borders, pulsing live dot, no decorative fluff. * ============================================================ */ /* ── 1) Header strip ─────────────────────────────────────────── */ .cmd-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .cmd-header__main { min-width: 0; flex: 1 1 auto; } .cmd-header__crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 10.5px; letter-spacing: 0.1em; color: rgb(var(--text-muted)); text-transform: uppercase; margin-bottom: 4px; } .cmd-header__crumbs > span:first-child { color: rgb(var(--accent)); border-left: 2px solid rgb(var(--accent)); padding-left: 8px; } .cmd-header__crumb-dot { color: rgb(var(--text-muted) / 0.5); } .cmd-header__title { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: rgb(var(--text-secondary)); } .cmd-header__name { color: rgb(var(--text-primary)); } .cmd-header__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ── 2) Search bar ───────────────────────────────────────────── */ .cmd-search { margin-bottom: 18px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.4); padding: 4px 6px; transition: border-color var(--motion-fast); } .cmd-search:focus-within { border-color: rgb(var(--accent) / 0.6); } /* ── 3) Stat strip ───────────────────────────────────────────── */ .cmd-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .cmd-stat { position: relative; padding: 14px 16px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: linear-gradient(180deg, rgb(var(--bg-surface) / 0.7), rgb(var(--bg-surface) / 0.45)); overflow: hidden; min-height: 120px; display: flex; flex-direction: column; } .cmd-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: rgb(var(--text-muted) / 0.5); } .cmd-stat__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; } .cmd-stat__label { font-size: 10px; letter-spacing: 0.14em; font-weight: 600; color: rgb(var(--text-muted)); } .cmd-stat__chip { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; border-radius: var(--r-tight); border: 1px dashed rgb(var(--border-hairline)); color: rgb(var(--text-muted)); background: rgb(var(--bg-base) / 0.4); } .cmd-stat__chip--good { color: rgb(var(--signal-lime)); border-color: rgb(var(--signal-lime) / 0.4); background: rgb(var(--signal-lime) / 0.08); } .cmd-stat__chip--warn { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); background: rgb(var(--signal-amber) / 0.08); } .cmd-stat__chip--mut { color: rgb(var(--text-muted)); border-color: rgb(var(--border-hairline)); } .cmd-stat__value { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.02em; color: rgb(var(--text-primary)); margin: 4px 0 4px; font-weight: 800; } .cmd-stat__unit { font-size: 0.55em; color: rgb(var(--text-muted)); margin-left: 2px; font-weight: 600; } .cmd-stat__sub { font-size: 11.5px; color: rgb(var(--text-secondary)); margin-bottom: 6px; flex: 1; } .cmd-stat__rule { height: 1px; background: linear-gradient(90deg, rgb(var(--accent) / 0.5), transparent); margin-top: auto; } .cmd-stat__spark { width: 100%; height: 28px; margin-top: auto; display: block; } .cmd-stat__spark-fill { fill: rgb(var(--accent) / 0.10); stroke: none; } .cmd-stat__spark-line { fill: none; stroke: rgb(var(--accent)); stroke-width: 1.4; } .cmd-stat__spark-dot { fill: rgb(var(--accent)); } .cmd-stat__bar { margin-top: auto; height: 4px; border-radius: 2px; background: rgb(var(--bg-base) / 0.6); overflow: hidden; } .cmd-stat__bar-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--signal-cyan)), rgb(var(--accent))); transition: width var(--motion-base) var(--easing-emphasized, ease-out); } /* Tier-specific accent rails */ .cmd-stat--standard::before { background: linear-gradient(180deg, rgb(var(--text-muted)), rgb(var(--text-muted) / 0.3)); } .cmd-stat--premium::before { background: linear-gradient(180deg, rgb(var(--signal-cyan)), rgb(var(--signal-cyan) / 0.3)); } .cmd-stat--vip::before { background: linear-gradient(180deg, rgb(var(--accent-hot)), rgb(var(--accent) / 0.3)); } .cmd-stat--vip { background: linear-gradient(180deg, rgb(var(--accent) / 0.10), rgb(var(--bg-surface) / 0.45)); } .cmd-stat--premium { background: linear-gradient(180deg, rgb(var(--signal-cyan) / 0.08), rgb(var(--bg-surface) / 0.45)); } .cmd-stat--vip .cmd-stat__value { color: rgb(var(--accent)); } .cmd-stat--premium .cmd-stat__value { color: rgb(var(--signal-cyan)); } /* ── 4) Main grid (left main + right rail) ───────────────────── */ .cmd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-bottom: 22px; } .cmd-grid__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cmd-grid__rail { display: flex; flex-direction: column; gap: 14px; } /* ── 5) Generic panel chrome ─────────────────────────────────── */ .cmd-panel { border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.55); overflow: hidden; display: flex; flex-direction: column; } .cmd-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.45); } .cmd-panel__eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; color: rgb(var(--text-muted)); margin-bottom: 4px; } .cmd-panel__title { font-size: 15px; font-weight: 700; color: rgb(var(--text-primary)); letter-spacing: -0.01em; margin: 0; } .cmd-panel__pulse { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-pill); background: rgb(var(--signal-lime) / 0.08); border: 1px solid rgb(var(--signal-lime) / 0.3); color: rgb(var(--signal-lime)); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; } .cmd-panel__pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--signal-lime)); box-shadow: 0 0 8px rgb(var(--signal-lime)); animation: cmd-pulse 1.6s ease-in-out infinite; } @keyframes cmd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .cmd-panel__count { font-size: 12px; color: rgb(var(--text-muted)); padding: 2px 8px; border-radius: var(--r-pill); background: rgb(var(--bg-base) / 0.5); } .cmd-panel__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-surface-2) / 0.3); font-size: 11px; color: rgb(var(--text-muted)); } .cmd-panel__foot-link { color: rgb(var(--accent)); font-weight: 600; font-size: 11.5px; text-decoration: none; } .cmd-panel__foot-link:hover { text-decoration: underline; } .cmd-panel__foot-chip { padding: 2px 7px; border-radius: var(--r-pill); background: rgb(var(--signal-lime) / 0.1); color: rgb(var(--signal-lime)); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; } /* ── 6) Gains panel (live or featured) ───────────────────────── */ .cmd-gains__id { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgb(var(--border-hairline) / 0.4); border-bottom: 1px solid rgb(var(--border-hairline)); } .cmd-gains__id > div { background: rgb(var(--bg-surface) / 0.55); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; } .cmd-gains__id dt { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; color: rgb(var(--text-muted)); margin: 0; text-transform: uppercase; } .cmd-gains__id dd { font-size: 13px; color: rgb(var(--text-primary)); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-gains__stages { list-style: none; margin: 0; padding: 0; } .cmd-gains__stage { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) 80px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.55); } .cmd-gains__stage:last-child { border-bottom: 0; } .cmd-gains__stages--featured .cmd-gains__stage { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 80px; } .cmd-gains__stage-name { font-weight: 700; color: rgb(var(--text-primary)); font-size: 13px; letter-spacing: -0.01em; } .cmd-gains__stage-sub { display: block; font-weight: 500; color: rgb(var(--text-muted)); font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .cmd-gains__stage-power { color: rgb(var(--text-secondary)); font-size: 12px; } .cmd-gains__stage-power strong { color: rgb(var(--text-primary)); font-size: 14px; font-weight: 700; } .cmd-gains__stage-power small { font-size: 9.5px; color: rgb(var(--text-muted)); letter-spacing: 0.06em; text-transform: uppercase; } .cmd-gains__stage-delta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; } .cmd-gains__delta--hp { color: rgb(var(--signal-lime)); font-weight: 700; letter-spacing: 0.02em; } .cmd-gains__delta--nm { color: rgb(var(--signal-cyan)); font-weight: 700; letter-spacing: 0.02em; } .cmd-gains__stage-bar { height: 4px; border-radius: 2px; background: rgb(var(--bg-base) / 0.5); overflow: hidden; } .cmd-gains__stage-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--accent-hot)), rgb(var(--accent))); box-shadow: 0 0 8px rgb(var(--accent) / 0.5); } /* ── 7) Activity feed ────────────────────────────────────────── */ .cmd-activity__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; } .cmd-activity__item { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.5); font-size: 11.5px; } .cmd-activity__item:last-child { border-bottom: 0; } .cmd-activity__item:hover { background: rgb(var(--accent) / 0.04); } .cmd-activity__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-tight); background: rgb(var(--bg-base) / 0.5); color: rgb(var(--text-muted)); font-size: 12px; border: 1px solid rgb(var(--border-hairline)); } .cmd-activity__icon--accent { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); background: rgb(var(--accent) / 0.08); } .cmd-activity__icon--cyan { color: rgb(var(--signal-cyan)); border-color: rgb(var(--signal-cyan) / 0.4); background: rgb(var(--signal-cyan) / 0.08); } .cmd-activity__icon--lime { color: rgb(var(--signal-lime)); border-color: rgb(var(--signal-lime) / 0.4); background: rgb(var(--signal-lime) / 0.08); } .cmd-activity__icon--amber { color: rgb(var(--signal-amber)); border-color: rgb(var(--signal-amber) / 0.4); background: rgb(var(--signal-amber) / 0.08); } .cmd-activity__icon--crimson { color: rgb(var(--signal-crimson)); border-color: rgb(var(--signal-crimson) / 0.4); background: rgb(var(--signal-crimson) / 0.08); } .cmd-activity__event { color: rgb(var(--text-primary)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; } .cmd-activity__detail { color: rgb(var(--text-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .cmd-activity__time { color: rgb(var(--text-muted)); font-size: 10.5px; text-align: right; white-space: nowrap; } /* ── 8) News panel ───────────────────────────────────────────── */ .cmd-news__list { list-style: none; margin: 0; padding: 0; } .cmd-news__item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.5); } .cmd-news__item:last-child { border-bottom: 0; } .cmd-news__date { font-size: 10px; color: rgb(var(--accent)); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; padding-top: 2px; } .cmd-news__item strong { display: block; color: rgb(var(--text-primary)); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 3px; } .cmd-news__item p { margin: 0; color: rgb(var(--text-secondary)); font-size: 11.5px; line-height: 1.45; } /* ── 9) Quick actions ────────────────────────────────────────── */ .cmd-quick__list { list-style: none; margin: 0; padding: 0; } .cmd-quick__item { display: grid; grid-template-columns: 32px 1fr 16px; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: inherit; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.5); transition: background var(--motion-fast); } .cmd-quick__item:last-child { border-bottom: 0; } .cmd-quick__item:hover { background: rgb(var(--accent) / 0.05); } .cmd-quick__item:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; } .cmd-quick__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-tight); background: rgb(var(--bg-base) / 0.5); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--accent)); } .cmd-quick__body { display: flex; flex-direction: column; min-width: 0; } .cmd-quick__body strong { color: rgb(var(--text-primary)); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } .cmd-quick__body small { color: rgb(var(--text-muted)); font-size: 10.5px; margin-top: 2px; } .cmd-quick__arrow { color: rgb(var(--text-muted)); font-size: 14px; transition: transform var(--motion-fast), color var(--motion-fast); } .cmd-quick__item:hover .cmd-quick__arrow { color: rgb(var(--accent)); transform: translateX(2px); } /* ── 10) Empty state ─────────────────────────────────────────── */ .cmd-empty { padding: 24px 16px; text-align: left; color: rgb(var(--text-secondary)); font-size: 12.5px; } .cmd-empty p { margin: 0 0 12px; } .cmd-empty--center { text-align: center; padding: 40px 16px; border: 1px dashed rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.4); } /* ── 11) Recent files carousel ───────────────────────────────── */ .cmd-recent { margin-bottom: 24px; } .cmd-recent__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .cmd-recent__head .cmd-panel__title { font-size: 16px; } .cmd-recent__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; /* Custom scrollbar */ scrollbar-width: thin; scrollbar-color: rgb(var(--accent) / 0.5) transparent; } .cmd-recent__rail::-webkit-scrollbar { height: 6px; } .cmd-recent__rail::-webkit-scrollbar-thumb { background: rgb(var(--accent) / 0.4); border-radius: 3px; } .cmd-recent__rail::-webkit-scrollbar-track { background: transparent; } .cmd-recent__card { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); background: rgb(var(--bg-surface) / 0.6); text-decoration: none; color: inherit; transition: border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); scroll-snap-align: start; overflow: hidden; } .cmd-recent__card:hover { border-color: rgb(var(--accent) / 0.5); transform: translateY(-1px); box-shadow: 0 6px 16px rgb(0 0 0 / 0.3); } .cmd-recent__card--match { border-left: 3px solid rgb(var(--signal-lime) / 0.5); } .cmd-recent__card--miss { border-left: 3px solid rgb(var(--signal-amber) / 0.4); } .cmd-recent__card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.06em; } .cmd-recent__status { display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--text-muted)); font-weight: 700; } .cmd-recent__status-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--text-muted)); } .cmd-recent__status-dot--ok { background: rgb(var(--signal-lime)); box-shadow: 0 0 4px rgb(var(--signal-lime)); } .cmd-recent__status-dot--miss { background: rgb(var(--signal-amber)); } .cmd-recent__time { color: rgb(var(--text-muted)); font-size: 9.5px; } .cmd-recent__name { font-weight: 700; font-size: 13px; color: rgb(var(--text-primary)); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmd-recent__veh { font-size: 12px; color: rgb(var(--text-secondary)); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmd-recent__veh--miss { color: rgb(var(--signal-amber)); font-style: italic; font-size: 11.5px; } .cmd-recent__id { margin: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; } .cmd-recent__id > div { display: grid; grid-template-columns: 36px 1fr; gap: 6px; font-size: 10.5px; } .cmd-recent__id dt { color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; margin: 0; } .cmd-recent__id dd { color: rgb(var(--text-primary)); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-recent__card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgb(var(--border-hairline) / 0.5); color: rgb(var(--text-muted)); font-size: 10px; letter-spacing: 0.04em; } /* ── Responsive: tablet ──────────────────────────────────────── */ @media (max-width: 980px) { .cmd-grid { grid-template-columns: 1fr; } .cmd-stat-strip { grid-template-columns: repeat(2, 1fr); } } /* ── Responsive: mobile ──────────────────────────────────────── */ @media (max-width: 640px) { .cmd-stat-strip { grid-template-columns: 1fr; gap: 8px; } .cmd-stat { min-height: 110px; padding: 12px 14px; } .cmd-stat__value { font-size: 28px; } .cmd-header__title { font-size: 24px; } .cmd-header__actions { width: 100%; } .cmd-header__actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; } .cmd-gains__stage { grid-template-columns: 1fr auto; grid-template-areas: "name delta" "power power" "bar bar"; gap: 6px 10px; } .cmd-gains__stage-name { grid-area: name; } .cmd-gains__stage-power { grid-area: power; } .cmd-gains__stage-delta { grid-area: delta; flex-direction: row; gap: 6px; } .cmd-gains__stage-bar { grid-area: bar; } .cmd-gains__id { grid-template-columns: repeat(2, 1fr); } .cmd-activity__item { grid-template-columns: 22px 1fr auto; grid-template-areas: "icon event time" "icon detail detail"; gap: 4px 10px; } .cmd-activity__icon { grid-area: icon; } .cmd-activity__event { grid-area: event; } .cmd-activity__detail { grid-area: detail; } .cmd-activity__time { grid-area: time; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .cmd-panel__pulse-dot { animation: none; } .cmd-recent__card:hover { transform: none; } } /* ==================================================================== ACCOUNT BOARD -- license + today/week/lifetime + breakdowns Single source of truth so the new dashboard cards stay theme-aligned. ==================================================================== */ .acc-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; } .acc-card { background: rgb(var(--bg-surface-2) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 132px; transition: border-color 180ms ease, transform 180ms ease; } .acc-card:hover { border-color: rgb(var(--accent) / 0.4); } .acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .acc-card__eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-muted)); } .acc-card__chip { padding: 3px 8px; border-radius: 999px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; background: rgb(var(--bg-surface) / 0.6); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-secondary)); } .acc-card__chip--good { background: rgb(var(--signal-ok) / 0.12); border-color: rgb(var(--signal-ok) / 0.4); color: rgb(var(--signal-ok)); } .acc-card__chip--warn { background: rgb(var(--signal-amber) / 0.12); border-color: rgb(var(--signal-amber) / 0.4); color: rgb(var(--signal-amber)); } .acc-card__chip--info { background: rgb(var(--signal-cyan) / 0.12); border-color: rgb(var(--signal-cyan) / 0.4); color: rgb(var(--signal-cyan)); } .acc-card__chip--mut { background: rgb(var(--bg-surface) / 0.4); } .acc-card__title { font-size: 16px; font-weight: 600; color: rgb(var(--text-primary)); line-height: 1.2; } .acc-card__row { display: flex; align-items: baseline; gap: 6px; margin-top: auto; } .acc-card__big { font-size: 32px; font-weight: 700; line-height: 1; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; } .acc-card__big-unit { font-size: 12px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.08em; } .acc-card__split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; } .acc-card__split-cell { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-right: 1px solid rgb(var(--border-hairline)); } .acc-card__split-cell:last-child { border-right: 0; } .acc-card__split-num { font-size: 18px; font-weight: 600; line-height: 1; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; } .acc-card__split-cell small { font-size: 10px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.06em; } .acc-card__foot { padding-top: 8px; border-top: 1px solid rgb(var(--border-hairline)); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .acc-card__foot small { color: rgb(var(--text-muted)); font-size: 11px; } .acc-card__foot strong { color: rgb(var(--text-secondary)); } .acc-card__cta { color: rgb(var(--accent)); font: 500 12px/1 var(--font-body); text-decoration: none; transition: opacity 150ms; } .acc-card__cta:hover { opacity: 0.85; } .acc-card__bar { height: 6px; background: rgb(var(--bg-surface) / 0.6); border-radius: 999px; overflow: hidden; } .acc-card__bar > span { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-hot))); border-radius: 999px; } /* License-card tier accents */ .acc-card--license { position: relative; overflow: hidden; } .acc-card--license::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgb(var(--accent) / 0.08), transparent 60%); pointer-events: none; } .acc-tier--vip .acc-card__title { color: rgb(var(--accent-cool)); } .acc-tier--vip::before { background: radial-gradient(circle at 100% 0%, rgb(var(--accent) / 0.18), transparent 55%); } .acc-tier--premium .acc-card__title { color: rgb(var(--signal-cyan)); } .acc-tier--premium::before { background: radial-gradient(circle at 100% 0%, rgb(var(--signal-cyan) / 0.14), transparent 60%); } /* Catalog breakdowns row */ .acc-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; } .acc-bd { background: rgb(var(--bg-surface-2) / 0.45); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 14px 16px; } .acc-bd__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .acc-bd__title { font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-secondary)); } .acc-bd__head small { color: rgb(var(--text-muted)); font-size: 11px; } .acc-bd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .acc-bd__list li { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 10px; font-size: 12.5px; } .acc-bd__label { color: rgb(var(--text-secondary)); font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-bd__bar { height: 5px; background: rgb(var(--bg-surface) / 0.5); border-radius: 999px; overflow: hidden; } .acc-bd__bar > span { display: block; height: 100%; background: rgb(var(--accent)); border-radius: 999px; } .acc-bd__count { color: rgb(var(--text-secondary)); font-size: 11px; min-width: 28px; text-align: right; } /* Light-mode token overrides for the board */ [data-theme="light"] .acc-card, [data-theme="light"] .acc-bd { background: rgb(var(--bg-surface)); border-color: rgb(var(--border-hairline)); } [data-theme="light"] .acc-card__chip { background: rgb(var(--bg-surface-2)); } /* Mobile compaction */ @media (max-width: 640px) { .acc-card__split { grid-template-columns: repeat(2, 1fr); gap: 4px; } .acc-card__split-cell:nth-child(2) { border-right: 0; } .acc-card__big { font-size: 26px; } .acc-card__split-num { font-size: 16px; } } /* ==================================================================== RESPONSIVE COLLAPSE -- mobile-first card-view fallbacks for tables that were grid/table-only on desktop. Single source of truth so we don't duplicate breakpoints in every blade. ==================================================================== */ /* Dashboard stat strip: 4 → 2 → 1 columns */ @media (max-width: 980px) { .cmd-stat-strip { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 540px) { .cmd-stat-strip { grid-template-columns: 1fr !important; } .cmd-stat__value { font-size: 28px !important; } .cmd-stat__spark { display: none; } } /* Account board: 6 cards → 2 → 1 */ @media (max-width: 1100px) { .acc-board { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 580px) { .acc-board { grid-template-columns: 1fr !important; } .acc-card__big { font-size: 26px; } .acc-card { min-height: auto; padding: 12px 14px; } } /* Catalog breakdowns: 3 → 1 */ @media (max-width: 980px) { .acc-breakdowns { grid-template-columns: 1fr !important; } } /* my-tunes table -- collapse to card view */ @media (max-width: 768px) { .my-tunes table thead { display: none; } .my-tunes table, .my-tunes table tbody, .my-tunes table tr, .my-tunes table td { display: block; width: 100% !important; } .my-tunes__row { background: rgb(var(--bg-surface-2) / 0.4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); margin-bottom: 12px; padding: 12px 14px; position: relative; } .my-tunes table td { padding: 4px 0; border: 0; } .my-tunes table td:before { content: attr(data-label); display: inline-block; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--text-muted)); min-width: 70px; } .my-tunes__when, .my-tunes__cta { display: flex !important; justify-content: space-between; align-items: center; } .my-tunes__cta { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgb(var(--border-hairline)) !important; } } /* Library results table -- collapse to card */ @media (max-width: 880px) { .file-library__table thead { display: none; } .file-library__table, .file-library__table tbody, .file-library__table tr, .file-library__table td { display: block; } .catalog-row { background: rgb(var(--bg-surface-2) / 0.4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); margin-bottom: 12px; padding: 12px 14px; position: relative; } .catalog-row td { padding: 6px 0 !important; border: 0 !important; } } /* Compare slot pickers stack on mobile */ @media (max-width: 720px) { .cmp-slot-b__pickers { grid-template-columns: 1fr !important; gap: 14px !important; } } /* Editor toolbar tighter on mobile */ @media (max-width: 540px) { .ide-export-group { flex-direction: column; gap: 4px; align-items: stretch; } .hide-on-mobile { display: none; } .ide-btn { padding: 6px 10px; font-size: 11.5px; } .ide-titlebar__file { font-size: 11px; max-width: 100%; } } /* Dyno generator: form/preview stack instead of side-by-side */ @media (max-width: 1080px) { .dyno-grid { grid-template-columns: 1fr !important; } } /* Dashboard search row + actions wrap */ @media (max-width: 640px) { .cmd-header__actions { flex-wrap: wrap; gap: 6px; } .cmd-header__title { font-size: 28px; } } /* Hero / landing tighter */ @media (max-width: 540px) { .hero__title { font-size: 32px !important; line-height: 1.1; } .hero__sub { font-size: 15px !important; } } /* Tooltips disabled on touch is already in action-system.css. No change. */ /* Touch tap target enforcement -- 44x44 minimum on mobile */ @media (hover: none) { button, .btn, [role="button"], a.btn { min-height: 36px; } .ide-btn, .my-tunes__pick, .acc-card__chip { min-height: 32px; } } /* my-tunes per-row action menu */ .my-tunes__menu { display: inline-block; position: relative; margin-left: 6px; } .my-tunes__menu summary { list-style: none; cursor: pointer; padding: 6px; border-radius: 6px; color: rgb(var(--text-muted)); transition: background 150ms, color 150ms; } .my-tunes__menu summary::-webkit-details-marker { display: none; } .my-tunes__menu summary:hover { background: rgb(var(--bg-surface-2)); color: rgb(var(--text-primary)); } .my-tunes__menu[open] summary { background: rgb(var(--bg-surface-2)); color: rgb(var(--accent)); } .my-tunes__menu-panel { position: absolute; top: calc(100% + 4px); right: 0; width: 220px; background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5); padding: 4px; z-index: var(--z-popover); } .my-tunes__menu-form { margin: 0; } .my-tunes__menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 5px; font: 500 12.5px/1.2 var(--font-body); color: rgb(var(--text-primary)); text-align: left; cursor: pointer; text-decoration: none; transition: background 120ms; } .my-tunes__menu-item:hover { background: rgb(var(--accent) / 0.1); } .my-tunes__menu-item--danger { color: rgb(var(--signal-crimson)); } .my-tunes__menu-item--danger:hover { background: rgb(var(--signal-crimson) / 0.12); } /* "How it works" + "Why us" landing sections */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 16px; } @media (max-width: 880px) { .how-grid { grid-template-columns: 1fr; } } .how-step { position: relative; background: rgb(var(--bg-surface-2) / 0.5); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 26px 22px; transition: border-color 250ms ease, transform 250ms ease; } .how-step:hover { border-color: rgb(var(--accent) / 0.45); transform: translateY(-2px); } .how-step__num { position: absolute; top: 14px; right: 18px; font-size: 32px; font-weight: 700; line-height: 1; color: rgb(var(--text-muted)); opacity: 0.18; letter-spacing: -0.02em; } .how-step__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); border-radius: 14px; margin-bottom: 16px; } .how-step__title { font-size: 19px; margin: 0 0 10px; line-height: 1.25; color: rgb(var(--text-primary)); } .how-step__body { font-size: 14px; line-height: 1.6; color: rgb(var(--text-secondary)); margin-bottom: 14px; } .how-step__bullets { list-style: none; margin: 0; padding: 0; } .how-step__bullets li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: rgb(var(--text-secondary)); margin-bottom: 6px; } .how-step__bullets li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: rgb(var(--accent)); border-radius: 50%; } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; } } .why-cell { background: rgb(var(--bg-surface-2) / 0.4); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 20px 18px; } .why-cell--us { background: rgb(var(--accent) / 0.05); border-color: rgb(var(--accent) / 0.4); box-shadow: 0 0 0 1px rgb(var(--accent) / 0.2), 0 12px 32px -16px rgb(var(--accent) / 0.4); transform: scale(1.02); } .why-cell__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .why-cell__cross { color: rgb(var(--signal-crimson)); font-size: 18px; font-weight: 700; flex-shrink: 0; } .why-cell__check { color: rgb(var(--signal-ok)); font-size: 18px; font-weight: 700; flex-shrink: 0; } .why-cell__name { font: 600 14px/1.2 var(--font-body); color: rgb(var(--text-primary)); } .why-cell--us .why-cell__name { color: rgb(var(--accent)); } .why-cell__list { list-style: none; margin: 0; padding: 0; } .why-cell__list li { font-size: 13px; line-height: 1.55; color: rgb(var(--text-secondary)); padding: 5px 0 5px 20px; border-bottom: 1px dashed rgb(var(--border-hairline) / 0.5); position: relative; } .why-cell__list li:last-child { border-bottom: 0; } .why-cell__list li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 6px; height: 1px; background: rgb(var(--text-muted)); } .why-cell--us .why-cell__list li::before { background: rgb(var(--accent)); } /* 30-day uploads area chart on dashboard */ .cmd-area-chart { background: rgb(var(--bg-surface-2) / 0.45); border: 1px solid rgb(var(--border-hairline)); border-radius: var(--r-default); padding: 18px 20px 12px; margin-bottom: 18px; } .cmd-area-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; } .cmd-area-chart__eyebrow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-muted)); } .cmd-area-chart__title { font-size: 24px; font-weight: 600; margin: 4px 0 0; color: rgb(var(--text-primary)); } .cmd-area-chart__unit { font-size: 13px; color: rgb(var(--text-muted)); font-weight: 400; } .cmd-area-chart__legend { display: flex; align-items: center; gap: 14px; font-size: 11px; color: rgb(var(--text-secondary)); } .cmd-area-chart__legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; } .cmd-area-chart__chip { padding: 3px 8px; background: rgb(var(--signal-ok) / 0.12); border: 1px solid rgb(var(--signal-ok) / 0.4); color: rgb(var(--signal-ok)); border-radius: 999px; font-size: 10.5px; font-weight: 500; } .cmd-area-chart__svg { width: 100%; height: auto; display: block; max-height: 160px; } /* ==================================================================== DZ vehicle confirm panel -- inline above action bar in matched state ==================================================================== */ .dz-vehicle-confirm { margin: 16px 0 12px; } .dz-vehicle-confirm__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgb(var(--accent) / 0.05); border: 1px dashed rgb(var(--accent) / 0.35); border-radius: 10px; } .dz-vehicle-confirm__row-icon { flex: 0 0 auto; width: 36px; height: 36px; background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; } .dz-vehicle-confirm__row-body { flex: 1; min-width: 0; } .dz-vehicle-confirm__row-body strong { display: block; font-size: 14px; color: rgb(var(--text-primary)); margin-bottom: 2px; } .dz-vehicle-confirm__row-body small { font-size: 11.5px; color: rgb(var(--text-muted)); } /* Vehicle picker — status-coloured borders + brand badge + status pill */ .dz-vehicle-confirm__row--saved { background: rgb(var(--lime) / 0.05); border-color: rgb(var(--lime) / 0.45); } .dz-vehicle-confirm__row--detected{ background: rgb(var(--cyan) / 0.05); border-color: rgb(var(--cyan) / 0.40); } .dz-vehicle-confirm__row--unknown { background: rgb(var(--amber) / 0.05); border-color: rgb(var(--amber) / 0.40); } .dz-vehicle-confirm__brand { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgb(var(--accent) / 0.20), rgb(var(--cyan) / 0.10)); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / 0.40); font: 700 14px var(--font-display); box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset; overflow: visible; } .dz-vehicle-confirm__row--saved .dz-vehicle-confirm__brand { background: linear-gradient(135deg, rgb(var(--lime) / 0.22), rgb(var(--lime) / 0.08)); color: rgb(var(--lime)); border-color: rgb(var(--lime) / 0.45); } .dz-vehicle-confirm__row--detected .dz-vehicle-confirm__brand { background: linear-gradient(135deg, rgb(var(--cyan) / 0.22), rgb(var(--cyan) / 0.08)); color: rgb(var(--cyan)); border-color: rgb(var(--cyan) / 0.45); } .dz-vehicle-confirm__row--unknown .dz-vehicle-confirm__brand { background: linear-gradient(135deg, rgb(var(--amber) / 0.22), rgb(var(--amber) / 0.08)); color: rgb(var(--amber)); border-color: rgb(var(--amber) / 0.45); } .dz-vehicle-confirm__brand-ring { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.30; animation: dz-brand-ring 2.4s ease-out infinite; pointer-events: none; } .dz-vehicle-confirm__row--unknown .dz-vehicle-confirm__brand-ring { animation-duration: 1.6s; opacity: 0.45; } .dz-vehicle-confirm__row--saved .dz-vehicle-confirm__brand-ring { animation: none; opacity: 0; } @keyframes dz-brand-ring { 0% { transform: scale(0.95); opacity: 0.45; } 70% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1.15); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dz-vehicle-confirm__brand-ring { animation: none; } } .dz-vehicle-confirm__title-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dz-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font: 600 10px var(--font-mono); letter-spacing: 0.08em; border: 1px solid; line-height: 1.6; } .dz-status-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: dz-status-pulse 1.6s ease-out infinite; } .dz-status-badge--lime { color: rgb(var(--lime)); background: rgb(var(--lime) / 0.10); border-color: rgb(var(--lime) / 0.40); } .dz-status-badge--cyan { color: rgb(var(--cyan)); background: rgb(var(--cyan) / 0.10); border-color: rgb(var(--cyan) / 0.40); } .dz-status-badge--amber { color: rgb(var(--amber)); background: rgb(var(--amber) / 0.10); border-color: rgb(var(--amber) / 0.40); } .dz-status-badge--lime .dz-status-badge__dot { animation: none; } @keyframes dz-status-pulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 6px transparent; opacity: 0.65; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dz-status-badge__dot { animation: none; } } .dz-vehicle-confirm__cta { transition: background .15s ease, transform .15s ease; } .dz-vehicle-confirm__cta.is-saved { background: rgb(var(--lime) / 0.12); border-color: rgb(var(--lime) / 0.35); color: rgb(var(--lime)); } /* ───────────────────────────────────────────────────────────────────── Admin · Library uploader ───────────────────────────────────────────────────────────────────── */ .admin-libupload { padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; } .admin-libupload__section { display: flex; flex-direction: column; gap: 12px; } .admin-libupload__eyebrow { font: 600 11px var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: rgb(var(--accent)); padding-bottom: 6px; border-bottom: 1px solid rgb(var(--border-hairline)); } .admin-libupload__drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; border: 1.5px dashed rgb(var(--border-hairline)); border-radius: 12px; background: rgb(var(--bg-base) / 0.45); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .admin-libupload__drop:hover, .admin-libupload__drop.is-hover { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.06); } .admin-libupload__drop-icon { color: rgb(var(--accent)); flex: 0 0 36px; } .admin-libupload__drop-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .admin-libupload__drop-text strong { font: 600 14px var(--font-display); } .admin-libupload__drop-text span { font-size: 12px; color: rgb(var(--text-muted)); } .admin-libupload__upload-spin { display: inline-flex; gap: 6px; align-items: center; color: rgb(var(--cyan)); font: 600 11.5px var(--font-mono); letter-spacing: 0.04em; } .admin-libupload__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .admin-libupload__field { display: flex; flex-direction: column; gap: 4px; } .admin-libupload__field--wide { grid-column: 1 / -1; } .admin-libupload__field span { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--text-muted)); } .admin-libupload__field span em { color: rgb(var(--accent)); font-style: normal; } .admin-libupload__field input, .admin-libupload__field select, .admin-libupload__field textarea { background: rgb(var(--bg-base) / 0.55); border: 1px solid rgb(var(--border-hairline)); padding: 8px 10px; border-radius: 7px; font: 13px var(--font-body); color: rgb(var(--text-primary)); width: 100%; } .admin-libupload__field input:focus, .admin-libupload__field select:focus, .admin-libupload__field textarea:focus { outline: 2px solid rgb(var(--accent)); outline-offset: -1px; } .admin-libupload__err { color: rgb(var(--danger)); font-size: 11.5px; margin-top: 2px; } .admin-libupload__error { padding: 10px 14px; background: rgb(var(--danger) / 0.08); border: 1px solid rgb(var(--danger) / 0.30); border-radius: 8px; color: rgb(var(--danger)); font-size: 13px; } .admin-libupload__success { padding: 10px 14px; background: rgb(var(--lime) / 0.10); border: 1px solid rgb(var(--lime) / 0.35); border-radius: 8px; color: rgb(var(--lime)); font-size: 13px; } .admin-libupload__foot { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed rgb(var(--border-hairline)); } .admin-libupload__recent { padding: 18px 20px; align-self: start; position: sticky; top: 80px; } .admin-libupload__recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .admin-libupload__recent-head h3 { font: 600 14px var(--font-display); margin: 0; } .admin-libupload__count { background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / 0.30); padding: 2px 8px; border-radius: 999px; font: 600 10.5px var(--font-mono); letter-spacing: 0.06em; } .admin-libupload__recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .admin-libupload__recent-item { padding: 10px 12px; border: 1px solid rgb(var(--border-hairline)); border-radius: 8px; background: rgb(var(--bg-elevated) / 0.30); } .admin-libupload__recent-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; } .admin-libupload__recent-line strong { font: 600 12.5px var(--font-display); } .admin-libupload__recent-meta { margin-top: 4px; font-size: 11.5px; color: rgb(var(--text-muted)); } .admin-libupload__recent-actions { display: flex; gap: 6px; margin-top: 6px; } .admin-libupload__del { color: rgb(var(--danger)); } .admin-libupload__del:hover { background: rgb(var(--danger) / 0.10); } @media (max-width: 980px) { .admin-libupload-page main .container > .grid { grid-template-columns: 1fr !important; } .admin-libupload__recent { position: relative; top: 0; } .admin-libupload__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .admin-libupload__grid { grid-template-columns: 1fr; } } .dz-vehicle-confirm__form { background: rgb(var(--bg-surface-2) / 0.5); border: 1px solid rgb(var(--accent) / 0.4); border-radius: 10px; padding: 14px 18px; } .dz-vehicle-confirm__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dz-vehicle-confirm__eyebrow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--accent)); } .dz-vehicle-confirm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; } .dz-vehicle-confirm__field { display: flex; flex-direction: column; gap: 4px; } .dz-vehicle-confirm__field span { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--text-muted)); } .dz-vehicle-confirm__field input { background: rgb(var(--bg-base) / 0.5); border: 1px solid rgb(var(--border-hairline)); padding: 7px 10px; border-radius: 6px; font: 13px var(--font-body); color: rgb(var(--text-primary)); } .dz-vehicle-confirm__field input:focus { outline: 2px solid rgb(var(--accent)); outline-offset: -1px; border-color: rgb(var(--accent)); } .dz-vehicle-confirm__foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed rgb(var(--border-hairline)); } .dz-vehicle-confirm__foot small { flex: 1; min-width: 220px; line-height: 1.5; } /* ───────────────────────────────────────────────────────────────────── My Tunes — Import wizard (.itproject + .xdf lanes) ───────────────────────────────────────────────────────────────────── */ .mt-import-wizard { padding: 0; overflow: hidden; } .mt-import-wizard__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; color: inherit; text-align: left; transition: background .15s ease; } .mt-import-wizard__head:hover { background: rgb(var(--accent) / 0.04); } .mt-import-wizard__head-left { display: flex; gap: 14px; align-items: center; min-width: 0; } .mt-import-wizard__icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(var(--accent) / 0.18), rgb(var(--cyan) / 0.10)); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / 0.25); } .mt-import-wizard__title { font: 600 15px var(--font-display); margin-bottom: 2px; } .mt-import-wizard__sub { font-size: 12.5px; color: rgb(var(--text-secondary)); line-height: 1.5; } .mt-import-wizard__head-right { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; } .mt-import-wizard__chip { font: 600 10.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-muted)); } .mt-import-wizard__chip--proj { background: rgb(var(--accent) / 0.10); color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.30); } .mt-import-wizard__chip--xdf { background: rgb(var(--cyan) / 0.10); color: rgb(var(--cyan)); border-color: rgb(var(--cyan) / 0.30); } .mt-import-wizard__chip--soon { background: rgb(var(--bg-elevated) / 0.5); opacity: 0.65; cursor: help; } .mt-import-wizard__chev { transition: transform .2s ease; opacity: 0.5; margin-left: 4px; } .mt-import-wizard__body { border-top: 1px solid rgb(var(--border-hairline)); padding: 20px 22px 22px; display: grid; gap: 18px; } @media (min-width: 900px) { .mt-import-wizard__body { grid-template-columns: 1fr 1fr; } .mt-import-wizard__footer { grid-column: 1 / -1; } } .mt-import-wizard__lane { border: 1px solid rgb(var(--border-hairline)); border-radius: 12px; padding: 14px 16px 16px; background: rgb(var(--bg-elevated) / 0.32); display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease, background .15s ease; } .mt-import-wizard__lane.is-dragging { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.06); } .mt-import-wizard__lane.is-uploading { border-color: rgb(var(--cyan) / 0.5); } .mt-import-wizard__lane.is-done { border-color: rgb(var(--lime) / 0.5); background: rgb(var(--lime) / 0.04); } .mt-import-wizard__lane.is-error { border-color: rgb(var(--danger) / 0.5); background: rgb(var(--danger) / 0.04); } .mt-import-wizard__lane-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; } .mt-import-wizard__lane-title { font: 600 13.5px var(--font-display); display: flex; align-items: center; gap: 7px; } .mt-import-wizard__lane-ext { font: 600 10.5px var(--font-mono); color: rgb(var(--text-muted)); letter-spacing: 0.06em; text-transform: uppercase; } .mt-import-wizard__lane-sub { font-size: 11.5px; line-height: 1.55; color: rgb(var(--text-secondary)); margin-top: 4px; } .mt-import-wizard__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .mt-import-wizard__dot--proj { background: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18); } .mt-import-wizard__dot--xdf { background: rgb(var(--cyan)); box-shadow: 0 0 0 3px rgb(var(--cyan) / 0.18); } .mt-import-wizard__status { font: 600 10.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgb(var(--bg-base) / 0.55); border: 1px solid rgb(var(--border-hairline)); color: rgb(var(--text-secondary)); flex: 0 0 auto; } .is-uploading .mt-import-wizard__status { color: rgb(var(--cyan)); border-color: rgb(var(--cyan) / 0.4); } .is-done .mt-import-wizard__status { color: rgb(var(--lime)); border-color: rgb(var(--lime) / 0.4); } .is-error .mt-import-wizard__status { color: rgb(var(--danger)); border-color: rgb(var(--danger) / 0.4); } .mt-import-wizard__field { display: flex; flex-direction: column; gap: 4px; } .mt-import-wizard__field span { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--text-muted)); } .mt-import-wizard__field select { background: rgb(var(--bg-base) / 0.55); border: 1px solid rgb(var(--border-hairline)); padding: 8px 10px; border-radius: 7px; font: 13px var(--font-body); color: rgb(var(--text-primary)); } .mt-import-wizard__field select:focus { outline: 2px solid rgb(var(--accent)); outline-offset: -1px; } .mt-import-wizard__drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px; border: 1.5px dashed rgb(var(--border-hairline)); border-radius: 10px; background: rgb(var(--bg-base) / 0.42); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .mt-import-wizard__drop:hover { border-color: rgb(var(--accent) / 0.5); } .mt-import-wizard__drop--hover { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.07); transform: scale(1.005); } .mt-import-wizard__drop--disabled { opacity: 0.45; cursor: not-allowed; } .mt-import-wizard__drop-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: rgb(var(--accent)); } .is-done .mt-import-wizard__drop-icon { color: rgb(var(--lime)); } .is-error .mt-import-wizard__drop-icon { color: rgb(var(--danger)); } .mt-import-wizard__drop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .mt-import-wizard__drop-text strong { font: 600 13px var(--font-display); } .mt-import-wizard__drop-text span { font-size: 11.5px; color: rgb(var(--text-muted)); } .mt-import-wizard__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--bg-base) / 0.6); overflow: hidden; border-radius: 0 0 10px 10px; } .mt-import-wizard__progress-bar { height: 100%; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--cyan))); transition: width .15s ease; } .mt-import-wizard__spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgb(var(--accent) / 0.25); border-top-color: rgb(var(--accent)); animation: mtiw-spin 720ms linear infinite; } @keyframes mtiw-spin { to { transform: rotate(360deg); } } .mt-import-wizard__result { border-top: 1px dashed rgb(var(--border-hairline)); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .mt-import-wizard__result-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mt-import-wizard__kbd { font: 600 10px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--text-muted)); padding: 2px 6px; border: 1px solid rgb(var(--border-hairline)); border-radius: 4px; } .mt-import-wizard__pill { display: inline-flex; gap: 5px; align-items: center; font: 600 11px var(--font-mono); letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: rgb(var(--lime) / 0.12); color: rgb(var(--lime)); border: 1px solid rgb(var(--lime) / 0.3); } .mt-import-wizard__pill--warn { background: rgb(var(--amber) / 0.12); color: rgb(var(--amber)); border-color: rgb(var(--amber) / 0.3); } .mt-import-wizard__error { padding: 9px 12px; background: rgb(var(--danger) / 0.08); border: 1px solid rgb(var(--danger) / 0.30); border-radius: 7px; color: rgb(var(--danger)); font-size: 12.5px; line-height: 1.5; } .mt-import-wizard__preview, .mt-import-wizard__warnings { border: 1px solid rgb(var(--border-hairline)); border-radius: 8px; padding: 0; overflow: hidden; } .mt-import-wizard__preview > summary, .mt-import-wizard__warnings > summary { padding: 8px 12px; cursor: pointer; font: 600 11.5px var(--font-mono); letter-spacing: 0.04em; color: rgb(var(--text-secondary)); background: rgb(var(--bg-elevated) / 0.4); } .mt-import-wizard__preview-table { width: 100%; border-collapse: collapse; font-size: 12px; } .mt-import-wizard__preview-table th { text-align: left; padding: 6px 10px; background: rgb(var(--bg-base) / 0.4); font: 600 10.5px var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgb(var(--text-muted)); } .mt-import-wizard__preview-table td { padding: 5px 10px; border-top: 1px solid rgb(var(--border-hairline)); } .mt-import-wizard__cat { display: inline-block; padding: 1px 7px; background: rgb(var(--accent) / 0.10); color: rgb(var(--accent)); border: 1px solid rgb(var(--accent) / 0.25); border-radius: 999px; font: 600 10px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .mt-import-wizard__warnings ul { margin: 0; padding: 8px 12px 10px 28px; font-size: 11.5px; color: rgb(var(--text-muted)); line-height: 1.6; } .mt-import-wizard__footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed rgb(var(--border-hairline)); } .mt-import-wizard__hint { font-size: 11.5px; color: rgb(var(--text-muted)); line-height: 1.5; flex: 1; min-width: 240px; } .mt-import-wizard__help-link { white-space: nowrap; } /* ───────────────────────────────────────────────────────────────────── Site footer (universal multi-column) ───────────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 80px; border-top: 1px solid rgb(var(--border-hairline)); background: linear-gradient(to bottom, rgb(var(--bg-base) / 0.6), rgb(var(--bg-elevated) / 0.4)); color: rgb(var(--text-secondary)); font-size: 13px; line-height: 1.65; } .site-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px 32px; padding: 56px 0 40px; } @media (max-width: 980px) { .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; } } .site-footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 360px; } .site-footer__tagline { font-size: 12.5px; line-height: 1.65; color: rgb(var(--text-muted)); margin: 0; } .site-footer__status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid rgb(var(--lime) / 0.30); background: rgb(var(--lime) / 0.06); border-radius: 999px; font: 600 11px var(--font-mono); letter-spacing: 0.05em; color: rgb(var(--lime)); text-decoration: none; width: max-content; max-width: 100%; transition: background .15s ease, border-color .15s ease; } .site-footer__status:hover { background: rgb(var(--lime) / 0.10); border-color: rgb(var(--lime) / 0.50); } .site-footer__status-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--lime)); box-shadow: 0 0 0 3px rgb(var(--lime) / 0.18); animation: site-footer-pulse 2.4s ease-out infinite; } @keyframes site-footer-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(var(--lime) / 0.18); } 50% { box-shadow: 0 0 0 6px rgb(var(--lime) / 0); } } @media (prefers-reduced-motion: reduce) { .site-footer__status-dot { animation: none; } } .site-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .site-footer__col-h { font: 700 11px var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: rgb(var(--text-primary)); margin-bottom: 4px; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__col a { color: rgb(var(--text-secondary)); text-decoration: none; transition: color .15s ease; } .site-footer__col a:hover { color: rgb(var(--accent)); } .site-footer__bottom { border-top: 1px solid rgb(var(--border-hairline)); padding: 18px 0; background: rgb(var(--bg-base) / 0.3); } .site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgb(var(--text-muted)); } .site-footer__copy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .site-footer__locale { display: inline-flex; align-items: center; gap: 8px; } .site-footer__locale-menu { position: relative; } .site-footer__locale-menu summary { cursor: pointer; list-style: none; padding: 3px 8px; border-radius: 4px; border: 1px solid rgb(var(--border-hairline)); font: 600 10.5px var(--font-mono); letter-spacing: 0.05em; color: rgb(var(--text-secondary)); } .site-footer__locale-menu summary::-webkit-details-marker { display: none; } .site-footer__locale-menu summary:hover { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); } .site-footer__locale-list { position: absolute; right: 0; bottom: calc(100% + 6px); background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--border-hairline)); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 140px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); z-index: 10; } .site-footer__locale-list form { margin: 0; } .site-footer__locale-list button { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 7px 10px; border-radius: 5px; color: rgb(var(--text-secondary)); font-size: 12.5px; } .site-footer__locale-list button:hover { background: rgb(var(--accent) / 0.08); color: rgb(var(--accent)); } /* ───────────────────────────────────────────────────────────────────── Trust bar ───────────────────────────────────────────────────────────────────── */ .trust-bar { padding: 36px 0 30px; border-block: 1px solid rgb(var(--border-hairline)); background: rgb(var(--bg-elevated) / 0.4); backdrop-filter: blur(8px); position: relative; overflow: hidden; } .trust-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgb(var(--accent) / 0.05), transparent 60%); pointer-events: none; } .trust-bar__lede { font: 600 12.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--text-secondary)); text-align: center; margin-bottom: 22px; display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; } .trust-bar__pulse { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.20); animation: trust-bar-pulse 2.2s ease-out infinite; flex: 0 0 auto; } @keyframes trust-bar-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(var(--accent) / 0.20); } 50% { box-shadow: 0 0 0 7px rgb(var(--accent) / 0); } } @media (prefers-reduced-motion: reduce) { .trust-bar__pulse { animation: none; } } .trust-bar__metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } .trust-bar__metric { text-align: center; min-width: 0; } .trust-bar__metric dt { font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: 6px; } .trust-bar__metric dd { margin: 0; display: inline-flex; align-items: baseline; gap: 2px; } .trust-bar__num { font: 700 28px var(--font-display); color: rgb(var(--accent)); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, rgb(var(--accent)), rgb(var(--cyan))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .trust-bar__num-unit { font: 700 16px var(--font-display); color: rgb(var(--text-muted)); margin-left: 2px; } @media (max-width: 760px) { .trust-bar__metrics { grid-template-columns: repeat(2, 1fr); gap: 18px; } .trust-bar__metric:last-child { grid-column: 1 / -1; } } @media (max-width: 380px) { .trust-bar__metrics { grid-template-columns: 1fr; } .trust-bar__metric:last-child { grid-column: auto; } .trust-bar__num { font-size: 24px; } } /* ───────────────────────────────────────────────────────────────────── Sticky scroll CTA ───────────────────────────────────────────────────────────────────── */ .sticky-cta { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 80; opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .32s ease; } .sticky-cta.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .sticky-cta__inner { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; background: rgb(var(--bg-elevated)); border: 1px solid rgb(var(--accent) / 0.30); border-radius: 999px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.40), 0 0 0 1px rgb(var(--accent) / 0.10) inset; backdrop-filter: blur(10px); max-width: calc(100vw - 24px); } .sticky-cta__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sticky-cta__copy strong { font: 600 13px var(--font-display); color: rgb(var(--text-primary)); white-space: nowrap; } .sticky-cta__copy span { font-size: 11.5px; color: rgb(var(--text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 540px) { .sticky-cta { left: 12px; right: 12px; bottom: 12px; transform: translateY(20px); width: auto; } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta__inner { border-radius: 14px; } .sticky-cta__copy span { display: none; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity .15s ease; } }