:root{
    --bg:#070a10; --bg2:#0b1019;
    --surface:rgba(17,23,33,.86); --surface2:#121826;
    --border:rgba(255,255,255,.085); --border2:rgba(255,255,255,.16);
    --text:#e9eff7; --muted:#8597ad; --faint:#5a6b80;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --disp:'Space Grotesk',system-ui,sans-serif;
    /* theme-sensitive surfaces */
    --body-bg:
      radial-gradient(1200px 700px at 60% -10%, #131c2e 0%, transparent 55%),
      radial-gradient(900px 600px at 100% 110%, #0e1726 0%, transparent 50%),
      #070a10;
    --node-grad2:rgba(11,16,25,.82);
    --wire:rgba(255,255,255,.07); --grid:rgba(255,255,255,.025);
    --node-line:rgba(255,255,255,.09);
    --bar-top:linear-gradient(180deg,rgba(13,19,30,.9),rgba(8,12,19,.6));
    --bar-bot:linear-gradient(0deg,rgba(13,19,30,.92),rgba(8,12,19,.5));
    --ex-bg:radial-gradient(circle at 50% 35%,rgba(103,232,249,.16),rgba(11,16,25,.92) 70%);
    --ex-ink:#eafbff; --ex-title:#9fe9f5; --ex-unit:#79c7d8; --ex-line:rgba(103,232,249,.45); --ex-line2:rgba(103,232,249,.18);
    --bid:#c9b8ff; --bid-win:#7df0c0; --info-body:#c4d0de; --slot-ink:#5fa9cf;
    --seg-on-bg:rgba(103,232,249,.14); --seg-on-ink:#bdf3fb;
  }
  body.light{
    --bg:#e9eef5; --bg2:#f1f5fa;
    --surface:rgba(255,255,255,.9); --surface2:#f3f6fb;
    --border:rgba(18,34,58,.12); --border2:rgba(18,34,58,.24);
    --text:#152030; --muted:#566678; --faint:#8493a6;
    --body-bg:
      radial-gradient(1100px 680px at 62% -12%, #dde7f4 0%, transparent 55%),
      radial-gradient(900px 600px at 100% 112%, #e3ecf6 0%, transparent 50%),
      #e9eef5;
    --node-grad2:rgba(248,251,255,.92);
    --wire:rgba(30,52,86,.16); --grid:rgba(30,52,86,.05);
    --node-line:rgba(30,52,86,.12);
    --bar-top:linear-gradient(180deg,rgba(255,255,255,.85),rgba(240,245,251,.55));
    --bar-bot:linear-gradient(0deg,rgba(255,255,255,.9),rgba(240,245,251,.5));
    --ex-bg:radial-gradient(circle at 50% 35%,rgba(12,149,182,.16),rgba(255,255,255,.94) 72%);
    --ex-ink:#0b3340; --ex-title:#0c7d96; --ex-unit:#3f93a8; --ex-line:rgba(12,149,182,.5); --ex-line2:rgba(12,149,182,.22);
    --bid:#6d4fd0; --bid-win:#0f9266; --info-body:#3a4860; --slot-ink:#2f86b0;
    --seg-on-bg:rgba(12,149,182,.14); --seg-on-ink:#0c7d96;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--body-bg);
    font-family:var(--disp); color:var(--text);
    overflow:hidden; -webkit-font-smoothing:antialiased; transition:background .4s ease;
  }
  .viewport{position:fixed; inset:0; overflow:hidden; background:var(--body-bg); transition:background .4s ease;
    display:flex; align-items:center; justify-content:center;}
  .viewport.pan{display:block; overflow:auto; -webkit-overflow-scrolling:touch;}
  .stage-wrap{position:relative; flex:0 0 auto;}
  .viewport.pan .stage-wrap{margin:0 auto;}
  .stage{
    position:absolute; left:0; top:0; transform-origin:top left;
    width:1440px; height:960px;
    display:flex; flex-direction:column;
  }

  /* ── Top bar ── */
  .topbar{
    height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
    padding:0 22px; border-bottom:1px solid var(--border);
    background:var(--bar-top);
  }
  .brand{display:flex; align-items:center; gap:14px}
  .brand-mark{display:flex; gap:3px; align-items:flex-end; height:22px}
  .brand-mark span{width:5px; border-radius:2px; background:linear-gradient(180deg,#67e8f9,#2dd4bf)}
  .brand-mark span:nth-child(1){height:11px; animation:eq 1.1s ease-in-out infinite}
  .brand-mark span:nth-child(2){height:22px; background:linear-gradient(180deg,#a78bfa,#7aa2ff); animation:eq 1.1s .2s ease-in-out infinite}
  .brand-mark span:nth-child(3){height:15px; background:linear-gradient(180deg,#fbbf24,#fb7185); animation:eq 1.1s .4s ease-in-out infinite}
  @keyframes eq{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
  .brand-title{font-weight:700; font-size:17px; letter-spacing:.14em}
  .brand-sub{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.02em; margin-top:1px}

  .controls{display:flex; align-items:center; gap:14px}
  .speed{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
  .speed input{width:84px; accent-color:#67e8f9; cursor:pointer}
  .speed b{color:var(--text); font-weight:600; width:34px}
  .seg{display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; overflow:hidden}
  .seg button{font-family:var(--disp); font-size:12.5px; font-weight:500; color:var(--muted); background:none; border:none; padding:7px 13px; cursor:pointer; transition:.15s}
  .seg button.on{background:var(--seg-on-bg); color:var(--seg-on-ink)}
  .theme-btn{width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; cursor:pointer;
    color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:10px; transition:.15s}
  .theme-btn svg{width:17px; height:17px}
  .theme-btn:hover{color:var(--text); border-color:var(--border2)}
  .theme-btn.active{color:#67e8f9; border-color:rgba(103,232,249,.5); background:rgba(103,232,249,.1)}
  body.light .theme-btn.active{color:#0c95b6; border-color:rgba(12,149,182,.5); background:rgba(12,149,182,.1)}
  .lang-btn{height:36px; min-width:40px; padding:0 11px; flex:0 0 auto; display:grid; place-items:center; cursor:pointer;
    font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em;
    color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:10px; transition:.15s}
  .lang-btn:hover{color:var(--text); border-color:var(--border2)}

  /* Configurator slide-over */
  .cfg-panel{position:fixed; top:0; right:0; height:100%; width:330px; z-index:60;
    background:var(--surface); border-left:1px solid var(--border2);
    backdrop-filter:blur(16px); box-shadow:-20px 0 60px rgba(0,0,0,.45);
    transform:translateX(102%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column}
  .cfg-panel.open{transform:translateX(0)}
  .cfg-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--border)}
  .cfg-title{font-weight:700; font-size:16px; letter-spacing:.06em; text-transform:uppercase; display:flex; flex-direction:column}
  .cfg-title span{font-family:var(--mono); font-size:10px; font-weight:400; color:var(--muted); text-transform:none; letter-spacing:.02em; margin-top:3px}
  .cfg-close{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--muted); font-size:20px; line-height:1; cursor:pointer}
  .cfg-close:hover{color:var(--text); border-color:var(--border2)}
  .cfg-body{flex:1; overflow-y:auto; padding:6px 20px 24px}
  .cfg-section{font-family:var(--mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
    color:var(--faint); margin:20px 0 9px; display:flex; justify-content:space-between; align-items:baseline}
  .cfg-section span{font-weight:400; letter-spacing:.04em; text-transform:none}
  .cfg-row{padding:9px 0}
  .cfg-row.tog{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; border-radius:9px; margin:0 -8px; padding:9px 8px; transition:background .15s}
  .cfg-row.tog:hover{background:var(--surface2)}
  .cfg-row.tog.dis{opacity:.4; cursor:default}
  .cfg-row.tog.dis:hover{background:none}
  .cfg-lab{display:flex; flex-direction:column; gap:2px}
  .cfg-lab span{font-size:13.5px; font-weight:500; color:var(--text)}
  .cfg-lab i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.02em}
  .cfg-lab b{margin-left:auto; font-family:var(--mono); font-size:12px; color:#67e8f9}
  .cfg-row:not(.tog) .cfg-lab{flex-direction:row; align-items:baseline; justify-content:space-between; margin-bottom:9px}
  .cfg-row:not(.tog) .cfg-lab span{white-space:nowrap}
  body.light .cfg-lab b{color:#0c95b6}
  /* switch */
  .cfg-switch{width:40px; height:23px; flex:0 0 40px; border-radius:13px; background:var(--surface2); border:1px solid var(--border2); position:relative; transition:.2s; --sw:#34d399}
  .cfg-switch b{position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--muted); transition:.2s}
  .cfg-switch.on{background:color-mix(in oklab,var(--sw) 30%,transparent); border-color:var(--sw)}
  .cfg-switch.on b{left:19px; background:var(--sw)}
  /* segmented */
  .cfg-seg{display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:3px}
  .cfg-seg button{flex:1; font-family:var(--disp); font-size:12px; font-weight:500; color:var(--muted); background:none; border:none; border-radius:7px; padding:7px 4px; cursor:pointer; transition:.15s; white-space:nowrap}
  .cfg-seg button:hover{color:var(--text)}
  .cfg-seg button.on{background:rgba(103,232,249,.16); color:#bdf3fb}
  body.light .cfg-seg button.on{background:rgba(12,149,182,.14); color:#0c7d96}
  /* range */
  .cfg-range{width:100%; accent-color:#67e8f9; cursor:pointer}
  body.light .cfg-range{accent-color:#0c95b6}
  @media (max-width:760px){
    .cfg-panel{width:86vw; max-width:340px}
  }
  .ctl-btn{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-size:13px; font-weight:600;
    color:var(--text); background:var(--surface2); border:1px solid var(--border2); border-radius:10px; padding:8px 15px; cursor:pointer; transition:.15s}
  .ctl-btn svg{width:15px; height:15px; flex:0 0 15px}
  .ctl-btn span{white-space:nowrap}
  .ctl-btn:hover{border-color:var(--text)}
  .ctl-btn.primary{background:linear-gradient(180deg,#1ec8e6,#0e9fc0); color:#04141a; border-color:transparent; box-shadow:0 4px 18px rgba(30,200,230,.3)}
  .ctl-btn.primary:hover{filter:brightness(1.07)}
  .ctl-btn.disabled{opacity:.5; cursor:default; box-shadow:none}

  /* ── Canvas ── */
  .canvas{position:relative; width:1440px; height:760px; flex:0 0 760px; overflow:hidden}
  .grid-bg{position:absolute; inset:0;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:40px 40px; mask-image:radial-gradient(120% 100% at 50% 40%,#000 55%,transparent 100%)}
  .wires{position:absolute; inset:0; width:1440px; height:760px; pointer-events:none}
  .pipe-base{fill:none; stroke:var(--wire); stroke-width:2}
  .pipe-live{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:2 11;
    transition:opacity .35s ease; animation:flow 1.2s linear infinite}
  .pipe-hit{fill:none; stroke:transparent; stroke-width:20; cursor:help; pointer-events:stroke}
  @keyframes flow{to{stroke-dashoffset:-26}}
  .packets circle{pointer-events:none}

  /* ── Nodes (shared) ── */
  .node{position:absolute; border-radius:15px; cursor:pointer; z-index:2;
    background:linear-gradient(180deg,var(--surface),var(--node-grad2));
    border:1px solid var(--border); backdrop-filter:blur(7px);
    transition:border-color .25s, box-shadow .25s, transform .25s; will-change:transform}
  .node:hover{border-color:var(--border2); transform:translateY(-1px)}
  .node.hot{border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 0 30px var(--cg); animation:hot 1.4s ease-in-out infinite}
  @keyframes hot{0%,100%{box-shadow:0 0 0 1px var(--c),0 0 22px var(--cg)}50%{box-shadow:0 0 0 1px var(--c),0 0 42px var(--cg)}}
  .node.selected{border-color:var(--c); box-shadow:0 0 0 1px var(--c),0 14px 40px rgba(0,0,0,.5)}
  .node-ico{width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center;
    color:var(--c); background:color-mix(in oklab,var(--c) 16%,transparent); border:1px solid color-mix(in oklab,var(--c) 35%,transparent)}
  .node-ico svg{width:21px; height:21px}
  .node-title{font-weight:600; font-size:15px; letter-spacing:.01em; line-height:1.12}
  .node-sub{font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:3px}

  .card-node{display:flex; align-items:center; gap:13px; padding:0 16px}
  .card-node .node-text{min-width:0; flex:1}

  /* Publisher */
  .pub-node{padding:10px; display:flex; flex-direction:column; gap:9px}
  .pub-bar{display:flex; align-items:center; gap:6px; padding:2px 4px}
  .pub-dot{width:7px; height:7px; border-radius:50%; background:#33405266}
  .pub-dot:nth-child(1){background:#fb718599}.pub-dot:nth-child(2){background:#fbbf2499}.pub-dot:nth-child(3){background:#34d39999}
  .pub-url{font-family:var(--mono); font-size:10px; color:var(--faint); margin-left:6px}
  .pub-body{display:flex; gap:12px; flex:1}
  .pub-lines{display:flex; flex-direction:column; gap:7px; justify-content:center; flex:1}
  .pub-lines i{height:7px; border-radius:4px; background:var(--node-line)}
  .pub-lines i.short{width:62%}
  .ad-slot{width:96px; flex:0 0 96px; border-radius:9px; border:1.5px dashed rgba(56,189,248,.45);
    display:grid; place-items:center; background:rgba(56,189,248,.05); transition:.3s}
  .ad-slot.filled{border-style:solid; border-color:var(--w); background:transparent; box-shadow:0 0 22px color-mix(in oklab,var(--w) 50%,transparent)}
  .slot-label{font-family:var(--mono); font-size:10px; color:var(--slot-ink); text-transform:uppercase; letter-spacing:.1em}
  .creative{width:100%; height:100%; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(150deg,color-mix(in oklab,var(--w) 28%,#0b1019),#0b1019); animation:pop .4s ease}
  @keyframes pop{from{transform:scale(.85)}to{transform:scale(1)}}
  .cr-tag{font-family:var(--mono); font-size:8.5px; font-weight:600; color:#04141a; background:var(--w); padding:1px 5px; border-radius:4px; letter-spacing:.1em}
  .cr-label{font-size:12px; font-weight:600; color:var(--w); text-align:center; line-height:1.1; padding:0 4px}

  /* Exchange core */
  .ex-node{border-radius:50%; display:grid; place-items:center; overflow:visible;
    background:var(--ex-bg); border-color:var(--ex-line)}
  .ex-node.hot{box-shadow:0 0 0 1px var(--c),0 0 50px var(--cg)}
  .ex-ring{position:absolute; border-radius:50%; border:1.5px dashed var(--ex-line)}
  .ex-ring.r1{inset:14px}
  .ex-ring.r2{inset:30px; border-style:solid; border-color:var(--ex-line2)}
  .ex-ring.spin.r1{animation:spin 7s linear infinite}
  .ex-ring.spin.r2{animation:spin 4s linear reverse infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ex-core{position:relative; text-align:center; z-index:1}
  .ex-title{font-family:var(--mono); font-size:11px; color:var(--ex-title); text-transform:uppercase; letter-spacing:.14em}
  .ex-clock{font-family:var(--mono); font-weight:600; font-size:38px; line-height:1; color:var(--ex-ink); margin:5px 0 2px; text-shadow:0 0 18px rgba(103,232,249,.55)}
  .ex-clock span{font-size:14px; color:var(--ex-unit); margin-left:2px}
  .ex-sub{font-family:var(--mono); font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.18em}

  /* DSP */
  .dsp-node{display:flex; flex-direction:column; padding:12px 15px; gap:10px; transition:.3s}
  .dsp-node.dimmed{opacity:.4; filter:saturate(.5)}
  .dsp-node.winner{border-color:var(--w,#34d399); box-shadow:0 0 0 1px #34d399,0 0 34px rgba(52,211,153,.4)}
  .dsp-head{display:flex; align-items:center; gap:12px}
  .dsp-foot{display:flex; align-items:center; justify-content:space-between; padding-top:9px; border-top:1px solid var(--border)}
  .dsp-bid-label{font-family:var(--mono); font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
  .dsp-deal{font-family:var(--mono); font-size:9.5px; font-weight:600; color:#fbbf24; letter-spacing:.04em;
    border:1px solid rgba(251,191,36,.4); border-radius:5px; padding:1px 6px; white-space:nowrap}
  body.light .dsp-deal{color:#bd7a06}
  .dsp-bid{font-family:var(--mono); font-weight:600; font-size:19px; color:var(--bid); min-width:62px; text-align:right}
  .dsp-bid.nobid{font-size:13px; color:var(--faint); font-weight:500}
  .dsp-node.winner .dsp-bid{color:var(--bid-win)}
  .uplift{font-family:var(--mono); font-size:9px; font-weight:600; color:#0b3a26; background:#34d399; padding:2px 6px; border-radius:5px; white-space:nowrap; align-self:flex-start; box-shadow:0 2px 8px rgba(52,211,153,.4)}
  body.light .uplift{color:#06251a}
  .win-badge{position:absolute; top:-9px; right:14px; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
    color:#04140d; background:#34d399; padding:2px 8px; border-radius:5px; box-shadow:0 3px 12px rgba(52,211,153,.5)}
  .learn-badge{position:absolute; top:-9px; left:14px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em;
    color:#2a0a10; background:#fb7185; padding:2px 7px; border-radius:5px; box-shadow:0 3px 12px rgba(251,113,133,.45); animation:pxblink 1s ease-in-out infinite}

  /* Latency budget bar */
  .lat-bar{position:absolute; top:12px; left:16px; width:320px; z-index:6;
    background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:9px 13px 11px; backdrop-filter:blur(10px)}
  .lat-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px}
  .lat-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
  .lat-ms{font-family:var(--mono); font-size:14px; font-weight:600; color:#67e8f9}
  .lat-ms i{font-style:normal; font-size:10px; color:var(--faint)}
  .lat-ms.near{color:#fb7185}
  .lat-track{position:relative; height:8px; border-radius:5px; background:var(--surface2); overflow:hidden}
  .lat-seg{position:absolute; top:0; height:100%; opacity:.9; border-right:1px solid var(--bg)}
  .lat-seg:not(.on){background:transparent}
  .lat-head{position:absolute; top:-2px; width:2px; height:12px; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.8); transition:left .2s linear}
  body.light .lat-head{background:#0b3340}

  /* Scrubber dots */
  .narr-dots.seek span{cursor:pointer}
  .narr-dots.seek span:hover{transform:scaleY(2.2); background:var(--muted)}

  /* PRO narration note */
  .narr-pro{display:block; margin-top:7px; font-family:var(--mono); font-size:11px; line-height:1.45; color:var(--faint)}
  .narr-pro b{color:#a78bfa; font-weight:700; margin-right:5px; letter-spacing:.06em}
  body.light .narr-pro b{color:#7c5cdb}

  /* Info panel */
  .info-panel{position:fixed; top:78px; right:22px; width:288px; z-index:50;
    background:var(--surface); border:1px solid var(--c); border-radius:14px; padding:16px 17px 18px;
    backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 28px var(--cg); animation:slidein .25s ease}
  @keyframes slidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
  .info-close{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer}
  .info-close:hover{color:var(--text)}
  .info-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
  .info-ico{width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:grid; place-items:center; color:var(--c);
    background:color-mix(in oklab,var(--c) 16%,transparent); border:1px solid color-mix(in oklab,var(--c) 35%,transparent)}
  .info-ico svg{width:23px; height:23px}
  .info-title{font-weight:600; font-size:17px}
  .info-sub{font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}
  .info-body{font-size:13.5px; line-height:1.55; color:var(--info-body); text-wrap:pretty}
  .info-dive{margin-top:13px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--disp); font-size:13px; font-weight:600; cursor:pointer;
    color:var(--c); background:color-mix(in oklab,var(--c) 12%,transparent); border:1px solid color-mix(in oklab,var(--c) 40%,transparent);
    border-radius:10px; padding:9px 14px; transition:.15s}
  .info-dive:hover{background:color-mix(in oklab,var(--c) 22%,transparent)}
  .info-dive span{transition:transform .15s}
  .info-dive:hover span{transform:translateX(3px)}
  .info-dive.fraud{margin-top:8px; color:#fb7185; background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.4)}
  .info-dive.fraud:hover{background:rgba(251,113,133,.2)}

  /* Deep-dive overlay */
  .dive-overlay{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
    background:rgba(4,7,12,.72); backdrop-filter:blur(6px); animation:sigin .18s ease; padding:24px}
  body.light .dive-overlay{background:rgba(220,228,238,.7)}
  .dive-modal{position:relative; width:min(1300px,96vw); max-height:92vh; overflow:auto;
    background:var(--surface); border:1px solid var(--border2); border-radius:20px; padding:22px 26px 18px;
    display:flex; flex-direction:column;
    box-shadow:0 40px 100px rgba(0,0,0,.6); animation:appop .25s ease}
  .dive-close{position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:9px;
    background:var(--surface2); border:1px solid var(--border); color:var(--muted); font-size:22px; line-height:1; cursor:pointer}
  .dive-close:hover{color:var(--text); border-color:var(--border2)}
  .dive-head{margin-bottom:12px; flex:0 0 auto}
  .dive-headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
  .dive-title{font-size:22px; font-weight:700; letter-spacing:.01em; color:var(--text)}
  .dive-sub{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--c); margin-top:4px}
  .dive-run{display:flex; align-items:center; gap:12px; flex:0 0 auto}
  .dive-play{display:flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--disp); font-size:13px; font-weight:600;
    color:#04141a; background:linear-gradient(180deg,color-mix(in oklab,var(--c) 92%,#fff),var(--c)); border:none; border-radius:10px; padding:9px 15px; white-space:nowrap}
  .dive-play svg{width:15px; height:15px}
  .dive-play:hover{filter:brightness(1.07)}
  .dive-clock{font-family:var(--mono); font-size:20px; font-weight:600; color:var(--c); min-width:54px; text-align:right}
  .dive-clock i{font-style:normal; font-size:11px; color:var(--faint)}
  .dive-clock.near{color:#fb7185}
  .dive-scen{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px}
  .dive-scen-l{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-right:2px}
  .dive-chip{font-family:var(--disp); font-size:11.5px; font-weight:500; color:var(--muted); cursor:pointer;
    background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:5px 10px; transition:.13s}
  .dive-chip:hover{border-color:var(--border2)}
  .dive-chip.on{background:color-mix(in oklab,var(--c) 16%,transparent); color:var(--c); border-color:color-mix(in oklab,var(--c) 45%,transparent)}
  .dive-chip.warn.on{background:rgba(251,113,133,.16); color:#fb7185; border-color:rgba(251,113,133,.5)}

  /* body: schematic + side panel */
  .dive-body{flex:1 1 auto; display:flex; gap:16px; min-height:0}
  /* desktop-neutral: the wrapper simply passes the flex sizing through to .dive-schem */
  .dive-schem-wrap{flex:1 1 auto; min-width:0; display:flex}
  .dive-schem{position:relative; flex:1 1 auto; height:min(52vh, 44vw, 480px)}
  .dive-links{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .dive-links .dl{fill:none; stroke:var(--border2); stroke-width:1.6; opacity:.45; stroke-dasharray:3 7; animation:flow 1.4s linear infinite}
  .dive-links .dl.on{stroke:var(--c); opacity:1; stroke-width:2.4}
  .dive-links .dl.flow{stroke:var(--c); opacity:.95; stroke-width:2.6; stroke-dasharray:none}
  .dl-dot{fill:var(--c); opacity:0}
  .dl-dot.on{opacity:1; filter:drop-shadow(0 0 4px var(--c))}
  .dmod{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    box-sizing:border-box; padding:5px 7px; border-radius:11px; cursor:pointer; text-align:center;
    background:var(--surface2); border:1px solid var(--border); transition:border-color .15s, box-shadow .15s, opacity .15s, transform .15s}
  .dmod-t{font-size:12px; font-weight:600; color:var(--text); line-height:1.1; letter-spacing:.01em}
  .dmod-metric{font-family:var(--mono); font-size:9px; color:var(--c); opacity:.95; line-height:1}
  .dmod-ext{position:absolute; top:3px; right:5px; font-size:10px; color:var(--faint); font-weight:700}
  .dmod.side{background:transparent; border-style:dashed}
  .dmod.side .dmod-t{color:var(--muted); font-weight:500}
  .dmod.side .dmod-metric{color:var(--faint)}
  .dmod.io{background:color-mix(in oklab,var(--c) 16%,transparent); border-color:color-mix(in oklab,var(--c) 45%,transparent); border-radius:999px}
  .dmod.io .dmod-t{color:var(--c)}
  .dmod.brain{background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--c) 26%,transparent),var(--surface2) 75%);
    border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 0 26px color-mix(in oklab,var(--c) 40%,transparent)}
  .dmod.brain .dmod-t{font-size:13px}
  .dmod-tag{font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.14em; color:#04141a;
    background:var(--c); border-radius:4px; padding:1px 6px}
  .dmod.hov{border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 8px 24px rgba(0,0,0,.4); transform:translateY(-1px); z-index:3}
  .dmod.onpath{border-color:color-mix(in oklab,var(--c) 60%,transparent)}
  .dmod.cur{border-color:var(--c); box-shadow:0 0 0 2px var(--c), 0 0 26px color-mix(in oklab,var(--c) 55%,transparent); z-index:4; animation:dmodpulse 1s ease-in-out infinite}
  @keyframes dmodpulse{0%,100%{box-shadow:0 0 0 2px var(--c),0 0 18px color-mix(in oklab,var(--c) 40%,transparent)}50%{box-shadow:0 0 0 2px var(--c),0 0 34px color-mix(in oklab,var(--c) 70%,transparent)}}
  .dmod.drop{border-color:#fb7185; box-shadow:0 0 0 2px #fb7185, 0 0 28px rgba(251,113,133,.5); z-index:4}
  .dmod.drop .dmod-t{color:#fb7185}
  .dmod.dim{opacity:.42}

  /* side panel */
  .dive-side{flex:0 0 304px; display:flex; flex-direction:column; gap:12px; min-height:0}
  .dive-card{position:relative; flex:1 1 auto; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:15px 16px; overflow:auto}
  .dive-card.drop{border-color:rgba(251,113,133,.45); background:color-mix(in oklab,#fb7185 8%,var(--surface2))}
  .dive-card-tag{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:7px}
  .dive-card.drop .dive-card-tag{color:#fb7185}
  .dive-card-t{font-size:16px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.15}
  .dive-card-h{font-size:12.5px; line-height:1.55; color:var(--info-body); text-wrap:pretty}
  .dive-card-ext{margin-top:11px; font-family:var(--mono); font-size:10.5px; color:var(--c); background:color-mix(in oklab,var(--c) 12%,transparent);
    border:1px solid color-mix(in oklab,var(--c) 30%,transparent); border-radius:7px; padding:5px 9px; display:inline-block}
  .dive-card-where{margin-top:11px; font-size:11.5px; color:var(--muted)}
  .dive-card-where b{color:#fb7185; font-weight:600}
  .dive-card-json{margin-top:11px; font-family:var(--mono); font-size:10px; line-height:1.5; color:#9fb2c8; white-space:pre-wrap; word-break:break-word;
    background:rgba(0,0,0,.28); border-radius:8px; padding:9px 10px}
  body.light .dive-card-json{color:#46566b; background:rgba(18,34,58,.05)}
  .dive-card-hint{margin-top:11px; font-size:11px; line-height:1.45; color:var(--faint); text-wrap:pretty}
  .dive-card-x{position:absolute; top:9px; right:10px; width:20px; height:20px; border-radius:6px; background:var(--surface); border:1px solid var(--border);
    color:var(--muted); font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0}
  .dive-card-x:hover{color:var(--text)}
  .dive-dc{display:flex; align-items:flex-start; gap:9px; flex:0 0 auto; padding:11px 13px; border-radius:12px;
    background:color-mix(in oklab,var(--c) 8%,transparent); border:1px solid color-mix(in oklab,var(--c) 26%,transparent);
    font-size:11.5px; line-height:1.5; color:var(--info-body); text-wrap:pretty}
  .dive-dc-ico{color:var(--c); font-size:14px; line-height:1.2; flex:0 0 auto}
  @media (max-width:860px){
    .dive-modal{padding:18px 12px}
    .dive-body{flex-direction:column}
    .dive-side{flex:0 0 auto}
    .dive-schem{height:min(40vh, 76vw, 360px)}
    .dive-headrow{flex-direction:column; gap:12px}
  }

  /* Verifier node */
  .verifier-node{display:flex; flex-direction:column; padding:11px 14px; gap:9px}
  .verifier-node.blocked{border-color:#fb7185; box-shadow:0 0 0 1px #fb7185,0 0 34px rgba(251,113,133,.45)}
  .vf-head{display:flex; align-items:center; gap:11px}
  .vf-checks{display:flex; gap:8px; padding-top:8px; border-top:1px solid var(--border)}
  .vf-check{flex:1; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--muted)}
  .vf-check i{font-style:normal}
  .vf-dot{width:11px; height:11px; flex:0 0 11px; border-radius:50%; border:1.5px solid var(--border2); background:transparent}
  .vf-dot.pulse{border-color:var(--c); background:color-mix(in oklab,var(--c) 40%,transparent); animation:vfpulse .8s ease-in-out infinite}
  @keyframes vfpulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}
  .vf-mark{width:14px; height:14px; flex:0 0 14px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; color:#06251a}
  .vf-mark.ok{background:#34d399}
  .vf-mark.bad{background:#fb7185; color:#2a0a10}

  /* Publisher format slot */
  .pub-fmt{margin-left:auto; font-family:var(--mono); font-size:9px; font-weight:600; color:var(--slot-ink);
    border:1px solid rgba(56,189,248,.4); border-radius:5px; padding:1px 6px; letter-spacing:.04em}
  body.light .pub-fmt{color:#0a86c9}
  .ad-slot.fmt-video{border-radius:9px}
  .ad-slot.fmt-native{border-style:solid; border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.04)}
  .cr-play{width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--w);
    filter:drop-shadow(0 0 6px var(--w))}
  .cr-pixel{position:absolute; top:5px; right:6px; font-family:var(--mono); font-size:8px; font-weight:600;
    background:#fb7185; color:#2a0a10; padding:1px 4px; border-radius:4px; animation:pxblink 1s ease-in-out infinite}
  @keyframes pxblink{0%,100%{opacity:.45}50%{opacity:1}}
  .creative{position:relative}

  /* Block banner */
  .block-banner{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:8; width:520px; max-width:78%;
    display:flex; gap:16px; align-items:center; padding:20px 24px; border-radius:16px;
    background:linear-gradient(180deg,rgba(40,12,18,.96),rgba(26,8,12,.96)); border:1px solid #fb7185;
    box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 50px rgba(251,113,133,.35); animation:bbpop .35s ease}
  body.light .block-banner{background:linear-gradient(180deg,#fff,#fff1f3); color:#3a1218}
  @keyframes bbpop{from{transform:translate(-50%,-46%) scale(.96)}to{transform:translate(-50%,-50%) scale(1)}}
  .bb-icon{font-size:38px; line-height:1; flex:0 0 auto}
  .bb-title{font-weight:700; font-size:18px; color:#ffd9df; margin-bottom:5px}
  body.light .bb-title{color:#b21f3a}
  .bb-desc{font-size:13px; line-height:1.5; color:#e9b7bf}
  body.light .bb-desc{color:#7a3340}

  /* Auction result panel (center, over the exchange) */
  .auction-panel{position:absolute; left:728px; top:300px; transform:translate(-50%,-50%); width:336px; z-index:7;
    background:var(--surface); border:1px solid var(--border2); border-radius:15px; padding:15px 16px;
    backdrop-filter:blur(16px); box-shadow:0 22px 60px rgba(0,0,0,.55); animation:appop .3s ease}
  @keyframes appop{from{transform:translate(-50%,-50%) scale(.95)}to{transform:translate(-50%,-50%) scale(1)}}
  .ap-title{font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text);
    display:flex; align-items:center; gap:8px; margin-bottom:12px}
  .ap-title span{font-weight:600; color:#67e8f9; background:rgba(103,232,249,.14); border-radius:5px; padding:2px 7px; letter-spacing:.04em; white-space:nowrap}
  .ap-deal{font-size:11.5px; line-height:1.45; color:var(--muted); background:var(--surface2); border:1px solid var(--border);
    border-radius:9px; padding:9px 10px; margin-bottom:11px; text-wrap:pretty}
  .ap-deal b{color:var(--text); font-weight:600}
  .ap-deal.hit{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.08)}
  .ap-deal.wf{border-color:rgba(103,232,249,.4); background:rgba(103,232,249,.07)}
  .ap-row.deal .ap-name{color:#fbbf24}
  body.light .ap-row.deal .ap-name{color:#bd7a06}
  .ap-row.deal.inv .ap-name{color:var(--faint)}
  body.light .ap-title span{color:#0c7d96; background:rgba(12,149,182,.13)}
  .ap-bars{display:flex; flex-direction:column; gap:7px; margin-bottom:13px}
  .ap-row{display:flex; align-items:center; gap:9px; position:relative}
  .ap-name{font-size:11.5px; color:var(--muted); width:88px; flex:0 0 88px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ap-row.win .ap-name{color:var(--text); font-weight:600}
  .ap-row.inv{opacity:.45}
  .ap-track{flex:1; height:8px; border-radius:4px; background:var(--surface2); overflow:hidden}
  .ap-track i{display:block; height:100%; border-radius:4px; background:#a78bfa; transition:width .5s ease}
  .ap-val{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--text); width:54px; flex:0 0 54px; text-align:right}
  .ap-row.inv .ap-val{font-size:10px; color:var(--faint); font-weight:500}
  .ap-tag{position:absolute; right:-2px; top:-13px; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.1em;
    color:#06251a; background:#34d399; border-radius:4px; padding:1px 5px}
  .ap-rule{border-top:1px solid var(--border); padding-top:11px}
  .ap-formula{font-family:var(--mono); font-size:14px; color:var(--text); margin-bottom:7px; letter-spacing:.01em}
  .ap-formula span{color:var(--faint)}
  .ap-formula b{font-weight:600}
  .ap-note{font-size:11.5px; line-height:1.5; color:var(--muted); text-wrap:pretty}
  .ap-note b{color:var(--text); font-weight:600}

  /* Money-flow panel */
  .money-panel{position:absolute; left:16px; bottom:48px; width:264px; z-index:5; opacity:1;
    background:var(--surface); border:1px solid var(--border2); border-radius:14px; padding:13px 15px;
    backdrop-filter:blur(12px); box-shadow:0 16px 44px rgba(0,0,0,.45); animation:slideup .3s ease}
  @keyframes slideup{from{transform:translateY(10px)}to{transform:translateY(0)}}
  .mf-title{font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:11px}
  .mf-title span{color:var(--faint); font-weight:400; letter-spacing:.04em}
  .mf-row{margin-bottom:9px}
  .mf-row:last-child{margin-bottom:0}
  .mf-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px}
  .mf-label{font-size:12px; color:var(--muted); white-space:nowrap}
  .mf-val{font-family:var(--mono); font-weight:600; font-size:13.5px; color:var(--text)}
  .mf-bar{height:5px; border-radius:3px; background:var(--surface2); overflow:hidden}
  .mf-bar i{display:block; height:100%; border-radius:3px}
  .mf-sub{font-family:var(--mono); font-size:9px; color:var(--faint); margin-top:3px; letter-spacing:.03em}
  .mf-row.pay .mf-bar i{background:linear-gradient(90deg,#a78bfa,#7aa2ff)}
  .mf-row.pay .mf-val{color:#c9b8ff}
  body.light .mf-row.pay .mf-val{color:#6d4fd0}
  .mf-row.fee .mf-bar i{background:#fb7185}
  .mf-row.fee .mf-val{color:#fb7185}
  .mf-row.net .mf-bar i{background:linear-gradient(90deg,#34d399,#22d3ee)}
  .mf-row.net .mf-label{color:var(--text); font-weight:500}
  .mf-row.net .mf-val{color:#34d399; font-size:16px}
  body.light .mf-row.net .mf-val{color:#0f9266}

  /* Glossary term tooltips */
  .term{position:relative; border-bottom:1px dashed color-mix(in oklab,var(--text) 45%,transparent); cursor:help; outline:none}
  .term-pop{position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
    width:240px; padding:10px 12px; border-radius:10px; background:#0c1320; color:#dbe6f2;
    border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 36px rgba(0,0,0,.5);
    font-family:var(--disp); font-size:11.5px; line-height:1.45; letter-spacing:0; text-transform:none; font-weight:400;
    opacity:0; visibility:hidden; transition:.18s; pointer-events:none; z-index:30}
  .term-pop::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#0c1320}
  body.light .term-pop{background:#fff; color:#28323f; border-color:rgba(18,34,58,.16)}
  body.light .term-pop::after{border-top-color:#fff}
  .term:hover .term-pop, .term:focus .term-pop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

  /* Signal tooltip (pipe hover) */
  .sig-tip{position:fixed; z-index:80; width:266px; pointer-events:none;
    background:#0c1320; border:1px solid rgba(255,255,255,.14); border-radius:11px; padding:11px 12px;
    box-shadow:0 18px 44px rgba(0,0,0,.55); animation:sigin .12s ease}
  body.light .sig-tip{background:#fff; border-color:rgba(18,34,58,.16)}
  @keyframes sigin{from{opacity:0}to{opacity:1}}
  .sig-head{display:flex; flex-direction:column; gap:2px; margin-bottom:9px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1)}
  body.light .sig-head{border-color:rgba(18,34,58,.1)}
  .sig-title{font-weight:600; font-size:13px; color:#eaf2fb}
  body.light .sig-title{color:#19222f}
  .sig-dir{font-family:var(--mono); font-size:9.5px; color:#67e8f9; letter-spacing:.02em}
  body.light .sig-dir{color:#0c7d96}
  .sig-fields{display:flex; flex-direction:column; gap:4px}
  .sig-f{display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:10.5px}
  .sig-k{color:#7e90a6; white-space:nowrap}
  .sig-v{color:#d6e2f0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  body.light .sig-v{color:#2a3848}
  .sig-back{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.12)}
  body.light .sig-back{border-color:rgba(18,34,58,.14)}
  .sig-bdir{font-family:var(--mono); font-size:9.5px; color:#a78bfa; margin-bottom:4px; letter-spacing:.02em}
  body.light .sig-bdir{color:#7c5cdb}
  .sig-json{margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.12)}
  body.light .sig-json{border-color:rgba(18,34,58,.14)}
  .sig-jl{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em; color:#67e8f9; margin-bottom:4px}
  body.light .sig-jl{color:#0c7d96}
  .sig-json pre{font-family:var(--mono); font-size:9px; line-height:1.4; color:#9fb2c8; margin:0; white-space:pre; overflow-x:auto;
    background:rgba(0,0,0,.25); border-radius:7px; padding:8px 9px}
  body.light .sig-json pre{color:#46566b; background:rgba(18,34,58,.05)}

  /* Bottom bar */
  .bottombar{flex:0 0 136px; display:flex; align-items:stretch; gap:20px; padding:14px 22px 16px; border-top:1px solid var(--border);
    background:var(--bar-bot)}
  .narr{flex:1; min-width:0; max-width:720px}
  .narr-dots{display:flex; gap:5px; margin-bottom:9px}
  .narr-dots span{width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.12); transition:.3s}
  body.light .narr-dots span{background:rgba(30,52,86,.14)}
  .narr-dots span.done{background:rgba(103,232,249,.4)}
  .narr-dots span.on{background:#67e8f9; box-shadow:0 0 10px rgba(103,232,249,.7)}
  .narr-dots span.blk{background:#fb7185; box-shadow:0 0 10px rgba(251,113,133,.7)}
  .narr-title.blk{color:#fb7185}
  body.light .narr-dots span.done{background:rgba(12,149,182,.4)}
  body.light .narr-dots span.on{background:#0c95b6; box-shadow:0 0 10px rgba(12,149,182,.5)}
  .narr-head{display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:6px}
  .narr-title{font-weight:600; font-size:16px; letter-spacing:.01em}
  .narr-meta{display:flex; gap:6px; flex-wrap:wrap}
  .chip{font-family:var(--mono); font-size:9.5px; font-weight:500; color:var(--muted); background:var(--surface2);
    border:1px solid var(--border); border-radius:6px; padding:3px 7px; letter-spacing:.02em; white-space:nowrap}
  .chip.on{color:#7df0c0; border-color:rgba(52,211,153,.35)}
  .chip.off{color:#fb7185; border-color:rgba(251,113,133,.32)}
  .chip.deal{color:#fbbf24; border-color:rgba(251,191,36,.4)}
  body.light .chip.deal{color:#bd7a06}
  body.light .chip.on{color:#0f9266}
  body.light .chip.off{color:#dc3f63}
  .narr-desc{font-size:12.5px; line-height:1.5; color:var(--muted); text-wrap:pretty}
  .stats{display:flex; gap:10px; align-items:stretch}
  .stat{min-width:96px; padding:8px 13px; border-radius:11px; background:var(--surface2); border:1px solid var(--border); display:flex; flex-direction:column; justify-content:center}
  .stat.big{min-width:138px; border-color:rgba(52,211,153,.3)}
  .stat-label{font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap}
  .stat-value{font-family:var(--mono); font-weight:600; font-size:19px; margin-top:4px; white-space:nowrap}
  .stat.big .stat-value{font-size:16px}

  /* Config tools */
  .cfg-actions{display:flex; flex-direction:column; gap:8px}
  .cfg-act{display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; font-family:var(--disp); font-size:13px; font-weight:500;
    color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 13px; transition:.15s}
  .cfg-act svg{width:17px; height:17px; color:#67e8f9}
  body.light .cfg-act svg{color:#0c95b6}
  .cfg-act:hover{border-color:var(--border2)}

  /* Tour */
  .tour-overlay{position:fixed; inset:0; z-index:95; background:rgba(4,7,12,.66); animation:sigin .2s ease}
  body.light .tour-overlay{background:rgba(220,228,238,.62)}
  .tour-ring{position:fixed; border-radius:16px; border:2px solid #67e8f9; box-shadow:0 0 0 9999px rgba(4,7,12,.62), 0 0 28px rgba(103,232,249,.5);
    transition:left .35s cubic-bezier(.4,0,.2,1), top .35s, width .35s, height .35s; pointer-events:none}
  body.light .tour-ring{border-color:#0c95b6; box-shadow:0 0 0 9999px rgba(220,228,238,.55), 0 0 28px rgba(12,149,182,.4)}
  .tour-card{position:fixed; width:320px; z-index:96; background:var(--surface); border:1px solid var(--border2); border-radius:14px;
    padding:16px 17px; box-shadow:0 24px 60px rgba(0,0,0,.5); backdrop-filter:blur(12px); transition:left .35s, top .35s}
  .tour-step{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#67e8f9; margin-bottom:7px}
  body.light .tour-step{color:#0c7d96}
  .tour-title{font-size:17px; font-weight:700; color:var(--text); margin-bottom:7px}
  .tour-desc{font-size:13px; line-height:1.5; color:var(--muted); text-wrap:pretty; margin-bottom:14px}
  .tour-btns{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .tour-nav{display:flex; gap:8px}
  .tour-skip{background:none; border:none; color:var(--faint); font-family:var(--disp); font-size:12px; cursor:pointer}
  .tour-skip:hover{color:var(--muted)}
  .tour-back{background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:var(--disp); font-size:12.5px; font-weight:500; border-radius:8px; padding:7px 13px; cursor:pointer}
  .tour-next{background:linear-gradient(180deg,#1ec8e6,#0e9fc0); border:none; color:#04141a; font-family:var(--disp); font-size:12.5px; font-weight:600; border-radius:8px; padding:7px 15px; cursor:pointer}
  .tour-next:hover{filter:brightness(1.07)}

  /* Compare */
  .compare-overlay{position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center;
    background:rgba(4,7,12,.72); backdrop-filter:blur(6px); animation:sigin .18s ease; padding:24px}
  body.light .compare-overlay{background:rgba(220,228,238,.7)}
  .compare-modal{position:relative; width:min(560px,96vw); max-height:92vh; overflow:auto;
    background:var(--surface); border:1px solid var(--border2); border-radius:18px; padding:26px 26px 22px;
    box-shadow:0 40px 100px rgba(0,0,0,.6); animation:appop .25s ease}
  .cmp-title{font-size:21px; font-weight:700; color:var(--text)}
  .cmp-sub{font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:6px; max-width:440px}
  .cmp-axis{display:flex; gap:6px; margin:18px 0 16px; flex-wrap:wrap}
  .cmp-axis button{font-family:var(--disp); font-size:12.5px; font-weight:500; color:var(--muted); background:var(--surface2);
    border:1px solid var(--border); border-radius:9px; padding:8px 13px; cursor:pointer; transition:.15s}
  .cmp-axis button.on{background:rgba(103,232,249,.14); color:#bdf3fb; border-color:rgba(103,232,249,.4)}
  body.light .cmp-axis button.on{background:rgba(12,149,182,.13); color:#0c7d96; border-color:rgba(12,149,182,.4)}
  .cmp-cols{display:flex; gap:12px; margin-bottom:14px}
  .cmp-col{flex:1; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text)}
  .cmp-dot{width:11px; height:11px; border-radius:50%; flex:0 0 11px}
  .cmp-dot.a, .cmp-fill.a{background:#67e8f9}
  .cmp-dot.b, .cmp-fill.b{background:#a78bfa}
  .cmp-metric{margin-bottom:13px}
  .cmp-mlabel{font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; gap:7px; align-items:baseline}
  .cmp-mlabel i{font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--faint)}
  .cmp-bars{display:flex; flex-direction:column; gap:6px}
  .cmp-bar{position:relative; height:22px; background:var(--surface2); border-radius:6px; overflow:hidden; display:flex; align-items:center}
  .cmp-fill{height:100%; border-radius:6px; transition:width .4s ease; min-width:2px}
  .cmp-bar span{position:absolute; right:9px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--text)}
  .cmp-foot{display:flex; gap:12px; margin:6px 0 14px}
  .cmp-foot div{flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:9px 12px}
  .cmp-foot span{display:block; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:3px}
  .cmp-foot b{font-size:14px; font-weight:600}
  .cmp-foot b.a{color:#67e8f9} .cmp-foot b.b{color:#a78bfa}
  body.light .cmp-foot b.a{color:#0c7d96}
  .cmp-note{font-size:12px; line-height:1.5; color:var(--muted); background:color-mix(in oklab,#67e8f9 7%,transparent);
    border:1px solid color-mix(in oklab,#67e8f9 22%,transparent); border-radius:10px; padding:11px 13px; text-wrap:pretty}
  /* Session */
  .sess-rows{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
  .sess-row{display:grid; grid-template-columns:28px 1fr 64px 1.5fr; gap:10px; align-items:center; padding:8px 11px;
    background:var(--surface2); border:1px solid var(--border); border-radius:9px; font-size:12.5px}
  .sess-row.sess-h{background:transparent; border:none; padding:0 11px 2px; font-family:var(--mono); font-size:9px;
    text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
  .sess-n{font-family:var(--mono); color:var(--muted)}
  .sess-w{font-weight:600; color:var(--text)}
  .sess-p{font-family:var(--mono); font-weight:600; color:#34d399}
  body.light .sess-p{color:#0f9266}
  .sess-note{font-family:var(--mono); font-size:10px; color:var(--faint)}
  .sess-sum{display:flex; gap:10px; margin-bottom:14px}
  .sess-card{flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:11px 12px}
  .sess-cl{font-weight:600; font-size:13px; color:var(--text); margin-bottom:8px}
  .sess-cm{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:3px}
  .sess-cm b{font-family:var(--mono); color:var(--text); font-weight:600}

  /* Panel close buttons */
  .panel-close{position:absolute; top:8px; right:9px; width:22px; height:22px; border-radius:6px; z-index:2;
    background:var(--surface2); border:1px solid var(--border); color:var(--muted); font-size:16px; line-height:1; cursor:pointer;
    display:grid; place-items:center; padding:0}
  .panel-close:hover{color:var(--text); border-color:var(--border2)}
  .auction-panel, .money-panel{position:relative}

  /* Scenario presets */
  /* complexity modes: the starting point, so a notch louder than the situational presets below,
     with an explicit "you are here" state that drops the moment any single switch is touched */
  .mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .mode-btn{display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; padding:11px 12px;
    background:var(--surface2); border:1px solid var(--border2); border-radius:11px; transition:.14s;
    -webkit-tap-highlight-color:transparent}
  .mode-btn:hover{border-color:#67e8f9; transform:translateY(-1px)}
  .mode-btn.on{background:color-mix(in oklab,#67e8f9 14%,transparent); border-color:rgba(103,232,249,.55)}
  body.light .mode-btn.on{background:color-mix(in oklab,#0c95b6 12%,transparent); border-color:rgba(12,149,182,.5)}
  .mode-t{font-family:var(--disp); font-size:13px; font-weight:700; color:var(--text); line-height:1.15}
  .mode-btn.on .mode-t{color:#67e8f9}
  body.light .mode-btn.on .mode-t{color:#0c7d96}
  .mode-d{font-size:10.5px; line-height:1.35; color:var(--muted)}
  .preset-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .preset-btn{display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; padding:10px 11px;
    background:var(--surface2); border:1px solid var(--border); border-radius:11px; transition:.15s}
  .preset-btn:hover{border-color:#67e8f9; transform:translateY(-1px)}
  body.light .preset-btn:hover{border-color:#0c95b6}
  .preset-t{font-family:var(--disp); font-size:12.5px; font-weight:600; color:var(--text); line-height:1.15}
  .preset-d{font-size:10.5px; line-height:1.35; color:var(--muted)}

  /* Glossary */
  .gloss-modal{position:relative; width:min(720px,96vw); max-height:90vh; overflow:auto;
    background:var(--surface); border:1px solid var(--border2); border-radius:18px; padding:24px 26px 22px;
    box-shadow:0 40px 100px rgba(0,0,0,.6); animation:appop .25s ease}
  .gloss-search{width:100%; margin:16px 0 18px; padding:10px 13px; border-radius:10px; font-family:var(--disp); font-size:13px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text); outline:none}
  .gloss-search:focus{border-color:#67e8f9}
  body.light .gloss-search:focus{border-color:#0c95b6}
  .gloss-groups{display:flex; flex-direction:column; gap:18px}
  .gloss-gt{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#67e8f9; margin-bottom:9px}
  body.light .gloss-gt{color:#0c7d96}
  .gloss-list{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  .gloss-item{background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
  .gloss-term{font-weight:600; font-size:13px; color:var(--text); margin-bottom:3px}
  .gloss-def{font-size:11.5px; line-height:1.45; color:var(--muted); text-wrap:pretty}
  @media (max-width:680px){ .gloss-list, .preset-grid, .mode-grid{grid-template-columns:1fr} }

  /* Run log */
  .runlog{position:fixed; right:0; bottom:96px; z-index:40; display:flex; align-items:flex-start}
  .runlog-tab{position:absolute; right:100%; top:0; display:flex; align-items:center; gap:7px; white-space:nowrap;
    font-family:var(--disp); font-size:12px; font-weight:600; color:var(--text); cursor:pointer;
    background:var(--surface); border:1px solid var(--border); border-right:none; border-radius:9px 0 0 9px; padding:9px 12px}
  .runlog-tab svg{width:15px; height:15px; color:#67e8f9}
  body.light .runlog-tab svg{color:#0c95b6}
  .runlog-body{width:330px; max-width:78vw; height:300px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--border2); border-radius:12px 0 0 12px; padding:10px 12px;
    box-shadow:-12px 16px 44px rgba(0,0,0,.4); backdrop-filter:blur(10px)}
  .runlog-empty{font-size:12px; color:var(--faint); padding:14px 4px; line-height:1.5}
  .runlog-row{display:flex; gap:9px; padding:6px 0; border-bottom:1px solid var(--border); font-size:11.5px; line-height:1.4}
  .runlog-row:last-child{border-bottom:none}
  .runlog-n{font-family:var(--mono); font-size:10px; color:var(--faint); flex:0 0 auto}
  .runlog-line{color:var(--muted); text-wrap:pretty}
  .runlog-row.cur .runlog-line{color:var(--text)}
  .runlog-row.cur .runlog-n{color:#67e8f9}

  /* Presentation captions */
  .demo-layer{position:fixed; inset:0; z-index:70; pointer-events:none}
  .demo-exit{position:fixed; top:16px; right:16px; pointer-events:auto; cursor:pointer; font-family:var(--disp); font-size:13px; font-weight:600;
    color:var(--text); background:var(--surface); border:1px solid var(--border2); border-radius:10px; padding:9px 14px; box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .demo-cap{position:fixed; left:50%; bottom:46px; transform:translateX(-50%); width:min(760px,92vw); pointer-events:none;
    background:linear-gradient(180deg,rgba(12,19,30,.92),rgba(8,12,19,.92)); border:1px solid var(--border2); border-radius:16px;
    padding:20px 26px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5); animation:capin .4s ease}
  body.light .demo-cap{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,247,251,.96))}
  @keyframes capin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  .demo-title{font-size:24px; font-weight:700; color:var(--text); margin-bottom:8px; letter-spacing:.01em}
  .demo-desc{font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty}

  /* Quiz */
  .quiz-cta{position:fixed; left:50%; bottom:128px; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:8px;
    font-family:var(--disp); font-size:13.5px; font-weight:600; color:#04141a; cursor:pointer;
    background:linear-gradient(180deg,#1ec8e6,#0e9fc0); border:none; border-radius:11px; padding:11px 18px; box-shadow:0 10px 30px rgba(30,200,230,.4); animation:capin .4s ease}
  .quiz-cta svg{width:17px; height:17px}
  .quiz-cta:hover{filter:brightness(1.07)}
  .quiz-modal{position:relative; width:min(520px,96vw); max-height:90vh; overflow:auto;
    background:var(--surface); border:1px solid var(--border2); border-radius:18px; padding:26px 26px 24px;
    box-shadow:0 40px 100px rgba(0,0,0,.6); animation:appop .25s ease}
  .quiz-step{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#67e8f9; margin-bottom:10px}
  body.light .quiz-step{color:#0c7d96}
  .quiz-q{font-size:18px; font-weight:600; color:var(--text); margin-bottom:16px; text-wrap:pretty}
  .quiz-opts{display:flex; flex-direction:column; gap:8px}
  .quiz-opt{text-align:left; cursor:pointer; font-family:var(--disp); font-size:13.5px; color:var(--text);
    background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:11px 14px; transition:.12s}
  .quiz-opt:hover{border-color:var(--border2)}
  .quiz-opt.ok{border-color:#34d399; background:rgba(52,211,153,.14); color:#7df0c0}
  body.light .quiz-opt.ok{color:#0f9266}
  .quiz-opt.bad{border-color:#fb7185; background:rgba(251,113,133,.13)}
  .quiz-opt.mute{opacity:.5}
  .quiz-why{margin-top:14px; font-size:12.5px; line-height:1.55; color:var(--muted); background:var(--surface2);
    border:1px solid var(--border); border-radius:11px; padding:13px 15px; text-wrap:pretty}
  .quiz-why b{color:var(--text)}
  .quiz-next{display:block; margin-top:12px; margin-left:auto; cursor:pointer; font-family:var(--disp); font-size:13px; font-weight:600;
    color:#04141a; background:linear-gradient(180deg,#1ec8e6,#0e9fc0); border:none; border-radius:9px; padding:8px 16px}
  .quiz-next:hover{filter:brightness(1.07)}
  .quiz-result{text-align:center; padding:14px 0 6px}
  .quiz-score{font-family:var(--mono); font-size:46px; font-weight:700; color:#67e8f9; letter-spacing:.02em}
  body.light .quiz-score{color:#0c95b6}
  .quiz-rtext{font-size:14px; line-height:1.5; color:var(--muted); margin:10px auto 18px; max-width:360px; text-wrap:pretty}
  .quiz-result .quiz-next{margin:0 auto}

  /* ── Fraud overlay (badges on the chain) ── */
  .fraud-badge{position:absolute; z-index:14; width:30px; height:30px; border-radius:9px; cursor:pointer; padding:0;
    display:grid; place-items:center; color:#fb7185; background:rgba(251,113,133,.16);
    border:1px solid rgba(251,113,133,.5); box-shadow:0 0 0 1px rgba(251,113,133,.2), 0 4px 14px rgba(251,113,133,.3);
    animation:fraudpulse 1.5s ease-in-out infinite}
  .fraud-badge svg{width:17px; height:17px}
  .fraud-badge:hover{background:rgba(251,113,133,.28)}
  .fraud-badge.active{background:#fb7185; color:#2a0a10; box-shadow:0 0 0 2px #fb7185, 0 6px 20px rgba(251,113,133,.55)}
  @keyframes fraudpulse{0%,100%{box-shadow:0 0 0 1px rgba(251,113,133,.2),0 4px 14px rgba(251,113,133,.28)}50%{box-shadow:0 0 0 1px rgba(251,113,133,.5),0 4px 22px rgba(251,113,133,.55)}}
  .fraud-pop{position:absolute; z-index:15; width:300px; background:var(--surface-2,#1A1A1F); border:1px solid rgba(251,113,133,.45);
    border-radius:14px; padding:15px 16px; box-shadow:0 16px 44px rgba(0,0,0,.55); animation:slidein .2s ease}
  .fraud-pop-tag{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#fb7185; margin-bottom:6px}
  .fraud-pop-t{font-size:15px; font-weight:700; color:var(--text); margin-bottom:7px; line-height:1.15}
  .fraud-pop-d{font-size:12px; line-height:1.5; color:var(--info-body); text-wrap:pretty; margin-bottom:12px}
  .fraud-scheme{display:flex; flex-direction:column; gap:7px}
  .fraud-row{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:9px; border:1px solid var(--border)}
  .fraud-row.good{background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.28)}
  .fraud-row.bad{background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.4)}
  .fraud-row-k{font-size:12px; font-weight:600; color:var(--text)}
  .fraud-row.good .fraud-row-k{color:#7df0c0}
  .fraud-row.bad .fraud-row-k{color:#fb7185}
  .fraud-row-v{font-family:var(--mono); font-size:10px; color:var(--muted)}

  /* ── Fraud module ── */
  .fraud-modal{position:relative; width:min(720px,96vw); max-height:92vh; overflow:auto;
    background:var(--surface,#131316); border:1px solid var(--border-strong,rgba(255,255,255,.14)); border-radius:18px; padding:24px 26px 22px;
    box-shadow:0 40px 100px rgba(0,0,0,.6); animation:appop .25s ease}
  .fraud-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 18px}
  .fraud-tabs button{font-family:var(--disp); font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer;
    background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:7px 12px; transition:.13s}
  .fraud-tabs button:hover{border-color:var(--border2)}
  .fraud-tabs button.on{background:rgba(251,113,133,.14); color:#fb7185; border-color:rgba(251,113,133,.45)}
  .fraud-note{margin-top:14px; font-size:11.5px; line-height:1.5; color:var(--muted); background:color-mix(in oklab,#fb7185 7%,transparent);
    border:1px solid color-mix(in oklab,#fb7185 24%,transparent); border-radius:10px; padding:11px 13px; text-wrap:pretty}
  .fraud-note.full{grid-column:1 / -1}

  /* engine pipeline */
  .fraud-engine{display:flex; align-items:center; gap:10px}
  .fe-col{display:flex; flex-direction:column; gap:7px; flex:1}
  .fe-cap{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin-bottom:2px}
  .fe-sig{font-size:11.5px; color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:6px 9px}
  .fe-arrow{color:#fb7185; font-size:18px; flex:0 0 auto; opacity:.7}
  .fe-box{text-align:center; font-weight:600; font-size:13px; color:var(--text); background:var(--surface2); border:1px solid var(--border-strong,rgba(255,255,255,.14)); border-radius:11px; padding:14px 10px}
  .fe-box span{display:block; font-family:var(--mono); font-size:10px; color:var(--faint); font-weight:400; margin-top:3px}
  .fe-box.score{border-color:rgba(251,191,36,.4); color:#fbbf24}
  .fe-box.ml{margin-bottom:4px}
  .fe-verdict{font-family:var(--mono); font-size:12px; font-weight:600; border-radius:8px; padding:8px 10px; text-align:center; border:1px solid}
  .fe-verdict.allow{color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4)}
  .fe-verdict.review{color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.4)}
  .fe-verdict.block{color:#fb7185; background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.4)}

  /* score */
  .fs-readout{text-align:center; margin-bottom:14px}
  .fs-num{font-family:var(--mono); font-size:52px; font-weight:700; line-height:1}
  .fs-band{font-size:14px; font-weight:600; margin-top:4px}
  .fs-verdict{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:4px}
  .fs-range{width:100%; margin:6px 0 16px; cursor:pointer}
  .fs-scale{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
  .fs-seg{border:1px solid; border-radius:9px; padding:8px 6px; text-align:center}
  .fs-seg b{font-family:var(--mono); font-size:11px; display:block}
  .fs-seg span{font-size:9.5px; opacity:.85}

  /* human vs bot */
  .fraud-hvb{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .hvb-col{border-radius:12px; padding:14px; border:1px solid var(--border)}
  .hvb-col.good{background:rgba(52,211,153,.07); border-color:rgba(52,211,153,.3)}
  .hvb-col.bad{background:rgba(251,113,133,.07); border-color:rgba(251,113,133,.35)}
  .hvb-h{font-size:14px; font-weight:700; margin-bottom:10px; color:var(--text)}
  .hvb-col.good .hvb-h{color:#7df0c0}
  .hvb-col.bad .hvb-h{color:#fb7185}
  .hvb-row{font-size:12px; color:var(--info-body); padding:6px 0; border-top:1px solid var(--border)}

  /* types */
  .fraud-types{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .ft-card{display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:11px; background:var(--surface2);
    border:1px solid color-mix(in oklab,var(--ft) 35%,transparent)}
  .ft-dot{width:9px; height:9px; border-radius:50%; background:var(--ft); flex:0 0 9px; box-shadow:0 0 8px var(--ft)}
  .ft-name{font-size:11.5px; font-weight:600; color:var(--text)}

  /* transparency */
  .fc-flow{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:16px}
  .fc-node{font-weight:600; font-size:13px; color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:8px 14px}
  .fc-ar{color:var(--muted)}
  .fc-stds{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .fc-std{display:flex; align-items:baseline; gap:10px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:11px 12px}
  .fc-std code{font-family:var(--mono); font-size:12px; font-weight:600; color:#67e8f9; flex:0 0 auto}
  body.light .fc-std code{color:#0c7d96}
  .fc-std span{font-size:11px; line-height:1.4; color:var(--muted)}
  /* fraud types interactive explainer */
  .ftypes{display:grid; grid-template-columns:200px 1fr; gap:14px}
  .ftypes-list{display:flex; flex-direction:column; gap:5px; max-height:380px; overflow:auto}
  .ftypes-item{display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer; font-family:var(--disp); font-size:12px; font-weight:500;
    color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:9px 10px; transition:.13s}
  .ftypes-item svg{width:16px; height:16px; flex:0 0 16px; color:var(--ft)}
  .ftypes-item:hover{border-color:var(--border2)}
  .ftypes-item.on{background:color-mix(in oklab,var(--ft) 14%,transparent); color:var(--text); border-color:color-mix(in oklab,var(--ft) 50%,transparent)}
  .ftypes-detail{background:var(--surface2); border:1px solid color-mix(in oklab,var(--ft) 35%,transparent); border-radius:13px; padding:16px 17px}
  .ftd-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
  .ftd-head svg{width:22px; height:22px; color:var(--ft)}
  .ftd-name{font-size:17px; font-weight:700; color:var(--text)}
  .ftd-def{font-size:12.5px; line-height:1.55; color:var(--info-body); text-wrap:pretty; margin-bottom:13px}
  .ftd-vs{display:flex; flex-direction:column; gap:7px; margin-bottom:13px}
  .ftd-vsrow{display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:9px; border:1px solid var(--border)}
  .ftd-vsrow.good{background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.3)}
  .ftd-vsrow.bad{background:rgba(251,113,133,.09); border-color:rgba(251,113,133,.4)}
  .ftd-vsk{font-size:12px; font-weight:600; color:var(--text)}
  .ftd-vsrow.good .ftd-vsk{color:#7df0c0}
  .ftd-vsrow.bad .ftd-vsk{color:#fb7185}
  .ftd-vsv{font-family:var(--mono); font-size:10.5px; color:var(--muted)}
  .ftd-steps{display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; margin-bottom:13px}
  .ftd-step{flex:1; min-width:90px; display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
    background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--ft); border-radius:10px; padding:9px 8px}
  .ftd-step b{font-family:var(--mono); font-size:13px; color:var(--ft)}
  .ftd-step span{font-size:10.5px; line-height:1.3; color:var(--muted)}
  .ftd-stepar{align-self:center; color:var(--ft); opacity:.6}
  .ftd-catch{font-size:11.5px; line-height:1.5; color:var(--info-body); background:color-mix(in oklab,var(--ft) 9%,transparent);
    border:1px solid color-mix(in oklab,var(--ft) 26%,transparent); border-radius:10px; padding:10px 12px}
  .ftd-catch-l{display:block; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:var(--ft); margin-bottom:4px}
  @media (max-width:620px){ .ftypes{grid-template-columns:1fr} .ftypes-list{flex-direction:row; flex-wrap:wrap; max-height:none} .ftypes-item{flex:1 1 44%} }
  /* methodology: taxonomy */
  .ftax{display:flex; flex-direction:column; gap:12px}
  .ftax-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .ftax-col{border-radius:12px; padding:14px; border:1px solid var(--border)}
  .ftax-col.givt{background:rgba(103,232,249,.07); border-color:rgba(103,232,249,.3)}
  .ftax-col.sivt{background:rgba(251,113,133,.07); border-color:rgba(251,113,133,.35)}
  .ftax-tier{font-family:var(--mono); font-size:18px; font-weight:700}
  .ftax-col.givt .ftax-tier{color:#67e8f9}
  .ftax-col.sivt .ftax-tier{color:#fb7185}
  .ftax-sub{font-size:10.5px; color:var(--muted); margin-bottom:9px}
  .ftax-row{font-size:11.5px; color:var(--info-body); padding:5px 0; border-top:1px solid var(--border)}
  .ftax-meta{font-family:var(--mono); font-size:9.5px; color:var(--faint); margin-top:8px; line-height:1.4}
  .ftime{display:flex; align-items:stretch; gap:6px}
  .ftime-seg{flex:1; border-radius:10px; padding:9px 11px; border:1px solid var(--border); background:var(--surface2); font-size:10.5px; line-height:1.4; color:var(--muted)}
  .ftime-seg b{display:block; font-family:var(--mono); font-size:11px; color:var(--text); margin-bottom:3px}
  .ftime-seg.pre{border-color:rgba(52,211,153,.4)} .ftime-seg.pre b{color:#34d399}
  .ftime-seg.post{border-color:rgba(251,191,36,.4)} .ftime-seg.post b{color:#fbbf24}
  .ftime-seg.bidwin{flex:0 0 auto; display:flex; align-items:center; font-family:var(--mono); font-size:10px; color:var(--text)}
  .ftime-ar{align-self:center; color:var(--muted)}
  /* methods matrix */
  .fm-scroll{overflow-x:auto}
  .fm-table{width:100%; border-collapse:collapse; font-size:11px}
  .fm-table th,.fm-table td{padding:6px 4px; text-align:center; border:1px solid var(--border)}
  .fm-table th{font-family:var(--mono); font-size:9.5px; color:var(--faint); font-weight:500}
  .fm-mname{text-align:left !important; white-space:nowrap; color:var(--text); font-weight:500}
  .fm-tier{font-family:var(--mono); font-size:8px; font-weight:700; padding:1px 5px; border-radius:4px; margin-right:6px}
  .fm-tier.givt{color:#04141a; background:#67e8f9} .fm-tier.sivt{color:#2a0a10; background:#fb7185}
  .fm-cell{font-size:14px}
  .fm-cell.v2{color:#34d399} .fm-cell.v1{color:#fbbf24} .fm-cell.v0{color:var(--faint)}
  .fm-legend{display:flex; gap:14px; font-size:10.5px; color:var(--muted); margin-top:8px}
  /* standards */
  .fstd{display:flex; flex-direction:column; gap:12px}
  .fstd-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  .fstd-card{background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:12px 13px}
  .fstd-t{font-weight:700; font-size:13px; color:#67e8f9; margin-bottom:5px}
  body.light .fstd-t{color:#0c7d96}
  .fstd-d{font-size:11px; line-height:1.45; color:var(--info-body); text-wrap:pretty}
  .fstd-view{background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:12px 13px}
  .fstd-view-t{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:8px}
  .fstd-view-row{display:flex; gap:10px; font-size:11.5px; color:var(--info-body); padding:4px 0}
  .fstd-view-row b{font-family:var(--mono); color:var(--text); flex:0 0 56px}
  /* red flags */
  .fred-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 4px}
  .fred-card{font-size:11.5px; color:#fda4af; background:rgba(251,113,133,.09); border:1px solid rgba(251,113,133,.35); border-radius:9px; padding:9px 11px}
  .fred-kpi{display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:8px}
  .fred-kp{background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:8px 10px}
  .fred-kp b{font-size:11.5px; color:var(--text); display:block} .fred-kp span{font-size:10px; color:var(--muted)}
  /* business */
  .fbiz{display:flex; flex-direction:column; gap:13px}
  .fbiz-econ{display:grid; grid-template-columns:1.1fr 1fr; gap:13px; align-items:center}
  .fbiz-sliders{display:flex; flex-direction:column; gap:9px}
  .fbiz-sliders label{font-size:11.5px; color:var(--muted); display:flex; flex-direction:column; gap:3px}
  .fbiz-sliders b{color:var(--text); font-family:var(--mono)}
  .fbiz-sliders input{width:100%; accent-color:#fb7185}
  .fbiz-out{display:flex; gap:8px}
  .fbiz-stat{flex:1; text-align:center; background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:11px 8px}
  .fbiz-stat span{display:block; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px}
  .fbiz-stat b{font-family:var(--mono); font-size:16px; color:var(--text)}
  .fbiz-stat.saved b{color:#34d399} .fbiz-stat.wasted b{color:#fb7185}
  .fbiz-play{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .fbiz-col{background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:12px 13px}
  .fbiz-h{font-weight:700; font-size:13px; color:var(--text); margin-bottom:8px}
  .fbiz-li{font-size:11px; color:#7df0c0; padding:3px 0}
  .fbiz-close{font-size:12px; line-height:1.55; color:var(--info-body); text-align:center; font-style:italic;
    background:color-mix(in oklab,#67e8f9 7%,transparent); border:1px solid color-mix(in oklab,#67e8f9 22%,transparent); border-radius:11px; padding:13px 15px; text-wrap:pretty}
  @media (max-width:620px){ .ftax-cols,.fstd-grid,.fred-grid,.fbiz-econ,.fbiz-play{grid-template-columns:1fr} .fred-kpi{grid-template-columns:1fr 1fr} .ftime{flex-direction:column} }
  @media (max-width:620px){ .fraud-types{grid-template-columns:1fr 1fr} .fraud-hvb,.fc-stds,.fs-scale{grid-template-columns:1fr 1fr} .fraud-engine{flex-direction:column} .fe-arrow{transform:rotate(90deg)} }

  /* ── Fraud simulation tab ── */
  .fsim{display:flex; flex-direction:column; gap:14px}
  .fsim-controls{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .fsim-block{display:flex; flex-direction:column; gap:7px}
  .fsim-chips{display:flex; flex-wrap:wrap; gap:6px}
  .fsim-chip{font-family:var(--disp); font-size:11.5px; font-weight:500; color:var(--muted); cursor:pointer;
    background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:6px 10px; transition:.13s}
  .fsim-chip:hover{border-color:var(--border2)}
  .fsim-chip.on{background:rgba(251,113,133,.16); color:#fb7185; border-color:rgba(251,113,133,.45)}
  .fsim-chip.clean.on{background:rgba(52,211,153,.16); color:#34d399; border-color:rgba(52,211,153,.45)}
  .fsim-chip.preset.on{background:rgba(103,232,249,.14); color:#67e8f9; border-color:rgba(103,232,249,.45)}
  body.light .fsim-chip.preset.on{color:#0c7d96}
  .fsim-adesc{font-size:11px; line-height:1.45; color:var(--muted); text-wrap:pretty}
  .fsim-defs{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
  .fsim-def{display:flex; flex-direction:column; align-items:flex-start; gap:6px; cursor:pointer; text-align:left;
    background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:9px 10px; transition:.15s; opacity:.5}
  .fsim-def.on{opacity:1}
  .fsim-def-dot{width:8px; height:8px; border-radius:50%; background:var(--border-strong,rgba(255,255,255,.2))}
  .fsim-def.on .fsim-def-dot{background:#67e8f9}
  .fsim-def.active{border-color:#67e8f9; box-shadow:0 0 0 1px #67e8f9, 0 0 18px rgba(103,232,249,.4)}
  .fsim-def.caught{border-color:#fb7185; background:rgba(251,113,133,.1)}
  .fsim-def.caught .fsim-def-dot{background:#fb7185; box-shadow:0 0 8px #fb7185}
  .fsim-def.pass{border-color:rgba(52,211,153,.4)}
  .fsim-def-n{font-size:11px; font-weight:600; color:var(--text); line-height:1.2}
  .fsim-def-tag{font-family:var(--mono); font-size:9px; padding:1px 5px; border-radius:4px}
  .fsim-def-tag.bad{color:#2a0a10; background:#fb7185; font-weight:700}
  .fsim-def-tag.ok{color:#34d399}
  .fsim-def-tag.mute{color:var(--faint)}
  .fsim-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .fsim-run{display:flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--disp); font-size:13px; font-weight:600;
    color:#04141a; background:linear-gradient(180deg,#1ec8e6,#0e9fc0); border:none; border-radius:10px; padding:9px 15px; white-space:nowrap}
  .fsim-run svg{width:14px; height:14px}
  .fsim-run:hover{filter:brightness(1.07)}
  .fsim-run:disabled{opacity:.6; cursor:default}
  .fsim-meter{flex:1; min-width:140px}
  .fsim-meter-top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:4px}
  .fsim-meter-top b{font-size:14px}
  .fsim-bar{height:8px; border-radius:5px; background:var(--surface2); overflow:hidden}
  .fsim-bar i{display:block; height:100%; border-radius:5px; transition:width .45s ease}
  .fsim-verdict{font-family:var(--mono); font-size:12px; font-weight:600; border-radius:8px; padding:8px 12px; border:1px solid; white-space:nowrap}
  .fsim-verdict.allow{color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4)}
  .fsim-verdict.review{color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.4)}
  .fsim-verdict.block{color:#fb7185; background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.4)}
  .fsim-outcome{font-size:12px; line-height:1.5; border-radius:10px; padding:11px 13px; text-wrap:pretty}
  .fsim-outcome.good{color:#7df0c0; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35)}
  .fsim-outcome.bad{color:#fda4af; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.4)}
  .fsim-outcome.warn{color:#fcd34d; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.35)}
  .fsim-hint b{color:var(--text)}
  @media (max-width:620px){ .fsim-controls{grid-template-columns:1fr} .fsim-defs{grid-template-columns:1fr 1fr} }
  /* sim: who-catches + catchers hint */
  .fsim-catchers{margin-top:6px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:10.5px; color:var(--faint)}
  .fsim-cb{font-family:var(--mono); font-size:9.5px; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:2px 7px}
  .fsim-cb.on{color:#34d399; border-color:rgba(52,211,153,.4)}
  body.light .fsim-cb.on{color:#0f9266}
  .fsim-def.would{border-color:rgba(251,191,36,.45); border-style:dashed}
  .fsim-def-tag.would{color:#fbbf24}
  /* sim: batch compare table */
  .fsim-batch-toggle{align-self:flex-start; font-family:var(--disp); font-size:12px; font-weight:600; color:#67e8f9; cursor:pointer;
    background:none; border:none; padding:2px 0}
  body.light .fsim-batch-toggle{color:#0c7d96}
  .fsim-batch-toggle:hover{text-decoration:underline}
  .fsim-table{display:flex; flex-direction:column; gap:5px; border:1px solid var(--border); border-radius:11px; padding:10px}
  .fsim-trow{display:grid; grid-template-columns:1.1fr 1.4fr 0.7fr; gap:10px; align-items:center}
  .fsim-th{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); padding-bottom:2px}
  .fsim-tp{font-size:12px; font-weight:600; color:var(--text); display:flex; flex-direction:column}
  .fsim-tp i{font-style:normal; font-family:var(--mono); font-size:9px; color:var(--faint); font-weight:400}
  .fsim-tbar{position:relative; height:18px; background:var(--surface2); border-radius:5px; overflow:hidden; display:flex; align-items:center}
  .fsim-tbar i{display:block; height:100%; border-radius:5px; transition:width .4s ease}
  .fsim-tbar b{position:absolute; right:7px; font-family:var(--mono); font-size:10px}
  .fsim-tv{font-family:var(--mono); font-size:10.5px; font-weight:600; text-align:center; border-radius:6px; padding:3px 4px; border:1px solid}
  .fsim-tv.allow{color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.35)}
  .fsim-tv.review{color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.35)}
  .fsim-tv.block{color:#fb7185; background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.35)}
  .fsim-tnote{font-size:10.5px; line-height:1.45; color:var(--muted); margin-top:4px; text-wrap:pretty}
  /* overlay popup → sim CTA */
  .fraud-pop-sim{margin-top:11px; width:100%; font-family:var(--disp); font-size:12px; font-weight:600; cursor:pointer;
    color:#04141a; background:linear-gradient(180deg,#fb7185,#e84d6b); border:none; border-radius:9px; padding:8px 12px}
  .fraud-pop-sim:hover{filter:brightness(1.06)}
  /* fraud module export button */
  .fraud-export{position:absolute; top:0; right:0; display:flex; align-items:center; gap:6px; font-family:var(--disp); font-size:12px; font-weight:600;
    color:var(--text); background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:7px 11px; cursor:pointer}
  .fraud-export svg{width:14px; height:14px; color:#67e8f9}
  body.light .fraud-export svg{color:#0c7d96}
  .fraud-export:hover{border-color:var(--border-strong,rgba(255,255,255,.14))}
  .cmp-head{position:relative}

  /* Attention module (phase 1) — violet accent, reuses .compare-overlay/.fraud-modal shell */
  .att-tabs button.on{background:rgba(167,139,250,.16); color:#a78bfa; border-color:rgba(167,139,250,.45)}
  body.light .att-tabs button.on{color:#7c5cf0}
  .att-ladder{display:flex; flex-direction:column; gap:13px}
  .att-lad-intro{font-size:12.5px; line-height:1.55; color:var(--muted); text-wrap:pretty}
  .att-rung{display:flex; flex-direction:column; gap:5px}
  .att-rung-head{display:flex; justify-content:space-between; align-items:baseline}
  .att-rung-t{font-family:var(--disp); font-size:13.5px; font-weight:600}
  .att-rung-pct{font-family:var(--mono); font-size:13px; font-weight:700}
  .att-rung-pct i{font-size:9px; font-style:normal; opacity:.7; margin-left:1px}
  .att-rung-track{height:9px; border-radius:6px; background:var(--surface2); overflow:hidden}
  .att-rung-track i{display:block; height:100%; border-radius:6px; transition:width .5s cubic-bezier(.16,1,.3,1)}
  .att-rung-d{font-size:11.5px; line-height:1.5; color:var(--faint); text-wrap:pretty}
  .att-illus{font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:2px; letter-spacing:.02em; text-wrap:pretty}

  .att-meter{display:flex; flex-direction:column; gap:15px}
  .att-sigs{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
  .att-sig{display:flex; flex-direction:column; gap:5px}
  .att-chips{display:flex; flex-wrap:wrap; gap:5px}
  .att-chip{font-family:var(--disp); font-size:11.5px; font-weight:500; color:var(--muted); cursor:pointer;
    background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:5px 9px; transition:.12s;
    -webkit-tap-highlight-color:transparent}
  .att-chip:hover{border-color:var(--border2)}
  .att-chip.on{background:rgba(167,139,250,.16); color:#a78bfa; border-color:rgba(167,139,250,.45)}
  body.light .att-chip.on{color:#7c5cf0}
  .att-chip.dead{opacity:.4; text-decoration:line-through}
  .att-readout{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px; border-radius:12px;
    background:var(--surface2); border:1px solid var(--border)}
  .att-gauge{flex:1; min-width:170px}
  .att-gauge-top{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:5px}
  .att-gauge-top b{font-size:20px}
  .att-gauge-top b i{font-size:11px; font-style:normal; opacity:.55; font-weight:500}
  .att-bar{height:10px; border-radius:6px; background:rgba(127,127,127,.22); overflow:hidden}
  .att-bar i{display:block; height:100%; border-radius:6px; transition:width .35s ease, background .35s ease}
  .att-nums{display:flex; align-items:center; gap:14px}
  .att-sec{display:flex; align-items:baseline; gap:7px}
  .att-sec b{font-family:var(--mono); font-size:22px}
  .att-sec span{display:flex; flex-direction:column; font-size:11px; color:var(--muted); line-height:1.3}
  .att-sec span i{font-style:normal; font-size:9.5px; color:var(--faint)}
  .att-verdict{font-family:var(--mono); font-size:12px; font-weight:600; border:1px solid; border-radius:8px; padding:7px 11px; white-space:nowrap}
  .att-insight{font-size:12.5px; line-height:1.55; color:var(--text); text-wrap:pretty}
  .att-note{color:var(--faint)}
  .attention-module-btn:hover{color:#a78bfa}
  .attention-module-btn.on{color:#a78bfa; border-color:rgba(167,139,250,.45)}
  /* attention — cases (clickable presets that seed the meter) */
  .att-cases{display:flex; flex-direction:column; gap:9px}
  .att-case{display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer; width:100%;
    background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:11px 13px; transition:.14s;
    -webkit-tap-highlight-color:transparent}
  .att-case:hover{border-color:var(--border2); transform:translateY(-1px)}
  .att-case-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
  .att-case-n{font-family:var(--disp); font-size:13px; font-weight:600; color:var(--text)}
  .att-case-score{font-family:var(--mono); font-size:13px; font-weight:700; border:1px solid; border-radius:7px; padding:2px 7px; white-space:nowrap}
  .att-case-score i{font-size:9px; font-style:normal; opacity:.6; margin-left:1px}
  .att-case-track{height:6px; border-radius:4px; background:rgba(127,127,127,.22); overflow:hidden}
  .att-case-track i{display:block; height:100%; border-radius:4px; transition:width .4s ease}
  .att-case-why{font-size:11.5px; line-height:1.5; color:var(--faint); text-wrap:pretty}
  .att-case-open{font-family:var(--mono); font-size:10px; letter-spacing:.02em; opacity:.9}
  .att-take{font-size:12.5px; line-height:1.55; color:var(--text); text-wrap:pretty; border-radius:10px; padding:11px 13px;
    background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.35)}

  /* attention — how it is measured */
  .att-methods{display:flex; flex-direction:column; gap:11px}
  .att-step{display:flex; gap:11px; align-items:flex-start}
  .att-step-n{flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
    font-family:var(--mono); font-size:11px; font-weight:700; color:#a78bfa;
    background:rgba(167,139,250,.14); border:1px solid rgba(167,139,250,.4)}
  .att-step-b{display:flex; flex-direction:column; gap:3px}
  .att-step-t{font-family:var(--disp); font-size:13px; font-weight:600; color:var(--text)}
  .att-step-d{font-size:11.5px; line-height:1.5; color:var(--faint); text-wrap:pretty}
  .att-block{display:flex; flex-direction:column; gap:5px; border-radius:10px; padding:11px 13px;
    background:var(--surface2); border:1px solid var(--border); margin-top:3px}
  .att-block.warn{background:rgba(251,191,36,.07); border-color:rgba(251,191,36,.3)}
  .att-li{font-size:11.5px; line-height:1.5; color:var(--muted); text-wrap:pretty}

  /* attention — vendors */
  .att-vendors{display:flex; flex-direction:column; gap:11px}
  .att-vtable{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:11px; overflow:hidden}
  .att-vrow{display:grid; grid-template-columns:1.6fr .7fr 1fr; gap:10px; padding:9px 12px; align-items:center;
    border-bottom:1px solid var(--border)}
  .att-vrow:last-child{border-bottom:none}
  .att-vth{background:var(--surface2); font-family:var(--mono); font-size:9px; text-transform:uppercase;
    letter-spacing:.09em; color:var(--faint)}
  .att-vn{display:flex; flex-direction:column; gap:2px; font-family:var(--disp); font-size:12.5px; font-weight:600; color:var(--text)}
  .att-vn i{font-style:normal; font-size:10.5px; font-weight:400; line-height:1.45; color:var(--faint); text-wrap:pretty}
  .att-vap{font-family:var(--mono); font-size:10.5px; color:#a78bfa}
  .att-vap.panel{color:#67e8f9}
  .att-vm{font-family:var(--mono); font-size:11px; color:var(--muted); text-wrap:pretty}

  @media (max-width:560px){
    .att-sigs{grid-template-columns:1fr}
    .att-vth{display:none}
    .att-vrow{grid-template-columns:1fr; gap:4px}
    .att-vap, .att-vm{font-size:10.5px}
  }

  /* Brand safety module — sky accent (#38bdf8), reuses the .fraud-modal shell and
     the .att-* primitives; the shared classes are re-tinted inside .bs only. */
  .bs-tabs button.on{background:rgba(56,189,248,.16); color:#38bdf8; border-color:rgba(56,189,248,.45)}
  body.light .bs-tabs button.on{color:#0284c7}
  .bs .att-chip.on{background:rgba(56,189,248,.16); color:#38bdf8; border-color:rgba(56,189,248,.45)}
  body.light .bs .att-chip.on{color:#0284c7}
  .bs .att-take{background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.35)}
  .bs .att-step-n{color:#38bdf8; background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.4)}
  .bs .att-vap{color:#38bdf8}
  .bs .att-vap.panel{color:#34d399}
  .brand-module-btn:hover{color:#38bdf8}
  .brand-module-btn.on{color:#38bdf8; border-color:rgba(56,189,248,.45)}

  /* floor + suitability tiers */
  .bs-floor{display:flex; flex-direction:column; gap:11px}
  .bs-tier{display:flex; gap:11px; align-items:stretch}
  .bs-tier-bar{flex:0 0 4px; border-radius:3px}
  .bs-tier.gate .bs-tier-bar{flex-basis:6px}
  .bs-tier-b{display:flex; flex-direction:column; gap:3px; padding-bottom:2px}
  .bs-tier-t{font-family:var(--disp); font-size:13.5px; font-weight:600}
  .bs-tier-d{font-size:11.5px; line-height:1.5; color:var(--faint); text-wrap:pretty}
  .bs-cats{display:flex; flex-wrap:wrap; gap:5px; margin-top:3px}
  .bs-cat{font-family:var(--disp); font-size:11px; color:var(--muted); background:var(--surface2);
    border:1px solid var(--border); border-radius:7px; padding:4px 8px}

  /* cases — brand switcher flips the verdicts */
  .bs-cases{display:flex; flex-direction:column; gap:11px}
  .bs-brandpick{gap:6px}
  .bs-brandnote{font-size:11.5px; line-height:1.5; color:var(--muted); text-wrap:pretty;
    border-left:2px solid rgba(56,189,248,.5); padding-left:10px}
  .bs-clist{display:flex; flex-direction:column; gap:7px}
  .bs-citem{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:11px;
    background:var(--surface2); border:1px solid var(--border); transition:.16s}
  .bs-citem.bad{background:rgba(251,113,133,.07); border-color:rgba(251,113,133,.28)}
  .bs-citem.good{background:rgba(52,211,153,.07); border-color:rgba(52,211,153,.28)}
  .bs-cmark{flex:0 0 auto; width:23px; height:23px; border-radius:7px; display:grid; place-items:center;
    font-family:var(--mono); font-size:13px; font-weight:700; border:1px solid}
  .bs-cb{display:flex; flex-direction:column; gap:2px; min-width:0}
  .bs-cn{font-family:var(--disp); font-size:12.5px; font-weight:600; color:var(--text); text-wrap:pretty}
  .bs-cv{font-family:var(--mono); font-size:10px; letter-spacing:.03em}
  .bs-cw{font-size:11px; line-height:1.5; color:var(--faint); text-wrap:pretty; margin-top:2px}

  /* the tuner */
  .bs-tuner{display:flex; flex-direction:column; gap:15px}
  .bs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
  .bs-metric{display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;
    padding:11px 8px; border-radius:11px; background:var(--surface2); border:1px solid var(--border)}
  .bs-metric b{font-family:var(--mono); font-size:21px; line-height:1; color:var(--text)}
  .bs-metric b i{font-size:11px; font-style:normal; opacity:.55; font-weight:500}
  .bs-metric span{font-size:10px; line-height:1.35; color:var(--faint); text-wrap:pretty}
  .bs-split{display:flex; flex-direction:column; gap:7px; padding:13px; border-radius:12px;
    background:var(--surface2); border:1px solid var(--border)}
  .bs-splitrow{display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--mono); font-size:10.5px; color:var(--muted)}
  .bs-splitrow b{font-size:15px; color:var(--text)}
  .bs-splittrack{display:flex; height:10px; border-radius:6px; overflow:hidden; background:rgba(127,127,127,.22)}
  .bs-splittrack i{display:block; height:100%; transition:width .35s ease}
  .bs-legend{display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-family:var(--mono); font-size:9.5px; color:var(--faint)}
  .bs-legend span{display:flex; align-items:center; gap:5px}
  .bs-legend em{width:9px; height:9px; border-radius:3px; display:block}
  .bs-missed{margin-left:auto}
  .bs-missed b{color:var(--muted); font-size:10.5px}

  /* where it breaks — the over-blocking table */
  .bs-fails{display:flex; flex-direction:column; gap:11px}
  .bs-table{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:11px; overflow:hidden}
  .bs-trow{display:grid; grid-template-columns:1.1fr auto 2fr; gap:11px; padding:9px 12px; align-items:baseline;
    border-bottom:1px solid var(--border)}
  .bs-trow:last-child{border-bottom:none}
  .bs-tn{font-family:var(--disp); font-size:12px; font-weight:600; color:var(--text); text-wrap:pretty}
  .bs-tv{font-family:var(--mono); font-size:14px; font-weight:700; color:#fb7185; white-space:nowrap}
  .bs-td{font-size:11px; line-height:1.45; color:var(--faint); text-wrap:pretty}
  .bs-vrow .att-vn{font-size:12px}

  @media (max-width:560px){
    .bs-grid{grid-template-columns:1fr 1fr}
    .bs-trow{grid-template-columns:1fr auto; gap:3px 10px}
    .bs-td{grid-column:1 / -1}
    .bs-missed{margin-left:0; width:100%}
  }

  /* fraud PDF print */
  @media print {
    body.fraudprint .topbar, body.fraudprint .bottombar, body.fraudprint .canvas, body.fraudprint .cfg-panel,
    body.fraudprint .runlog, body.fraudprint .quiz-cta, body.fraudprint .demo-layer, body.fraudprint .sig-tip { display:none !important; }
    body.fraudprint .compare-overlay { display:block !important; position:static !important; background:#fff !important; backdrop-filter:none !important; padding:0 !important; }
    body.fraudprint .fraud-modal { display:block !important; position:static !important; max-height:none !important; width:100% !important;
      box-shadow:none !important; border:none !important; overflow:visible !important; background:#fff !important; color:#111 !important; }
    body.fraudprint .fraud-modal .cmp-title, body.fraudprint .fraud-modal .fsim-def-n, body.fraudprint .fraud-modal .fsim-tp { color:#111 !important; }
    body.fraudprint .fraud-export, body.fraudprint .dive-close, body.fraudprint .fsim-batch-toggle { display:none !important; }
  }

  /* Print / PDF export */
  @media print {
    @page { size: landscape; margin: 10mm; }
    body { background:#fff !important; }
    .topbar, .bottombar, .cfg-panel, .sig-tip, .tour-overlay, .tour-ring, .tour-card, .dive-overlay, .compare-overlay, .twk-panel, .runlog, .demo-layer, .quiz-cta, .quiz-modal, .fraud-pop { display:none !important; }
    .viewport { position:static !important; overflow:visible !important; display:block !important; }
    .viewport.pan { overflow:visible !important; }
    .stage-wrap { width:1440px !important; height:760px !important; margin:0 auto !important; }
    .stage { position:static !important; transform:none !important; height:760px !important; }
    .canvas { box-shadow:none; }
  }

  /* ============================================================
     v2 · Liquid-glass polish — additive & reversible.
     Delete this block to revert to v1 visuals.
     Refines material depth, motion easing, focus, reduced-motion.
     ============================================================ */
  :root{
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
    --spec: inset 0 1px 0 rgba(255,255,255,.10);                       /* specular top edge */
    --depth: 0 1px 2px rgba(4,7,12,.5), 0 14px 36px -10px rgba(4,7,12,.6);
    --depth-lg: 0 2px 6px rgba(4,7,12,.5), 0 32px 72px -14px rgba(4,7,12,.72);
  }
  body.light{
    --spec: inset 0 1px 0 rgba(255,255,255,.9);
    --depth: 0 1px 2px rgba(18,34,58,.10), 0 14px 34px -10px rgba(18,34,58,.18);
    --depth-lg: 0 2px 8px rgba(18,34,58,.12), 0 28px 64px -14px rgba(18,34,58,.22);
  }
  /* specular edge + layered depth on the floating glass surfaces */
  .lat-bar, .runlog-body, .sig-tip, .tour-card{ box-shadow: var(--spec), var(--depth); }
  .auction-panel, .money-panel{ box-shadow: var(--spec), var(--depth-lg); }
  .info-panel{ box-shadow: var(--spec), var(--depth-lg), 0 0 26px var(--cg); }
  .dive-modal, .gloss-modal, .quiz-modal, .compare-modal{ box-shadow: var(--spec), var(--depth-lg); }
  .cfg-panel{ box-shadow: var(--spec), -24px 0 60px rgba(4,7,12,.5); }
  /* lit top edge on the chrome bar */
  .topbar{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  body.light .topbar{ box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
  /* expensive ease-out settle on panel entrances + node motion */
  .info-panel, .auction-panel, .money-panel, .dive-modal, .gloss-modal, .quiz-modal{ animation-timing-function: var(--ease-out-expo); }
  .node{ transition: border-color .25s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), transform .35s var(--ease-out-expo); }
  /* winner: one cinematic settle (ease-out, no bounce) */
  .dsp-node.winner{ animation: v2-win .6s var(--ease-out-expo) both; }
  @keyframes v2-win{
    0%{   box-shadow: 0 0 0 1px #34d399, 0 0 0 rgba(52,211,153,0); }
    35%{  box-shadow: 0 0 0 1px #34d399, 0 0 64px rgba(52,211,153,.6); }
    100%{ box-shadow: 0 0 0 1px #34d399, 0 0 34px rgba(52,211,153,.4); }
  }
  /* keyboard a11y: visible focus ring (outline follows each element's own radius) */
  .ctl-btn:focus-visible, .seg button:focus-visible, .lang-btn:focus-visible,
  .theme-btn:focus-visible, .dive-chip:focus-visible, .preset-btn:focus-visible,
  .quiz-opt:focus-visible, .cfg-act:focus-visible, .info-dive:focus-visible,
  .tour-next:focus-visible, .tour-back:focus-visible, .tour-skip:focus-visible,
  .cfg-close:focus-visible, .panel-close:focus-visible,
  .fraud-badge:focus-visible, .fraud-layer-btn:focus-visible, .fraud-module-btn:focus-visible,
  .fsim-chip:focus-visible, .fsim-def:focus-visible, .fsim-run:focus-visible, .fsim-batch-toggle:focus-visible,
  .fraud-tabs button:focus-visible, .fraud-export:focus-visible, .ftypes-item:focus-visible, .dive-close:focus-visible{
    outline: 2px solid #67e8f9; outline-offset: 2px;
  }
  body.light .ctl-btn:focus-visible, body.light .seg button:focus-visible,
  body.light .lang-btn:focus-visible, body.light .theme-btn:focus-visible{ outline-color: #0c95b6; }
  /* respect reduced-motion: stop ambient loops, keep transitions snappy */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .12s !important;
    }
  }

  /* ─────────────── Mobile / touch adaptation ─────────────── */
  @keyframes sheetup{from{transform:translateY(102%)}to{transform:translateY(0)}}
  .mobile-bar{display:none}
  @media (max-width:760px){
    /* fixed thumb-reachable action bar (viewport-level, not scaled with the map) */
    .mobile-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
      gap:7px; align-items:center; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
      background:color-mix(in oklab,var(--body-bg,#070a10) 90%,transparent); backdrop-filter:blur(16px) saturate(1.3);
      border-top:1px solid var(--border); box-shadow:0 -10px 34px rgba(0,0,0,.45)}
    body.light .mobile-bar{background:color-mix(in oklab,#ffffff 88%,transparent)}
    .mb-btn{flex:0 0 auto; height:46px; min-width:46px; display:grid; place-items:center; padding:0;
      border-radius:12px; border:1px solid var(--border2); background:var(--surface2); color:var(--text);
      cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .1s}
    .mb-btn:active{transform:scale(.93)}
    /* eight actions no longer fit 375px: shrink first, and keep the bar scrollable
       below that so the language toggle at the end can never become unreachable. */
    .mobile-bar{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
    .mobile-bar::-webkit-scrollbar{display:none}
    @media (max-width:430px){
      .mobile-bar{gap:4px; padding-left:6px; padding-right:6px}
      .mb-btn{height:42px; min-width:40px; border-radius:11px}
      .mb-btn svg{width:19px; height:19px}
    }
    .mb-btn svg{width:21px; height:21px}
    a.mb-btn{text-decoration:none}
    .mb-primary{flex:1 1 auto; flex-direction:row; gap:8px; font-family:var(--disp); font-size:14px; font-weight:700;
      background:linear-gradient(180deg,#1ec8e6,#0e9fc0); color:#04141a; border-color:transparent; box-shadow:0 4px 16px rgba(30,200,230,.3)}
    .mb-primary svg{width:18px; height:18px}
    .mb-lang{font-family:var(--mono); font-size:13px; font-weight:700}

    /* fixed overlays → full-screen sheets on phones */
    .cfg-panel{width:100vw; max-width:none; border-left:none}
    .dive-overlay{padding:0; align-items:stretch; justify-content:stretch}
    .dive-modal{width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; border-radius:0;
      padding:16px 13px calc(22px + env(safe-area-inset-bottom))}
    .compare-overlay{padding:0}
    .gloss-modal, .quiz-modal, .compare-modal{width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; border-radius:0}
    .fraud-modal{width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; border-radius:0}
    .fraud-pop{width:min(92vw,400px)}

    /* deep-dive internals: the schematic is a %-based absolute diagram authored for ~926px.
       Squeezed into ~360px its 12 modules drop to 45px wide and visually merge, so on phones
       give it a readable design width and scroll it horizontally instead of shrinking it. */
    .dive-schem-wrap{overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; border-radius:12px}
    .dive-schem-wrap::-webkit-scrollbar{display:none}
    .dive-schem{flex:0 0 700px; width:700px; height:min(46vh, 340px)}
    .dive-body{gap:10px}
    /* no scroll-hint gradient: the wrapper is a flex container, so a ::after overlay collapses to
       zero width. The modules clipped at the right edge are the affordance. */
    .dive-side{max-height:none}
    .dive-card{padding:11px 12px}
    .dmod-t{font-size:11.5px}

    /* node info → bottom sheet that slides up above the action bar */
    .info-panel{position:fixed; left:0; right:0; top:auto; bottom:calc(67px + env(safe-area-inset-bottom)); width:100%; max-width:none;
      max-height:62vh; overflow:auto; border-radius:20px 20px 0 0; border-left:none; border-right:none; border-bottom:none;
      padding:18px 18px calc(18px + env(safe-area-inset-bottom)); animation:sheetup .3s cubic-bezier(.16,1,.3,1);
      box-shadow:0 -14px 44px rgba(0,0,0,.5)}
    .info-close{top:12px; right:14px}
    /* comfortable touch targets */
    /* comfortable tap targets across every modal, not just the three classes v3.7 covered
       (measured on 390px: the fraud compare-toggle was 20px tall, config segments 30px) */
    .dive-chip, .fsim-chip, .dive-play, .fsim-batch-toggle, .fraud-export,
    .mode-btn{min-height:56px}
    .att-chip, .att-tabs button, .fraud-tabs button, .cfg-seg button{min-height:38px}
    .fsim-batch-toggle{display:flex; align-items:center}
    .info-close, .dive-close, .cfg-close{width:40px; height:40px}
  }