/* Design tokens — single source of truth for color, type, spacing, motion, and radius across the whole product. See PRODUCT_DESIGN.md §4-6, §13 and UX_BLUEPRINT.md's mood board for the rationale behind every choice below. Two fully-realized themes (dark default, light equally complete — never an afterthought media query). Theme is controlled by [data-theme="dark"] or [data-theme="light"] on ; falls back to prefers-color-scheme when no explicit preference has been chosen yet. */ /* Self-hosted webfonts (2026-07-12 perf pass) — were previously loaded render-blocking from fonts.googleapis.com/fonts.gstatic.com. Both files are variable fonts (one file spans the full weight range used here), so only two font-face rules are needed. The ?v= query param below is a template placeholder substituted at import time in server.py, so the URL changes whenever the underlying font file does — this is what makes the long-lived immutable cache-control on /ui/fonts/* safe. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/ui/fonts/inter-var.woff2?v=3100e775e8') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/ui/fonts/jbmono-var.woff2?v=83c005d49d') format('woff2'); } :root { color-scheme: dark light; /* ── Typography ── */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --text-display: 2.25rem; /* 36px — landing hero only, used once per product */ --text-title-l: 1.375rem; /* 22px — page titles */ --text-title-m: 1.0625rem; /* 17px — section headings, card titles */ --text-title-s: 0.9375rem; /* 15px — sub-section headings */ --text-body-l: 0.9375rem; /* 15px */ --text-body-m: 0.875rem; /* 14px — default */ --text-body-s: 0.8125rem; /* 13px — secondary/meta */ --text-caption: 0.6875rem; /* 11px — uppercase eyebrow labels */ --text-data-l: 1.75rem; /* 28px — hero numbers (P&L totals) */ --text-data-m: 0.9375rem; /* 15px — inline numbers (list prices) */ --text-data-s: 0.8125rem; /* 13px — dense table/list numeric cells */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-loose: 1.7; --tracking-caption: 0.06em; /* ── Spacing (4px base unit, see PRODUCT_DESIGN.md §6) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Radius (scales with component size, not one fixed value) ── */ --radius-sm: 8px; /* controls: inputs, small buttons, badges */ --radius-md: 12px; /* cards, panels */ --radius-lg: 18px; /* modals, sheets */ --radius-full: 999px; /* ── Motion (see PRODUCT_DESIGN.md §13 — four categories, nothing else) ── */ --dur-micro: 120ms; /* press/hover feedback */ --dur-transition: 220ms; /* tab switch, panel open, orientation changes */ --dur-entrance: 360ms; /* one-time entrance moments only */ --dur-flash: 420ms; /* live-tick value flash */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* ── Elevation (felt, not seen — see mood board) ── */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06); --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16); /* ── Layout ── */ --nav-rail-width: 72px; --nav-rail-width-expanded: 220px; --bottom-nav-height: 64px; --touch-target-min: 44px; /* ── Breakpoints (referenced in comments; media queries can't consume custom properties directly, kept here as the documented source) ── compact: up to 599px · medium: 600-1023px · expanded: 1024px+ ultrawide bonus column: 1600px+ */ } /* ══════════════════════════════════════════════════════════════════════ DARK THEME — default. Tuned for long viewing sessions: near-black surfaces (never pure #000, which halates against bright numbers), soft off-white text (never pure #fff). ══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { --surface-0: #0a0a0d; --surface-1: #131318; --surface-2: #1b1b22; --surface-3: rgba(0, 0, 0, 0.6); /* overlay scrim */ --content-primary: #f4f4f6; --content-secondary: #a3a3ad; --content-tertiary: #5c5c66; --content-inverse: #0a0a0d; --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --accent: #5b8def; --accent-surface: rgba(91, 141, 239, 0.14); --accent-strong: #7ba3f5; --buy: #34d399; --buy-surface: rgba(52, 211, 153, 0.12); --sell: #f8716b; --sell-surface: rgba(248, 113, 107, 0.12); --status-info: #7dabf7; --status-info-surface: rgba(125, 171, 247, 0.12); --status-warning: #f0b354; --status-warning-surface: rgba(240, 179, 84, 0.12); --status-caution: #c99df0; --status-caution-surface: rgba(201, 157, 240, 0.12); --focus-ring: 0 0 0 3px rgba(91, 141, 239, 0.45); } /* ══════════════════════════════════════════════════════════════════════ LIGHT THEME — fully realized, not a bolt-on. Tuned for bright-screen legibility: soft off-white surfaces (never stark #fff, reduces glare), deepened buy/sell colors (pure saturated green/red on white reads as garish, not premium). ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --surface-0: #f6f7f9; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: rgba(15, 18, 25, 0.4); --content-primary: #14161a; --content-secondary: #5b6070; --content-tertiary: #9aa1af; --content-inverse: #ffffff; --border-subtle: #e5e7eb; --border-strong: #c7cdd6; --accent: #2d5fd9; --accent-surface: rgba(45, 95, 217, 0.08); --accent-strong: #234ab3; --buy: #158f5f; --buy-surface: #e7f8ee; --sell: #d1392a; --sell-surface: #fdecea; --status-info: #2d5fd9; --status-info-surface: rgba(45, 95, 217, 0.08); --status-warning: #b45309; --status-warning-surface: #fff4e0; --status-caution: #8b3fc9; --status-caution-surface: rgba(139, 63, 201, 0.08); --focus-ring: 0 0 0 3px rgba(45, 95, 217, 0.35); } /* Respect OS-level preference only when the user hasn't made an explicit in-app choice yet (no [data-theme] attribute set at all). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --surface-0: #f6f7f9; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: rgba(15, 18, 25, 0.4); --content-primary: #14161a; --content-secondary: #5b6070; --content-tertiary: #9aa1af; --content-inverse: #ffffff; --border-subtle: #e5e7eb; --border-strong: #c7cdd6; --accent: #2d5fd9; --accent-surface: rgba(45, 95, 217, 0.08); --accent-strong: #234ab3; --buy: #158f5f; --buy-surface: #e7f8ee; --sell: #d1392a; --sell-surface: #fdecea; --status-info: #2d5fd9; --status-info-surface: rgba(45, 95, 217, 0.08); --status-warning: #b45309; --status-warning-surface: #fff4e0; --status-caution: #8b3fc9; --status-caution-surface: rgba(139, 63, 201, 0.08); --focus-ring: 0 0 0 3px rgba(45, 95, 217, 0.35); } } @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0ms; --dur-transition: 0ms; --dur-entrance: 0ms; --dur-flash: 0ms; } } /* Shared component primitives — the component library from PRODUCT_DESIGN.md §12. Every page consumes these instead of redefining .card/.btn/.msg per file. Depends on tokens.css being loaded first. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: var(--text-body-m); line-height: var(--leading-normal); background: var(--surface-0); color: var(--content-primary); min-height: 100vh; min-height: 100dvh; /* Safari: dvh excludes the address bar's variable space, so content isn't clipped/overflowed as it shows/hides */ overflow-x: hidden; /* no horizontal scroll, ever */ } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Every interactive element gets a visible focus ring on keyboard focus only (:focus-visible, not :focus — a mouse click never shows this). */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ── Lucide icon sizing — was duplicated identically across all 4 pages; promoted here. display:inline-flex (not the tag's default display:inline) is required so width/height actually apply BEFORE lucide.createIcons() swaps for an — inline elements ignore width/height, which would otherwise let the icon's reserved space collapse to zero on a slow connection and cause a layout shift when the SVG pops in. ── */ .icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; } .icon-sm { width: 14px; height: 14px; } /* ── Numeric/data role — the one rule every page must follow: every money/quantity/id value uses this class, never plain body text. ── */ .data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .data-l { font-size: var(--text-data-l); font-weight: var(--weight-semibold); } .data-m { font-size: var(--text-data-m); font-weight: var(--weight-regular); } .data-s { font-size: var(--text-data-s); font-weight: var(--weight-regular); } .caption { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--content-tertiary); } .title-l { font-size: var(--text-title-l); font-weight: var(--weight-semibold); letter-spacing: -0.01em; } .title-m { font-size: var(--text-title-m); font-weight: var(--weight-semibold); } .title-s { font-size: var(--text-title-s); font-weight: var(--weight-semibold); } .text-secondary { color: var(--content-secondary); } .text-tertiary { color: var(--content-tertiary); } /* Directional text — always paired with a glyph in markup, never color-only (see .dir-up/.dir-down glyph classes below). */ .buy-color { color: var(--buy); } .sell-color { color: var(--sell); } /* ── Button ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target-min); padding: var(--space-3) var(--space-5); font-family: inherit; font-size: var(--text-body-m); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: opacity var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard), background var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: default; transform: none; } .btn-primary { background: var(--accent); color: var(--content-inverse); } .btn-primary:hover:not(:disabled) { background: var(--accent-strong); } .btn-secondary { background: transparent; color: var(--content-primary); border-color: var(--border-strong); } .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: transparent; color: var(--content-secondary); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--content-primary); } .btn-sell { background: transparent; color: var(--sell); border-color: var(--sell); } .btn-sell:hover:not(:disabled) { background: var(--sell-surface); } .btn-sell-filled { background: var(--sell); color: #fff; } .btn-buy { background: transparent; color: var(--buy); border-color: var(--buy); } .btn-buy:hover:not(:disabled) { background: var(--buy-surface); } .btn-buy-filled { background: var(--buy); color: #fff; } .btn-sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--text-body-s); } .btn-lg { min-height: 52px; padding: var(--space-4) var(--space-6); font-size: var(--text-body-l); } .btn-icon { padding: var(--space-2); width: var(--touch-target-min); } .btn-block { width: 100%; } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; opacity: 0.85; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Segmented control (BUY/SELL toggle) ── */ .segmented { display: flex; gap: var(--space-2); } .segmented .btn { flex: 1; } .segmented .btn-buy.on { background: var(--buy-surface); border-color: var(--buy); color: var(--buy); } .segmented .btn-sell.on { background: var(--sell-surface); border-color: var(--sell); color: var(--sell); } /* ── Card / panel shell ── */ .card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card-pad { padding: var(--space-5); } /* ── Data Card — the atomic unit for a position/order/search result. Collapses to a table row at Expanded width via .as-row (opt-in per page, since not every Data Card list becomes a table). ── */ .data-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); transition: border-color var(--dur-transition) var(--ease-standard); } .data-card + .data-card { margin-top: var(--space-3); } /* ── Input ── */ label { display: block; font-size: var(--text-body-s); font-weight: var(--weight-medium); color: var(--content-secondary); margin-bottom: var(--space-2); } input, select, textarea { width: 100%; min-height: var(--touch-target-min); padding: var(--space-3) var(--space-4); font-family: inherit; /* 16px minimum, not --text-body-l (15px) — iOS Safari auto-zooms the page on focus for any input below 16px, which is jarring and hard to undo one-handed. */ font-size: max(16px, var(--text-body-l)); background: var(--surface-2); color: var(--content-primary); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); transition: border-color var(--dur-micro) var(--ease-standard); } input::placeholder, textarea::placeholder { color: var(--content-tertiary); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } /* Numeric/price inputs render their value in the data type role too. */ input[type="number"], input.data-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .field { margin-bottom: var(--space-4); } .field-error { font-size: var(--text-body-s); color: var(--sell); margin-top: var(--space-1); } .field.has-error input { border-color: var(--sell); } /* ── Badge — one shape, semantic color mappings ── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.02em; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; } .badge-buy { background: var(--buy-surface); color: var(--buy); } .badge-sell { background: var(--sell-surface); color: var(--sell); } .badge-info { background: var(--status-info-surface); color: var(--status-info); } .badge-warning { background: var(--status-warning-surface); color: var(--status-warning); } .badge-caution { background: var(--status-caution-surface); color: var(--status-caution); } .badge-neutral { background: var(--surface-2); color: var(--content-secondary); border-color: var(--border-subtle); } /* ── Banner — inline success/error/info feedback, one shell everywhere ── */ .banner { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-body-s); line-height: var(--leading-normal); border: 1px solid transparent; } .banner-error { background: var(--sell-surface); color: var(--sell); border-color: var(--sell); } .banner-success { background: var(--buy-surface); color: var(--buy); border-color: var(--buy); } .banner-info { background: var(--status-info-surface); color: var(--status-info); border-color: var(--status-info); } .banner-actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); } /* ── Directional glyph — color is never the only signal ── */ .dir-up::before { content: "▲ "; } .dir-down::before { content: "▼ "; } /* ── Connection/live status dot ── */ .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--content-tertiary); flex-shrink: 0; } .status-dot.live { background: var(--buy); animation: pulse 2.2s ease infinite; } .status-dot.down { background: var(--sell); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .status-dot.live { animation: none; } } /* ── Live Value — a number that updates over the WebSocket. Owns its own flash-on-change (JS toggles .flash briefly) and staleness dimming. ── */ .live-value { transition: color var(--dur-transition) var(--ease-standard); } .live-value.flash { animation: value-flash var(--dur-flash) var(--ease-out); } .live-value.stale { opacity: 0.45; } @keyframes value-flash { 0% { background: var(--accent-surface); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .live-value.flash { animation: none; } } /* ── Skeleton ── */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-1) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.6; } } .skel-line { height: 14px; margin-bottom: var(--space-2); } .skel-line-lg { height: 28px; } /* ── Empty state ── */ .empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--content-secondary); } .empty-state .title-m { color: var(--content-primary); margin-bottom: var(--space-2); } .empty-state p { margin: 0 0 var(--space-4); font-size: var(--text-body-m); } /* ── Modal / Sheet ── Compact: full-screen. Medium/Expanded: centered dialog. Bottom-sheet variant (.sheet-bottom) used for Modify — anchors to the bottom edge regardless of shape-class, per UX_BLUEPRINT.md §4.6/§19. */ .modal-backdrop { position: fixed; inset: 0; background: var(--surface-3); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--space-4); } .modal-backdrop.open { display: flex; } .modal { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: var(--space-5); animation: modal-in var(--dur-transition) var(--ease-out); } .modal-backdrop.sheet-bottom { align-items: flex-end; padding: 0; } .modal-backdrop.sheet-bottom .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 640px; animation: sheet-in var(--dur-transition) var(--ease-out); } @keyframes modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .modal { animation: none; } .modal-backdrop.sheet-bottom .modal { animation: none; } } .modal h2 { margin: 0 0 var(--space-4); font-size: var(--text-title-m); font-weight: var(--weight-semibold); } .modal-row { display: flex; gap: var(--space-3); } .modal-row > * { flex: 1; min-width: 0; } @media (max-width: 599px) { .modal-backdrop:not(.sheet-bottom) { align-items: flex-end; padding: 0; } .modal-backdrop:not(.sheet-bottom) .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; } } /* ── Layout shells ── */ .page-shell { min-height: 100vh; min-height: 100dvh; /* Safari address-bar-safe height */ display: flex; } /* .page-shell-content: the flex sizing every page's own content wrapper needs to sit correctly beside the nav rail. Pairs with each page's own existing padding/max-width class (e.g. "page", "positions-content") — deliberately does NOT set padding/max-width itself, so Phase 1 never overrides a page's current spacing before its own redesign phase. */ .page-shell-content { flex: 1; min-width: 0; padding-bottom: calc(var(--bottom-nav-height) + var(--space-5)); } @media (min-width: 600px) { .page-shell-content { padding-bottom: 0; } } /* Generic content padding utility, opt-in via .page-content, for any future page that has no bespoke wrapper class of its own yet. */ .page-content { padding: var(--space-5) var(--space-4); } @media (min-width: 600px) { .page-content { padding: var(--space-6) var(--space-5); } } @media (min-width: 1024px) { .page-content { padding: var(--space-7) var(--space-6); max-width: 1200px; margin: 0 auto; } } @media (min-width: 1600px) { .page-content { max-width: 1440px; } } .hidden { display: none !important; } /* Navigation — one component, two renderings selected by shape-class. Compact (<600px): bottom tab bar. Medium/Expanded (>=600px): side rail, icon-only until Expanded (>=1024px) where labels appear. See PRODUCT_DESIGN.md §10, UX_BLUEPRINT.md cross-page checklist item 1. */ .nav-rail { display: none; } @media (min-width: 600px) { .nav-rail { display: flex; flex-direction: column; width: var(--nav-rail-width); flex-shrink: 0; background: var(--surface-1); border-right: 1px solid var(--border-subtle); padding: var(--space-4) 0; position: sticky; top: 0; height: 100vh; } .nav-rail-brand { padding: 0 var(--space-3) var(--space-5); font-weight: var(--weight-semibold); font-size: var(--text-title-s); white-space: nowrap; overflow: hidden; } .nav-rail-items { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; } .nav-rail-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target-min); padding: var(--space-2) var(--space-3); margin: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--content-secondary); text-decoration: none; font-size: var(--text-body-m); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard); } .nav-rail-item:hover { background: var(--surface-2); color: var(--content-primary); text-decoration: none; } .nav-rail-item.on { background: var(--accent-surface); color: var(--accent); font-weight: var(--weight-semibold); } .nav-rail-icon { flex-shrink: 0; width: 20px; text-align: center; } .nav-rail-label { display: none; } .nav-rail-session { margin: var(--space-3) var(--space-2) 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); font-size: var(--text-body-s); color: var(--content-tertiary); display: flex; align-items: center; gap: var(--space-2); } } @media (min-width: 1024px) { .nav-rail { width: var(--nav-rail-width-expanded); padding: var(--space-5) 0; } .nav-rail-brand { padding: 0 var(--space-5) var(--space-6); } .nav-rail-item { gap: var(--space-3); padding: var(--space-3) var(--space-4); margin: 0 var(--space-3); } .nav-rail-label { display: inline; } .nav-rail-session { margin: var(--space-4) var(--space-3) 0; padding: var(--space-3) var(--space-4); } } /* Bottom tab bar — Compact only */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); display: flex; background: var(--surface-1); border-top: 1px solid var(--border-subtle); z-index: 50; padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 600px) { .tab-bar { display: none; } } .tab-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch-target-min); color: var(--content-tertiary); text-decoration: none; font-size: 11px; font-weight: var(--weight-medium); } .tab-bar-item.on { color: var(--accent); font-weight: var(--weight-semibold); } .tab-bar-icon { font-size: 20px; line-height: 1; }