/* ============================================================================ HomeLedger — Design Token System Four switchable web3 aesthetics driven entirely by [data-theme] on . Themes: neon (default) · fintech · irid · brutal Every component below reads CSS custom properties, so a single attribute swap re-skins the entire product. Shared by index.html (landing) and app.html (dashboard). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@500;600;700;800&display=swap'); /* ---------------------------------------------------------------------------- THEME 1 — NEON GLASS (dark, glassmorphic, cyan→violet) [DEFAULT] -------------------------------------------------------------------------- */ :root, :root[data-theme="neon"]{ --bg:#0a0b1a; --bg1:rgba(34,211,238,.16); --bg2:rgba(139,92,246,.20); --bg3:rgba(16,185,129,.10); --grid:transparent; --surface:rgba(21,24,46,.66); --surface2:rgba(255,255,255,.045); --surface3:rgba(255,255,255,.08); --glass-bg:rgba(13,15,33,.55); --blur:16px; --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.17); --radius:16px; --radius-sm:10px; --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-hover:0 16px 44px rgba(0,0,0,.55); --glow:0 0 0 1px rgba(34,211,238,.22),0 0 26px rgba(34,211,238,.16); --text:#e8ecff; --text2:#a9b2d8; --text3:#6c7596; --on-accent:#04121b; --accent:#22d3ee; --accent2:#8b5cf6; --accent-grad:linear-gradient(135deg,#22d3ee 0%,#8b5cf6 100%); --accent-soft:rgba(34,211,238,.14); --accent-border:rgba(34,211,238,.40); --good:#34d399; --good-soft:rgba(52,211,153,.15); --good-border:rgba(52,211,153,.38); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14); --warn-border:rgba(251,191,36,.38); --bad:#fb7185; --bad-soft:rgba(251,113,133,.15); --bad-border:rgba(251,113,133,.38); --info:#60a5fa; --info-soft:rgba(96,165,250,.15); --neutral:#94a3b8; --neutral-soft:rgba(148,163,184,.13); --header-bg:linear-gradient(135deg,#0b0d20 0%,#13162f 55%,#0b0d20 100%); --header-text:#ffffff; --header-line:var(--accent-grad); --tab-bg:rgba(255,255,255,.05); --tab-text:#8b93b8; --tab-hover:rgba(255,255,255,.11); --tab-on-bg:rgba(34,211,238,.16); --tab-on-text:#e8ecff; --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.16); --field-text:#e8ecff; --c-series1:#22d3ee; --c-series1-neg:#fb7185; --c-series2:#8b5cf6; --c-series2-neg:#f59e0b; --c-axis:#8b93b8; --c-grid:rgba(255,255,255,.08); --c-zero:rgba(255,255,255,.26); --c-bartext:#a9b2d8; --font-head:"Space Grotesk",Inter,system-ui,sans-serif; --font-body:Inter,system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --uppercase:none; --tab-radius:10px 10px 0 0; } /* ---------------------------------------------------------------------------- THEME 2 — CLEAN FINTECH (light, restrained, indigo→teal gradient) -------------------------------------------------------------------------- */ :root[data-theme="fintech"]{ --bg:#f6f7fb; --bg1:rgba(99,102,241,.10); --bg2:rgba(20,184,166,.09); --bg3:rgba(99,102,241,.04); --grid:transparent; --surface:#ffffff; --surface2:#f3f5fa; --surface3:#eef1f8; --glass-bg:rgba(255,255,255,.82); --blur:8px; --border:#e7eaf3; --border2:#d7dcea; --radius:14px; --radius-sm:9px; --shadow:0 1px 3px rgba(16,24,40,.06),0 10px 26px rgba(16,24,40,.05); --shadow-hover:0 14px 34px rgba(16,24,40,.10); --glow:none; --text:#0f1626; --text2:#475067; --text3:#8a93a8; --on-accent:#ffffff; --accent:#4f46e5; --accent2:#14b8a6; --accent-grad:linear-gradient(135deg,#6366f1 0%,#14b8a6 100%); --accent-soft:rgba(79,70,229,.08); --accent-border:rgba(79,70,229,.24); --good:#0ea371; --good-soft:rgba(14,163,113,.10); --good-border:rgba(14,163,113,.26); --warn:#d97706; --warn-soft:rgba(217,119,6,.10); --warn-border:rgba(217,119,6,.24); --bad:#dc2626; --bad-soft:rgba(220,38,38,.08); --bad-border:rgba(220,38,38,.22); --info:#2563eb; --info-soft:rgba(37,99,235,.09); --neutral:#64748b; --neutral-soft:rgba(100,116,139,.10); --header-bg:#ffffff; --header-text:#0f1626; --header-line:var(--accent-grad); --tab-bg:#eef1f8; --tab-text:#64748b; --tab-hover:#e4e8f2; --tab-on-bg:#ffffff; --tab-on-text:#0f1626; --field-bg:#ffffff; --field-border:#d7dcea; --field-text:#0f1626; --c-series1:#6366f1; --c-series1-neg:#dc2626; --c-series2:#14b8a6; --c-series2-neg:#f59e0b; --c-axis:#64748b; --c-grid:#eef1f6; --c-zero:#94a3b8; --c-bartext:#334155; --font-head:Inter,system-ui,sans-serif; --font-body:Inter,system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --uppercase:none; --tab-radius:10px 10px 0 0; } /* ---------------------------------------------------------------------------- THEME 3 — IRIDESCENT / HOLOGRAPHIC (light pearlescent, mint·lavender·peach) -------------------------------------------------------------------------- */ :root[data-theme="irid"]{ --bg:#f7f7ff; --bg1:rgba(110,231,183,.20); --bg2:rgba(196,181,253,.26); --bg3:rgba(253,186,116,.18); --grid:transparent; --surface:rgba(255,255,255,.70); --surface2:rgba(255,255,255,.52); --surface3:rgba(255,255,255,.92); --glass-bg:rgba(255,255,255,.52); --blur:18px; --border:rgba(150,128,210,.24); --border2:rgba(150,128,210,.38); --radius:20px; --radius-sm:13px; --shadow:0 12px 36px rgba(124,93,205,.16); --shadow-hover:0 18px 48px rgba(124,93,205,.22); --glow:0 0 0 1px rgba(196,181,253,.45); --text:#2a2150; --text2:#5b5482; --text3:#938cb3; --on-accent:#221a3f; --accent:#a78bfa; --accent2:#6ee7b7; --accent-grad:linear-gradient(120deg,#6ee7b7 0%,#a78bfa 50%,#fdba74 100%); --accent-soft:rgba(167,139,250,.16); --accent-border:rgba(167,139,250,.42); --good:#10b981; --good-soft:rgba(110,231,183,.24); --good-border:rgba(16,185,129,.32); --warn:#f59e0b; --warn-soft:rgba(253,186,116,.26); --warn-border:rgba(245,158,11,.32); --bad:#fb7185; --bad-soft:rgba(251,113,133,.18); --bad-border:rgba(251,113,133,.34); --info:#818cf8; --info-soft:rgba(129,140,248,.18); --neutral:#8b86a8; --neutral-soft:rgba(139,134,168,.16); --header-bg:linear-gradient(120deg,rgba(110,231,183,.42) 0%,rgba(196,181,253,.46) 50%,rgba(253,186,116,.36) 100%); --header-text:#2a2150; --header-line:var(--accent-grad); --tab-bg:rgba(255,255,255,.5); --tab-text:#5b5482; --tab-hover:rgba(255,255,255,.82); --tab-on-bg:rgba(255,255,255,.95); --tab-on-text:#2a2150; --field-bg:rgba(255,255,255,.7); --field-border:rgba(150,128,210,.34); --field-text:#2a2150; --c-series1:#a78bfa; --c-series1-neg:#fb7185; --c-series2:#34d399; --c-series2-neg:#fb923c; --c-axis:#5b5482; --c-grid:rgba(120,90,180,.13); --c-zero:rgba(90,84,130,.42); --c-bartext:#5b5482; --font-head:"Sora",Inter,system-ui,sans-serif; --font-body:Inter,system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --uppercase:none; --tab-radius:13px 13px 0 0; } /* ---------------------------------------------------------------------------- THEME 4 — CYBER BRUTALIST (black, mono, terminal green, hard edges) -------------------------------------------------------------------------- */ :root[data-theme="brutal"]{ --bg:#000000; --bg1:rgba(0,255,156,.05); --bg2:rgba(0,224,255,.04); --bg3:transparent; --grid:rgba(0,255,156,.05); --surface:#070b08; --surface2:#0d120e; --surface3:#131a14; --glass-bg:#000000; --blur:0px; --border:rgba(0,255,156,.28); --border2:rgba(0,255,156,.50); --radius:0px; --radius-sm:0px; --shadow:none; --shadow-hover:0 0 0 1px rgba(0,255,156,.5); --glow:0 0 0 1px rgba(0,255,156,.35); --text:#cfeede; --text2:#76b394; --text3:#4f7d65; --on-accent:#001a0f; --accent:#00ff9c; --accent2:#00e0ff; --accent-grad:linear-gradient(90deg,#00ff9c 0%,#00d68a 100%); --accent-soft:rgba(0,255,156,.10); --accent-border:rgba(0,255,156,.45); --good:#00ff9c; --good-soft:rgba(0,255,156,.10); --good-border:rgba(0,255,156,.42); --warn:#ffb000; --warn-soft:rgba(255,176,0,.10); --warn-border:rgba(255,176,0,.42); --bad:#ff5470; --bad-soft:rgba(255,84,112,.10); --bad-border:rgba(255,84,112,.42); --info:#00e0ff; --info-soft:rgba(0,224,255,.10); --neutral:#76b394; --neutral-soft:rgba(118,179,148,.10); --header-bg:#000000; --header-text:#00ff9c; --header-line:var(--accent); --tab-bg:#0a0f0b; --tab-text:#76b394; --tab-hover:#111811; --tab-on-bg:var(--accent); --tab-on-text:#001a0f; --field-bg:#0a0f0b; --field-border:rgba(0,255,156,.4); --field-text:#cfeede; --c-series1:#00e0ff; --c-series1-neg:#ff5470; --c-series2:#00ff9c; --c-series2-neg:#ffb000; --c-axis:#76b394; --c-grid:rgba(0,255,156,.13); --c-zero:rgba(0,255,156,.42); --c-bartext:#9fe6c4; --font-head:"JetBrains Mono",monospace; --font-body:"JetBrains Mono",monospace; --font-mono:"JetBrains Mono",monospace; --uppercase:uppercase; --tab-radius:0; } /* ---------------------------------------------------------------------------- THEME 5 — SLAY (rainbow, vivid full-spectrum gradients on a deep glass base) -------------------------------------------------------------------------- */ :root[data-theme="slay"]{ --bg:#ff6ec7; --bg1:rgba(255,46,151,.22); --bg2:rgba(61,180,255,.24); --bg3:rgba(255,225,77,.22); --grid:transparent; --surface:rgba(38,18,66,.90); --surface2:rgba(54,28,92,.60); --surface3:rgba(64,34,104,.85); --glass-bg:rgba(32,16,58,.80); --blur:17px; --border:rgba(255,255,255,.14); --border2:rgba(255,255,255,.24); --radius:18px; --radius-sm:11px; --shadow:0 12px 38px rgba(0,0,0,.50); --shadow-hover:0 18px 52px rgba(120,40,160,.45); --glow:0 0 0 1px rgba(255,90,205,.32),0 0 30px rgba(160,90,255,.26); --text:#fdeaff; --text2:#e0ccf2; --text3:#c4b0e6; --on-accent:#1a0a2e; --accent:#ff4fd8; --accent2:#5ad1ff; --accent-grad:linear-gradient(100deg,#ff2e97 0%,#ff8a3d 20%,#ffe14d 40%,#5cff8f 58%,#3db4ff 78%,#a05cff 100%); --accent-soft:rgba(255,79,216,.16); --accent-border:rgba(255,79,216,.44); --good:#3ef0a0; --good-soft:rgba(62,240,160,.16); --good-border:rgba(62,240,160,.42); --warn:#ffd23d; --warn-soft:rgba(255,210,61,.16); --warn-border:rgba(255,210,61,.42); --bad:#ff5c8a; --bad-soft:rgba(255,92,138,.16); --bad-border:rgba(255,92,138,.44); --info:#5ad1ff; --info-soft:rgba(90,209,255,.16); --neutral:#b59fd8; --neutral-soft:rgba(181,159,216,.15); --header-bg:linear-gradient(120deg,#140e2c 0%,#241543 55%,#140e2c 100%); --header-text:#ffffff; --header-line:var(--accent-grad); --tab-bg:rgba(255,255,255,.06); --tab-text:#b9a6d8; --tab-hover:rgba(255,255,255,.12); --tab-on-bg:rgba(255,79,216,.18); --tab-on-text:#ffffff; --field-bg:rgba(255,255,255,.06); --field-border:rgba(255,255,255,.20); --field-text:#fdeaff; --c-series1:#ff4fd8; --c-series1-neg:#ff5c8a; --c-series2:#5ad1ff; --c-series2-neg:#ffd23d; --c-axis:#b9a6d8; --c-grid:rgba(255,255,255,.09); --c-zero:rgba(255,255,255,.28); --c-bartext:#d3b8e8; --font-head:"Space Grotesk",Inter,system-ui,sans-serif; --font-body:Inter,system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace; --uppercase:none; --tab-radius:11px 11px 0 0; } /* ============================================================================ BASE ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0} html,body{min-height:100%} body{ font-family:var(--font-body); font-size:13.5px; line-height:1.5; background:var(--bg); color:var(--text); position:relative; overflow-x:hidden; transition:background .35s ease,color .35s ease; } /* Decorative aurora / mesh background */ body::before{ content:''; position:fixed; inset:-20% -10% auto -10%; height:80vh; z-index:-2; pointer-events:none; background: radial-gradient(40% 50% at 18% 12%,var(--bg1) 0%,transparent 70%), radial-gradient(46% 56% at 82% 8%,var(--bg2) 0%,transparent 72%), radial-gradient(50% 60% at 60% 60%,var(--bg3) 0%,transparent 75%); filter:saturate(115%); transition:opacity .35s ease; } /* Brutalist grid overlay */ body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:44px 44px; } ::selection{background:var(--accent-soft);color:var(--text)} a{color:var(--accent);text-decoration:none} /* ============================================================================ THEME SWITCHER (segmented control, shared) ========================================================================== */ .theme-switch{display:inline-flex;gap:3px;padding:0;border:0;background:transparent} [data-theme="brutal"] .theme-switch{border-radius:0} .theme-switch button{appearance:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:600; font-size:11px;letter-spacing:.02em;padding:5px 11px;border-radius:999px;color:var(--text2); background:transparent;transition:.18s all;white-space:nowrap;text-transform:var(--uppercase)} [data-theme="brutal"] .theme-switch button{border-radius:0} .theme-switch button:hover{color:var(--text)} .theme-switch button.active{color:var(--on-accent);background:var(--accent-grad);box-shadow:var(--glow)} .theme-switch button .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle} [data-theme="brutal"] .theme-switch button .dot{border-radius:0} /* ============================================================================ DASHBOARD COMPONENTS (class names preserved from original app) ========================================================================== */ /* HEADER */ .hdr{background:var(--header-bg);color:var(--header-text);padding:16px 24px 0;position:sticky;top:0;z-index:50;overflow:hidden; border-bottom:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))} .hdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--header-line)} .hdr-top{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:10px 12px;position:relative} .brand{display:flex;align-items:center;gap:11px} .brand-mark{width:34px;height:34px;border-radius:9px;background:var(--accent-grad);display:grid;place-items:center; box-shadow:var(--glow);flex-shrink:0} [data-theme="brutal"] .brand-mark{border-radius:0;border:1px solid var(--accent)} .brand-mark svg{width:19px;height:19px;display:block;fill:var(--on-accent)} .brand-name{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--header-text);line-height:1.05} .brand-name em{font-style:normal;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="brutal"] .brand-name em{-webkit-text-fill-color:var(--accent)} .brand-sub{font-size:11px;color:var(--text2);margin-top:3px;letter-spacing:.01em} .brand-sub b{color:var(--text)} .hdr-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end} /* header: clear split between INFO (status) and ACTIONS (toolbar) */ .hdr-status{display:flex;align-items:center;gap:8px;flex-shrink:0} .hdr-status .hdr-updated{font-size:10px;color:var(--text3);white-space:nowrap;line-height:1.2;max-width:120px} .hdr-actions{display:flex;align-items:center;gap:7px;flex-shrink:0;padding:5px; border:1px solid var(--border);border-radius:999px;background:var(--surface2)} [data-theme="brutal"] .hdr-actions{border-radius:0} .hdr-actions::before{content:"💪 Actions";font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.01em;color:var(--text);white-space:nowrap; padding-left:7px;align-self:center} [data-theme="slay"] .hdr-actions::before{content:"💪 Actions"} .btn-refresh{min-width:150px;justify-content:center} .btn-act{} .btn-panic{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-border)} .btn-panic:hover{filter:brightness(1.05);transform:translateY(-1px);border-color:var(--warn)} .hdr-title h1{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--header-text)} .hdr-title h1 em{color:var(--accent);font-style:normal} .hdr-title p{font-size:11.5px;color:var(--text2);margin-top:2px} .hdr-title p b{color:var(--text)} .btn{padding:6px 14px;border-radius:var(--radius-sm);border:0;font-size:12px;font-weight:600;cursor:pointer; transition:.15s all;font-family:var(--font-body);text-transform:var(--uppercase); display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .btn-primary{background:var(--accent-grad);color:var(--on-accent);box-shadow:var(--glow)} .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)} .btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)} .btn-ghost:hover{background:var(--surface3);border-color:var(--border2)} .btn-sm{padding:5px 11px;font-size:11.5px} .spill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:4px 11px;border-radius:999px;font-weight:600;text-transform:var(--uppercase)} [data-theme="brutal"] .spill{border-radius:0} .spill.ok{background:var(--good-soft);color:var(--good);border:1px solid var(--good-border)} .spill.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-border)} .spill.err{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-border)} .spill.grey{background:var(--neutral-soft);color:var(--neutral);border:1px solid var(--border)} /* LIVE OFFER BANNER */ .live-offer{margin-top:12px;padding:10px 15px;background:var(--accent-soft);border:1px solid var(--accent-border); border-radius:var(--radius-sm);font-size:12.5px;color:var(--text2);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} .live-offer .lo-k{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;color:var(--accent);display:inline-flex;align-items:center;gap:6px} .live-offer .lo-k::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)} [data-theme="brutal"] .live-offer .lo-k::before{border-radius:0} .live-offer .lo-v{color:var(--text)} .live-offer .lo-v b{color:var(--text)} .live-offer .lo-strong{color:var(--accent);font-weight:700} .live-offer .lo-dim{color:var(--text3)} /* TABS */ .tab-bar{display:flex;gap:3px;padding:14px 24px 0;overflow-x:auto;position:relative} .tab-bar::-webkit-scrollbar{display:none} .tabBtn{padding:10px 18px;border-radius:var(--tab-radius);font-size:14px;font-weight:700;cursor:pointer; color:var(--tab-text);background:var(--tab-bg);border:1px solid transparent;border-bottom:0;white-space:nowrap; transition:.15s all;user-select:none;font-family:var(--font-body);text-transform:var(--uppercase);letter-spacing:.01em} .tabBtn:hover{color:var(--text);background:var(--tab-hover)} .tabBtn.on{background:var(--tab-on-bg);color:var(--tab-on-text);border-color:var(--border);box-shadow:var(--glow)} .badge{margin-left:7px;font-size:11px;background:var(--accent-soft);color:var(--accent);padding:2px 8px;border-radius:999px;font-weight:800} [data-theme="brutal"] .badge{border-radius:0} .tabBtn.on .badge{background:var(--accent);color:var(--on-accent)} /* PANELS */ .panel{display:none;padding:22px 24px 44px;animation:fadeIn .18s ease} .panel.on{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* KPI ROW */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px} .kpi{background:var(--surface);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow); border:1px solid var(--border);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); position:relative;overflow:hidden;transition:.2s all} .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border2)} .kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad);opacity:.85} .kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:700} .kpi-val{font-family:var(--font-head);font-size:23px;font-weight:800;color:var(--text);margin-top:4px;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .kpi-sub{font-size:11px;color:var(--text2);margin-top:3px} /* CARDS */ .card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border); overflow:hidden;margin-bottom:16px;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))} .card-head{padding:12px 17px;border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase; letter-spacing:.07em;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:space-between} /* TABLES */ table.t{width:100%;border-collapse:collapse;font-size:13px} table.t th{background:var(--surface2);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3); font-weight:700;padding:9px 13px;border-bottom:1px solid var(--border);text-align:left} table.t td{padding:9px 13px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)} table.t tr:last-child td{border-bottom:0} table.t tr:hover td{background:var(--surface2)} .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .muted{color:var(--text3)} .bold{font-weight:700} .snip{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3)} .from-col{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)} /* TAGS */ .tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent} [data-theme="brutal"] .tag{border-radius:0} .tag.green,.tag.completed,.tag.done{background:var(--good-soft);color:var(--good);border-color:var(--good-border)} .tag.yellow,.tag.in_progress,.tag.active{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .tag.blue,.tag.pending{background:var(--info-soft);color:var(--info)} .tag.red,.tag.blocked,.tag.critical{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-border)} .tag.grey,.tag.draft,.tag.low{background:var(--neutral-soft);color:var(--neutral);border-color:var(--border)} .tag.orange,.tag.high{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .tag.teal{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)} .tag.gmail{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .tag.icloud{background:var(--info-soft);color:var(--info)} .tag.imessage{background:var(--good-soft);color:var(--good);border-color:var(--good-border)} /* PIPELINE */ .pipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .ph{background:var(--surface);border-radius:var(--radius);padding:15px 17px;border:1px solid var(--border); box-shadow:var(--shadow);border-left-width:4px;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));transition:.2s all} .ph:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)} .ph.completed{border-left-color:var(--good)} .ph.in_progress{border-left-color:var(--warn)} .ph.pending{border-left-color:var(--neutral)} .ph.blocked{border-left-color:var(--bad)} .ph-num{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .ph-name{font-family:var(--font-head);font-weight:700;font-size:14px;margin:4px 0 7px;color:var(--text)} .ph-summ{font-size:12px;color:var(--text2)} .ph-dates{font-size:11px;color:var(--text3);margin-top:7px} .ph-acts{list-style:none;font-size:12px;color:var(--text2);margin-top:7px;padding:0} .ph-acts li{display:flex;gap:6px;margin-bottom:3px} .ph-acts li::before{content:'→';color:var(--accent);flex-shrink:0} /* FINANCIALS */ .fin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px} .fin-card{background:var(--surface);border-radius:var(--radius);padding:17px;border:1px solid var(--border); box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))} .fin-card h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text2);margin-bottom:11px} .fr{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px} .fr:last-child{border-bottom:0} .fr .lb{color:var(--text2)} .fr .vl{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)} .fr.tot{padding-top:9px;margin-top:3px;border-top:1px solid var(--border2);border-bottom:0!important} .fr.tot .vl{font-size:15px;color:var(--accent)} .fr.neg .vl{color:var(--bad)} .note{font-size:11px;color:var(--text3);margin-top:9px;border-top:1px solid var(--border);padding-top:7px;line-height:1.5} /* PRICE SENSITIVITY BARS */ .psbar{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:12px} .psbar-lbl{min-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2);font-weight:500} .psbar-track{flex:1;height:8px;background:var(--surface2);border-radius:999px;overflow:hidden;min-width:60px;border:1px solid var(--border)} [data-theme="brutal"] .psbar-track{border-radius:0} .psbar-fill{height:100%;border-radius:999px;background:var(--accent-grad);transition:width .35s ease} .psbar-fill.neg{background:var(--bad)} .psbar-val{min-width:88px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);font-size:12px} /* OFFER EVALUATOR */ .oe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .oe-card{background:var(--surface);border-radius:var(--radius);padding:17px;border:1px solid var(--border);box-shadow:var(--shadow); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))} .oe-card h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text2);margin-bottom:11px} .oe-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px} .oe-row:last-child{border-bottom:0} .oe-row .lbl{color:var(--text2)} .oe-row .val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)} .oe-row.tot{border-top:1px solid var(--border2);border-bottom:0!important;padding-top:9px;margin-top:4px} .oe-row.tot .val{font-size:15px} .oe-inp{display:flex;flex-wrap:wrap;gap:11px;padding:13px 17px;background:var(--surface);border-radius:var(--radius); border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:14px;align-items:flex-end;backdrop-filter:blur(var(--blur))} .oe-field{display:flex;flex-direction:column;gap:4px} .oe-field label{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .oe-field input{padding:6px 9px;border:1px solid var(--field-border);border-radius:var(--radius-sm);font-size:12.5px; font-variant-numeric:tabular-nums;background:var(--field-bg);color:var(--field-text);width:108px;font-family:var(--font-mono)} [data-theme="brutal"] .oe-field input{border-radius:0} .oe-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .pos{color:var(--good)}.neg2{color:var(--bad)} /* COMMS */ .ctrl-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .ctrl-bar input,.ctrl-bar select{font-size:12.5px;padding:7px 11px;border:1px solid var(--field-border); border-radius:var(--radius-sm);background:var(--field-bg);color:var(--field-text);font-family:var(--font-body)} [data-theme="brutal"] .ctrl-bar input,[data-theme="brutal"] .ctrl-bar select{border-radius:0} .ctrl-bar input{min-width:200px} .ctrl-bar input:focus,.ctrl-bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .empty-state{text-align:center;padding:44px 20px;color:var(--text3)} .empty-state p{font-size:13px;margin-top:6px} /* FOOTER */ .footer{padding:12px 24px;background:var(--surface2);border-top:1px solid var(--border);font-size:11px;color:var(--text3); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .ver-chip{background:var(--accent-soft);color:var(--accent);padding:2px 9px;border-radius:999px;font-weight:700;font-size:10.5px} [data-theme="brutal"] .ver-chip{border-radius:0} /* chart container */ #psChartCanvas{width:100%;height:280px} /* INVESTMENT OUTCOME HERO */ .outcome-card{border-color:var(--accent-border)!important} .kpi.hero{border-left:0} .kpi.hero::before{width:4px} .kpi-val.pos{color:var(--good)} .kpi-val.neg{color:var(--bad)} .lo-strong.pos{color:var(--good)} .lo-strong.neg{color:var(--bad)} /* LISTING TAB */ .lsg{display:flex;gap:12px;padding:13px 17px;border-bottom:1px solid var(--border);align-items:flex-start} .lsg:last-child{border-bottom:0} .lsg .tag{flex-shrink:0;margin-top:1px} .lsg-t{font-weight:700;font-size:13.5px;color:var(--text)} .lsg-e{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.5} .lsg-a{font-size:12.5px;color:var(--text2);margin-top:5px;line-height:1.5} .lsg-a b{color:var(--accent)} .lsg-main{min-width:0;flex:1} .lsg-act{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .lsg-act .btn{font-size:11.5px;padding:5px 10px} /* Listings tab: two-column split (current listings + optimisations | performance) */ .list-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .list-col{min-width:0} @media(max-width:1040px){.list-split{grid-template-columns:1fr}} /* draft-to-agent modal */ .draft-ov{position:fixed;inset:0;z-index:10000;background:rgba(8,12,22,.55);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:20px} .draft-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-hover); width:560px;max-width:100%;max-height:88vh;overflow:auto;padding:18px 18px 16px} [data-theme="brutal"] .draft-modal{border-radius:0} .draft-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-head);font-weight:800; font-size:16px;color:var(--text);margin-bottom:10px} .draft-lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin:10px 0 4px} .draft-in{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--border);border-radius:9px; background:var(--surface2);color:var(--text);font-size:13px;font-family:var(--font-body)} .draft-body{width:100%;box-sizing:border-box;min-height:188px;resize:vertical;padding:11px 12px;border:1px solid var(--border); border-radius:9px;background:var(--surface2);color:var(--text);font-size:13px;line-height:1.55;font-family:var(--font-body)} [data-theme="brutal"] .draft-in,[data-theme="brutal"] .draft-body{border-radius:0} .draft-note{font-size:11.5px;color:var(--text3);margin:9px 0 13px;line-height:1.5} .draft-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap} .lstat{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--border);font-size:12.5px} .lstat:last-child{border-bottom:0} .lstat .lb{color:var(--text2)} .lstat .vl{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)} .lstat .vl.warn{color:var(--bad)} .lfun{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12.5px} .lfun-lbl{min-width:170px;color:var(--text2);font-weight:600} .lfun-track{flex:1;height:24px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;overflow:hidden;min-width:60px} [data-theme="brutal"] .lfun-track{border-radius:0} .lfun-fill{height:100%;background:var(--accent-grad);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:var(--on-accent);font-weight:700;font-size:11px;min-width:3px;white-space:nowrap} .lfun-val{min-width:120px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)} .lfun-step{min-width:118px;text-align:right;font-size:11px;color:var(--text3)} .head-meta{text-transform:none;letter-spacing:0;font-weight:500;color:var(--text3)} #listChartCanvas{width:100%;height:240px} /* COLLAPSIBLE GROUPS (expand/close panels in sensible groupings) */ /* a collapse is ONE contained section: a title bar attached to the body that holds its cards */ .collapse{margin-bottom:18px;border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:var(--radius);overflow:hidden;background:var(--section-bg,transparent);box-shadow:var(--shadow)} [data-theme="brutal"] .collapse{border-radius:0} .collapse-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer; background:var(--accent-soft);border:0;border-bottom:1px solid var(--border);border-radius:0;padding:13px 16px; font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text); transition:.15s background} .collapse-head:hover{filter:brightness(1.05)} .collapse.closed .collapse-head{border-bottom:0} .collapse-head .ch-count{font-weight:600;color:var(--text3);text-transform:none;letter-spacing:0;margin-left:auto;margin-right:12px;font-size:11px} /* explicit Show / Hide pill so the toggle action is obvious */ .collapse-head .ch-toggle{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:10.5px;font-weight:800; letter-spacing:.04em;color:var(--on-accent);background:var(--accent-grad);border-radius:999px;padding:4px 11px;box-shadow:var(--glow)} [data-theme="brutal"] .collapse-head .ch-toggle{border-radius:0} .collapse-head .ch-toggle::after{content:"Hide"} .collapse.closed .collapse-head .ch-toggle::after{content:"Show"} .collapse-head .ch-toggle .chev{font-size:11px;transition:transform .2s ease;color:var(--on-accent);display:inline-block} .collapse.closed .collapse-head .ch-toggle .chev{transform:rotate(-90deg)} .collapse-body{margin-top:0;padding:14px 14px 0} .collapse-body>*:last-child{margin-bottom:14px} .collapse.closed .collapse-body{display:none} /* MONITORING / DATA FRESHNESS */ .freshness{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:11.5px;color:var(--text2); background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;margin-bottom:16px} [data-theme="brutal"] .freshness{border-radius:0} .freshness b{color:var(--text);font-weight:700} .fresh-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 9px var(--good);flex-shrink:0;animation:freshpulse 2.2s ease-in-out infinite} [data-theme="brutal"] .fresh-dot{border-radius:0} .fresh-lead{font-weight:700;color:var(--good);text-transform:var(--uppercase);letter-spacing:.02em} @keyframes freshpulse{0%,100%{opacity:1}50%{opacity:.35}} .mon-chip{display:inline-block;font-size:10px;font-weight:700;color:var(--good);background:var(--good-soft); border:1px solid var(--good-border);padding:1px 7px;border-radius:999px;margin-left:6px;white-space:nowrap;text-transform:none;letter-spacing:0} [data-theme="brutal"] .mon-chip{border-radius:0} /* PIPELINE VISUALS — stepper + gauges */ #pipeTimeline svg{width:100%;height:auto;display:block} .vstats{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin-bottom:16px} @media(max-width:760px){.vstats{grid-template-columns:1fr}} .vstat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow); padding:14px 16px;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));display:flex;flex-direction:column;gap:8px;justify-content:space-between} .vstat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-weight:700} .vstat svg{width:100%;height:auto;display:block} /* ============================================================================ LANDING PAGE COMPONENTS (prefix .ll-) ========================================================================== */ .ll-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 28px;background:var(--glass-bg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); border-bottom:1px solid var(--border)} .ll-nav-links{display:flex;gap:22px;align-items:center} .ll-nav-links a{color:var(--text2);font-size:13px;font-weight:500} .ll-nav-links a:hover{color:var(--text)} .ll-wrap{max-width:1120px;margin:0 auto;padding:0 28px} .ll-hero{text-align:center;padding:84px 28px 64px;position:relative} .ll-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--accent); background:var(--accent-soft);border:1px solid var(--accent-border);padding:6px 14px;border-radius:999px;margin-bottom:24px;text-transform:var(--uppercase);letter-spacing:.03em} [data-theme="brutal"] .ll-eyebrow{border-radius:0} .ll-hero h1{font-family:var(--font-head);font-size:clamp(34px,6vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:var(--text);max-width:14ch;margin:0 auto} .ll-hero h1 em{font-style:normal;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="brutal"] .ll-hero h1 em{-webkit-text-fill-color:var(--accent)} .ll-hero p.sub{font-size:clamp(15px,2vw,19px);color:var(--text2);max-width:60ch;margin:22px auto 0;line-height:1.6} .ll-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px} .ll-btn{padding:13px 26px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:700;cursor:pointer;border:0; font-family:var(--font-body);transition:.18s all;display:inline-flex;align-items:center;gap:9px;text-transform:var(--uppercase)} .ll-btn.primary{background:var(--accent-grad);color:var(--on-accent);box-shadow:var(--glow)} .ll-btn.primary:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.05)} .ll-btn.ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)} .ll-btn.ghost:hover{background:var(--surface3);border-color:var(--border2)} .ll-trust{margin-top:22px;font-size:12px;color:var(--text3)} /* hero mock framing */ .ll-mock{margin:46px auto 0;max-width:1000px;border-radius:calc(var(--radius) + 4px);border:1px solid var(--border); background:var(--surface);box-shadow:var(--shadow-hover);overflow:hidden;backdrop-filter:blur(var(--blur))} .ll-mock-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--surface2)} .ll-mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--border2);display:block} .ll-mock-bar i:nth-child(1){background:var(--bad)}.ll-mock-bar i:nth-child(2){background:var(--warn)}.ll-mock-bar i:nth-child(3){background:var(--good)} .ll-mock-bar span{margin-left:10px;font-size:11.5px;color:var(--text3);font-family:var(--font-mono)} .ll-mock-body{padding:20px} .ll-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} /* section heading */ .ll-section{padding:64px 0} .ll-sec-head{text-align:center;max-width:64ch;margin:0 auto 44px} .ll-sec-head .kick{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .ll-sec-head h2{font-family:var(--font-head);font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:10px;line-height:1.1} .ll-sec-head p{font-size:15.5px;color:var(--text2);margin-top:14px;line-height:1.6} /* feature grid */ .ll-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .ll-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px; box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));transition:.2s all;position:relative;overflow:hidden} .ll-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--border2)} .ll-card.feature-wide{grid-column:span 2} @media(max-width:680px){.ll-card.feature-wide{grid-column:span 1}} .ll-ico{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-border); display:grid;place-items:center;margin-bottom:16px;color:var(--accent)} [data-theme="brutal"] .ll-ico{border-radius:0} .ll-ico svg{width:23px;height:23px} .ll-card h3{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.01em} .ll-card p{font-size:14px;color:var(--text2);line-height:1.6} .ll-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px} .ll-chip{font-size:11.5px;font-weight:600;color:var(--text2);background:var(--surface2);border:1px solid var(--border); padding:4px 10px;border-radius:999px} [data-theme="brutal"] .ll-chip{border-radius:0} /* steps */ .ll-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:step} .ll-step{position:relative;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur))} .ll-step .n{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--on-accent);background:var(--accent-grad); width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px;box-shadow:var(--glow)} [data-theme="brutal"] .ll-step .n{border-radius:0} .ll-step h4{font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px} .ll-step p{font-size:13.5px;color:var(--text2);line-height:1.55} /* metric band */ .ll-band{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:34px; display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;box-shadow:var(--shadow);backdrop-filter:blur(var(--blur))} .ll-metric .v{font-family:var(--font-head);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.01em; background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums} [data-theme="brutal"] .ll-metric .v{-webkit-text-fill-color:var(--accent)} .ll-metric .k{font-size:13px;color:var(--text2);margin-top:6px} /* final CTA */ .ll-final{text-align:center;padding:74px 28px;margin:40px 0;border-radius:calc(var(--radius) + 6px); border:1px solid var(--accent-border);background:var(--accent-soft);position:relative;overflow:hidden} .ll-final h2{font-family:var(--font-head);font-size:clamp(26px,4vw,42px);font-weight:800;color:var(--text);letter-spacing:-.02em} .ll-final p{font-size:16px;color:var(--text2);margin:14px auto 0;max-width:52ch} /* footer */ .ll-foot{border-top:1px solid var(--border);padding:34px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--text3);font-size:12.5px} .ll-foot .brand-name{font-size:15px} @media(max-width:640px){ .ll-nav-links{display:none} .ll-hero{padding:60px 20px 48px} .panel{padding:18px 16px 40px} .hdr{padding:14px 16px 0} .tab-bar{padding:12px 16px 0} } /* ============================================================================ SLAY — EXTRA RAINBOW 🦄 🌈 (animated gradients, rainbow text, emoji flair) ========================================================================== */ /* ============================================================================ BASE EMOJI FLAIR — business / finance / house / computer (ALL vibes) Slay rules below override these where they overlap (later + higher specificity). ========================================================================== */ .brand-name::after{content:" 🏠"} .brand-sub::before{content:"💼 "} .live-offer .lo-k::before{content:"🏠 "} .live-offer .lo-k::after{content:" 💰"} .ver-chip::before{content:"💻 "} .fin-card h3::before{content:"🏦 "} .oe-card h3::before{content:"💼 "} .fresh-lead::before{content:"📡 "} .kpi-val.pos::after{content:" 📈"} .lo-strong.pos::after{content:" 🤝"} button[onclick="openSetup()"]::before{content:"🥷 "} button[onclick="refreshComms()"]::before{content:"🔄 "} /* top menu (tabs) */ .tabBtn[data-tab="pipeline"]::before{content:"🏠 "} .tabBtn[data-tab="tasks"]::before{content:"✅ "} .tabBtn[data-tab="risks"]::before{content:"⚠️ "} .tabBtn[data-tab="offer"]::before{content:"🤝 "} .tabBtn[data-tab="financials"]::before{content:"💰 "} .tabBtn[data-tab="comps"]::before{content:"🏘️ "} .tabBtn[data-tab="listing"]::before{content:"🌐 "} .tabBtn[data-tab="comms"]::before{content:"📧 "} .tabBtn[data-tab="docs"]::before{content:"📄 "} @keyframes slayShift{0%{background-position:0% 50%}100%{background-position:200% 50%}} @keyframes slayFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}} /* seamless looping rainbow so the animation has no visible seam */ :root[data-theme="slay"]{ --accent-grad:linear-gradient(100deg,#ff2e97 0%,#ff8a3d 13%,#ffe14d 26%,#5cff8f 40%,#3db4ff 54%,#a05cff 68%,#ff5cf0 84%,#ff2e97 100%); } /* richer multi-colour aurora background */ [data-theme="slay"] body::before{ height:96vh; background: radial-gradient(34% 46% at 10% 8%,rgba(255,46,151,.32),transparent 70%), radial-gradient(32% 44% at 34% 3%,rgba(255,210,61,.24),transparent 72%), radial-gradient(36% 50% at 60% 7%,rgba(61,255,143,.22),transparent 72%), radial-gradient(40% 52% at 86% 5%,rgba(61,180,255,.28),transparent 72%), radial-gradient(46% 58% at 58% 62%,rgba(160,92,255,.26),transparent 75%); } /* animate every gradient surface */ [data-theme="slay"] .hdr::after, [data-theme="slay"] .btn-primary, [data-theme="slay"] .ll-btn.primary, [data-theme="slay"] .theme-switch button.active, [data-theme="slay"] .kpi::before, [data-theme="slay"] .psbar-fill, [data-theme="slay"] .lfun-fill, [data-theme="slay"] .ll-step .n, [data-theme="slay"] .brand-mark{ background-size:220% 100%;animation:slayShift 5.5s linear infinite} /* rainbow text for headline numbers + wordmark (semantic pos/neg stay coloured) */ [data-theme="slay"] .kpi-val:not(.pos):not(.neg), [data-theme="slay"] .ll-hero h1 em, [data-theme="slay"] .ll-metric .v, [data-theme="slay"] .brand-name em{ background:var(--accent-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:slayShift 5.5s linear infinite} /* rainbow top edge on cards */ [data-theme="slay"] .card,[data-theme="slay"] .ll-card,[data-theme="slay"] .vstat{position:relative;overflow:hidden} [data-theme="slay"] .card::before,[data-theme="slay"] .ll-card::before,[data-theme="slay"] .vstat::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent-grad);background-size:220% 100%;animation:slayShift 5.5s linear infinite;z-index:1} /* 🦄 + 🌈 emoji flair */ [data-theme="slay"] .brand-name::after{content:" 🦄🏳️‍🌈";-webkit-text-fill-color:initial;display:inline-block;animation:slayFloat 3s ease-in-out infinite} [data-theme="slay"] .live-offer .lo-k::after{content:" 🌈"} [data-theme="slay"] .freshness .fresh-lead::before{content:"🦄 "} [data-theme="slay"] .ll-eyebrow::after{content:" 🌈 🦄 ✨"} [data-theme="slay"] .ll-final h2::after{content:" 🌈"} [data-theme="slay"] .ll-sec-head h2::after{content:" 🦄"} [data-theme="slay"] .theme-switch button[data-set-theme="slay"].active{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 18px rgba(255,90,205,.55)} /* animated rainbow strip pinned to the very top of the viewport */ [data-theme="slay"] body::after{inset:0 0 auto 0;height:5px;bottom:auto;background-image:var(--accent-grad); background-size:200% 100%;background-repeat:no-repeat;animation:slayShift 5s linear infinite;opacity:1;z-index:60} /* rainbow card titles */ [data-theme="slay"] .card-head{background:var(--accent-grad);background-size:220% 100%;-webkit-background-clip:text; background-clip:text;-webkit-text-fill-color:transparent;animation:slayShift 6s linear infinite} [data-theme="slay"] .card-head .head-meta{-webkit-text-fill-color:var(--text3)} /* MORE emojis 🦄🌈💰🏦🥂 */ [data-theme="slay"] .live-offer .lo-k::after{content:" 🌈💰"} [data-theme="slay"] .kpi-lbl::after{content:" ✨"} [data-theme="slay"] .kpi-val.pos::after{content:" 🥂"} [data-theme="slay"] .kpi-val.neg::after{content:" 💸"} [data-theme="slay"] .lo-strong.pos::after{content:" 🥂"} [data-theme="slay"] .fin-card h3::before{content:"🏦 "} [data-theme="slay"] .oe-card h3::before{content:"💸 "} [data-theme="slay"] .ph-name::after{content:" 🌈"} [data-theme="slay"] .spill.ok::before,[data-theme="slay"] .spill.warn::before{content:"🥂 "} [data-theme="slay"] .ll-final h2::after{content:" 🍾 🥂"} [data-theme="slay"] .ll-metric .v::after{content:" 💰"} [data-theme="slay"] .setup-title::after{content:" 🦄🌈"} /* extra sparkle, camera flash & pride flair ✨ 📸 🏳️‍🌈 💅 👑 🪩 💖 */ [data-theme="slay"] .vibe-lbl::after{content:" 🏳️‍🌈";-webkit-text-fill-color:initial} [data-theme="slay"] .brand-sub::after{content:" 🏳️‍🌈 ✨"} [data-theme="slay"] .card-head::after{content:" ✨";-webkit-text-fill-color:initial} [data-theme="slay"] .card-head .head-meta::after{content:""} [data-theme="slay"] .tabBtn.on::after{content:" 💅"} [data-theme="slay"] .kpi.hero .kpi-lbl::before{content:"👑 "} [data-theme="slay"] .lo-k::before{content:"📸 "} [data-theme="slay"] .ph.completed .ph-name::after{content:" 🌈 ✨ 📸"} [data-theme="slay"] .ph.in_progress .ph-name::after{content:" 💃 ✨"} [data-theme="slay"] .ver-chip::before{content:"🪩 "} [data-theme="slay"] .ll-eyebrow::before{content:"💅 "} [data-theme="slay"] .setup-sec-title::before{content:"✨ "} [data-theme="slay"] .fresh-lead::after{content:" 📸 ✨"} [data-theme="slay"] .ll-btn.primary::after{content:" 💖"} /* VIBE PICKER — label + far-right placement */ .vibe-lbl{font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.01em;color:var(--text);white-space:nowrap;align-self:center;padding-left:7px} .hdr-top{flex-wrap:wrap;justify-content:flex-start} .hdr-top>.brand{margin-right:auto} /* vibe picker mirrors the actions toolbar: bordered pill cluster + label */ .vibe-wrap{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;align-self:center;margin-left:8px; padding:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface2)} [data-theme="brutal"] .vibe-wrap{border-radius:0} @media(max-width:900px){.btn-refresh{min-width:0}} @media(max-width:760px){.hdr-top{flex-wrap:wrap}.hdr-status,.hdr-actions,.vibe-wrap{margin-left:0}.vibe-wrap{width:100%;justify-content:flex-start}} [data-theme="slay"] .vibe-lbl{background:none;-webkit-text-fill-color:initial;animation:none} /* transient toast (logout, etc.) */ .soldly-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:9999; background:var(--surface);color:var(--text);border:1px solid var(--accent-border);border-radius:12px; padding:12px 18px;font-size:13.5px;box-shadow:var(--shadow-hover);max-width:90vw; opacity:0;transition:opacity .28s ease,transform .28s ease;pointer-events:none} .soldly-toast.show{opacity:1;transform:translate(-50%,0)} [data-theme="brutal"] .soldly-toast{border-radius:0} /* demo-mode banner (exploring the sample sale) */ .demo-banner{display:flex;align-items:center;gap:12px;padding:9px 18px; background:var(--accent-soft);border-bottom:1px solid var(--accent-border);font-size:13px;color:var(--text)} .demo-banner-txt{flex:1;min-width:0;line-height:1.45} .demo-banner-btn{flex-shrink:0;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent); border-radius:8px;padding:6px 13px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap} .demo-banner-btn:hover{filter:brightness(1.06);transform:translateY(-1px)} .demo-banner-x{flex-shrink:0;background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:4px;line-height:1} .demo-banner-x:hover{color:var(--text)} [data-theme="brutal"] .demo-banner-btn{border-radius:0} @media(max-width:620px){.demo-banner{flex-wrap:wrap;gap:8px}.demo-banner-txt{flex-basis:100%}} /* AI: get-a-free-key helper box */ .ai-getkey{margin-top:13px;padding:12px 14px;border:1px solid var(--accent-border);border-radius:10px;background:var(--accent-soft)} .ai-getkey-steps{font-size:12.5px;color:var(--text);line-height:1.55} [data-theme="brutal"] .ai-getkey{border-radius:0} /* per-tab "edit setup section" shortcut bar */ .tab-edit{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 13px;flex-wrap:wrap} .tab-edit-hint{font-size:11.5px;color:var(--text3)} .tab-edit-btn{flex-shrink:0;border:1px solid var(--border);background:var(--surface2);color:var(--text2); border-radius:999px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap} .tab-edit-btn:hover{border-color:var(--accent);color:var(--text);background:var(--accent-soft)} [data-theme="brutal"] .tab-edit-btn{border-radius:0} @media(max-width:560px){.tab-edit{justify-content:space-between}.tab-edit-hint{flex:1;min-width:0}} /* Offer Evaluator: proceeds + return side by side */ .oe-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:14px} .oe-col{min-width:0} .oe-sub{font-weight:800;font-size:13px;color:var(--text);margin:0 0 9px;font-family:var(--font-head)} @media(max-width:880px){.oe-two{grid-template-columns:1fr}} /* ============================================================================ SETUP / ONBOARDING OVERLAY ========================================================================== */ .setup-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center; background:rgba(5,6,15,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:26px 16px;overflow:auto} .setup-overlay.on{display:flex} .setup-modal{width:100%;max-width:940px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius); box-shadow:var(--shadow-hover);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));overflow:hidden;margin:auto} .setup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 22px;border-bottom:1px solid var(--border);position:relative} .setup-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-grad)} .setup-title{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:9px} .setup-sub{font-size:12.5px;color:var(--text2);margin-top:5px;max-width:66ch;line-height:1.55} .setup-body{padding:6px 22px 14px;max-height:62vh;overflow:auto} .setup-section{padding:16px 0;border-bottom:1px dashed var(--border)} .setup-section:last-child{border-bottom:0} .setup-sec-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--accent);margin-bottom:3px;display:flex;align-items:center;gap:8px} .setup-sec-desc{font-size:11.5px;color:var(--text3);margin-bottom:13px;line-height:1.5} .setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px} @media(max-width:640px){.setup-grid{grid-template-columns:1fr}} .setup-field{display:flex;flex-direction:column;gap:5px} .setup-field.full{grid-column:1 / -1} .setup-field label{font-size:11px;font-weight:700;color:var(--text2);display:flex;justify-content:space-between;gap:8px} .setup-field label .hint{font-size:10px;color:var(--text3);font-weight:500} .setup-field input,.setup-field select,.setup-field textarea{ padding:8px 11px;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--field-bg); color:var(--field-text);font-size:13px;font-family:var(--font-body);width:100%} [data-theme="brutal"] .setup-field input,[data-theme="brutal"] .setup-field select,[data-theme="brutal"] .setup-field textarea{border-radius:0} .setup-field textarea{min-height:60px;resize:vertical;line-height:1.5} .setup-field input:focus,.setup-field select:focus,.setup-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .setup-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface2)} .setup-note{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px;max-width:48ch;line-height:1.5} .setup-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .setup-saved{font-size:11.5px;color:var(--good);font-weight:700} /* AI level slider — "as much or as little AI as you like" */ .ai-level{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 15px;margin-bottom:14px} [data-theme="brutal"] .ai-level{border-radius:0} .ai-level-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--text2);margin-bottom:11px} .ai-level-head .ai-level-val{color:var(--accent);font-size:14px;font-weight:800} .ai-slider{width:100%;accent-color:var(--accent);height:6px;cursor:pointer;margin:0} .ai-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3);font-weight:700;margin-top:7px;text-transform:uppercase;letter-spacing:.04em} .ai-ticks span{flex:1;text-align:center} .ai-ticks span:first-child{text-align:left}.ai-ticks span:last-child{text-align:right} .ai-level-desc{font-size:12.5px;color:var(--text2);line-height:1.55;margin-top:12px;border-top:1px dashed var(--border);padding-top:11px;min-height:46px} .ai-level-desc b{color:var(--text)} /* setup wizard — progress bar, step dots, stepped sections */ .wz-progress{padding:13px 22px 15px;border-bottom:1px solid var(--border)} .wz-bar{height:8px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;overflow:hidden} [data-theme="brutal"] .wz-bar{border-radius:0} .wz-fill{height:100%;width:14%;background:var(--accent-grad);background-size:200% 100%;border-radius:999px;transition:width .35s ease} [data-theme="brutal"] .wz-fill{border-radius:0} .wz-meta{font-size:11.5px;color:var(--text2);margin-top:9px;font-weight:600} .wz-meta #wzLabel,.wz-meta #wzTitle{color:var(--text)} .wz-dots{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap} .wz-dot{width:24px;height:6px;border-radius:999px;background:var(--surface3);border:1px solid var(--border);cursor:pointer;transition:.2s all} [data-theme="brutal"] .wz-dot{border-radius:0} .wz-dot:hover{border-color:var(--accent-border)} .wz-dot.on{background:var(--accent)} .wz-dot.cur{background:var(--accent-grad);box-shadow:var(--glow)} .setup-step{border-bottom:0} #wzBack{margin-right:auto} /* wizard step 1 — vibe picker cards */ .vibe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:6px} .vibe-card{cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px;background:var(--surface2); display:flex;flex-direction:column;gap:8px;transition:.18s all;position:relative} [data-theme="brutal"] .vibe-card{border-radius:0} .vibe-card:hover{border-color:var(--accent-border);transform:translateY(-2px)} .vibe-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .vibe-card .vc-sw{height:36px;border-radius:8px} [data-theme="brutal"] .vibe-card .vc-sw{border-radius:0} .vibe-card .vc-name{font-weight:700;font-size:13.5px;color:var(--text)} .vibe-card .vc-desc{font-size:11px;color:var(--text3);line-height:1.4} .vibe-card .vc-check{position:absolute;top:8px;right:11px;color:var(--accent);font-weight:800;opacity:0;font-size:15px;transition:.18s} .vibe-card.sel .vc-check{opacity:1} /* ============================================================================ "I'M OVERWHELMED" — calm full-screen mode (theme-independent soothing palette) ========================================================================== */ .calm-overlay{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;text-align:center;padding:26px;overflow:hidden} .calm-overlay.on{display:flex} .calm-bg{position:absolute;inset:-25%;z-index:0;background:linear-gradient(120deg,#a8e6cf,#aed9e0,#c8b6e2,#ffd3b6,#bce6c8,#a8e6cf); background-size:300% 300%;animation:calmShift 26s ease infinite;filter:blur(10px) saturate(118%)} @keyframes calmShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .calm-inner{position:relative;z-index:1;max-width:580px;color:#163a26} .calm-breathe{width:168px;height:168px;border-radius:50%;margin:0 auto 28px;background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;font-weight:700;color:#1f4030;font-size:15.5px; animation:calmBreathe 11s ease-in-out infinite} @keyframes calmBreathe{0%,100%{transform:scale(.8);box-shadow:0 0 60px 12px rgba(255,255,255,.35)}45%,55%{transform:scale(1.14);box-shadow:0 0 95px 34px rgba(255,255,255,.6)}} .calm-emoji{font-size:30px;margin-bottom:8px;letter-spacing:8px} .calm-h{font-family:var(--font-head);font-size:30px;color:#143523;margin-bottom:10px;font-weight:800} .calm-p{font-size:16px;color:#244a35;line-height:1.65;margin-bottom:18px} .calm-ask{font-size:15px;font-weight:700;color:#143523;margin-bottom:16px} .calm-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .calm-actions button{padding:14px 26px;font-size:14.5px;border-radius:999px;cursor:pointer;transition:.18s all;display:inline-flex;align-items:center;gap:8px} .calm-actions .calm-go{background:linear-gradient(135deg,#34c98a,#1f7d56);color:#fff;box-shadow:0 12px 30px rgba(31,125,86,.4);border:0;font-weight:800} .calm-actions .calm-go:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 38px rgba(31,125,86,.5)} .calm-actions .calm-close{background:rgba(255,255,255,.72);color:#143523;border:1px solid rgba(0,0,0,.10);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.08)} .calm-actions .calm-close:hover{background:#fff;transform:translateY(-2px)} .calm-saved{font-size:15px;color:#143523;font-weight:800;margin-top:18px;min-height:20px} .calm-saved b{color:#0f5a39} .calm-saved.pop{animation:calmPop .4s cubic-bezier(.2,1.4,.4,1)} @keyframes calmPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} /* the overwhelmed trigger button gets a soft calm tint */ .btn-calm{background:rgba(110,231,183,.16)!important;border:1px solid rgba(46,125,89,.4)!important;color:var(--good)!important} /* LISTING TAB — current-listing snapshot cards */ .shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:760px){.shot-grid{grid-template-columns:1fr}} .shot{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)} .shot-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--surface2);border-bottom:1px solid var(--border)} .shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--border2);display:block} .shot-bar .u{margin-left:8px;font-size:11px;color:var(--text3);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shot-hero{height:152px;display:flex;align-items:center;justify-content:center;position:relative;background-size:cover;background-position:center} .shot-hero .house{font-size:44px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))} .shot-hero .badge2{position:absolute;top:9px;left:9px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;color:#fff;letter-spacing:.02em} .shot-hero .pcount{position:absolute;bottom:9px;right:9px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.55);padding:2px 9px;border-radius:6px} .shot-body{padding:12px 14px} .shot-price{font-weight:800;font-size:15px;color:var(--text)} .shot-head{font-size:12.5px;color:var(--text2);margin-top:3px} .shot-specs{display:flex;gap:14px;margin-top:9px;font-size:12.5px;color:var(--text2)} .shot-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;font-size:11px;color:var(--text3)} .shot-foot a{font-weight:700} /* ============================================================================ MOBILE TUNE-UP 📱 (responsive, native CSS — no framework needed) ========================================================================== */ @media(max-width:760px){ .hdr{padding:12px 14px 0} .hdr-top{gap:8px} .brand-name{font-size:20px} .brand-sub{font-size:10.5px} .brand-mark{width:32px;height:32px} .hdr-right{flex-wrap:wrap;justify-content:flex-start;gap:6px} .vibe-wrap{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px} .vibe-lbl{order:-1;width:100%;margin-bottom:2px} .theme-switch{flex-wrap:wrap;justify-content:flex-start} .theme-switch button{font-size:11px;padding:5px 9px} .panel{padding:16px 13px 36px} .tab-bar{padding:10px 13px 0;gap:2px} .tabBtn{padding:7px 11px;font-size:11.5px} .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-bottom:14px} .kpi-val{font-size:20px} .live-offer{font-size:11.5px;gap:5px 12px;padding:9px 12px} .fin-grid,.oe-grid,.ll-feat,.ll-steps{grid-template-columns:1fr} .ll-card.feature-wide{grid-column:span 1} /* horizontally scrollable wide tables */ table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} table.t th,table.t td{padding:8px 10px} .snip{max-width:200px} /* setup modal fits small screens */ .setup-overlay{padding:14px 10px} .setup-modal{max-width:100%} .setup-body{max-height:70vh} .setup-head{padding:16px 16px} .setup-body,.setup-foot{padding-left:16px;padding-right:16px} .setup-foot{flex-direction:column;align-items:stretch} .setup-actions{justify-content:flex-end} } @media(max-width:430px){ .kpis{grid-template-columns:1fr 1fr} .ll-statgrid{grid-template-columns:1fr 1fr} .ll-split{grid-template-columns:1fr} .brand-sub{font-size:10px} .live-offer{font-size:11px} } /* ===== v2: settlement states, weekly PDF upload, confirm form ===== */ .vstat-cap{font-size:12px;color:var(--text2);margin:4px 2px 14px;padding:9px 13px;border-left:3px solid var(--warn-border); background:var(--surface2);border-radius:var(--radius-sm);line-height:1.5} [data-theme="brutal"] .vstat-cap{border-radius:0} .vstat-tag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap} .vstat-tag.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-border)} .vstat-tag.ok{background:var(--good-soft);color:var(--good);border:1px solid var(--good-border)} [data-theme="brutal"] .vstat-tag{border-radius:0} .uploader{display:block;border:2px dashed var(--border2);border-radius:var(--radius-sm);background:var(--surface2); padding:18px;cursor:pointer;transition:.15s all} .uploader:hover,.uploader.drag{border-color:var(--accent);background:var(--accent-soft)} [data-theme="brutal"] .uploader{border-radius:0} .uploader-in{display:flex;gap:14px;align-items:center} .uploader-ic{font-size:30px;flex-shrink:0;line-height:1} .uploader-link{color:var(--accent);font-weight:700;text-decoration:underline} .uploader-sub{font-size:11.5px;color:var(--text3);line-height:1.5;display:block;margin-top:5px} .pdf-status{font-size:12.5px;font-weight:600;margin-top:12px;min-height:16px} .pdf-status.busy{color:var(--accent)} .pdf-status.ok{color:var(--good)} .pdf-status.err{color:var(--warn)} .pdf-confirm{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:15px 16px} [data-theme="brutal"] .pdf-confirm{border-radius:0} .pdf-confirm-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:12px} .ppf-week{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px} .ppf-week label,.ppf-grid label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.03em} .ppf-row{border-top:1px dashed var(--border);padding-top:12px;margin-top:12px} .ppf-file{font-size:11.5px;color:var(--text3);margin-bottom:9px;word-break:break-all} .ppf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px} @media(max-width:680px){.ppf-grid{grid-template-columns:repeat(2,1fr)}} .ppf-week input,.ppf-week select,.ppf-grid input,.ppf-grid select{padding:8px 9px;border:1px solid var(--field-border); border-radius:var(--radius-sm);background:var(--field-bg);color:var(--field-text);font-size:13px;font-family:var(--font-body);width:100%} [data-theme="brutal"] .ppf-week input,[data-theme="brutal"] .ppf-week select,[data-theme="brutal"] .ppf-grid input,[data-theme="brutal"] .ppf-grid select{border-radius:0} .ppf-actions{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap} /* ===== live offer panel (Pipeline) — facts + settlement ticket ===== */ .lo-card{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-bottom:18px; border:1px solid var(--accent-border);border-left:3px solid var(--accent);background:var(--accent-soft); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} [data-theme="brutal"] .lo-card{border-radius:0} .lo-card .lo-facts{margin:0;border:0;background:transparent;border-radius:0;flex:1 1 440px;padding:14px 18px;align-content:center} .lo-settle{flex:1 1 300px;display:flex;flex-direction:column;justify-content:center;gap:8px; padding:14px 18px;border-left:1px solid var(--border);text-align:left} .lo-settle-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--text2)} .lo-settle-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap} .lo-settle-big{font-family:var(--font-head);font-size:30px;font-weight:800;color:var(--text);line-height:1} .lo-settle-sub{font-size:12px;color:var(--text3)} .lo-prog{height:10px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;overflow:hidden} .lo-prog-fill{display:block;height:100%;border-radius:999px;background:var(--warn)} .lo-prog.ok .lo-prog-fill{background:var(--good)} [data-theme="brutal"] .lo-prog,[data-theme="brutal"] .lo-prog-fill{border-radius:0} .lo-settle-cap{font-size:11px;color:var(--text3);line-height:1.45} @media(max-width:680px){.lo-settle{flex:1 1 100%;border-left:0;border-top:1px solid var(--border)}} /* ===== Offer Evaluator: comparable sales ===== */ .cmp-row{display:flex;align-items:center;gap:11px;margin:7px 0;font-size:12.5px} .cmp-lbl{flex:0 0 210px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmp-track{flex:1;height:16px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;overflow:hidden} .cmp-fill{display:block;height:100%;background:var(--neutral);border-radius:999px} .cmp-row.me .cmp-fill{background:var(--accent-grad)} .cmp-row.me .cmp-lbl{color:var(--accent);font-weight:800} .cmp-row.me .cmp-val{color:var(--accent)} .cmp-val{flex:0 0 60px;text-align:right;font-weight:700;color:var(--text)} .cmp-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end} .cmp-msg{font-size:11.5px;margin-top:9px;color:var(--text3)} .cmp-msg.err{color:var(--warn);font-weight:600} .cmp-x{background:transparent;border:0;color:var(--bad,#ef4444);cursor:pointer;font-size:13px;font-weight:700;padding:2px 6px} .cmp-x:hover{filter:brightness(1.2)} [data-theme="brutal"] .cmp-track,[data-theme="brutal"] .cmp-fill{border-radius:0} @media(max-width:680px){.cmp-lbl{flex-basis:120px}} .ll-foot-made{font-weight:700;color:var(--text2);display:inline-flex;align-items:center;gap:6px} /* ===== collapsible header toolbars: show only the label until hover / focus / tap ===== */ .hdr-actions{gap:0;cursor:pointer} .hdr-actions::before{padding-right:4px} .hdr-actions-inner{display:inline-flex;align-items:center;gap:7px;max-width:0;opacity:0;overflow:hidden;margin-left:0; transition:max-width .3s ease,opacity .22s ease,margin-left .3s ease} .hdr-actions:hover .hdr-actions-inner, .hdr-actions:focus .hdr-actions-inner, .hdr-actions:focus-within .hdr-actions-inner{max-width:640px;opacity:1;margin-left:8px} .vibe-wrap{gap:0;cursor:pointer} .vibe-wrap .theme-switch{max-width:0;opacity:0;overflow:hidden;margin-left:0; transition:max-width .3s ease,opacity .22s ease,margin-left .3s ease} .vibe-wrap:hover .theme-switch, .vibe-wrap:focus .theme-switch, .vibe-wrap:focus-within .theme-switch{max-width:560px;opacity:1;margin-left:7px} .hdr-actions:focus,.vibe-wrap:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} /* ===== campaign notes box ===== */ .notes-area{width:100%;min-height:78px;resize:vertical;padding:10px 12px;border:1px solid var(--field-border); border-radius:var(--radius-sm);background:var(--field-bg);color:var(--field-text);font-size:13.5px;font-family:var(--font-body);line-height:1.5} [data-theme="brutal"] .notes-area{border-radius:0} /* ===== setup wizard intro screen ===== */ .wz-intro-list{list-style:none;margin:15px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px} @media(max-width:640px){.wz-intro-list{grid-template-columns:1fr}} .wz-intro-list li{display:flex;gap:11px;align-items:flex-start} .wz-intro-list .wz-ico{font-size:18px;line-height:1.25;flex-shrink:0} .wz-intro-list li>div b{display:block;font-size:13.5px;color:var(--text)} .wz-intro-list li>div span{font-size:12px;color:var(--text3)} /* ===== wizard Next button glow ===== */ #wzNext,#wzFinish{animation:wzGlow 1.8s ease-in-out infinite} @keyframes wzGlow{0%,100%{box-shadow:var(--glow)}50%{box-shadow:var(--glow),0 0 0 4px var(--accent-soft),0 0 22px var(--accent)}} @media(prefers-reduced-motion:reduce){#wzNext,#wzFinish{animation:none}} /* ===== stacked right-hand header column (Actions over Aesthetic) ===== */ .hdr-rightcol{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0} .hdr-rightcol .hdr-actions,.hdr-rightcol .vibe-wrap{margin:0} /* ===== Campaign overview: gauges + DM Soldly side by side ===== */ .ov-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-bottom:16px} .ov-stats #pipeViz{grid-column:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0} .ov-stats #dmCard{grid-column:3;margin:0;display:flex;flex-direction:column} .dm-card .dm-body{padding:13px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .dm-card .notes-area{flex:1;min-height:96px} @media(max-width:900px){.ov-stats{grid-template-columns:1fr}.ov-stats #pipeViz{grid-column:auto;grid-template-columns:1fr 1fr}.ov-stats #dmCard{grid-column:auto}} @media(max-width:560px){.ov-stats #pipeViz{grid-template-columns:1fr}} /* ===== Slay readability: dark veil behind light text on accent-soft bars ===== */ [data-theme="slay"] .collapse-head{background:linear-gradient(rgba(40,18,72,.74),rgba(40,18,72,.74)),var(--accent-soft);color:#fdeaff} [data-theme="slay"] .collapse-head .ch-count{color:#d8c6ef} [data-theme="slay"] .lo-card{background:linear-gradient(rgba(40,18,72,.62),rgba(40,18,72,.62)),var(--accent-soft)} [data-theme="slay"] .head-meta,[data-theme="slay"] .note,[data-theme="slay"] .cmp-msg{color:#cdb8ec} /* ===== setup: account & storage choice cards ===== */ .store-choice{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:14px 0 4px} @media(max-width:640px){.store-choice{grid-template-columns:1fr}} .store-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer; padding:15px 16px;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--field-bg); color:var(--text);font-family:var(--font-body);transition:.15s all} [data-theme="brutal"] .store-card{border-radius:0} .store-card:hover{border-color:var(--accent);transform:translateY(-1px)} .store-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .store-card .store-ic{font-size:22px;line-height:1} .store-card .store-t{font-size:14px;font-weight:700;color:var(--text)} .store-card .store-d{font-size:11.5px;color:var(--text3);line-height:1.45}