/* * system-base-theme — cross-tenant defaults for system pages. * * Cascade strategy: * - Inherits blueprint chrome (.aah-* / .abs-* / .aoff-* / .atst-*) from * the existing template-system-base (parentRef). * - Adds on top: * 1. :root token defaults (so a system page doesn't depend on a * tenant theme for colors, radii, shadows, fonts). * 2. Body reset + base typography. * 3. .aclaw-* chrome — lifted from asuite-theme-v2 to make the * claw blueprint usable cross-tenant without per-tenant copy. * 4. Login form chrome (.login-page / .login-card / .login-form / * .login-error / .login-2fa-form). * * Used by: system-login (page) + system-claw-home (page) via themeRef. * * NOTE: This file IS @modules:["system"] — push requires explicit * approval per system-content-protection.md. * * ═══════════════════════════════════════════════════════════════════════ * TOKEN VOCABULARY — ONE canonical semantic system (no legacy aliases). * * Surface: --surface-base / -card / -subtle / -raised / -inverse / * -overlay / -hover / -active * Text: --text-primary / -secondary / -muted / -subtle / -inverse / * -on-accent * Border: --border-subtle / -default / -strong / -inverse * Accent: --accent / -hover / -active / -soft + --on-accent * State: --success / --danger / --warning / --info + -soft / -hover * / --on-success / --on-danger / --on-warning / --on-info * Primitives: --grey-0 ... --grey-1000 * Shadow: --shadow-sm / -md / -lg / -xl * Radius: --radius-sm / -md / -lg / -xl / -2xl / -full * Space: --space-1 ... --space-12 * Type: --font-sans / -mono / -serif + --body-line-height + --focus-ring * Z-index: --z-base / -sticky / -dropdown / -fixed / -overlay / * -modal / -offcanvas / -popover / -tooltip / -toast * Motion: --transition-fast / -base / -slow ; * --ease-enter / -move / -drawer * * MAGAZINE EXTENSION (additive — used by editorial blueprints/themes for * marketing surfaces. Not a parallel system; just extra warm accents * alongside the canonical core): * --copper / --copper-hi / --copper-deep * --ember / --ember-hi * --jade / --cobalt * --narrative-crimson-deep / --narrative-jade-deep / * --narrative-cobalt-deep / --narrative-amber-deep * * Tenant themes override any token via their own :root block. The system * theme's values are sensible neutral defaults for tenants that don't * override. * ═══════════════════════════════════════════════════════════════════════ * * WEB-FONT REGISTRY (cross-tenant defaults, zero-CLS pattern) * * Two web fonts are registered platform-wide here: * - Inter — variable, latin + latin-ext, roman + italic * - JetBrains Mono — variable, latin + latin-ext, roman only * * Each is paired with a sibling ' Fallback' @font-face that * aliases a system font (Arial / Menlo) with size-adjust + * ascent/descent overrides tuned to match the web font's metrics. * Result: the fallback paints in the SAME BOX as the web font on first * paint; when the web font swaps in, layout is identical (CLS = 0). * * Apps that need their own fonts (e.g. experiences with Fraunces) ship * additional @font-face blocks in their own theme.css and override the * --font-sans / --font-display tokens accordingly. The metric-Fallback * pattern stays the same — see .claude/rules/28e-layout-stability.md. * * Browsers only download web fonts they actually USE. Apps that * override --font-sans to something other than Inter never trigger an * Inter download — the @font-face declaration is dormant. So * registering platform-wide costs zero bytes for apps that opt out. * * License: both Inter (OFL) and JetBrains Mono (OFL) are open-source. * Per-subset unicode-range so latin-only pages skip latin-ext. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Inter — variable, roman ── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/able-api/static/template/vendor/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/able-api/static/template/vendor/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Inter — variable, italic ── */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/able-api/static/template/vendor/fonts/inter-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/able-api/static/template/vendor/fonts/inter-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Inter Fallback — Arial tuned to match Inter metrics ── */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); ascent-override: 90%; descent-override: 22.43%; line-gap-override: 0%; size-adjust: 107.4%; } /* ── JetBrains Mono — roman ── */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/able-api/static/template/vendor/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/able-api/static/template/vendor/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── JetBrains Mono Fallback — Menlo tuned to match JBM metrics ── */ @font-face { font-family: 'JetBrains Mono Fallback'; src: local('Menlo'), local('Consolas'), local('Courier New'); ascent-override: 75.6%; descent-override: 26.4%; line-gap-override: 0%; size-adjust: 98%; } :root { /* ─── Greyscale (neutral primitives) ──────────────────────────────── Numerically named 0..1000 from light to dark. Used as building blocks for the semantic surface/text/border tokens below; rarely consumed directly. */ --grey-0: #ffffff; --grey-50: #fafafa; --grey-100: #f8f8f9; --grey-200: #f0f1f2; --grey-300: #d6d8db; --grey-400: #bbbec3; --grey-500: #66686b; --grey-600: #505151; --grey-700: #3f3f46; --grey-800: #303236; --grey-900: #18191b; --grey-1000: #0c0d0e; /* ─── Surface (page + card backgrounds) ───────────────────────────── */ --surface-base: #f5f6fa; --surface-card: #ffffff; --surface-subtle: #f1f5f9; --surface-raised: #ffffff; --surface-inverse: #18191b; --surface-overlay: rgba(0, 0, 0, 0.4); --surface-hover: #f8f8f9; --surface-active: #f0f1f2; /* ─── Text colors ─────────────────────────────────────────────────── */ --text-primary: #1d1c17; --text-secondary: #3f3f46; --text-muted: #6b7280; --text-subtle: #9ca3af; --text-inverse: #ffffff; --text-on-accent: #ffffff; /* ─── Borders ─────────────────────────────────────────────────────── */ --border-subtle: #f1f5f9; --border-default: #e5e7eb; --border-strong: #d6d8db; --border-inverse: rgba(255, 255, 255, 0.10); /* ─── Accent (brand) ──────────────────────────────────────────────── */ /* --accent Primary brand color (chrome bars, primary buttons, active tabs). Sunstate / asuite tenants tend to override this to navy/dark-brand. --accent-secondary Secondary brand accent — for tenants that have a DUAL-brand palette (e.g. rates: navy primary + warm-orange secondary for active states + chips). Pre-2026-05-25 lived as --theme_color_secondary. */ --accent: #1b2a4a; --accent-hover: #16223d; --accent-active: #111a2e; --accent-soft: #dbeafe; --on-accent: #ffffff; --accent-secondary: #1d4ed8; /* default blue — tenants override. blue-700: #3b82f6 measured 3.41:1 as active-tab TEXT on light surfaces (AA fail, tenniswest P2 audit); #1d4ed8 = 5.17:1 ✓ */ --accent-secondary-hover: #1e40af; --accent-secondary-soft: #dbeafe; --on-accent-secondary: #ffffff; /* ─── Semantic states ─────────────────────────────────────────────── */ --success: #15803d; --success-soft: #dcfce7; --success-hover: #166534; --on-success: #ffffff; --warning: #b45309; --warning-soft: #fef3c7; --warning-hover: #92400e; --on-warning: #ffffff; --danger: #b91c1c; --danger-soft: #fee2e2; --danger-hover: #991b1b; --on-danger: #ffffff; --info: #1d4ed8; --info-soft: #dbeafe; --on-info: #ffffff; /* ─── Shadows ─────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18); /* ─── Radius ──────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ─── Spacing ─────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ─── Typography ──────────────────────────────────────────────────── Stacks reference the metric-tuned ' Fallback' family BEFORE the bare system family. The Fallback @font-face blocks below alias a system font (Arial / Menlo) with size-adjust + ascent/descent overrides tuned to match the web font's metrics, so the fallback paints in the SAME BOX as the web font. When the web font arrives, the swap is layout-identical (CLS = 0). See @font-face block below + .claude/rules/28e-layout-stability.md for the canonical pattern. */ --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', 'SF Mono', Menlo, Consolas, monospace; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --body-line-height: 1.5; --focus-ring: 2px solid #60a5fa; /* ─── Z-index scale ────────────────────────────────────────────────── Layering intent (bottom → top): base 0 page background, default flow sticky 100 sticky headers within page tree dropdown 300 , result lists fixed 400 page-fixed elements (FAB, sidebars) overlay 500 modal backdrop layer modal 600 , , offcanvas 700 popover 800 , tooltip 900 toast 1000 */ --z-base: 0; --z-sticky: 100; --z-dropdown: 300; --z-fixed: 400; --z-overlay: 500; --z-modal: 600; --z-offcanvas: 700; --z-popover: 800; --z-tooltip: 900; --z-toast: 1000; /* ─── Motion tokens ────────────────────────────────────────────────── */ --transition-fast: 120ms; --transition-base: 200ms; --transition-slow: 300ms; --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --ease-move: cubic-bezier(0.25, 1, 0.5, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* ─── Magazine extension (additive — used by editorial blueprints) ──── Defaults are warm/saturated values. Magazine themes (able-magazine on able@experiences / able@travel) override these. Operator-console pages ignore them — they only paint where a blueprint references them, which only editorial blueprints do. */ --copper: #B36A2F; --copper-hi: #C9803E; --copper-deep: #8E5021; --ember: #DC4F37; --ember-hi: #E66B53; --jade: #2A9858; --cobalt: #1A2A4A; --narrative-crimson-deep: #8C2E1F; --narrative-jade-deep: #1F5A3A; --narrative-cobalt-deep: #14223D; --narrative-amber-deep: #8F5E18; } /* ──────────────────────────────────────────────────────────────────── Section A.dark — DARK MODE token overrides Keys on :root[data-theme="dark"] (NOT @media (prefers-color-scheme)). The inline SSR script in TemplatePageRenderer resolves data-theme synchronously from localStorage('able-platform-theme') OR the OS pref, so [data-theme="dark"] is the SINGLE source of truth and respects the user's toggle override. Without this block, every blueprint that resolves var(--text-primary, …) / var(--surface-card, …) / var(--border-*,…) in dark mode keeps the LIGHT defaults from :root above — producing dark text on dark backgrounds (e.g. .claw-root inside agent message bubbles renders #1d1c17 on top of the Liquid Glass dark bubble bg). ──────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { /* ─── Surface ─────────────────────────────────────────────────────── */ --surface-base: #0d1117; --surface-card: #161b22; --surface-subtle: #1c2128; --surface-raised: #21262d; --surface-inverse: #f5f6fa; --surface-overlay: rgba(0, 0, 0, 0.6); --surface-hover: #21262d; --surface-active: #2d333b; /* ─── Text ───────────────────────────────────────────────────────── */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-muted: #8b949e; --text-subtle: #6e7681; --text-inverse: #18191b; --text-on-accent: #ffffff; /* ─── Borders ────────────────────────────────────────────────────── */ --border-subtle: #21262d; --border-default: #30363d; --border-strong: #484f58; --border-inverse: rgba(0, 0, 0, 0.20); /* ─── Accent soft variants — re-tone for dark surface ────────────── */ --accent-soft: #1f2937; --accent-secondary-soft: #1f2937; /* ─── Semantic state soft variants — darker, low-saturation ──────── */ --success-soft: rgba(21, 128, 61, 0.18); --warning-soft: rgba(180, 83, 9, 0.18); --danger-soft: rgba(185, 28, 28, 0.20); --info-soft: rgba(29, 78, 216, 0.18); /* ─── Semantic state BASE foregrounds — re-tone for dark surface ──── The LIGHT-mode base values (--success #15803d / --danger #b91c1c / --warning #b45309 / --info #1d4ed8) are tuned for light surfaces and drop to ~2.5–3.5:1 on the dark surface — links, status deltas, and badges become hard to read (only the -soft *backgrounds* above were re-toned, never these foregrounds). Re-bind to accessible-on-dark variants (GitHub-dark aligned), each ≥ 4.5:1 on --surface-base (#0d1117) AND --surface-card (#161b22). --accent (brand) stays at the tenant's light value by design (see links note below); link text on dark uses --info / --login-link-color. Added 2026-06-04 — closes the dark-mode status-foreground gap. */ --success: #3fb950; --success-hover: #56d364; --warning: #d29922; --warning-hover: #e3b341; --danger: #f85149; --danger-hover: #ff7b72; --info: #58a6ff; /* On-status text — MUST flip to dark in dark mode. The base colors above double as SOLID FILLS (background: var(--danger); color: var(--on-danger) in buttons / status pills). Now that those fills are LIGHT on dark, white on-text would drop to ~2:1. Dark on-text → ≥ 5.5:1 on every fill. Soft-bg usages (status-soft bg + status-color text) don't consume --on-* and are unaffected. --on-accent stays #fff (navy --accent fill is still dark). */ --on-success: #0d1117; --on-warning: #0d1117; --on-danger: #0d1117; --on-info: #0d1117; /* ─── Shadows — opacity bumped (dark BG = subtler shadows otherwise) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60); /* ─── Links + divider lines on dark surfaces ────────────────────── The canonical --accent stays at the tenant's LIGHT brand value (typically a deep navy/copper). Used as link color on dark surfaces (e.g. 's .alogin-forgot, .alogin-back, .alogin-footer a), it produces near-invisible text. Same problem with --border-default when used to draw the OR-divider rules between alternatives. Define link + border overrides for dark mode so every blueprint that consumes the canonical fallback chain (var(--login-link-color, var(--accent, …))) gets a visible-on-dark color without each tenant having to redefine its --accent. Token: --login-link-color — also used by .alogin-passkey-fallback, .alogin-divider via direct fallback; the value below is a light periwinkle that hits ≥ 7:1 contrast on --surface-card (#161b22) and ≥ 5:1 on --surface-base (#0d1117). */ --login-link-color: #93c5fd; /* sky-300 */ --border-default: #3f4854; /* was #30363d — bumped one notch for visible OR-divider */ } /* ──────────────────────────────────────────────────────────────────── Section B — Body reset + base typography ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; line-height: var(--body-line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } button { font-family: inherit; } /* ──────────────────────────────────────────────────────────────────── Section C — .aclaw-* chrome — text-color overrides FOR DARK MODE The Liquid Glass blueprint paints a dark wallpaper (--lg-wp-1 = oklch(18%)) ONLY in dark mode; in light mode the same token is near-white (oklch(96%)) and the blueprint sets its own dark-on-light chrome. These rules force readable light text on the dark surface for blueprint elements where the blueprint does NOT set color itself (welcome name/tagline, attachments, tool timeline, etc.). They were originally unscoped — pre-Liquid-Glass the blueprint had a fixed dark surface — but now MUST be gated to dark mode, otherwise they produce light text on light bg in light mode. Why these AT ALL when --text-primary now flips in Section A.dark? Because some claw chrome (welcome-tagline, conversation-meta, etc.) uses subtle/muted variants that the blueprint hardcodes via class names rather than CSS variables. Explicit values here guarantee the accessibility contrast. ──────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .aclaw-grid { color: #e2e8f0; } /* Welcome / shortcuts — explicit colors, blueprint sets only opacity */ [data-theme="dark"] .aclaw-grid .aclaw-welcome-name { color: #f8fafc; } [data-theme="dark"] .aclaw-grid .aclaw-welcome-tagline { color: #94a3b8; } [data-theme="dark"] .aclaw-grid .aclaw-welcome-title { color: #f8fafc; } [data-theme="dark"] .aclaw-grid .aclaw-welcome-subtitle { color: #94a3b8; } /* Shortcut chips — blueprint paints rgba(255,255,255,0.04) bg, no text color */ [data-theme="dark"] .aclaw-grid .aclaw-shortcut { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-shortcut-icon { color: #f8fafc; } [data-theme="dark"] .aclaw-grid .aclaw-shortcut-category { color: #94a3b8; } [data-theme="dark"] .aclaw-grid .aclaw-shortcut-text { color: #e2e8f0; } /* Sidebar — conversations + search */ [data-theme="dark"] .aclaw-grid .aclaw-search { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-search::placeholder { color: rgba(226, 232, 240, 0.4); } [data-theme="dark"] .aclaw-grid .aclaw-conversation { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-conversation-title { color: #f8fafc; } [data-theme="dark"] .aclaw-grid .aclaw-conversation-meta { color: #94a3b8; } [data-theme="dark"] .aclaw-grid .aclaw-conversation-delete { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-empty-conversations { color: #94a3b8; } /* Sidebar collapse / expand toggle buttons */ [data-theme="dark"] .aclaw-grid .aclaw-sidebar-collapse { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-sidebar-expand { color: #e2e8f0; } /* Messages — assistant bubbles need light text (blueprint sets bg only) */ [data-theme="dark"] .aclaw-grid .aclaw-message-bubble { color: #e2e8f0; } /* User bubble keeps the blueprint's white-on-blue (no override needed) */ /* Input bar — textarea and upload button */ [data-theme="dark"] .aclaw-grid .aclaw-input { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-input::placeholder { color: rgba(226, 232, 240, 0.4); } [data-theme="dark"] .aclaw-grid .aclaw-upload { color: #e2e8f0; } /* Artifact panel + tool timeline (visible while agent is running tools) */ [data-theme="dark"] .aclaw-grid .aclaw-artifact-type { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-artifact-close { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-tool-name { color: #f8fafc; } [data-theme="dark"] .aclaw-grid .aclaw-tool-args { color: #cbd5e1; } [data-theme="dark"] .aclaw-grid .aclaw-tool-result-content { color: #cbd5e1; } [data-theme="dark"] .aclaw-grid .aclaw-tool-reasoning { color: #94a3b8; } /* Attachments chip */ [data-theme="dark"] .aclaw-grid .aclaw-attachment { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-attachment-name { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-attachment-remove { color: #e2e8f0; } [data-theme="dark"] .aclaw-grid .aclaw-attachment-retry { color: #e2e8f0; } /* ──────────────────────────────────────────────────────────────────── Section D — Login form chrome Lifted from rateexceptions login-v2.html so any tenant's login page inherits the structural rules. Per-tenant tweaks (logo positioning, color overrides) layer on top via tenant theme. ──────────────────────────────────────────────────────────────────── */ .login-page { display: grid; place-items: center; place-content: stretch; width: 100%; min-height: 100vh; height: auto; padding: 2rem 1rem; background-color: var(--surface-base, #f5f6fa); box-sizing: border-box; } .login-card { display: grid; gap: 1.5rem; width: 100%; max-width: 440px; min-width: 280px; padding: 4rem 3rem; background-color: var(--surface-card, #ffffff); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)); box-sizing: border-box; } .login-brand { display: grid; place-items: center; margin-bottom: 0.5rem; } .login-brand-logo { max-height: 56px; max-width: 200px; width: auto; height: auto; } .login-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: var(--text-primary, #1d1c17); } .login-form { display: grid; gap: 1.25rem; } .login-form.is-hidden { display: none; } .login-label { display: grid; gap: 0.5rem; } .login-label-text { font-size: 13px; font-weight: 500; color: var(--text-muted, #6b7280); } .login-input { width: 100%; padding: 10px 12px; font-size: 14px; color: var(--text-primary, #1d1c17); background-color: var(--surface-card, #ffffff); border: 1px solid var(--border-default, #e5e7eb); border-radius: var(--radius-sm, 6px); box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .login-input:focus { outline: none; border-color: var(--accent, #1b2a4a); box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.12); } .login-input-otp { letter-spacing: 0.4em; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; } .login-submit { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--grey-0, #ffffff); background-color: var(--accent, #1b2a4a); border: 0; border-radius: var(--radius-sm, 6px); cursor: pointer; transition: background-color 0.15s ease, transform 0.05s ease; } .login-submit:hover:not(:disabled) { background-color: var(--grey-900, #18191b); } .login-submit:active:not(:disabled) { transform: translateY(1px); } .login-submit:disabled { opacity: 0.6; cursor: not-allowed; } .login-back { margin-top: -0.5rem; padding: 8px 12px; font-size: 13px; color: var(--text-muted, #6b7280); background: transparent; border: 0; cursor: pointer; text-decoration: underline; } .login-back:hover { color: var(--text-primary, #1d1c17); } .login-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted, #6b7280); } .login-hint.is-hidden { display: none; } .login-qr { display: grid; place-items: center; padding: 1rem; background-color: var(--surface-subtle, #f1f5f9); border-radius: var(--radius-sm, 6px); } .login-qr.is-hidden { display: none; } .login-qr-img { max-width: 220px; width: 100%; height: auto; background-color: #ffffff; padding: 0.5rem; border-radius: 4px; } .login-error { margin: 0; padding: 0.75rem 1rem; font-size: 13px; text-align: center; color: var(--danger, #b91c1c); background-color: var(--danger-soft, #fee2e2); border-radius: var(--radius-sm, 6px); display: none; } .login-error.is-visible { display: block; } .login-footer { margin: 0; font-size: 12px; text-align: center; color: var(--text-subtle, #9ca3af); } .login-footer a { color: var(--accent, #3b82f6); } @media (max-width: 480px) { .login-card { padding: 2.5rem 1.5rem; border-radius: 12px; } .login-title { font-size: 16px; } }