/* ============================================================================ * Speecon Fundamental — the shared token layer * ---------------------------------------------------------------------------- * Spec: docs/reviews/saas_readiness/E_design_direction.md §4.2 (Fundamental) * and §4.3 (Overtone per-audience expression). * * "An overtone is a harmonic above a FUNDAMENTAL." This file is the fundamental: * colour primitives, type scale, space, radius, elevation and motion, identical * in every app. Overtone rides on top and overrides the accent + a few density * knobs via one attribute on : * * RULES this file exists to enforce * 1. ONE colour dialect. No app re-declares a palette. (test: T4.4 grep-assert) * 2. No raw px in padding / margin / gap — use --s-*. * 3. Nothing hardcodes a foreground on the accent fill — use --on-accent. * 4. Every text/control combination clears WCAG AA. (test: T4.1) * * Contrast deviations from E, and why (all verified by packages/design/tests): * --ink-4 #6B7178 -> #868E96 E's faint ink measures 3.18:1 on --surface-2, * which fails AA for normal text — and E hands * that very token to the trust slot. Raised * until it clears 4.5:1 on every surface * (5.57 / 5.16 / 4.72). Still clearly quieter * than --ink-3. * --line-control (new) #6B7178 E has no token for the stroke that IS a * control's affordance. --line (#2A3138) is * 1.40:1 and fails WCAG 1.4.11's 3:1 for * non-text UI. This one clears 3:1 on --bg, * --surface and --surface-2 (3.75/3.47/3.18). * It reuses E's discarded --ink-4 hex. * ========================================================================== */ :root { /* ---- surfaces ---------------------------------------------------------- */ --bg: #101418; --surface: #171C22; --surface-2: #1D242C; --surface-3: #242C35; --hover: #2A3138; --plate: #0D1014; /* Overtone plate-dark — code blocks, stages */ /* ---- strokes ----------------------------------------------------------- */ --line: #2A3138; /* dividers, card edges (decorative) */ --line-strong: #39424C; /* hover / emphasis edges */ --line-control: #6B7178; /* inputs, selects, checkboxes — >=3:1, see above */ /* ---- ink --------------------------------------------------------------- */ --ink: #E8EAED; --ink-2: #C6CBD1; /* long-form body */ --ink-3: #9AA0A6; /* muted */ --ink-4: #868E96; /* faint — still AA at normal size */ /* ---- accent — the ONE token an Overtone theme overrides ----------------- */ --accent: #E8734A; --accent-hover: #F08A63; --accent-2: #8440E8; /* secondary/decorative only — 3.42:1, not body text */ --accent-soft: rgb(232 115 74 / .12); --accent-glow: rgb(232 115 74 / .18); --on-accent: #1A1005; /* 6.23:1 on --accent. NOT #fff (3.01:1, fails AA) */ /* ---- semantic ---------------------------------------------------------- */ --success: #4ADE80; --success-soft: rgb(74 222 128 / .12); --on-success: #06210F; --warning: #FBBF24; --warning-soft: rgb(251 191 36 / .12); --on-warning: #201603; --danger: #F87171; --danger-soft: rgb(248 113 113 / .12); --on-danger: #2A0A0A; --info: #60A5FA; --info-soft: rgb(96 165 250 / .12); /* ---- domain palettes stay namespaced, never folded into the accent ------ */ --data-filler: #E8A34A; --data-silence: #5A8FE8; --data-falsestart: #A05AE8; --data-manual: #F05A6A; /* ---- type -------------------------------------------------------------- */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --t-2xs: 0.6875rem; /* 11 — timestamps, mono meta, tier badges */ --t-xs: 0.75rem; /* 12 — uppercase eyebrows, th, field labels */ --t-sm: 0.8125rem; /* 13 — secondary text, hints */ --t-md: 0.875rem; /* 14 — UI default: buttons, inputs, body */ --t-lg: 1.0625rem; /* 17 — long-form reading */ --t-xl: 1.25rem; /* 20 — card + section titles */ --t-2xl: 1.5rem; /* 24 — page titles */ --t-3xl: 1.875rem; /* 30 — hero / screen headline */ --t-display: clamp(2.5rem, 6vw, 3.5rem); /* weights: 400 / 500 / 600 / 700 only — no 300, 550, 650, 800 */ --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --lh-tight: 1.2; /* >=24px */ --lh-snug: 1.35; /* titles */ --lh-normal: 1.5; /* UI */ --lh-read: 1.7; /* long-form */ --tr-tight: -0.02em; /* >=20px */ --tr-normal: 0; --tr-wide: 0.06em; /* uppercase eyebrows */ /* ---- spacing — 4px base, no raw px in padding/margin/gap --------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- radius — cards 16, controls 12 ------------------------------------ */ --r-xs: 6px; /* inline code chips, swatches */ --r-sm: 8px; /* inputs, selects, small buttons */ --r-md: 12px; /* buttons, controls, segmented controls */ --r-lg: 16px; /* cards, panels, dropzones */ --r-xl: 20px; /* modals, sheets */ --r-full: 9999px; /* ---- elevation — exactly five ------------------------------------------ */ --e-1: 0 1px 2px rgb(0 0 0 / .35); --e-2: 0 4px 14px rgb(0 0 0 / .40); --e-3: 0 12px 36px rgb(0 0 0 / .55); --e-glow: 0 4px 28px var(--accent-glow); --focus: 0 0 0 3px var(--accent-soft); /* ---- motion — lifted from Overtone (render-svc ass_engine.py) ---------- */ --m-snap: 80ms; /* colour snap — state/colour flips */ --m-fast: 130ms; /* carousel handoff — hover, chip toggles */ --m-base: 200ms; /* panel reveals, progress width */ --m-slow: 320ms; /* sheets, modals */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-punch: cubic-bezier(.34, 1.56, .64, 1); /* creator themes only */ /* density multiplier — Overtone "build" tightens it */ --density: 1; } /* ============================================================================ * Overtone — per-audience expression (E §4.3). One attribute on . * Everything not listed here stays Fundamental. * ========================================================================== */ /* WORK — meeting, transcribe. Calm, dense, trustworthy. Fundamental as-is. */ [data-overtone="work"] { --ease-active: var(--ease-out); /* no overshoot */ } /* CREATE — captions, cut, dub, teleprompter, audio. Bold, tactile, preview-first. */ [data-overtone="create"] { --accent: #FFD400; /* Overtone sun */ --accent-hover: #FFE24D; --accent-2: #8440E8; /* Overtone purple, decorative */ --accent-soft: rgb(255 212 0 / .12); --accent-glow: rgb(255 212 0 / .18); --on-accent: #14161A; /* 12.65:1 on sun */ --ease-active: var(--ease-punch); /* squash-pop allowed */ } /* LEARN — dictation. Warm, encouraging, forgiving. */ [data-overtone="learn"] { --accent: #7FE0A0; /* Overtone mint / Glow */ --accent-hover: #9BE9B7; --accent-soft: rgb(127 224 160 / .12); --accent-glow: rgb(127 224 160 / .18); --on-accent: #0D1A12; --r-lg: 20px; /* softer cards */ --ease-active: var(--ease-punch); } /* BUILD — console, docs. Precise, terse, dark. */ [data-overtone="build"] { --density: .85; --r-lg: 12px; /* tighter cards */ --ease-active: var(--ease-out); } :root { --ease-active: var(--ease-out); } /* Mandatory, ships once. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ * Base * ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-md); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { margin: 0; font-weight: var(--w-semi); line-height: var(--lh-snug); } h1 { font-size: var(--t-2xl); letter-spacing: var(--tr-tight); font-weight: var(--w-bold); } h2 { font-size: var(--t-xl); letter-spacing: var(--tr-tight); } h3 { font-size: var(--t-md); } .mono, code, kbd { font-family: var(--mono); } .tnum { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } .sp-hidden { display: none !important; } /* ---- eyebrow / section label ---- */ .sp-eyebrow { font-size: var(--t-xs); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--ink-3); margin: 0 0 var(--s-3); } .sp-note { font-size: var(--t-sm); color: var(--ink-3); } /* ============================================================================ * Controls * ========================================================================== */ .btn { font-family: var(--font); font-size: var(--t-md); font-weight: var(--w-semi); line-height: var(--lh-normal); border: 1px solid var(--line-control); background: var(--surface-2); color: var(--ink); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); transition: background var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out), color var(--m-snap) var(--ease-out); } .btn:hover { background: var(--hover); border-color: var(--line-strong); } .btn:focus-visible { box-shadow: var(--focus); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); } .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } .btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); border-radius: var(--r-sm); } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea { background: var(--bg); border: 1px solid var(--line-control); color: var(--ink); border-radius: var(--r-sm); padding: var(--s-3); font-size: var(--t-md); font-family: var(--font); line-height: var(--lh-normal); } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus); outline: none; } input::placeholder, textarea::placeholder { color: var(--ink-4); } input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); } /* segmented control */ .seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-control); border-radius: var(--r-md); overflow: hidden; } .seg button { background: var(--surface-2); border: none; color: var(--ink-2); padding: var(--s-2) var(--s-4); font-size: var(--t-md); font-weight: var(--w-semi); font-family: var(--font); cursor: pointer; transition: background var(--m-snap) var(--ease-out), color var(--m-snap) var(--ease-out); } .seg button:hover { background: var(--hover); color: var(--ink); } .seg button.sel { background: var(--accent); color: var(--on-accent); } .seg button:disabled { opacity: .45; cursor: not-allowed; } /* ============================================================================ * Surfaces * ========================================================================== */ .panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); } .panel { padding: var(--s-6); margin-bottom: var(--s-5); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s-1) var(--s-3); font-size: var(--t-sm); color: var(--ink-2); } /* ============================================================================ * SpeeconHeader () * E §4.4 (1) — 56px sticky, one wordmark, grouped app switcher, cmd-K palette. * Light DOM: tokens cascade, app CSS can still reach in. * ========================================================================== */ speecon-header { display: block; } .sp-header { position: sticky; top: 0; z-index: 40; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-6); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .sp-hd-left { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .sp-switch { display: inline-flex; align-items: center; gap: var(--s-2); background: transparent; border: 1px solid transparent; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); cursor: pointer; color: var(--ink); font-family: var(--font); transition: background var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out); } .sp-switch:hover { background: var(--surface-2); border-color: var(--line-strong); } .sp-switch:focus-visible { box-shadow: var(--focus); } .sp-wordmark { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xl); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); color: var(--ink); white-space: nowrap; } .sp-wordmark .sp-dot { color: var(--accent); font-size: var(--t-xl); line-height: 1; } .sp-appname { color: var(--ink-3); font-weight: var(--w-medium); font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-chev { color: var(--ink-3); flex: none; transition: transform var(--m-fast) var(--ease-out); } .sp-switch[aria-expanded="true"] .sp-chev { transform: rotate(180deg); } .sp-hd-right { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .sp-kbd { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 2px var(--s-1); } .sp-hd-email { font-size: var(--t-sm); color: var(--ink-3); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- switcher popover / palette ---- */ .sp-pal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(8 10 13 / .55); display: flex; align-items: flex-start; justify-content: center; padding: var(--s-16) var(--s-4) var(--s-4); animation: sp-fade var(--m-fast) var(--ease-out); } @keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } } .sp-pal { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--e-3); overflow: hidden; animation: sp-rise var(--m-base) var(--ease-out); } @keyframes sp-rise { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } } .sp-pal-input { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-size: var(--t-lg); padding: var(--s-4) var(--s-5); } .sp-pal-input:focus-visible { outline: none; box-shadow: none; border-color: var(--line); } .sp-pal-list { max-height: 60vh; overflow-y: auto; padding: var(--s-2); margin: 0; list-style: none; } .sp-pal-group { font-size: var(--t-xs); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--ink-4); padding: var(--s-3) var(--s-3) var(--s-1); } .sp-pal-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); color: var(--ink); cursor: pointer; text-decoration: none; transition: background var(--m-snap) var(--ease-out); } .sp-pal-item:hover, .sp-pal-item.sp-on { background: var(--surface-2); color: var(--ink); } .sp-pal-item .sp-ico { flex: none; width: 20px; height: 20px; color: var(--ink-3); } .sp-pal-item.sp-on .sp-ico, .sp-pal-item:hover .sp-ico { color: var(--accent); } .sp-pal-name { font-size: var(--t-md); font-weight: var(--w-semi); } .sp-pal-desc { font-size: var(--t-sm); color: var(--ink-3); } .sp-pal-item.sp-current { background: var(--accent-soft); } .sp-pal-current-tag { margin-left: auto; font-size: var(--t-2xs); color: var(--accent); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: var(--tr-wide); } .sp-pal-empty { padding: var(--s-6); text-align: center; color: var(--ink-3); font-size: var(--t-sm); } /* ---- account menu ---- */ .sp-menu { position: absolute; right: var(--s-6); top: 52px; z-index: 70; min-width: 200px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--e-2); padding: var(--s-2); } .sp-menu button, .sp-menu a { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink-2); font-family: var(--font); font-size: var(--t-md); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; } .sp-menu button:hover, .sp-menu a:hover { background: var(--surface-2); color: var(--ink); } @media (max-width: 560px) { .sp-header { padding: 0 var(--s-4); } .sp-appname, .sp-hd-email, .sp-kbd { display: none; } .sp-pal-backdrop { align-items: flex-end; padding: var(--s-4) 0 0; } .sp-pal { max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; } } /* ============================================================================ * SpeeconJob () * E §4.4 (3) — elapsed timer + determinate/indeterminate bar + ETA + * stage rail with a REQUIRED error state + something always moving. * ========================================================================== */ speecon-job { display: block; } .sp-job { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--e-1); } .sp-job.sp-job-error { border-color: var(--danger); } .sp-job-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } .sp-job-title { font-size: var(--t-xl); font-weight: var(--w-semi); letter-spacing: var(--tr-tight); margin: 0; flex: 1; min-width: 0; } .sp-job-elapsed { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-md); color: var(--ink-2); } .sp-job-barrow { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); } .sp-job-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; position: relative; } .sp-job-fill { height: 100%; width: 0; border-radius: var(--r-full); background: var(--accent); transition: width var(--m-base) var(--ease-out); } /* The barber pole. Carried by the FILL, so it animates whether the bar is determinate (stripes ride the measured width) or fully indeterminate (width 100%). E rule 2 + rule 5: never parked at 0%, always moving. */ .sp-job-fill.sp-stripe { background-image: linear-gradient( 115deg, var(--accent-soft) 25%, var(--accent) 25%, var(--accent) 50%, var(--accent-soft) 50%, var(--accent-soft) 75%, var(--accent) 75% ); background-size: 28px 28px; background-color: var(--accent); animation: sp-stripe 900ms linear infinite; } .sp-job-bar.sp-indet .sp-job-fill { width: 100%; transition: none; } @keyframes sp-stripe { from { background-position: 0 0; } to { background-position: 28px 0; } } .sp-job-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--ink-2); min-width: 3.5em; text-align: right; } .sp-job-eta { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; } .sp-job-stages { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-2) var(--s-4); } .sp-job-stage { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; color: var(--ink-4); font-size: var(--t-md); } .sp-job-dot { width: 20px; height: 20px; flex: none; border-radius: var(--r-full); border: 2px solid var(--line-control); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-2xs); font-weight: var(--w-bold); transition: border-color var(--m-snap) var(--ease-out), background var(--m-snap) var(--ease-out); } .sp-job-stage.sp-active { color: var(--ink); } .sp-job-stage.sp-active .sp-job-dot { border-color: var(--accent); animation: sp-pulse 1.4s var(--ease-out) infinite; /* Overtone idle pulse */ } @keyframes sp-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 5px transparent; } } .sp-job-stage.sp-done { color: var(--ink-2); } .sp-job-stage.sp-done .sp-job-dot { border-color: var(--success); background: var(--success); color: var(--on-success); } .sp-job-stage.sp-error { color: var(--ink); } .sp-job-stage.sp-error .sp-job-dot { border-color: var(--danger); background: var(--danger); color: var(--on-danger); } .sp-job-err { margin-top: var(--s-5); border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--r-md); padding: var(--s-4); } .sp-job-err-title { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--ink); margin: 0 0 var(--s-1); } .sp-job-err-msg { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s-2); } .sp-job-err-keep { font-size: var(--t-sm); color: var(--ink-3); margin: 0; } .sp-job-err-actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; } /* ============================================================================ * SpeeconEmpty () * E §4.4 (2) — icon / title / body / action / TRUST slot. * ========================================================================== */ speecon-empty { display: block; } .sp-empty { text-align: center; padding: var(--s-10) var(--s-6); } .sp-empty-ico { width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .sp-empty-ico svg { width: 24px; height: 24px; } .sp-empty-title { font-size: var(--t-xl); font-weight: var(--w-semi); color: var(--ink); margin: 0 0 var(--s-2); letter-spacing: var(--tr-tight); } .sp-empty-body { font-size: var(--t-sm); color: var(--ink-3); max-width: 44ch; margin: 0 auto; line-height: var(--lh-normal); } .sp-empty-action { margin-top: var(--s-5); display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; } /* The trust slot. E puts it at --t-2xs/--ink-4; --t-xs here for legibility of compliance-adjacent copy. --ink-4 is AA at this size (5.16:1 on --surface). */ .sp-trust { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--t-xs); color: var(--ink-4); line-height: var(--lh-normal); text-align: left; } .sp-trust svg { width: 14px; height: 14px; flex: none; } .sp-trust a { color: var(--ink-3); text-decoration: underline; } .sp-trust a:hover { color: var(--ink-2); } /* ============================================================================ * SpeeconUpgrade () * Phase 5 (Billing & Entitlement) — 402 / entitlement upsell modal. Shown on * a worker-gw 402 (quota_exhausted) and on the teleprompter's WS 4402 close. * Renders the backend's own message verbatim plus neutral per-tier feature * bullets (no invented pricing — "see checkout" — no invented benefits). * ========================================================================== */ speecon-upgrade { display: block; } .sp-upg-backdrop { position: fixed; inset: 0; z-index: 95; background: rgb(8 10 13 / .6); display: flex; align-items: center; justify-content: center; padding: var(--s-4); animation: sp-fade var(--m-fast) var(--ease-out); } .sp-upg { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--e-3); padding: var(--s-8) var(--s-6) var(--s-6); animation: sp-rise var(--m-base) var(--ease-out); } .sp-upg-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 32px; height: 32px; border-radius: var(--r-full); border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out), color var(--m-snap) var(--ease-out); } .sp-upg-close:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); } .sp-upg-close:focus-visible { box-shadow: var(--focus); outline: none; } .sp-upg-title { font-size: var(--t-xl); font-weight: var(--w-semi); letter-spacing: var(--tr-tight); margin: 0 var(--s-8) var(--s-2) 0; } .sp-upg-msg { font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-normal); margin: 0 0 var(--s-5); } .sp-upg-usage { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5); } .sp-upg-usage-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-2); } .sp-upg-usage-row .tnum { color: var(--ink); font-weight: var(--w-semi); } .sp-upg-usage .sp-job-bar { height: 6px; } .sp-upg-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-2); } .sp-upg-tier { display: flex; flex-direction: column; gap: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); } .sp-upg-tier.sp-upg-current { border-color: var(--accent); background: var(--accent-soft); } .sp-upg-tier-name { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--ink); } .sp-upg-tier-price { font-size: var(--t-xs); color: var(--ink-3); margin-top: calc(-1 * var(--s-2)); } .sp-upg-tier-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-1); } .sp-upg-tier-list li { position: relative; padding-left: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); line-height: var(--lh-normal); } .sp-upg-tier-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--success); } .sp-upg-tier-cta { margin-top: auto; } .sp-upg-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); } .sp-upg-note { font-size: var(--t-sm); color: var(--ink-3); margin: var(--s-4) 0 0; } @media (max-width: 560px) { .sp-upg { padding: var(--s-6) var(--s-4) var(--s-4); } .sp-upg-tiers { grid-template-columns: 1fr; } }