/* PlusUltra theme overlay — Day 25 + Day 25.1 palette extension. Activates only when is set. Normis (default) styles in app.css are untouched. Aesthetic target: Bloomberg-terminal × cyberpunk neon spectrum. Patch 13-POLISH.1 — Item 2: Acid palette refresh from _CLAUDE_DESIGN/project/Dashboard PlusUltra.html (76 oklch usages). ALL hex tokens converted to oklch (per global rule "NO hex"). Spec-compliant bg oklch(20% 0.02 240) deep blue-black, accent oklch(80% 0.18 200) cyan, text oklch(95% 0.02 240) soft white, plus hero glow on .grail-equivalents (.hero-panel / .leaks-tofu / .scorecard-compound) and brand-mark cyan glow pulse animation. Noir variant unchanged (block below). */ body.mode-plusultra { /* ─── Day 25.1 + Patch 13-POLISH.1 — Acid palette (oklch only) ─── */ /* Base — deep blue-black (spec: oklch(20% 0.02 240)) with elev tiers. */ --bg-primary: oklch(0.10 0.02 240); --bg-card: oklch(0.13 0.025 240); --bg-elevated: oklch(0.18 0.03 240); /* Cyan family — primary identity (spec: oklch(80% 0.18 200)). */ --pu-cyan: oklch(0.80 0.18 200); --pu-cyan-bright: oklch(0.92 0.20 200); --pu-cyan-deep: oklch(0.55 0.16 215); --pu-cyan-tint: oklch(0.94 0.05 200); --pu-cyan-glow: oklch(0.80 0.18 200 / 0.40); --pu-cyan-soft: oklch(0.80 0.18 200 / 0.15); /* Green family — positive / growth / profit. */ --pu-green-vivid: oklch(0.86 0.26 145); --pu-green-bright: oklch(0.90 0.24 145); --pu-green-medium: oklch(0.78 0.20 145); --pu-green-soft: oklch(0.82 0.13 145); --pu-green-glow: oklch(0.86 0.26 145 / 0.40); --pu-green-bg: oklch(0.86 0.26 145 / 0.10); /* Red/Pink family — alert / danger / loss. */ --pu-red-critical: oklch(0.66 0.24 25); --pu-red-alert: oklch(0.68 0.24 15); --pu-red-concern: oklch(0.74 0.20 10); --pu-red-mild: oklch(0.78 0.14 10); --pu-red-glow: oklch(0.68 0.24 15 / 0.40); --pu-red-bg: oklch(0.68 0.24 15 / 0.12); /* Amber/Orange family — warning / heat. */ --pu-amber-hot: oklch(0.84 0.18 80); --pu-amber-warm: oklch(0.78 0.18 60); --pu-amber-soft: oklch(0.82 0.14 60); --pu-amber-glow: oklch(0.84 0.18 80 / 0.40); /* Patch 13-PLUSULTRA-FIX.1 — RESTORE vibrant electric pink for Acid mode. Йолт 2026-05-07: "хочу щоб було як намальовано — потужний пінк колір!!!" Previous PLUSULTRA-FIX (info-blue 245°) was Авіцен mis-interpretation; reference truly intends hot pink for Acid. Hex equivalents у comments only — CSS values stay oklch per global rule. Noir override below remaps to warm orange (hue 30°, chroma 0.08 sub-threshold) — Йолт schválив, НЕ ЧІПАТИ. */ --pu-magenta: oklch(0.61 0.30 320); /* electric pink */ --pu-magenta-bright: oklch(0.74 0.29 330); /* brighter pink */ --pu-magenta-glow: oklch(0.61 0.30 320 / 0.40); /* Text — soft white blue-tinted (spec: oklch(95% 0.02 240)). */ --pu-text-primary: oklch(0.97 0.012 240); --pu-text-secondary: oklch(0.74 0.025 240); --pu-text-muted: oklch(0.55 0.025 240); /* Border treatments. */ --pu-border-subtle: oklch(0.80 0.18 200 / 0.15); --pu-border-active: oklch(0.80 0.18 200 / 0.50); --pu-border-glow-cyan: 0 0 12px var(--pu-cyan-glow); --pu-border-glow-green: 0 0 12px var(--pu-green-glow); --pu-border-glow-red: 0 0 16px var(--pu-red-glow); --pu-border-glow-amber: 0 0 12px var(--pu-amber-glow); --pu-border-glow-magenta: 0 0 12px var(--pu-magenta-glow); /* Hero glow — spec: 0 0 24px oklch(80% 0.18 200 / 0.3). */ --pu-hero-glow: 0 0 24px oklch(0.80 0.18 200 / 0.30); /* ─── Token bridge — Normis variables remapped to PlusUltra spectrum ─── */ --bg: var(--bg-primary); --bg-elev: var(--bg-card); --bg-elev-2: var(--bg-elevated); --border: oklch(0.30 0.04 240); --border-soft: oklch(0.22 0.03 240); --text: var(--pu-text-primary); --text-muted: var(--pu-text-secondary); --accent: var(--pu-cyan); --accent-2: var(--pu-magenta); --green: var(--pu-green-vivid); --amber: var(--pu-amber-hot); --red: var(--pu-red-alert); /* Also override the new Claude Design oklch tokens used by app.css blocks shipped post-Day 25 (Patch 12 PART D) so cards / borders / inks pick up the PlusUltra palette without per-rule overrides. */ --bg-0: var(--bg-primary); --bg-1: var(--bg-card); --bg-2: var(--bg-elevated); --bg-3: oklch(0.24 0.04 240); --line: var(--border); --line-soft: var(--border-soft); --ink-0: var(--pu-text-primary); --ink-1: oklch(0.88 0.02 240); --ink-2: oklch(0.70 0.025 240); --ink-3: oklch(0.55 0.025 240); --good: var(--pu-green-vivid); --warn: var(--pu-amber-hot); --bad: var(--pu-red-alert); --info: var(--pu-cyan); --brand: var(--pu-cyan); /* Density+ */ font-size: 13px; /* Legacy aliases (used by Day 25 rules) */ --pu-glow-cyan: var(--pu-border-glow-cyan); --pu-glow-danger: var(--pu-border-glow-red); --pu-glow-warn: var(--pu-border-glow-amber); --pu-glow-success: var(--pu-border-glow-green); } /* ─────────────────────────────────────────────────────────── GENERIC CARDS — base treatment ─────────────────────────────────────────────────────────── */ body.mode-plusultra .kpi-card, body.mode-plusultra .leak-card, body.mode-plusultra .hero-card, body.mode-plusultra .rcm-card, body.mode-plusultra .rltv-card, body.mode-plusultra .cpb-hero-card, body.mode-plusultra .cpb-sc-card { background: var(--bg-card); border-color: var(--pu-border-subtle); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .kpi-card { border-top: 2px solid var(--pu-cyan); } /* ─────────────────────────────────────────────────────────── PART B — KPI CARDS by data-type semantic ─────────────────────────────────────────────────────────── */ /* Growth / revenue / profit / success family — green */ body.mode-plusultra .kpi-card[data-type="revenue"], body.mode-plusultra .kpi-card[data-type="profit"], body.mode-plusultra .kpi-card[data-type="growth"], body.mode-plusultra .kpi-card[data-type="success"] { border-top: 2px solid var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .kpi-card[data-type="revenue"] .kpi-value, body.mode-plusultra .kpi-card[data-type="profit"] .kpi-value, body.mode-plusultra .kpi-card[data-type="growth"] .kpi-value, body.mode-plusultra .kpi-card[data-type="success"] .kpi-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } /* Cost / loss / danger family — red */ body.mode-plusultra .kpi-card[data-type="cost"], body.mode-plusultra .kpi-card[data-type="loss"], body.mode-plusultra .kpi-card[data-type="danger"] { border-top: 2px solid var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); animation: pu-pulse-danger 3s ease-in-out infinite; } body.mode-plusultra .kpi-card[data-type="cost"] .kpi-value, body.mode-plusultra .kpi-card[data-type="loss"] .kpi-value, body.mode-plusultra .kpi-card[data-type="danger"] .kpi-value { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } /* Warning / amber (alias: warn) */ body.mode-plusultra .kpi-card[data-type="warning"], body.mode-plusultra .kpi-card[data-type="warn"] { border-top: 2px solid var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .kpi-card[data-type="warning"] .kpi-value, body.mode-plusultra .kpi-card[data-type="warn"] .kpi-value { color: var(--pu-amber-hot); text-shadow: 0 0 8px var(--pu-amber-glow); } /* Info / orders / metric — cyan */ body.mode-plusultra .kpi-card[data-type="info"], body.mode-plusultra .kpi-card[data-type="orders"], body.mode-plusultra .kpi-card[data-type="metric"], body.mode-plusultra .kpi-card[data-type="aov"] { border-top: 2px solid var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .kpi-card[data-type="info"] .kpi-value, body.mode-plusultra .kpi-card[data-type="orders"] .kpi-value, body.mode-plusultra .kpi-card[data-type="metric"] .kpi-value, body.mode-plusultra .kpi-card[data-type="aov"] .kpi-value { color: var(--pu-cyan-bright); text-shadow: 0 0 8px var(--pu-cyan-glow); } /* Strategic / insight — magenta */ body.mode-plusultra .kpi-card[data-type="strategic"] { border-top: 2px solid var(--pu-magenta); box-shadow: var(--pu-border-glow-magenta); } body.mode-plusultra .kpi-card[data-type="strategic"] .kpi-value { color: var(--pu-magenta-bright); text-shadow: 0 0 8px var(--pu-magenta-glow); } /* Muted / neutral — soft cyan-gray */ body.mode-plusultra .kpi-card[data-type="muted"], body.mode-plusultra .kpi-card[data-type="neutral"] { border-top: 2px solid var(--border); box-shadow: none; } body.mode-plusultra .kpi-card[data-type="muted"] .kpi-value, body.mode-plusultra .kpi-card[data-type="neutral"] .kpi-value { color: var(--pu-cyan-tint); } /* ─────────────────────────────────────────────────────────── PART C — P&L color coding (PlusUltra-specific overrides) ─────────────────────────────────────────────────────────── */ body.mode-plusultra .pnl-row-income td, body.mode-plusultra .pnl-row-income td.num { color: var(--pu-green-bright); } body.mode-plusultra .pnl-row-cost td, body.mode-plusultra .pnl-row-cost td.num { color: var(--pu-red-concern); } body.mode-plusultra .pnl-row-profit td, body.mode-plusultra .pnl-row-profit td.num { color: var(--pu-green-vivid); font-weight: 700; text-shadow: 0 0 6px var(--pu-green-glow); } body.mode-plusultra .pnl-net-row td { background: rgba(0, 217, 255, 0.06); } /* Margin % rows in cyan */ body.mode-plusultra .pnl-good { color: var(--pu-green-bright); } body.mode-plusultra .pnl-warn { color: var(--pu-amber-hot); } body.mode-plusultra .pnl-bad { color: var(--pu-red-concern); } /* ─────────────────────────────────────────────────────────── PART E — Hero Panel (Overview attention panel) PlusUltra polish ─────────────────────────────────────────────────────────── */ body.mode-plusultra .hero-panel { background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%); border: 1px solid var(--pu-border-active); border-left: 3px solid var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan), inset 0 1px 0 rgba(255,255,255,0.05); } body.mode-plusultra .hero-title { color: var(--pu-text-primary); } body.mode-plusultra .hero-title [data-slot="client"] { color: var(--pu-cyan-bright); } /* Loss card — red glow */ body.mode-plusultra .hero-card--lose { border-top: 2px solid var(--pu-red-alert); border-left: 3px solid var(--pu-red-alert); box-shadow: -3px 0 8px var(--pu-red-glow), var(--pu-border-glow-red); animation: pu-pulse-danger 2.8s ease-in-out infinite; } body.mode-plusultra .hero-card--lose .hero-amount { color: var(--pu-red-concern); text-shadow: 0 0 10px var(--pu-red-glow); } /* Opportunity (unused) card — green glow */ body.mode-plusultra .hero-card--unused { border-top: 2px solid var(--pu-green-vivid); border-left: 3px solid var(--pu-green-vivid); box-shadow: -3px 0 8px var(--pu-green-glow), var(--pu-border-glow-green); } body.mode-plusultra .hero-card--unused .hero-amount { color: var(--pu-green-bright); text-shadow: 0 0 10px var(--pu-green-glow); } /* Waste card — amber glow */ body.mode-plusultra .hero-card--waste { border-top: 2px solid var(--pu-amber-hot); border-left: 3px solid var(--pu-amber-hot); box-shadow: -3px 0 8px var(--pu-amber-glow), var(--pu-border-glow-amber); } body.mode-plusultra .hero-card--waste .hero-amount { color: var(--pu-amber-hot); text-shadow: 0 0 10px var(--pu-amber-glow); } /* Net Profit summary row in hero panel — cyan emphasis */ body.mode-plusultra .hero-summary-value { color: var(--pu-cyan-bright); font-weight: 700; } body.mode-plusultra .hero-summary-value--plus { color: var(--pu-green-bright); text-shadow: 0 0 6px var(--pu-green-glow); } @keyframes pu-pulse-danger { 0%, 100% { box-shadow: -3px 0 8px var(--pu-red-glow), 0 0 0 rgba(255, 59, 110, 0); } 50% { box-shadow: -3px 0 8px var(--pu-red-glow), var(--pu-border-glow-red); } } /* ─────────────────────────────────────────────────────────── Money Leaks card severity colours — bridge into spectrum ─────────────────────────────────────────────────────────── */ body.mode-plusultra .leak-card.leak-danger { border-top: 2px solid var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); animation: pu-pulse-danger 3s ease-in-out infinite; } body.mode-plusultra .leak-card.leak-warn { border-top: 2px solid var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .leak-card.leak-info { border-top: 2px solid var(--pu-cyan); } body.mode-plusultra .leak-impact-value { color: var(--pu-cyan-bright); } body.mode-plusultra .leaks-total-value { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } /* ─────────────────────────────────────────────────────────── Real CM page — semantic colours ─────────────────────────────────────────────────────────── */ body.mode-plusultra .rcm-card-cm { border-top: 2px solid var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .rcm-cm-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .rcm-cm-value.is-neg { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } body.mode-plusultra .rcm-banner--info { border-color: var(--pu-border-active); background: var(--pu-cyan-soft); } body.mode-plusultra .rcm-banner--warn { border-color: var(--pu-red-alert); background: var(--pu-red-bg); } body.mode-plusultra .rcm-banner--success { border-color: var(--pu-green-vivid); background: var(--pu-green-bg); } body.mode-plusultra .rcm-auto-pill { background: var(--pu-green-bg); color: var(--pu-green-bright); } /* ─────────────────────────────────────────────────────────── Real LTV — Level cards ─────────────────────────────────────────────────────────── */ body.mode-plusultra .rltv-card--accent { border-top: 2px solid var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .rltv-card--diff { border-top: 2px solid var(--pu-magenta); box-shadow: var(--pu-border-glow-magenta); } body.mode-plusultra .rltv-card--accent .rltv-card-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .rltv-card--diff .rltv-card-value { color: var(--pu-magenta-bright); text-shadow: 0 0 8px var(--pu-magenta-glow); } body.mode-plusultra .rltv-tab.on { background: var(--pu-cyan); color: var(--bg-primary); } /* ─────────────────────────────────────────────────────────── CAC Payback — status pills + hero ─────────────────────────────────────────────────────────── */ body.mode-plusultra .cpb-hero-green { border-top: 2px solid var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .cpb-hero-amber { border-top: 2px solid var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .cpb-hero-red { border-top: 2px solid var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .cpb-hero-info { border-top: 2px solid var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .cpb-hero-green .cpb-hero-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .cpb-hero-amber .cpb-hero-value { color: var(--pu-amber-hot); text-shadow: 0 0 8px var(--pu-amber-glow); } body.mode-plusultra .cpb-hero-red .cpb-hero-value { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } body.mode-plusultra .cpb-hero-info .cpb-hero-value { color: var(--pu-cyan-bright); text-shadow: 0 0 8px var(--pu-cyan-glow); } body.mode-plusultra .cpb-st-green { background: var(--pu-green-bg); color: var(--pu-green-bright); } body.mode-plusultra .cpb-st-amber { background: rgba(255,184,0,0.15); color: var(--pu-amber-hot); } body.mode-plusultra .cpb-st-red { background: var(--pu-red-bg); color: var(--pu-red-concern); } body.mode-plusultra .cpb-banner-green { background: var(--pu-green-bg); border-color: var(--pu-green-vivid); } body.mode-plusultra .cpb-banner-amber { background: rgba(255,184,0,0.10); border-color: var(--pu-amber-hot); } body.mode-plusultra .cpb-banner-red { background: var(--pu-red-bg); border-color: var(--pu-red-alert); } body.mode-plusultra .cpb-runway-green { background: var(--pu-green-bg); border-color: var(--pu-green-vivid); } body.mode-plusultra .cpb-runway-amber { background: rgba(255,184,0,0.10); border-color: var(--pu-amber-hot); } body.mode-plusultra .cpb-runway-red { background: var(--pu-red-bg); border-color: var(--pu-red-alert); } /* ─────────────────────────────────────────────────────────── Tighter tables ─────────────────────────────────────────────────────────── */ body.mode-plusultra table.tbl, body.mode-plusultra .tbl-stripe table { font-size: 12px; } body.mode-plusultra table.tbl th, body.mode-plusultra table.tbl td, body.mode-plusultra .tbl-stripe th, body.mode-plusultra .tbl-stripe td { padding: 6px 10px; } /* ─────────────────────────────────────────────────────────── Sidebar ─────────────────────────────────────────────────────────── */ body.mode-plusultra .sb-version { background: var(--pu-cyan); color: var(--bg-primary); font-weight: 700; } body.mode-plusultra .sb-item.active { background: var(--pu-cyan); color: var(--bg-primary); } body.mode-plusultra .sb-tag.live { background: var(--pu-green-bg); color: var(--pu-green-vivid); } body.mode-plusultra .sb-tag.soon { background: color-mix(in oklch, var(--pu-magenta) 18%, transparent); color: var(--pu-magenta-bright); } body.mode-plusultra .sb-group.sb-group-plusultra { border-left: 2px solid var(--pu-cyan); margin-left: 6px; padding-left: 6px; box-shadow: inset 6px 0 16px var(--pu-cyan-soft); } body.mode-plusultra .sb-group.sb-group-plusultra > summary .sb-group-label { color: var(--pu-cyan); letter-spacing: .08em; } /* ─────────────────────────────────────────────────────────── Patch 07 — Demo overlay у PlusUltra (cyan glow stronger) ─────────────────────────────────────────────────────────── */ body.mode-plusultra #demo-overlay { border-color: var(--pu-cyan); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50), 0 0 24px rgba(0, 217, 255, 0.35); } body.mode-plusultra .demo-progress-step.active { background: var(--pu-cyan); } body.mode-plusultra .demo-progress-step.done { background: var(--pu-green-vivid); } body.mode-plusultra .demo-title { color: var(--pu-cyan-bright); text-shadow: 0 0 6px var(--pu-cyan-glow); } body.mode-plusultra .demo-body strong { color: var(--pu-cyan-bright); } /* Patch 13-RBAC-FIX-1 — Demo button polish у PlusUltra mode (Йолт ask). Softer gradient (cyan→violet), thin brand glow, refined hover. */ body.mode-plusultra .topbar .btn.demo { background: linear-gradient(135deg, color-mix(in oklch, var(--pu-cyan, var(--brand)) 85%, transparent) 0%, color-mix(in oklch, var(--pu-magenta, var(--info)) 80%, transparent) 100%); color: var(--bg-0); border: 1px solid color-mix(in oklch, var(--pu-cyan, var(--brand)) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--pu-cyan, var(--brand)) 12%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--pu-magenta, var(--info)) 40%, transparent); font-weight: 600; letter-spacing: 0.01em; transition: filter 140ms, transform 140ms, box-shadow 140ms; } body.mode-plusultra .topbar .btn.demo:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in oklch, var(--pu-cyan, var(--brand)) 25%, transparent), 0 6px 16px -4px color-mix(in oklch, var(--pu-magenta, var(--info)) 55%, transparent); } /* ─────────────────────────────────────────────────────────── Patch 10 — Filter breadcrumb + tooltip у PlusUltra ─────────────────────────────────────────────────────────── */ body.mode-plusultra .fb-root { border-bottom-color: var(--pu-border-active); background: var(--bg-card); } body.mode-plusultra .fb-chip { background: var(--pu-cyan-soft); border-color: var(--pu-border-active); } body.mode-plusultra .fb-chip-val { color: var(--pu-cyan-bright); } body.mode-plusultra .fb-reset:hover { border-color: var(--pu-red-alert); color: var(--pu-red-concern); } body.mode-plusultra .fb-root.fb-active .fb-reset { border-color: var(--pu-cyan); color: var(--pu-cyan-bright); } body.mode-plusultra .metric-info { background: var(--bg-elev-2); border-color: var(--pu-border-subtle); } body.mode-plusultra .metric-info:hover { background: var(--pu-cyan); color: var(--bg-primary); box-shadow: 0 0 8px var(--pu-cyan-glow); } body.mode-plusultra .metric-tooltip { border-color: var(--pu-cyan); box-shadow: 0 10px 28px rgba(0,0,0,0.65), 0 0 16px var(--pu-cyan-glow); } body.mode-plusultra .metric-tooltip .mt-title { color: var(--pu-cyan-bright); text-shadow: 0 0 6px var(--pu-cyan-glow); } /* ─────────────────────────────────────────────────────────── Patch 12 B+C — bulk overrides ─────────────────────────────────────────────────────────── */ body.mode-plusultra .leaks-tofu { border-color: var(--pu-red-alert); box-shadow: 0 0 32px rgba(255,59,110,0.40); } body.mode-plusultra .leaks-tofu-value { color: var(--pu-red-concern); text-shadow: 0 0 32px rgba(255,59,110,0.65); } body.mode-plusultra .leaks-tofu-btn { background: var(--pu-red-alert); } body.mode-plusultra .leaks-tofu-btn:hover { box-shadow: 0 6px 24px rgba(255,59,110,0.55); } body.mode-plusultra .leaks-tofu-annual-value { color: var(--pu-amber-hot); text-shadow: 0 0 6px var(--pu-amber-glow); } body.mode-plusultra .ceo-channel-card.ceo-channel-green { border-left-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .ceo-channel-card.ceo-channel-red { border-left-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .ceo-channel-card.ceo-channel-amber { border-left-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .pvf-bar-glow { background: linear-gradient(90deg, var(--pu-cyan) 0%, var(--pu-green-vivid) 100%); box-shadow: 0 0 16px var(--pu-cyan-glow); } body.mode-plusultra .ch-group-card { border-top-color: var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .ch-group-name { color: var(--pu-cyan-bright); } body.mode-plusultra .section-help:hover { background: var(--pu-cyan); color: var(--bg-primary); box-shadow: 0 0 8px var(--pu-cyan-glow); } body.mode-plusultra .sortable-arrow { color: var(--pu-cyan-bright); } body.mode-plusultra .tb-locale [data-locale-lang]:hover, body.mode-plusultra .tb-locale [data-locale-currency]:hover { border-color: var(--pu-cyan); color: var(--pu-cyan-bright); } /* ─────────────────────────────────────────────────────────── Patch 12 A.6 — Section filter panel у PlusUltra ─────────────────────────────────────────────────────────── */ body.mode-plusultra .sfp-root { border-color: var(--pu-border-active); border-left-color: var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .sfp-title { color: var(--pu-cyan-bright); text-shadow: 0 0 6px var(--pu-cyan-glow); } body.mode-plusultra .sfp-chip.on { background: var(--pu-cyan); color: var(--bg-primary); border-color: var(--pu-cyan); box-shadow: 0 0 6px var(--pu-cyan-glow); } body.mode-plusultra .sfp-summary-active { color: var(--pu-cyan-bright); } /* ─────────────────────────────────────────────────────────── Patch 04 — Per-product ─────────────────────────────────────────────────────────── */ body.mode-plusultra .pp-action-scale { border-top-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .pp-action-kill { border-top-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .pp-action-test { border-top-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .pp-action-optimize { border-top-color: var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .pp-margin-low { color: var(--pu-red-concern); } body.mode-plusultra .pp-good { color: var(--pu-green-bright); } body.mode-plusultra .pp-bad { color: var(--pu-red-concern); } /* ─────────────────────────────────────────────────────────── Patch 03 — Meta Ads cockpit ─────────────────────────────────────────────────────────── */ body.mode-plusultra .meta-truth { border-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); background: linear-gradient(180deg, rgba(255,59,110,0.06), rgba(0,255,136,0.04)); } body.mode-plusultra .meta-truth-warn { background: var(--pu-red-bg); } body.mode-plusultra .meta-truth-warn .meta-truth-value { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } body.mode-plusultra .meta-truth-clean { background: var(--pu-green-bg); } body.mode-plusultra .meta-truth-clean .meta-truth-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .meta-truth-insight { background: color-mix(in oklch, var(--pu-magenta) 10%, transparent); } body.mode-plusultra .meta-truth-insight .meta-truth-value { color: var(--pu-magenta-bright); text-shadow: 0 0 8px var(--pu-magenta-glow); } body.mode-plusultra .meta-funnel-bar { background: linear-gradient(90deg, var(--pu-magenta) 0%, var(--pu-cyan) 100%); opacity: 0.7; } body.mode-plusultra .meta-funnel-warn { color: var(--pu-amber-hot); } /* ─────────────────────────────────────────────────────────── Patch 02 — Google Ads cockpit ─────────────────────────────────────────────────────────── */ body.mode-plusultra .ga-alert-red { background: var(--pu-red-bg); border-left-color: var(--pu-red-alert); } body.mode-plusultra .ga-alert-amber { background: rgba(255,184,0,0.10); border-left-color: var(--pu-amber-hot); } body.mode-plusultra .ga-alert-green { background: var(--pu-green-bg); border-left-color: var(--pu-green-vivid); } /* ─────────────────────────────────────────────────────────── Patch 01 — DatePicker mode toggle per-value glow ─────────────────────────────────────────────────────────── */ body.mode-plusultra .dp-mode[data-period-mode="real"].on { border-color: var(--pu-green-vivid); color: var(--pu-green-bright); background: var(--pu-green-bg); box-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .dp-mode[data-period-mode="expected"].on { border-color: var(--pu-amber-hot); color: var(--pu-amber-hot); background: rgba(255,184,0,0.10); box-shadow: 0 0 8px var(--pu-amber-glow); } body.mode-plusultra .dp-mode[data-period-mode="total"].on { border-color: var(--pu-cyan); color: var(--pu-cyan-bright); background: var(--pu-cyan-soft); box-shadow: 0 0 8px var(--pu-cyan-glow); } body.mode-plusultra .dp-mode[data-metric-mode="revenue"].on { border-color: var(--pu-cyan); color: var(--pu-cyan-bright); background: var(--pu-cyan-soft); box-shadow: 0 0 8px var(--pu-cyan-glow); } body.mode-plusultra .dp-mode[data-metric-mode="profit"].on { border-color: var(--pu-magenta); color: var(--pu-magenta-bright); background: color-mix(in oklch, var(--pu-magenta) 10%, transparent); box-shadow: 0 0 8px var(--pu-magenta-glow); } /* ─────────────────────────────────────────────────────────── Topbar mode toggle (when on) — keep cyan glow ─────────────────────────────────────────────────────────── */ body.mode-plusultra .tb-mode.on { border-color: var(--pu-cyan); box-shadow: 0 0 16px rgba(0, 217, 255, 0.55), inset 0 0 10px rgba(0, 217, 255, 0.22); } /* ─────────────────────────────────────────────────────────── Day 26b — CFO Cockpit / LTV:CAC / Markup / Cohort Cube / Scenario ─────────────────────────────────────────────────────────── */ body.mode-plusultra .cfo-card-profit { border-top-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .cfo-card-loss { border-top-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .cfo-card-green { border-top-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .cfo-card-amber { border-top-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .cfo-card-red { border-top-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .cfo-card-profit .cfo-value, body.mode-plusultra .cfo-card-green .cfo-value { color: var(--pu-green-bright); text-shadow: 0 0 8px var(--pu-green-glow); } body.mode-plusultra .cfo-card-loss .cfo-value, body.mode-plusultra .cfo-card-red .cfo-value { color: var(--pu-red-concern); text-shadow: 0 0 8px var(--pu-red-glow); } body.mode-plusultra .cfo-card-amber .cfo-value { color: var(--pu-amber-hot); text-shadow: 0 0 8px var(--pu-amber-glow); } body.mode-plusultra .cfo-status-green { background: var(--pu-green-bg); border-color: var(--pu-green-vivid); } body.mode-plusultra .cfo-status-amber { background: rgba(255,184,0,0.10); border-color: var(--pu-amber-hot); } body.mode-plusultra .cfo-status-red { background: var(--pu-red-bg); border-color: var(--pu-red-alert); animation: pu-pulse-danger 3s ease-in-out infinite; } body.mode-plusultra .cfo-spark-green { color: var(--pu-green-bright); } body.mode-plusultra .cfo-spark-cyan { color: var(--pu-cyan-bright); } body.mode-plusultra .cfo-spark-magenta { color: var(--pu-magenta-bright); } body.mode-plusultra .cfo-tile:hover { color: var(--pu-cyan-bright); border-color: var(--pu-cyan); } body.mode-plusultra .cfo-lever-impact { color: var(--pu-green-bright); } body.mode-plusultra .cfo-lever-danger .cfo-lever-impact { color: var(--pu-red-concern); } body.mode-plusultra .cfo-lever-warn .cfo-lever-impact { color: var(--pu-amber-hot); } body.mode-plusultra .lc-hero-green { border-top-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .lc-hero-amber { border-top-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .lc-hero-red { border-top-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .lc-hero-cyan { border-top-color: var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .lc-hero-green .lc-hero-value { color: var(--pu-green-bright); text-shadow: 0 0 10px var(--pu-green-glow); } body.mode-plusultra .lc-hero-red .lc-hero-value { color: var(--pu-red-concern); text-shadow: 0 0 10px var(--pu-red-glow); } body.mode-plusultra .lc-hero-amber .lc-hero-value { color: var(--pu-amber-hot); text-shadow: 0 0 10px var(--pu-amber-glow); } body.mode-plusultra .lc-hero-cyan .lc-hero-value { color: var(--pu-cyan-bright); text-shadow: 0 0 10px var(--pu-cyan-glow); } body.mode-plusultra .lc-cell-green { color: var(--pu-green-bright); } body.mode-plusultra .lc-cell-red { color: var(--pu-red-concern); } body.mode-plusultra .lc-cell-amber { color: var(--pu-amber-hot); } body.mode-plusultra .lc-cell-cyan { color: var(--pu-cyan-bright); } body.mode-plusultra .lc-cell-inf { color: var(--pu-green-vivid); text-shadow: 0 0 6px var(--pu-green-glow); } body.mode-plusultra .lc-rec-green { background: var(--pu-green-bg); border-left-color: var(--pu-green-vivid); } body.mode-plusultra .lc-rec-red { background: var(--pu-red-bg); border-left-color: var(--pu-red-alert); } body.mode-plusultra .lc-rec-amber { background: rgba(255,184,0,0.10); border-left-color: var(--pu-amber-hot); } body.mode-plusultra .lc-rec-cyan { background: var(--pu-cyan-soft); border-left-color: var(--pu-cyan); } body.mode-plusultra .mk-hero-green { border-top-color: var(--pu-green-vivid); box-shadow: var(--pu-border-glow-green); } body.mode-plusultra .mk-hero-amber { border-top-color: var(--pu-amber-hot); box-shadow: var(--pu-border-glow-amber); } body.mode-plusultra .mk-hero-red { border-top-color: var(--pu-red-alert); box-shadow: var(--pu-border-glow-red); } body.mode-plusultra .mk-hero-cyan { border-top-color: var(--pu-cyan); box-shadow: var(--pu-border-glow-cyan); } body.mode-plusultra .mk-hero-green .mk-hero-value { color: var(--pu-green-bright); text-shadow: 0 0 10px var(--pu-green-glow); } body.mode-plusultra .mk-hero-red .mk-hero-value { color: var(--pu-red-concern); text-shadow: 0 0 10px var(--pu-red-glow); } body.mode-plusultra .mk-hero-amber .mk-hero-value { color: var(--pu-amber-hot); text-shadow: 0 0 10px var(--pu-amber-glow); } body.mode-plusultra .mk-hero-cyan .mk-hero-value { color: var(--pu-cyan-bright); text-shadow: 0 0 10px var(--pu-cyan-glow); } body.mode-plusultra .mk-ratio-red { color: var(--pu-red-concern); } body.mode-plusultra .mk-ratio-amber { color: var(--pu-amber-hot); } body.mode-plusultra .mk-ratio-green { color: var(--pu-green-bright); } body.mode-plusultra .mk-ratio-cyan { color: var(--pu-cyan-bright); } body.mode-plusultra .mk-outlier-under { border-left-color: var(--pu-red-alert); } body.mode-plusultra .mk-outlier-over { border-left-color: var(--pu-cyan); } body.mode-plusultra .cc-tab.on { background: var(--pu-cyan); color: var(--bg-primary); } body.mode-plusultra .cc-summary-cohort { color: var(--pu-cyan-bright); } body.mode-plusultra .cc-summary-proj { color: var(--pu-magenta-bright); } body.mode-plusultra .cc-cell-pred { outline-color: var(--pu-magenta); } body.mode-plusultra .sp-tab.on { background: var(--pu-cyan); color: var(--bg-primary); } body.mode-plusultra .sp-decision-green { background: var(--pu-green-bg); border-left-color: var(--pu-green-vivid); } body.mode-plusultra .sp-decision-amber { background: rgba(255,184,0,0.10); border-left-color: var(--pu-amber-hot); } body.mode-plusultra .sp-decision-red { background: var(--pu-red-bg); border-left-color: var(--pu-red-alert); } /* ─────────────────────────────────────────────────────────── Headers brighter ─────────────────────────────────────────────────────────── */ body.mode-plusultra h1, body.mode-plusultra h2, body.mode-plusultra h3 { color: var(--pu-text-primary); } body.mode-plusultra .pg-tag--plus { background: var(--pu-cyan-soft); color: var(--pu-cyan-bright); border-color: var(--pu-border-active); text-shadow: 0 0 6px var(--pu-cyan-glow); } /* ─────────────────────────────────────────────────────────── Buttons sharper ─────────────────────────────────────────────────────────── */ body.mode-plusultra .btn-primary, body.mode-plusultra button[data-act=share], body.mode-plusultra button[data-act=reset] { border-color: var(--pu-cyan); color: var(--pu-text-primary); } /* ─────────────────────────────────────────────────────────── Patch 13-DESIGN-INT — Acid (default) vs Noir intensity overrides. Acid = existing cyan-on-blue-black palette (no extra rules needed). Noir = warm bone text on near-black, muted amber accent, NO glow, NO pulse animations. Sharp, terminal-like aesthetic. Toggling: ─────────────────────────────────────────────────────────── */ body.mode-plusultra[data-intensity="noir"] { /* Base shifted to neutral near-black (oklch warm dark). */ --bg-primary: oklch(15% 0 0); --bg-card: oklch(19% 0.005 30); --bg-elevated: oklch(23% 0.008 30); /* Cyan family → amber muted (warm). No bright-glow variants. */ --pu-cyan: oklch(70% 0.05 30); --pu-cyan-bright: oklch(78% 0.07 35); --pu-cyan-deep: oklch(58% 0.04 25); --pu-cyan-tint: oklch(82% 0.03 30); --pu-cyan-glow: transparent; --pu-cyan-soft: oklch(70% 0.05 30 / 0.10); /* Green family → desaturated warm green-bone */ --pu-green-vivid: oklch(76% 0.10 110); --pu-green-bright: oklch(82% 0.10 110); --pu-green-medium: oklch(72% 0.09 110); --pu-green-soft: oklch(78% 0.07 110); --pu-green-glow: transparent; --pu-green-bg: oklch(76% 0.10 110 / 0.06); /* Red family → muted brick (no neon) */ --pu-red-critical: oklch(60% 0.12 25); --pu-red-alert: oklch(64% 0.13 25); --pu-red-concern: oklch(70% 0.11 25); --pu-red-mild: oklch(75% 0.08 25); --pu-red-glow: transparent; --pu-red-bg: oklch(64% 0.13 25 / 0.06); /* Amber family — primary "noir accent" */ --pu-amber-hot: oklch(74% 0.14 65); --pu-amber-warm: oklch(70% 0.12 50); --pu-amber-soft: oklch(78% 0.10 60); --pu-amber-glow: transparent; /* Magenta → muted plum */ /* Patch 13-PLUSULTRA-FIX — Noir override: was hue 320° pink, now low-chroma warm orange (hue 30°, chroma 0.08 — below 0.1 threshold). Sharp/dry, no glow. */ --pu-magenta: oklch(0.62 0.08 30); --pu-magenta-bright: oklch(0.70 0.08 30); --pu-magenta-glow: transparent; /* Text → warm bone (per spec) */ --pu-text-primary: oklch(85% 0.02 30); --pu-text-secondary: oklch(72% 0.02 30); --pu-text-muted: oklch(58% 0.02 30); /* Border treatments — sharper, no glow */ --pu-border-subtle: oklch(70% 0.05 30 / 0.20); --pu-border-active: oklch(70% 0.05 30 / 0.55); --pu-border-glow-cyan: none; --pu-border-glow-green: none; --pu-border-glow-red: none; --pu-border-glow-amber: none; --pu-border-glow-magenta: none; /* Token bridge */ --bg: var(--bg-primary); --bg-elev: var(--bg-card); --bg-elev-2: var(--bg-elevated); --border: oklch(35% 0.01 30); --border-soft: oklch(28% 0.005 30); --text: var(--pu-text-primary); --text-muted: var(--pu-text-secondary); --accent: var(--pu-amber-hot); --accent-2: var(--pu-amber-warm); --green: var(--pu-green-vivid); --amber: var(--pu-amber-hot); --red: var(--pu-red-alert); /* Legacy aliases */ --pu-glow-cyan: none; --pu-glow-danger: none; --pu-glow-warn: none; --pu-glow-success: none; } /* Noir kills text glows + pulse animations across all PlusUltra surfaces. */ body.mode-plusultra[data-intensity="noir"] .kpi-value, body.mode-plusultra[data-intensity="noir"] .hero-amount, body.mode-plusultra[data-intensity="noir"] .hero-summary-value, body.mode-plusultra[data-intensity="noir"] .leaks-tofu-value, body.mode-plusultra[data-intensity="noir"] .leaks-tofu-annual-value, body.mode-plusultra[data-intensity="noir"] .rcm-cm-value, body.mode-plusultra[data-intensity="noir"] .cpb-hero-value, body.mode-plusultra[data-intensity="noir"] .cfo-value, body.mode-plusultra[data-intensity="noir"] .lc-hero-value, body.mode-plusultra[data-intensity="noir"] .mk-hero-value, body.mode-plusultra[data-intensity="noir"] .rltv-card-value, body.mode-plusultra[data-intensity="noir"] .pnl-row-profit td, body.mode-plusultra[data-intensity="noir"] .demo-title, body.mode-plusultra[data-intensity="noir"] .metric-tooltip .mt-title, body.mode-plusultra[data-intensity="noir"] .pg-tag--plus, body.mode-plusultra[data-intensity="noir"] .sfp-title { text-shadow: none; } body.mode-plusultra[data-intensity="noir"] .kpi-card, body.mode-plusultra[data-intensity="noir"] .leak-card, body.mode-plusultra[data-intensity="noir"] .hero-card, body.mode-plusultra[data-intensity="noir"] .hero-card--lose, body.mode-plusultra[data-intensity="noir"] .hero-card--unused, body.mode-plusultra[data-intensity="noir"] .hero-card--waste, body.mode-plusultra[data-intensity="noir"] .leak-card.leak-danger, body.mode-plusultra[data-intensity="noir"] .leak-card.leak-warn, body.mode-plusultra[data-intensity="noir"] .cfo-status-red, body.mode-plusultra[data-intensity="noir"] .leaks-tofu { animation: none; box-shadow: none; } body.mode-plusultra[data-intensity="noir"] .leaks-tofu-btn:hover { box-shadow: none; } /* Sidebar active item — amber on bone instead of cyan-on-deep-blue. */ body.mode-plusultra[data-intensity="noir"] .sb-version, body.mode-plusultra[data-intensity="noir"] .sb-item.active, body.mode-plusultra[data-intensity="noir"] .rltv-tab.on, body.mode-plusultra[data-intensity="noir"] .cc-tab.on, body.mode-plusultra[data-intensity="noir"] .sp-tab.on { background: var(--pu-amber-hot); color: oklch(15% 0 0); } /* Topbar mode toggle in Noir — amber border, no glow. */ body.mode-plusultra[data-intensity="noir"] .tb-mode.on { border-color: var(--pu-amber-hot); box-shadow: none; } /* Intensity seg in topbar — visible only when PlusUltra; styled per mode. */ .intensity-seg { display: inline-flex; } .intensity-seg[hidden] { display: none; } .tb-intensity-label[hidden] { display: none; } body.mode-plusultra .intensity-seg button.on { background: var(--pu-cyan); color: oklch(15% 0.02 240); border-color: var(--pu-cyan); } body.mode-plusultra[data-intensity="noir"] .intensity-seg button.on { background: var(--pu-amber-hot); color: oklch(15% 0 0); border-color: var(--pu-amber-hot); } /* ════════════════════════════════════════════════════════════════════ PATCH 13-POLISH.1 — Item 2 ADDITIVE refresh. Hero glow on grail-equivalents + brand-mark glyph cyan pulse (Acid) / amber sharp-no-glow (Noir). Append-only. Does not touch existing rules. ════════════════════════════════════════════════════════════════════ */ /* Hero glow — applied to attention surfaces in PlusUltra Acid mode. */ body.mode-plusultra .hero-panel, body.mode-plusultra .leaks-tofu, body.mode-plusultra .scorecard-strip > .scorecard-compound.featured, body.mode-plusultra .reports-narrative { box-shadow: var(--pu-hero-glow); } /* Body backdrop — atmospheric radial gradients per Dashboard PlusUltra.html. Two pseudo-element layers: ::before for color washes, ::after for grid. */ body.mode-plusultra::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(55% 45% at 14% 10%, color-mix(in oklch, var(--pu-cyan) 22%, transparent) 0%, transparent 62%), radial-gradient(50% 40% at 92% 82%, color-mix(in oklch, var(--pu-magenta) 18%, transparent) 0%, transparent 62%), radial-gradient(40% 30% at 70% 20%, color-mix(in oklch, var(--pu-cyan-bright) 14%, transparent) 0%, transparent 60%); opacity: 1; transition: opacity 0.4s; } body.mode-plusultra::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(color-mix(in oklch, var(--pu-cyan) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--pu-cyan) 4%, transparent) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 30%, transparent 90%); mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 30%, transparent 90%); } body.mode-plusultra .app { position: relative; z-index: 1; } body.mode-plusultra[data-intensity="noir"]::before { opacity: 0.4; } body.mode-plusultra[data-intensity="noir"]::after { opacity: 0.5; } /* Brand-mark glyph — Acid: cyan glow pulse; Noir: amber sharp, no glow. */ body.mode-plusultra .brand-mark { filter: drop-shadow(0 0 6px var(--pu-cyan-glow)) drop-shadow(0 0 14px oklch(0.80 0.18 200 / 0.30)); animation: pu-pulse-brand 3s infinite ease-in-out; } body.mode-plusultra .brand-mark svg rect { fill: var(--pu-cyan); /* override gradient with PlusUltra accent */ } @keyframes pu-pulse-brand { 0%, 100% { filter: drop-shadow(0 0 4px var(--pu-cyan-glow)) drop-shadow(0 0 10px oklch(0.80 0.18 200 / 0.20)); } 50% { filter: drop-shadow(0 0 10px var(--pu-cyan-bright)) drop-shadow(0 0 22px oklch(0.80 0.18 200 / 0.45)); } } body.mode-plusultra[data-intensity="noir"] .brand-mark { filter: none; animation: none; } body.mode-plusultra[data-intensity="noir"] .brand-mark svg rect { fill: var(--pu-amber-hot); } /* Sidebar logo + version pill in PlusUltra Acid get cyan glow. */ body.mode-plusultra .sb-logo { text-shadow: 0 0 8px oklch(0.80 0.18 200 / 0.45); } body.mode-plusultra[data-intensity="noir"] .sb-logo { text-shadow: none; } /* Topbar action buttons in PlusUltra Acid — cyan border on hover. */ body.mode-plusultra .topbar .btn:hover { border-color: var(--pu-cyan); } body.mode-plusultra .topbar .btn.primary { background: var(--pu-cyan); color: var(--bg-primary); border-color: var(--pu-cyan); box-shadow: 0 0 18px var(--pu-cyan-glow); } body.mode-plusultra[data-intensity="noir"] .topbar .btn.primary { background: var(--pu-amber-hot); color: oklch(0.15 0 0); box-shadow: none; } /* Reports + CRM (NEW-BLOCKS) in PlusUltra Acid — narrative + kanban accent. */ body.mode-plusultra .reports-narrative { border-color: color-mix(in oklch, var(--pu-cyan) 35%, var(--line)); } body.mode-plusultra .reports-tab.is-active { background: color-mix(in oklch, var(--pu-cyan) 18%, var(--bg-2)); border-color: var(--pu-cyan); color: var(--pu-cyan-bright); text-shadow: 0 0 6px var(--pu-cyan-glow); } body.mode-plusultra .crm-tone-good { border-top-color: var(--pu-green-vivid); } body.mode-plusultra .crm-tone-info { border-top-color: var(--pu-cyan); } body.mode-plusultra .crm-tone-warn { border-top-color: var(--pu-amber-hot); } body.mode-plusultra .crm-tone-bad { border-top-color: var(--pu-red-alert); } body.mode-plusultra .crm-quick-filter.is-active { background: color-mix(in oklch, var(--pu-cyan) 22%, var(--bg-2)); border-color: var(--pu-cyan); color: var(--pu-cyan-bright); } body.mode-plusultra[data-intensity="noir"] .reports-tab.is-active, body.mode-plusultra[data-intensity="noir"] .crm-quick-filter.is-active { text-shadow: none; border-color: var(--pu-amber-hot); color: var(--pu-amber-hot); background: color-mix(in oklch, var(--pu-amber-hot) 18%, var(--bg-2)); } /* ════════════════════════════════════════════════════════════════════ PATCH 13-PLUSULTRA-FIX.2 — Promote magenta до PRIMARY accent у Acid. Йолт 2026-05-07 evening: "Ніхуя плюс ультра не пінк... ото в куточку скромно щоб пінк." Cyan demote→secondary. Pink promote→dominant. Selector [data-intensity="acid"] is more specific than base body.mode-plusultra — overrides cascade automatically. Noir block above untouched. ZERO hex (oklch only). ════════════════════════════════════════════════════════════════════ */ body.mode-plusultra[data-intensity="acid"] { /* PRIMARY accent = electric pink (was cyan) */ --pu-accent: oklch(0.61 0.30 320); --pu-accent-bright: oklch(0.74 0.29 330); --pu-accent-glow: oklch(0.61 0.30 320 / 0.40); /* Magenta tokens — KEEP from FIX.1 (cascading on 19 selectors) */ /* --pu-magenta / -bright / -glow inherited from base body.mode-plusultra */ /* Cyan kept secondary for contrast / charts highlights / info semantic */ /* Background tier shifts to pink-tinted black (subtle hue 320 chromatic floor) */ --pu-bg-0: oklch(0.10 0.04 320); --pu-bg-1: oklch(0.14 0.05 320); --pu-bg-2: oklch(0.18 0.06 320); --pu-bg-3: oklch(0.23 0.07 320); --bg-primary: var(--pu-bg-0); --bg-card: var(--pu-bg-1); --bg-elevated: var(--pu-bg-2); --bg-0: var(--pu-bg-0); --bg-1: var(--pu-bg-1); --bg-2: var(--pu-bg-2); --bg-3: var(--pu-bg-3); --bg: var(--pu-bg-0); --bg-elev: var(--pu-bg-1); --bg-elev-2: var(--pu-bg-2); /* Borders — pink-tinted */ --pu-line: oklch(0.30 0.10 320); --line: var(--pu-line); --line-soft: oklch(0.22 0.07 320); --border: var(--pu-line); --border-soft: var(--line-soft); --pu-border-subtle: oklch(0.61 0.30 320 / 0.18); --pu-border-active: oklch(0.61 0.30 320 / 0.55); /* Hero glow — pink */ --pu-glow: 0 0 24px oklch(0.61 0.30 320 / 0.40); --pu-hero-glow: var(--pu-glow); /* Token bridge — Normis aliases pivoted to pink primary, cyan secondary */ --accent: var(--pu-accent); --accent-2: var(--pu-cyan); /* cyan demoted to secondary */ --brand: var(--pu-accent); /* CHARTS picks up pink via cssVar('--brand') */ --info: var(--pu-cyan); /* keep cyan as info semantic */ } /* ── Sidebar: pink gradient + active row accent ─────────────────── */ body.mode-plusultra[data-intensity="acid"] .sb-root { background: linear-gradient(180deg, oklch(0.14 0.06 320 / 0.95) 0%, oklch(0.10 0.04 320 / 0.92) 100%); border-right: 1px solid oklch(0.40 0.20 320 / 0.30); } body.mode-plusultra[data-intensity="acid"] .sb-item.active { background: oklch(0.61 0.30 320 / 0.20); color: var(--pu-accent-bright); box-shadow: inset 3px 0 0 var(--pu-accent-bright); } body.mode-plusultra[data-intensity="acid"] .sb-version { background: var(--pu-accent); color: oklch(0.10 0.04 320); } body.mode-plusultra[data-intensity="acid"] .sb-tag.live { background: color-mix(in oklch, var(--pu-accent) 15%, transparent); color: var(--pu-accent-bright); } body.mode-plusultra[data-intensity="acid"] .sb-group.sb-group-plusultra { border-left: 2px solid var(--pu-accent); box-shadow: inset 6px 0 16px oklch(0.61 0.30 320 / 0.16); } body.mode-plusultra[data-intensity="acid"] .sb-group.sb-group-plusultra > summary .sb-group-label { color: var(--pu-accent-bright); } body.mode-plusultra[data-intensity="acid"] .brand-mark svg rect { filter: hue-rotate(110deg); /* shift cyan→magenta on brand glyph gradient */ } /* ── Hero numbers: pink-driven ───────────────────────────────────── */ body.mode-plusultra[data-intensity="acid"] .kpi-value, body.mode-plusultra[data-intensity="acid"] .hero-amount, body.mode-plusultra[data-intensity="acid"] .hero-summary-value, body.mode-plusultra[data-intensity="acid"] .scorecard-compound .metric-row.total .metric-value, body.mode-plusultra[data-intensity="acid"] .scorecard-compound .primary-value, body.mode-plusultra[data-intensity="acid"] .leaks-tofu-value, body.mode-plusultra[data-intensity="acid"] .ups-sc-big, body.mode-plusultra[data-intensity="acid"] .ups-profit-big { color: var(--pu-accent-bright); text-shadow: 0 0 12px var(--pu-accent-glow); } body.mode-plusultra[data-intensity="acid"] .hero-panel { border-left: 3px solid var(--pu-accent); box-shadow: var(--pu-glow), inset 0 1px 0 oklch(1 0 0 / 0.05); } /* ── Topbar tabs / pills active = pink ──────────────────────────── */ body.mode-plusultra[data-intensity="acid"] .tb-tab.active, body.mode-plusultra[data-intensity="acid"] .tb-pill.active, body.mode-plusultra[data-intensity="acid"] .tb-mode.on, body.mode-plusultra[data-intensity="acid"] .seg button.on, body.mode-plusultra[data-intensity="acid"] .topbar .btn.primary[aria-pressed="true"], body.mode-plusultra[data-intensity="acid"] .reports-tab.is-active, body.mode-plusultra[data-intensity="acid"] .crm-quick-filter.is-active { background: var(--pu-accent); color: oklch(0.10 0.04 320); border-color: var(--pu-accent); box-shadow: 0 0 12px oklch(0.61 0.30 320 / 0.45); } body.mode-plusultra[data-intensity="acid"] .intensity-seg button.on { background: var(--pu-accent); color: oklch(0.10 0.04 320); border-color: var(--pu-accent); } /* ── Charts: SVG donut/sparkline strokes that read CSS vars automatically pick pink up via --brand remap above. Forced pink for canvas-based Chart.js не доступний з CSS; Chart.js components self-read cssVar('--brand') → pink. */ body.mode-plusultra[data-intensity="acid"] .ch-donut-slice:first-child, body.mode-plusultra[data-intensity="acid"] svg.donut polyline, body.mode-plusultra[data-intensity="acid"] svg.fp-shapes polygon[data-step="0"] { /* No-op; let stroke=var(--brand) inheritance do the work. Selector kept as documentation anchor for chart pink-primacy. */ } /* ── Buttons: primary action → pink ──────────────────────────────── */ body.mode-plusultra[data-intensity="acid"] .btn-primary, body.mode-plusultra[data-intensity="acid"] .btn.primary { background: var(--pu-accent); border-color: var(--pu-accent); color: oklch(0.10 0.04 320); box-shadow: 0 0 12px oklch(0.61 0.30 320 / 0.35); } body.mode-plusultra[data-intensity="acid"] .btn-primary:hover, body.mode-plusultra[data-intensity="acid"] .btn.primary:hover { background: var(--pu-accent-bright); box-shadow: 0 0 16px oklch(0.61 0.30 320 / 0.55); } /* ── Body background: deep pink-black (Acid dominance) ──────────── */ body.mode-plusultra[data-intensity="acid"] { background: var(--pu-bg-0); } /* ── Drill-down / pills / accent fills cascade ──────────────────── */ body.mode-plusultra[data-intensity="acid"] .ch-table tbody tr.bucket-row.is-open { background: color-mix(in oklch, var(--pu-accent) 14%, transparent); } body.mode-plusultra[data-intensity="acid"] .ch-table .drill-tabs button.on { color: var(--pu-accent-bright); border-color: var(--pu-accent); } body.mode-plusultra[data-intensity="acid"] .ups-amount-pill { background: color-mix(in oklch, var(--pu-accent) 22%, var(--pu-bg-2)); color: var(--pu-accent-bright); } body.mode-plusultra[data-intensity="acid"] .uk-note.info { background: color-mix(in oklch, var(--pu-accent) 8%, var(--pu-bg-2)); border-left-color: var(--pu-accent); } /* ═══════════════════════════════════════════════════════════════════════ Patch 13-PLUSULTRA-DESIGN — BLOCK LIBRARY (inline-copy from _CLAUDE_DESIGN/project/Dashboard_PlusUltra.html). All classes prefixed .pu-* щоб не зачіпати Norm pages. oklch only, var(--pu-*) tokens, spacing tokens. Activates під body.mode-plusultra (theme-scoped). ═══════════════════════════════════════════════════════════════════════ */ /* ── Grail hero (CFO Cockpit / pages з заголовком-метрикою) ── */ body.mode-plusultra .pu-grail { border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 70%), var(--bg-1); padding: 22px 24px 20px; position: relative; overflow: hidden; border-color: color-mix(in oklch, var(--accent) 35%, var(--line)); box-shadow: 0 0 60px -12px color-mix(in oklch, var(--accent) 25%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--accent) 14%, transparent); } body.mode-plusultra .pu-grail-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } body.mode-plusultra .pu-grail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--accent); padding: 4px 10px; border-radius: 4px; background: color-mix(in oklch, var(--accent) 16%, var(--bg-2)); border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line)); font-family: 'JetBrains Mono', ui-monospace, monospace; text-shadow: 0 0 10px color-mix(in oklch, var(--accent) 60%, transparent); } body.mode-plusultra .pu-grail-h h1 { margin: 0; font-size: 30px; font-weight: 700; color: var(--ink-0); letter-spacing: -0.024em; line-height: 1; text-shadow: 0 0 20px color-mix(in oklch, var(--accent) 30%, transparent); } body.mode-plusultra .pu-grail-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-grail-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good), 0 0 0 3px color-mix(in oklch, var(--good) 30%, transparent); animation: pu-pulse 2s infinite ease-in-out; } @keyframes pu-pulse { 50% { opacity: 0.4; } } /* ── KPI cells (6-col strip in grail) ── */ body.mode-plusultra .pu-kpis-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md, 12px); } @media (max-width: 1280px) { body.mode-plusultra .pu-kpis-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { body.mode-plusultra .pu-kpis-row { grid-template-columns: repeat(2, 1fr); } } body.mode-plusultra .pu-kpi-cell { background: color-mix(in oklch, var(--bg-2) 70%, transparent); backdrop-filter: blur(2px); border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line)); border-radius: 10px; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; } body.mode-plusultra .pu-kpi-cell .head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; } body.mode-plusultra .pu-kpi-cell .big { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 22px; letter-spacing: -0.025em; color: var(--accent); line-height: 1; text-shadow: 0 0 14px color-mix(in oklch, var(--accent) 50%, transparent); } body.mode-plusultra .pu-kpi-cell .big .unit { font-size: 14px; color: var(--ink-2); margin-left: 2px; text-shadow: none; } body.mode-plusultra[data-intensity="noir"] .pu-kpi-cell .big { color: var(--ink-0); text-shadow: none; } body.mode-plusultra .pu-kpi-cell .row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Health pills (healthy / acceptable / red) ── */ body.mode-plusultra .pu-health { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 6px; border-radius: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; border: 1px solid var(--line-soft); } body.mode-plusultra .pu-health .dot { width: 6px; height: 6px; border-radius: 50%; } body.mode-plusultra .pu-health.healthy { color: var(--good); border-color: color-mix(in oklch, var(--good) 30%, var(--line)); background: color-mix(in oklch, var(--good) 8%, transparent); } body.mode-plusultra .pu-health.healthy .dot { background: var(--good); } body.mode-plusultra .pu-health.acceptable { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 30%, var(--line)); background: color-mix(in oklch, var(--warn) 8%, transparent); } body.mode-plusultra .pu-health.acceptable .dot { background: var(--warn); } body.mode-plusultra .pu-health.red { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 30%, var(--line)); background: color-mix(in oklch, var(--bad) 8%, transparent); } body.mode-plusultra .pu-health.red .dot { background: var(--bad); } /* ── PU section card + section header ── */ body.mode-plusultra .pu-section { background: color-mix(in oklch, var(--bg-1) 80%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 14%, var(--line-soft)); border-radius: 12px; padding: 16px; backdrop-filter: blur(2px); } body.mode-plusultra .pu-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } body.mode-plusultra .pu-sec-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--accent); padding: 2px 7px; border-radius: 4px; background: color-mix(in oklch, var(--accent) 16%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 28%, var(--line)); text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 60%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-sec-num { text-shadow: none; } body.mode-plusultra .pu-sec-h h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.01em; } body.mode-plusultra .pu-sec-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-0); } body.mode-plusultra .pu-sec-h .pu-sec-hint { margin-left: auto; font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Top levers list ── */ body.mode-plusultra .pu-levers { display: flex; flex-direction: column; gap: 6px; } body.mode-plusultra .pu-lever-row { display: grid; grid-template-columns: 26px 1fr 110px 80px; gap: 10px; align-items: center; padding: 7px 10px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; } body.mode-plusultra .pu-lever-rk { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); font-weight: 700; font-size: 11px; text-align: center; text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 50%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-lever-rk { text-shadow: none; } body.mode-plusultra .pu-lever-nm { font-size: 12px; color: var(--ink-0); min-width: 0; } body.mode-plusultra .pu-lever-impact { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--good); text-align: right; font-weight: 600; } body.mode-plusultra .pu-lever-impact.dn { color: var(--bad); } body.mode-plusultra .pu-ease { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: center; } body.mode-plusultra .pu-ease.easy { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); } body.mode-plusultra .pu-ease.med { color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); } body.mode-plusultra .pu-ease.hard { color: var(--bad); background: color-mix(in oklch, var(--bad) 14%, transparent); } /* ── 12-week sparkline grid ── */ body.mode-plusultra .pu-week-spark-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm, 8px); } @media (max-width: 1100px) { body.mode-plusultra .pu-week-spark-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { body.mode-plusultra .pu-week-spark-grid { grid-template-columns: repeat(2, 1fr); } } body.mode-plusultra .pu-week-spark { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 7px; padding: 8px 10px; min-width: 0; } body.mode-plusultra .pu-week-spark .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; } body.mode-plusultra .pu-week-spark svg { display: block; width: 100%; height: 30px; margin-top: 4px; } body.mode-plusultra .pu-week-spark .foot { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--ink-1); font-size: 10px; margin-top: 4px; } /* ── Cross-link cards ── */ body.mode-plusultra .pu-cross-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md, 12px); } @media (max-width: 1100px) { body.mode-plusultra .pu-cross-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { body.mode-plusultra .pu-cross-row { grid-template-columns: 1fr; } } body.mode-plusultra .pu-cross-card { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.16s, transform 0.16s; text-decoration: none; color: inherit; } body.mode-plusultra .pu-cross-card:hover { border-color: color-mix(in oklch, var(--accent) 35%, var(--line)); transform: translateY(-1px); box-shadow: 0 0 30px -10px color-mix(in oklch, var(--accent) 40%, transparent); } body.mode-plusultra .pu-cross-ic { width: 30px; height: 30px; border-radius: 7px; background: color-mix(in oklch, var(--accent) 16%, var(--bg-2)); color: var(--accent); display: grid; place-items: center; box-shadow: 0 0 16px -4px color-mix(in oklch, var(--accent) 40%, transparent); } body.mode-plusultra .pu-cross-card .t { font-size: 13px; color: var(--ink-0); font-weight: 600; } body.mode-plusultra .pu-cross-card .d { font-size: 11.5px; color: var(--ink-3); } body.mode-plusultra .pu-cross-card .arr { margin-top: auto; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; } /* ── Input strip + cell (Real CM, calculator) ── */ body.mode-plusultra .pu-input-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm, 10px); } @media (max-width: 720px) { body.mode-plusultra .pu-input-strip { grid-template-columns: 1fr; } } body.mode-plusultra .pu-input-cell { background: var(--bg-2); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.mode-plusultra .pu-input-cell .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 5px; } body.mode-plusultra .pu-input-cell .ed { display: flex; align-items: center; gap: 4px; } body.mode-plusultra .pu-input-cell .v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; color: var(--accent); text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-input-cell .v { color: var(--ink-0); text-shadow: none; } body.mode-plusultra .pu-input-cell .unit { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--ink-2); } body.mode-plusultra .pu-input-cell .src { font-size: 10px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Compare block (Real CM CRM vs Real) ── */ body.mode-plusultra .pu-compare-block { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px; } body.mode-plusultra .pu-compare-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); } body.mode-plusultra .pu-compare-row:last-child { border-bottom: none; } body.mode-plusultra .pu-compare-row .left, body.mode-plusultra .pu-compare-row .right { display: flex; flex-direction: column; min-width: 0; } body.mode-plusultra .pu-compare-row .left .v, body.mode-plusultra .pu-compare-row .right .v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; color: var(--ink-0); } body.mode-plusultra .pu-compare-row .right .v { color: var(--accent); text-align: right; text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-compare-row .right .v { text-shadow: none; } body.mode-plusultra .pu-compare-row .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; } body.mode-plusultra .pu-compare-row .right .l { text-align: right; } body.mode-plusultra .pu-delta { background: var(--bg-3); padding: 4px 10px; border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; } body.mode-plusultra .pu-delta.up { color: var(--good); background: color-mix(in oklch, var(--good) 14%, var(--bg-3)); } body.mode-plusultra .pu-delta.dn { color: var(--bad); background: color-mix(in oklch, var(--bad) 14%, var(--bg-3)); } /* ── LTV toggle + LTV cards ── */ body.mode-plusultra .pu-ltv-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px; } body.mode-plusultra .pu-ltv-toggle button { background: transparent; border: 0; color: var(--ink-2); padding: 4px 10px; border-radius: 4px; font: inherit; font-size: 11px; cursor: pointer; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-ltv-toggle button.on { background: var(--bg-3); color: var(--accent); text-shadow: 0 0 8px color-mix(in oklch, var(--accent) 50%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-ltv-toggle button.on { text-shadow: none; } body.mode-plusultra .pu-ltv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm, 10px); margin-top: 12px; } @media (max-width: 1000px) { body.mode-plusultra .pu-ltv-cards { grid-template-columns: repeat(2, 1fr); } } body.mode-plusultra .pu-ltv-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.mode-plusultra .pu-ltv-card .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; } body.mode-plusultra .pu-ltv-card .v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; color: var(--ink-0); } body.mode-plusultra .pu-ltv-card .h { font-size: 10.5px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-ltv-card.l1 { border-color: color-mix(in oklch, var(--good) 24%, var(--line)); } body.mode-plusultra .pu-ltv-card.l1 .v { color: var(--good); } body.mode-plusultra .pu-ltv-card.l2 { border-color: color-mix(in oklch, var(--warn) 24%, var(--line)); } body.mode-plusultra .pu-ltv-card.l2 .v { color: var(--warn); } body.mode-plusultra .pu-ltv-card.l3 { border-color: color-mix(in oklch, var(--bad) 24%, var(--line)); } body.mode-plusultra .pu-ltv-card.l3 .v { color: var(--bad); } body.mode-plusultra .pu-ltv-card.real { border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); } body.mode-plusultra .pu-ltv-card.real .v { color: var(--accent); text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-ltv-card.real .v { text-shadow: none; } /* ── CAC payback hero + scaling sim ── */ body.mode-plusultra .pu-cac-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-md, 14px); } @media (max-width: 1000px) { body.mode-plusultra .pu-cac-grid { grid-template-columns: 1fr; } } body.mode-plusultra .pu-cac-hero { background: radial-gradient(70% 80% at 50% 0%, color-mix(in oklch, var(--good) 14%, transparent) 0%, transparent 70%), var(--bg-2); border: 1px solid color-mix(in oklch, var(--good) 25%, var(--line)); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; text-align: center; } body.mode-plusultra .pu-cac-hero .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-3); font-weight: 600; } body.mode-plusultra .pu-cac-hero .big { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 42px; font-weight: 600; color: var(--good); letter-spacing: -0.025em; line-height: 1; text-shadow: 0 0 24px color-mix(in oklch, var(--good) 50%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-cac-hero .big { text-shadow: none; } body.mode-plusultra .pu-cac-hero .big .unit { font-size: 18px; color: var(--ink-2); margin-left: 2px; text-shadow: none; } body.mode-plusultra .pu-cac-hero .scale { display: flex; gap: 4px; justify-content: center; padding: 4px 12px; } body.mode-plusultra .pu-cac-hero .seg-bar { flex: 1; height: 6px; border-radius: 3px; } body.mode-plusultra .pu-cac-hero .seg-bar.h { background: var(--good); box-shadow: 0 0 12px color-mix(in oklch, var(--good) 35%, transparent); } body.mode-plusultra .pu-cac-hero .seg-bar.a { background: color-mix(in oklch, var(--warn) 30%, var(--bg-3)); } body.mode-plusultra .pu-cac-hero .seg-bar.r { background: color-mix(in oklch, var(--bad) 30%, var(--bg-3)); } body.mode-plusultra .pu-cac-hero .ranges { display: flex; justify-content: space-between; padding: 0 12px; font-size: 9.5px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-cac-hero .note { font-size: 10.5px; color: var(--good); margin-top: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-scaling-sim { margin-top: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg-2); } body.mode-plusultra .pu-scaling-sim .pu-sim-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; margin-bottom: 8px; } body.mode-plusultra .pu-sim-controls { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } body.mode-plusultra .pu-sim-controls .lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } body.mode-plusultra .pu-sim-controls input[type=range] { flex: 1; min-width: 120px; appearance: none; height: 4px; background: var(--bg-3); border-radius: 2px; } body.mode-plusultra .pu-sim-controls input[type=range]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 50%, transparent); } body.mode-plusultra .pu-sim-controls .val { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); font-weight: 600; font-size: 14px; min-width: 50px; text-align: right; } body.mode-plusultra .pu-sim-output { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm, 8px); } @media (max-width: 720px) { body.mode-plusultra .pu-sim-output { grid-template-columns: repeat(2, 1fr); } } body.mode-plusultra .pu-sim-output > div { background: var(--bg-3); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.mode-plusultra .pu-sim-output .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; } body.mode-plusultra .pu-sim-output .v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; color: var(--ink-0); } /* ── Tabs segmented (scenario planner) ── */ body.mode-plusultra .pu-tabs { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 3px; } body.mode-plusultra .pu-tabs button { background: transparent; border: 0; color: var(--ink-2); padding: 6px 14px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; } body.mode-plusultra .pu-tabs button.on { background: var(--bg-3); color: var(--accent); box-shadow: 0 0 18px -6px color-mix(in oklch, var(--accent) 45%, transparent); text-shadow: 0 0 6px color-mix(in oklch, var(--accent) 35%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-tabs button.on { text-shadow: none; } /* ── Scenario Planner grid + critical decisions ── */ body.mode-plusultra .pu-scenario-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-md, 12px); margin-top: 10px; } @media (max-width: 1000px) { body.mode-plusultra .pu-scenario-grid { grid-template-columns: 1fr; } } body.mode-plusultra .pu-scenario-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px; } body.mode-plusultra .pu-scenario-card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; } body.mode-plusultra .pu-crit-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); } body.mode-plusultra .pu-crit-row:last-child { border-bottom: none; } body.mode-plusultra .pu-crit-row .ic-box { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; } body.mode-plusultra .pu-crit-row.warn .ic-box { background: color-mix(in oklch, var(--warn) 22%, var(--bg-3)); color: var(--warn); } body.mode-plusultra .pu-crit-row.bad .ic-box { background: color-mix(in oklch, var(--bad) 22%, var(--bg-3)); color: var(--bad); } body.mode-plusultra .pu-crit-row.good .ic-box { background: color-mix(in oklch, var(--good) 22%, var(--bg-3)); color: var(--good); } body.mode-plusultra .pu-crit-row .t { font-size: 12px; color: var(--ink-0); font-weight: 600; display: block; } body.mode-plusultra .pu-crit-row .d { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-crit-row .impact { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--good); } /* ── Markup histogram + quote ── */ body.mode-plusultra .pu-markup-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md, 14px); } @media (max-width: 1000px) { body.mode-plusultra .pu-markup-wrap { grid-template-columns: 1fr; } } body.mode-plusultra .pu-hist-bars { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); align-items: end; height: 180px; padding: 0 8px; } body.mode-plusultra .pu-hist-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } body.mode-plusultra .pu-hist-bar .b { width: 100%; background: linear-gradient(to top, var(--accent), color-mix(in oklch, var(--accent) 60%, var(--info))); border-radius: 4px 4px 2px 2px; min-height: 4px; box-shadow: 0 0 16px -4px color-mix(in oklch, var(--accent) 40%, transparent); } body.mode-plusultra .pu-hist-bar .b.peak { background: linear-gradient(to top, var(--good), color-mix(in oklch, var(--good) 60%, var(--accent))); } body.mode-plusultra .pu-hist-bar .lbl { font-size: 9.5px; color: var(--ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-hist-bar .pct { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--ink-1); font-weight: 600; } body.mode-plusultra .pu-markup-quote { background: var(--bg-2); border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 14px; font-style: italic; font-size: 12px; color: var(--ink-1); line-height: 1.5; margin-top: 10px; } body.mode-plusultra .pu-markup-quote .who { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--accent); margin-bottom: 4px; } /* ── Cohort cube grid (24m / 12m) ── */ body.mode-plusultra .pu-cube-grid { display: grid; gap: 2px; margin-top: 6px; } body.mode-plusultra .pu-cube-grid.size-24 { grid-template-columns: 60px repeat(24, minmax(0, 1fr)); } body.mode-plusultra .pu-cube-grid.size-12 { grid-template-columns: 110px repeat(12, minmax(0, 1fr)); gap: 3px; } body.mode-plusultra .pu-cube-cell { height: 16px; border-radius: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8px; display: grid; place-items: center; color: var(--ink-1); cursor: default; } body.mode-plusultra .pu-cube-grid.size-12 .pu-cube-cell { height: 26px; font-size: 9.5px; } body.mode-plusultra .pu-cube-cell:hover { outline: 1px solid var(--accent); transform: scale(1.04); } body.mode-plusultra .pu-cube-rh { font-size: 10px; color: var(--ink-2); display: flex; align-items: center; padding: 0 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-cube-grid.size-12 .pu-cube-rh { font-size: 11px; padding: 4px 6px; } body.mode-plusultra .pu-cube-ch { font-size: 8.5px; color: var(--ink-3); text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-cube-grid.size-12 .pu-cube-ch { font-size: 10px; padding: 4px 0; text-transform: uppercase; } /* ── PU table ── */ body.mode-plusultra table.pu-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } body.mode-plusultra table.pu-tbl th { text-align: left; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); } body.mode-plusultra table.pu-tbl th.r, body.mode-plusultra table.pu-tbl td.r { text-align: right; } body.mode-plusultra table.pu-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-1); } body.mode-plusultra table.pu-tbl tr:last-child td { border-bottom: 0; } body.mode-plusultra table.pu-tbl .v { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--ink-0); } body.mode-plusultra table.pu-tbl tr.total td { background: color-mix(in oklch, var(--accent) 6%, var(--bg-2)); font-weight: 600; color: var(--ink-0); border-top: 1px solid var(--line); } /* ── Waterfall ── */ body.mode-plusultra .pu-waterfall { display: grid; grid-template-columns: 80px repeat(auto-fit, minmax(0, 1fr)); gap: 4px; align-items: end; height: 240px; padding: 0 4px; position: relative; } body.mode-plusultra .pu-wf-axis { font-size: 10px; color: var(--ink-3); padding: 0 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; align-self: end; } body.mode-plusultra .pu-wf-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; height: 100%; justify-content: flex-end; min-width: 0; } body.mode-plusultra .pu-wf-bar .b { width: 100%; min-height: 3px; border-radius: 2px; } body.mode-plusultra .pu-wf-bar .b.up { background: linear-gradient(to top, color-mix(in oklch, var(--good) 80%, transparent), var(--good)); } body.mode-plusultra .pu-wf-bar .b.dn { background: linear-gradient(to top, color-mix(in oklch, var(--bad) 80%, transparent), var(--bad)); } body.mode-plusultra .pu-wf-bar .b.tot { background: linear-gradient(to top, color-mix(in oklch, var(--accent) 80%, transparent), var(--accent)); box-shadow: 0 0 18px color-mix(in oklch, var(--accent) 40%, transparent); } body.mode-plusultra[data-intensity="noir"] .pu-wf-bar .b.tot { box-shadow: none; } body.mode-plusultra .pu-wf-bar .lbl { font-size: 9px; color: var(--ink-3); text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; } body.mode-plusultra .pu-wf-bar .v { font-size: 9px; color: var(--ink-1); white-space: nowrap; font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ── Page-level wrapper для PU pages з консистентним layout ── */ body.mode-plusultra .pu-page-wrap { display: flex; flex-direction: column; gap: var(--space-lg, 16px); }