Spaces:
Running
Running
| /* ================================================================ | |
| FinWise — Shared Design System | |
| Aesthetic: Dark fintech luxury · Syne + DM Sans typography | |
| ================================================================ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap'); | |
| /* ── Variables ─────────────────────────────────────────────────── */ | |
| :root { | |
| --bg: #050d1a; | |
| --bg2: #091525; | |
| --bg3: #0d1f38; | |
| --card: rgba(12,24,48,0.85); | |
| --card2: rgba(18,34,66,0.70); | |
| --border: rgba(34,211,238,0.12); | |
| --border2: rgba(34,211,238,0.30); | |
| --cyan: #22d3ee; | |
| --cyan-d: #0891b2; | |
| --emerald: #10b981; | |
| --emerald-d: #059669; | |
| --rose: #f43f5e; | |
| --amber: #f59e0b; | |
| --violet: #8b5cf6; | |
| --indigo: #6366f1; | |
| --text: #f0f6ff; | |
| --text2: #8faac8; | |
| --text3: #3d5a7a; | |
| --nav-w: 240px; | |
| --r: 14px; | |
| --r-sm: 8px; | |
| --r-lg: 20px; | |
| --shadow: 0 8px 40px rgba(0,0,0,0.5); | |
| --glow-c: 0 0 30px rgba(34,211,238,0.25); | |
| --glow-e: 0 0 30px rgba(16,185,129,0.25); | |
| --font-head: 'Syne', sans-serif; | |
| --font-body: 'DM Sans', sans-serif; | |
| --font-mono: 'DM Mono', monospace; | |
| --transition: 0.22s cubic-bezier(.4,0,.2,1); | |
| } | |
| /* ── Reset & Base ──────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| font-size: 15px; | |
| overflow-x: hidden; | |
| } | |
| /* Subtle grid background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(34,211,238,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(34,211,238,0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* ── Layout ────────────────────────────────────────────────────── */ | |
| .app-shell { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| .main-content { | |
| margin-left: var(--nav-w); | |
| flex: 1; | |
| padding: 32px; | |
| position: relative; | |
| z-index: 1; | |
| max-width: calc(100vw - var(--nav-w)); | |
| } | |
| /* ── Sidebar Navigation ────────────────────────────────────────── */ | |
| .sidebar { | |
| position: fixed; | |
| left: 0; top: 0; bottom: 0; | |
| width: var(--nav-w); | |
| background: linear-gradient(180deg, #071224 0%, #050d1a 100%); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 100; | |
| padding: 0 0 20px; | |
| overflow-y: auto; | |
| } | |
| .sidebar-logo { | |
| padding: 28px 24px 24px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 12px; | |
| } | |
| .sidebar-logo .logo-mark { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-icon { | |
| width: 36px; height: 36px; | |
| background: linear-gradient(135deg, var(--cyan), var(--emerald)); | |
| border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 18px; | |
| box-shadow: var(--glow-c); | |
| } | |
| .logo-text { | |
| font-family: var(--font-head); | |
| font-size: 22px; | |
| font-weight: 800; | |
| background: linear-gradient(90deg, var(--cyan), var(--emerald)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo-sub { | |
| font-size: 11px; | |
| color: var(--text3); | |
| margin-top: 2px; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .nav-section { | |
| padding: 8px 12px; | |
| flex: 1; | |
| } | |
| .nav-label { | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--text3); | |
| padding: 8px 12px 4px; | |
| font-weight: 600; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 11px 14px; | |
| border-radius: var(--r-sm); | |
| color: var(--text2); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: all var(--transition); | |
| margin-bottom: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .nav-item::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, var(--cyan), transparent); | |
| opacity: 0; | |
| transition: opacity var(--transition); | |
| } | |
| .nav-item:hover { | |
| color: var(--text); | |
| background: rgba(34,211,238,0.07); | |
| } | |
| .nav-item.active { | |
| color: var(--cyan); | |
| background: rgba(34,211,238,0.10); | |
| border: 1px solid rgba(34,211,238,0.2); | |
| } | |
| .nav-item.active .nav-icon { filter: drop-shadow(0 0 6px var(--cyan)); } | |
| .nav-icon { | |
| font-size: 18px; | |
| width: 24px; | |
| text-align: center; | |
| flex-shrink: 0; | |
| } | |
| .nav-badge { | |
| margin-left: auto; | |
| background: var(--cyan); | |
| color: var(--bg); | |
| font-size: 10px; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: 20px; | |
| } | |
| .sidebar-footer { | |
| padding: 16px 20px 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .market-ticker { | |
| font-size: 11px; | |
| color: var(--text3); | |
| margin-bottom: 8px; | |
| letter-spacing: 0.05em; | |
| } | |
| .ticker-item { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| padding: 3px 0; | |
| } | |
| .ticker-item .up { color: var(--emerald); font-family: var(--font-mono); } | |
| .ticker-item .down { color: var(--rose); font-family: var(--font-mono); } | |
| .ticker-name { color: var(--text2); font-weight: 500; } | |
| /* ── Bottom Mobile Nav ─────────────────────────────────────────── */ | |
| .bottom-nav { | |
| display: none; | |
| position: fixed; | |
| bottom: 0; left: 0; right: 0; | |
| background: rgba(5,13,26,0.96); | |
| backdrop-filter: blur(20px); | |
| border-top: 1px solid var(--border); | |
| padding: 8px 0 env(safe-area-inset-bottom); | |
| z-index: 200; | |
| } | |
| .bottom-nav-inner { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .bottom-nav-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 6px 12px; | |
| color: var(--text3); | |
| text-decoration: none; | |
| font-size: 10px; | |
| font-weight: 600; | |
| transition: color var(--transition); | |
| border-radius: var(--r-sm); | |
| } | |
| .bottom-nav-item .bnav-icon { font-size: 20px; } | |
| .bottom-nav-item.active { color: var(--cyan); } | |
| .bottom-nav-item:hover { color: var(--text2); } | |
| /* ── Page Header ───────────────────────────────────────────────── */ | |
| .page-header { | |
| margin-bottom: 32px; | |
| } | |
| .page-title { | |
| font-family: var(--font-head); | |
| font-size: 32px; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 6px; | |
| } | |
| .page-title span { | |
| background: linear-gradient(90deg, var(--cyan), var(--emerald)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .page-subtitle { color: var(--text2); font-size: 15px; } | |
| /* ── Cards ─────────────────────────────────────────────────────── */ | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 24px; | |
| backdrop-filter: blur(12px); | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| } | |
| .card:hover { | |
| border-color: var(--border2); | |
| box-shadow: var(--glow-c); | |
| } | |
| .card-title { | |
| font-family: var(--font-head); | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* ── Stat Cards ────────────────────────────────────────────────── */ | |
| .stat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .stat-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 22px; | |
| backdrop-filter: blur(12px); | |
| transition: all var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: var(--accent-color, var(--cyan)); | |
| opacity: 0.7; | |
| } | |
| .stat-card:hover { | |
| border-color: var(--border2); | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 40px rgba(0,0,0,0.4); | |
| } | |
| .stat-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text3); | |
| margin-bottom: 10px; | |
| } | |
| .stat-value { | |
| font-family: var(--font-head); | |
| font-size: 26px; | |
| font-weight: 800; | |
| color: var(--text); | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| } | |
| .stat-change { | |
| font-size: 12px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .stat-change.up { color: var(--emerald); } | |
| .stat-change.down { color: var(--rose); } | |
| /* ── Grids ─────────────────────────────────────────────────────── */ | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } | |
| .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } | |
| .grid-60-40 { display: grid; grid-template-columns: 60fr 40fr; gap: 20px; } | |
| .grid-40-60 { display: grid; grid-template-columns: 40fr 60fr; gap: 20px; } | |
| /* ── Buttons ───────────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 11px 22px; | |
| border-radius: var(--r-sm); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: none; | |
| transition: all var(--transition); | |
| text-decoration: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--cyan-d), var(--cyan)); | |
| color: var(--bg); | |
| box-shadow: 0 4px 16px rgba(34,211,238,0.3); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 6px 24px rgba(34,211,238,0.5); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--cyan); | |
| border: 1px solid rgba(34,211,238,0.3); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(34,211,238,0.08); | |
| border-color: var(--cyan); | |
| } | |
| .btn-ghost { | |
| background: rgba(255,255,255,0.04); | |
| color: var(--text2); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); } | |
| .btn-emerald { | |
| background: linear-gradient(135deg, var(--emerald-d), var(--emerald)); | |
| color: #fff; | |
| box-shadow: var(--glow-e); | |
| } | |
| .btn-sm { padding: 7px 14px; font-size: 13px; } | |
| .btn-lg { padding: 14px 28px; font-size: 16px; } | |
| .btn-full { width: 100%; justify-content: center; } | |
| /* ── Choice Buttons ────────────────────────────────────────────── */ | |
| .choice-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .choice-btn { | |
| padding: 10px 18px; | |
| border-radius: 100px; | |
| border: 1px solid var(--border2); | |
| background: transparent; | |
| color: var(--text2); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .choice-btn:hover { border-color: var(--cyan); color: var(--text); } | |
| .choice-btn.selected { | |
| background: rgba(34,211,238,0.12); | |
| border-color: var(--cyan); | |
| color: var(--cyan); | |
| box-shadow: 0 0 16px rgba(34,211,238,0.2); | |
| } | |
| /* ── Sliders ───────────────────────────────────────────────────── */ | |
| .slider-wrap { margin-bottom: 20px; } | |
| .slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } | |
| .slider-label { font-size: 13px; color: var(--text2); font-weight: 500; } | |
| .slider-val { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); font-weight: 500; } | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: var(--bg3); | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 18px; height: 18px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--cyan-d), var(--cyan)); | |
| box-shadow: 0 0 10px rgba(34,211,238,0.5); | |
| cursor: pointer; | |
| transition: box-shadow var(--transition); | |
| } | |
| input[type=range]::-webkit-slider-thumb:hover { | |
| box-shadow: 0 0 18px rgba(34,211,238,0.8); | |
| } | |
| /* ── Progress Bar ──────────────────────────────────────────────── */ | |
| .progress-bar { | |
| height: 8px; | |
| background: var(--bg3); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 4px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.6s cubic-bezier(.4,0,.2,1); | |
| } | |
| /* ── Tags / Badges ─────────────────────────────────────────────── */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 10px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .badge-cyan { background: rgba(34,211,238,0.15); color: var(--cyan); } | |
| .badge-emerald { background: rgba(16,185,129,0.15); color: var(--emerald); } | |
| .badge-rose { background: rgba(244,63,94,0.15); color: var(--rose); } | |
| .badge-amber { background: rgba(245,158,11,0.15); color: var(--amber); } | |
| .badge-violet { background: rgba(139,92,246,0.15); color: var(--violet); } | |
| /* ── Table ─────────────────────────────────────────────────────── */ | |
| .table-wrap { overflow-x: auto; } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| thead th { | |
| padding: 12px 16px; | |
| text-align: left; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text3); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| tbody tr { | |
| border-bottom: 1px solid rgba(34,211,238,0.05); | |
| transition: background var(--transition); | |
| } | |
| tbody tr:hover { background: rgba(34,211,238,0.04); } | |
| tbody td { | |
| padding: 14px 16px; | |
| color: var(--text2); | |
| vertical-align: middle; | |
| } | |
| tbody td:first-child { color: var(--text); font-weight: 600; } | |
| /* ── Tooltips (simple) ─────────────────────────────────────────── */ | |
| .tooltip-wrap { position: relative; display: inline-flex; } | |
| .tooltip-icon { | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| background: var(--bg3); | |
| border: 1px solid var(--border2); | |
| color: var(--text3); | |
| font-size: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: help; | |
| font-weight: 700; | |
| font-style: italic; | |
| } | |
| /* ── Section headings ──────────────────────────────────────────── */ | |
| .section-title { | |
| font-family: var(--font-head); | |
| font-size: 18px; | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| /* ── Divider ───────────────────────────────────────────────────── */ | |
| .divider { height: 1px; background: var(--border); margin: 24px 0; } | |
| /* ── Input Fields ──────────────────────────────────────────────── */ | |
| .field-group { margin-bottom: 16px; } | |
| .field-label { | |
| display: block; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-bottom: 6px; | |
| } | |
| input[type=text], input[type=number], select, textarea { | |
| width: 100%; | |
| padding: 11px 14px; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| input[type=text]:focus, | |
| input[type=number]:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: var(--cyan); | |
| box-shadow: 0 0 0 3px rgba(34,211,238,0.1); | |
| } | |
| select option { background: var(--bg2); } | |
| /* ── Tabs ──────────────────────────────────────────────────────── */ | |
| .tab-bar { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| padding: 4px; | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| } | |
| .tab-btn { | |
| flex: 1; | |
| min-width: 120px; | |
| padding: 9px 16px; | |
| border-radius: 6px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text2); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| white-space: nowrap; | |
| text-align: center; | |
| } | |
| .tab-btn.active { | |
| background: var(--card); | |
| color: var(--cyan); | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.3); | |
| } | |
| .tab-pane { display: none; } | |
| .tab-pane.active { display: block; } | |
| /* ── Risk Meter ────────────────────────────────────────────────── */ | |
| .risk-meter-wrap { | |
| text-align: center; | |
| padding: 20px 0; | |
| } | |
| .risk-meter-label { | |
| font-size: 13px; | |
| color: var(--text2); | |
| margin-top: 12px; | |
| font-weight: 600; | |
| } | |
| /* ── Allocation Bar ────────────────────────────────────────────── */ | |
| .alloc-bar { | |
| height: 10px; | |
| border-radius: 5px; | |
| display: flex; | |
| overflow: hidden; | |
| gap: 2px; | |
| margin: 10px 0; | |
| } | |
| .alloc-segment { | |
| height: 100%; | |
| border-radius: 5px; | |
| transition: width 0.5s cubic-bezier(.4,0,.2,1); | |
| } | |
| /* ── Animations ────────────────────────────────────────────────── */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(16px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 10px rgba(34,211,238,0.2); } | |
| 50% { box-shadow: 0 0 25px rgba(34,211,238,0.5); } | |
| } | |
| @keyframes counter { from { opacity: 0; } to { opacity: 1; } } | |
| .fade-in { animation: fadeInUp 0.5s ease both; } | |
| .fade-in-1 { animation-delay: 0.1s; } | |
| .fade-in-2 { animation-delay: 0.2s; } | |
| .fade-in-3 { animation-delay: 0.3s; } | |
| .fade-in-4 { animation-delay: 0.4s; } | |
| /* ── Utility ───────────────────────────────────────────────────── */ | |
| .up { color: var(--emerald); } | |
| .down { color: var(--rose); } | |
| .text-muted { color: var(--text2); } | |
| .text-sm { font-size: 13px; } | |
| .mono { font-family: var(--font-mono); } | |
| .mt-0 { margin-top: 0; } | |
| .mt-16 { margin-top: 16px; } | |
| .mt-24 { margin-top: 24px; } | |
| .mb-16 { margin-bottom: 16px; } | |
| .mb-24 { margin-bottom: 24px; } | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .gap-8 { gap: 8px; } | |
| .gap-12 { gap: 12px; } | |
| .gap-16 { gap: 16px; } | |
| .full-width { width: 100%; } | |
| .text-right { text-align: right; } | |
| .text-center { text-align: center; } | |
| .bold { font-weight: 700; } | |
| .hidden { display: none ; } | |
| /* ── Scroll ────────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text3); } | |
| /* ── Responsive ────────────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .sidebar { display: none; } | |
| .bottom-nav { display: block; } | |
| .main-content { | |
| margin-left: 0; | |
| padding: 20px 16px 80px; | |
| max-width: 100vw; | |
| } | |
| .grid-2, .grid-3, .grid-60-40, .grid-40-60 { | |
| grid-template-columns: 1fr; | |
| } | |
| .stat-grid { grid-template-columns: 1fr 1fr; } | |
| .page-title { font-size: 24px; } | |
| } | |
| @media (max-width: 480px) { | |
| .stat-grid { grid-template-columns: 1fr; } | |
| .choice-group { flex-direction: column; } | |
| } | |