/* NOD-ify MixMatch — M5.2 stylesheet (extracted verbatim from MixMatch.html) */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg: #1a1a2e;
            --table: #2d2440;
            --felt: #0f0f18;
            --felt-dark: #0a0a12;
            --felt-border: #1f1f2e;
            --card-bg: #fefcf3;
            --card-shadow: rgba(0,0,0,0.4);
            --text: #2c2c2c;
            --text-dim: #7a7a7a;
            --accent: #d4a853;
            --accent-glow: rgba(212,168,83,0.4);
            --green: #43a047;
            --red: #e53935;
            --blue: #1e88e5;
            --purple: #8e24aa;
            --orange: #fb8c00;
            --teal: #00897b;
            --pink: #d81b60;
            --joy: #fdd835;
            --trust: #66bb6a;
            --fear: #42a5f5;
            --surprise: #ffa726;
            --sadness: #42a5f5;
            --disgust: #ab47bc;
            --anger: #ef5350;
            --anticipation: #ff7043;

            /* ponytail: surface elevation — base < raised < overlay */
            --surface-0: #12121f;   /* page felt */
            --surface-1: #1c1c30;   /* cards, panels */
            --surface-2: #26263e;   /* modals, menus, banners */
        }
        /* ═══ MODERN SKIN (2026-07) — indigo/violet replaces casino gold ═══
           Single variable override recolors every accent, glow, and gradient
           in the app. Mechanics (spin, draw, pulses, particles) untouched. */
        :root {
            --bg: #0e0f1a;
            --table: #1a1c2e;
            --felt: #0b0c15;
            --felt-dark: #07080f;
            --felt-border: #232542;
            --accent: #7c6cf8;
            --accent-glow: rgba(124,108,248,0.42);
            --surface-0: #0e0f1a;
            --surface-1: #181a2c;
            --surface-2: #22253c;
        }

        /* ═══════════════════════════════════════════════════════════════
           SAND + SAGE — light earthy theme (default, 2026-07)
           Warm sand page, sage-green table felt, terracotta accent.
           Dark theme is preserved verbatim under :root[data-theme="dark"].
           --wNNN tokens are the former rgba(255,255,255,N) overlays; they
           invert to warm-black on light so depth cues still read.
           ═══════════════════════════════════════════════════════════════ */
        :root {
            --bg: #F6EFE2;
            --table: #EDE4D2;
            --felt: #E7EDDC;
            --felt-dark: #D9E2C9;
            --felt-border: #DCD0B8;
            --card-bg: #FFFDF7;
            --card-shadow: rgba(90,74,50,0.16);
            --text: #2F2A24;
            --text-dim: #6B6154;
            --text-hi: #241F19;
            --accent: #9C5122;
            --accent-glow: rgba(156,81,34,0.30);
            --surface-0: #F2EBDD;
            --surface-1: #FAF6EC;
            --surface-2: #FFFDF7;
            --m-haggle: #C2185B;
            --m-friend: #2E7D32;
            --m-boss: #C62828;
            --m-mediator: #1565C0;
            --m-listen: #5341D6;
            --m-greenroom: #5D5A54;
            --m-news: #C2410C;
            --m-trophy: #8D6E1F;
            --mode-suit: #1F2633;
            --mode-suit-alt: #343D50;
            --mode-skin: #B98463;
            --mode-hair: #3C2C24;
            --mode-shirt: #FFFDF7;
            --on-accent: #FFF6EC;
            --k040: rgba(255,255,255,0.322);
            --k060: rgba(255,255,255,0.333);
            --k080: rgba(255,255,255,0.344);
            --k200: rgba(255,255,255,0.41);
            --k250: rgba(255,255,255,0.438);
            --k300: rgba(255,255,255,0.465);
            --k350: rgba(255,255,255,0.492);
            --k400: rgba(255,255,255,0.52);
            --k500: rgba(255,255,255,0.575);
            --k550: rgba(255,255,255,0.603);
            --k600: rgba(255,255,255,0.63);
            --k700: rgba(255,255,255,0.685);
            --k850: rgba(255,255,255,0.72);
            --card-face-1: #FFFDF7;
            --card-face-2: #F6EFE1;
            --card-title: #241F19;
            --card-body: #5C5347;
            --card-drop: rgba(90,74,50,0.15);
            --card-shadow-txt: none;
            --w015: rgba(255,255,255,0.112);
            --w020: rgba(255,255,255,0.15);
            --w030: rgba(255,255,255,0.225);
            --w040: rgba(255,255,255,0.3);
            --w045: rgba(255,255,255,0.337);
            --w050: rgba(255,255,255,0.375);
            --w060: rgba(255,255,255,0.45);
            --w070: rgba(255,255,255,0.525);
            --w080: rgba(255,255,255,0.6);
            --w090: rgba(38,30,20,0.076);
            --w100: rgba(38,30,20,0.085);
            --w120: rgba(38,30,20,0.102);
            --w140: rgba(38,30,20,0.119);
            --w150: rgba(38,30,20,0.128);
            --w180: rgba(38,30,20,0.153);
            --w200: rgba(38,30,20,0.17);
            --w250: rgba(38,30,20,0.212);
            --w300: rgba(38,30,20,0.606);
            --w350: rgba(38,30,20,0.632);
            --w400: rgba(38,30,20,0.658);
            --w420: rgba(38,30,20,0.668);
            --w450: rgba(38,30,20,0.684);
            --w500: rgba(38,30,20,0.71);
            --w550: rgba(38,30,20,0.736);
            --w600: rgba(38,30,20,0.762);
            --w650: rgba(38,30,20,0.788);
            --w700: rgba(38,30,20,0.814);
            --w750: rgba(38,30,20,0.84);
            --w780: rgba(38,30,20,0.87);
            --w800: rgba(38,30,20,0.87);
            --w850: rgba(38,30,20,0.87);
            --w900: rgba(38,30,20,0.87);
            --w950: rgba(38,30,20,0.87);
        }
        :root[data-theme="dark"] {
            --bg: #0e0f1a;
            --table: #1a1c2e;
            --felt: #0b0c15;
            --felt-dark: #07080f;
            --felt-border: #232542;
            --card-bg: #fefcf3;
            --card-shadow: rgba(0,0,0,0.4);
            --text: #2c2c2c;
            --text-dim: #7a7a7a;
            --text-hi: #ffffff;
            --accent: #7c6cf8;
            --accent-glow: rgba(124,108,248,0.42);
            --surface-0: #0e0f1a;
            --surface-1: #181a2c;
            --surface-2: #22253c;
            --m-haggle: #ff5ea8;
            --m-friend: #66bb6a;
            --m-boss: #ff3b3b;
            --m-mediator: #64b5f6;
            --m-listen: #7c6cf8;
            --m-greenroom: #e0e0e0;
            --m-news: #ff6b35;
            --m-trophy: #d4a853;
            --mode-suit: #0F111A;
            --mode-suit-alt: #252A3D;
            --mode-skin: #D0A17E;
            --mode-hair: #15131A;
            --mode-shirt: #FEFCF3;
            --on-accent: #1a1a2e;
            --k040: rgba(0,0,0,0.04);
            --k060: rgba(0,0,0,0.06);
            --k080: rgba(0,0,0,0.08);
            --k200: rgba(0,0,0,0.2);
            --k250: rgba(0,0,0,0.25);
            --k300: rgba(0,0,0,0.3);
            --k350: rgba(0,0,0,0.35);
            --k400: rgba(0,0,0,0.4);
            --k500: rgba(0,0,0,0.5);
            --k550: rgba(0,0,0,0.55);
            --k600: rgba(0,0,0,0.6);
            --k700: rgba(0,0,0,0.7);
            --k850: rgba(0,0,0,0.85);
            --card-face-1: #2a2638;
            --card-face-2: #211d2e;
            --card-title: #e8e8f0;
            --card-body: #c0c0cc;
            --card-drop: rgba(0,0,0,0.45);
            --card-shadow-txt: 0 1px 3px rgba(0,0,0,0.6);
            --w015: rgba(255,255,255,0.015);
            --w020: rgba(255,255,255,0.02);
            --w030: rgba(255,255,255,0.03);
            --w040: rgba(255,255,255,0.04);
            --w045: rgba(255,255,255,0.045);
            --w050: rgba(255,255,255,0.05);
            --w060: rgba(255,255,255,0.06);
            --w070: rgba(255,255,255,0.07);
            --w080: rgba(255,255,255,0.08);
            --w090: rgba(255,255,255,0.09);
            --w100: rgba(255,255,255,0.1);
            --w120: rgba(255,255,255,0.12);
            --w140: rgba(255,255,255,0.14);
            --w150: rgba(255,255,255,0.15);
            --w180: rgba(255,255,255,0.18);
            --w200: rgba(255,255,255,0.2);
            --w250: rgba(255,255,255,0.25);
            --w300: rgba(255,255,255,0.3);
            --w350: rgba(255,255,255,0.35);
            --w400: rgba(255,255,255,0.4);
            --w420: rgba(255,255,255,0.42);
            --w450: rgba(255,255,255,0.45);
            --w500: rgba(255,255,255,0.5);
            --w550: rgba(255,255,255,0.55);
            --w600: rgba(255,255,255,0.6);
            --w650: rgba(255,255,255,0.65);
            --w700: rgba(255,255,255,0.7);
            --w750: rgba(255,255,255,0.75);
            --w780: rgba(255,255,255,0.78);
            --w800: rgba(255,255,255,0.8);
            --w850: rgba(255,255,255,0.85);
            --w900: rgba(255,255,255,0.9);
            --w950: rgba(255,255,255,0.95);
        }
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ponytail: 3-tier type scale — display / body / label */
        .mode-header h2, .wheel-header h2, .academy-header h2, .current-tool-banner .ct-name {
            letter-spacing:-0.5px; font-weight:800; }
        .tool-card .card-desc, .mode-card .mc-desc, .mode-scenario .ms-approach {
            font-weight:400; letter-spacing:0; line-height:1.65; }
        .ct-label, .sp-title, .timer-label, .cat-badge, .academy-level-badge, .stat-item {
            font-weight:700; letter-spacing:1.8px; text-transform:uppercase; font-size:10px;
            color:var(--w420); }

        /* ponytail: surface elevation — base < raised < overlay */
        .session-panel, .mode-scenario, .emo-item { background: var(--surface-1); }
        .modal, .bk-modal-content, .detail-content { background: var(--surface-2);
            box-shadow: 0 24px 60px rgba(0,0,0,.6); }
        .current-tool-banner { background: var(--surface-1); } /* theme-aware panel */
        .table-surface {
            width: 100%;
            min-height: 100vh;
            background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
            border: 8px solid var(--felt-border);
            box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
            position: relative;
        }
        .table-surface::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: repeating-linear-gradient(0deg, transparent, transparent 60px, var(--w015) 60px, var(--w015) 61px);
            pointer-events: none;
        }

        /* ─── Header ─── */
        .header {
            width: 100%; max-width: 1100px;
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 0 12px; position: relative; z-index: 10;
        }
        .logo { display: flex; align-items: center; gap: 10px; }
        .logo-icon {
            width: 36px; height: 36px;
            background: url('https://iubxycckgrplbpdbncfk.supabase.co/storage/v1/object/public/assets/nod-coin-spin.gif') center/cover, var(--accent);
            border-radius: 50%;
            box-shadow: 0 0 20px var(--accent-glow);
        }
        .logo h1 { color: var(--text-hi); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
        .logo span { color: var(--accent); font-weight: 300; font-size: 13px; display: block; }
        .header-controls { display: flex; gap: 4px; align-items: center; }
        .btn-icon {
            width: 44px; height: 44px; border-radius: 8px;
            border: 1px solid var(--w150);
            background: var(--w080); color: var(--text-hi); font-size: 14px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.3s; backdrop-filter: blur(8px);
        }
        .btn-icon:hover { background: var(--w180); transform: scale(1.08); }
        .btn-icon.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

        /* ─── Nav tabs ─── */
        .nav-tabs {
            width: 100%; max-width: 1100px;
            display: flex; gap: 4px; padding: 4px 0 10px;
            position: relative; z-index: 10;
        }
        .nav-tab {
            padding: 7px 18px; border-radius: 10px 10px 0 0;
            border: none; font-family: 'Inter', sans-serif;
            font-size: 13px; font-weight: 600;
            cursor: pointer; transition: all 0.3s;
            background: var(--w040); color: var(--w400);
            position: relative;
        }
        .nav-tab:hover { color: var(--w700); background: var(--w080); }
        .nav-tab.active {
            background: var(--w100); color: var(--text-hi);
            box-shadow: 0 -1px 0 var(--accent) inset;
        }
        .nav-tabs.tab-reorder-active { align-items: flex-end; }
        .nav-tab[draggable="true"] { touch-action: manipulation; }
        .nav-tab.tab-dragging {
            opacity: .72; transform: translateY(-10px) scale(1.04) rotate(-1deg);
            box-shadow: 0 14px 34px var(--shadow), 0 0 22px var(--accent-glow);
            z-index: 50;
        }
        .nav-tab.tab-drop-target {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            background: var(--w100);
        }
        .tab-spark-burst {
            position: fixed; width: 1px; height: 1px; left: 0; top: 0; z-index: 10000;
            pointer-events: none;
        }
        .tab-spark-burst i {
            position: absolute; width: 7px; height: 7px; border-radius: 50%;
            background: var(--accent); box-shadow: 0 0 14px var(--accent-glow);
            animation: tab-spark 700ms ease-out forwards;
        }
        @keyframes tab-spark {
            0% { transform: translate(0,0) scale(.4); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }
        /* Listen For — the most critical tab, gets a persistent accent border */
        .nav-tab.nav-tab-critical {
            border: 2px solid var(--accent);
            border-radius: 10px;
            padding: 5px 16px;
            box-shadow: 0 0 8px var(--accent-glow);
        }
        .nav-tab.nav-tab-critical:hover {
            border-color: var(--accent);
            box-shadow: 0 0 14px var(--accent-glow);
        }
        .nav-tab.nav-tab-critical.active {
            border-color: var(--accent);
            box-shadow: 0 -1px 0 var(--accent) inset, 0 0 12px var(--accent-glow);
        }
        .nav-tab .badge {
            display: inline-block; margin-left: 5px;
            padding: 1px 7px; border-radius: 8px;
            font-size: 10px; background: var(--w100); color: var(--accent);
        }

        /* ponytail: momentum scroll + right-edge fade hint */
        .nav-tabs { overflow:visible; flex-wrap:wrap; position:relative; }

        /* grouped nav: Modes / More dropdowns */
        .nav-group { position:relative; }
        .nav-group .caret { font-size:9px; opacity:.6; margin-left:3px; }
        .nav-menu {
            display:none; position:absolute; top:calc(100% + 4px); left:0;
            flex-direction:column; gap:2px; min-width:176px; padding:6px;
            background:var(--surface-2); border:1px solid var(--felt-border);
            border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.55); z-index:60;
        }
        .nav-group.open .nav-menu { display:flex; animation:fade-up .12s ease; }
        .nav-menu .nav-tab { border-radius:8px; width:100%; text-align:left; }

        /* timer urgency: final minute — red digits + pulsing ring */
        #timerDisplay.critical { color:#ff3b3b !important; animation:timer-critical 1s ease-in-out infinite; }
        @keyframes timer-critical { 0%,100%{opacity:1} 50%{opacity:.55} }
        *:has(> #timerDisplay.critical) .ring-fg { stroke:#ff3b3b; }
        .nav-tab { scroll-snap-align:start; }
        @media (min-width:769px) { .nav-tabs::after { display:none; } }

        /* ─── Command Center: jump/search/pins/recent/live ─── */
        .command-center {
            width:100%;
            max-width:1280px;
            margin:10px auto 12px;
            padding:10px;
            border:1px solid var(--w090);
            border-radius:8px;
            background:var(--w045);
            box-shadow:0 10px 28px var(--card-drop);
            backdrop-filter:blur(12px);
            position:relative;
            z-index:8;
        }
        .cc-main {
            display:grid;
            grid-template-columns:auto minmax(180px,1fr) auto auto;
            gap:8px;
            align-items:center;
        }
        .cc-jump, .cc-mode, .cc-chip, .cp-close, .pin-tool {
            border:1px solid var(--w120);
            background:var(--w060);
            color:var(--text);
            border-radius:7px;
            min-height:36px;
            cursor:pointer;
            font-weight:800;
            transition:transform .14s ease, border-color .14s ease, background .14s ease;
        }
        .cc-jump, .cc-mode { padding:0 12px; }
        .cc-jump:hover, .cc-mode:hover, .cc-chip:hover, .cp-close:hover, .pin-tool:hover {
            transform:translateY(-1px);
            border-color:var(--accent);
            background:var(--accent-glow);
        }
        #commandSearch, #commandPaletteInput {
            width:100%;
            min-height:38px;
            border:1px solid var(--w120);
            border-radius:7px;
            background:var(--surface-1);
            color:var(--text-hi);
            padding:0 12px;
            font:inherit;
            outline:none;
        }
        #commandSearch:focus, #commandPaletteInput:focus {
            border-color:var(--accent);
            box-shadow:0 0 0 3px var(--accent-glow);
        }
        .cc-live {
            min-height:32px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 10px;
            border-radius:999px;
            font-size:11px;
            font-weight:900;
            text-transform:uppercase;
            letter-spacing:.08em;
            color:var(--text-dim);
            border:1px solid var(--w100);
            background:var(--w040);
            white-space:nowrap;
        }
        .cc-live[data-state="live"] {
            color:var(--green);
            border-color:var(--green);
            box-shadow:0 0 16px var(--green-glow);
        }
        .cc-live[data-state="pending"] {
            color:var(--orange);
            border-color:var(--orange);
        }
        .cc-lanes {
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:8px;
            margin-top:8px;
        }
        .cc-lane {
            min-width:0;
            display:flex;
            align-items:center;
            gap:7px;
            border:1px solid var(--w070);
            border-radius:7px;
            padding:7px;
            background:var(--w035);
        }
        .cc-label {
            color:var(--text-dim);
            font-size:10px;
            font-weight:900;
            letter-spacing:.08em;
            text-transform:uppercase;
            flex:0 0 auto;
        }
        .cc-chip-row {
            min-width:0;
            display:flex;
            gap:6px;
            overflow:auto;
            color:var(--text-dim);
            font-size:12px;
            scrollbar-width:none;
        }
        .cc-chip-row::-webkit-scrollbar { display:none; }
        .cc-chip {
            min-height:30px;
            padding:0 9px;
            flex:0 0 auto;
            max-width:190px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size:12px;
        }
        .cc-chip.muted { color:var(--text-dim); font-weight:700; }
        .command-palette {
            display:none;
            position:fixed;
            inset:0;
            z-index:10000;
            padding:7vh 18px 18px;
            background:var(--k700);
            backdrop-filter:blur(8px);
        }
        .command-palette.open { display:block; animation:fade-up .12s ease; }
        .command-palette-card {
            width:min(720px,100%);
            margin:0 auto;
            border:1px solid var(--w120);
            border-radius:8px;
            background:var(--surface-2);
            box-shadow:0 28px 80px var(--card-drop);
            padding:14px;
        }
        .cp-head {
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:14px;
            margin-bottom:12px;
        }
        .cp-eyebrow {
            color:var(--accent);
            font-size:10px;
            font-weight:900;
            letter-spacing:.14em;
            text-transform:uppercase;
        }
        .cp-head h2 {
            margin:2px 0 0;
            font-size:18px;
            color:var(--text-hi);
            letter-spacing:0;
        }
        .cp-close {
            width:38px;
            height:38px;
            font-size:20px;
            flex:0 0 auto;
        }
        .cp-results {
            display:grid;
            gap:7px;
            margin-top:10px;
            max-height:min(58vh,520px);
            overflow:auto;
        }
        .cmd-result {
            display:grid;
            grid-template-columns:86px minmax(120px,1fr);
            grid-template-areas:"kind title" "kind hint";
            gap:2px 10px;
            text-align:left;
            border:1px solid var(--w080);
            background:var(--w040);
            color:var(--text);
            border-radius:7px;
            padding:10px;
            cursor:pointer;
        }
        .cmd-result.active, .cmd-result:hover {
            border-color:var(--accent);
            background:var(--accent-glow);
        }
        .cmd-result.locked {
            opacity:.76;
        }
        .cmd-result.locked .cp-kind {
            color:var(--orange);
        }
        .cp-kind {
            grid-area:kind;
            color:var(--accent);
            font-size:10px;
            font-weight:900;
            text-transform:uppercase;
            letter-spacing:.08em;
            align-self:center;
        }
        .cp-title { grid-area:title; color:var(--text-hi); font-weight:900; }
        .cp-hint { grid-area:hint; color:var(--text-dim); font-size:12px; line-height:1.35; }
        .cp-empty {
            padding:18px;
            text-align:center;
            color:var(--text-dim);
            border:1px dashed var(--w120);
            border-radius:7px;
        }
        .pin-tool {
            position:absolute;
            top:8px;
            right:8px;
            width:34px;
            height:34px;
            min-height:34px;
            padding:0;
            z-index:2;
            font-size:17px;
            line-height:1;
        }
        .pin-tool.pinned {
            color:var(--accent);
            border-color:var(--accent);
            background:var(--accent-glow);
        }
        .tool-card.pinned-card {
            box-shadow:0 8px 24px var(--card-drop), 0 0 0 1px var(--accent-glow);
        }
        body.nod-cockpit #adRow,
        body.nod-cockpit #calmarToolDeck,
        body.nod-cockpit #minOpPanel,
        body.nod-cockpit #listenForStrip {
            display:none !important;
        }
        body.nod-cockpit .command-center {
            border-color:var(--accent);
            box-shadow:0 12px 34px var(--accent-glow);
        }
        @media (max-width:768px) {
            .command-center { margin-top:8px; padding:8px; }
            .cc-main { grid-template-columns:auto minmax(0,1fr) auto; }
            .cc-live { grid-column:1 / -1; justify-content:flex-start; }
            .cc-lanes { grid-template-columns:1fr; }
            .cc-lane { align-items:flex-start; flex-direction:column; }
            .command-palette { padding-top:5vh; }
            .cmd-result { grid-template-columns:1fr; grid-template-areas:"kind" "title" "hint"; }
        }

        /* ─── View container ─── */
        .view-container {
            width: 100%; max-width: 1100px;
            position: relative; z-index: 5;
            display: none; animation: fade-up 0.16s ease;
        }
        .view-container.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
        @keyframes fade-up { 0%{opacity:0;transform:translateY(6px)} 100%{opacity:1;transform:translateY(0)} }

        /* fast fade on view switch — fluid, no glide distance */
        .view-container.active { animation: view-glide .14s ease-out both; }
        @keyframes view-glide {
            0% { opacity: 0; transform: translateX(8px); }
            100% { opacity: 1; transform: translateX(0); }
        }
        @media (max-width:768px) {
            .view-container.active { animation: view-glide .1s ease-out both !important; }
        }

        /* ─── 90's Mode Effects ─── */

        .table-surface[data-feel="arcade"]::after {
            content:''; position:absolute; inset:0; pointer-events:none;
            background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
            mix-blend-mode: multiply; z-index: 2;
        }
        .table-surface[data-feel="arcade"] { animation: crtFlicker 0.15s infinite; }
        @keyframes crtFlicker { 50%{background:radial-gradient(ellipse at center,#1f5f3c 0%,#14452c 100%)} }

        .mode-wrap { width: 100%; max-width: 1100px; padding: 10px 0; }
        .mode-header { text-align:center; margin-bottom: 22px; }
        .mode-header h2 {
            font-family: 'Press Start 2P', monospace; color: var(--text-hi);
            font-size: 22px; letter-spacing: 2px;
            text-shadow: 3px 3px 0 #000, 0 0 20px currentColor;
            margin-bottom: 10px;
        }
        .mode-header p { color: var(--w600); font-size: 13px; max-width: 640px; margin: 0 auto; }

        /* ═══ PS2-ERA GRAPHICS (Vercel-optimized) ═══
           Hub bg: subtle dark-navy 3D gradient behind table-surface.
           Mode header: PS2 game UI banner strip.
           Wheel frame: beveled rivet ring overlay on emotion wheel.
           Images served via Vercel image optimization (vercel.json).

           The art is a LAYER over the token felt, never a replacement. A bare
           `background-image` here would drop the --felt gradient entirely and
           paint both themes dark navy, and a blend mode with nothing beneath
           it is a no-op — that combination shipped once and flattened the Sand
           theme. Keep the gradient as the bottom layer so the blend has a
           surface to work against and each theme keeps its own base. */
        .table-surface {
            background-image: url('assets/hub-bg-ps2.webp'),
                              radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
            background-size: cover, cover;
            background-position: center, center;
            background-repeat: no-repeat, no-repeat;
            background-blend-mode: overlay;
        }
        :root:not([data-theme="dark"]) .table-surface {
            /* Sand is a light canvas: soft-light textures it instead of drowning it. */
            background-blend-mode: soft-light;
        }
        .mode-header {
            background-image: url('assets/mode-header-ps2.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: var(--w080);
            background-blend-mode: overlay;
            border-radius: 12px;
            padding: 16px 20px;
            border: 1px solid var(--w150);
            box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 var(--w200);
        }
        :root:not([data-theme="dark"]) .mode-header {
            background-blend-mode: soft-light;
        }
        .zen-wheel-canvas::before {
            content: '';
            position: absolute;
            top: -8%; left: -8%; width: 116%; height: 116%;
            background: url('assets/wheel-frame-ps2.webp') center/cover;
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
            border-radius: 50%;
        }
        .zen-wheel-canvas svg { position: relative; z-index: 1; }
        .mode-grid {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
            perspective: 1200px;
        }
        .mode-card {
            background: var(--card-bg); border-radius: 14px;
            padding: 18px 16px; position: relative; overflow: hidden;
            box-shadow: 0 4px 14px var(--card-shadow);
            cursor: pointer; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
            border-top: 4px solid var(--accent);
            opacity: 1;
            animation: card-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        .mode-card:hover {
            transform: translateY(-6px) scale(1.04);
            box-shadow: 0 12px 30px var(--card-shadow), 0 0 20px var(--accent-glow);
        }
        .mode-card .mc-tag {
            font-size: 9px; padding: 2px 8px; border-radius: 10px;
            background: var(--k080); font-weight: 700;
            letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-bottom: 8px;
        }
        .mode-card .mc-name { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
        .mode-card .mc-desc { font-size: 12px; color: var(--text-dim); line-height: 1.55; }
        .mode-card .mc-hint { font-size: 10px; margin-top: 10px; color: var(--accent); font-weight: 600; font-style: italic; }

        .table-surface[data-feel="haggle"] { background: radial-gradient(ellipse at center, #4a1d3a 0%, #1a0a1a 100%); }
        .table-surface[data-feel="haggle"] .mode-header h2 { color: #ff5ea8; text-shadow: 3px 3px 0 #000, 0 0 25px #ff5ea8; }
        .table-surface[data-feel="haggle"] .mode-card { border-top-color: #ff5ea8; }

        .table-surface[data-feel="friend"] { background: radial-gradient(ellipse at center, #2a5a3a 0%, #14352a 100%); }
        .table-surface[data-feel="friend"] .mode-header h2 { color: #ffd93d; text-shadow: 3px 3px 0 #000, 0 0 25px #ffd93d; }
        .table-surface[data-feel="friend"] .mode-card { border-top-color: #66bb6a; }

        .table-surface[data-feel="boss"] { background: radial-gradient(ellipse at center, #3a1a1a 0%, #0a0505 100%); }
        .table-surface[data-feel="boss"] .mode-header h2 { color: #ff3b3b; text-shadow: 3px 3px 0 #000, 0 0 30px #ff3b3b; }
        .table-surface[data-feel="boss"] .mode-card { border-top-color: #d4a853; }
        .table-surface[data-feel="mediator"] .mode-card { border-top-color: #64b5f6; }
        .table-surface[data-feel="mediator"] { background: radial-gradient(ellipse at center, #0d1f2d 0%, #040a0f 100%); }
        .table-surface[data-feel="mediator"] .mode-header h2 { color: #64b5f6; text-shadow: 3px 3px 0 #000, 0 0 30px #64b5f6; }

        .mode-toolbar { display: flex; gap: 8px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
        .mode-toolbar .btn {
            padding: 8px 18px; border-radius: 10px; border: 1px solid var(--w200);
            font-family: 'Press Start 2P', monospace; font-size: 10px; cursor: pointer;
            background: var(--k400); color: var(--text-hi); transition: all 0.2s;
        }
        .mode-toolbar .btn:hover { transform: translateY(-2px); background: var(--accent); color: var(--on-accent); }

        .mode-scenario {
            margin: 14px auto; max-width: 780px; padding: 20px 24px;
            background: var(--k500); border-radius: 14px;
            border: 1px solid var(--w120); color: var(--text-hi);
            display: none; text-align: left;
        }
        .mode-scenario.open { display: block; animation: fade-up 0.3s ease; }
        .mode-scenario .ms-badge {
            display: inline-block; padding: 3px 10px; border-radius: 6px;
            font-size: 10px; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; margin-bottom: 8px;
        }
        .mode-scenario .ms-title {
            font-size: 20px; font-weight: 800; margin-bottom: 2px;
            color: var(--text-hi);
        }
        .mode-scenario .ms-tagline {
            font-size: 12px; color: var(--w450); margin-bottom: 10px;
        }
        .mode-scenario .ms-section-label {
            font-size: 10px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; color: var(--accent); margin: 12px 0 4px;
            display: flex; align-items: center; gap: 6px;
        }
        .mode-scenario .ms-section-label::after {
            content: ''; flex: 1; height: 1px; background: rgba(212,168,83,0.2);
        }
        .mode-scenario .ms-approach {
            font-size: 13px; line-height: 1.6; color: var(--w750);
            padding: 10px 14px; background: var(--w040);
            border-radius: 8px; border-left: 3px solid var(--accent);
        }
        .mode-scenario .ms-script {
            font-size: 14px; line-height: 1.7; color: var(--text-hi);
            padding: 12px 16px; background: var(--k300);
            border-radius: 8px; margin: 4px 0 8px;
        }
        .mode-scenario .ms-script .say {
            color: var(--accent); font-weight: 600;
        }
        .mode-scenario .ms-close {
            margin-top: 14px; padding: 8px 20px; border: none;
            border-radius: 8px; background: var(--w080);
            color: var(--w500); font-size: 12px; font-weight: 600;
            cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s;
        }
        .mode-scenario .ms-close:hover { background: var(--w150); color: var(--text-hi); }
        .mode-scenario .ms-tools { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; }
        .mode-scenario .ms-tool {
            padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 600;
            background: var(--w060); color: var(--accent);
            border: 1px solid rgba(212,168,83,0.25); cursor: default;
        }

        /* ponytail: focus-mode rules removed (309-325). focus-mode was only ever set on the wheel SVG, not on body. */

        /* ponytail: zen panel — 3 timeline cards, replace tool cards in focus mode */
        /* ponytail: 3-card layout is the new default for Tools view —
           order: cards → listen-for cues → label maker → wheel → ad.
           #view-tools is a flex row-less column and every child's position comes from
           `order` here, NOT from its place in the markup: a new child without an order
           defaults to 0 and jumps to the top of the view. */
        #view-tools.active .label-maker,
        #view-tools.active .zen-wheel { display: block; }
        #view-tools.active .zen-wheel { margin: 6px auto 14px; }
        #view-tools.active #currentBanner { order: 1; }
        #view-tools.active #cardsArea { order: 2; }
        #view-tools.active #listenForStrip { order: 3; }
        #view-tools.active #minOpPanel { order: 4; }
        #view-tools.active .label-maker { order: 5; }
        #view-tools.active .zen-wheel { order: 6; }
        #view-tools.active .ad-row { order: 7; }
        #view-tools.active #sessionPanel { order: 8; }
        /* Cards area is the layout focus — center it, generous top space */
        #view-tools.active #cardsArea { margin-top: 6px; }

        .zen-panel { display: none; width:100%; max-width:800px; margin:12px auto; padding:0 4px; }
        .focus-mode .zen-panel { display: flex; flex-direction: column; gap:10px; }
        .zen-card {
            background:var(--w040); border-radius:14px; padding:18px 20px;
            border:1px solid var(--w080); transition:all .25s;
            cursor:default; position:relative; overflow:hidden;
            animation: zen-slide-up 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
            opacity: 0;
        }
        .zen-card.past { animation-delay: 0s; }
        .zen-card.present { animation-delay: 0.12s; }
        .zen-card.upcoming { animation-delay: 0.24s; }
        @keyframes zen-slide-up {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .zen-card::before {
            content:''; position:absolute; top:0; left:0; width:4px; height:100%;
        }
        .zen-card.past::before { background:rgba(200,200,200,0.5); }
        .zen-card.present::before { background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
        .zen-card.upcoming::before { background:rgba(100,150,255,0.6); }
        .zen-card:hover { background:var(--w070); transform:translateX(4px); }
        .zen-card .zc-time { font-size:10px; text-transform:uppercase; letter-spacing:2px; font-weight:700; margin-bottom:4px; }
        .zen-card.past .zc-time { color:var(--w300); }
        .zen-card.present .zc-time { color:var(--accent); }
        .zen-card.upcoming .zc-time { color:rgba(100,150,255,0.7); }
        .zen-card .zc-title { font-size:18px; font-weight:700; color: var(--text-hi); margin-bottom:6px; }
        .zen-card .zc-desc { font-size:13px; color:var(--w500); line-height:1.5; }
        @media (prefers-reduced-motion: reduce) {
            .zen-card { animation: none; opacity: 1; transform: none; }
        }

        /* ponytail: zen-active class is dead (Basic mode uses a state flag, not a body class). The 22 rules that referenced it were removed. The emotion wheel + BK panel both render via JS into their own containers. */
        .zen-wheel { display:none; width:100%; max-width:340px; margin:18px auto 18px; text-align:center; padding:8px 0; border-top:1px solid var(--w060); border-bottom:1px solid var(--w060); overflow-x:hidden; }
        .zen-wheel-title { font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:700; color: var(--text-hi); margin-bottom:8px; }
        .zen-wheel-canvas { position: relative; overflow:hidden; }
        .zen-wheel-canvas svg { width:100%; height:auto; max-width:300px; }
        .wheel-canvas-wrap { position: relative; }
        /* Zen mini-wheel wedge zoom (tap a wedge, like the main wheel's focus behavior) */
        .mini-wedge { transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, filter .2s ease; transform-origin: 150px 150px; cursor:pointer; }
        .mini-wedge:hover { filter: brightness(1.35) drop-shadow(0 0 6px var(--w250)); }
        .wheel-wedge { cursor: pointer; }
        .wheel-wedge .wheel-emotion-slice { transition: opacity .3s ease; }
        .wheel-wedge:hover .wheel-emotion-slice { opacity: 1 !important; }
        #zenMiniGroup.zoomed .mini-wedge:not(.active-wedge) { opacity: 0.25; }
        .mini-wedge.active-wedge { transform: scale(1.18); filter: drop-shadow(0 0 10px var(--w400)); }
        .zen-wheel-detail { display:none; margin-top:12px; padding:14px 16px; background:var(--w060); border-radius:14px; border:1px solid var(--w100); text-align:left; animation: card-pop .35s cubic-bezier(.34,1.56,.64,1) both; }
        .zen-wheel-detail.open { display:block; }
        .zen-wheel-detail .ed-name { font-size:16px; font-weight:800; margin-bottom:6px; color: var(--text-hi); }
        .zen-wheel-detail .ed-intensities { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
        .zen-wheel-detail .ed-int { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; color:#0d0d1a; }
        .zen-wheel-detail .ed-combos { font-size:12px; color:var(--w700); line-height:1.6; }
        .zen-wheel-detail .ed-sec strong { color:#1a2e1a; }
        /* ponytail: tap-hint — subtle pulse, hides once any wedge is zoomed */
        .zen-tap-hint { display:inline-block; margin-left:8px; font-size:11px; font-weight:700; color:#1a2e1a; opacity:.7; letter-spacing:.5px; animation: zen-tap-pulse 1.6s ease-in-out infinite; }
        .rail-timer { display:none; } /* ponytail: desktop rail only — shown ≥1024px */
        #zenMiniGroup.zoomed ~ * .zen-tap-hint, .zen-wheel:has(#zenMiniGroup.zoomed) .zen-tap-hint { display:none; }
        @keyframes zen-tap-pulse { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.85;transform:scale(1.04)} }

        /* ─── Cards (Tools view) ─── */
        .cards-area {
            width: 100%;
            display: flex; flex-wrap: wrap; gap: 14px;
            justify-content: center; align-items: flex-start; align-content: flex-start;
            perspective: 1200px;
            padding: 6px 0;
        }
        /* ponytail: hide empty cards-area — kills the visible gap when the deck is empty */
        .cards-area:empty { display: none; }
        /* ponytail: Apple Wallet card style — depth, radius, clean lift */
        .tool-card {
            width: 195px; min-height: 180px;
            background: linear-gradient(145deg, var(--card-face-1) 0%, var(--card-face-2) 100%);
            border-radius: 14px;
            padding: 16px 14px 12px;
            box-shadow: 0 6px 16px var(--card-drop), 0 0 0 1px var(--w060), inset 0 1px 0 var(--w080);
            cursor: pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
            position: relative; display: flex; flex-direction: column;
            animation: card-deal .42s cubic-bezier(.34,1.56,.64,1) both;
            transform-style: preserve-3d; user-select: none;
            border: 1px solid var(--w040);
        }
        .tool-card:nth-child(1) { animation-delay: 0.02s; }
        .tool-card:nth-child(2) { animation-delay: 0.06s; }
        .tool-card:nth-child(3) { animation-delay: 0.10s; }
        .tool-card:nth-child(4) { animation-delay: 0.14s; }
        .tool-card:nth-child(5) { animation-delay: 0.18s; }
        .tool-card:nth-child(6) { animation-delay: 0.22s; }
        .tool-card:nth-child(7) { animation-delay: 0.26s; }
        .tool-card:nth-child(8) { animation-delay: 0.30s; }
        .tool-card:nth-child(9) { animation-delay: 0.34s; }
        .tool-card:nth-child(10) { animation-delay: 0.38s; }
        .tool-card:nth-child(11) { animation-delay: 0.42s; }
        .tool-card:nth-child(12) { animation-delay: 0.46s; }
        .tool-card:nth-child(13) { animation-delay: 0.50s; }
        .tool-card:nth-child(14) { animation-delay: 0.54s; }
        .tool-card:nth-child(15) { animation-delay: 0.58s; }
        .tool-card:nth-child(16) { animation-delay: 0.62s; }
        .tool-card:nth-child(17) { animation-delay: 0.66s; }
        .tool-card:nth-child(18) { animation-delay: 0.70s; }
        .tool-card:nth-child(19) { animation-delay: 0.74s; }
        .tool-card:nth-child(20) { animation-delay: 0.78s; }
        .tool-card:nth-child(21) { animation-delay: 0.82s; }
        .tool-card:nth-child(22) { animation-delay: 0.86s; }
        .tool-card:nth-child(23) { animation-delay: 0.90s; }
        .tool-card:nth-child(24) { animation-delay: 0.94s; }
        .tool-card:nth-child(25) { animation-delay: 0.98s; }
        .tool-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 28px var(--card-shadow), 0 0 0 1px var(--accent-glow);
            z-index: 20;
        }
        .tool-card.active-card {
            transform: translateY(-6px);
            box-shadow: 0 18px 36px var(--card-shadow), 0 0 0 1px var(--accent);
            z-index: 30;
        }

        /* ponytail: drawn card pops AND glows for 1s so the user knows a new card arrived */
        .tool-card.just-drawn {
            animation: card-draw-glow .7s ease-out both;
            z-index: 20;
        }
        @keyframes card-draw {
            0% { opacity:0; transform: translateY(-14px) scale(.97); }
            100% { opacity:1; transform: translateY(0) scale(1); }
        }
        @keyframes card-draw-glow {
            0%   { opacity:0; transform: translateY(-12px) scale(.98); box-shadow: 0 0 0 0 var(--accent-glow); }
            35%  { opacity:1; transform: translateY(0) scale(1); box-shadow: 0 0 20px 2px var(--accent-glow); }
            100% { box-shadow: 0 0 0 0 var(--accent-glow); }
        }
        .tool-card.used {
            opacity: 0.45; filter: grayscale(0.6);
            transform: scale(0.92); pointer-events: none;
        }
        .tool-card.used:hover { transform: scale(0.92); box-shadow: 0 4px 12px var(--card-shadow); }
        .tool-card.skipped {
            opacity: 0.55; filter: grayscale(0.4);
            border-left: 3px solid var(--orange) !important;
            overflow: hidden;
        }
        .tool-card.current-focus {
            box-shadow: 0 0 0 1px var(--accent), 0 10px 24px var(--card-shadow);
            transform: translateY(-2px);
            z-index: 15;
        }
        @keyframes card-deal {
            0% { opacity:0; transform:translateY(-18px) scale(0.9); }
            100% { opacity:1; transform:translateY(0) scale(1); }
        }
        @keyframes card-pop {
            0% { transform:scale(0.92) translateY(6px); }
            100% { transform:scale(1) translateY(0); }
        }
        .tool-card .cat-badge {
            font-size: 9px; padding: 2px 7px; border-radius: 10px;
            background: var(--k200); color: var(--text-dim);
            display: inline-block; margin-bottom: 5px;
            font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
        }
        .tool-card .card-name { font-size: 17px; font-weight: 700; color: var(--card-title); margin-bottom: 5px; line-height: 1.3; text-shadow: var(--card-shadow-txt); }
        .tool-card .card-desc { font-size: 13px; line-height: 1.55; color: var(--card-body); flex: 1; text-shadow: var(--card-shadow-txt); }
        .tool-card .card-count {
            font-size: 10px; color: var(--text-dim); margin-top: 6px;
            display: flex; align-items: center; gap: 3px;
        }
        .tool-card .card-count .num { font-weight: 700; color: var(--accent); font-size: 13px; }
        /* ponytail: small "more" button in bottom-right of each card (data already in BK_TOOLS) */
        .tool-card .card-more {
            position: absolute; bottom: 6px; right: 8px;
            width: 44px; height: 44px; border-radius: 50%;
            background: var(--w060); border: 1px solid var(--w120);
            color: var(--w550); font-size: 14px; font-weight: 700; line-height: 1;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all .2s ease; padding: 0; letter-spacing: 1px;
        }
        .tool-card .card-more:hover { background: rgba(212,168,83,0.18); color: #d4a853; border-color: rgba(212,168,83,0.4); }
        .tool-card .card-more:active { transform: scale(0.92); }
        /* ponytail: bottom-sheet modal — slides up from the bottom, mobile-native */
        .tool-sheet-backdrop { position: fixed; inset: 0; background: var(--k550); z-index: 9000; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
        .tool-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
        .tool-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: var(--surface-1); border-top: 2px solid var(--accent-glow); border-radius: 18px 18px 0 0; padding: 18px 18px 28px; z-index: 9001; transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -8px 30px var(--card-shadow); }
        .tool-sheet.open { transform: translateY(0); }
        .tool-sheet .ts-handle { width: 40px; height: 4px; background: var(--w200); border-radius: 2px; margin: 0 auto 14px; }
        .tool-sheet .ts-cat { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
        .tool-sheet .ts-name { font-size: 22px; font-weight: 800; color: var(--text-hi); margin-bottom: 4px; }
        .tool-sheet .ts-why { font-size: 13px; color: var(--w700); line-height: 1.5; margin-bottom: 16px; font-style: italic; }
        .tool-sheet .ts-section { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: rgba(212,168,83,0.8); margin: 14px 0 8px; }
        .tool-sheet .ts-list { list-style: none; padding: 0; margin: 0; }
        .tool-sheet .ts-list li { font-size: 13px; color: var(--w850); padding: 8px 12px; margin-bottom: 6px; background: var(--w040); border-left: 2px solid rgba(212,168,83,0.4); border-radius: 6px; line-height: 1.45; }
        .tool-sheet .ts-mistakes li { border-left-color: rgba(229,115,115,0.5); background: rgba(229,115,115,0.06); }
        .tool-sheet .ts-reminder { font-size: 13px; color: #d4a853; padding: 10px 14px; background: rgba(212,168,83,0.08); border-radius: 8px; border: 1px solid rgba(212,168,83,0.25); margin-top: 14px; line-height: 1.5; font-weight: 600; }

        /* Tonality warning banner — practice takeaway: delivery IS the tool */
        .tool-sheet .ts-tonality {
            display: flex; gap: 10px; align-items: flex-start;
            padding: 12px 14px; margin: 0 0 14px 0;
            background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,59,59,0.08));
            border: 1px solid rgba(255,107,53,0.35);
            border-left: 4px solid #ff6b35;
            border-radius: 10px;
            animation: ts-tonality-pulse 2.5s ease-in-out infinite;
        }
        @keyframes ts-tonality-pulse {
            0%,100% { box-shadow: 0 0 8px rgba(255,107,53,0.15); }
            50% { box-shadow: 0 0 18px rgba(255,107,53,0.35); }
        }
        .tool-sheet .ts-tonality-icon { font-size: 20px; flex-shrink: 0; line-height: 1.3; }
        .tool-sheet .ts-tonality-body { flex: 1; }
        .tool-sheet .ts-tonality-label {
            font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
            color: #ff6b35; margin-bottom: 4px;
        }
        :root:not([data-theme="dark"]) .tool-sheet .ts-tonality-label { color: #C2410C; }
        .tool-sheet .ts-tonality-text {
            font-size: 12px; color: var(--w850); line-height: 1.55;
        }
        :root:not([data-theme="dark"]) .tool-sheet .ts-tonality-text { color: #5C5347; }

        /* Label card tonality micro-callout (advanced labels only) */
        .label-maker .lm-tonality {
            font-size: 10px; color: #ff6b35; padding: 6px 10px; margin-top: 6px;
            background: rgba(255,107,53,0.06); border-radius: 6px;
            border-left: 2px solid rgba(255,107,53,0.3);
            line-height: 1.4;
        }
        :root:not([data-theme="dark"]) .label-maker .lm-tonality {
            color: #C2410C; background: rgba(194,65,12,0.05);
        }
        .label-maker .lm-tonality em { font-style: italic; font-weight: 600; }
        .tool-sheet .ts-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--w080); border: none; color: var(--text-hi); font-size: 18px; cursor: pointer; }
        .tool-card .card-check {
            position: absolute; top: -6px; right: -6px;
            width: 22px; height: 22px; border-radius: 50%;
            background: var(--green); color: var(--text-hi); display: none;
            align-items: center; justify-content: center;
            font-size: 11px; box-shadow: 0 2px 8px rgba(67,160,71,0.4);
        }
        .tool-card.used .card-check { display: flex; }

        /* ─── Toolbar ─── */
        .toolbar {
            width: 100%; max-width: 1100px;
            display: flex; gap: 10px; flex-wrap: wrap;
            align-items: center; padding: 4px 0 10px;
            position: relative; z-index: 10;
        }
        .toolbar .btn {
            padding: 8px 18px; border-radius: 10px; border: none;
            font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
            cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;
        }
        .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 15px var(--accent-glow); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px var(--accent-glow); }
        .btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
        .btn-ghost { background: var(--w080); color: var(--text-hi); border:1px solid var(--w150); backdrop-filter:blur(8px); }
        .btn-ghost:hover { background: var(--w180); transform:translateY(-1px); }
        .btn-sm { padding:5px 12px; font-size:11px; border-radius:8px; }
        .timer-display {
            display:flex; align-items:center; gap:12px; margin-left:auto;
            background:var(--k400); padding:8px 18px 8px 14px;
            border-radius:12px; border:1px solid var(--w120);
        }
        .timer-display .time {
            font-size:34px; font-weight:800; color: var(--text-hi);
            font-variant-numeric:tabular-nums; min-width:90px; text-align:center;
            letter-spacing:1px; line-height:1;
        }
        .timer-display .time.danger { color: var(--red); animation: pulse-danger 1s infinite; }
        .timer-display .timer-label { color:var(--w500); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
        .timer-display .timer-sub { color:var(--w200); font-size:9px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; text-align:center; margin-top:-2px; }
        .timer-display input[type="number"] {
            width:42px; padding:3px 6px; border-radius:6px;
            border:1px solid var(--w150); background:var(--k300);
            color: var(--text-hi); font-size:13px; font-family:'Inter',sans-serif; text-align:center;
        }
        .timer-display input[type="number"]:disabled {
            opacity: 0.5;
        }
        /* M5.2: fluid animated slider — adjustable anytime, desktop + mobile, iOS-optimized */
        .timer-display input[type="range"] {
            flex:1; min-width:100px; max-width:200px; height:8px; border-radius:4px;
            background:var(--w120); -webkit-appearance:none; appearance:none;
            cursor:pointer; touch-action:manipulation; margin:0;
            transition:height .2s ease, box-shadow .2s ease;
            /* iOS: momentum scrolling gesture support */
            -webkit-user-select:none; user-select:none;
        }
        .timer-display input[type="range"]:hover {
            height:10px; box-shadow:0 0 12px rgba(124,108,248,0.25);
        }
        .timer-display input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
            background:linear-gradient(135deg,#c8922a,#f0c060);
            border:2px solid var(--w300); cursor:pointer;
            box-shadow:0 0 12px rgba(212,168,83,0.5), 0 2px 6px rgba(0,0,0,0.3);
            transition:transform .15s ease, box-shadow .2s ease;
            /* iOS: larger touch target */
            min-width:44px; min-height:44px;
        }
        .timer-display input[type="range"]::-webkit-slider-thumb:hover {
            transform:scale(1.2); box-shadow:0 0 20px rgba(212,168,83,0.7);
        }
        .timer-display input[type="range"]::-webkit-slider-thumb:active {
            transform:scale(1.3);
        }
        .timer-display input[type="range"]::-moz-range-thumb {
            width:28px; height:28px; border-radius:50%;
            background:linear-gradient(135deg,#c8922a,#f0c060);
            border:2px solid var(--w300); cursor:pointer;
            box-shadow:0 0 12px rgba(212,168,83,0.5);
            transition:transform .15s ease;
        }
        .timer-display input[type="range"]::-moz-range-thumb:hover {
            transform:scale(1.2);
        }
        .timer-display input[type="range"]:disabled {
            opacity:0.45; cursor:not-allowed;
        }

        /* Gamified timer ring — milestones via SVG defs (see inline SVG in MixMatch.html).
           Ring expanded to 96px for iOS/MacBook touch; milestone marks at 25%, 50%, 100%. */
        .timer-ring {
            width:96px; height:96px; transform:rotate(-90deg); flex-shrink:0;
            cursor:pointer; touch-action:manipulation;
            transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
            filter:drop-shadow(0 0 8px var(--accent-glow));
            /* Glassmorphic on modern devices */
            -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
        }
        .timer-ring:hover {
            transform:rotate(-90deg) scale(1.08);
            filter:drop-shadow(0 0 20px var(--accent-glow));
        }
        .timer-ring:active {
            transform:rotate(-90deg) scale(0.94);
        }
        /* Milestone marks (hidden by default, revealed via JS on init) */
        .timer-ring .milestone { fill:none; stroke-width:3; opacity:0.4; stroke-linecap:round; }
        .timer-ring .milestone.critical { stroke:var(--red); }
        .timer-ring .milestone.warning { stroke:var(--orange); }
        .timer-ring .milestone.safe { stroke:var(--green); }
        .timer-ring .ring-bg { fill:none; stroke:var(--w080); stroke-width:5; }
        .timer-ring .ring-fg { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;
            stroke-dasharray:301.6; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear, stroke .3s ease; }
        .timer-ring.low .ring-fg { stroke:var(--red); }
        .timer-ring.warning .ring-fg { stroke:var(--orange); }
        /* Running = purple glow pulse; Paused = dimmed; Idle = gold */
        .timer-ring.running { animation: timer-ring-pulse 2s ease-in-out infinite; }
        .timer-ring.paused { filter:drop-shadow(0 0 4px var(--w150)); opacity:0.6; }
        .timer-ring.idle .ring-fg { stroke:#c8922a; }
        /* Pulse varies the blur radius, not the colour: --accent-glow carries its own
           per-theme alpha, so the glow stays terracotta on Sand and purple on dark. */
        @keyframes timer-ring-pulse {
            0%, 100% { filter:drop-shadow(0 0 8px var(--accent-glow)); }
            50% { filter:drop-shadow(0 0 22px var(--accent-glow)); }
        }
        @media (prefers-reduced-motion: reduce) {
            .timer-ring { animation:none; transition:none; }
            .timer-ring:hover { transform:rotate(-90deg) scale(1); filter:drop-shadow(0 0 8px var(--accent-glow)); }
        }
        .stats-bar {
            width:100%; max-width:1100px;
            display:flex; gap:16px; padding:4px 0;
            flex-wrap:wrap; position:relative; z-index:10;
        }
        .stat-item { color:var(--w450); font-size:11px; display:flex; align-items:center; gap:3px; }
        .stat-item strong { color: var(--text-hi); font-size:13px; }

        /* ponytail: Domino's-style staircase progress bar — 4 segments, red = reached */
        .stair-progress {
            width:100%; max-width:1100px; display:flex; gap:0; margin:8px 0 6px;
            position:relative; z-index:10;
        }
        .stair-progress .seg {
            flex:1; height:40px; border-radius:0;
            border:1px solid var(--w150); border-right:none;
            background:var(--surface-2);
            display:flex; align-items:center; justify-content:center; gap:5px;
            font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
            color:var(--text); transition:all .5s ease;
            overflow:hidden; white-space:nowrap; position:relative;
            cursor:pointer; touch-action:manipulation;
        }
        .stair-progress .seg:first-child { border-radius:10px 0 0 10px; border-left:1px solid var(--w150); }
        .stair-progress .seg:last-child { border-radius:0 10px 10px 0; border-right:1px solid var(--w150); }
        .stair-progress .seg:active { transform:scale(0.97); }
        .stair-progress .seg .seg-count {
            position:absolute; top:3px; right:6px; font-size:9px; font-weight:700; opacity:.6;
        }
        .stair-progress .seg.done .seg-count,
        .stair-progress .seg.current .seg-count { color:var(--text-hi); }
        .stair-progress .seg .seg-icon { font-size:16px; opacity:0.5; }
        .stair-progress .seg.lit .seg-icon,
        .stair-progress .seg.current .seg-icon { opacity:1; }
        /* ponytail: modern skin — deep blue flame with silver corners (was red/orange casino fire) */
        .stair-progress .seg.done {
            background:linear-gradient(90deg,#7f9cf5,#3b5bdb,#1e3a8a,#12275f,#1e3a8a,#3b5bdb,#7f9cf5);
            background-size:200% 100%;
            animation:flame-sweep 1.8s linear infinite;
            border-color:#3b5bdb; color: var(--text-hi);
            box-shadow:0 0 8px rgba(59,91,219,0.35);
        }
        .stair-progress .seg.current {
            background:linear-gradient(90deg,#e6ecff,#8fa6f5,#3b5bdb,#1e40af,#3b5bdb,#8fa6f5,#e6ecff);
            background-size:200% 100%;
            animation:flame-sweep-current 1.2s linear infinite, stair-pulse 1.4s ease-in-out infinite;
            border-color:#c0c8dc; color: var(--text-hi);
            box-shadow:0 0 20px rgba(59,91,219,0.7), inset 0 0 0 1px rgba(192,200,220,0.35);
        }
        @keyframes flame-sweep {
            0%{background-position:200% 0;}
            100%{background-position:0 0;}
        }
        @keyframes flame-sweep-current {
            0%{background-position:200% 0;}
            100%{background-position:0 0;}
        }
        @keyframes stair-pulse {
            0%,100%{box-shadow:0 0 14px rgba(59,91,219,0.5), inset 0 0 0 1px rgba(192,200,220,0.25); transform:scale(1);}
            50%{box-shadow:0 0 28px rgba(59,91,219,0.9), inset 0 0 0 1px rgba(192,200,220,0.5); transform:scale(1.02);}
        }
        .stair-progress .seg.lit { /* fallback for old segments */ }
        .stair-progress .seg.activate {
            animation: seg-bounce .6s cubic-bezier(.34,1.56,.64,1);
        }
        @keyframes seg-bounce {
            0%{transform:scale(.92);}
            40%{transform:scale(1.1);}
            100%{transform:scale(1);}
        }
        @media(max-width:768px){
            .header, .nav-tabs, .view-container, .toolbar, .stats-bar,
            .stair-progress, .session-panel,
            .current-tool-banner, .bk-panel, .mode-wrap {
                max-width: 100% !important;
            }
            .nav-tabs { flex-wrap: wrap; gap: 3px; }
            .nav-tab { padding: 6px 10px; font-size: 12px; }
            .header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
            .toolbar { flex-wrap: wrap; gap: 6px; }
            .stats-bar { flex-wrap: wrap; gap: 4px; }
        }
        @media(max-width:600px){
            .stair-progress .seg { height:32px; font-size:8px; border-radius:0; }
            .stair-progress .seg .seg-icon { font-size:12px; }
            .stair-progress .seg .seg-count { display:none; }
        }

        /* ═══ QLA "Your First $200M" — Dan Peña + Dan Lok tab ═══
           Theme-aware: uses --accent, --surface-N, --text, --wNNN/--kNNN tokens
           so it renders correctly in Light (Sand+Sage) and Dark (indigo) modes. */
        .qla-title {
            color:var(--accent);
            text-shadow:2px 2px 0 var(--k400), 0 0 30px var(--accent-glow);
        }
        .qla-accent-text { color:var(--accent); }
        .qla-panel {
            background:var(--surface-1);
            padding:24px 20px;
            border:1px solid var(--w100);
            border-radius:14px;
        }
        .qla-section-intro { text-align:center; margin-bottom:16px; }
        .qla-section-label {
            font-size:13px; letter-spacing:2px; text-transform:uppercase;
            color:var(--accent); font-weight:800;
        }
        .qla-section-sub {
            font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.5;
        }

        /* Five Credos strip */
        .qla-credos-grid {
            display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:18px;
        }
        .qla-credo {
            background:var(--w040);
            border:1px solid var(--w100);
            border-radius:8px; padding:10px 6px; text-align:center;
        }
        .qla-credo-num { font-size:18px; margin-bottom:4px; color:var(--accent); }
        .qla-credo-text { font-size:9px; color:var(--text-dim); line-height:1.4; }

        /* 11-Step progress bar — theme-aware accent flame */
        .qla-stair {
            width:100%; display:flex; gap:0; margin:8px 0 6px;
            position:relative; z-index:10;
        }
        .qla-stair .seg {
            flex:1; height:40px; border-radius:0;
            border:1px solid var(--w150); border-right:none;
            background:var(--surface-2);
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
            font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
            color:var(--text); transition:all .5s ease;
            overflow:hidden; white-space:nowrap; position:relative;
            cursor:pointer; touch-action:manipulation; padding:2px 1px;
        }
        .qla-stair .seg:first-child { border-radius:10px 0 0 10px; border-left:1px solid var(--w150); }
        .qla-stair .seg:last-child { border-radius:0 10px 10px 0; border-right:1px solid var(--w150); }
        .qla-stair .seg:active { transform:scale(0.97); }
        .qla-stair .seg .seg-label { font-size:8px; line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
        .qla-stair .seg .seg-count {
            position:absolute; top:2px; right:4px; font-size:8px; font-weight:700; opacity:.5;
        }
        .qla-stair .seg.done .seg-count,
        .qla-stair .seg.current .seg-count { opacity:.8; }
        .qla-stair .seg .seg-icon { font-size:14px; opacity:0.5; }
        .qla-stair .seg.lit .seg-icon,
        .qla-stair .seg.current .seg-icon { opacity:1; }
        .qla-stair .seg.done {
            background:linear-gradient(90deg, var(--accent-glow), var(--accent), var(--accent), var(--accent), var(--accent-glow));
            background-size:200% 100%;
            animation:qla-flame-sweep 1.8s linear infinite;
            border-color:var(--accent); color:var(--on-accent);
            box-shadow:0 0 8px var(--accent-glow);
        }
        .qla-stair .seg.current {
            background:linear-gradient(90deg, var(--surface-2), var(--accent-glow), var(--accent), var(--accent-glow), var(--surface-2));
            background-size:200% 100%;
            animation:qla-flame-sweep-current 1.2s linear infinite, qla-pulse 1.4s ease-in-out infinite;
            border-color:var(--accent); color:var(--on-accent);
            box-shadow:0 0 20px var(--accent-glow), inset 0 0 0 1px var(--w200);
        }
        @keyframes qla-flame-sweep { 0%{background-position:200% 0;} 100%{background-position:0 0;} }
        @keyframes qla-flame-sweep-current { 0%{background-position:200% 0;} 100%{background-position:0 0;} }
        @keyframes qla-pulse {
            0%,100%{box-shadow:0 0 14px var(--accent-glow), inset 0 0 0 1px var(--w100); transform:scale(1);}
            50%{box-shadow:0 0 28px var(--accent-glow), inset 0 0 0 1px var(--w200); transform:scale(1.02);}
        }
        .qla-stair .seg.activate { animation: qla-seg-bounce .6s cubic-bezier(.34,1.56,.64,1); }
        @keyframes qla-seg-bounce { 0%{transform:scale(.92);} 40%{transform:scale(1.1);} 100%{transform:scale(1);} }
        .qla-stair-hint { text-align:center; font-size:11px; color:var(--text-dim); margin-top:6px; }

        /* Step detail panel */
        .qla-detail-card {
            background:var(--surface-1);
            border-radius:10px; padding:16px;
            border:1px solid var(--w100);
            border-left:3px solid var(--qla-step-color, var(--accent));
            box-shadow: 0 2px 10px var(--card-shadow);
        }
        .qla-detail-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
        .qla-detail-icon { font-size:20px; }
        .qla-detail-name {
            font-size:14px; font-weight:800; color:var(--text-hi);
            letter-spacing:0.5px; text-transform:uppercase;
        }
        .qla-detail-num { font-size:10px; color:var(--text-dim); letter-spacing:1px; }
        .qla-detail-desc { font-size:13px; color:var(--text); line-height:1.6; margin-bottom:12px; }
        .qla-detail-quote {
            font-style:italic; font-size:12px; color:var(--accent);
            border-left:2px solid var(--w100); padding-left:10px; margin-bottom:12px;
        }
        .qla-detail-actions-label {
            font-size:10px; letter-spacing:1px; text-transform:uppercase;
            color:var(--qla-step-color, var(--accent)); font-weight:700; margin-bottom:6px;
        }
        .qla-detail-actions {
            margin:0; padding-left:20px; color:var(--text);
            font-size:13px; line-height:1.7; list-style:disc;
        }
        .qla-detail-actions li { margin-bottom:4px; }

        /* Divider between sections */
        .qla-divider {
            margin-top:20px; border-top:1px solid var(--w100); padding-top:16px;
        }

        /* 7-Step / Dan Lok / QLA Tests card grid (shared) */
        .qla-7step-grid {
            display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px;
        }
        .qla-7step {
            background:var(--w040);
            border:1px solid var(--w100);
            border-radius:8px; padding:12px;
        }
        .qla-7step-num {
            font-size:10px; font-weight:700; letter-spacing:1px; margin-bottom:4px;
            color:var(--qla-local-accent, var(--accent));
        }
        .qla-7step-desc { font-size:11px; color:var(--text-dim); line-height:1.5; }
        .qla-7step-desc strong { color:var(--text); font-weight:700; }

        /* 33 Secrets stat cards */
        .qla-33-secrets-grid {
            display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px;
        }
        .qla-33-card {
            background:var(--w040);
            border:1px solid var(--w100);
            border-radius:8px; padding:12px; text-align:center;
        }
        .qla-33-num {
            font-size:22px; font-weight:800; color:var(--accent);
            margin-bottom:4px; font-family:'Press Start 2P',monospace;
        }
        .qla-33-label { font-size:10px; color:var(--text-dim); line-height:1.4; }

        /* Quote blocks */
        .qla-quote-block {
            font-style:italic; font-size:12px; color:var(--accent);
            border-left:2px solid var(--w100); padding:6px 0 6px 12px;
            margin-top:12px; line-height:1.6;
        }

        /* Red Flag box */
        .qla-redflag-box {
            background:var(--w030);
            border:1px solid var(--w080);
            border-radius:10px; padding:14px 16px;
        }
        .qla-redflag-text { font-size:12px; color:var(--text); line-height:1.8; }
        .qla-redflag-bold { color:var(--red); }

        .qla-footer-quote {
            text-align:center; margin-top:16px;
            font-size:11px; color:var(--text-dim);
            font-style:italic; line-height:1.6;
        }

        @media(max-width:768px){
            .qla-stair { max-width:100% !important; }
            .qla-stair .seg { height:38px; font-size:8px; }
            .qla-stair .seg .seg-label { font-size:7px; }
            .qla-stair .seg .seg-icon { font-size:12px; }
            .qla-stair .seg .seg-count { display:none; }
            .qla-credos-grid { grid-template-columns:repeat(3,1fr); }
        }
        @media(max-width:480px){
            .qla-stair .seg .seg-label { display:none; }
            .qla-stair .seg { gap:0; }
            .qla-credos-grid { grid-template-columns:repeat(2,1fr); }
        }
        .session-panel {
            width:100%; max-width:1100px;
            background:var(--k300); backdrop-filter:blur(8px);
            border-radius:10px; padding:12px 16px; margin:4px 0 8px;
            border:1px solid var(--w060); display:none;
        }
        .session-panel.open { display:block; }
        .session-panel .sp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
        .session-panel .sp-title { color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
        .session-panel .sp-list { display:flex; flex-wrap:wrap; gap:4px; }
        .session-panel .sp-item {
            padding:3px 10px; background:var(--w050); border-radius:5px;
            color:var(--text); font-size:11px; border:1px solid var(--w060);
        }
        .session-panel .sp-item:last-child { color:var(--accent); border-color:var(--accent); background:var(--accent-glow); }
        .session-panel .sp-item.sp-skipped { color:var(--orange); border-color:var(--orange); background:rgba(251,140,0,0.08); text-decoration:line-through; }
        .session-panel .sp-empty { color:var(--text-dim); font-size:12px; font-style:italic; }
        .current-tool-banner {
            width:100%; max-width:1100px;
            background:var(--surface-1); backdrop-filter:blur(12px);
            border-radius:14px; padding:18px 24px; margin:4px 0 8px;
            border:1px solid var(--w150); display:none;
            box-shadow: 0 4px 20px var(--card-shadow);
            perspective: 1000px;
        }
        .current-tool-banner.show { display:block; animation:fade-up 0.4s; }
        .current-tool-banner .ct-label { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); font-weight:600; }
        .current-tool-banner .ct-name { 
            font-size:24px; font-weight:800; color: var(--text-hi); margin:3px 0 6px;
            transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
            transform-style: preserve-3d;
        }
        .current-tool-banner .ct-name.reveal-flip { 
            animation: card-flip-reveal 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
        }
        @keyframes card-flip-reveal {
            0% { transform: rotateY(-90deg) rotateX(5deg); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: rotateY(0deg) rotateX(0deg); opacity: 1; }
        }
        /* ponytail: card-flip flourish when a new tool is dealt — pairs with NodSFX.cardDraw() */
        .current-tool-banner .ct-name.ct-flip { animation:ct-flip-in 0.5s cubic-bezier(0.34,1.56,0.64,1); transform-origin:center; }
        @keyframes ct-flip-in {
            0%   { opacity:0; transform:perspective(500px) rotateX(-85deg); }
            65%  { opacity:1; transform:perspective(500px) rotateX(10deg); }
            100% { opacity:1; transform:perspective(500px) rotateX(0deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .current-tool-banner .ct-name.reveal-flip { animation: none; transform: none; opacity: 1; }
            .current-tool-banner .ct-name.ct-flip { animation:none; }
        }
        .current-tool-banner .ct-desc { font-size:14px; color:var(--card-body); line-height:1.6; max-width:700px; }
        .current-tool-banner .ct-actions { display:flex; gap:8px; margin-top:10px; }
        .empty-state { width:100%; text-align:center; padding:50px 20px; color:var(--w250); }

        /* ponytail: glass layers — header, banner, session panel */
        .header { background:var(--w030); backdrop-filter:blur(14px) saturate(1.3);
            -webkit-backdrop-filter:blur(14px) saturate(1.3); border-radius:14px; padding:8px 12px;
            border:1px solid var(--w060); }
        .current-tool-banner, .session-panel {
            backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
            background: var(--surface-1); }
        @supports not (backdrop-filter: blur(1px)) {
            .header { background:var(--surface-0); }
            .current-tool-banner, .session-panel { background:var(--surface-1); }
        }

        /* ─── BEHAVIORAL CHANGE STAIR (Machiavelli Model) ─── */
        .stair-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
        }
        .stair-header { text-align:center; margin-bottom: 10px; }
        .stair-header h2 { color: var(--text-hi); font-size:20px; font-weight:700; margin-bottom:2px; }
        .stair-header p { color:var(--w400); font-size:12px; }

        .rapport-bar {
            width: 100%; max-width: 900px;
            text-align: center;
            padding: 6px 0;
            margin-bottom: 12px;
            color: var(--accent);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            border-bottom: 1px dashed rgba(212,168,83,0.3);
            border-top: 1px dashed rgba(212,168,83,0.3);
        }

        .stair-grid {
            width: 100%; max-width: 900px;
            display: flex;
            gap: 0;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
        }

        /* Arrow connectors between stages */
        .stage-connector {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            flex-shrink: 0;
        }
        .stage-connector .arrow {
            color: var(--w200);
            font-size: 22px;
            animation: arrow-pulse 2s infinite;
        }
        @keyframes arrow-pulse {
            0%,100%{opacity:0.3;transform:translateX(0)}
            50%{opacity:0.8;transform:translateX(4px)}
        }

        .stage-card {
            flex: 1;
            min-width: 180px;
            max-width: 240px;
            background: var(--card-bg);
            border-radius: 10px;
            overflow: hidden;            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
            opacity: 0;
            transform: translateY(20px);
            position: relative;
        }
        .stage-card.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .stage-card:nth-child(1) { animation-delay:0.05s; }
        .stage-card:nth-child(3) { animation-delay:0.15s; }
        .stage-card:nth-child(5) { animation-delay:0.25s; }
        .stage-card:nth-child(7) { animation-delay:0.35s; }

        .stage-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0,0,0,0.35),
                        0 0 0 1px var(--accent),
                        0 0 20px var(--accent-glow);
            z-index: 10;
        }
        .stage-card.active-stage {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 10px 30px rgba(0,0,0,0.4),
                        0 0 0 2px var(--accent),
                        0 0 30px var(--accent-glow);
            z-index: 20;
        }

        .stage-card .stage-header {
            background: #2c5f8a;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .stage-card .stage-header .stage-num {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: rgba(255,255,255,0.22);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 11px; font-weight: 700;
        }
        .stage-card .stage-header .stage-name {
            color: #fff; font-size: 13px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px;
        }

        .stage-card .stage-body {
            padding: 10px 14px 12px;
        }
        .stage-card .stage-subtitle {
            font-size: 10px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            font-weight: 600;
        }
        .stage-card .stage-items {
            list-style: none;
            padding: 0; margin: 0;
        }
        .stage-card .stage-items li {
            font-size: 11.5px;
            color: var(--text);
            padding: 3px 0 3px 14px;
            position: relative;
            line-height: 1.5;
        }
        .stage-card .stage-items li::before {
            content: '\25A0';
            position: absolute; left: 0;
            color: #2c5f8a; font-size: 8px;
            top: 5px;
        }
        .stage-card .stage-items li.sep::before {
            content: '';
        }
        .stage-card .stage-items li.sep {
            border-top: 1px solid rgba(0,0,0,0.06);
            margin: 3px 0;
            padding-top: 6px;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            color: var(--text-dim);
        }

        .stage-card .stage-desc {
            display: none;
            font-size: 12px;
            line-height: 1.6;
            color: var(--text-dim);
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(0,0,0,0.06);
        }
        .stage-card .stage-desc.open { display: block; }

        @media (max-width: 700px) {
            .stage-card { min-width: 140px; max-width: 180px; }
            .stage-card .stage-items li { font-size: 10.5px; }
            .stage-connector { width: 18px; }
            .stage-connector .arrow { font-size: 16px; }
        }

        /* ─── WHEEL OF EMOTIONS — mobile-first ─── */
                .wheel-container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 20px 0;
                    gap: 8px;
                    position: relative;
                    /* subtle background — the generated NOD emotion wheel as watermark.
                       ponytail: the second layer used to be a dark-theme vignette
                       (rgba(13,13,26,.8)). With background-size 340px + no-repeat it painted
                       a hard-edged grey column down the middle of the view — very obvious on
                       the sand theme. Dropped; the wheel SVG carries its own depth. */
                    background:
                        radial-gradient(circle at 18% 12%, var(--accent-glow), transparent 28%),
                        radial-gradient(circle at 82% 12%, var(--accent-glow), transparent 28%),
                        radial-gradient(circle, var(--w080) 0 1px, transparent 2px);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: min(340px, 90vw);
                    isolation: isolate;
                }
                .wheel-container::before {
                    content:""; position:absolute; inset:34px auto auto; width:min(920px, 96vw); height:180px;
                    background:
                        linear-gradient(100deg, transparent 0 12%, var(--w120) 16%, transparent 34%),
                        linear-gradient(260deg, transparent 0 12%, var(--w120) 16%, transparent 34%);
                    opacity:.55; filter: blur(1px); pointer-events:none; z-index:-1;
                }
                .wheel-header { text-align:center; margin-bottom: 4px; }
                .wheel-header h2 {
                    color: var(--accent); font-size:clamp(24px, 5vw, 44px); font-weight:950; margin-bottom:2px;
                    text-shadow: 0 3px 0 var(--k800), 0 0 28px var(--accent-glow);
                }
                .wheel-header p { color:var(--w500); font-size:13px; }

                .wheel-layout {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    width: 100%;
                    max-width: 100%;
                    padding: 0 4px;
                }
                .wheel-canvas-wrap {
                    position: relative;
                    flex: 1;
                    max-width: 500px;
                    touch-action: none;
                    border-radius: 50%;
                }
                .wheel-canvas-wrap::before {
                    content:""; position:absolute; inset:-18px; border-radius:50%;
                    background: conic-gradient(from 0deg, var(--accent), var(--w200), var(--blue), var(--w200), var(--accent));
                    opacity:.18; filter: blur(12px); z-index:-1;
                }
                .wheel-stage-lights {
                    position:absolute; inset:-18px; border-radius:50%; pointer-events:none; z-index:3;
                    animation: wheel-stage-rotate 9s linear infinite;
                }
                .wheel-stage-lights span {
                    position:absolute; width:14px; height:14px; border-radius:50%;
                    background:var(--accent); box-shadow:0 0 18px var(--accent-glow);
                }
                .wheel-stage-lights span:nth-child(1){ left:50%; top:0; }
                .wheel-stage-lights span:nth-child(2){ right:10%; top:22%; background:var(--blue); box-shadow:0 0 18px var(--blue); }
                .wheel-stage-lights span:nth-child(3){ right:14%; bottom:14%; }
                .wheel-stage-lights span:nth-child(4){ left:14%; bottom:14%; background:var(--blue); box-shadow:0 0 18px var(--blue); }
                .wheel-stage-lights span:nth-child(5){ left:10%; top:22%; }
                .wheel-canvas-wrap.spinning .wheel-stage-lights { animation-duration: 1.2s; }
                @keyframes wheel-stage-rotate { to { transform: rotate(360deg); } }
                .wheel-fallback {
                    display: block;
                    width: 100%;
                    max-width: 300px;
                    height: auto;
                    margin: 0 auto;
                    opacity: 0.8;
                    transition: opacity 0.4s ease;
                }
                .wheel-canvas-wrap.svg-loaded .wheel-fallback {
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
                @media (min-width: 769px) {
                    .wheel-canvas-wrap { max-width: 580px; }
                    .wheel-label-primary { font-size: 28px; }
                    .wheel-label.active-label { font-size: 36px; }
                    .wheel-label-secondary, .wheel-label-tertiary { display: none; }
                }
                .wheel-canvas-wrap svg {
                    width: 100%;
                    height: auto;
                    display: block;
                    filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35));
                    -webkit-user-select: none;
                    user-select: none;
                }

                .wheel-pointer {
                    position: absolute;
                    top: -4px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 20;
                    width: 0; height: 0;
                    border-left: 14px solid transparent;
                    border-right: 14px solid transparent;
                    border-top: 26px solid #e53935;
                    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(229,57,53,0.7));
                }
                .wheel-canvas-wrap.spinning .wheel-pointer {
                    animation: wheel-pointer-tick 90ms steps(2, end) infinite;
                }
                @keyframes wheel-pointer-tick {
                    0%,100% { transform: translateX(-50%) rotate(0deg); }
                    50% { transform: translateX(-50%) rotate(5deg); }
                }
                /* ponytail: specular highlight — top half lighter, reads as glossy plastic */
                .wheel-pointer::before {
                    content: ''; position: absolute;
                    top: -26px; left: -14px;
                    width: 0; height: 0;
                    border-left: 14px solid transparent;
                    border-right: 14px solid transparent;
                    border-top: 13px solid var(--w350);
                    pointer-events: none;
                }
                .wheel-pointer::after {
                    content: ''; position: absolute;
                    top: -28px; left: 50%;
                    transform: translateX(-50%);
                    width: 16px; height: 16px;
                    background: radial-gradient(circle at 35% 30%, #ff8a80, #ff1744 55%, #b71c1c);
                    border-radius: 50%;
                    border: 1px solid var(--w300);
                    box-shadow: 0 0 10px rgba(255,23,68,0.7), 0 0 20px rgba(255,23,68,0.3), inset 0 -2px 4px rgba(0,0,0,0.4);
                    animation: pointer-glow 1.2s ease-in-out infinite;
                }
                @keyframes pointer-glow {
                    0%,100%{box-shadow:0 0 6px #ff1744,0 0 12px rgba(255,23,68,0.2), inset 0 -2px 4px rgba(0,0,0,0.4)}
                    50%{box-shadow:0 0 14px #ff1744,0 0 28px rgba(255,23,68,0.5), inset 0 -2px 4px rgba(0,0,0,0.4)}
                }
                /* ponytail: PS2 attract mode — slow wheel breathing glow when idle */
                .wheel-canvas-wrap.attract svg {
                    animation: wheel-breathe 4s ease-in-out infinite;
                }
                @keyframes wheel-breathe {
                    0%,100% { filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35)) drop-shadow(0 0 0px rgba(212,168,83,0)); }
                    50% { filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35)) drop-shadow(0 0 22px rgba(212,168,83,0.35)); }
                }
                @media (prefers-reduced-motion: reduce) {
                    .wheel-pointer::after { animation: none; }
                    .wheel-canvas-wrap.attract svg { animation: none; }
                    .spin-btn-big { animation: none; }
                }

                /* ── Big SPIN button ── */
                .spin-btn-big {
                    padding: 16px 48px;
                    font-size: 22px;
                    font-weight: 900;
                    font-family: 'Press Start 2P', monospace;
                    border-radius: 50px;
                    border: none;
                    cursor: pointer;
                    background: radial-gradient(circle at 35% 35%, #ffd740, #d4a853, #b8860b);
                    color: var(--on-accent);
                    letter-spacing: 2px;
                    box-shadow: 0 0 30px rgba(212,168,83,0.6), 0 6px 0 #7a5a00, inset 0 1px 0 var(--w400);
                    transition: all 0.15s;
                    text-shadow: 0 1px 0 var(--w300);
                    animation: spin-btn-pulse 2s ease-in-out infinite;
                    position: relative;
                    overflow: hidden;
                    min-height: 48px;
                    touch-action: manipulation;
                }
                .spin-btn-big:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 0 50px rgba(212,168,83,0.8), 0 8px 0 #7a5a00, inset 0 1px 0 var(--w400);
                }
                .spin-btn-big:active {
                    transform: translateY(3px);
                    box-shadow: 0 0 20px rgba(212,168,83,0.4), 0 2px 0 #7a5a00, inset 0 1px 0 var(--w200);
                }
                .spin-btn-big:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                    animation: none;
                    transform: none;
                }
                @keyframes spin-btn-pulse {
                    0%,100% { box-shadow: 0 0 30px rgba(212,168,83,0.6), 0 6px 0 #7a5a00; }
                    50% { box-shadow: 0 0 60px rgba(212,168,83,0.9), 0 6px 0 #7a5a00, 0 0 100px rgba(212,168,83,0.3); }
                }

                /* ── Winner banner ── */
                .wheel-winner {
                    text-align: center;
                    padding: 20px 32px;
                    margin: 12px auto;
                    max-width: 460px;
                    background: var(--k600);
                    border-radius: 16px;
                    border: 2px solid var(--accent);
                    color: var(--text-hi);
                    font-size: 26px;
                    font-weight: 900;
                    font-family: 'Press Start 2P', monospace;
                    letter-spacing: 2px;
                    animation: winner-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                    box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(212,168,83,0.2);
                    text-shadow: 0 0 20px var(--accent-glow);
                }
                .wheel-winner::before {
                    content:""; display:block; height:8px; margin:-6px auto 12px; max-width:220px;
                    border-radius:999px; background:linear-gradient(90deg, transparent, currentColor, transparent);
                    opacity:.75;
                }
                @media(max-width:600px){
                    .wheel-winner { font-size: 18px; padding: 14px 16px; max-width: 100%; }
                }
                @keyframes winner-pop {
                    0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
                    60% { transform: scale(1.1) rotate(2deg); }
                    100% { transform: scale(1) rotate(0); opacity: 1; }
                }

                /* ── Spin history strip ── */
                .spin-history {
                    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
                    min-height: 32px; margin: 8px 0;
                }
                .wheel-confetti {
                    position: fixed; left: 50%; top: 44%; width: 1px; height: 1px; z-index: 10000;
                    pointer-events: none;
                }
                .wheel-confetti i {
                    position:absolute; width:8px; height:14px; border-radius:2px;
                    background:var(--accent); box-shadow:0 0 12px var(--accent-glow);
                    animation: wheel-confetti-fall 1000ms ease-out forwards;
                }
                @keyframes wheel-confetti-fall {
                    0% { transform: translate(0,0) rotate(0deg); opacity:1; }
                    100% { transform: translate(var(--tx), var(--ty)) rotate(320deg); opacity:0; }
                }
                .spin-history .sh-chip {
                    padding: 5px 14px; border-radius: 16px;
                    font-size: 12px; font-weight: 700; color: var(--text-hi);
                    letter-spacing: 0.5px;
                    opacity: 0.9;
                    animation: card-pop 0.3s both;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                }

                /* ─── NOD Academy Reference Cards ─── */
                .academy-stage {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 18px;
                    padding: 12px 0 24px;
                }
                .academy-header {
                    text-align: center;
                    padding: 14px 24px;
                    background: var(--k400);
                    border-radius: 14px;
                    border: 1px solid rgba(212,168,83,0.2);
                    width: 100%; max-width: 900px;
                    backdrop-filter: blur(10px);
                }
                .academy-header h2 {
                    color: var(--accent);
                    font-size: 22px;
                    font-weight: 800;
                    letter-spacing: 0.5px;
                    margin-bottom: 4px;
                }
                .academy-header p {
                    color: var(--w450);
                    font-size: 12px;
                }

                /* Level section divider */
                .academy-level {
                    width: 100%; max-width: 960px;
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                }
                .academy-level-header {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 8px 0 4px;
                }
                .academy-level-badge {
                    padding: 5px 16px;
                    border-radius: 20px;
                    font-size: 11px;
                    font-weight: 800;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                    border: 1px solid;
                    white-space: nowrap;
                }
                .level-1 .academy-level-badge { background: rgba(212,168,83,0.12); color: var(--accent); border-color: rgba(212,168,83,0.3); }
                .level-2 .academy-level-badge { background: rgba(100,181,246,0.12); color: #64b5f6; border-color: rgba(100,181,246,0.3); }
                .level-3 .academy-level-badge { background: rgba(206,147,216,0.12); color: #ce93d8; border-color: rgba(206,147,216,0.3); }
                .academy-level-line {
                    flex: 1;
                    height: 1px;
                    background: linear-gradient(to right, var(--w120), transparent);
                }
                .academy-level-sub {
                    color: var(--w250);
                    font-size: 11px;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }

                /* Card grid */
                .academy-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 14px;
                    width: 100%;
                }

                /* Gold shimmer card */
                .ref-card {
                    position: relative;
                    border-radius: 14px;
                    background: var(--card-bg);
                    padding: 18px 18px 14px;
                    cursor: default;
                    overflow: hidden;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
                    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
                    animation: card-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
                }
                /* Gold border via pseudo-element gradient */
                .ref-card::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: 14px;
                    padding: 2px;
                    background: linear-gradient(135deg, #d4a853, #fffbe6 40%, #b8860b 60%, #d4a853);
                    background-size: 300% 300%;
                    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                    -webkit-mask-composite: xor;
                    mask-composite: exclude;
                    animation: gold-shimmer 3s linear infinite;
                    opacity: 0.7;
                }
                .ref-card:hover::before {
                    opacity: 1;
                    animation-duration: 1.5s;
                }
                @keyframes gold-shimmer {
                    0% { background-position: 0% 50%; }
                    50% { background-position: 100% 50%; }
                    100% { background-position: 0% 50%; }
                }
                .ref-card:hover {
                    transform: translateY(-6px) scale(1.02);
                    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,168,83,0.4), 0 0 30px rgba(212,168,83,0.15);
                    z-index: 5;
                }

                .ref-card .rc-badges {
                    display: flex;
                    gap: 6px;
                    margin-bottom: 10px;
                    flex-wrap: wrap;
                }
                .ref-card .rc-level {
                    font-size: 9px;
                    font-weight: 800;
                    padding: 2px 8px;
                    border-radius: 8px;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }
                .rc-l1 { background: rgba(212,168,83,0.15); color: #d4a853; }
                .rc-l2 { background: rgba(100,181,246,0.15); color: #64b5f6; }
                .rc-l3 { background: rgba(206,147,216,0.15); color: #ce93d8; }
                .ref-card .rc-cat {
                    font-size: 9px;
                    font-weight: 600;
                    padding: 2px 8px;
                    border-radius: 8px;
                    background: var(--k060);
                    color: var(--text-dim);
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                }
                .ref-card .rc-ch {
                    font-size: 10px;
                    color: var(--text-dim);
                    margin-bottom: 3px;
                    font-weight: 600;
                }
                .ref-card .rc-title {
                    font-size: 15px;
                    font-weight: 800;
                    color: var(--text);
                    margin-bottom: 6px;
                    line-height: 1.3;
                }
                .ref-card .rc-rule {
                    font-size: 11.5px;
                    font-weight: 700;
                    color: var(--text);
                    text-transform: uppercase;
                    letter-spacing: 0.3px;
                    line-height: 1.5;
                    margin-bottom: 8px;
                    padding: 6px 10px;
                    background: var(--k040);
                    border-radius: 6px;
                    border-left: 3px solid #d4a853;
                }
                .ref-card .rc-body {
                    font-size: 11px;
                    color: var(--text-dim);
                    line-height: 1.6;
                    margin-bottom: 10px;
                }
                .ref-card .rc-quote {
                    font-style: italic;
                    font-size: 11px;
                    font-weight: 600;
                    color: #b8860b;
                    border-top: 1px solid rgba(212,168,83,0.2);
                    padding-top: 8px;
                    margin-top: auto;
                    line-height: 1.5;
                }

                /* Category filter tabs */
                .academy-filters {
                    display: flex;
                    gap: 6px;
                    flex-wrap: wrap;
                    justify-content: center;
                    width: 100%; max-width: 900px;
                }
                .academy-filter {
                    padding: 5px 14px;
                    border-radius: 20px;
                    border: 1px solid var(--w100);
                    background: var(--w040);
                    color: var(--w450);
                    font-size: 11px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.25s;
                    font-family: 'Inter', sans-serif;
                }
                .academy-filter:hover { background: var(--w100); color: var(--text-hi); }
                .academy-filter.af-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

                @media (max-width: 600px) {
                    .academy-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
                    .ref-card { padding: 12px 12px 10px; }
                    .ref-card .rc-title { font-size: 13px; }
                    .ref-card .rc-rule { font-size: 10.5px; }
                    .ref-card .rc-body { font-size: 10px; }
                    .ref-card .rc-quote { font-size: 10px; }
                    .academy-header h2 { font-size: 18px; }
                }
                @media (max-width: 380px) {
                    .academy-grid { grid-template-columns: 1fr; }
                }

                /* ponytail: the 90s CRT scanlines (::before) and vignette (::after) that used to
                   sit on .wheel-canvas-wrap are gone. Both were inset:0 on a square wrap, so they
                   painted a grey rounded-rect over the round wheel — striping plus dark corners.
                   The focus-mode scanline override went with them; focus mode keeps its purple
                   glow below (and on #wheelGroup). */
                /* Focus mode: outer glow */
                .wheel-canvas-wrap.focus-mode {
                    filter: drop-shadow(0 0 40px rgba(138,43,226,0.35));
                }

                .wheel-rotate-bar {
                    display: flex; align-items: center; gap: 10px;
                    width: 100%; max-width: 420px;
                    margin: 8px auto 0; padding: 8px 14px;
                    background: var(--k250); border-radius: 12px;
                    border: 1px solid var(--w080);
                }
                .wheel-rotate-bar .rotate-icon {
                    font-size: 22px; color: var(--accent); flex-shrink: 0;
                    text-shadow: 0 0 8px var(--accent-glow);
                }
                .wheel-rotate-bar input[type="range"] {
                    flex: 1; height: 36px;
                    -webkit-appearance: auto; appearance: auto;
                    cursor: pointer; touch-action: none;
                }
                .wheel-rotate-bar input[type="range"]::-webkit-slider-runnable-track {
                    height: 6px; border-radius: 3px;
                    background: linear-gradient(to right, rgba(212,168,83,0.2), var(--accent), rgba(212,168,83,0.2));
                }
                .wheel-rotate-bar input[type="range"]::-webkit-slider-thumb {
                    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
                    background: radial-gradient(circle at 35% 35%, #ffd740, #d4a853);
                    border: 2px solid var(--w500);
                    box-shadow: 0 0 12px rgba(212,168,83,0.5); margin-top: -9px; cursor: pointer;
                }
                .wheel-rotate-bar .rotate-val {
                    font-size: 13px; font-weight: 700; color: var(--accent);
                    min-width: 42px; text-align: right; flex-shrink: 0;
                    font-variant-numeric: tabular-nums;
                }

                /* Focus mode hint */
                .focus-hint {
                    text-align: center; font-size: 11px; color: rgba(138,43,226,0.7);
                    margin: 6px 0 0; font-weight: 600; display: none;
                    letter-spacing: 0.5px;
                }
                .focus-hint.show { display: block; animation: fade-up 0.3s; }

                .wheel-emotion-slice {
                    cursor: pointer;
                    transition: filter 0.3s, transform 0.15s;
                    transform-origin: 250px 250px;
                }
                .wheel-emotion-slice:hover { filter: brightness(1.25); }
                .wheel-emotion-slice:active { filter: brightness(1.6) drop-shadow(0 0 12px var(--w600)); transform: scale(1.03); }
                .wheel-emotion-slice.active-slice {
                    filter: brightness(1.6) drop-shadow(0 0 24px var(--accent));
                    animation: slice-flourish 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards, slice-pulse 2s ease-in-out 0.8s infinite;
                }
                @keyframes slice-flourish {
                    0% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0px var(--accent)); }
                    50% { transform: scale(1.15); filter: brightness(1.8) drop-shadow(0 0 32px var(--accent)); }
                    100% { transform: scale(1); filter: brightness(1.6) drop-shadow(0 0 24px var(--accent)); }
                }
                @keyframes slice-pulse {
                    0%,100% { filter: brightness(1.5) drop-shadow(0 0 16px var(--accent)); }
                    50% { filter: brightness(1.8) drop-shadow(0 0 32px var(--accent)); }
                }
                #wheelGroup {
                    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                }
                #wheelGroup.dragging {
                    transition: none;
                }
                /* Focus mode — purple CRT glow */
                #wheelGroup.focus-mode {
                    filter: drop-shadow(0 0 30px rgba(138,43,226,0.6)) drop-shadow(0 0 60px rgba(138,43,226,0.2));
                }
                /* Has-selection — dim unselected slices */
                #wheelGroup.has-selection .wheel-emotion-slice:not(.active-slice) {
                    opacity: 0.4;
                }
                .wheel-rim-dot { pointer-events: none; }

                .wheel-label {
                    fill: #fff; text-anchor: middle; dominant-baseline: central;
                    pointer-events: none; font-weight: 700;
                    paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 1.8px;
                    stroke-linejoin: round;
                }
                .wheel-label-primary {
                    font-size: 24px; font-weight: 900; letter-spacing: 1px;
                    stroke-width: 1.6px; stroke: rgba(0,0,0,0.8);
                    transition: font-size 0.25s ease;
                }
                .wheel-label.active-label { font-size: 30px; }
                /* Secondary + Tertiary removed from wheel — in detail panel + legend */

                /* Legend — full word list below wheel */
                .wheel-legend {
                    width: 100%; max-width: 520px;
                    margin: 10px auto 0;
                    display: none;
                    flex-wrap: wrap;
                    gap: 4px;
                    justify-content: center;
                }
                .wheel-legend.open { display: flex; }
                .wheel-legend .lg-group {
                    display: flex; flex-direction: column; gap: 2px;
                    padding: 6px 10px; border-radius: 8px;
                    background: var(--k350);
                    min-width: 100px;
                    flex: 1;
                    max-width: 180px;
                }
                .wheel-legend .lg-primary {
                    font-size: 13px; font-weight: 800; color: var(--text-hi);
                    margin-bottom: 3px; letter-spacing: 0.3px;
                }
                .wheel-legend .lg-sec {
                    font-size: 11px; font-weight: 600; color: var(--text-hi);
                    padding: 2px 0;
                }
                .wheel-legend .lg-ter {
                    font-size: 10px; font-weight: 400; color: #b0b0b0;
                    padding-left: 8px;
                }

        /* Emotion detail panel */
        .emotion-detail {
            width: 100%;
            max-width: 500px;
            margin: 14px auto 0;
            background: var(--card-bg);
            border-radius: 14px;
            padding: 20px 24px;
            display: none;
            animation: fade-up 0.3s;
            box-shadow: 0 4px 20px var(--card-shadow);
            border: 1px solid var(--w100);
        }
        .emotion-detail.open { display: block; }
        .emotion-detail .ed-name {
            font-size: 22px; font-weight: 800; margin-bottom: 2px;
        }
        .emotion-detail .ed-opposite {
            font-size: 12px; color: var(--text-dim); margin-bottom: 10px;
        }
        .emotion-detail .ed-intensities {
            display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
        }
        .emotion-detail .ed-int {
            padding: 3px 10px; border-radius: 6px;
            font-size: 11px; font-weight: 500; color: var(--text-hi);
        }
        .emotion-detail .ed-desc {
            font-size: 13px; line-height: 1.6; color: var(--text-dim);
        }
        .emotion-detail .ed-combos {
            margin-top: 10px; padding-top: 10px;
            border-top: 1px solid var(--w100);
        }
        .emotion-detail .ed-combos h4 {
            font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
            color: var(--text-dim); margin-bottom: 4px;
        }
        .emotion-detail .ed-combo-item {
            display: inline-block;
            padding: 2px 8px; margin: 2px 3px;
            background: var(--k040); border-radius: 8px;
            font-size: 11px; font-weight: 500;
        }
        .emotion-detail .ed-sec {
            font-size: 12px; line-height: 1.6; color: var(--text-dim);
            padding: 2px 0;
        }
        .emotion-detail .ed-sec strong {
            color: var(--text);
        }
        .emotion-detail .ed-close {
            margin-top: 14px; padding: 8px 20px;
            border: none; border-radius: 8px;
            background: var(--accent); color: var(--on-accent);
            font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;
        }

        /* ─── Emotion Accordion ─── */
        .emo-accordion {
            width: 100%; max-width: 520px; margin: 12px auto 0;
        }
        .emo-depth-bar {
            display: flex; align-items: center; gap: 10px;
            width: 100%; max-width: 420px; margin: 0 auto 10px;
            padding: 8px 14px; background: var(--surface-2);
            border-radius: 12px; border: 1px solid var(--w100);
        }
        .emo-depth-bar label {
            font-size: 11px; color: var(--text-dim);
            text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
        }
        .emo-depth-bar input[type="range"] {
            flex: 1; height: 36px; -webkit-appearance: auto; appearance: auto;
            cursor: pointer;
        }
        .emo-depth-bar .depth-val {
            font-size: 13px; font-weight: 700; color: var(--accent);
            min-width: 60px; text-align: right; flex-shrink: 0;
        }
        .emo-item {
            --c: #888;
            margin-bottom: 8px; border-radius: 12px; overflow: hidden;
            background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
            border: 1px solid var(--w100);
            border-left: 4px solid var(--c);
            box-shadow: 0 3px 10px var(--card-shadow), 0 1px 2px var(--card-shadow);
            transition: border-color 0.2s, box-shadow 0.25s, transform 0.18s;
            opacity: 0;
            animation: emoRise 420ms cubic-bezier(0.22,0.9,0.3,1) forwards;
            animation-delay: calc(var(--i, 0) * 45ms);
        }
        @keyframes emoRise {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .emo-item:hover {
            box-shadow: 0 5px 18px var(--card-shadow), 0 0 0 1px var(--w140), 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
        }
        .emo-item.open {
            border-color: var(--w200);
            border-left-color: var(--c);
            box-shadow: 0 6px 22px var(--card-shadow), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
        }
        .emo-item-header {
            display: flex; align-items: center; gap: 12px;
            padding: 13px 16px; cursor: pointer; user-select: none;
            min-height: 48px;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.12s ease;
        }
        .emo-item-header:active { transform: scale(0.98); }
        .emo-item-header .emo-dot {
            width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
            background: var(--c); color: var(--c);
            box-shadow: 0 0 8px currentColor, inset 0 -2px 3px var(--card-shadow), inset 0 1px 2px var(--w200);
        }
        .emo-item-header .emo-name {
            font-size: 16px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-hi); flex: 1;
        }
        .emo-item-header .emo-count {
            font-size: 11px; font-weight: 700; color: var(--text);
            background: var(--surface-2); border: 1px solid var(--w150);
            padding: 2px 9px; border-radius: 20px; letter-spacing: 0.03em;
            transition: background 0.2s, color 0.2s;
        }
        .emo-item.open .emo-count { background: var(--c); color: var(--text-hi); border-color: transparent; }
        .emo-item-header .emo-chevron {
            font-size: 14px; color: var(--text);
            width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; background: var(--surface-2);
            border: 1px solid var(--w150);
            transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.3s, background 0.2s, border-color 0.2s;
        }
        .emo-item-header:hover .emo-chevron { background: var(--w180); border-color: var(--w200); }
        .emo-item.open .emo-chevron { transform: rotate(90deg); color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); }
        .emo-item-body {
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 0.34s cubic-bezier(0.22,0.9,0.3,1), opacity 0.26s ease-out;
            background: color-mix(in srgb, var(--c) 10%, var(--surface-0));
        }
        .emo-item.open .emo-item-body { opacity: 1; }
        .emo-sec {
            --c: inherit;
            padding: 4px 16px 4px 34px;
            border-top: 1px solid var(--w100);
        }
        .emo-sec-header {
            font-size: 14px; font-weight: 600; color: var(--text);
            padding: 9px 0; cursor: pointer; display: flex; align-items: center; gap: 8px;
            min-height: 40px;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s;
        }
        .emo-sec-header:hover { color: var(--text-hi); }
        .emo-sec-header::before {
            content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
            background: var(--c); opacity: 0.7;
        }
        .emo-sec-header .sec-chevron {
            font-size: 11px; color: var(--text-dim); margin-left: auto;
            width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; background: var(--surface-2);
            border: 1px solid var(--w150);
            transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), color 0.25s, background 0.2s, border-color 0.2s;
        }
        .emo-sec-header:hover .sec-chevron { background: var(--w180); border-color: var(--w200); }
        .emo-sec.open .sec-chevron { transform: rotate(90deg); color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); }
        .emo-sec-words {
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 0.3s cubic-bezier(0.22,0.9,0.3,1), opacity 0.22s ease-out;
            display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 4px 15px;
        }
        .emo-sec.open .emo-sec-words { max-height: 300px; opacity: 1; padding-bottom: 9px; }
        .emo-word {
            font-size: 13px; font-weight: 500; color: var(--text);
            padding: 4px 11px; border-radius: 8px;
            background: var(--surface-2);
            border: 1px solid var(--w150);
            border-left: 2px solid var(--c);
            transition: background 0.15s, color 0.15s;
        }
        .emo-word:hover { background: var(--w180); color: var(--text-hi); }
        @media (prefers-reduced-motion: reduce) {
            .emo-item { animation: none; opacity: 1; }
            .emo-item-body, .emo-sec-words, .emo-chevron, .sec-chevron { transition: none; }
        }

        /* ─── Modal ─── */
        .modal-overlay {
            display:none; position:fixed; inset:0;
            background:var(--k700); backdrop-filter:blur(4px);
            z-index:1000; align-items:center; justify-content:center;
        }
        .modal-overlay.open { display:flex; }
        .modal {
            background: var(--surface-2); border-radius:14px; padding:24px;
            width:90%; max-width:400px; border:1px solid var(--w150);
            box-shadow: 0 24px 60px var(--card-shadow);
        }
        .modal h2 { color: var(--text-hi); font-size:18px; margin-bottom:14px; }
        .modal label { display:block; color:var(--w500); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; margin-top:10px; }
        .modal input,.modal select,.modal textarea {
            width:100%; padding:8px 12px; border-radius:7px;
            border:1px solid var(--w120); background:var(--k300);
            color: var(--text-hi); font-family:'Inter',sans-serif; font-size:13px; outline:none;
        }
        .modal input:focus,.modal select:focus,.modal textarea:focus { border-color:var(--accent); }
        .modal textarea { min-height:50px; resize:vertical; }
        .modal .modal-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }
        .detail-popover {
            display:none; position:fixed; inset:0;
            background:var(--k600); backdrop-filter:blur(4px);
            z-index:100; align-items:center; justify-content:center;
        }
        .detail-popover.open { display:flex; }
        .detail-content {
            background:var(--card-bg); border-radius:14px; padding:28px;
            width:90%; max-width:460px;
        }
        .detail-content .dc-name { font-size:22px; font-weight:700; margin-bottom:6px; }
        .detail-content .dc-cat { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); margin-bottom:10px; }
        .detail-content .dc-desc { font-size:14px; line-height:1.7; color:var(--text); }
        .detail-content .dc-close { margin-top:16px; padding:8px 20px; border:none; border-radius:8px; background:var(--accent); color: var(--on-accent); font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }

        @keyframes pulse-danger { 0%,100%{opacity:1} 50%{opacity:0.5} }

        /* ponytail: color pulse + micro shake on mode change */
        @keyframes mode-pulse { 0%{filter:brightness(1)} 30%{filter:brightness(1.12) saturate(1.15)} 100%{filter:brightness(1)} }
        .table-surface.mode-flash { animation: mode-pulse .4s ease; }

        /* ponytail: 140ms shimmer veil during view render */
        .view-shimmer { position:absolute; inset:0; z-index:40; pointer-events:none; border-radius:12px;
            background:linear-gradient(100deg, transparent 30%, var(--w060) 50%, transparent 70%);
            background-size:200% 100%; animation: shimmer-sweep .38s ease-out both; }
        @keyframes shimmer-sweep { 0%{background-position:200% 0; opacity:1;} 100%{background-position:-40% 0; opacity:0;} }

        /* ─── Minimum of operation scorecard ───
           Tokens only (see the hardcoded-colours gotcha). A satisfied row goes accent,
           an unmet row stays quiet — the panel should read at a glance. */
        .min-op { width:100%; max-width:520px; margin:14px auto 0; }
        .min-op .mo-header {
            display:flex; align-items:center; gap:8px; margin-bottom:8px;
        }
        .min-op .mo-header h3 {
            font-size:13px; color:var(--text-hi); font-weight:700; letter-spacing:0.5px;
        }
        .min-op .mo-total {
            margin-left:auto; font-size:9px; font-weight:700;
            padding:2px 8px; border-radius:6px;
            background:var(--accent); color:var(--on-accent);
        }
        .min-op .mo-rows { display:flex; flex-direction:column; gap:5px; }
        .min-op .mo-row {
            display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px;
            padding:7px 10px; border-radius:9px;
            background:var(--k250); border:1px solid var(--w080);
        }
        .min-op .mo-row.mo-done { border-color:var(--accent); }
        .min-op .mo-name {
            font-size:11.5px; font-weight:600; color:var(--text-hi); min-width:0;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .min-op .mo-note { font-weight:400; color:var(--w500); }
        .min-op .mo-pips { display:flex; gap:3px; flex-shrink:0; }
        .min-op .mo-pip {
            width:7px; height:7px; border-radius:50%;
            background:var(--w100); border:1px solid var(--w080);
        }
        .min-op .mo-pip.on { background:var(--accent); border-color:var(--accent); }
        .min-op .mo-count {
            font-size:10px; font-weight:700; color:var(--w500);
            font-variant-numeric:tabular-nums; flex-shrink:0; min-width:26px; text-align:right;
        }
        .min-op .mo-row.mo-done .mo-count { color:var(--accent); }
        .min-op .mo-foot { margin-top:7px; font-size:10px; line-height:1.4; color:var(--w500); }
        @media (max-width:420px) {
            .min-op .mo-pips { display:none; }
            .min-op .mo-name { white-space:normal; }
        }

        /* ─── Label Maker ─── */
        /* ─── Listen For strip — rotating Magnificent Seven cues, LISTEN stage only ───
           Deliberately quieter than a tool card: these are things to notice, not moves
           to deploy, so no accent border and no glow. Tokens only (see the
           hardcoded-colours gotcha) so it survives both themes. */
        .listen-for-strip { width:100%; max-width:520px; margin:14px auto 0; }
        .listen-for-strip[hidden] { display:none; }
        .listen-for-strip .lfs-header {
            display:flex; align-items:center; gap:8px; margin-bottom:8px;
        }
        .listen-for-strip .lfs-header h3 {
            font-size:13px; color:var(--text-hi); font-weight:700; letter-spacing:0.5px;
        }
        .listen-for-strip .lfs-reroll {
            margin-left:auto; width:26px; height:26px; flex-shrink:0;
            display:grid; place-items:center; cursor:pointer;
            border-radius:7px; border:1px solid var(--w080);
            background:var(--k250); color:var(--text-hi);
            font-size:14px; line-height:1;
            transition:transform 0.2s ease, border-color 0.2s ease;
        }
        .listen-for-strip .lfs-reroll:hover {
            border-color:var(--accent); transform:rotate(-90deg);
        }
        .listen-for-strip .lfs-cards {
            display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
        }
        .listen-for-strip .lfs-card {
            padding:10px 12px; border-radius:10px; min-width:0;
            background:var(--k250); border:1px solid var(--w080);
            border-top:3px solid var(--lfs-hue, var(--accent));
            animation:lfs-fade 0.3s ease both;
        }
        .listen-for-strip .lfs-title {
            font-size:12px; font-weight:700; color:var(--text-hi);
            letter-spacing:0.3px; margin-bottom:3px;
        }
        .listen-for-strip .lfs-ask {
            font-size:11px; line-height:1.4; color:var(--w500);
        }
        @keyframes lfs-fade { 0%{opacity:0;transform:translateY(-4px)} 100%{opacity:1;transform:translateY(0)} }
        @media (prefers-reduced-motion: reduce) {
            .listen-for-strip .lfs-card { animation:none; }
            .listen-for-strip .lfs-reroll:hover { transform:none; }
        }
        @media (max-width:420px) {
            .listen-for-strip .lfs-cards { grid-template-columns:1fr; }
        }

        .label-maker { width:100%; max-width:520px; margin:14px auto 0; }
        /* ponytail: printer housing — a physical chassis the labels appear to emerge from.
           Token-driven (var(--k*)/var(--w*)) so both themes stay legible; no literal colours. */
        .label-maker.lm-printer {
            padding:10px 12px 14px; border-radius:14px;
            background:linear-gradient(180deg, var(--k300) 0%, var(--k200) 60%, var(--k300) 100%);
            border:1px solid var(--w120);
            box-shadow:0 1px 0 var(--w060) inset, 0 6px 18px var(--card-drop);
        }
        .label-maker .lm-header {
            display:flex; align-items:center; gap:8px; margin-bottom:8px;
        }
        .label-maker .lm-header h3 {
            font-size:13px; color: var(--text-hi); font-weight:700;
            letter-spacing:0.5px;
        }
        .label-maker .lm-header .lm-badge {
            font-size:9px; padding:2px 8px; border-radius:6px;
            background:var(--accent); color: var(--on-accent); font-weight:700;
            display:inline-block; /* ponytail: needed for scale transform on pulse */
        }
        /* ponytail: LED status light — idle grey, blinks awake while a batch prints */
        .lm-led {
            width:8px; height:8px; border-radius:50%; flex:0 0 auto;
            background:var(--w150); box-shadow:0 0 0 rgba(120,220,150,0);
            transition:background .25s ease, box-shadow .25s ease;
        }
        .lm-led.active {
            background:var(--green); box-shadow:0 0 6px var(--green), 0 0 2px var(--green) inset;
            animation:lm-led-blink 0.9s ease-out;
        }
        @keyframes lm-led-blink { 0%,100%{opacity:1} 20%{opacity:.35} 40%{opacity:1} 58%{opacity:.45} 100%{opacity:1} }
        /* ponytail: mute toggle — same chip language as the badge, pushed to the header's end */
        .lm-mute {
            margin-left:auto; border:1px solid var(--w120); background:var(--w050);
            color:var(--text-dim); border-radius:7px; width:26px; height:26px;
            font-size:12px; line-height:1; cursor:pointer; flex:0 0 auto;
            display:inline-flex; align-items:center; justify-content:center;
        }
        .lm-mute:hover { background:var(--w080); }
        .lm-mute[aria-pressed="true"] { color:var(--text-dim); opacity:.6; }
        /* ponytail: output slot — the dark mouth the labels feed out of, just under the header */
        .lm-slot {
            height:9px; border-radius:5px; margin:0 2px 10px;
            background:linear-gradient(180deg, var(--k080) 0%, var(--k200) 45%, var(--k080) 100%);
            box-shadow:inset 0 2px 4px var(--card-drop), 0 1px 0 var(--w040);
        }
        .label-maker .lm-cards { display:flex; flex-direction:column; align-items:center; gap:8px; }
        .label-maker .lm-card {
            position:relative; padding:14px 16px 12px; border-radius:8px;
            background:
                repeating-linear-gradient(115deg, var(--w020) 0 2px, transparent 2px 10px),
                var(--k250);
            border:1px solid var(--accent);
            box-shadow:0 0 12px var(--accent-glow), 0 3px 8px var(--card-drop);
            animation:lm-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
        }
        /* ponytail: die-cut notch at the top center — reads as a peeled-off adhesive label */
        .label-maker .lm-card::before {
            content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
            width:22px; height:6px; border-radius:0 0 6px 6px;
            background:var(--k300); box-shadow:0 1px 0 var(--w060) inset;
        }
        /* ponytail: mechanical feed — card reveals downward out of .lm-slot with an
           overshoot + settle (clip-path unmasks the paper instead of just fading it in) */
        .label-maker .lm-card.lm-print {
            animation:lm-print 0.62s cubic-bezier(0.22,1,0.36,1) both;
            transform-origin:top center;
        }
        @keyframes lm-print {
            0%   { opacity:0; clip-path:inset(100% 0 0 0); transform:translateY(-14px) scaleY(0.88); }
            55%  { opacity:1; clip-path:inset(0 0 0 0); transform:translateY(5px) scaleY(1.035); }
            78%  { transform:translateY(-2px) scaleY(0.99); }
            100% { opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0) scaleY(1); }
        }
        @keyframes lm-pop { 0%{opacity:0;transform:scale(0.9) translateY(-6px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
        /* ponytail: counter badge pulse on fresh label batch */
        .lm-count-pulse { animation:lm-count-pulse 0.45s cubic-bezier(0.34,1.56,0.64,1); }
        @keyframes lm-count-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
        .label-maker .lm-phrase {
            font-size:14px; font-weight:600; color: var(--text-hi);
            margin-bottom:4px; line-height:1.4;
        }
        .label-maker .lm-card .lm-emotion {
            font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:0.5px;
        }
        .label-maker .lm-card .lm-trigger {
            font-size:11px; line-height:1.4; margin-top:8px; padding-top:8px;
            border-top:1px dashed rgba(255,255,255,0.12);
            color:rgba(255,255,255,0.5); font-style:italic;
        }
        .label-maker .lm-actions { margin-top:8px; display:flex; gap:6px; }
        .label-maker .lm-actions .btn {
            padding:6px 14px; border-radius:8px; border:1px solid var(--accent);
            background:rgba(212,168,83,0.12); color:var(--accent);
            font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
            cursor:pointer; transition:background 0.15s;
        }
        .label-maker .lm-actions .btn:hover { background:rgba(212,168,83,0.25); }
        .label-maker .lm-empty {
            font-size:12px; color:var(--w350);
            text-align:center; padding:16px;
        }
        @media (prefers-reduced-motion: reduce) {
            .label-maker .lm-card.lm-print { animation:none; clip-path:none; opacity:1; }
            .lm-led.active { animation:none; }
            .lm-count-pulse { animation:none; }
        }

        /* ─── Sales Power — theme-aware (Sand light default / Dark indigo) ─── */
        /* Mirrors the QLA view's approach: uses --accent, --surface-N, --text,
           --wNNN tokens so it renders correctly in both themes. */
        .sales-title {
            color:#4dd0e1;
            text-shadow:2px 2px 0 var(--k400), 0 0 30px rgba(77,208,225,0.25);
        }
        :root:not([data-theme="dark"]) .sales-title { text-shadow:none; color:#00838f; }
        .sales-panel {
            background:var(--surface-1);
            padding:24px 20px;
            border:1px solid var(--w100);
            border-radius:14px;
        }
        .sales-section-intro { text-align:center; margin-bottom:16px; }
        .sales-section-label {
            font-size:13px; letter-spacing:2px; text-transform:uppercase;
            color:#4dd0e1; font-weight:800;
        }
        :root:not([data-theme="dark"]) .sales-section-label { color:#00838f; }
        .sales-section-sub {
            font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.5;
        }

        /* Old vs New cards */
        .sales-vs-grid {
            display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;
        }
        .sales-vs-old, .sales-vs-new {
            border-radius:10px; padding:14px;
        }
        .sales-vs-old {
            background:rgba(255,59,59,0.06); border:1px solid rgba(255,59,59,0.2);
        }
        .sales-vs-new {
            background:rgba(77,208,225,0.06); border:1px solid rgba(77,208,225,0.2);
        }
        :root:not([data-theme="dark"]) .sales-vs-old {
            background:rgba(198,40,40,0.06); border:1px solid rgba(198,40,40,0.18);
        }
        :root:not([data-theme="dark"]) .sales-vs-new {
            background:rgba(0,131,143,0.06); border:1px solid rgba(0,131,143,0.18);
        }
        .sales-vs-label {
            font-size:10px; text-transform:uppercase; letter-spacing:1px;
            margin-bottom:6px; font-weight:700;
        }
        .sales-vs-label-old { color:#ff3b3b; }
        .sales-vs-label-new { color:#4dd0e1; }
        :root:not([data-theme="dark"]) .sales-vs-label-old { color:#C62828; }
        :root:not([data-theme="dark"]) .sales-vs-label-new { color:#00838f; }
        .sales-vs-text {
            font-size:13px; color:var(--text); line-height:1.5;
        }

        /* 7-Stage NEPQ progress bar — theme-aware */
        .sales-stair {
            width:100%; display:flex; gap:0; margin:8px 0 6px;
            position:relative; z-index:10;
        }
        .sales-stair .seg {
            flex:1; height:40px; border-radius:0;
            border:1px solid var(--w080); border-right:none;
            background:var(--w040);
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
            font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
            color:var(--w250); transition:all .5s ease;
            overflow:hidden; white-space:nowrap; position:relative;
            cursor:pointer; touch-action:manipulation; padding:2px 1px;
        }
        .sales-stair .seg:first-child { border-radius:10px 0 0 10px; border-left:1px solid var(--w080); }
        .sales-stair .seg:last-child { border-radius:0 10px 10px 0; border-right:1px solid var(--w080); }
        .sales-stair .seg:active { transform:scale(0.97); }
        .sales-stair .seg .seg-label { font-size:8px; line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
        .sales-stair .seg .seg-count {
            position:absolute; top:2px; right:4px; font-size:8px; font-weight:700; opacity:.5;
        }
        .sales-stair .seg.done .seg-count,
        .sales-stair .seg.current .seg-count { opacity:.8; }
        .sales-stair .seg .seg-icon { font-size:14px; opacity:0.3; }
        .sales-stair .seg.lit .seg-icon,
        .sales-stair .seg.current .seg-icon { opacity:1; }
        .sales-stair .seg.done {
            background:linear-gradient(90deg, rgba(77,208,225,0.4), #4dd0e1, #26a69a, #4dd0e1, rgba(77,208,225,0.4));
            background-size:200% 100%;
            animation:sm-flame-sweep 1.8s linear infinite;
            border-color:#26a69a; color:#fff;
            box-shadow:0 0 8px rgba(77,208,225,0.35);
        }
        .sales-stair .seg.current {
            background:linear-gradient(90deg, var(--surface-2), rgba(77,208,225,0.3), #4dd0e1, rgba(77,208,225,0.3), var(--surface-2));
            background-size:200% 100%;
            animation:sm-flame-sweep 1.2s linear infinite, sm-pulse 1.4s ease-in-out infinite;
            border-color:#4dd0e1; color:#fff;
            box-shadow:0 0 20px rgba(77,208,225,0.7), inset 0 0 0 1px rgba(178,235,242,0.35);
        }
        @keyframes sm-flame-sweep { 0%{background-position:200% 0;} 100%{background-position:0 0;} }
        @keyframes sm-pulse {
            0%,100%{box-shadow:0 0 14px rgba(77,208,225,0.5), inset 0 0 0 1px rgba(178,235,242,0.25); transform:scale(1);}
            50%{box-shadow:0 0 28px rgba(77,208,225,0.9), inset 0 0 0 1px rgba(178,235,242,0.5); transform:scale(1.02);}
        }
        .sales-stair .seg.activate { animation:sm-bounce .6s cubic-bezier(.34,1.56,.64,1); }
        @keyframes sm-bounce { 0%{transform:scale(.92);} 40%{transform:scale(1.1);} 100%{transform:scale(1);} }
        .sales-stair-hint { text-align:center; font-size:11px; color:var(--text-dim); margin-top:6px; }
        @media(max-width:600px){
            .sales-stair .seg { height:32px; font-size:7px; gap:1px; padding:2px 0; }
            .sales-stair .seg .seg-icon { font-size:12px; }
            .sales-stair .seg .seg-count { display:none; }
            .sales-stair .seg .seg-label { font-size:7px; }
        }

        /* Stage detail card */
        .sales-detail-card {
            background:var(--w040); border-radius:10px; padding:16px;
            border-left:3px solid var(--sales-stage-color, #4dd0e1);
        }
        .sales-detail-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
        .sales-detail-icon { font-size:20px; }
        .sales-detail-name {
            font-size:14px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase;
            color:var(--sales-stage-color, #4dd0e1);
        }
        .sales-detail-num { font-size:10px; color:var(--text-dim); letter-spacing:1px; }
        .sales-detail-desc { font-size:13px; color:var(--text); line-height:1.6; margin-bottom:12px; }
        .sales-detail-actions-label {
            font-size:10px; letter-spacing:1px; text-transform:uppercase;
            color:var(--sales-stage-color, #4dd0e1); font-weight:700; margin-bottom:6px;
        }
        .sales-detail-actions {
            margin:0; padding-left:20px; color:var(--text);
            font-size:13px; line-height:1.6; list-style:disc;
        }
        .sales-detail-actions li { margin-bottom:4px; }

        /* Divider + bridge */
        .sales-divider { margin-top:18px; margin-bottom:18px; padding-top:18px; border-top:1px solid var(--w100); }
        .sales-bridge-grid {
            background:var(--w040); border-radius:10px; padding:14px 16px;
            display:grid; grid-template-columns:1fr 1fr; gap:12px;
        }
        .sales-bridge-label {
            font-size:10px; text-transform:uppercase; letter-spacing:1px;
            margin-bottom:4px; font-weight:700; color:#4dd0e1;
        }
        :root:not([data-theme="dark"]) .sales-bridge-label { color:#00838f; }
        .sales-bridge-label-alt { color:var(--accent); }
        .sales-bridge-text { font-size:12px; color:var(--text); line-height:1.5; }
        .sales-bridge-quote {
            font-size:11px; color:var(--text-dim); font-style:italic;
            line-height:1.6; margin-top:8px; text-align:center;
        }
        @media(max-width:600px){ .sales-bridge-grid { grid-template-columns:1fr; gap:8px; } }

        /* Sales Maker */
        .sales-maker-wrap { border-top:1px solid var(--w100); padding-top:16px; margin-top:4px; }
        .sales-maker { width:100%; max-width:520px; margin:0 auto; }
        .sales-maker-title { font-size:13px; color:#4dd0e1; font-weight:700; letter-spacing:0.5px; }
        :root:not([data-theme="dark"]) .sales-maker-title { color:#00838f; }
        .sales-maker-badge { background:#4dd0e1 !important; color:#fff !important; }
        :root:not([data-theme="dark"]) .sales-maker-badge { background:#00838f !important; color:#fff !important; }
        .sales-maker-context { font-size:11px; color:var(--text-dim); margin-bottom:8px; }
        .sales-maker-btn {
            border-color:#4dd0e1 !important; background:rgba(77,208,225,0.12) !important; color:#4dd0e1 !important;
        }
        :root:not([data-theme="dark"]) .sales-maker-btn {
            border-color:#00838f !important; background:rgba(0,131,143,0.10) !important; color:#00838f !important;
        }
        :root:not([data-theme="dark"]) .sales-maker-btn:hover { background:rgba(0,131,143,0.20) !important; }

        /* ─── Mode overlays — removed (BK mode machinery was deleted; see ponytail) ─── */

        /* ─── Toast ─── */
        .toast {
            position:fixed; bottom:env(safe-area-inset-bottom, 60px); left:50%; transform:translateX(-50%);
            padding:10px 20px; border-radius:10px;
            background:var(--k850); color: var(--text-hi); font-size:13px; font-weight:600;
            border:1px solid var(--accent); box-shadow:0 4px 20px rgba(0,0,0,0.4);
            z-index:999; animation:toast-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
            max-width:90%; text-align:center;
        }
        @keyframes toast-in { 0%{opacity:0;transform:translateX(-50%) translateY(20px)} 100%{opacity:1;transform:translateX(-50%) translateY(0)} }

        /* ponytail: .bk-btn-glow and @keyframes bk-pulse removed (1618-1630, 1643). The only caller was applyModeUI's `btn.classList.add('on')` which was deleted. */

        /* ponytail: glow active buttons during session — stronger pulse for mobile */
        .btn.glow-active { box-shadow:0 0 28px var(--accent-glow), inset 0 0 12px rgba(212,168,83,0.15); transform:translateY(-1px); }

        /* ponytail FV7.2: universal button press effect — ALL buttons */
        .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; min-width: 44px; }
        .btn:active { transform: scale(0.93); box-shadow: 0 0 18px var(--accent-glow); transition: transform 0.08s, box-shadow 0.08s; }
        .btn-primary:active { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 30px var(--accent-glow); }
        .nav-tab { min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        .nav-tab:active { transform: scale(0.95); background: rgba(212,168,83,0.2); transition: transform 0.08s; }
        .mode-card:active { transform: scale(0.97) !important; box-shadow: 0 0 20px var(--accent-glow) !important; }

        /* ponytail: tactile press on ALL interactives, not just .btn */
        .btn-icon:active, .nav-tab:active, .academy-filter:active,
        .emo-item-header:active, .spin-btn-big:active, .seg:active, .mode-toolbar .btn:active {
            transform: scale(0.94);
            filter: brightness(1.15);
            transition: transform .07s ease, filter .07s ease;
        }
        .btn, .btn-icon, .nav-tab { will-change: transform; }

        /* ponytail FV7.2: ripple on button tap */
        .btn-ripple { position: relative; overflow: hidden; }
        .btn-ripple::after { content:''; position:absolute; border-radius:50%; background:rgba(212,168,83,0.35); width:0; height:0; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); animation:none; pointer-events:none; }
        .btn-ripple.rippling::after { width:200px; height:200px; animation: btn-ripple-anim 0.4s ease-out forwards; }
        @keyframes btn-ripple-anim { to { transform:translate(-50%,-50%) scale(1); opacity:0; } }

        /* ponytail FV7.2: credits section */
        .credit-pill { display:inline-block; padding:6px 14px; border:1px solid rgba(212,168,83,0.25); border-radius:20px; font-size:11px; color:var(--w450); background:rgba(212,168,83,0.05); white-space:nowrap; transition: all 0.2s; cursor:default; }
        .credit-pill:hover { border-color:rgba(212,168,83,0.6); color:rgba(212,168,83,0.8); background:rgba(212,168,83,0.1); }

        /* ponytail: BK panel + label card + modal CSS removed (1664-1727). The HTML wrappers for label card, header, and modal were deleted with the BK mode machinery. bkPanel/bkPanelWheel are now an offscreen SVG host for the Basic mode mini wheel, so no visual CSS is needed. */

        @media (max-width: 768px) {
                    .table-surface { padding: 8px 6px; border-width: 4px; }
                    .header { flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
                    .logo h1 { font-size: 16px; }
                    .logo span { font-size: 10px; }
                    .nav-tabs { overflow: visible; flex-wrap: wrap; padding-bottom: 4px; }
                    .nav-tab { white-space: nowrap; font-size: 11px; padding: 5px 10px; }
                    .toolbar { flex-wrap: wrap; gap: 6px; }
                    .toolbar .btn { font-size: 11px; padding: 8px 12px; min-height: 40px; }
                    .toolbar .btn-sm { padding: 7px 10px; font-size: 10px; min-height: 36px; }
                    .timer-display { margin-left: 0; padding: 5px 10px; gap: 6px; flex-wrap: wrap; }
                    .timer-display .time { font-size: 28px; min-width: 75px; }
                    .timer-display input { width: 36px; font-size: 11px; }
                    /* M5.2: bigger touch target for slider on mobile */
                    .timer-display input[type="range"] { min-width:120px; height:10px; }
                    .timer-display input[type="range"]::-webkit-slider-thumb { width:28px; height:28px; }
                    .timer-display input[type="range"]::-moz-range-thumb { width:28px; height:28px; }
                    /* M5.2: keep circle large on mobile */
                    .timer-ring { width:64px; height:64px; }
                    .stats-bar { gap: 8px; font-size: 10px; }
                    .stat-item strong { font-size: 12px; }

                    /* Cards — 2-column grid on phones */
                    .cards-area { gap: 8px; justify-content: center; }
                    .tool-card { width: calc(50% - 6px); max-width: 170px; min-height: 145px; padding: 10px 8px; }
                    .tool-card .card-name { font-size: 15px; }
                    .tool-card .card-desc { font-size: 12px; line-height: 1.45; }
                    .tool-card .cat-badge { font-size: 8px; }
                    .tool-card .card-count { font-size: 9px; }

                    /* Banners */
                    .current-tool-banner { padding: 12px 16px; border-radius: 10px; }
                    .current-tool-banner .ct-name { font-size: 18px; }
                    .current-tool-banner .ct-desc { font-size: 12px; }

                    /* Stair */
                    .stair-grid { gap: 2px; }
                    .stage-card { min-width: 130px; max-width: 160px; }
                    .stage-card .stage-header { padding: 6px 10px; }
                    .stage-card .stage-name { font-size: 10px; }
                    .stage-card .stage-items li { font-size: 9px; }
                    .stage-connector { width: 14px; }
                    .stage-connector .arrow { font-size: 14px; }

                    /* Emotion wheel — mobile layout overhaul */
                    .wheel-container { gap: 6px; padding: 0; }
                    .wheel-header h2 { font-size: 18px; }
                    .wheel-header p { font-size: 11px; margin-bottom: 4px; }
                    .wheel-layout { flex-direction: column; gap: 4px; margin: 0; }
                    .wheel-canvas-wrap { max-width: 100%; width: 100%; padding: 0; }
                    /* SPIN button above wheel on mobile */
                    .wheel-spin-row { order: -1; margin-bottom: 8px; }
                    /* Slider hidden on mobile — touch drag already rotates */
                    .wheel-rotate-bar { display: none; }
                    /* Secondary controls as compact row */
                    .wheel-secondary-controls { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
                    .wheel-label-primary { font-size: 22px; }
                    .wheel-label.active-label { font-size: 28px; }
                    .wheel-label-secondary, .wheel-label-tertiary { display: none; }
                    /* Winner banner — smaller on mobile */
                    .wheel-winner { font-size: 14px !important; padding: 12px 16px !important; max-width: 95% !important; letter-spacing: 1px !important; }
                    /* Spin history */
                    .spin-history { margin: 4px 0; min-height: 24px; }
                    .spin-history .sh-chip { font-size: 10px; padding: 2px 8px; }
                    /* SPIN button full-width on mobile */
                    .spin-btn-big { width: 100%; max-width: 340px; font-size: 16px !important; padding: 16px 20px !important; }
                    /* Emotion detail as bottom-sheet style */
                    .emotion-detail { margin: 8px 0 0 !important; border-radius: 16px 16px 0 0 !important; padding: 16px !important; }
                    .emotion-detail .ed-name { font-size: 18px; }
                    .emotion-detail .ed-int { font-size: 10px; }

                    /* Session panel */
                    .session-panel { padding: 8px 12px; }
                    .session-panel .sp-item { font-size: 10px; padding: 2px 8px; }

                    /* Modal / Popover */
                    .modal { width: 95%; padding: 16px; }
                    .detail-content { width: 95%; padding: 18px; }
                    .detail-content .dc-name { font-size: 18px; }

                    /* Summary grid — single column */
                    #ctDesc > div[style*="grid"] { grid-template-columns: 1fr 1fr !important; }

                    /* Mode cards — full-width stack on mobile */
                    .mode-card { flex: 1 1 100%; max-width: 100%; padding: 14px 14px; }
                    .mode-card .mc-name { font-size: 14px; }
                    .mode-card .mc-desc { font-size: 11px; }
                    .mode-card .mc-hint { font-size: 9px; }
                    .mode-grid { gap: 10px; flex: 1; align-content: start; }
                    .mode-wrap { padding: 0; flex: 1; display: flex; flex-direction: column; }
                    .mode-header h2 { font-size: 16px; }
                    .mode-header p { font-size: 11px; }
                    .mode-toolbar .btn { font-size: 9px; padding: 6px 12px; }
                    .mode-scenario { padding: 14px 16px; margin: 10px 0; }
                    .mode-scenario .ms-title { font-size: 17px; }
                    .mode-scenario .ms-approach { font-size: 12px; }
                    .mode-scenario .ms-script { font-size: 13px; }

                    /* Focus mode hint on mobile */
                    .focus-hint { font-size: 10px; }

                    /* Kill tab/view transitions on mobile — causes flicker/position issues */
                    .nav-tab { transition: none !important; }
                    .view-container { animation: none !important; }
                }

/* ─── Gold coin burst (casino feel) ─── */
@keyframes zen-ripple {0%{opacity:.5;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.zen-ripple{position:fixed;pointer-events:none;z-index:9999;width:120px;height:120px;border-radius:50%;
border:2px solid var(--accent);box-shadow:0 0 24px var(--accent-glow);
animation:zen-ripple .65s ease-out forwards;}

/* ─── Mode deck info pill ─── */
.mode-deck-info {
    font-size: 11px;
    color: var(--w400);
    text-align: center;
    margin: 4px 0 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.mode-deck-info span { color: var(--accent); font-size: 13px; }

/* ─── Warrior Mode: Castle Wall Background ─── */
/* 90s pixel-art castle battlements using CSS only */
.warrior-castle-bg {
    position: relative;
}
.warrior-castle-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    z-index: 0;
    /* Stone wall: staggered grey brick pattern */
    background-color: #1a1614;
    background-image:
        /* Mortar lines horizontal */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 18px,
            rgba(0,0,0,0.55) 18px,
            rgba(0,0,0,0.55) 20px
        ),
        /* Mortar lines vertical — offset every other row */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 36px,
            rgba(0,0,0,0.4) 36px,
            rgba(0,0,0,0.4) 38px
        ),
        /* Stone color variation — give bricks a carved feel */
        repeating-linear-gradient(
            180deg,
            rgba(90,78,70,0.25) 0px,
            rgba(70,60,54,0.18) 9px,
            rgba(90,78,70,0.25) 18px
        );
    pointer-events: none;
}
/* Crenellation (battlements) silhouette at the top */
.warrior-castle-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 16px;
    border-radius: 14px 14px 0 0;
    z-index: 1;
    pointer-events: none;
    /* Pixel-art crenellations: alternating solid/gap */
    background: repeating-linear-gradient(
        90deg,
        rgba(50,42,38,0.9) 0px,
        rgba(50,42,38,0.9) 14px,
        transparent 14px,
        transparent 28px
    );
}
.warrior-castle-bg > div {
    position: relative;
    z-index: 2;
}
/* Green Room check items */
.gr-check-item.checked {
    opacity: 0.65;
    background: rgba(212,168,83,0.05) !important;
}
.gr-check-item.checked .gr-circle {
    background: var(--accent);
    border-color: var(--accent);
}
.gr-check-item:active { transform: scale(0.98); }
@media (max-width: 600px) {
    .gr-check-item { padding: 12px 12px !important; }
    .gr-check-item div[style*="font-size:14px"] { font-size: 13px !important; }
}

/* ─── Preparation (Negotiation One-Sheet) — theme-aware ─── */
.prep-wrap { max-width: 720px; }
.prep-title {
    color: var(--text-hi);
    text-shadow: 2px 2px 0 var(--w250), 0 0 30px var(--accent-glow);
}
.prep-source {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    font-style: italic;
}
.prep-panel {
    background: var(--surface-1);
    border: 1px solid var(--w100);
    border-radius: 14px;
    padding: 24px 20px;
}
/* Progress bar */
.prep-progress-track {
    width: 100%;
    height: 4px;
    background: var(--w040);
    border-radius: 2px;
    margin-bottom: 6px;
    overflow: hidden;
}
.prep-progress-fill {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.4s;
    box-shadow: 0 0 8px var(--accent-glow);
}
.prep-progress-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}
/* 6:1 Ratio Banner */
.prep-ratio-banner {
    background: var(--surface-2);
    border: 1px solid var(--w100);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.prep-ratio-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.prep-ratio-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.7;
}
.prep-ratio-item strong {
    color: var(--accent);
    font-size: 14px;
}
.prep-ratio-sep {
    color: var(--text-dim);
    font-size: 10px;
}
.prep-ratio-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 6px;
    font-style: italic;
}
/* Count pills — show ratio completion per section */
.prep-count-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--w100);
    color: var(--text-dim);
    margin-left: 6px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.prep-count-pill.prep-count-met {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 6px var(--accent-glow);
}
.prep-count-pill.prep-count-sub {
    font-size: 9px;
    padding: 1px 6px;
}
/* Ratio coaching hint under sections */
.prep-ratio-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--w060);
    line-height: 1.55;
}
/* Black Swan Hunt sub-box inside Goal section */
.prep-bs-hunt {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--w040);
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}
.prep-bs-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.prep-bs-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
.prep-bs-item .prep-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
}
.prep-bs-item.checked .prep-circle {
    background: var(--accent);
    color: var(--on-accent);
}
.prep-bs-item.checked { opacity: 0.6; }
/* CALMAR panel — shared between Tool Deck and Listen For */
.calmar-panel {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--w100);
}
.calmar-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.calmar-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.calmar-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
    font-style: italic;
}
.calmar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.calmar-letter {
    background: var(--w040);
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    transition: all 0.2s;
}
.calmar-letter:hover { background: var(--w060); }
.calmar-letter-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.calmar-letter-char {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
}
.calmar-letter-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-hi);
    letter-spacing: 0.3px;
}
.calmar-letter-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.55;
}
/* Sections */
.prep-section {
    margin-bottom: 22px;
    padding: 16px 16px 18px;
    background: var(--w040);
    border-radius: 12px;
    border-left: 4px solid var(--prep-color, var(--accent));
}
.prep-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.prep-section-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--prep-color, var(--accent));
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.prep-section-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-hi);
    letter-spacing: 0.3px;
}
.prep-section-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.55;
    margin-top: 3px;
}
/* Checklist items (Goal section) */
.prep-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prep-check-item {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--prep-color, var(--accent));
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.prep-check-item:active { transform: scale(0.98); }
.prep-check-item.checked {
    opacity: 0.6;
}
.prep-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--prep-color, var(--accent));
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--surface-2);
    transition: all 0.25s;
}
.prep-check-item.checked .prep-circle {
    background: var(--prep-color, var(--accent));
    border-color: var(--prep-color, var(--accent));
}
/* Calibrated questions */
.prep-q-group { margin-bottom: 14px; }
.prep-q-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--prep-color, var(--accent));
    margin-bottom: 6px;
}
.prep-question {
    background: var(--surface-2);
    border: 1px solid var(--w080);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
.prep-question:hover { border-color: var(--prep-color, var(--accent)); }
.prep-question:active { transform: scale(0.98); }
.prep-question.checked {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: var(--prep-color, var(--accent));
}
/* Text inputs */
.prep-text-input, .prep-textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--w100);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}
.prep-text-input:focus, .prep-textarea:focus {
    outline: none;
    border-color: var(--prep-color, var(--accent));
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.prep-text-input::placeholder, .prep-textarea::placeholder {
    color: var(--text-dim);
    opacity: 0.6;
}
/* Label fill-in rows (Accusation Audit + Follow-Up Labels) */
.prep-label-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prep-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.prep-label-text { color: var(--text-dim); }
.prep-blank {
    flex: 1;
    min-width: 80px;
    padding: 6px 10px;
    background: var(--surface-1);
    border: 1px solid var(--w100);
    border-radius: 6px;
    color: var(--text-hi);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.prep-blank:focus {
    outline: none;
    border-color: var(--prep-color, var(--accent));
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.prep-blank::placeholder { color: var(--text-dim); opacity: 0.5; }
/* Completion state */
.prep-complete {
    display: none;
    text-align: center;
    margin-top: 16px;
    padding: 16px;
    background: var(--w040);
    border-radius: 10px;
    border: 1px solid var(--accent);
    animation: card-pop 0.4s both;
}
.prep-complete-icon { font-size: 22px; margin-bottom: 4px; }
.prep-complete-text { font-size: 14px; color: var(--text-hi); font-weight: 700; }
/* Reset button */
.prep-reset-row { text-align: center; margin-top: 12px; }
.prep-reset-row .btn { font-size: 12px; padding: 8px 16px; opacity: 0.75; }
/* Footnote */
.prep-footnote {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--w080);
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
/* Mobile adjustments */
@media (max-width: 600px) {
    .prep-panel { padding: 18px 14px; }
    .prep-section { padding: 14px 12px 16px; }
    .prep-section-name { font-size: 14px; }
    .prep-check-item, .prep-question { font-size: 12.5px; }
    .prep-label-row { font-size: 12px; }
}

/* ─── Red Flags from the Counterpart (Preparation tab) ─── */
.rf-panel {
    margin-top: 18px;
    background: var(--w040);
    border: 1px solid var(--w100);
    border-left: 4px solid #ff3b3b;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.25s, border-color 0.25s;
}
.rf-panel[open] {
    box-shadow: 0 0 18px rgba(255,59,59,0.08);
    border-left-color: #ff3b3b;
}
:root:not([data-theme="dark"]) .rf-panel[open] {
    box-shadow: 0 0 18px rgba(198,40,40,0.10);
}
.rf-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    background: transparent; width: 100%; box-sizing: border-box;
    text-align: left;
}
.rf-summary::-webkit-details-marker { display: none; }
.rf-summary:active { transform: scale(0.99); }
.rf-flag-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.rf-summary-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rf-summary-title {
    font-size: 14px; font-weight: 800; color: var(--text-hi);
    letter-spacing: 0.3px;
}
.rf-summary-sub {
    font-size: 11px; color: var(--text-dim); line-height: 1.4;
}
.rf-chevron {
    font-size: 10px; color: var(--text-dim);
    transition: transform 0.25s; flex-shrink: 0;
}
.rf-panel[open] .rf-chevron { transform: rotate(180deg); }
.rf-body {
    padding: 0 16px 16px;
    animation: rf-fade-in 0.3s ease both;
}
@keyframes rf-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rf-intro {
    font-size: 12.5px; line-height: 1.6; color: var(--text);
    padding: 12px 14px; background: var(--surface-2);
    border-radius: 10px; margin-bottom: 16px;
    border-left: 3px solid #ff3b3b;
}
:root:not([data-theme="dark"]) .rf-intro { border-left-color: #C62828; }
.rf-group { margin-bottom: 16px; }
.rf-group-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 10px;
}
.rf-group-num {
    font-size: 18px; font-weight: 800; line-height: 1;
    color: var(--rf-color, #ff3b3b); flex-shrink: 0; margin-top: 1px;
}
.rf-group-name {
    font-size: 14px; font-weight: 800; color: var(--text-hi);
    letter-spacing: 0.3px;
}
.rf-group-desc {
    font-size: 11px; color: var(--text-dim);
    line-height: 1.5; margin-top: 2px;
}
.rf-phrase-list {
    display: flex; flex-direction: column; gap: 8px;
}
.rf-phrase {
    background: var(--surface-2);
    border: 1px solid var(--w080);
    border-left: 3px solid var(--rf-color, #ff3b3b);
    border-radius: 10px;
    padding: 10px 12px;
}
.rf-phrase-text {
    font-size: 13.5px; font-weight: 700; color: var(--text-hi);
    margin-bottom: 6px; line-height: 1.4;
}
.rf-why, .rf-move {
    font-size: 12px; color: var(--text); line-height: 1.5;
    padding: 4px 0;
}
.rf-why { margin-bottom: 2px; }
.rf-why-k, .rf-move-k {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--rf-color, #ff3b3b);
    margin-right: 6px;
}
:root:not([data-theme="dark"]) .rf-why-k,
:root:not([data-theme="dark"]) .rf-move-k { color: #9C5122; }
.rf-warning {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 14px; padding: 10px 12px;
    background: rgba(255,59,59,0.06);
    border: 1px solid rgba(255,59,59,0.18);
    border-radius: 10px;
    font-size: 12px; color: var(--text); line-height: 1.5;
}
:root:not([data-theme="dark"]) .rf-warning {
    background: rgba(198,40,40,0.05);
    border-color: rgba(198,40,40,0.18);
}
.rf-warning-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.rf-warning strong { color: #ff3b3b; }
:root:not([data-theme="dark"]) .rf-warning strong { color: #C62828; }
.rf-source {
    margin-top: 12px; font-size: 10px; color: var(--text-dim);
    font-style: italic; text-align: right;
}
@media (max-width: 600px) {
    .rf-body { padding: 0 12px 14px; }
    .rf-summary { padding: 12px 14px; }
    .rf-summary-title { font-size: 13px; }
    .rf-phrase-text { font-size: 13px; }
    .rf-why, .rf-move { font-size: 11.5px; }
}

/* ─── Counterpart Scanner (Preparation tab) ─── */
.cp-scanner {
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--w100);
}
.cp-scanner-head { text-align:center; margin-bottom: 14px; }
.cp-scanner-label {
    font-size:13px; letter-spacing:2px; text-transform:uppercase;
    color: var(--accent); font-weight:800;
}
:root:not([data-theme="dark"]) .cp-scanner-label { color:#9C5122; }
.cp-scanner-sub {
    font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.5;
    max-width: 480px; margin-left:auto; margin-right:auto;
}
.cp-quiz { display:flex; flex-direction:column; gap:10px; }
.cp-q {
    background: var(--w040); border-radius:10px; padding:12px 14px;
    border-left: 3px solid var(--w180);
}
.cp-q-num {
    font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color: var(--accent); margin-bottom: 4px;
}
:root:not([data-theme="dark"]) .cp-q-num { color:#9C5122; }
.cp-q-text { font-size:14px; font-weight:600; color: var(--text); margin-bottom: 8px; }
.cp-opts { display:flex; flex-direction:column; gap:6px; }
.cp-opt {
    display:flex; align-items:flex-start; gap:10px; width:100%;
    background: var(--surface-2); border:1px solid var(--w120); border-radius:8px;
    padding:10px 12px; cursor:pointer; touch-action:manipulation;
    text-align:left; transition: all .2s; -webkit-tap-highlight-color:transparent;
}
.cp-opt:active { transform:scale(0.98); }
.cp-opt:hover { border-color: var(--w300); }
.cp-opt.selected {
    border-color: var(--accent); background: rgba(212,168,83,0.08);
}
:root:not([data-theme="dark"]) .cp-opt.selected { background: rgba(156,81,34,0.08); }
.cp-opt-radio {
    width:16px; height:16px; border-radius:50%; border:2px solid var(--w300);
    flex-shrink:0; margin-top:2px; transition: all .2s;
}
.cp-opt.selected .cp-opt-radio {
    border-color: var(--accent); background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}
.cp-opt-text { font-size:13px; color:var(--text); line-height:1.45; }

.cp-progress-wrap {
    display:flex; align-items:center; gap:10px; margin-top:12px;
}
.cp-progress-bar {
    flex:1; height:4px; background: var(--w080); border-radius:2px; overflow:hidden;
}
.cp-progress-fill {
    height:4px; background: var(--accent); border-radius:2px; width:0%;
    transition: width .4s; box-shadow: 0 0 8px var(--accent-glow);
}
.cp-progress-text { font-size:11px; color:var(--text-dim); font-weight:700; white-space:nowrap; }

.cp-actions { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.cp-btn {
    font-size:12px !important; padding:8px 16px !important;
    border-radius:8px; min-height:40px;
}
.cp-btn-primary {
    border-color: var(--accent) !important;
    background: rgba(212,168,83,0.12) !important;
    color: var(--accent) !important;
    font-weight:700;
}
:root:not([data-theme="dark"]) .cp-btn-primary {
    background: rgba(156,81,34,0.10) !important;
}
.cp-btn-primary:hover:not(:disabled) {
    background: rgba(212,168,83,0.20) !important;
}
:root:not([data-theme="dark"]) .cp-btn-primary:hover:not(:disabled) {
    background: rgba(156,81,34,0.18) !important;
}
.cp-btn-primary:disabled { opacity:0.4; cursor:not-allowed; }

.cp-result { display:none; margin-top:16px; animation: card-pop .4s both; }
.cp-result-head {
    display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.cp-result-icon { font-size:28px; }
.cp-result-name {
    font-size:18px; font-weight:800; letter-spacing:0.5px;
}
.cp-result-match {
    font-size:12px; color:var(--text-dim); margin-bottom:12px; font-style:italic;
}
.cp-result-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.cp-cell {
    background: var(--w040); border-radius:8px; padding:10px 12px;
    border-left: 3px solid var(--cp-color, var(--accent));
}
.cp-cell-tools { grid-column: 1 / -1; }
.cp-cell-warn { grid-column: 1 / -1; }
.cp-cell-label {
    font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    color: var(--cp-color, var(--accent)); margin-bottom:4px;
}
.cp-cell-text { font-size:12px; color:var(--text); line-height:1.5; }
.cp-cell-text ul { margin:0; padding-left:16px; }
.cp-cell-text li { margin-bottom:3px; }
.cp-result-worst {
    margin-top:10px; font-size:12px; color:var(--text-dim);
    text-align:center; padding:8px;
    background: rgba(255,59,59,0.06); border-radius:8px;
    border:1px solid rgba(255,59,59,0.15);
}
:root:not([data-theme="dark"]) .cp-result-worst {
    background: rgba(198,40,40,0.05); border-color: rgba(198,40,40,0.15);
}
.cp-result-worst strong { color:#ff3b3b; }
:root:not([data-theme="dark"]) .cp-result-worst strong { color:#C62828; }

/* Warning & self-test rows (training-enhanced) */
.cp-result-warning {
    margin-top:10px; font-size:12px; color:var(--text);
    padding:10px 12px; background: rgba(255,59,59,0.06);
    border-radius:8px; border-left:3px solid #ff3b3b;
    line-height:1.55;
}
:root:not([data-theme="dark"]) .cp-result-warning {
    background: rgba(198,40,40,0.05);
}
.cp-result-warning strong { color:#ff3b3b; }
:root:not([data-theme="dark"]) .cp-result-warning strong { color:#C62828; }
.cp-result-selftest {
    margin-top:8px; font-size:12px; color:var(--text);
    padding:10px 12px; background: var(--w040);
    border-radius:8px; border-left:3px solid var(--accent);
    line-height:1.55;
}
.cp-result-selftest strong { color:var(--accent); }
.cp-tc-warn .cp-tc-v, .cp-tc-selftest .cp-tc-v { font-size:12px; line-height:1.5; }

/* All-types reference cards */
.cp-type-cards { margin-top:16px; }
.cp-cards-label {
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--text-dim); text-align:center; margin-bottom:8px;
}
.cp-type-card {
    background: var(--w040); border-radius:10px; margin-bottom:8px;
    border:1px solid var(--w120); border-left:3px solid var(--cp-color, var(--accent));
    overflow:hidden;
}
.cp-type-card.active {
    box-shadow: 0 0 12px color-mix(in srgb, var(--cp-color) 25%, transparent);
}
.cp-type-card summary {
    display:flex; align-items:center; gap:8px; padding:12px 14px;
    cursor:pointer; list-style:none; touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}
.cp-type-card summary::-webkit-details-marker { display:none; }
.cp-type-card summary:active { transform:scale(0.99); }
.cp-tc-icon { font-size:18px; }
.cp-tc-name { font-size:14px; font-weight:800; flex:1; }
.cp-tc-chevron { font-size:10px; color:var(--text-dim); transition: transform .2s; }
.cp-type-card[open] .cp-tc-chevron { transform: rotate(180deg); }
.cp-tc-body {
    padding: 0 14px 12px 14px;
    display:flex; flex-direction:column; gap:6px;
}
.cp-tc-row {
    display:flex; gap:8px; font-size:12px; line-height:1.45;
    padding:4px 0; border-bottom:1px solid var(--w080);
}
.cp-tc-row:last-child { border-bottom:none; }
.cp-tc-k {
    font-size:9px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--text-dim); flex-shrink:0; width:88px; padding-top:2px;
}
.cp-tc-v { color:var(--text); flex:1; }
.cp-tc-worst .cp-tc-v { color:#ff3b3b; font-weight:700; }
:root:not([data-theme="dark"]) .cp-tc-worst .cp-tc-v { color:#C62828; }

@media(max-width:600px){
    .cp-result-grid { grid-template-columns:1fr; }
    .cp-cell-tools, .cp-cell-warn { grid-column:auto; }
    .cp-tc-k { width:72px; }
}

/* ─── Persuasion (Cialdini — Influence + Pre-Suasion) ─── */
.persuasion-title {
    color: #e91e63;
    text-shadow: 2px 2px 0 var(--k400), 0 0 30px rgba(233,30,99,0.25);
}
:root:not([data-theme="dark"]) .persuasion-title { text-shadow: none; color: #C2185B; }
.persuasion-panel {
    background: var(--surface-1);
    padding: 24px 20px;
    border: 1px solid var(--w100);
    border-radius: 14px;
}
.persuasion-section-intro { text-align: center; margin-bottom: 16px; }
.persuasion-section-label {
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    color: #e91e63; font-weight: 800;
}
:root:not([data-theme="dark"]) .persuasion-section-label { color: #C2185B; }
.persuasion-section-sub {
    font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.5;
}

/* Attention grabbers grid */
.persuasion-attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px; margin-bottom: 18px;
}
.persuasion-attention-card {
    background: var(--w040);
    border: 1px solid var(--w100);
    border-left: 3px solid #e91e63;
    border-radius: 10px;
    padding: 12px;
    animation: lm-print 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
:root:not([data-theme="dark"]) .persuasion-attention-card { border-left-color: #C2185B; }
.persuasion-attention-icon { font-size: 18px; margin-bottom: 4px; }
.persuasion-attention-name {
    font-size: 12px; font-weight: 800; color: #e91e63; margin-bottom: 4px;
}
:root:not([data-theme="dark"]) .persuasion-attention-name { color: #C2185B; }
.persuasion-attention-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

/* Stair (7 principles) */
.persuasion-divider { margin-top: 18px; margin-bottom: 18px; padding-top: 18px; border-top: 1px solid var(--w100); }
.persuasion-stair {
    width: 100%; display: flex; gap: 0; margin: 8px 0 6px;
    position: relative; z-index: 10; flex-wrap: wrap;
}
.persuasion-stair .seg {
    flex: 1; min-width: 80px; height: 44px; border-radius: 0;
    border: 1px solid var(--w080); border-right: none;
    background: var(--w040);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    color: var(--w250); transition: all .5s ease;
    overflow: hidden; white-space: nowrap; position: relative;
    cursor: pointer; touch-action: manipulation; padding: 2px 1px;
}
.persuasion-stair .seg:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid var(--w080); }
.persuasion-stair .seg:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid var(--w080); }
.persuasion-stair .seg:active { transform: scale(0.97); }
.persuasion-stair .seg .seg-label { font-size: 8px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.persuasion-stair .seg .seg-count { position: absolute; top: 2px; right: 4px; font-size: 8px; font-weight: 700; opacity: .5; }
.persuasion-stair .seg .seg-icon { font-size: 14px; opacity: 0.3; }
.persuasion-stair .seg.lit .seg-icon,
.persuasion-stair .seg.current .seg-icon { opacity: 1; }
.persuasion-stair .seg.done {
    background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 40%, transparent), var(--p-color), color-mix(in srgb, var(--p-color) 40%, transparent));
    background-size: 200% 100%;
    animation: sm-flame-sweep 1.8s linear infinite;
    border-color: var(--p-color); color: #fff;
    box-shadow: 0 0 8px color-mix(in srgb, var(--p-color) 35%, transparent);
}
.persuasion-stair .seg.current {
    background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--p-color) 30%, transparent), var(--p-color), color-mix(in srgb, var(--p-color) 30%, transparent), var(--surface-2));
    background-size: 200% 100%;
    animation: sm-flame-sweep 1.2s linear infinite, sm-pulse 1.4s ease-in-out infinite;
    border-color: var(--p-color); color: #fff;
    box-shadow: 0 0 20px color-mix(in srgb, var(--p-color) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.persuasion-stair .seg.activate { animation: sm-bounce .6s cubic-bezier(.34,1.56,.64,1); }
.persuasion-stair-hint { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 6px; }
@media(max-width:600px){
    .persuasion-stair .seg { height: 36px; font-size: 7px; gap: 1px; padding: 2px 0; min-width: 70px; }
    .persuasion-stair .seg .seg-icon { font-size: 12px; }
    .persuasion-stair .seg .seg-count { display: none; }
    .persuasion-stair .seg .seg-label { font-size: 7px; }
}

/* Principle detail card */
.persuasion-detail-card {
    background: var(--w040); border-radius: 10px; padding: 16px;
    border-left: 3px solid var(--p-color, #e91e63);
}
.persuasion-detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.persuasion-detail-icon { font-size: 20px; }
.persuasion-detail-name {
    font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--p-color, #e91e63);
}
.persuasion-detail-num { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.persuasion-detail-desc { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 12px; }
.persuasion-detail-actions-label {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--p-color, #e91e63); font-weight: 700; margin-bottom: 6px;
}
.persuasion-detail-actions {
    margin: 0; padding-left: 20px; color: var(--text);
    font-size: 13px; line-height: 1.6; list-style: disc;
}
.persuasion-detail-actions li { margin-bottom: 4px; }
.persuasion-detail-negotiation {
    font-size: 13px; color: var(--text); line-height: 1.6;
    padding: 12px; background: color-mix(in srgb, var(--p-color, #e91e63) 6%, transparent);
    border-radius: 8px; border-left: 2px solid var(--p-color, #e91e63);
    font-style: italic;
}

/* Influence Sequence */
.persuasion-sequence {
    display: flex; align-items: stretch; gap: 6px; margin: 10px 0 14px;
    flex-wrap: wrap;
}
.persuasion-seq-step {
    flex: 1; min-width: 130px;
    background: var(--w040); border-radius: 10px; padding: 12px;
    border-top: 3px solid var(--accent);
}
.persuasion-seq-num {
    width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
    color: var(--on-accent); font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.persuasion-seq-title { font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
:root:not([data-theme="dark"]) .persuasion-seq-title { color: #9C5122; }
.persuasion-seq-text { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.persuasion-seq-arrow {
    font-size: 18px; color: var(--text-dim); align-self: center; flex-shrink: 0;
}
.persuasion-bridge-quote {
    font-size: 11px; color: var(--text-dim); font-style: italic;
    line-height: 1.6; margin-top: 8px; text-align: center;
}
@media(max-width:600px){
    .persuasion-sequence { flex-direction: column; }
    .persuasion-seq-arrow { transform: rotate(90deg); text-align: center; }
    .persuasion-attention-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Tactics Checklist (practice companion — Mock Negotiation Guide) ─── */
.tc-panel {
    margin-top: 18px;
    background: var(--surface-1);
    border: 1px solid var(--w100);
    border-radius: 12px;
    overflow: hidden;
}
.tc-panel[open] {
    border-color: var(--w180);
}
:root:not([data-theme="dark"]) .tc-panel[open] {
    border-color: var(--w200);
}
.tc-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.tc-summary::-webkit-details-marker { display: none; }
.tc-summary:active { transform: scale(0.99); }
.tc-flag-icon { font-size: 18px; flex-shrink: 0; }
.tc-summary-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tc-summary-title {
    font-size: 14px; font-weight: 800;
    color: var(--accent);
}
:root:not([data-theme="dark"]) .tc-summary-title { color: #9C5122; }
.tc-summary-sub {
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
}
.tc-summary-sub strong {
    color: var(--accent); font-weight: 700;
}
:root:not([data-theme="dark"]) .tc-summary-sub strong { color: #9C5122; }
.tc-chevron {
    font-size: 10px; color: var(--text-dim);
    transition: transform 0.2s; flex-shrink: 0;
}
.tc-panel[open] .tc-chevron { transform: rotate(180deg); }
.tc-body {
    padding: 4px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--w040);
    border-radius: 10px;
    border-left: 3px solid var(--w180);
    cursor: pointer;
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tc-item:active { transform: scale(0.98); }
.tc-item.checked {
    opacity: 0.6;
    background: rgba(212,168,83,0.06);
    border-left-color: var(--accent);
}
:root:not([data-theme="dark"]) .tc-item.checked {
    background: rgba(156,81,34,0.05);
}
.tc-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--w300);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.25s;
}
.tc-item.checked .tc-check {
    border-color: var(--accent);
    background: var(--accent);
}
.tc-item.checked .tc-check::after {
    content: '✓';
    color: var(--on-accent);
    font-weight: 900;
    font-size: 12px;
}
.tc-info { flex: 1; }
.tc-name {
    font-size: 13px; font-weight: 700;
    color: var(--text); margin-bottom: 2px;
}
.tc-desc {
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
}
.tc-reset-btn {
    font-size: 11px !important;
    padding: 6px 14px !important;
    border-radius: 8px;
    min-height: 36px;
    opacity: 0.75;
}
@media(max-width:600px){
    .tc-body { padding: 4px 12px 14px 12px; }
    .tc-summary { padding: 12px 14px; }
    .tc-summary-title { font-size: 13px; }
    .tc-item { padding: 10px 12px; }
    .tc-name { font-size: 12px; }
    .tc-desc { font-size: 10px; }
}

/* ─── Extra-small screens (< 400px) ─── */
@media (max-width: 399px) {
    .wheel-canvas-wrap { padding: 0; }
    .wheel-canvas-wrap svg { width: 100%; max-width: 100%; max-height: 75vw; }
    .emotion-detail .ed-name { font-size: 16px; }
    .emotion-detail .ed-int { font-size: 9px; padding: 2px 7px; }
    .spin-btn-big { font-size: 14px !important; }
}

/* ─── Sticky SPIN on very small screens ─── */
@media (max-width: 479px) {
    #view-wheel.active .wheel-spin-row {
        position: sticky;
        bottom: 12px;
        z-index: 50;
        background: transparent;
        padding: 4px;
        filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
    }
}

/* ─── Mobile drag hint ─── */
.wheel-mobile-hint {
    display: none;
    text-align: center;
    font-size: 11px;
    color: var(--w300);
    margin: 2px 0 4px;
    animation: fade-up 0.5s 1s both;
}
@media (max-width: 768px) {
    .wheel-mobile-hint { display: block; }
}
/* ponytail: Press the wheel — pulsing button next to the main wheel */
.wheel-press-hint { display:inline-block; margin:6px 4px; padding:6px 14px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#d4a853; background:rgba(212,168,83,0.08); border:1px solid rgba(212,168,83,0.35); border-radius:20px; animation: wheel-press-pulse 1.8s ease-in-out infinite; cursor:pointer; }
@keyframes wheel-press-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(212,168,83,0.4)} 50%{box-shadow:0 0 0 8px rgba(212,168,83,0)} }

        /* ponytail: stat cards for session summary */
        .sum-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:12px 0; }
        .sum-card { background:var(--w050); border:1px solid var(--w080);
            border-radius:12px; padding:14px 10px; text-align:center;
            animation: card-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
        .sum-card:nth-child(2){animation-delay:.08s} .sum-card:nth-child(3){animation-delay:.16s} .sum-card:nth-child(4){animation-delay:.24s}
        .sum-card .sc-icon { font-size:22px; margin-bottom:4px; }
        .sum-card .sc-num { font-size:26px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
        .sum-card .sc-label { font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:var(--w400); margin-top:2px; }
        @keyframes card-pop { 0%{opacity:0;transform:scale(.6) translateY(8px)} 100%{opacity:1;transform:scale(1) translateY(0)} }

        /* ponytail: shimmer sweep on money CTAs — Calendly + Manual only */
        .cta-shine { position:relative; overflow:hidden; }
        .cta-shine::before { content:''; position:absolute; top:0; left:-80%; width:60%; height:100%;
            background:linear-gradient(105deg, transparent, var(--w350), transparent);
            transform:skewX(-20deg); animation: cta-sweep 3.5s ease-in-out infinite; }
        @keyframes cta-sweep { 0%,60%{left:-80%} 100%{left:130%} }
        /* hierarchy: primary CTA bigger, secondary quieter */
        .cta-primary { font-size:15px !important; padding:14px 26px !important; }
        .cta-secondary { opacity:.75; font-size:12px !important; padding:10px 16px !important; }

        /* Paid users do not get sold the books.
           `.promo-book` marks every Gumroad / Field Manual placement. When the
           user has paid — broker token or account entitlement, see
           paidAccessActive() in js/app-shell.js — <body> gets .paid-user and
           they all disappear. Coaching CTAs are deliberately NOT marked: that
           is a service a paying subscriber may still want, and the ask was to
           keep it.
           Declarative on purpose. Toggling display in JS means storing and
           restoring each element's original value (flex vs block vs
           inline-block), which is exactly the kind of bookkeeping that rots.
           Mark new promos with .promo-book and they are handled. */
        body.paid-user .promo-book { display: none !important; }

        /* ══════════════════════════════════════════════════════════
           HAGGLE DASHBOARD — ponytail: full deck-style layout for the
           haggle tab. Mobile = single column stack (iPhone), desktop =
           left column (scenario + labels) + right rail (timer + wheel).
           ══════════════════════════════════════════════════════════ */
        .hg-wrap { max-width: 1280px; }
        .hg-stats {
            display:flex; gap:16px; width:100%; max-width:1100px;
            padding:8px 4px; margin-bottom:4px;
        }
        .hg-stats .stat-item { font-size:11px; color:var(--w450); text-transform:uppercase; letter-spacing:1px; }
        .hg-stats .stat-item strong { color:#ff5ea8; font-weight:800; margin-left:4px; }
        .hg-toolbar { gap:8px; flex-wrap:wrap; }
        .hg-toolbar .btn-primary { background:linear-gradient(135deg,#ff5ea8,#c2185b); border:none; }

        /* haggle label maker — pink accent to match mode color */
        .hg-label-maker { border-top:2px solid #ff5ea8; }
        .hg-label-maker .lm-header h3 { color:#ff5ea8; }
        .hg-label-maker .lm-count { background:rgba(255,94,168,0.15); color:#ff5ea8; border:1px solid rgba(255,94,168,0.3); }

        /* deal clock */
        .hg-timer {
            background:var(--surface-1); border:1px solid rgba(255,94,168,0.2);
            border-radius:14px; padding:14px 16px; margin-bottom:14px;
            display:flex; flex-wrap:wrap; align-items:center; gap:10px;
        }
        .hg-timer .timer-label { color:#ff5ea8; font-size:10px; letter-spacing:1.5px; font-weight:700; width:100%; }
        .hg-timer input[type=range] { flex:1; min-width:100px; accent-color:#ff5ea8; }
        .hg-dur { color:var(--w600); font-weight:700; font-size:14px; }
        .hg-dur-unit { color:var(--w300); font-size:11px; }
        .hg-time {
            font-size:34px; font-weight:800; color: var(--text-hi); font-variant-numeric:tabular-nums;
            text-shadow:0 0 18px rgba(255,94,168,0.35); width:100%; text-align:center;
        }
        .hg-timer-btns { display:flex; gap:8px; width:100%; justify-content:center; }
        .hg-timer-btns .btn { min-width:44px; }
        .hg-time.hg-running { color:#ff5ea8; animation:hg-pulse 1.2s ease-in-out infinite; }
        @keyframes hg-pulse { 0%,100%{opacity:1} 50%{opacity:.72} }

        /* haggle wheel */
        .hg-wheel { background:var(--surface-1); border:1px solid rgba(255,94,168,0.15); border-radius:14px; padding:12px; }
        .hg-wheel-title { font-size:12px; font-weight:700; color:var(--w700); letter-spacing:1px; text-align:center; margin-bottom:8px; }
        #hgWheelCanvas svg { width:100%; height:auto; display:block; }

        /* mobile: single column stack (iPhone-first) */
        #view-haggle.active .hg-wrap { display:flex; flex-direction:column; align-items:center; }
        #view-haggle.active .hg-rail { width:100%; max-width:480px; margin-top:18px; }
        /* ponytail: legacy scenario card grid hidden on ALL sizes — the dashboard
           uses the scenario panel + haggle label maker instead */
        #view-haggle.active .mode-grid { display:none !important; }
        /* ponytail: scenario panel text must never clip on narrow phones */
        #view-haggle.active .mode-scenario { max-width:100%; overflow-wrap:break-word; }
        #view-haggle.active .mode-scenario .ms-approach,
        #view-haggle.active .mode-scenario .ms-script { word-break:break-word; overflow-wrap:anywhere; }

        /* desktop: 2-col — content left, rail right (mirrors main deck layout) */
        @media (min-width: 1024px) {
            #view-haggle.active .hg-wrap {
                display:grid !important;
                grid-template-columns: minmax(0,1fr) 360px;
                grid-template-areas:
                    "hdr   rail"
                    "stats rail"
                    "tools rail"
                    "info  rail"
                    "scen  rail"
                    "grid  rail"
                    "lm    rail";
                column-gap:22px; align-items:start; align-content:start;
                position:relative; padding-right:0;
            }
            #view-haggle.active .mode-header { grid-area:hdr; }
            #view-haggle.active .hg-stats { grid-area:stats; }
            #view-haggle.active .hg-toolbar { grid-area:tools; }
            #view-haggle.active .mode-deck-info { grid-area:info; }
            #view-haggle.active .mode-scenario { grid-area:scen; }
            #view-haggle.active .mode-grid { grid-area:grid; display:none !important; } /* ponytail: legacy scenario grid hidden — dashboard uses the scenario panel + LM */
            #view-haggle.active .hg-label-maker { grid-area:lm; margin-top:16px; max-width:none; }
            #view-haggle.active .hg-label-maker .lm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
            #view-haggle.active .hg-rail {
                grid-area:rail; margin-top:0; max-width:none;
                position:sticky; top:12px; align-self:start;
            }
        }

        /* ═══ MODE DASHBOARDS (friend/boss/mediator) — shared layout, per-mode accent ═══ */
        .md-wrap { max-width: 1280px; }
        .md-stats { display:flex; gap:16px; width:100%; max-width:1100px; padding:8px 4px; margin-bottom:4px; }
        .md-stats .stat-item { font-size:11px; color:var(--w450); text-transform:uppercase; letter-spacing:1px; }
        .md-stats .stat-item strong { font-weight:800; margin-left:4px; }
        .table-surface[data-feel="friend"] .md-stats .stat-item strong { color:#66bb6a; }
        .table-surface[data-feel="boss"] .md-stats .stat-item strong { color:#ff3b3b; }
        .table-surface[data-feel="mediator"] .md-stats .stat-item strong { color:#64b5f6; }
        .md-toolbar { gap:8px; flex-wrap:wrap; }
        .md-deal-btn { border:none; }
        .table-surface[data-feel="friend"] .md-deal-btn { background:linear-gradient(135deg,#66bb6a,#2e7d32); }
        .table-surface[data-feel="boss"] .md-deal-btn { background:linear-gradient(135deg,#ff3b3b,#b71c1c); }
        .table-surface[data-feel="mediator"] .md-deal-btn { background:linear-gradient(135deg,#64b5f6,#1565c0); }

        /* lm-count / lm-gen base — the per-mode color overrides below assume this
           pill/button shape; without it they render as unstyled native elements */
        .hg-label-maker .lm-count, .md-label-maker .lm-count {
            font-size:10px; padding:3px 10px; border-radius:999px;
            font-weight:700; letter-spacing:0.5px; vertical-align:middle;
        }
        .lm-gen {
            padding:8px 16px; min-height:44px; border-radius:8px;
            border:1px solid var(--w250); background:var(--w060);
            color:var(--text-hi); font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
            cursor:pointer; transition:background 0.15s, transform 0.08s;
            -webkit-tap-highlight-color:transparent; touch-action:manipulation;
        }
        .lm-gen:hover { background:var(--w120); }
        .lm-gen:active { transform:scale(0.94); }
        .hg-label-maker .lm-gen { color:#ff5ea8; border-color:rgba(255,94,168,0.4); background:rgba(255,94,168,0.08); }
        .hg-label-maker .lm-gen:hover { background:rgba(255,94,168,0.18); }
        .table-surface[data-feel="friend"] .md-label-maker .lm-gen { color:#66bb6a; border-color:rgba(102,187,106,0.4); background:rgba(102,187,106,0.08); }
        .table-surface[data-feel="friend"] .md-label-maker .lm-gen:hover { background:rgba(102,187,106,0.18); }
        .table-surface[data-feel="boss"] .md-label-maker .lm-gen { color:#ff3b3b; border-color:rgba(255,59,59,0.4); background:rgba(255,59,59,0.08); }
        .table-surface[data-feel="boss"] .md-label-maker .lm-gen:hover { background:rgba(255,59,59,0.18); }
        .table-surface[data-feel="mediator"] .md-label-maker .lm-gen { color:#64b5f6; border-color:rgba(100,181,246,0.4); background:rgba(100,181,246,0.08); }
        .table-surface[data-feel="mediator"] .md-label-maker .lm-gen:hover { background:rgba(100,181,246,0.18); }

        .md-label-maker .lm-count { background:var(--w080); }
        .table-surface[data-feel="friend"] .md-label-maker { border-top:2px solid #66bb6a; }
        .table-surface[data-feel="friend"] .md-label-maker .lm-header h3 { color:#66bb6a; }
        .table-surface[data-feel="friend"] .md-label-maker .lm-count { color:#66bb6a; border:1px solid rgba(102,187,106,0.3); background:rgba(102,187,106,0.12); }
        .table-surface[data-feel="boss"] .md-label-maker { border-top:2px solid #ff3b3b; }
        .table-surface[data-feel="boss"] .md-label-maker .lm-header h3 { color:#ff3b3b; }
        .table-surface[data-feel="boss"] .md-label-maker .lm-count { color:#ff3b3b; border:1px solid rgba(255,59,59,0.3); background:rgba(255,59,59,0.12); }
        .table-surface[data-feel="mediator"] .md-label-maker { border-top:2px solid #64b5f6; }
        .table-surface[data-feel="mediator"] .md-label-maker .lm-header h3 { color:#64b5f6; }
        .table-surface[data-feel="mediator"] .md-label-maker .lm-count { color:#64b5f6; border:1px solid rgba(100,181,246,0.3); background:rgba(100,181,246,0.12); }

        .md-timer {
            background:var(--surface-1); border:1px solid var(--w120);
            border-radius:14px; padding:14px 16px; margin-bottom:14px;
            display:flex; flex-wrap:wrap; align-items:center; gap:10px;
        }
        .md-timer .timer-label { font-size:10px; letter-spacing:1.5px; font-weight:700; width:100%; }
        .table-surface[data-feel="friend"] .md-timer .timer-label { color:#66bb6a; }
        .table-surface[data-feel="boss"] .md-timer .timer-label { color:#ff3b3b; }
        .table-surface[data-feel="mediator"] .md-timer .timer-label { color:#64b5f6; }
        .table-surface[data-feel="friend"] .md-timer { border-color:rgba(102,187,106,0.2); }
        .table-surface[data-feel="boss"] .md-timer { border-color:rgba(255,59,59,0.2); }
        .table-surface[data-feel="mediator"] .md-timer { border-color:rgba(100,181,246,0.2); }
        .md-timer input[type=range] { flex:1; min-width:100px; }
        .table-surface[data-feel="friend"] .md-timer input[type=range] { accent-color:#66bb6a; }
        .table-surface[data-feel="boss"] .md-timer input[type=range] { accent-color:#ff3b3b; }
        .table-surface[data-feel="mediator"] .md-timer input[type=range] { accent-color:#64b5f6; }
        .md-dur { color:var(--w600); font-weight:700; font-size:14px; }
        .md-dur-unit { color:var(--w300); font-size:11px; }
        .md-time {
            font-size:34px; font-weight:800; color: var(--text-hi); font-variant-numeric:tabular-nums;
            width:100%; text-align:center;
        }
        .md-timer-btns { display:flex; gap:8px; width:100%; justify-content:center; }
        .md-timer-btns .btn { min-width:44px; }
        .md-time.md-running { animation:hg-pulse 1.2s ease-in-out infinite; }
        .table-surface[data-feel="friend"] .md-time.md-running { color:#66bb6a; text-shadow:0 0 18px rgba(102,187,106,0.35); }
        .table-surface[data-feel="boss"] .md-time.md-running { color:#ff3b3b; text-shadow:0 0 18px rgba(255,59,59,0.35); }
        .table-surface[data-feel="mediator"] .md-time.md-running { color:#64b5f6; text-shadow:0 0 18px rgba(100,181,246,0.35); }

        .md-wheel { background:var(--surface-1); border:1px solid var(--w100); border-radius:14px; padding:12px; }
        .md-wheel-title { font-size:12px; font-weight:700; color:var(--w700); letter-spacing:1px; text-align:center; margin-bottom:8px; }
        .md-wheel svg { width:100%; height:auto; display:block; }

        .mode-visual {
            width:min(560px, 100%);
            height:172px;
            margin:16px auto 0;
            position:relative;
            overflow:hidden;
            border:1px solid var(--w140);
            border-radius:8px;
            background:
                linear-gradient(180deg, var(--w080), transparent 38%),
                radial-gradient(circle at 50% 118%, var(--w120), transparent 52%),
                var(--surface-1);
            box-shadow:0 18px 44px var(--shadow), inset 0 0 0 1px var(--w040);
            isolation:isolate;
        }
        .mode-visual::before {
            content:"";
            position:absolute; inset:0;
            background:repeating-linear-gradient(0deg, transparent 0 5px, var(--w030) 5px 6px);
            mix-blend-mode:soft-light;
            opacity:.42;
            pointer-events:none;
        }
        .mode-visual::after {
            content:"";
            position:absolute; left:-15%; right:-15%; bottom:-44px; height:92px;
            border-radius:50%;
            background:radial-gradient(ellipse at center, var(--w180), transparent 68%);
            z-index:0;
        }
        .mode-canvas {
            position:absolute; inset:0; width:100%; height:100%;
            z-index:4; pointer-events:none; display:block;
        }

        .boss-window {
            position:absolute; inset:14px 22px auto; height:56px;
            border:1px solid var(--w120); border-radius:6px;
            background:
                linear-gradient(90deg, transparent 0 49%, var(--w100) 49% 51%, transparent 51%),
                linear-gradient(0deg, transparent 0 48%, var(--w100) 48% 52%, transparent 52%),
                radial-gradient(circle at 28% 34%, var(--accent-glow), transparent 36%),
                var(--surface-2);
        }
        .boss-desk {
            position:absolute; left:12%; right:12%; bottom:18px; height:42px;
            border:1px solid var(--w150); border-radius:8px 8px 16px 16px;
            background:linear-gradient(180deg, var(--w180), var(--w080)), var(--surface-2);
            box-shadow:0 16px 22px var(--shadow);
        }
        .boss-desk span {
            position:absolute; bottom:11px; width:42px; height:6px; border-radius:999px;
            background:var(--accent); box-shadow:0 0 16px var(--accent-glow);
            animation:bossDeskBlink 2.7s ease-in-out infinite;
        }
        .boss-desk span:nth-child(1){ left:18%; }
        .boss-desk span:nth-child(2){ left:45%; animation-delay:.45s; }
        .boss-desk span:nth-child(3){ right:18%; animation-delay:.9s; }
        .boss-character, .med-person {
            position:absolute;
            width:86px; height:132px;
            bottom:33px;
            animation:modeCharacterIdle 3.4s ease-in-out infinite;
        }
        .boss-character-left { left:22%; }
        .boss-character-right { right:22%; animation-delay:.45s; }
        .mv-head, .mv-neck, .mv-hair, .mv-suit, .mv-shirt, .mv-tie, .mv-arm, .mv-body {
            position:absolute; display:block;
        }
        .boss-character .mv-head, .med-person .mv-head {
            left:27px; top:7px; width:32px; height:34px;
            border-radius:44% 44% 48% 48%;
            background:linear-gradient(180deg, var(--mode-skin), var(--w450));
            box-shadow:inset 0 -5px 0 var(--w080), 0 6px 12px var(--shadow);
        }
        .boss-character .mv-hair {
            left:24px; top:4px; width:38px; height:18px; border-radius:16px 16px 8px 8px;
            background:var(--mode-hair);
        }
        .boss-character-right .mv-hair {
            left:23px; top:3px; width:40px; height:22px;
            border-radius:18px 18px 10px 10px;
            box-shadow:inset -8px 0 0 var(--w100);
        }
        .boss-character .mv-neck {
            left:37px; top:38px; width:13px; height:14px; background:var(--w450);
            border-radius:0 0 6px 6px;
        }
        .boss-character .mv-suit {
            left:11px; bottom:0; width:64px; height:84px;
            border-radius:26px 26px 12px 12px;
            background:
                linear-gradient(120deg, transparent 0 42%, var(--w180) 42% 45%, transparent 45%),
                linear-gradient(240deg, transparent 0 42%, var(--w180) 42% 45%, transparent 45%),
                var(--mode-suit);
            box-shadow:0 12px 18px var(--shadow), inset 0 0 0 1px var(--w120);
        }
        .boss-character .mv-shirt {
            left:31px; top:56px; width:24px; height:54px;
            clip-path:polygon(50% 100%, 0 0, 100% 0);
            background:var(--mode-shirt);
        }
        .boss-character .mv-tie {
            left:39px; top:58px; width:8px; height:39px;
            clip-path:polygon(50% 0, 100% 20%, 68% 100%, 32% 100%, 0 20%);
            background:var(--m-boss);
            box-shadow:0 0 12px var(--accent-glow);
        }
        .boss-character-right .mv-tie { background:var(--accent); }
        .boss-character .mv-arm {
            top:64px; width:15px; height:52px; border-radius:999px;
            background:var(--mode-suit);
            transform-origin:top center;
        }
        .boss-character .mv-arm-left { left:10px; transform:rotate(16deg); }
        .boss-character .mv-arm-right { right:10px; transform:rotate(-16deg); animation:bossHandTalk 2.2s ease-in-out infinite; }
        .boss-character-right .mv-arm-left { animation:bossHandTalk 2.4s ease-in-out infinite reverse; }
        .md-wrap.scene-hit .boss-character,
        .md-wrap.scene-hit .med-person { animation:modeCharacterPop .52s ease-out 1; }

        .mode-visual-mediator {
            background:
                radial-gradient(circle at 50% 18%, var(--m-mediator), transparent 24%),
                linear-gradient(180deg, var(--w060), transparent 52%),
                var(--surface-1);
        }
        .med-lamp {
            position:absolute; left:50%; top:-8px; width:138px; height:116px;
            transform:translateX(-50%);
        }
        .med-lamp::before {
            content:""; position:absolute; left:64px; top:0; width:8px; height:40px;
            background:var(--w300); border-radius:999px;
        }
        .med-lamp span {
            position:absolute; left:38px; top:34px; width:62px; height:32px;
            border-radius:36px 36px 10px 10px;
            background:var(--m-mediator);
            box-shadow:0 0 22px var(--m-mediator);
        }
        .med-lamp::after {
            content:""; position:absolute; left:6px; top:60px; width:126px; height:86px;
            clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
            background:linear-gradient(180deg, var(--w250), transparent);
            opacity:.72;
            animation:lampSweep 4.6s ease-in-out infinite;
        }
        .med-table {
            position:absolute; left:17%; right:17%; bottom:20px; height:54px;
            border-radius:50%;
            background:
                radial-gradient(ellipse at center, var(--w200), var(--w080) 58%, transparent 60%),
                var(--surface-2);
            border:1px solid var(--w180);
            box-shadow:0 16px 26px var(--shadow);
            transform:perspective(220px) rotateX(44deg);
        }
        .med-issue {
            position:absolute; min-width:52px; padding:5px 8px;
            border-radius:4px;
            color:var(--text);
            background:var(--card-bg);
            border:1px solid var(--w180);
            font-size:10px; font-weight:800; letter-spacing:0;
            box-shadow:0 8px 16px var(--shadow);
            transform:rotate(var(--r, -5deg));
            animation:issueShuffle 4.2s ease-in-out infinite;
        }
        .issue-one { left:18%; top:17px; --r:-8deg; --ri:6deg; }
        .issue-two { left:42%; top:9px; --r:5deg; --ri:-4deg; animation-delay:.4s; }
        .issue-three { right:16%; top:21px; --r:-2deg; --ri:7deg; animation-delay:.8s; }
        .med-person { bottom:44px; width:70px; height:102px; }
        .med-left { left:16%; animation-delay:.2s; }
        .med-right { right:16%; animation-delay:.7s; }
        .med-person .mv-head { left:20px; top:8px; width:30px; height:32px; }
        .med-person .mv-body {
            left:12px; bottom:0; width:46px; height:64px;
            border-radius:22px 22px 10px 10px;
            background:var(--mode-suit);
            box-shadow:0 10px 18px var(--shadow);
        }
        .med-right .mv-body { background:var(--mode-suit-alt); }
        .med-person .mv-arm {
            left:31px; top:52px; width:12px; height:42px; border-radius:999px;
            background:var(--mode-suit);
            transform-origin:top center;
            animation:mediatorArm 2.6s ease-in-out infinite;
        }
        .med-right .mv-arm { animation-delay:.65s; }

        @keyframes modeCharacterIdle {
            0%,100% { transform:translateY(0); }
            50% { transform:translateY(-4px); }
        }
        @keyframes modeCharacterPop {
            0% { transform:translateY(0) scale(1); }
            45% { transform:translateY(-8px) scale(1.035); }
            100% { transform:translateY(0) scale(1); }
        }
        @keyframes bossHandTalk {
            0%,100% { transform:rotate(-16deg); }
            50% { transform:rotate(-34deg) translateY(-3px); }
        }
        @keyframes bossDeskBlink {
            0%,100% { opacity:.45; transform:scaleX(.72); }
            50% { opacity:1; transform:scaleX(1); }
        }
        @keyframes lampSweep {
            0%,100% { transform:translateX(-5px) skewX(-5deg); opacity:.52; }
            50% { transform:translateX(5px) skewX(5deg); opacity:.82; }
        }
        @keyframes issueShuffle {
            0%,100% { transform:translateY(0) rotate(var(--r)); }
            50% { transform:translateY(-4px) rotate(var(--ri)); }
        }
        @keyframes mediatorArm {
            0%,100% { transform:rotate(-20deg); }
            50% { transform:rotate(22deg) translateY(-3px); }
        }

        /* mobile: single column stack */
        .view-container.active .md-wrap { display:flex; flex-direction:column; align-items:center; }
        .view-container.active .md-rail { width:100%; max-width:480px; margin-top:18px; }
        .view-container.active .md-wrap .mode-grid { display:none !important; }
        .view-container.active .md-wrap .mode-scenario { max-width:100%; overflow-wrap:break-word; }
        .view-container.active .md-wrap .mode-scenario .ms-approach,
        .view-container.active .md-wrap .mode-scenario .ms-script { word-break:break-word; overflow-wrap:anywhere; }

        /* desktop: 2-col grid, rail right */
        @media (min-width: 1024px) {
            .view-container.active .md-wrap {
                display:grid !important;
                grid-template-columns: minmax(0,1fr) 360px;
                grid-template-areas:
                    "hdr   rail"
                    "stats rail"
                    "tools rail"
                    "info  rail"
                    "scen  rail"
                    "grid  rail"
                    "lm    rail";
                column-gap:22px; align-items:start; align-content:start;
            }
            .view-container.active .md-wrap .mode-header { grid-area:hdr; }
            .view-container.active .md-wrap .md-stats { grid-area:stats; }
            .view-container.active .md-wrap .md-toolbar { grid-area:tools; }
            .view-container.active .md-wrap .mode-deck-info { grid-area:info; }
            .view-container.active .md-wrap .mode-scenario { grid-area:scen; }
            .view-container.active .md-wrap .mode-grid { grid-area:grid; display:none !important; }
            .view-container.active .md-wrap .md-label-maker { grid-area:lm; margin-top:16px; max-width:none; }
            .view-container.active .md-wrap .md-label-maker .lm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
            .view-container.active .md-wrap .md-rail {
                grid-area:rail; margin-top:0; max-width:none;
                position:sticky; top:12px; align-self:start;
            }
        }

        /* ═══ DESKTOP LAYER (min-width:1024px) — kill empty space, modern skin ═══
           Mobile layout untouched. On MacBook-class screens: cards fill the
           width in a real grid, Label Maker docks right of the deck, and the
           surfaces get a cleaner glass look. Mechanics unchanged. */
        @media (min-width: 1024px) {
            /* ambient page depth — two soft accent pools, no casino vignette */
            body {
                background:
                    radial-gradient(900px 500px at 12% -10%, rgba(124,108,248,0.14), transparent 60%),
                    radial-gradient(800px 480px at 92% 108%, rgba(86,196,255,0.08), transparent 60%),
                    var(--bg);
            }
            /* toolbar spans wider so it doesn't strand the timer on the right */
            .toolbar { max-width: 1280px; }

            /* cards: real grid, stretch to fill — no more centered cluster
               with dead margins on a 1440px screen */
            .cards-area {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 16px;
                max-width: 1280px;
                margin-left: auto; margin-right: auto;
                justify-content: stretch;
            }
            .tool-card {
                width: auto;           /* grid owns the width now */
                min-height: 190px;
                background: linear-gradient(160deg, var(--card-face-1) 0%, var(--card-face-2) 100%);
                border: 1px solid var(--w070);
                box-shadow: 0 8px 24px var(--card-drop), inset 0 1px 0 var(--w060);
                backdrop-filter: blur(6px);
            }
            .tool-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 34px var(--card-drop), 0 0 0 1px var(--accent-glow), 0 0 22px var(--accent-glow);
            }

            /* Layout: left column flows banner → cards → label-maker (tight,
               no row-stretch gap); right rail holds timer tools + emotion check.
               Rail spans all rows so its height never inflates the cards row. */
            #view-tools.active {
                display: grid !important;
                grid-template-columns: minmax(0,1fr); /* single flow column */
                grid-template-rows: auto;
                grid-template-areas:
                    "stats"
                    "tools"
                    "banner"
                    "cards"
                    "lm"
                    "ads"
                    "panel";
                column-gap: 20px;
                max-width: 1280px;
                margin: 0 auto;
                align-items: start;
                align-content: start;
                position: relative;
                padding-right: 360px; /* ponytail: reserve the rail gutter — rail is out-of-flow so it can't stretch any row */
            }
            #view-tools.active #currentBanner { grid-area: banner; }
            #view-tools.active .stats-bar     { grid-area: stats; }
            #view-tools.active .toolbar       { grid-area: tools; max-width: none; }
            #view-tools.active #cardsArea     { grid-area: cards; max-width: none; }
            #view-tools.active .label-maker   { grid-area: lm; max-width: none; margin: 14px 0 0; }
            #view-tools.active .ad-row        { grid-area: ads; }
            #view-tools.active #sessionPanel  { grid-area: panel; }
            /* rail: absolute in the reserved gutter, sticky on scroll. Out of
               grid flow → its ~800px height can never inflate the cards/LM rows. */
            #view-tools.active .zen-wheel {
                position: absolute; right: 0; top: 0;
                width: 340px; margin: 0; z-index: 5;
            }
            .rail-timer { display:block; margin-bottom:12px; }
            .rail-timer .timer-display { margin-left:0; width:100%; justify-content:center; flex-wrap:wrap; }
            .label-maker .lm-cards { align-items: stretch; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }

            /* glassy panels instead of flat felt boxes */
            .label-maker .lm-card, .zen-card, .stats-bar, .timer-display {
                background: var(--w045);
                border: 1px solid var(--w090);
                backdrop-filter: blur(10px);
            }
        }
        /* mid-size laptops: keep single column but widen the rails */
        @media (min-width: 769px) and (max-width: 1023px) {
            .label-maker { max-width: 720px; }
            .cards-area { max-width: 1100px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .tool-card:hover { transform: none; }
            .mode-visual *,
            .mode-visual::after,
            .breath-character,
            .bc-chest { animation:none !important; transition:none !important; }
        }
        @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
        @keyframes pulse{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
        .broker-locked{position:relative;opacity:0.5;pointer-events:auto!important;cursor:pointer!important}
        .broker-locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;opacity:0.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.8))}
        .broker-overlay{position:fixed;inset:0;background:rgba(1,10,7,0.85);backdrop-filter:blur(8px);z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.25s}
        .broker-overlay.open{opacity:1;pointer-events:auto}
        .broker-modal{max-width:420px;background:linear-gradient(180deg,#0f3827,#0a2a1d);border:1px solid rgba(52,211,153,0.35);border-radius:20px;padding:32px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 60px rgba(52,211,153,0.2)}
        .broker-modal h2{font-family:'Inter',sans-serif;color:#ecfdf5;font-size:22px;font-weight:900;margin-bottom:8px}
        .broker-modal p{color:#a7f3d0;font-size:14px;line-height:1.6;margin-bottom:16px}
        .broker-features{list-style:none;text-align:left;margin:14px 0;padding:14px 16px;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(52,211,153,0.2)}
        .broker-features li{color:#d1fae5;font-size:13px;line-height:1.6}
        .broker-modal .price{font-size:36px;font-weight:900;color:#fbbf24;margin:8px 0}
        .broker-modal .price small{font-size:14px;color:#a7f3d0;font-weight:400}
        .broker-btn{display:block;width:100%;padding:16px;border-radius:10px;border:none;font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;margin-top:16px;background:linear-gradient(180deg,#fde68a 0%,#fbbf24 50%,#b45309 100%);color:#3b1d04;box-shadow:0 8px 24px rgba(251,191,36,0.3)}
        .broker-btn:hover{transform:translateY(-2px)}
        .broker-dismiss{display:block;margin-top:12px;background:none;border:none;color:var(--w400);font-size:12px;cursor:pointer;width:100%}
        .broker-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(251,191,36,0.15);color:#fbbf24;margin-left:6px;vertical-align:middle}

/* ═══════════════════════════════════════════════════════════════════
   MAGNIFICENT SEVEN — Listening module
   Design language: matches M5.2 indigo skin, surface elevation,
   card-pop animation, btn-primary/ghost, fade-up transitions.
   ═══════════════════════════════════════════════════════════════════ */

#view-mag7 { max-width: 880px; margin: 0 auto; width: 100%; padding: 0 4px; }

/* ── Flow Diagram ── */
.mag7-flow-wrap {
    text-align: center; margin: 8px 0 20px; padding: 20px 16px;
    background: var(--surface-1); border-radius: 16px;
    border: 1px solid rgba(124,108,248,0.15);
    animation: fade-up 0.4s ease both;
}
.mag7-flow-title {
    font-size: 14px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.mag7-flow-subtitle {
    font-size: 12px; color: var(--w500); line-height: 1.55;
    max-width: 560px; margin: 0 auto 18px;
}
.mag7-flow-chain {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex-wrap: wrap;
}
.mag7-flow-node {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 10px;
    background: rgba(124,108,248,0.08);
    border: 1px solid rgba(124,108,248,0.2);
    cursor: pointer; transition: all 0.25s;
    --mag7-color: var(--accent);
    animation: fade-up 0.3s ease both;
}
.mag7-flow-node:hover {
    transform: scale(1.05);
    background: rgba(124,108,248,0.15);
    box-shadow: 0 4px 16px var(--accent-glow);
}
.mag7-flow-icon { font-size: 16px; }
.mag7-flow-label {
    font-size: 13px; font-weight: 700; color: var(--w850);
}
.mag7-flow-arrow {
    font-size: 16px; color: rgba(124,108,248,0.4);
    line-height: 1; padding: 1px 0;
}
.mag7-flow-mantra {
    margin-top: 16px; font-size: 15px; font-weight: 800;
    color: var(--accent); letter-spacing: 1px;
    text-shadow: 0 0 20px var(--accent-glow);
}

/* ── Cards List ── */
.mag7-cards-list {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}

/* ── Individual Card ── */
.mag7-card {
    background: var(--surface-1); border-radius: 14px; overflow: hidden;
    border: 1px solid var(--w080);
    border-left: 4px solid var(--mag7-color, var(--accent));
    transition: all 0.3s;
    animation: card-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
    --mag7-color: var(--accent);
}
.mag7-card:hover {
    border-color: var(--w150);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 16px var(--accent-glow);
}
.mag7-card.mag7-card-advanced {
    border-style: dashed; opacity: 0.92;
    border-left-style: solid;
}
.mag7-card.mag7-card-advanced .mag7-card-title::after {
    content: ' ⚡'; font-size: 14px; opacity: 0.6;
}

.mag7-card-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mag7-card-header:hover { background: var(--w030); }

.mag7-card-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
    border: 1px solid;
}

.mag7-card-title-wrap { flex: 1; min-width: 0; }
.mag7-card-number {
    font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--mag7-color, var(--accent));
    margin-bottom: 2px; opacity: 0.7;
}
.mag7-card-title {
    font-size: 17px; font-weight: 800; color: var(--w950);
    margin-bottom: 2px;
}
.mag7-card-difficulty {
    font-size: 10px; color: var(--w400);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}

.mag7-card-chevron {
    font-size: 18px; color: var(--w300);
    transition: transform 0.3s; flex-shrink: 0;
}

/* ── Card Body (expandable) ── */
.mag7-card-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 18px;
}
.mag7-card-open .mag7-card-body {
    max-height: 1200px;
    padding: 0 18px 18px;
}

.mag7-card-definition {
    font-size: 14px; line-height: 1.65; color: var(--w800);
    padding: 12px 14px; background: var(--w030);
    border-radius: 10px; margin-bottom: 14px;
    border-left: 3px solid var(--mag7-color, var(--accent));
}

/* ── Sections within card ── */
.mag7-section { margin-bottom: 14px; }
.mag7-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--mag7-color, var(--accent));
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.mag7-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(124,108,248,0.15);
}

.mag7-examples {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.mag7-examples li {
    font-size: 12px; padding: 5px 12px; border-radius: 8px;
    background: var(--w050);
    color: var(--w750);
    border: 1px solid var(--w060);
}

.mag7-teaching {
    font-size: 13px; line-height: 1.6; color: var(--w700);
    padding: 10px 14px; background: var(--w030);
    border-radius: 8px;
}

.mag7-questions {
    display: flex; flex-direction: column; gap: 6px;
}
.mag7-question {
    font-size: 13px; font-style: italic; color: var(--w750);
    padding: 8px 12px; background: rgba(124,108,248,0.06);
    border-radius: 8px; border-left: 2px solid var(--mag7-color, var(--accent));
}

.mag7-why {
    font-size: 13px; line-height: 1.65; color: var(--w650);
    padding: 10px 14px; background: var(--w020);
    border-radius: 8px;
}

.mag7-card-actions {
    display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}

.mag7-tags {
    display: flex; gap: 5px; flex-wrap: wrap; margin-top: 12px;
}
.mag7-tag {
    font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
    background: var(--w040); color: var(--w350);
    border: 1px solid var(--w060);
}

/* ── Practice Panel ── */
.mag7-practice-panel {
    margin-top: 14px; padding: 16px;
    background: var(--surface-2); border-radius: 12px;
    border: 1px solid var(--accent-glow);
    animation: card-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.mag7-practice-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.mag7-practice-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
}
.mag7-practice-close {
    background: none; border: none; color: var(--w400);
    font-size: 18px; cursor: pointer; padding: 0 4px;
}
.mag7-practice-close:hover { color: var(--text-hi); }
.mag7-practice-setup {
    font-size: 14px; line-height: 1.6; color: var(--w800);
    margin-bottom: 12px;
}
.mag7-practice-task {
    background: rgba(124,108,248,0.08); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px;
    border-left: 3px solid var(--accent);
}
.mag7-practice-task-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--accent); display: block; margin-bottom: 4px;
}
.mag7-practice-task-text {
    font-size: 14px; font-weight: 600; color: var(--w900);
}
.mag7-practice-hint {
    margin: 10px 0;
}
.mag7-practice-hint summary {
    font-size: 12px; color: var(--accent); cursor: pointer;
    font-weight: 600; padding: 6px 0;
}
.mag7-practice-hint summary:hover { color: rgba(124,108,248,0.8); }
.mag7-practice-hint-text {
    font-size: 13px; color: var(--w650);
    line-height: 1.55; padding: 10px 12px;
    background: var(--w030); border-radius: 8px;
}
.mag7-practice-again { margin-top: 8px; }

/* ── Radar Modal ── */
.mag7-radar-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--k700); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: fade-up 0.3s ease;
}
.mag7-radar-modal-content {
    background: var(--surface-1); border-radius: 18px;
    max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 24px 20px; border: 1px solid rgba(124,108,248,0.2);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    animation: card-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.mag7-radar-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.mag7-radar-modal-header h2 {
    font-size: 20px; font-weight: 800; color: var(--text-hi);
}
.mag7-radar-modal-close {
    background: none; border: none; color: var(--w400);
    font-size: 20px; cursor: pointer; padding: 4px 8px;
}
.mag7-radar-modal-close:hover { color: var(--text-hi); }
.mag7-radar-modal-subtitle {
    font-size: 12px; color: var(--w500); line-height: 1.55;
    margin-bottom: 16px;
}
.mag7-radar-modal-subtitle strong { color: var(--accent); }

.mag7-radar-container {
    display: flex; justify-content: center; margin-bottom: 16px;
}
.mag7-radar-svg {
    width: 100%; max-width: 320px; height: auto;
}
.mag7-radar-label-icon { font-size: 14px; }
.mag7-radar-label-text {
    font-size: 9px; font-weight: 700; fill: var(--w600);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.mag7-radar-label-score { font-size: 12px; font-weight: 800; }
.mag7-radar-score { animation: mag7-radar-pulse 2s ease-in-out infinite; }
@keyframes mag7-radar-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.mag7-radar-insights {
    margin-bottom: 16px;
}
.mag7-radar-insight-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 420px) {
    .mag7-radar-insight-row { grid-template-columns: 1fr; }
}
.mag7-radar-insight-col {
    padding: 12px; border-radius: 10px;
}
.mag7-radar-weak { background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.15); }
.mag7-radar-strong { background: rgba(102,187,106,0.08); border: 1px solid rgba(102,187,106,0.15); }
.mag7-radar-insight-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px; color: var(--w600);
}
.mag7-radar-insight-item {
    display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px;
}
.mag7-radar-insight-item:last-child { margin-bottom: 0; }
.mag7-radar-insight-icon { font-size: 16px; flex-shrink: 0; }
.mag7-radar-insight-name {
    font-size: 12px; font-weight: 700; color: var(--w850);
}
.mag7-radar-insight-q {
    font-size: 11px; color: var(--w450); font-style: italic;
    margin-top: 2px;
}

.mag7-radar-actions {
    display: flex; gap: 8px; justify-content: center;
}

/* ── Mag7 view header ── */
.mag7-header {
    text-align: center; margin: 12px 0 16px;
}
.mag7-header h2 {
    font-size: 22px; font-weight: 800; color: var(--text-hi);
    text-shadow: 3px 3px 0 #000, 0 0 30px var(--accent-glow);
    margin-bottom: 4px;
}
.mag7-header p {
    font-size: 13px; color: var(--w500);
    max-width: 600px; margin: 0 auto;
}
.mag7-radar-cta {
    display: flex; justify-content: center; margin: 0 0 16px;
}
.mag7-radar-cta .btn {
    background: linear-gradient(135deg, rgba(124,108,248,0.2), rgba(124,108,248,0.1));
    border: 1px solid rgba(124,108,248,0.3);
    color: var(--accent);
    padding: 10px 20px; border-radius: 12px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.3s; display: flex; align-items: center; gap: 8px;
}
.mag7-radar-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

/* Emotion colors are injected inline by JS (EMOTIONS[].color) and are tuned
   for a dark canvas. On the light Sand theme they wash out, so darken the
   text-bearing badges only — wheel fills keep their full chroma. */
:root:not([data-theme="dark"]) .lm-emotion,
:root:not([data-theme="dark"]) .zc-emotion,
:root:not([data-theme="dark"]) .emo-count { filter: brightness(0.66) saturate(1.35); }

/* Mode surfaces on the light Sand theme: pale tinted canvases instead of the
   dark saturated gradients. Each mode keeps its identity hue, but the canvas
   stays light so every panel, card and label inside reads consistently. */
:root:not([data-theme="dark"]) .table-surface[data-feel="haggle"]   { background: radial-gradient(ellipse at center, #FBEAF1 0%, #F2DCE6 100%); }
:root:not([data-theme="dark"]) .table-surface[data-feel="friend"]   { background: radial-gradient(ellipse at center, #E9F3E7 0%, #DAEAD8 100%); }
:root:not([data-theme="dark"]) .table-surface[data-feel="boss"]     { background: radial-gradient(ellipse at center, #FBEAE7 0%, #F3D9D4 100%); }
:root:not([data-theme="dark"]) .table-surface[data-feel="mediator"] { background: radial-gradient(ellipse at center, #E7EFF7 0%, #D7E4F1 100%); }
/* Arcade-style mode headers: drop the neon glow/black outline on light and
   use the darkened mode hue so the heading stays legible. */
:root:not([data-theme="dark"]) .table-surface[data-feel] .mode-header h2 { text-shadow: none; }
:root:not([data-theme="dark"]) .table-surface[data-feel="haggle"] .mode-header h2   { color: var(--m-haggle); }
:root:not([data-theme="dark"]) .table-surface[data-feel="friend"] .mode-header h2   { color: var(--m-friend); }
:root:not([data-theme="dark"]) .table-surface[data-feel="boss"] .mode-header h2     { color: var(--m-boss); }
:root:not([data-theme="dark"]) .table-surface[data-feel="mediator"] .mode-header h2 { color: var(--m-mediator); }

/* Green Room: on the light Sand theme the castle photo becomes a soft
   watermark behind a warm scrim, so the panel matches the rest of the app
   instead of staying a dark island. */
:root:not([data-theme="dark"]) .warrior-castle-bg { background-blend-mode: luminosity; }
:root:not([data-theme="dark"]) .gr-scrim { background: rgba(246,239,226,0.90) !important; }
:root[data-theme="dark"] .gr-scrim { background: rgba(0,0,0,0.55) !important; }

/* The desktop grid gave dark-theme cards their own navy face (#20223a) that
   differed from the mobile purple. Sand now shares one cream face across
   breakpoints, so re-pin the dark theme's desktop navy to keep it verbatim. */
@media (min-width: 1024px) {
    :root[data-theme="dark"] .tool-card {
        background: linear-gradient(160deg, #20223a 0%, #161830 100%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LABEL TYPE CHIPS — every generated label states which move it is.
   Core types get a quiet chip; advanced types get a gold, faintly
   shimmering one so a high-leverage move is recognisable at a glance.
   Gold is warm enough to sit inside the Sand theme and still reads on dark.
   ═══════════════════════════════════════════════════════════════════════ */
.label-maker .lm-type {
    display:inline-block; margin-bottom:6px;
    font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
    padding:3px 9px; border-radius:999px;
    background:var(--w080); color:var(--text-dim);
    border:1px solid var(--w120);
}
.label-maker .lm-type.lm-type-gold {
    color:#4a3208;
    background:linear-gradient(135deg,#f6dfa0 0%,#e8c56a 38%,#fff3cf 52%,#dcae4c 68%,#f0d38c 100%);
    background-size:220% 100%;
    border:1px solid rgba(180,132,32,.75);
    box-shadow:0 1px 0 rgba(255,255,255,.65) inset,
               0 0 10px rgba(216,168,72,.40),
               0 1px 3px rgba(90,64,10,.28);
    text-shadow:0 1px 0 rgba(255,255,255,.45);
    animation:lm-gold-sheen 5.5s ease-in-out infinite;
}
@keyframes lm-gold-sheen {
    0%,100% { background-position:0% 50%; }
    50%     { background-position:100% 50%; }
}
/* the card itself picks up a warm gold edge when it holds an advanced move */
.label-maker .lm-card.lm-gold {
    border-color:rgba(198,150,52,.85);
    box-shadow:0 0 14px rgba(216,168,72,.30), 0 1px 4px var(--card-drop);
}
:root[data-theme="dark"] .label-maker .lm-card.lm-gold {
    box-shadow:0 0 18px rgba(216,168,72,.34), 0 1px 4px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
    .label-maker .lm-type.lm-type-gold { animation:none; }
}

/* Label type picker — sits beside "Generate more" so choosing a move and
   seeing worked examples of it is one action. */
.label-maker .lm-select {
    padding:7px 10px; border-radius:8px; min-height:38px;
    border:1px solid var(--accent); background:var(--w060);
    color:var(--text-hi); font-family:'Inter',sans-serif;
    font-size:12px; font-weight:600; cursor:pointer; max-width:230px;
}
.label-maker .lm-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.label-maker .lm-typehint {
    display:none; margin-top:8px; padding:8px 11px;
    font-size:12px; line-height:1.45; color:var(--text-dim);
    background:var(--w040); border-left:2px solid var(--accent); border-radius:6px;
}

/* Tappable type chips — a generated line is one tap from the tool that
   teaches it. Only chips with somewhere to go get the affordance. */
.label-maker button.lm-type { font-family:'Inter',sans-serif; }
.label-maker .lm-type-link {
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.label-maker .lm-type-link::after { content:' \203A'; opacity:.65; font-weight:700; }
.label-maker .lm-type-link:hover { transform:translateY(-1px); filter:brightness(1.06); }
.label-maker .lm-type-link:active { transform:translateY(0) scale(.97); }
.label-maker .lm-type-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ═══ Ackerman ladder — the one tool that is arithmetic, not a line ═══ */
.ack-calc {
    margin:12px 0; border-radius:12px; overflow:hidden;
    background:var(--k300); border:1px solid var(--felt-border);
}
.ack-head {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:10px 14px;
}
.ack-title { font-size:13px; font-weight:800; color:var(--text-hi); letter-spacing:.4px; }
.ack-toggle {
    padding:6px 14px; min-height:34px; border-radius:8px; cursor:pointer;
    border:1px solid var(--accent); background:transparent; color:var(--accent);
    font-family:'Inter',sans-serif; font-size:11px; font-weight:800;
    text-transform:uppercase; letter-spacing:.1em;
}
.ack-toggle:hover { background:var(--accent); color:var(--on-accent); }
.ack-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ack-body { padding:0 14px 14px; }
.ack-label { display:block; font-size:11px; color:var(--text-dim); margin-bottom:6px; font-weight:600; }
.ack-row { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.ack-cur { font-size:16px; font-weight:800; color:var(--text-dim); }
.ack-input {
    flex:1; max-width:200px; padding:9px 12px; min-height:40px;
    border-radius:8px; border:1px solid var(--accent); background:var(--w060);
    color:var(--text-hi); font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
}
.ack-input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ack-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ack-step { padding:10px 12px; border-radius:9px; background:var(--w050); border-left:3px solid var(--accent); }
/* ponytail: reuse the label printer's mechanical feed for the ladder — each rung
   "prints" in with a staggered delay, same easing family as .lm-card.lm-print */
.ack-step.ack-print {
    animation:ack-print-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes ack-print-in {
    0%   { opacity:0; transform:translateY(-10px) scaleY(0.9); }
    60%  { opacity:1; transform:translateY(2px) scaleY(1.02); }
    100% { opacity:1; transform:translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .ack-step.ack-print { animation:none; } }
.ack-step-head { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.ack-pct { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.ack-amt { font-size:17px; font-weight:900; color:var(--text-hi); font-variant-numeric:tabular-nums; }
.ack-say { font-size:13px; line-height:1.45; color:var(--text-hi); font-weight:600; }
.ack-note-sm { font-size:11px; color:var(--text-dim); margin-top:3px; }
.ack-note { font-size:11px; line-height:1.5; color:var(--text-dim); margin-top:10px; }
.ack-empty { font-size:12px; color:var(--text-dim); }
@media (max-width:600px){ .ack-input { max-width:100%; } }

/* ═══ NOD Fitness — beginner progress tracker, Supabase-ready local store ═══ */
.fitness-wrap { width:100%; max-width:1100px; padding:10px 0 28px; }
.fitness-header { max-width:780px; margin-left:auto; margin-right:auto; }
.fitness-coach-lockup {
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:12px;
}
.fitness-coach-lockup img {
    width:72px; height:72px; border-radius:14px; object-fit:cover;
    object-position:center 34%; border:2px solid var(--accent);
    box-shadow:0 12px 28px var(--card-drop), 0 0 20px var(--accent-glow);
}
.fitness-title {
    color:var(--green);
    text-shadow:2px 2px 0 var(--k400), 0 0 26px var(--accent-glow);
}
.fitness-eyebrow, .fitness-card-kicker {
    font-size:10px; font-weight:900; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent);
}
.fitness-panel {
    background:var(--surface-1); border:1px solid var(--w120);
    border-radius:16px; padding:18px; box-shadow:0 18px 46px var(--card-drop);
}
.fitness-sync-strip {
    padding:10px 12px; margin-bottom:14px; border-radius:10px;
    background:var(--w060); border:1px solid var(--w120);
    color:var(--text-hi); font-size:12px; font-weight:800; text-align:center;
}
.fitness-sync-strip.synced { border-color:var(--green); }
.fitness-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px; margin-bottom:14px;
}
.fitness-card {
    background:var(--surface-2); border:1px solid var(--w120);
    border-radius:14px; padding:16px;
}
.fitness-card-head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; margin-bottom:14px;
}
.fitness-card h3 {
    margin:4px 0 0; color:var(--text-hi); font-size:20px;
    font-weight:900; letter-spacing:-.02em;
}
.fitness-card h4 {
    margin:0 0 6px; color:var(--text-hi); font-size:18px; font-weight:900;
}
.fitness-card p { color:var(--w650); font-size:13px; line-height:1.55; }
.fitness-score {
    display:grid; place-items:center; min-width:88px; min-height:88px;
    border-radius:50%; background:conic-gradient(var(--green) calc(var(--fitness-score, 0) * 1%), var(--w080) 0);
}
.fitness-score span {
    display:grid; place-items:center; width:60px; height:60px;
    border-radius:50%; background:var(--surface-1); color:var(--text-hi);
    font-size:22px; font-weight:950;
}
.fitness-score small {
    margin-top:4px; color:var(--accent); font-size:10px;
    font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.fitness-inputs, .fitness-log-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.fitness-inputs label, .fitness-log-grid label {
    display:flex; flex-direction:column; gap:6px;
}
.fitness-inputs span, .fitness-log-grid span {
    color:var(--w550); font-size:10px; font-weight:900;
    text-transform:uppercase; letter-spacing:.08em;
}
.fitness-inputs input, .fitness-log-grid input, .fitness-card textarea {
    width:100%; min-height:42px; border-radius:10px;
    border:1px solid var(--w180); background:var(--w060);
    color:var(--text-hi); padding:8px 10px; font:inherit; font-weight:800;
}
.fitness-card textarea {
    min-height:82px; margin-top:12px; resize:vertical; font-weight:600;
}
.fitness-inputs input:focus-visible, .fitness-log-grid input:focus-visible,
.fitness-card textarea:focus-visible, .fitness-focus-tabs button:focus-visible,
.fitness-day:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
}
.fitness-guidance {
    margin-top:12px; padding:12px; border-radius:10px;
    background:var(--w050); border-left:4px solid var(--green);
    color:var(--text-hi); font-size:13px; font-weight:800; line-height:1.45;
}
.fitness-focus-tabs {
    display:flex; gap:6px; padding:5px; border-radius:999px;
    background:var(--w060); border:1px solid var(--w120); margin-bottom:14px;
}
.fitness-focus-tabs button {
    flex:1; min-height:38px; border:0; border-radius:999px;
    background:transparent; color:var(--w600); font-weight:900; cursor:pointer;
}
.fitness-focus-tabs button.active {
    background:var(--green); color:var(--on-accent);
}
.fitness-steps {
    list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;
}
.fitness-steps li {
    padding:10px 12px; border-radius:10px; background:var(--w050);
    color:var(--text-hi); font-size:13px; font-weight:700; line-height:1.45;
}
.fitness-week-card { margin-bottom:14px; }
.fitness-week-head { align-items:center; }
.fitness-complete {
    padding:7px 12px; border-radius:999px; background:var(--w060);
    color:var(--text-hi); font-size:12px; font-weight:900;
}
.fitness-week-grid {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
}
.fitness-day {
    min-height:156px; text-align:left; border-radius:12px;
    border:1px solid var(--w140); background:var(--w050); color:var(--text-hi);
    padding:13px; cursor:pointer; transition:transform .12s, border-color .12s, background .12s;
}
.fitness-day:hover { transform:translateY(-1px); border-color:var(--green); }
.fitness-day.done { background:var(--w100); border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.fitness-day strong { display:block; color:var(--green); font-size:12px; font-weight:950; margin-bottom:8px; }
.fitness-day span { display:block; font-size:15px; font-weight:900; margin-bottom:8px; }
.fitness-day small { display:block; color:var(--w600); font-size:12px; line-height:1.5; }
.fitness-effort-readout {
    display:grid; place-items:center; min-height:42px; border-radius:10px;
    background:var(--w060); color:var(--accent); font-weight:950;
}
.fitness-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fitness-summary {
    padding:12px; border-radius:10px; background:var(--w050);
    color:var(--text-hi); font-size:13px; font-weight:800; line-height:1.45;
}
.fitness-history {
    display:grid; gap:8px; margin-top:12px; max-height:260px; overflow:auto; padding-right:3px;
}
.fitness-history-item {
    padding:10px 12px; border-radius:10px; background:var(--w050);
    border-left:3px solid var(--green); color:var(--text-hi);
}
.fitness-history-item strong { display:block; font-size:13px; margin-bottom:4px; }
.fitness-history-item span { color:var(--w600); font-size:12px; line-height:1.45; }
@media(max-width:800px){
    .fitness-grid, .fitness-week-grid { grid-template-columns:1fr; }
    .fitness-inputs, .fitness-log-grid { grid-template-columns:1fr; }
}

/* ═══ Mindfulness — breathing visuals ═══ */
.mindful-wrap { max-width:760px; }
.mindful-title {
    color:var(--green);
    text-shadow:3px 3px 0 var(--k900), 0 0 25px var(--green-glow);
}
.mindful-intake { margin:18px 0; }
.mindful-control-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:14px;
}
.mindful-control-grid label,
.mindful-note-label {
    display:grid;
    gap:8px;
    color:var(--w750);
    font-size:12px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.mindful-control-grid strong {
    color:var(--green);
    font-size:13px;
}
.mindful-control-grid select,
.mindful-control-grid input[type="range"],
.mindful-note-label textarea {
    width:100%;
}
.mindful-control-grid select,
.mindful-note-label textarea {
    border:1px solid var(--w160);
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text-hi);
    outline:none;
}
.mindful-control-grid select {
    min-height:46px;
    padding:0 12px;
}
.mindful-control-grid input[type="range"] {
    min-height:46px;
    accent-color:var(--green);
}
.mindful-note-label { margin-top:14px; }
.mindful-note-label textarea {
    min-height:82px;
    padding:12px;
    resize:vertical;
    text-transform:none;
    letter-spacing:0;
    line-height:1.45;
}
.mindful-control-grid select:focus-visible,
.mindful-note-label textarea:focus-visible {
    border-color:var(--green);
    box-shadow:0 0 0 3px var(--green-glow);
}
.mindful-tools {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.mindful-card { text-align:center; padding:28px; }
.mindful-card h3 { color:var(--green); margin:10px 0; letter-spacing:0; }
.mindful-card p { color:var(--w650); font-size:14px; line-height:1.45; }
.mindful-card-visual {
    width:78px; height:58px; margin:0 auto 6px; position:relative; display:grid; place-items:center;
}
.breath-mini {
    border:2px solid var(--green); border-radius:12px;
    box-shadow:0 0 20px var(--green-glow), inset 0 0 20px var(--w080);
}
.breath-mini span {
    position:absolute; width:9px; height:9px; border-radius:50%; background:var(--blue);
    box-shadow:0 0 14px var(--blue);
    animation:breathMiniDot 4s linear infinite;
}
.breath-mini span:nth-child(2) { animation-delay:1s; }
.breath-mini span:nth-child(3) { animation-delay:2s; }
.breath-mini span:nth-child(4) { animation-delay:3s; }
.scan-mini { display:flex; align-items:center; justify-content:center; }
.scan-mini span {
    width:12px; height:42px; border-radius:999px; background:var(--green);
    box-shadow:0 0 18px var(--green-glow); margin:0 3px;
    animation:scanMiniPulse 1.8s ease-in-out infinite;
}
.scan-mini span:nth-child(2) { height:54px; animation-delay:.18s; }
.scan-mini span:nth-child(3) { animation-delay:.36s; }

/* ─── Tactical reset mini visual ─── */
.reset-mini {
    border-radius:50%;
    border:2px solid var(--green);
    box-shadow:0 0 20px var(--green-glow), inset 0 0 20px var(--w080);
}
.reset-mini span {
    position:absolute;
    border:2px solid var(--blue);
    border-radius:50%;
    opacity:.24;
    animation:resetMiniPulse 3s ease-in-out infinite;
}
.reset-mini span:nth-child(1) { width:20px; height:20px; }
.reset-mini span:nth-child(2) { width:38px; height:38px; animation-delay:.35s; }
.reset-mini span:nth-child(3) { width:56px; height:56px; animation-delay:.7s; }

/* ─── Mindfulness streak display ─── */
.mindful-streak-display {
    margin:0 0 16px; padding:14px 18px;
    background:var(--card-face-1); border:1px solid var(--w140); border-radius:14px;
    display:flex; flex-direction:column; gap:8px;
}
.mindful-streak-row { display:flex; gap:24px; justify-content:center; }
.mindful-streak-stat { text-align:center; }
.mindful-streak-num {
    display:block; font-size:28px; font-weight:800; color:var(--green);
    line-height:1; margin-bottom:2px;
    text-shadow:0 0 18px var(--green-glow);
}
.mindful-streak-label { font-size:11px; color:var(--w550); text-transform:uppercase; letter-spacing:0.06em; }
.mindful-streak-badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mindful-badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
    background:var(--w080); border:1px solid var(--green); color:var(--green);
    box-shadow:0 0 12px var(--green-glow);
}
.mindful-streak-next { text-align:center; font-size:12px; color:var(--w550); }
.mindful-streak-sync { text-align:center; font-size:10px; color:var(--w400); text-transform:uppercase; letter-spacing:0.05em; }

/* ─── Protocol card active state ─── */
.mindful-protocol-card.active {
    border-color:var(--green);
    box-shadow:0 0 24px var(--green-glow), inset 0 0 24px var(--w080);
}
.mindful-stage {
    display:none; margin-top:24px; text-align:center; padding:22px;
    border:1px solid var(--w120); border-radius:8px; background:var(--surface-1);
    box-shadow:0 16px 40px var(--shadow); overflow:hidden;
}
.mindful-stage[data-mode="breath"], .mindful-stage[data-mode="scan"] { display:block; }
.breath-visual {
    --lung-scale:1;
    width:min(380px, 92vw); height:288px; margin:0 auto 12px; position:relative;
    display:grid; place-items:center;
}
.breath-visual .mode-canvas { z-index:3; pointer-events:none; }
.breath-character {
    position:absolute; left:50%; bottom:9px; width:158px; height:214px;
    transform:translateX(-50%);
    z-index:0;
    filter:drop-shadow(0 18px 24px var(--shadow));
    animation:breathSeatedFloat 5.8s ease-in-out infinite;
}
.bc-head, .bc-hair, .bc-neck, .bc-shirt, .bc-chest, .bc-arm, .bc-leg {
    position:absolute; display:block;
}
.bc-head {
    left:58px; top:8px; width:42px; height:46px; border-radius:46% 46% 48% 48%;
    background:linear-gradient(180deg, var(--mode-skin), var(--w450));
    box-shadow:inset 0 -6px 0 var(--w090);
}
.bc-hair {
    left:53px; top:2px; width:52px; height:25px; border-radius:22px 22px 10px 10px;
    background:var(--mode-hair);
}
.bc-neck {
    left:73px; top:50px; width:14px; height:17px; border-radius:0 0 7px 7px;
    background:var(--mode-skin);
}
.bc-shirt {
    left:38px; top:62px; width:84px; height:94px;
    border-radius:34px 34px 22px 22px;
    background:
        linear-gradient(90deg, transparent 0 48%, var(--w120) 48% 52%, transparent 52%),
        var(--mode-shirt);
    box-shadow:inset 0 0 0 2px var(--w120), 0 10px 16px var(--shadow);
}
.bc-chest {
    left:57px; top:80px; width:44px; height:40px; border-radius:50%;
    border:1px solid var(--green);
    box-shadow:0 0 18px var(--green-glow), inset 0 0 18px var(--green-glow);
    opacity:.48;
    transform-origin:center;
    transition:transform var(--breath-phase-seconds, 4s) ease-in-out, opacity var(--breath-phase-seconds, 4s) ease-in-out;
}
.bc-arm {
    top:79px; width:16px; height:78px; border-radius:999px;
    background:var(--mode-shirt);
    box-shadow:inset 0 0 0 1px var(--w120);
}
.bc-arm-left { left:24px; transform:rotate(24deg); }
.bc-arm-right { right:24px; transform:rotate(-24deg); }
.bc-leg {
    bottom:6px; width:70px; height:28px; border-radius:999px;
    background:var(--mode-suit-alt);
    box-shadow:0 8px 14px var(--shadow);
}
.bc-leg-left { left:12px; transform:rotate(-15deg); }
.bc-leg-right { right:12px; transform:rotate(15deg); }
.breath-visual[data-phase="inhale"] .breath-character {
    transform:translateX(-50%) translateY(-3px) scale(1.025);
}
.breath-visual[data-phase="inhale"] .bc-chest {
    transform:scale(1.24, 1.14);
    opacity:.78;
}
.breath-visual[data-phase="exhale"] .bc-chest {
    transform:scale(.84, .9);
    opacity:.36;
}
.breath-visual[data-phase="hold-in"] .bc-chest {
    transform:scale(1.14, 1.08);
    opacity:.68;
}
.breath-square {
    position:absolute; inset:22px; border:1px solid var(--w140); border-radius:16px;
    background:radial-gradient(circle at 50% 50%, var(--w080), transparent 62%);
    z-index:1;
}
.breath-square-edge {
    position:absolute; background:var(--green); box-shadow:0 0 18px var(--green-glow);
    opacity:.25;
}
.edge-top, .edge-bottom { height:3px; left:14px; right:14px; }
.edge-left, .edge-right { width:3px; top:14px; bottom:14px; }
.edge-top { top:14px; }
.edge-right { right:14px; }
.edge-bottom { bottom:14px; }
.edge-left { left:14px; }
.breath-dot {
    position:absolute; width:15px; height:15px; border-radius:50%; left:7px; bottom:7px;
    background:var(--blue); box-shadow:0 0 20px var(--blue), 0 0 32px var(--green-glow);
}
.breath-visual { --breath-phase-seconds: 4s; }
.breath-visual[data-phase="inhale"] .breath-dot { animation:breathDotInhale var(--breath-phase-seconds) linear both; }
.breath-visual[data-phase="hold-in"] .breath-dot { animation:breathDotHoldTop var(--breath-phase-seconds) linear both; }
.breath-visual[data-phase="exhale"] .breath-dot { animation:breathDotExhale var(--breath-phase-seconds) linear both; }
.breath-visual[data-phase="hold-out"] .breath-dot { animation:breathDotHoldBottom var(--breath-phase-seconds) linear both; }
.breath-visual[data-phase="inhale"] .edge-left,
.breath-visual[data-phase="hold-in"] .edge-top,
.breath-visual[data-phase="exhale"] .edge-right,
.breath-visual[data-phase="hold-out"] .edge-bottom { opacity:1; }
.digital-lungs {
    position:relative; z-index:2; width:260px; max-width:74%; overflow:visible;
    filter:drop-shadow(0 16px 26px var(--shadow));
}
.lung { transform-box:fill-box; transform-origin:center; transition:transform 500ms ease, opacity 500ms ease; }
.lung-left { transform:translateX(6px) scale(.94); transition:transform var(--breath-phase-seconds, 4s) ease-in-out; }
.lung-right { transform:translateX(-6px) scale(.94); transition:transform var(--breath-phase-seconds, 4s) ease-in-out; }
.breath-visual[data-phase="inhale"] .lung-left { transform:translateX(-10px) scale(1.12, 1.08); }
.breath-visual[data-phase="inhale"] .lung-right { transform:translateX(10px) scale(1.12, 1.08); }
.breath-visual[data-phase="exhale"] .lung-left { transform:translateX(10px) scale(.88, .92); }
.breath-visual[data-phase="exhale"] .lung-right { transform:translateX(-10px) scale(.88, .92); }
.breath-visual[data-phase="hold-in"] .lung-left { transform:translateX(-8px) scale(1.08, 1.04); }
.breath-visual[data-phase="hold-in"] .lung-right { transform:translateX(8px) scale(1.08, 1.04); }
.lung-fill {
    fill:var(--w080); stroke:var(--green); stroke-width:3;
    filter:drop-shadow(0 0 16px var(--green-glow));
}
.lung-circuit, .lung-airway {
    fill:none; stroke:var(--blue); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
    opacity:.9; stroke-dasharray:8 10; animation:lungCircuit 2.8s linear infinite;
}
.lung-airway { stroke:var(--green); stroke-width:7; stroke-dasharray:none; }
.lung-glow {
    fill:none; stroke:var(--blue); stroke-width:14; stroke-linecap:round; opacity:.18;
}
.mindful-phase {
    font-size:clamp(34px, 8vw, 54px); font-weight:900; color:var(--green);
    text-shadow:3px 3px 0 var(--k900), 0 0 24px var(--green-glow);
}
.mindful-timer {
    min-height:104px; display:grid; place-items:center;
    font-size:clamp(64px, 16vw, 104px); font-weight:950; color:var(--text-hi);
    text-shadow:4px 4px 0 var(--k900); font-variant-numeric:tabular-nums;
}
.mindful-prompt {
    max-width:520px; min-height:52px; margin:0 auto 16px; color:var(--w700);
    font-size:18px; line-height:1.5;
}
.mindful-stage[data-mode="scan"] .breath-square { opacity:.35; }
.mindful-stage[data-mode="scan"] .breath-dot { animation:scanDot 8s ease-in-out infinite; }
.mindful-stage[data-mode="scan"] .lung-left,
.mindful-stage[data-mode="scan"] .lung-right { animation:scanLungs 6s ease-in-out infinite; }
.mindful-insights {
    display:grid;
    gap:14px;
    margin:14px 0;
}
.mindful-stat-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}
.mindful-stat-grid div {
    min-width:0;
    padding:12px;
    border:1px solid var(--w120);
    border-radius:8px;
    background:var(--surface-2);
}
.mindful-stat-grid strong {
    display:block;
    color:var(--text-hi);
    font-size:24px;
    line-height:1;
}
.mindful-stat-grid span {
    display:block;
    margin-top:6px;
    color:var(--w600);
    font-size:11px;
    font-weight:800;
    line-height:1.25;
    text-transform:uppercase;
}
.mindful-week {
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:7px;
    min-height:96px;
    align-items:end;
    padding:10px;
    border:1px solid var(--w100);
    border-radius:8px;
    background:var(--surface-2);
}
.mindful-week span {
    display:grid;
    grid-template-rows:1fr auto;
    gap:6px;
    min-height:74px;
    text-align:center;
}
.mindful-week i {
    align-self:end;
    display:block;
    height:var(--h);
    min-height:8px;
    border-radius:8px 8px 3px 3px;
    background:linear-gradient(180deg, var(--green), var(--blue));
    box-shadow:0 0 14px var(--green-glow);
}
.mindful-week em {
    color:var(--w600);
    font-size:10px;
    font-style:normal;
    font-weight:850;
    text-transform:uppercase;
}

/* A visible beat every 2 real seconds so a long body-scan segment (or even a
   4-second breath phase) never reads as frozen. */
.mindful-pulse-dot {
    display:inline-block; width:12px; height:12px; margin:4px auto 0; border-radius:50%;
    background:var(--green); opacity:.3; box-shadow:0 0 0 var(--green-glow);
}
.mindful-pulse-dot.pulse { animation:mindfulPulseBeat 1.1s ease-out; }
@keyframes mindfulPulseBeat {
    0% { transform:scale(1); opacity:.3; box-shadow:0 0 0 var(--green-glow); }
    30% { transform:scale(1.6); opacity:1; box-shadow:0 0 16px var(--green-glow); }
    100% { transform:scale(1); opacity:.3; box-shadow:0 0 0 var(--green-glow); }
}

/* ═══ Pomodoro — sand glass timer ═══ */
.pomodoro-float {
    display:none; position:sticky; top:8px; z-index:850; grid-template-columns:minmax(0, 1fr) auto auto;
    align-items:center; gap:10px; margin:8px auto 12px; max-width:1100px; padding:8px 10px;
    border:1px solid var(--w150); border-radius:8px; background:var(--surface-2);
    box-shadow:0 12px 28px var(--shadow);
}
.pomodoro-float.active { display:grid; }
.pomodoro-float-main {
    min-width:0; display:flex; align-items:center; gap:9px; border:0; background:transparent;
    color:var(--text-hi); text-align:left; cursor:pointer; padding:4px 2px;
}
.pomodoro-float-main strong { display:block; font-size:13px; font-weight:950; line-height:1.2; }
.pomodoro-float-main small { display:block; color:var(--w600); font-size:11px; font-weight:750; line-height:1.25; }
.pomodoro-float-sand {
    width:26px; height:30px; border:2px solid var(--accent); border-radius:44% 44% 48% 48%;
    background:
        linear-gradient(to bottom, var(--w120), transparent 44%, var(--w120) 56%, transparent),
        linear-gradient(to top, var(--blue) calc(var(--pomodoro-mini-progress, 0) * 100%), transparent 0);
    clip-path:polygon(16% 0, 84% 0, 58% 48%, 84% 100%, 16% 100%, 42% 48%);
    box-shadow:0 0 14px var(--accent-glow); flex:0 0 auto;
}
.pomodoro-float.running .pomodoro-float-sand { animation:pomodoroMiniPulse 1.2s ease-in-out infinite; }
.pomodoro-float-time {
    min-width:68px; text-align:center; color:var(--text-hi); font-size:20px; font-weight:950;
    font-variant-numeric:tabular-nums;
}
.pomodoro-float-actions { display:flex; gap:6px; }
.pomodoro-float-actions button {
    min-height:34px; border:1px solid var(--w150); border-radius:8px; padding:0 10px;
    background:var(--w060); color:var(--text-hi); font-size:12px; font-weight:900; cursor:pointer;
}
.pomodoro-float-actions button:first-child {
    background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}

/* ═══ Mindfulness — mini widget, same shape as .pomodoro-float ═══ */
.mindful-float {
    display:none; position:sticky; top:8px; z-index:850; grid-template-columns:minmax(0, 1fr) auto auto;
    align-items:center; gap:10px; margin:8px auto 12px; max-width:1100px; padding:8px 10px;
    border:1px solid var(--w150); border-radius:8px; background:var(--surface-2);
    box-shadow:0 12px 28px var(--shadow);
}
.mindful-float.active { display:grid; }
.mindful-float-main {
    min-width:0; display:flex; align-items:center; gap:9px; border:0; background:transparent;
    color:var(--text-hi); text-align:left; cursor:pointer; padding:4px 2px;
}
.mindful-float-main strong { display:block; font-size:13px; font-weight:950; line-height:1.2; }
.mindful-float-main small { display:block; color:var(--w600); font-size:11px; font-weight:750; line-height:1.25; }
.mindful-float-dot {
    width:16px; height:16px; border-radius:50%; flex:0 0 auto;
    background:var(--green); opacity:.3; box-shadow:0 0 0 var(--green-glow);
}
.mindful-float.running .mindful-float-dot.pulse { animation:mindfulPulseBeat 1.1s ease-out; }
.mindful-float-time {
    min-width:52px; text-align:center; color:var(--text-hi); font-size:20px; font-weight:950;
    font-variant-numeric:tabular-nums;
}

.pomodoro-wrap { width:100%; max-width:1100px; padding:10px 0 28px; }
.pomodoro-layout {
    display:grid; grid-template-columns:minmax(280px, 0.9fr) minmax(320px, 1fr); gap:16px; align-items:stretch;
}
.pomodoro-stage, .pomodoro-card {
    background:var(--surface-1); border:1px solid var(--w120); border-radius:8px;
    box-shadow:0 16px 40px var(--shadow); overflow:hidden;
}
.pomodoro-stage {
    min-height:470px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px; position:relative;
    background:
        radial-gradient(circle at 50% 30%, var(--w120), transparent 48%),
        linear-gradient(180deg, var(--surface-1), var(--surface-0));
}
.pomodoro-stage::before {
    content:""; position:absolute; inset:auto 22px 18px; height:10px; border-radius:50%;
    background:var(--w080); filter:blur(8px);
}
.pomodoro-hourglass-wrap { position:relative; z-index:1; width:min(300px, 82vw); aspect-ratio:0.68; display:grid; place-items:center; }
.hg-backlight {
    position:absolute; width:74%; height:80%; border-radius:50%;
    background:radial-gradient(circle, var(--accent-glow), transparent 66%);
    filter:blur(10px); opacity:.72;
}
.pomodoro-hourglass {
    --pomodoro-top:1;
    --pomodoro-bottom:0;
    position:relative; width:198px; height:346px; transform-origin:50% 50%;
}
.pomodoro-hourglass.flipping { animation:pomodoroFlip 680ms ease both; }
.hg-cap {
    position:absolute; left:18px; width:162px; height:26px; border-radius:6px;
    background:linear-gradient(180deg, var(--w350), var(--accent), var(--w180));
    border:1px solid var(--w250); box-shadow:0 6px 18px var(--shadow);
    z-index:3;
}
.hg-cap-top { top:0; }
.hg-cap-bottom { bottom:0; }
.hg-post {
    position:absolute; top:12px; bottom:12px; width:8px; border-radius:999px;
    background:linear-gradient(90deg, var(--w250), var(--surface-2), var(--w350));
    border:1px solid var(--w180); z-index:4;
}
.hg-post-left { left:26px; }
.hg-post-right { right:26px; }
.hg-glass {
    position:absolute; left:42px; top:28px; width:114px; height:290px; z-index:2;
    filter:drop-shadow(0 10px 18px var(--shadow));
}
.hg-glass::before {
    content:""; position:absolute; inset:8px 14px; z-index:6; pointer-events:none;
    background:linear-gradient(100deg, transparent 0 35%, var(--w250) 42%, transparent 52% 100%);
    opacity:.55; border-radius:50%;
}
.hg-bulb {
    position:absolute; left:0; width:114px; height:138px; overflow:hidden;
    background:linear-gradient(90deg, var(--w060), var(--w200) 18%, var(--w030) 52%, var(--w250));
    border:2px solid var(--w300);
}
.hg-top {
    top:0; clip-path:polygon(8% 0, 92% 0, 66% 72%, 52% 100%, 48% 100%, 34% 72%);
    border-radius:48% 48% 24% 24%;
}
.hg-bottom {
    bottom:0; clip-path:polygon(48% 0, 52% 0, 66% 28%, 92% 100%, 8% 100%, 34% 28%);
    border-radius:24% 24% 48% 48%;
}
.hg-sand {
    position:absolute; left:9%; right:9%; bottom:6px; z-index:2; opacity:.98;
    background:linear-gradient(180deg, var(--blue), var(--blue) 58%, var(--accent));
    background-size:100% 100%;
    box-shadow:0 -4px 22px var(--blue), inset 0 8px 18px var(--w180); transition:height 260ms linear;
}
.hg-sand::after {
    content:""; position:absolute; inset:0 0 auto; height:16px;
    background:linear-gradient(180deg, var(--w200), transparent);
    opacity:.6; border-radius:50%;
}
.hg-sand-top {
    height:calc(var(--pomodoro-top) * 100%);
    clip-path:polygon(0 16%, 100% 0, 100% 100%, 0 100%);
}
.hg-sand-bottom {
    height:calc(var(--pomodoro-bottom) * 92%);
    clip-path:polygon(0 26%, 50% 0, 100% 26%, 100% 100%, 0 100%);
}
.hg-neck {
    position:absolute; left:45px; top:130px; width:24px; height:30px; display:grid; place-items:center;
    z-index:5;
}
.hg-neck span {
    width:10px; height:10px; border-radius:50%; background:var(--blue);
    box-shadow:0 0 16px var(--blue);
}
.hg-stream {
    position:absolute; left:55px; top:140px; width:4px; height:78px; border-radius:999px;
    opacity:0; transform-origin:top;
}
.hg-stream span {
    position:absolute; left:0; width:4px; height:24px; border-radius:999px;
    background:var(--blue); box-shadow:0 0 14px var(--blue);
    animation:pomodoroSand 880ms linear infinite;
}
.hg-stream span:nth-child(2) { animation-delay:.18s; opacity:.72; }
.hg-stream span:nth-child(3) { animation-delay:.36s; opacity:.54; }
.hg-grains span {
    position:absolute; width:5px; height:5px; border-radius:50%; background:var(--blue);
    box-shadow:0 0 11px var(--blue); opacity:0;
}
.hg-grains span:nth-child(1) { left:46px; top:160px; animation-delay:.1s; }
.hg-grains span:nth-child(2) { left:58px; top:176px; animation-delay:.34s; }
.hg-grains span:nth-child(3) { left:53px; top:196px; animation-delay:.58s; }
.hg-grains span:nth-child(4) { left:63px; top:213px; animation-delay:.82s; }
.hg-grains span:nth-child(5) { left:48px; top:226px; animation-delay:1.06s; }
.pomodoro-hourglass.running .hg-grains span { animation:pomodoroGrain 1.4s ease-in-out infinite; }
.hg-shine {
    position:absolute; top:40px; left:72px; width:24px; height:250px; border-radius:999px;
    background:linear-gradient(180deg, transparent, var(--w250), transparent);
    opacity:.32; z-index:7; transform:rotate(9deg);
}
.hg-pedestal {
    position:absolute; bottom:7px; width:168px; height:14px; border-radius:50%;
    background:var(--w100); filter:blur(4px);
}
.pomodoro-hourglass.running .hg-stream { opacity:1; }
.pomodoro-title-block { position:relative; z-index:1; text-align:center; max-width:360px; margin-top:16px; }
.pomodoro-title-block h2 { margin:6px 0; color:var(--accent); font-size:clamp(24px, 4vw, 40px); letter-spacing:0; }
.pomodoro-title-block p { color:var(--w700); line-height:1.55; margin:0; }
.pomodoro-kicker {
    display:inline-flex; align-items:center; min-height:22px; color:var(--w600);
    text-transform:uppercase; font-size:11px; font-weight:950; letter-spacing:0;
}
.pomodoro-card { padding:18px; }
.pomodoro-control-card { display:flex; flex-direction:column; justify-content:center; gap:16px; }
.pomodoro-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pomodoro-card h3 { margin:2px 0 0; font-size:20px; color:var(--text-hi); letter-spacing:0; }
.pomodoro-chip {
    flex:0 0 auto; border:1px solid var(--w150); background:var(--w060); color:var(--w800);
    border-radius:999px; padding:6px 9px; font-size:12px; font-weight:850;
}
.pomodoro-time {
    min-height:104px; display:grid; place-items:center; border:1px solid var(--w120); border-radius:8px;
    background:var(--surface-0); color:var(--text-hi); font-size:clamp(48px, 9vw, 82px);
    font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:0;
}
.pomodoro-mode-tabs {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;
}
.pomodoro-mode-tabs button {
    min-height:42px; border-radius:8px; border:1px solid var(--w150); background:var(--w060);
    color:var(--w700); cursor:pointer; font-weight:900;
}
.pomodoro-mode-tabs button.active {
    background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.pomodoro-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pomodoro-duration-grid {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
.pomodoro-duration-grid label {
    display:flex; flex-direction:column; gap:6px; color:var(--w600); font-size:11px; font-weight:850;
    text-transform:uppercase; letter-spacing:0;
}
.pomodoro-duration-grid input {
    min-height:42px; border:1px solid var(--w150); border-radius:8px; padding:0 10px;
    background:var(--surface-0); color:var(--text-hi); font-weight:900; font-size:15px;
}
.pomodoro-duration-grid input:focus-visible, .pomodoro-mode-tabs button:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
}
.pomodoro-grid {
    display:grid; grid-template-columns:minmax(0, 0.85fr) minmax(0, 1fr); gap:16px; margin-top:16px;
}
.pomodoro-flow {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
}
.pomodoro-flow div {
    min-height:86px; display:flex; flex-direction:column; justify-content:center; gap:6px;
    background:var(--surface-0); border:1px solid var(--w100); border-radius:8px; padding:12px;
}
.pomodoro-flow strong { color:var(--accent); font-size:24px; font-weight:950; line-height:1.05; overflow-wrap:anywhere; }
.pomodoro-flow span { color:var(--w600); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:0; }
.pomodoro-history {
    min-height:86px; max-height:190px; overflow:auto; display:grid; gap:8px; color:var(--w650); font-size:13px;
}
.pomodoro-history-item {
    border:1px solid var(--w100); background:var(--surface-0); border-radius:8px; padding:10px 12px;
}
.pomodoro-history-item strong { display:block; color:var(--text-hi); font-size:13px; margin-bottom:3px; }
.pomodoro-history-item span { color:var(--w600); font-size:12px; line-height:1.45; }
@keyframes pomodoroSand {
    0% { transform:translateY(-8px) scaleY(0.25); opacity:0.25; }
    50% { transform:translateY(22px) scaleY(1); opacity:1; }
    100% { transform:translateY(58px) scaleY(0.35); opacity:0.35; }
}
@keyframes pomodoroGrain {
    0%, 22% { transform:translateY(-12px) scale(.5); opacity:0; }
    45% { opacity:1; }
    100% { transform:translateY(22px) scale(1); opacity:0; }
}
@keyframes pomodoroFlip {
    0% { transform:rotate(0); }
    100% { transform:rotate(180deg); }
}
@keyframes pomodoroMiniPulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.08); }
}
@keyframes breathMiniDot {
    0% { left:8px; bottom:8px; }
    25% { left:8px; bottom:39px; }
    50% { left:61px; bottom:39px; }
    75% { left:61px; bottom:8px; }
    100% { left:8px; bottom:8px; }
}
@keyframes scanMiniPulse {
    0%, 100% { transform:scaleY(.72); opacity:.55; }
    50% { transform:scaleY(1); opacity:1; }
}
@keyframes resetMiniPulse {
    0%, 100% { transform:scale(.8); opacity:.18; }
    50% { transform:scale(1.05); opacity:.62; }
}
@keyframes breathDotInhale {
    from { left:7px; bottom:7px; }
    to { left:7px; bottom:calc(100% - 22px); }
}
@keyframes breathDotHoldTop {
    from { left:7px; bottom:calc(100% - 22px); }
    to { left:calc(100% - 22px); bottom:calc(100% - 22px); }
}
@keyframes breathDotExhale {
    from { left:calc(100% - 22px); bottom:calc(100% - 22px); }
    to { left:calc(100% - 22px); bottom:7px; }
}
@keyframes breathDotHoldBottom {
    from { left:calc(100% - 22px); bottom:7px; }
    to { left:7px; bottom:7px; }
}
@keyframes breathSeatedFloat {
    0%, 100% { margin-bottom:0; }
    50% { margin-bottom:3px; }
}
@keyframes lungCircuit {
    to { stroke-dashoffset:-36; }
}
@keyframes scanDot {
    0%, 100% { left:7px; bottom:7px; opacity:.55; }
    50% { left:calc(100% - 22px); bottom:calc(100% - 22px); opacity:1; }
}
@keyframes scanLungs {
    0%, 100% { opacity:.78; }
    50% { opacity:1; }
}
@media (max-width:860px) {
    .pomodoro-layout, .pomodoro-grid { grid-template-columns:1fr; }
    .pomodoro-stage { min-height:410px; }
    .breath-visual { height:264px; }
    .mode-visual { height:158px; }
    .boss-character-left { left:17%; }
    .boss-character-right { right:17%; }
    .med-left { left:10%; }
    .med-right { right:10%; }
}
@media (max-width:620px) {
    .pomodoro-float { grid-template-columns:1fr auto; }
    .pomodoro-float-actions { grid-column:1 / -1; }
    .pomodoro-float-actions button { flex:1; }
    .mindful-float { grid-template-columns:1fr auto; }
    .mindful-float .pomodoro-float-actions { grid-column:1 / -1; }
    .mindful-float .pomodoro-float-actions button { flex:1; }
    .pomodoro-duration-grid, .pomodoro-flow { grid-template-columns:1fr; }
    .mindful-control-grid { grid-template-columns:1fr; }
    .mindful-stat-grid { grid-template-columns:1fr 1fr; }
    .mindful-stage { padding:16px 12px; }
    .digital-lungs { width:228px; }
    .breath-character { transform:translateX(-50%) scale(.9); transform-origin:bottom center; }
    .breath-visual[data-phase="inhale"] .breath-character {
        transform:translateX(-50%) translateY(-3px) scale(.92);
    }
    .mode-visual { height:146px; }
    .boss-character, .med-person { transform:scale(.86); transform-origin:bottom center; }
    .boss-character-left { left:10%; }
    .boss-character-right { right:10%; }
    .boss-desk { left:7%; right:7%; }
    .med-table { left:10%; right:10%; }
    .med-issue { font-size:9px; min-width:46px; padding:4px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   NEXT-GEN LAYER — PS5 HUD / glassmorphism / glow halos
   Added 2026-07-26. All additive — no existing rules changed.
   New tokens for both light and dark themes. Uses backdrop-filter
   (supported on all modern Safari/Chrome/Firefox — M-chip devices
   handle it at 60fps natively).
   ═══════════════════════════════════════════════════════════════ */

/* ── New tokens: glass + glow ─────────────────────────────────── */
:root {
    /* Glass surfaces */
    --glass-bg: rgba(255, 253, 247, 0.72);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 20px;
    --glass-saturate: 180%;

    /* Glow halos */
    --glow-accent: 0 0 24px var(--accent-glow), 0 0 48px rgba(156, 81, 34, 0.12);
    --glow-accent-strong: 0 0 20px var(--accent-glow), 0 0 60px var(--accent-glow), 0 4px 24px var(--card-drop);
    --glow-soft: 0 0 40px rgba(156, 81, 34, 0.06);

    /* HUD borders */
    --hud-border-clip: polygon(
        0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0 calc(100% - 8px)
    );
    --hud-radius: 14px;

    /* Ambient depth */
    --depth-shadow: 0 2px 8px rgba(90,74,50,0.06), 0 8px 32px rgba(90,74,50,0.10), 0 24px 64px rgba(90,74,50,0.06);
    --depth-shadow-hover: 0 4px 12px rgba(90,74,50,0.08), 0 16px 48px rgba(90,74,50,0.16), 0 32px 80px rgba(90,74,50,0.10);

    /* Loading overlay */
    --loader-bg: #F6EFE2;
    --loader-bar: var(--accent);
    --loader-text: var(--text-dim);

    /* Animated card draw */
    --card-draw-duration: 0.5s;
    --card-draw-glow-duration: 0.8s;
}

:root[data-theme="dark"] {
    --glass-bg: rgba(24, 26, 44, 0.72);
    --glass-border: rgba(124, 108, 248, 0.2);
    --glow-accent: 0 0 24px var(--accent-glow), 0 0 48px rgba(124, 108, 248, 0.16);
    --glow-accent-strong: 0 0 20px var(--accent-glow), 0 0 60px var(--accent-glow), 0 4px 24px rgba(0,0,0,0.4);
    --glow-soft: 0 0 40px rgba(124, 108, 248, 0.08);
    --depth-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.3);
    --depth-shadow-hover: 0 4px 12px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.5), 0 32px 80px rgba(0,0,0,0.4);
    --loader-bg: #0e0f1a;
}

/* ── Glassmorphism panels ─────────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow);
}

/* ── Enhanced tool cards: glass + glow + HUD corners ──────────── */
.tool-card {
    /* Override with glass treatment */
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    /* HUD clip-path corners */
    clip-path: var(--hud-border-clip);
    border-radius: var(--hud-radius) !important;
}

.tool-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: var(--glow-accent-strong), var(--depth-shadow-hover) !important;
    border-color: var(--accent) !important;
    /* Glow halo on hover */
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

.tool-card.active-card {
    box-shadow: var(--glow-accent), var(--depth-shadow) !important;
    border-color: var(--accent) !important;
}

.tool-card.pinned-card {
    box-shadow: var(--glow-accent), var(--depth-shadow) !important;
}

/* ── Enhanced nav tabs: glass + active glow ──────────────────── */
.nav-tab {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.nav-tab.active {
    background: var(--glass-bg) !important;
    box-shadow: var(--glow-accent), 0 4px 16px var(--card-drop);
    border-color: var(--accent) !important;
}

/* ── Mode cards: glass + enhanced hover ──────────────────────── */
.mode-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    clip-path: var(--hud-border-clip);
    border-radius: var(--hud-radius) !important;
}

.mode-card:hover {
    box-shadow: var(--glow-accent-strong), var(--depth-shadow-hover) !important;
    border-color: var(--accent) !important;
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

/* ── Enhanced card deal animation ────────────────────────────── */
@keyframes card-deal {
    0% {
        opacity: 0;
        transform: translateY(-24px) scale(0.85) rotateZ(-2deg);
        filter: blur(8px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateZ(0);
        filter: blur(0);
    }
}

@keyframes card-draw-glow {
    0% { box-shadow: var(--glow-accent-strong), 0 0 80px var(--accent-glow); }
    100% { box-shadow: var(--depth-shadow); }
}

.tool-card.just-drawn {
    animation: card-deal var(--card-draw-duration) cubic-bezier(.34, 1.56, .64, 1) both,
               card-draw-glow var(--card-draw-glow-duration) ease-out forwards;
}

/* ── Radial lighting halos ───────────────────────────────────── */
.halo::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%);
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
    animation: halo-pulse 4s ease-in-out infinite;
}

@keyframes halo-pulse {
    0%, 100% { opacity: 0.08; transform: scale(0.8); }
    50% { opacity: 0.18; transform: scale(1.1); }
}

/* ── Loading overlay ─────────────────────────────────────────── */
.app-loader {
    position: fixed;
    inset: 0;
    background: #030508;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    overflow: hidden;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Gold bokeh particles ────────────────────────────────────── */
.coin-bokeh {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.coin-bokeh span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,83,0.4), rgba(212,168,83,0));
    animation: bokeh-float 4s ease-in-out infinite;
}
.coin-bokeh span:nth-child(1) { width:120px; height:120px; left:15%; top:20%; animation-delay:0s; }
.coin-bokeh span:nth-child(2) { width:80px; height:80px; right:20%; top:15%; animation-delay:0.5s; }
.coin-bokeh span:nth-child(3) { width:160px; height:160px; left:50%; bottom:15%; animation-delay:1s; }
.coin-bokeh span:nth-child(4) { width:60px; height:60px; left:25%; bottom:30%; animation-delay:1.5s; }
.coin-bokeh span:nth-child(5) { width:100px; height:100px; right:15%; bottom:25%; animation-delay:0.3s; }
.coin-bokeh span:nth-child(6) { width:40px; height:40px; left:40%; top:10%; animation-delay:2s; }
.coin-bokeh span:nth-child(7) { width:70px; height:70px; right:35%; bottom:10%; animation-delay:0.8s; }
.coin-bokeh span:nth-child(8) { width:50px; height:50px; left:10%; top:50%; animation-delay:1.3s; }
.coin-bokeh span:nth-child(9) { width:90px; height:90px; right:10%; top:45%; animation-delay:0.2s; }
.coin-bokeh span:nth-child(10) { width:30px; height:30px; left:60%; top:30%; animation-delay:1.8s; }

@keyframes bokeh-float {
    0%, 100% { opacity: 0.3; transform: scale(1) translateY(0); }
    50% { opacity: 0.6; transform: scale(1.2) translateY(-20px); }
}

/* ── Coin intro: rotate-in then fly to logo ──────────────────── */
.coin-intro-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    animation: coin-intro-sequence 2.5s cubic-bezier(.2, .8, .2, 1) forwards;
    z-index: 10;
}

@media (max-width: 600px) {
    .coin-intro-wrap { width: 160px; height: 160px; }
}

.coin-intro-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 60px rgba(212, 168, 83, 0.4), 0 0 120px rgba(212, 168, 83, 0.2);
    animation: coin-spin-3d 1.5s ease-out;
    transform-origin: center center;
}

.coin-intro-glow {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 168, 83, 0.3), transparent 60%);
    animation: coin-glow-pulse 2s ease-in-out;
    pointer-events: none;
}

@keyframes coin-spin-3d {
    0% { transform: rotateY(-90deg) scale(0.3); opacity: 0; }
    50% { transform: rotateY(0deg) scale(1.1); opacity: 1; }
    100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes coin-glow-pulse {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 0.4; transform: scale(1); }
}

/* The full sequence: hold, then fly to top-left */
@keyframes coin-intro-sequence {
    0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
    15% { transform: scale(1) rotate(0deg); opacity: 1; }
    60% { transform: scale(1) rotate(0deg); opacity: 1; }
    /* Fly to top-left corner — approximate logo position */
    100% {
        transform: scale(0.16) translate(-280px, -260px) rotate(360deg);
        opacity: 1;
    }
}

@media (max-width: 600px) {
    @keyframes coin-intro-sequence {
        0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
        15% { transform: scale(1) rotate(0deg); opacity: 1; }
        60% { transform: scale(1) rotate(0deg); opacity: 1; }
        100% {
            transform: scale(0.12) translate(-180px, -200px) rotate(360deg);
            opacity: 1;
        }
    }
}

.app-loader .loader-text {
    font-size: 11px;
    color: rgba(212, 168, 83, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 24px;
}

@keyframes loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── View transition: smooth fade between sections ──────────── */
.view-transition {
    animation: view-enter 0.4s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes view-enter {
    0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Ambient background glow (subtle, fixed) ────────────────── */
.ambient-glow {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    animation: ambient-drift 8s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
    0% { transform: translateX(-60%) translateY(0); }
    100% { transform: translateX(-40%) translateY(20px); }
}

/* ── Stage bar: enhanced progress with glow ─────────────────── */
.stage-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
}

.stage-btn.active {
    box-shadow: 0 0 16px var(--accent-glow);
    filter: brightness(1.1);
}

.stage-btn::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 0; height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--accent-glow);
}

.stage-btn.active::after {
    width: 100%;
}

/* ── Reduced motion: respect user preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tool-card, .mode-card, .nav-tab, .stage-btn {
        animation: none !important;
        transition: none !important;
    }
    .halo::before, .ambient-glow {
        display: none;
    }
    .app-loader .coin-intro-wrap {
        animation: none;
    }
    .app-loader .coin-intro-img {
        animation: none;
        opacity: 1;
    }
    .coin-bokeh { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FULL ROLLOUT — every section gets the next-gen treatment
   ═══════════════════════════════════════════════════════════════ */

/* ── Header: glass bar with glow ─────────────────────────────── */
.header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
}

.logo-icon {
    box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow) !important;
    animation: logo-pulse 3s ease-in-out infinite;
}

@keyframes logo-pulse {
    0%, 100% { box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(156,81,34,0.08); }
    50% { box-shadow: 0 0 28px var(--accent-glow), 0 0 56px var(--accent-glow); }
}
:root[data-theme="dark"] .logo-icon {
    animation: logo-pulse-dark 3s ease-in-out infinite;
}
@keyframes logo-pulse-dark {
    0%, 100% { box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(124,108,248,0.1); }
    50% { box-shadow: 0 0 28px var(--accent-glow), 0 0 56px var(--accent-glow); }
}

/* ── Nav tabs: glass + active glow + smooth transitions ──────── */
.nav-tab {
    transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
}

.nav-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--card-drop);
}

.nav-tab.active {
    background: var(--glass-bg) !important;
    box-shadow: var(--glow-accent), 0 4px 16px var(--card-drop) !important;
    border-color: var(--accent) !important;
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

/* ── Stage progress bar: HUD segments with glow ─────────────── */
.stair-progress .seg {
    transition: all 0.4s cubic-bezier(.2, .8, .2, 1);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.stair-progress .seg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--card-drop);
    z-index: 5;
}

.stair-progress .seg.current {
    box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent-glow) !important;
    filter: brightness(1.1) drop-shadow(0 0 8px var(--accent-glow));
}

/* ── Emotion wheel: glass container + glow halo ─────────────── */
.wheel-container {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.wheel-container::before {
    background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%) !important;
    opacity: 0.12 !important;
    animation: wheel-halo 5s ease-in-out infinite !important;
}

@keyframes wheel-halo {
    0%, 100% { opacity: 0.08; transform: scale(0.9); }
    50% { opacity: 0.18; transform: scale(1.05); }
}

.wheel-wedge {
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.wheel-wedge:hover .wheel-emotion-slice {
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px var(--accent-glow)) brightness(1.15);
}

/* ── Label Maker: glass panel + card glow ───────────────────── */
.label-maker {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
}

.label-maker .lm-led.active {
    box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow) !important;
}

/* ── Timer display: glass + glow ring ────────────────────────── */
.timer-display {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.timer-display .time {
    text-shadow: 0 0 12px var(--accent-glow);
}

.timer-display .time.danger {
    text-shadow: 0 0 16px rgba(229, 57, 53, 0.6), 0 0 32px rgba(229, 57, 53, 0.3);
    animation: pulse-danger 1s infinite, danger-glow 0.5s ease-in-out infinite alternate !important;
}

@keyframes danger-glow {
    0% { text-shadow: 0 0 12px rgba(229,57,53,0.4); }
    100% { text-shadow: 0 0 24px rgba(229,57,53,0.7), 0 0 48px rgba(229,57,53,0.3); }
}

/* ── Command palette: glass modal + blur backdrop ───────────── */
.command-palette {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glow-accent), var(--depth-shadow-hover) !important;
    border-radius: var(--hud-radius) !important;
}

.command-palette-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(.2, .8, .2, 1);
}

.command-palette-card:hover {
    box-shadow: var(--glow-accent), 0 4px 16px var(--card-drop) !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px) scale(1.01);
}

/* ── Current tool banner: glass + reveal glow ────────────────── */
.current-tool-banner {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
}

.current-tool-banner.show {
    animation: fade-up 0.4s, banner-glow-in 0.6s ease-out !important;
}

@keyframes banner-glow-in {
    0% { box-shadow: var(--glow-accent-strong), var(--depth-shadow); }
    100% { box-shadow: var(--depth-shadow); }
}

/* ── Mode cards: enhanced glass + glow ───────────────────────── */
/* (Already handled in the first batch, but add scene-level glass) */

/* ── CALMAR panel: glass treatment ────────────────────────────── */
.calmar-panel,
#calmarPanel,
[data-calmar] {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* ── Minimum of Operation: glass + progress glow ────────────── */
.moo-progress,
.moo-container,
#mooProgress {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.moo-item.done,
.moo-item.completed {
    box-shadow: 0 0 8px var(--accent-glow) !important;
}

/* ── Listen For: glass panel ─────────────────────────────────── */
.listen-for-panel,
#listenForPanel {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Promotional banners: glass + cohesive styling ──────────── */
.promo-book {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
    transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
}

.promo-book:hover {
    box-shadow: var(--glow-accent), var(--depth-shadow-hover) !important;
    transform: translateY(-2px);
}

/* ── Coaching CTA: glass + glow ──────────────────────────────── */
.coaching-cta,
.book-coaching,
a[href*="calendly"] {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* ── Stats bar: glass HUD readout ───────────────────────────── */
.stats-bar {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-radius: 10px;
}

/* ── Toolbar: glass action bar ──────────────────────────────── */
.toolbar {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Session panel: glass ───────────────────────────────────── */
.session-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(18px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
}

/* ── Mode scenes (Haggle/Friend/Boss/Mediator): glass framing ─ */
.mode-scenario,
.mode-wrap,
.bk-panel {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: var(--hud-radius);
}

/* ── Fitness section: glass ──────────────────────────────────── */
#view-fitness,
.fitness-panel,
.fitness-section {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Fitness Graphics Stage ──────────────────────────────────── */
/* Interactive drill cards + animated figure. Tokens only — no hex. */
.fitness-stage-card { padding: 0; overflow: hidden; }
.fitness-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0;
}
@media (max-width: 880px) {
    .fitness-stage-grid { grid-template-columns: 1fr; }
}

.fitness-drill-list {
    padding: 18px;
    border-right: 1px solid var(--w100);
    background: var(--surface-1);
    display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 880px) { .fitness-drill-list { border-right: 0; border-bottom: 1px solid var(--w100); } }
.fitness-drill-list-title {
    font-size: 10px; font-weight: 800; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--w500);
    margin: 0 0 4px;
}
.fitness-drill-btn {
    display: block; width: 100%; text-align: left;
    background: var(--w030);
    border: 1px solid var(--w100);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text);
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
    font: inherit;
}
.fitness-drill-btn:hover { transform: translateY(-1px); background: var(--w060); border-color: var(--w200); }
.fitness-drill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fitness-drill-btn.is-active {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 1px var(--accent-glow) inset;
}
.fitness-drill-btn .drill-bpm {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    background: var(--w060);
    border: 1px solid var(--w150);
    border-radius: 6px;
    padding: 2px 6px;
    margin-right: 8px;
}
.fitness-drill-btn .drill-name { display: block; font-weight: 800; font-size: 14px; color: var(--text-hi); margin-top: 4px; }
.fitness-drill-btn .drill-sub  { display: block; font-size: 11px; color: var(--w500); margin-top: 2px; }
.fitness-drill-btn .drill-meta { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w500); }

.fitness-stage-viewport {
    position: relative;
    min-height: 320px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-0) 100%);
    overflow: hidden;
    user-select: none;
    touch-action: none; /* let JS own pointer events for the drag handle */
}
.fitness-stage-fig {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-hi);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.fitness-stage-fig.is-active { opacity: 1; pointer-events: auto; }
.fitness-stage-fig svg {
    width: 86%; max-width: 360px; height: auto;
    color: var(--text-hi);
    filter: drop-shadow(0 4px 14px var(--accent-glow));
}
.fitness-stage-fig[data-drill="pullup"] { --anim-duration: 1.6s; }
.fitness-stage-fig[data-drill="dip"]    { --anim-duration: 1.8s; }
.fitness-stage-fig[data-drill="rope"]   { --anim-duration: 0.7s; }

/* === Animations (only run on the .is-active figure) ============ */
@keyframes fgx-pullup-cycle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-22px); }
}
.fitness-stage-fig.is-active[data-drill="pullup"] .fgx-figure {
    animation: fgx-pullup-cycle var(--anim-duration) ease-in-out infinite;
    transform-origin: 50% 22px; /* hinge near bar */
}

@keyframes fgx-dip-cycle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(14px); }
}
.fitness-stage-fig.is-active[data-drill="dip"] .fgx-figure {
    animation: fgx-dip-cycle var(--anim-duration) ease-in-out infinite;
}

@keyframes fgx-rope-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.fitness-stage-fig.is-active[data-drill="rope"] .fgx-figure {
    animation: fgx-rope-bounce var(--anim-duration) ease-in-out infinite;
    transform-origin: 50% 100%;
}
/* The rope arcs above and below the jumper — not a full spin. The
   arc is drawn at the SVG's natural position; we just bounce it in
   sync with the figure so the two move together. */
.fitness-stage-fig.is-active[data-drill="rope"] .fgx-rope {
    transform-origin: 50% 50%;
    animation: fgx-rope-bounce var(--anim-duration) ease-in-out infinite;
    opacity: 0;
    transition: opacity .4s ease;
}
.fitness-stage-fig.is-active[data-drill="rope"].has-rope .fgx-rope {
    opacity: 1;
}
@keyframes fgx-rope-shadow {
    0%, 100% { transform: scaleX(1);   opacity: .18; }
    50%      { transform: scaleX(.78); opacity: .10; }
}
.fitness-stage-fig.is-active[data-drill="rope"] .fgx-shadow {
    animation: fgx-rope-shadow var(--anim-duration) ease-in-out infinite;
    transform-origin: 140px 180px;
}

/* HUD overlay (BPM and movement-type chips) */
.fitness-stage-hud {
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
}
.fitness-stage-hud.tl { top: 14px; left: 14px; }
.fitness-stage-hud.tr { top: 14px; right: 14px; }
.fitness-stage-hud.bl { bottom: 14px; left: 14px; }
.fitness-stage-hud.br { bottom: 14px; right: 14px; }
.fitness-stage-hud .chip {
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-hi);
    border: 1px solid var(--w150);
    backdrop-filter: blur(6px);
}
.fitness-stage-hud .chip.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }
.fitness-stage-hud .chip.warn   { color: var(--green); border-color: var(--green); }

/* Pulsing heartbeat bars */
.fitness-stage-hud .bars { display: inline-flex; align-items: end; gap: 2px; height: 12px; margin-right: 6px; }
.fitness-stage-hud .bars span {
    display: block; width: 2px; background: var(--accent); border-radius: 1px;
    animation: fgx-bar 1s ease-in-out infinite;
}
.fitness-stage-hud .bars span:nth-child(1) { animation-delay: 0.00s; }
.fitness-stage-hud .bars span:nth-child(2) { animation-delay: 0.18s; }
.fitness-stage-hud .bars span:nth-child(3) { animation-delay: 0.36s; }
.fitness-stage-hud .bars span:nth-child(4) { animation-delay: 0.54s; }
@keyframes fgx-bar { 0%,100%{height:3px} 50%{height:11px} }

/* Drag handle — the user grabs this to position the figure */
.fitness-stage-drag {
    position: absolute;
    width: 44px; height: 44px;
    margin-left: -22px; margin-top: -22px;
    border-radius: 50%;
    border: 1px dashed var(--accent);
    background: var(--accent-glow);
    cursor: grab;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    box-shadow: 0 0 18px var(--accent-glow);
    transition: transform .15s ease;
}
.fitness-stage-drag:active { cursor: grabbing; transform: scale(1.1); }
.fitness-stage-drag::after {
    content: '✥';
    font-size: 18px;
    line-height: 1;
}

/* Tier / unlock toast */
.fitness-stage-toast {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-2);
    color: var(--text-hi);
    border: 1px solid var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 5;
}
.fitness-stage-toast.is-on {
    opacity: 1;
    transform: translate(-50%, -56%);
}

/* No-rope explainer chip */
.fitness-rope-msg {
    margin: 12px 18px 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface-1);
    border: 1px solid var(--w100);
    color: var(--w500);
    font-size: 12px;
    line-height: 1.5;
}
.fitness-rope-msg.unlocked { color: var(--green); border-color: var(--green); }

/* === Mobile / reduced motion =================================== */
@media (prefers-reduced-motion: reduce) {
    .fitness-stage-fig.is-active .fgx-figure,
    .fitness-stage-fig.is-active[data-drill="rope"] .fgx-rope,
    .fitness-stage-fig.is-active[data-drill="rope"] .fgx-shadow,
    .fitness-stage-hud .bars span { animation: none !important; }
    /* Keep the rope visible in its drawn position when motion is off */
    .fitness-stage-fig.is-active[data-drill="rope"] .fgx-rope { transform: none !important; }
}

/* ── Pomodoro: glass ─────────────────────────────────────────── */
#view-pomodoro,
.pomodoro-float,
.pomodoro-panel {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* ── Mindfulness: glass ──────────────────────────────────────── */
#view-mindfulness,
.mindful-panel,
.mindful-stage {
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

/* ── Persuasion: glass ───────────────────────────────────────── */
#view-persuasion,
.persuasion-panel {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Preparation: glass ──────────────────────────────────────── */
#view-prep,
.prep-panel,
.prep-section {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Sales Power: glass ─────────────────────────────────────── */
#view-sales,
.sales-panel {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── QLA / $200M: glass ─────────────────────────────────────── */
#view-qla,
.qla-panel {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Trophy room: glass ─────────────────────────────────────── */
#view-trophy,
.trophy-panel {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Generic panel glass (catch-all for any surface-1 panel) ── */
.view-container > div,
.view-container > section {
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

/* ── Buttons: enhanced with glow on primary actions ─────────── */
.btn-primary,
.btn:not(.btn-ghost):not(.btn-icon) {
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.btn-primary:hover,
.btn:not(.btn-ghost):not(.btn-icon):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--card-drop), 0 0 12px var(--accent-glow);
}

.btn-primary:active,
.btn:not(.btn-ghost):not(.btn-icon):active {
    transform: translateY(0) scale(0.98);
}

/* ── Icon buttons: glass + glow on active ───────────────────── */
.btn-icon {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    border: 1px solid var(--glass-border) !important;
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.btn-icon:hover {
    box-shadow: 0 4px 12px var(--card-drop), 0 0 8px var(--accent-glow) !important;
    transform: scale(1.08) !important;
}

.btn-icon.active {
    box-shadow: var(--glow-accent) !important;
}

/* ── View transitions: smooth fade between all tabs ─────────── */
.view-container > div,
.view-container > section {
    animation: view-enter 0.4s cubic-bezier(.2, .8, .2, 1) both;
}

.view-container > div[style*="display: none"],
.view-container > section[style*="display: none"] {
    animation: none;
}

/* ── Scrollbar: themed for premium feel ─────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--w180);
    border-radius: 4px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Selection: themed ───────────────────────────────────────── */
::selection {
    background: var(--accent-glow);
    color: var(--text-hi);
}

/* ── Dark theme: deeper glass, stronger glow ────────────────── */
:root[data-theme="dark"] .header {
    background: rgba(14, 15, 26, 0.72) !important;
    border-color: rgba(124, 108, 248, 0.15) !important;
}

:root[data-theme="dark"] .nav-tab.active {
    background: rgba(24, 26, 44, 0.72) !important;
}

:root[data-theme="dark"] .promo-book {
    border-color: rgba(124, 108, 248, 0.15) !important;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(124, 108, 248, 0.3);
}

:root[data-theme="dark"] ::selection {
    background: rgba(124, 108, 248, 0.3);
}

/* ── Mobile: lighter effects for performance ─────────────────── */
@media (max-width: 768px) {
    .tool-card,
    .mode-card,
    .label-maker,
    .current-tool-banner,
    .session-panel,
    .command-palette {
        backdrop-filter: blur(8px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    }
    .ambient-glow { display: none; }
    .halo::before { display: none; }
}

/* ── Reduced motion: kill all non-essential animation ────────── */
@media (prefers-reduced-motion: reduce) {
    .logo-icon { animation: none !important; }
    .wheel-container::before { animation: none !important; }
    .stair-progress .seg { transition: none !important; }
    .view-container > div,
    .view-container > section { animation: none !important; }
    .current-tool-banner.show { animation: fade-up 0.2s !important; }
}

/* ═══════════════════════════════════════════════════════════════
   WHEEL NEXT-GEN — mobile-optimized graphics engine
   GPU-accelerated transforms, momentum drag, glassmorphism wheel
   ═══════════════════════════════════════════════════════════════ */

/* ── GPU acceleration for the wheel group ───────────────────── */
#wheelGroup {
    transform-origin: 250px 250px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#wheelGroup.dragging {
    transition: none !important;
}

/* ── Wheel canvas: glass + glow on mobile ───────────────────── */
.wheel-canvas-wrap {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.wheel-canvas-wrap svg {
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

/* ── Stage lights: disable on mobile for CPU ────────────────── */
@media (max-width: 768px) {
    .wheel-stage-lights {
        animation: none !important;
    }
    .wheel-stage-lights span {
        width: 10px;
        height: 10px;
    }
}

/* ── SPIN button: mobile-optimized ──────────────────────────── */
@media (max-width: 768px) {
    .spin-btn-big {
        padding: 14px 36px;
        font-size: 18px;
        min-height: 56px;
        min-width: 200px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .spin-btn-big:active {
        transform: translateY(2px) scale(0.97);
    }
}

/* ── Wheel pointer: sharper on retina ───────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .wheel-pointer {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(229,57,53,0.7));
    }
    .wheel-pointer::after {
        width: 14px;
        height: 14px;
    }
}

/* ── Emotion slices: smoother transitions ────────────────────── */
.wheel-emotion-slice {
    transition: opacity 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.wheel-emotion-slice:active {
    opacity: 1 !important;
    filter: brightness(1.2);
}

/* ── Attract mode: lighter on mobile ─────────────────────────── */
@media (max-width: 768px) {
    .wheel-canvas-wrap.attract svg {
        animation: wheel-breathe 6s ease-in-out infinite;
    }
    @keyframes wheel-breathe {
        0%,100% { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3)); }
        50% { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3)) drop-shadow(0 0 14px var(--accent-glow)); }
    }
}

/* ── Wheel container: enhanced glass + glow halo ────────────── */
.wheel-container {
    background:
        radial-gradient(circle at 18% 12%, var(--accent-glow), transparent 28%),
        radial-gradient(circle at 82% 12%, var(--accent-glow), transparent 28%),
        radial-gradient(circle, var(--w080) 0 1px, transparent 2px),
        radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 50%) !important;
}

.wheel-container::before {
    opacity: 0.35 !important;
    filter: blur(2px) !important;
}

/* ── Wheel header: glow text ────────────────────────────────── */
.wheel-header h2 {
    text-shadow: 0 3px 0 var(--k800), 0 0 28px var(--accent-glow), 0 0 56px var(--accent-glow) !important;
}

/* ── Emotion detail panel: glass ─────────────────────────────── */
.emotion-detail {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow);
    border-radius: var(--hud-radius);
}

/* ── Emotion accordion: glass ────────────────────────────────── */
.emo-accordion {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.emo-item {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.emo-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 12px var(--card-drop);
}

/* ── Wheel legend: glass ────────────────────────────────────── */
.wheel-legend {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* ── Focus mode: enhanced dimming ───────────────────────────── */
.wheel-canvas-wrap.focus-mode svg {
    filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35)) brightness(0.5) saturate(0.4);
}

.wheel-canvas-wrap.focus-mode .wheel-emotion-slice.active-slice {
    filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 12px var(--accent-glow));
}

/* ── iPad-specific: larger touch targets ────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
    .wheel-emotion-slice {
        min-width: 40px;
        min-height: 40px;
    }
    .spin-btn-big {
        padding: 18px 56px;
        font-size: 24px;
        min-height: 64px;
    }
    .nav-tab {
        min-height: 48px;
        padding: 10px 16px;
    }
}

/* ── Momentum indicator (visual feedback during drag) ──────── */
.wheel-canvas-wrap.dragging::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0.3;
    pointer-events: none;
    animation: drag-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes drag-pulse {
    0% { opacity: 0.15; transform: scale(1); }
    100% { opacity: 0.35; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-canvas-wrap.dragging::after { animation: none; }
    .wheel-canvas-wrap.attract svg { animation: none; }
    .wheel-emotion-slice { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MINDFULNESS — pre-rendered lotus breathing GIF from Supabase
   The lotus breathes while the user breathes. Synchronized
   atmosphere that makes the tab feel alive without CSS animation.
   ═══════════════════════════════════════════════════════════════ */

/* ── Lotus background layer ─────────────────────────────────── */
.mindful-lotus-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.mindful-lotus-gif {
    width: 100%;
    max-width: 400px;
    height: auto;
    opacity: 0.35;
    filter: blur(2px) saturate(1.3);
    border-radius: 50%;
    transition: opacity 0.6s ease, filter 0.6s ease;
}

/* When a session is active, brighten the lotus and sharpen it */
.mindful-stage[data-phase="inhale"] .mindful-lotus-gif,
.mindful-stage[data-phase="exhale"] .mindful-lotus-gif,
.mindful-stage[data-phase="hold"] .mindful-lotus-gif {
    opacity: 0.6;
    filter: blur(0) saturate(1.4) brightness(1.1);
}

/* Inhale: lotus grows slightly (the glow expands in the GIF) */
.mindful-stage[data-phase="inhale"] .mindful-lotus-gif {
    transform: scale(1.08);
    transition: transform 4s ease-in-out, opacity 0.4s, filter 0.4s;
}

/* Exhale: lotus contracts */
.mindful-stage[data-phase="exhale"] .mindful-lotus-gif {
    transform: scale(0.95);
    transition: transform 4s ease-in-out, opacity 0.4s, filter 0.4s;
}

/* Hold: stable */
.mindful-stage[data-phase="hold"] .mindful-lotus-gif {
    transform: scale(1);
    transition: transform 4s ease-in-out, opacity 0.4s, filter 0.4s;
}

/* ── Breathing visual layers above the lotus ───────────────── */
.mindful-stage .breath-visual {
    position: relative;
    z-index: 1;
}

/* ── Glass overlay on the stage for premium feel ───────────── */
.mindful-stage {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* ── Phase text: glow with the lotus ────────────────────────── */
.mindful-phase {
    text-shadow: 0 0 16px var(--accent-glow), 0 0 32px var(--accent-glow) !important;
}

.mindful-timer {
    text-shadow: 0 0 12px var(--accent-glow) !important;
}

/* ── Mobile: smaller lotus, lighter blur ────────────────────── */
@media (max-width: 768px) {
    .mindful-lotus-gif {
        max-width: 280px;
        opacity: 0.25;
        filter: blur(1px) saturate(1.2);
    }
    .mindful-stage[data-phase="inhale"] .mindful-lotus-gif,
    .mindful-stage[data-phase="exhale"] .mindful-lotus-gif,
    .mindful-stage[data-phase="hold"] .mindful-lotus-gif {
        opacity: 0.5;
        filter: blur(0) saturate(1.3);
    }
}

/* ── Reduced motion: freeze the GIF at a nice frame ─────────── */
@media (prefers-reduced-motion: reduce) {
    .mindful-lotus-gif {
        opacity: 0.4;
        filter: blur(0) saturate(1.2);
        /* Can't pause a GIF without JS, but we can dim it */
    }
    .mindful-stage[data-phase] .mindful-lotus-gif {
        transform: scale(1);
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FITNESS NEXT-GEN — glassmorphism + glow on drill visualizer
   ═══════════════════════════════════════════════════════════════ */

/* ── Fitness cards: glass treatment ──────────────────────────── */
.fitness-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
    transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
}

.fitness-card:hover {
    box-shadow: var(--glow-accent), var(--depth-shadow-hover) !important;
    transform: translateY(-2px);
}

/* ── Drill visualizer: glass stage with HUD framing ─────────── */
.fitness-stage-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
    overflow: hidden;
}

/* ── Stage viewport: dark glass with glow ───────────────────── */
.fitness-stage-viewport {
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border-radius: 10px;
}

/* ── HUD chips: glass + glow ────────────────────────────────── */
.fitness-stage-chip,
.fg-chip,
.drill-chip {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px var(--card-drop) !important;
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.fitness-stage-chip.is-active,
.fg-chip.is-active,
.drill-chip.is-active {
    box-shadow: var(--glow-accent) !important;
    border-color: var(--accent) !important;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* ── Drill buttons: glass + active glow ─────────────────────── */
.drill-btn,
.fitness-drill-btn {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    border: 1px solid var(--glass-border) !important;
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}

.drill-btn:hover,
.fitness-drill-btn:hover {
    box-shadow: 0 4px 12px var(--card-drop), 0 0 8px var(--accent-glow) !important;
    transform: translateY(-1px);
}

.drill-btn.is-active,
.fitness-drill-btn.is-active {
    box-shadow: var(--glow-accent) !important;
    border-color: var(--accent) !important;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* ── Fitness sync strip: glass ──────────────────────────────── */
.fitness-sync-strip {
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

/* ── Animated figure: glow on active ────────────────────────── */
.fitness-stage-fig.is-active svg {
    filter: drop-shadow(0 0 12px var(--accent-glow)) drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}

/* ── Mobile: lighter effects ────────────────────────────────── */
@media (max-width: 768px) {
    .fitness-card,
    .fitness-stage-card {
        backdrop-filter: blur(8px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fitness-card,
    .fitness-stage-card {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COMBAT HUD — PS5-style boxing conditioning overlay
   Uses glass tokens, accent glow, HUD corners. All theme-safe.
   ═══════════════════════════════════════════════════════════════ */

.combat-hud-section {
    max-width: 1000px;
    margin: 40px auto 20px;
    padding: 24px 16px;
    position: relative;
}

.combat-hud-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px;
    color: var(--red); background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.2);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.combat-hud-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); animation: combat-ping 1s ease-in-out infinite;
}
@keyframes combat-ping {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.5); }
}

.combat-hud-title {
    font-size: clamp(24px, 5vw, 40px); font-weight: 900;
    color: var(--text-hi); line-height: 1; margin-bottom: 8px;
    text-shadow: 0 0 24px var(--accent-glow);
}
.combat-hud-subtitle {
    font-size: 13px; color: var(--text-dim); max-width: 480px; line-height: 1.5;
}

.combat-hud-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 900px) { .combat-hud-grid { grid-template-columns: 7fr 5fr; } }

.combat-hud-stage {
    position: relative; border-radius: var(--hud-radius);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow); padding: 16px; overflow: hidden;
}

.hud-corner { position: absolute; width: 16px; height: 16px; z-index: 20; border-color: var(--accent); }
.hud-corner.tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.hud-corner.tr { top: 8px; right: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.hud-corner.bl { bottom: 8px; left: 8px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.hud-corner.br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

.combat-hud-media {
    position: relative; width: 100%; height: 360px;
    border-radius: 12px; overflow: hidden;
    background: var(--surface-0); border: 1px solid var(--w100);
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 600px) { .combat-hud-media { height: 420px; } }

.combat-hud-gif {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.7;
    transition: transform 0.7s ease;
}
.combat-hud-stage:hover .combat-hud-gif { transform: scale(1.02); }

.combat-hud-grid-overlay {
    position: absolute; inset: 0;
    background-image: linear-gradient(to right, var(--w030) 1px, transparent 1px), linear-gradient(to bottom, var(--w030) 1px, transparent 1px);
    background-size: 24px 24px; pointer-events: none;
}

.combat-hud-reticle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 192px; height: 192px; border: 1px solid var(--accent-glow);
    border-radius: 50%; animation: combat-reticle 10s linear infinite;
    pointer-events: none; display: flex; align-items: center; justify-content: center;
}
.combat-hud-reticle-inner { width: 128px; height: 128px; border: 1px dashed rgba(229, 57, 53, 0.4); border-radius: 50%; }
@keyframes combat-reticle { to { transform: translate(-50%, -50%) rotate(360deg); } }

.combat-hud-crosshair {
    position: absolute; top: 33%; right: 33%; width: 32px; height: 32px;
    border: 2px solid var(--accent); border-radius: 4px;
    animation: combat-bounce 0.6s ease-in-out infinite alternate;
    z-index: 10; display: flex; align-items: center; justify-content: center;
}
.combat-hud-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: combat-ping 0.8s ease-in-out infinite; }
@keyframes combat-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

.combat-hud-waveform {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); padding: 10px 14px; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; z-index: 20;
}
.combat-hud-waveform-bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.combat-hud-waveform-bars span {
    width: 3px; background: var(--accent); height: var(--h); border-radius: 2px;
    animation: combat-bar-bounce 0.5s ease-in-out infinite alternate;
}
.combat-hud-waveform-bars span:nth-child(2) { animation-delay: 0.1s; }
.combat-hud-waveform-bars span:nth-child(3) { animation-delay: 0.2s; }
.combat-hud-waveform-bars span:nth-child(4) { animation-delay: 0.3s; }
.combat-hud-waveform-bars span:nth-child(5) { animation-delay: 0.4s; }
.combat-hud-waveform-bars span:nth-child(6) { animation-delay: 0.5s; }
@keyframes combat-bar-bounce { 0% { opacity: 0.5; } 100% { opacity: 1; } }

.combat-hud-waveform-label { font-size: 10px; font-family: monospace; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; }
.combat-hud-waveform-sub { font-size: 9px; font-family: monospace; color: var(--text-dim); }
.combat-hud-bpm {
    font-size: 12px; font-family: monospace; font-weight: 900; color: var(--red);
    background: rgba(229, 57, 53, 0.1); border: 1px solid rgba(229, 57, 53, 0.2);
    padding: 4px 10px; border-radius: 6px;
}

.combat-hud-telemetry { display: flex; flex-direction: column; gap: 12px; }

.combat-hud-tabs {
    display: flex; padding: 4px; border-radius: 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.combat-hud-tab {
    flex: 1; padding: 8px 4px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; border-radius: 8px;
    border: none; background: transparent; color: var(--text-dim);
    cursor: pointer; transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
}
.combat-hud-tab.active { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 12px var(--accent-glow); }
.combat-hud-tab:hover:not(.active) { color: var(--text-hi); }

.combat-hud-panel {
    border-radius: var(--hud-radius); border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--depth-shadow); padding: 20px;
    animation: view-enter 0.3s cubic-bezier(.2, .8, .2, 1) both;
}
.combat-hud-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--w100); padding-bottom: 10px; margin-bottom: 12px;
    font-size: 12px; font-weight: 700; color: var(--text-hi); text-transform: uppercase; letter-spacing: 1px;
}
.combat-hud-status { font-size: 10px; font-family: monospace; font-weight: 700; color: var(--accent); }
.combat-hud-status-red { color: var(--red); }
.combat-hud-status-cyan { color: var(--blue); }
.combat-hud-panel p { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }

.combat-hud-bar-row { display: flex; justify-content: space-between; font-size: 10px; font-family: monospace; color: var(--text-dim); margin-bottom: 6px; }
.combat-hud-bar-val { color: var(--accent); font-weight: 700; }
.combat-hud-bar-val-red { color: var(--red); }
.combat-hud-bar-val-cyan { color: var(--blue); }
.combat-hud-bar { width: 100%; height: 6px; background: var(--w100); border-radius: 3px; overflow: hidden; }
.combat-hud-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; box-shadow: 0 0 8px var(--accent-glow); transition: width 0.5s ease; }
.combat-hud-bar-fill-red { background: var(--red); box-shadow: 0 0 8px rgba(229, 57, 53, 0.4); }
.combat-hud-bar-fill-cyan { background: var(--blue); box-shadow: 0 0 8px rgba(96, 165, 250, 0.4); }

.combat-hud-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-radius: 12px;
    background: var(--surface-0); border: 1px solid var(--w100);
    font-family: monospace; font-size: 10px; color: var(--text-dim);
}
.combat-hud-footer-accent { color: var(--accent); font-weight: 700; }

@media (max-width: 768px) {
    .combat-hud-media { height: 280px; }
    .combat-hud-reticle { width: 120px; height: 120px; }
    .combat-hud-reticle-inner { width: 80px; height: 80px; }
    .combat-hud-stage, .combat-hud-panel {
        backdrop-filter: blur(8px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-hud-reticle, .combat-hud-crosshair, .combat-hud-waveform-bars span,
    .combat-hud-badge::before, .combat-hud-dot { animation: none; }
}

/* ── Movement cards: punch → negotiation technique ──────────── */
.combat-hud-cards { margin-top: 24px; }
.combat-hud-cards-title {
    font-size: 14px; font-weight: 800; color: var(--accent);
    text-transform: uppercase; letter-spacing: 2px; text-align: center;
    margin-bottom: 14px; text-shadow: 0 0 12px var(--accent-glow);
}
.combat-hud-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.combat-move-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--hud-radius); padding: 14px;
    cursor: pointer; transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
    box-shadow: var(--depth-shadow);
    display: flex; flex-direction: column; gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.combat-move-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-accent), var(--depth-shadow-hover);
    border-color: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.combat-move-card:active { transform: translateY(0) scale(0.98); }
.combat-move-card.is-active { box-shadow: var(--glow-accent), var(--depth-shadow); border-color: var(--accent); }
.combat-move-icon { font-size: 20px; margin-bottom: 2px; }
.combat-move-name { font-size: 13px; font-weight: 800; color: var(--text-hi); text-transform: uppercase; letter-spacing: 0.5px; }
.combat-move-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

@media (max-width: 768px) {
    .combat-hud-cards-grid { grid-template-columns: 1fr 1fr; }
    .combat-move-card {
        backdrop-filter: blur(6px) saturate(130%);
        -webkit-backdrop-filter: blur(6px) saturate(130%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .combat-move-card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SALES HUD — money rain + headset salesperson canvas scene
   ═══════════════════════════════════════════════════════════════ */
.sales-hud-section {
    max-width: 640px;
    margin: 0 auto 24px;
    position: relative;
}
.sales-hud-header { text-align: center; margin-bottom: 14px; }
.sales-hud-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px;
    color: #4dd0e1; background: rgba(77, 208, 225, 0.08);
    border: 1px solid rgba(77, 208, 225, 0.25);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 10px;
}
.sales-hud-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #4dd0e1; animation: sales-ping 1.4s ease-in-out infinite;
}
@keyframes sales-ping {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.5); }
}
.sales-hud-title {
    font-size: clamp(18px, 4vw, 26px); font-weight: 900; color: var(--text-hi);
    margin-bottom: 6px;
}
.sales-hud-subtitle {
    font-size: 12px; color: var(--text-dim); max-width: 440px; margin: 0 auto; line-height: 1.5;
}
.sales-hud-stage {
    position: relative; border-radius: var(--hud-radius);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow);
    overflow: hidden;
    height: 220px;
}
@media (min-width: 600px) { .sales-hud-stage { height: 260px; } }
.sales-hud-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sales-hud-ticker {
    position: absolute; left: 12px; bottom: 10px;
    font-family: monospace; font-size: 10px; color: #66bb6a;
    background: rgba(0, 0, 0, 0.35); padding: 4px 10px; border-radius: 12px;
    border: 1px solid rgba(102, 187, 106, 0.3);
    animation: sales-ticker-fade 4s ease-in-out infinite;
}
@keyframes sales-ticker-fade {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}
@media (max-width: 768px) {
    .sales-hud-stage {
        backdrop-filter: blur(8px) saturate(130%);
        -webkit-backdrop-filter: blur(8px) saturate(130%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sales-hud-badge::before, .sales-hud-ticker { animation: none; }
}

/* ── Prospect Notes: glass card, local-first + Supabase sync ─────── */
.sales-notes-wrap { max-width: 520px; margin: 24px auto 0; }
.sales-notes {
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow);
    border-radius: var(--hud-radius);
    padding: 18px;
}
.sales-notes-title { font-size: 15px; font-weight: 800; color: var(--text-hi); }
.sales-notes-sync {
    font-size: 10px; color: var(--text-dim); margin: 2px 0 12px;
    display: flex; align-items: center; gap: 5px;
}
.sales-notes-sync::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--w450); flex-shrink: 0;
}
.sales-notes-sync.synced::before { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sales-notes-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sales-notes-input, .sales-notes-textarea {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 10px 12px;
    color: var(--text-hi); font-family: inherit; font-size: 13px;
    resize: vertical;
}
.sales-notes-input:focus, .sales-notes-textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.sales-notes-btn { align-self: flex-start; }
.sales-notes-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.sales-notes-locked { text-align: center; padding: 22px 16px; }
.sales-notes-locked-icon { font-size: 26px; margin-bottom: 8px; opacity: 0.85; }
.sales-notes-locked p { font-size: 13px; color: var(--w500); line-height: 1.5; margin-bottom: 14px; }
.sales-notes-locked .sales-notes-btn { align-self: center; }
.sales-note-item {
    position: relative;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 10px 32px 10px 12px;
}
.sales-note-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sales-note-item-head strong { font-size: 13px; color: var(--text-hi); }
.sales-note-item-date { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.sales-note-item-text { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; white-space: pre-wrap; }
.sales-note-item-del {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--text-dim);
    font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}
.sales-note-item-del:hover { color: #ff5252; background: rgba(255, 82, 82, 0.1); }

/* ═══════════════════════════════════════════════════════════════
   PERSUASION HUD — influence orb + charge meter + principle cards
   ═══════════════════════════════════════════════════════════════ */
.persuasion-hud-section { max-width: 680px; margin: 32px auto 0; padding: 0 4px; }
.persuasion-hud-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px;
    color: #e91e63; background: rgba(233, 30, 99, 0.08);
    border: 1px solid rgba(233, 30, 99, 0.2);
    padding: 5px 14px; border-radius: 20px; margin-bottom: 10px;
}
.persuasion-hud-title {
    font-size: clamp(20px, 4vw, 28px); font-weight: 900;
    color: var(--text-hi); line-height: 1; margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(233, 30, 99, 0.3);
}
.persuasion-hud-subtitle { font-size: 12px; color: var(--text-dim); line-height: 1.5; max-width: 480px; }
.persuasion-hud-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 700px) { .persuasion-hud-grid { grid-template-columns: 1fr 1fr; } }
.persuasion-hud-stage {
    position: relative; border-radius: var(--hud-radius);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--depth-shadow); padding: 14px; overflow: hidden;
}
.persuasion-hud-media {
    position: relative; width: 100%; height: 300px;
    border-radius: 12px; overflow: hidden;
    background: var(--surface-0); border: 1px solid var(--w100);
    display: flex; align-items: center; justify-content: center;
}
.persuasion-hud-gif {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.7;
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.persuasion-hud-stage.charged .persuasion-hud-gif { opacity: 1; filter: brightness(1.2) saturate(1.3); }
.persuasion-charge-meter {
    position: absolute; bottom: 10px; left: 10px; right: 10px;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); padding: 8px 12px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px; z-index: 20;
}
.persuasion-charge-label { font-size: 9px; font-family: monospace; font-weight: 700; color: #e91e63; text-transform: uppercase; letter-spacing: 1.5px; }
.persuasion-charge-bar { flex: 1; height: 5px; background: var(--w100); border-radius: 3px; overflow: hidden; }
.persuasion-charge-fill { height: 100%; background: linear-gradient(90deg, #e91e63, #f06292); border-radius: 3px; box-shadow: 0 0 8px rgba(233, 30, 99, 0.5); transition: width 0.4s ease; }
.persuasion-charge-val { font-size: 10px; font-family: monospace; font-weight: 700; color: var(--text-hi); }
.persuasion-hud-cards { display: flex; flex-direction: column; gap: 8px; }
.persuasion-cards-title { font-size: 12px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.persuasion-cards-grid { display: flex; flex-direction: column; gap: 6px; }
.persuasion-principle-card {
    background: var(--glass-bg); backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--glass-border); border-radius: 10px;
    padding: 10px 12px; cursor: pointer;
    transition: all 0.25s cubic-bezier(.2, .8, .2, 1);
    display: flex; align-items: center; gap: 10px;
    -webkit-tap-highlight-color: transparent;
}
.persuasion-principle-card:hover {
    transform: translateX(4px); box-shadow: 0 2px 12px var(--card-drop), 0 0 8px var(--accent-glow);
    border-color: var(--accent);
}
.persuasion-principle-card.charged {
    border-color: #e91e63; box-shadow: 0 0 12px rgba(233, 30, 99, 0.3);
}
.persuasion-principle-card .ppc-icon { font-size: 18px; flex-shrink: 0; }
.persuasion-principle-card .ppc-name { font-size: 12px; font-weight: 700; color: var(--text-hi); flex: 1; }
.persuasion-principle-card .ppc-check { font-size: 14px; opacity: 0; transition: opacity 0.2s; }
.persuasion-principle-card.charged .ppc-check { opacity: 1; }
@media (max-width: 768px) {
    .persuasion-hud-media { height: 240px; }
    .persuasion-hud-stage { backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); }
}
@media (prefers-reduced-motion: reduce) { .persuasion-principle-card { transition: none; } }

/* ═══════════════════════════════════════════════════════════════
   TOOL DECK — command table background + enhanced session UI
   The GIF is a PS5-style tactical table that breathes behind the
   entire tool deck. Content floats above on glass panels.
   ═══════════════════════════════════════════════════════════════ */

/* ── Background layer ─────────────────────────────────────────── */
.tool-deck-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.tool-deck-bg-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    filter: saturate(1.2) blur(2px);
    transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Overlay gradient — darkens the GIF so content reads on top */
.tool-deck-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--surface-0) 0%, transparent 30%, transparent 70%, var(--surface-0) 100%);
    opacity: 0.6;
}

/* ── Content layer ────────────────────────────────────────────── */
.tool-deck-content {
    position: relative;
    z-index: 1;
}

/* ── Session active: brighten the background ─────────────────── */
.view-container.active.session-active .tool-deck-bg-gif {
    opacity: 0.25;
    filter: saturate(1.4) blur(1px);
}

/* ── Stats bar: enhanced glass HUD ────────────────────────────── */
.stats-bar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
}

.stats-bar .stat-item {
    text-shadow: 0 0 8px var(--accent-glow) !important;
}

/* ── Start button: PS5-style with glow pulse ─────────────────── */
#startBtn {
    box-shadow: 0 0 20px var(--accent-glow), 0 4px 12px var(--card-drop) !important;
    animation: start-pulse 2s ease-in-out infinite !important;
}

@keyframes start-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--accent-glow), 0 4px 12px var(--card-drop); }
    50% { box-shadow: 0 0 40px var(--accent-glow), 0 4px 16px var(--card-drop), 0 0 80px var(--accent-glow); }
}

#startBtn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 0 50px var(--accent-glow), 0 8px 24px var(--card-drop) !important;
}

/* ── Zen panel: glass cards with depth ────────────────────────── */
.zen-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
    transition: all 0.3s cubic-bezier(.2, .8, .2, 1);
}

.zen-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-accent), var(--depth-shadow-hover) !important;
}

/* ── Cards area: enhanced grid with depth shadows ────────────── */
.cards-area {
    position: relative;
}

/* ── Session active state: add scanning line effect ───────────── */
.view-container.active.session-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.3;
    animation: scan-line 4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes scan-line {
    0% { top: 0; }
    100% { top: 100%; }
}

/* ── Mobile: dimmer background for performance ─────────────────── */
@media (max-width: 768px) {
    .tool-deck-bg-gif {
        opacity: 0.1;
        filter: saturate(1.1) blur(3px);
    }
    .view-container.active.session-active .tool-deck-bg-gif {
        opacity: 0.18;
    }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tool-deck-bg-gif { opacity: 0.12; filter: saturate(1.1); }
    #startBtn { animation: none !important; }
    .view-container.active.session-active::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   POMODORO — time vortex background + glass treatment
   Lighter version: static FLUX image + CSS, no GIF needed.
   The hourglass + timer IS the animation.
   ═══════════════════════════════════════════════════════════════ */

.pomodoro-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.pomodoro-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    filter: saturate(1.3) blur(3px);
    animation: vortex-rotate 20s linear infinite;
}

@keyframes vortex-rotate {
    0% { transform: scale(1.1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(360deg); }
}

.pomodoro-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--surface-0) 90%);
    opacity: 0.7;
}

.pomodoro-content {
    position: relative;
    z-index: 1;
}

/* Glass on the hourglass + title */
.pomodoro-stage {
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.pomodoro-title-block h2 {
    text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow) !important;
}

/* Glass on control card */
.pomodoro-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--depth-shadow) !important;
    border-radius: var(--hud-radius) !important;
}

/* Timer text glow */
.pomodoro-time {
    text-shadow: 0 0 16px var(--accent-glow), 0 0 32px var(--accent-glow) !important;
}

/* Hourglass glow enhancement */
.pomodoro-hourglass-wrap {
    filter: drop-shadow(0 0 20px var(--accent-glow));
}

/* HUD corners on the stage */
.pomodoro-stage {
    position: relative;
    border-radius: var(--hud-radius);
}

/* Mobile: dimmer vortex */
@media (max-width: 768px) {
    .pomodoro-bg-img { opacity: 0.08; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pomodoro-bg-img { animation: none; opacity: 0.1; }
}

/* ── ADHD Fidget Layer: impact rings, ripples, touch tab drag ── */
/* Additive only. All colors via tokens; all motion gated by prefers-reduced-motion. */

/* Combat: punch impact ring on the boxer stage */
.combat-impact-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--accent-glow), inset 0 0 12px var(--accent-glow);
    pointer-events: none;
    z-index: 8;
    animation: combat-impact-expand 0.6s ease-out forwards;
}
@keyframes combat-impact-expand {
    0%   { transform: scale(0.3); opacity: 0.95; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Persuasion: full-charge shockwave when the orb tops out at 7/7 */
.persuasion-full-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 32px var(--accent-glow), inset 0 0 20px var(--accent-glow);
    pointer-events: none;
    z-index: 8;
    animation: persuasion-full-expand 0.85s ease-out forwards;
}
@keyframes persuasion-full-expand {
    0%   { transform: scale(0.4); opacity: 1; }
    60%  { transform: scale(1.6); opacity: 0.5; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Mindfulness: water ripple ring at the touch point on the lotus stage */
.mindful-ripple-ring {
    position: absolute;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 6;
    animation: mindful-ripple-expand 1.35s ease-out forwards;
}
@keyframes mindful-ripple-expand {
    0%   { transform: scale(0.4); opacity: 0.75; }
    100% { transform: scale(7);   opacity: 0; }
}

/* Touch tab drag: lifted tab glows and tilts like a picked-up Tetris piece */
.nav-tab.tab-touch-dragging {
    box-shadow: 0 8px 24px var(--card-drop), 0 0 14px var(--accent-glow);
    transform: scale(1.06) rotate(-1.5deg);
    cursor: grabbing;
    touch-action: none;
    transition: none;
}
.nav-tabs.tab-reorder-active .nav-tab:not(.tab-touch-dragging) {
    transition: transform 0.18s ease;
}
.nav-tab.tab-touch-dragging {
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .combat-impact-ring,
    .persuasion-full-ring,
    .mindful-ripple-ring { animation: none; opacity: 0; }
    .nav-tab.tab-touch-dragging { transform: none; }
}