/* /redesign.css — Spencer's portal v2 design system * * Watery-blue, Apple/Stripe-inspired. Activated by `data-theme="v2"` on * (the documentElement). The inline gate-script in index.html sets * the attribute when ?preview=1 is in the URL, then persists the choice in * localStorage so the customer doesn't need to keep re-adding the param. * Real customers (no flag) see production unchanged. * * Strategy: override the existing class names (.card, .btn-primary, * .form-group, .login-card, .stat-card, .bottom-nav, etc.) so the existing * HTML inherits the new look with no markup changes — zero risk to JS * bindings or panel logic. Net-new components use the v2-* prefix. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ── Tokens ─────────────────────────────────────────────────────────── */ [data-theme="v2"] { --v2-ink: #0a1a30; --v2-water-deep: #094374; --v2-water: #1a6fb8; --v2-water-2: #2a8fd9; --v2-sky: #87bfeb; --v2-mist: #cee2f3; --v2-foam: #eef6fc; --v2-paper: #ffffff; --v2-paper-2: #f7fafc; --v2-line: #e3edf5; --v2-line-2: #d2dfeb; --v2-text: #122237; --v2-text-2: #3a4d63; --v2-text-muted: #5b6c80; --v2-text-faint: #94a4b8; --v2-success: #1f9c61; --v2-warn: #b46300; --v2-danger: #b3392b; --v2-font: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --v2-shadow-1: 0 1px 2px rgba(10,26,48,.04), 0 0 0 1px rgba(10,26,48,.04); --v2-shadow-2: 0 4px 14px rgba(10,26,48,.06), 0 1px 2px rgba(10,26,48,.04); --v2-shadow-hero: 0 24px 60px -24px rgba(10,67,116,.28); --v2-shadow-press: 0 0 0 4px rgba(26,111,184,.14); /* Repoint the LEGACY tokens too so any inline `var(--navy)` etc. shifts * with the theme. (Old palette stays intact when data-theme is unset.) */ --navy: #0a1a30; --navy-light: #094374; --blue: #1a6fb8; --blue-light: #2a8fd9; --water: #2a8fd9; --water-light: #87bfeb; --cream: #f7fafc; --gray: #94a4b8; --gray-light: #eef6fc; --text: #122237; --text-muted: #5b6c80; --success: #1f9c61; --gold: #c9a84c; font-family: var(--v2-font); background: var(--v2-paper-2); color: var(--v2-text); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11"; } /* ── App shell + chrome ─────────────────────────────────────────────── */ [data-theme="v2"] #app { background: var(--v2-paper-2); } [data-theme="v2"] .header { background: rgba(247,250,252,.84); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); color: var(--v2-text); border-bottom: 1px solid var(--v2-line); height: 56px; box-shadow: none; } [data-theme="v2"] .header-brand img { height: 26px; } [data-theme="v2"] .header-brand span { color: var(--v2-text-2); } [data-theme="v2"] .btn-logout { background: rgba(255,255,255,.6); border: 1px solid var(--v2-line-2); color: var(--v2-text-2); font-weight: 600; border-radius: 10px; padding: 7px 11px; font-size: 12px; } [data-theme="v2"] .btn-logout:hover { border-color: var(--v2-water); color: var(--v2-water-deep); background: white; } [data-theme="v2"] .main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom,0px)); max-width: 760px; margin: 0 auto; } /* ── Bottom nav ─────────────────────────────────────────────────────── */ [data-theme="v2"] .bottom-nav { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid var(--v2-line); min-height: 64px; } [data-theme="v2"] .bottom-nav-item { color: var(--v2-text-muted); font: 600 11px/1 var(--v2-font); letter-spacing: -.005em; gap: 4px; transition: color .15s ease; } [data-theme="v2"] .bottom-nav-item.active { color: var(--v2-water-deep); } [data-theme="v2"] .bottom-nav-item .nav-icon { font-size: 22px; line-height: 1; } [data-theme="v2"] .bottom-nav-item .nav-label { font-weight: 600; } /* ── Cards ──────────────────────────────────────────────────────────── */ [data-theme="v2"] .card { background: var(--v2-paper); border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: none; padding: 20px; margin-bottom: 12px; } [data-theme="v2"] .card-title { font: 700 17px/1.25 var(--v2-font); letter-spacing: -.008em; color: var(--v2-ink); border-bottom: none; padding-bottom: 0; margin-bottom: 12px; } [data-theme="v2"] .card-subtitle { font: 600 11px/1.3 var(--v2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-muted); margin-top: 22px; margin-bottom: 10px; } /* ── Welcome / hero bar ─────────────────────────────────────────────── */ [data-theme="v2"] .welcome-bar { position: relative; border-radius: 22px; padding: 28px 24px; color: white; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.12) 0%, transparent 60%), radial-gradient(120% 90% at 100% 100%, rgba(255,255,255,.08) 0%, transparent 55%), linear-gradient(140deg, var(--v2-water-deep) 0%, var(--v2-water) 60%, var(--v2-water-2) 100%); box-shadow: var(--v2-shadow-hero); overflow: hidden; margin-bottom: 16px; } [data-theme="v2"] .welcome-bar::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; background: radial-gradient(circle at center, rgba(255,255,255,.13) 0%, transparent 60%); pointer-events: none; } [data-theme="v2"] .welcome-bar h2 { font: 700 28px/1.12 var(--v2-font); letter-spacing: -.018em; color: white; margin: 0 0 6px; padding: 0; } [data-theme="v2"] .welcome-bar p { font: 500 15px/1.45 var(--v2-font); color: rgba(255,255,255,.86); margin: 0; padding: 0; max-width: 36ch; } /* ── Balance-due banner (and similar alert banners) ─────────────────── */ [data-theme="v2"] #balance-warning-banner { background: linear-gradient(135deg, #b3392b, #d24533) !important; border-radius: 16px !important; padding: 14px 18px !important; box-shadow: 0 6px 20px -8px rgba(179,57,43,.55); margin-bottom: 16px !important; } /* ── Stat cards (dashboard grid) ────────────────────────────────────── */ [data-theme="v2"] .stats-grid { gap: 12px; margin-bottom: 16px; } [data-theme="v2"] .stat-card { background: var(--v2-paper); border: 1px solid var(--v2-line); border-left: 1px solid var(--v2-line); /* kill the colored stripe */ border-radius: 16px; box-shadow: none; padding: 14px 16px 16px; position: relative; } [data-theme="v2"] .stat-card::before { /* tiny colored dot in top-right corner replaces the left stripe */ content: ''; position: absolute; top: 14px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-water-2); opacity: .85; } [data-theme="v2"] .stat-card .label { font: 600 11px/1.3 var(--v2-font); letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-muted); margin-bottom: 8px; } [data-theme="v2"] .stat-card .value { font: 700 22px/1.1 var(--v2-font); letter-spacing: -.014em; color: var(--v2-ink); font-feature-settings: "tnum","ss01"; } [data-theme="v2"] .stat-card .sub { font: 500 12px/1.3 var(--v2-font); color: var(--v2-text-muted); margin-top: 6px; } /* ── Buttons ────────────────────────────────────────────────────────── */ [data-theme="v2"] .btn-primary { height: 50px; padding: 0 22px; border-radius: 12px; font: 600 15px/1 var(--v2-font); letter-spacing: -.005em; background: var(--v2-water); color: white; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(10,67,116,.18), inset 0 1px 0 rgba(255,255,255,.12); transition: background .15s ease, transform .08s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; } [data-theme="v2"] .btn-primary:hover { background: var(--v2-water-deep); } [data-theme="v2"] .btn-primary:active { transform: scale(.985); } /* Welcome-bar button overlays inverted */ [data-theme="v2"] .welcome-bar .btn-primary { background: white !important; color: var(--v2-water-deep) !important; } [data-theme="v2"] .welcome-bar .btn-primary:hover { background: var(--v2-foam) !important; } /* ── Form fields ────────────────────────────────────────────────────── */ [data-theme="v2"] .form-group { margin-bottom: 16px; } [data-theme="v2"] .form-group label { font: 600 13px/1.3 var(--v2-font); color: var(--v2-text); margin-bottom: 8px; } [data-theme="v2"] .form-group input, [data-theme="v2"] .form-group select, [data-theme="v2"] .form-group textarea { height: 48px; padding: 0 16px; border: 1px solid var(--v2-line-2); border-radius: 12px; background: var(--v2-paper); font: 500 15px/1 var(--v2-font); color: var(--v2-text); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } [data-theme="v2"] .form-group input:focus, [data-theme="v2"] .form-group select:focus, [data-theme="v2"] .form-group textarea:focus { border-color: var(--v2-water); box-shadow: var(--v2-shadow-press); background: white; } [data-theme="v2"] .form-group input::placeholder { color: var(--v2-text-faint); } /* ── Login screen ───────────────────────────────────────────────────── */ [data-theme="v2"] #login-screen { background: radial-gradient(140% 90% at 0% 0%, rgba(135,191,235,.50) 0%, transparent 55%), radial-gradient(110% 80% at 100% 100%, rgba(42,143,217,.34) 0%, transparent 55%), linear-gradient(180deg, #f6fbff 0%, #e6f2fb 60%, #d4e8f8 100%); } [data-theme="v2"] .login-card { background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.7); border-radius: 22px; padding: 40px 28px; box-shadow: var(--v2-shadow-hero); max-width: 420px; } [data-theme="v2"] .login-logo p { font: 600 11px/1 var(--v2-font); letter-spacing: .14em; text-transform: uppercase; color: var(--v2-water-deep); margin-top: 12px; opacity: .72; } [data-theme="v2"] .login-note { font: 500 13px/1.45 var(--v2-font); color: var(--v2-text-muted); margin-top: 18px; } [data-theme="v2"] .login-note strong { color: var(--v2-water-deep); } /* ── Date / time pickers (used by both delivery + pickup) ───────────── */ [data-theme="v2"] .date-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; } [data-theme="v2"] .date-btn { background: var(--v2-paper); border: 1px solid var(--v2-line-2); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .08s ease; } [data-theme="v2"] .date-btn:active { transform: scale(.98); } [data-theme="v2"] .date-btn .day { font: 600 10px/1 var(--v2-font); letter-spacing: .07em; text-transform: uppercase; color: var(--v2-text-muted); margin-bottom: 4px; } [data-theme="v2"] .date-btn .num { font: 700 20px/1.05 var(--v2-font); color: var(--v2-ink); letter-spacing: -.014em; } [data-theme="v2"] .date-btn .month { font: 500 10px/1 var(--v2-font); color: var(--v2-text-muted); margin-top: 4px; } [data-theme="v2"] .date-btn.selected { background: var(--v2-water); border-color: var(--v2-water); } [data-theme="v2"] .date-btn.selected .day, [data-theme="v2"] .date-btn.selected .num, [data-theme="v2"] .date-btn.selected .month { color: white; } [data-theme="v2"] .time-btn { flex: 1; background: var(--v2-paper); border: 1px solid var(--v2-line-2); border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; font: 600 14px/1.2 var(--v2-font); color: var(--v2-text); transition: border-color .15s ease, background .15s ease; } [data-theme="v2"] .time-btn.selected { background: var(--v2-water); color: white; border-color: var(--v2-water); } [data-theme="v2"] .time-btn strong { font-weight: 700; } /* ── Steps indicator (order step 1/2/3) ─────────────────────────────── */ [data-theme="v2"] .steps { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; font: 600 12px/1.2 var(--v2-font); } [data-theme="v2"] .step { display: flex; align-items: center; gap: 6px; color: var(--v2-text-faint); } [data-theme="v2"] .step-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--v2-line); color: var(--v2-text-muted); font: 700 12px/1 var(--v2-font); } [data-theme="v2"] .step.active { color: var(--v2-water-deep); } [data-theme="v2"] .step.active .step-num { background: var(--v2-water); color: white; } [data-theme="v2"] .step.done { color: var(--v2-success); } [data-theme="v2"] .step.done .step-num { background: var(--v2-success); color: white; } [data-theme="v2"] .step-divider { flex: 1; height: 1px; background: var(--v2-line); } /* ── Order type toggle (delivery / pickup) ──────────────────────────── */ [data-theme="v2"] .ot-btn { border-radius: 12px !important; border-width: 1px !important; font-weight: 600 !important; } [data-theme="v2"] .ot-btn.ot-active { border-color: var(--v2-water) !important; background: var(--v2-foam) !important; color: var(--v2-water-deep) !important; } /* ── Cart / review ──────────────────────────────────────────────────── */ [data-theme="v2"] .cart-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--v2-line); font: 500 14px/1.4 var(--v2-font); color: var(--v2-text-2); } [data-theme="v2"] .cart-item:last-child { border-bottom: none; } [data-theme="v2"] .cart-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v2-line); font: 700 17px/1.2 var(--v2-font); color: var(--v2-ink); font-feature-settings: "tnum"; } /* ── Success screens ────────────────────────────────────────────────── */ [data-theme="v2"] .success-screen { padding: 16px 0; text-align: center; } [data-theme="v2"] .success-screen .check { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-success), #25b572); color: white; display: flex; align-items: center; justify-content: center; font: 700 32px/1 var(--v2-font); box-shadow: 0 12px 24px -8px rgba(31,156,97,.35); } [data-theme="v2"] .success-screen h2 { font: 700 24px/1.15 var(--v2-font); letter-spacing: -.018em; color: var(--v2-ink); margin-bottom: 10px; } [data-theme="v2"] .success-screen p { font: 500 14px/1.5 var(--v2-font); color: var(--v2-text-muted); } /* ── Toast ──────────────────────────────────────────────────────────── */ [data-theme="v2"] .toast { background: var(--v2-ink); color: white; border-radius: 14px; font: 600 14px/1.4 var(--v2-font); letter-spacing: -.005em; box-shadow: 0 12px 32px -12px rgba(10,26,48,.5); } /* ── v1/v2 visibility gates ─────────────────────────────────────────── */ /* When v2 is active, hide the legacy markup so the new layout takes over. */ [data-theme="v2"] .v1-only { display: none !important; } /* When v2 is NOT active, hide the new markup. */ :root:not([data-theme="v2"]) .v2-only { display: none !important; } /* ── Helper utilities (net-new components) ──────────────────────────── */ [data-theme="v2"] .v2-eyebrow { font: 600 11px/1.3 var(--v2-font); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-text-muted); } [data-theme="v2"] .v2-stack-2 > * + * { margin-top: 8px; } [data-theme="v2"] .v2-stack-3 > * + * { margin-top: 12px; } [data-theme="v2"] .v2-stack-4 > * + * { margin-top: 16px; } [data-theme="v2"] .v2-stack-5 > * + * { margin-top: 24px; } [data-theme="v2"] .v2-stack-6 > * + * { margin-top: 32px; } /* ── v2 Dashboard — built from scratch ──────────────────────────────── */ [data-theme="v2"] #panel-dashboard.v2-dashboard { padding: 0; } /* Greeting block — generous, Apple-style hero */ [data-theme="v2"] .v2-greeting { padding: 28px 4px 8px; margin-bottom: 24px; } [data-theme="v2"] .v2-greeting-eyebrow { font: 600 12px/1 var(--v2-font); letter-spacing: .12em; text-transform: uppercase; color: var(--v2-water-deep); margin-bottom: 8px; } [data-theme="v2"] .v2-greeting-name { font: 700 36px/1.05 var(--v2-font); letter-spacing: -.024em; color: var(--v2-ink); margin: 0 0 8px; } [data-theme="v2"] .v2-greeting-sub { font: 500 15px/1.45 var(--v2-font); color: var(--v2-text-muted); margin: 0; max-width: 38ch; } /* Section header */ [data-theme="v2"] .v2-section { margin-bottom: 28px; } [data-theme="v2"] .v2-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; } [data-theme="v2"] .v2-section-head h2 { font: 700 14px/1 var(--v2-font); letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-muted); margin: 0; } [data-theme="v2"] .v2-section-head a, [data-theme="v2"] .v2-section-head button { font: 600 13px/1 var(--v2-font); color: var(--v2-water-deep); background: none; border: none; cursor: pointer; padding: 0; } /* Action cards (the big primary CTAs on the dashboard) */ [data-theme="v2"] .v2-action-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; text-decoration: none; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; margin-bottom: 12px; } [data-theme="v2"] .v2-action-card:active { transform: scale(.99); } [data-theme="v2"] .v2-action-card:hover { box-shadow: 0 8px 24px -8px rgba(10,67,116,.18); } [data-theme="v2"] .v2-action-primary { background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.12) 0%, transparent 60%), linear-gradient(135deg, var(--v2-water-deep) 0%, var(--v2-water) 70%, var(--v2-water-2) 100%); color: white; box-shadow: var(--v2-shadow-hero); } [data-theme="v2"] .v2-action-warn { background: linear-gradient(135deg, #b3392b 0%, #d24533 100%); color: white; box-shadow: 0 12px 30px -12px rgba(179,57,43,.4); } [data-theme="v2"] .v2-action-soft { background: var(--v2-paper); color: var(--v2-ink); border: 1px solid var(--v2-line); } [data-theme="v2"] .v2-action-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); border-radius: 12px; flex-shrink: 0; } [data-theme="v2"] .v2-action-soft .v2-action-icon { background: var(--v2-foam); color: var(--v2-water-deep); } [data-theme="v2"] .v2-action-icon svg { width: 22px; height: 22px; } [data-theme="v2"] .v2-action-body { flex: 1; min-width: 0; } [data-theme="v2"] .v2-action-eyebrow { font: 600 11px/1 var(--v2-font); letter-spacing: .1em; text-transform: uppercase; opacity: .82; margin-bottom: 4px; } [data-theme="v2"] .v2-action-title { font: 700 18px/1.2 var(--v2-font); letter-spacing: -.012em; margin-bottom: 2px; } [data-theme="v2"] .v2-action-amount { font: 800 28px/1.05 var(--v2-font); letter-spacing: -.018em; font-feature-settings: "tnum","ss01"; margin-bottom: 2px; } [data-theme="v2"] .v2-action-sub { font: 500 13px/1.4 var(--v2-font); opacity: .82; } [data-theme="v2"] .v2-action-arrow { font-size: 28px; line-height: 1; opacity: .8; margin-left: 8px; font-family: var(--v2-font); font-weight: 300; } /* Devices (smart sensor / flow meter / RO etc. — placeholders for now) */ [data-theme="v2"] .v2-device-card { background: var(--v2-paper); border: 1px solid var(--v2-line); border-radius: 18px; padding: 20px; margin-bottom: 12px; } [data-theme="v2"] .v2-device-promo { background: linear-gradient(180deg, var(--v2-foam) 0%, var(--v2-paper) 100%); border-color: var(--v2-mist); } [data-theme="v2"] .v2-device-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } [data-theme="v2"] .v2-device-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--v2-mist); border-radius: 12px; flex-shrink: 0; color: var(--v2-water-deep); } [data-theme="v2"] .v2-device-icon svg { width: 22px; height: 22px; } [data-theme="v2"] .v2-device-name { font: 700 16px/1.2 var(--v2-font); letter-spacing: -.008em; color: var(--v2-ink); margin-bottom: 2px; } [data-theme="v2"] .v2-device-status { font: 500 13px/1.3 var(--v2-font); color: var(--v2-text-muted); } [data-theme="v2"] .v2-device-desc { font: 500 14px/1.5 var(--v2-font); color: var(--v2-text-2); margin-bottom: 14px; max-width: 36ch; } [data-theme="v2"] .v2-device-action { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--v2-font); color: var(--v2-water-deep); background: none; border: none; cursor: pointer; padding: 0; } [data-theme="v2"] .v2-device-action:hover { text-decoration: underline; } /* Brine-tank visualization (placeholder, ready for real sensor data later) */ [data-theme="v2"] .v2-tank { display: flex; align-items: stretch; gap: 18px; margin-top: 10px; } [data-theme="v2"] .v2-tank-glass { width: 64px; height: 100px; border: 2px solid var(--v2-line-2); border-radius: 8px 8px 12px 12px; position: relative; overflow: hidden; background: var(--v2-paper-2); } [data-theme="v2"] .v2-tank-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--v2-water-2), var(--v2-water-deep)); transition: height .6s ease; } [data-theme="v2"] .v2-tank-fill::before { content: ''; position: absolute; top: -4px; left: 0; right: 0; height: 8px; background: radial-gradient(circle at 25% 50%, rgba(255,255,255,.4), transparent 70%); opacity: .7; } [data-theme="v2"] .v2-tank-meta { flex: 1; display: flex; flex-direction: column; justify-content: center; } [data-theme="v2"] .v2-tank-pct { font: 800 30px/1 var(--v2-font); letter-spacing: -.018em; color: var(--v2-ink); font-feature-settings: "tnum"; margin-bottom: 4px; } [data-theme="v2"] .v2-tank-label { font: 500 13px/1.3 var(--v2-font); color: var(--v2-text-muted); } /* Activity list (recent invoices, recent orders) */ [data-theme="v2"] .v2-list { background: var(--v2-paper); border: 1px solid var(--v2-line); border-radius: 16px; overflow: hidden; } [data-theme="v2"] .v2-list-row { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); } [data-theme="v2"] .v2-list-row:last-child { border-bottom: none; } [data-theme="v2"] .v2-list-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--v2-foam); color: var(--v2-water-deep); border-radius: 10px; margin-right: 12px; flex-shrink: 0; } [data-theme="v2"] .v2-list-icon svg { width: 18px; height: 18px; } [data-theme="v2"] .v2-list-main { flex: 1; min-width: 0; } [data-theme="v2"] .v2-list-title { font: 600 14px/1.3 var(--v2-font); color: var(--v2-ink); margin-bottom: 2px; } [data-theme="v2"] .v2-list-sub { font: 500 12px/1.3 var(--v2-font); color: var(--v2-text-muted); } [data-theme="v2"] .v2-list-value { font: 600 14px/1 var(--v2-font); font-feature-settings: "tnum"; color: var(--v2-text-2); white-space: nowrap; margin-left: 12px; } /* Quick stat row */ [data-theme="v2"] .v2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } [data-theme="v2"] .v2-stat-card { background: var(--v2-paper); border: 1px solid var(--v2-line); border-radius: 14px; padding: 14px 16px; min-height: 84px; display: flex; flex-direction: column; justify-content: center; } [data-theme="v2"] .v2-stat-card .v2-stat-label { font: 600 11px/1 var(--v2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-muted); margin-bottom: 6px; } [data-theme="v2"] .v2-stat-card .v2-stat-value { font: 700 18px/1.15 var(--v2-font); letter-spacing: -.012em; color: var(--v2-ink); font-feature-settings: "tnum","ss01"; } [data-theme="v2"] .v2-stat-card .v2-stat-sub { font: 500 12px/1.3 var(--v2-font); color: var(--v2-text-muted); margin-top: 4px; } /* Footer */ [data-theme="v2"] .v2-footer { margin-top: 32px; padding: 24px 8px 16px; font: 500 12px/1.5 var(--v2-font); color: var(--v2-text-muted); text-align: center; border-top: 1px solid var(--v2-line); } [data-theme="v2"] .v2-footer a { color: var(--v2-water-deep); text-decoration: none; font-weight: 600; } [data-theme="v2"] .v2-footer p { margin: 0 0 4px; } /* Empty state for sections that don't have content yet */ [data-theme="v2"] .v2-empty-state { background: var(--v2-paper); border: 1px dashed var(--v2-line-2); border-radius: 14px; padding: 24px; text-align: center; color: var(--v2-text-muted); font: 500 14px/1.5 var(--v2-font); }