/* ══════════════════════════════════════════════════════════════════
   KENO SCANNER v43 — KINEMATIC DESIGN SYSTEM
   Merges kinematic's liquid-glass aesthetic with keno's
   green/purple/teal data-terminal palette.
   ══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* Keno palette */
  --k-green:   #00FF00;
  --k-green2:  #00CC44;
  --k-green3:  #44ffaa;
  --k-purple:  #912BFF;
  --k-purple2: #b87dff;
  --k-teal:    #1e3d4a;
  --k-gold:    #ffd700;
  --k-red:     #fc8181;

  /* Kinematic tokens */
  --pink1:#c8f5e0; --pink2:#00e87a;
  --blue1:#c3e8f5; --blue2:#00b4d8;
  --purple1:#d9c8f5; --purple2:#7c5cbf;
  --peach:#fde8d8;  --mint:#c8f5e8;
  --accent-dim:#44bb88;
  --obsidian:#060d0f; --paper:#ecf7f4;

  --pl-mu:1;
  --glass-blur: calc(var(--pl-mu) * 40px);

  /* Dark mode (default for scanner) */
  --bg: #060d12;
  --bg2: #0a1520;
  --bg3: #0d1e28;
  --bg4: #142032;
  --bg5: #04080e;
  --fg: #a8e8cc;
  --border: #1a3d4a;
  --border2: #264a5a;
  --text: #a8c4cc;
  --text2: #3d6470;
  --text3: #5a8a7a;
  --text4: #4a7070;

  --glass-tint:    rgba(6,20,26,0.75);
  --glass-tint-hi: rgba(8,26,34,0.90);
  --glass-border:    rgba(0,200,100,0.25);
  --glass-border-hi: rgba(0,255,120,0.55);
  --glass-shine:  rgba(255,255,255,0.14);
  --glass-shine2: rgba(255,255,255,0.06);
  --glass-rim:    rgba(255,255,255,0.18);
  --glass-rim2:   rgba(0,200,120,0.32);
  --glass-shadow:    rgba(0,0,0,0.65);
  --glass-shadow-hi: rgba(0,0,0,0.85);
  --glass-inner-glow: rgba(0,180,100,0.22);
  --glass-edge-glow:  rgba(0,220,130,0.22);
  --glass-noise-op: 0.05;
  --glass-sat:    210%;
  --glass-bright: 115%;
  --glass-depth-shadow:
    inset 0 3px 0 var(--glass-rim),
    inset 0 2px 8px rgba(255,255,255,0.10),
    inset 0 -2px 0 var(--glass-rim2),
    inset 0 -5px 12px rgba(0,180,100,0.22),
    inset 3px 0 0 rgba(255,255,255,0.09),
    inset -3px 0 0 rgba(0,180,100,0.15),
    0 2px 4px rgba(0,0,0,0.45),
    0 6px 14px rgba(0,0,0,0.55),
    0 16px 40px rgba(0,0,0,0.60),
    0 36px 80px var(--glass-shadow),
    0 0 0 0.5px rgba(0,160,80,0.22);
  --card-bg: var(--glass-tint);

  --font-mono: 'Share Tech Mono', monospace;
  --font-serif: 'Syne', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-data: 'Rajdhani', sans-serif;
  --ta: 0.55s cubic-bezier(.4,0,.2,1);
  --radius: 14px;

  /* Keno-specific computed vars */
  --green: var(--k-green);
  --green2: var(--k-green2);
  --green3: var(--k-green3);
  --purple: var(--k-purple);
  --purple2: var(--k-purple2);
  --gold: var(--k-gold);
  --red: var(--k-red);
  --green-dim: rgba(0,255,0,.07);
  --green-glow: #00FF0055;
  --purple-bg: rgba(145,43,255,.12);
  --purple-dim: #7a5caa;
  --purple-dk: #7050aa;
  --red-bg: rgba(229,62,62,.08);
  --red-border: #e53e3e44;
  --modal-bg: rgba(4,10,16,.93);
  --modal-bg2: rgba(4,10,16,.96);
  --chip-hover: #0d1e28;
  --row-hover: rgba(0,255,0,.04);
  --row-hover2: rgba(0,255,0,.08);
  --top3-bg: rgba(145,43,255,.05);
  --top3-hover: rgba(145,43,255,.09);
  --rec-hover: rgba(145,43,255,.05);
  --topval-bg: rgba(255,200,0,.04);
  --topval-hov: rgba(255,200,0,.08);
  --scrollbar: var(--border2);
  --grid-line: rgba(0,255,0,.015);
  --hdr-line: linear-gradient(90deg,#00FF0033,transparent);
  --tog-bg: var(--bg2);
  --tog-border: var(--border);
  --divr: var(--border);
  --empty-col: var(--border2);
  --empty-col2: var(--border);
  --pt-hover: var(--bg3);
  --skl1: var(--bg2); --skl2: var(--bg3);
  --lp-bg: linear-gradient(90deg,#0a1a0e,#1a0a2a,#0a1a0e);

  /* Layout */
  --wrap-max: min(1600px, 96vw);
  --wrap-pad-inline: max(env(safe-area-inset-left,0px) + clamp(6px,1.2vw,14px),6px);
  --wrap-pad-block-start: clamp(8px,1.5vw,24px);
  --wrap-pad-block-end: max(env(safe-area-inset-bottom,0px) + 28px,40px);
  --rthd-cols: 36px 1fr 120px 100px 170px 110px;
  --rec-cols: 32px 50px 60px 1fr 90px 90px 100px;
  --kb-cols: repeat(8,1fr);
  --mst-cols: repeat(3,1fr);
  --pn-cols: repeat(auto-fill,minmax(44px,1fr));
  --col-m: block; --col-s: block; --rec-col-m: block;
}

[data-theme="light"] {
  --bg: #ecf7f2; --bg2: #ffffff; --bg3: #e4f0ec; --bg4: #d4e8e0; --bg5: #c8ddd8;
  --border: #7aaa99; --border2: #5a8a8a;
  --fg: #0e2218;
  /* Significantly darker text for light mode readability */
  --text: #152e24; --text2: #2a5040; --text3: #1e4040; --text4: #284848;
  /* Richer data colors — dark enough to read on white/light backgrounds */
  --green: #005500; --green2: #003800; --green3: #006633;
  --green-dim: rgba(0,80,0,.09); --green-glow: #00550033;
  --purple: #5500aa; --purple2: #7722aa; --purple-bg: rgba(80,0,170,.09);
  --purple-dim: #6644aa; --purple-dk: #4422aa;
  --red: #a02020; --red-bg: rgba(160,32,32,.08); --red-border: #a0202033;
  --gold: #6b5000;
  --modal-bg: rgba(180,210,195,.94); --modal-bg2: rgba(180,210,195,.97);
  --chip-hover: #d4e8e0;
  --row-hover: rgba(0,60,0,.05); --row-hover2: rgba(0,60,0,.09);
  --top3-bg: rgba(80,0,170,.05); --top3-hover: rgba(80,0,170,.09);
  --rec-hover: rgba(80,0,170,.05);
  --topval-bg: rgba(120,90,0,.05); --topval-hov: rgba(120,90,0,.10);
  --scrollbar: #6a9a8a; --grid-line: rgba(0,60,0,.03);
  --hdr-line: linear-gradient(90deg,#00550044,transparent);
  --tog-bg: #fff; --tog-border: #7aaa99;
  --divr: #7aaa99; --empty-col: #5a8a8a; --empty-col2: #7aaa99;
  --pt-hover: #d4e8e0; --skl1: #dceee8; --skl2: #c8ddd8;
  --lp-bg: linear-gradient(90deg,#dceee8,#d4e0ec,#dceee8);
  /* Override neon k- tokens so they're readable on light backgrounds */
  --k-green:   #005500;
  --k-green2:  #004400;
  --k-green3:  #006633;
  --k-purple:  #5500aa;
  --k-purple2: #7722aa;
  --k-gold:    #6b5000;
  --k-red:     #a02020;

  --glass-tint:    rgba(220,240,232,0.78);
  --glass-tint-hi: rgba(240,252,248,0.92);
  --glass-border:    rgba(0,160,80,0.38);
  --glass-border-hi: rgba(0,200,100,0.75);
  --glass-shine:  rgba(255,255,255,1.0);
  --glass-shine2: rgba(255,255,255,0.55);
  --glass-rim:    rgba(255,255,255,1.0);
  --glass-rim2:   rgba(0,160,100,0.55);
  --glass-shadow:    rgba(0,60,30,0.15);
  --glass-shadow-hi: rgba(0,60,30,0.30);
  --glass-inner-glow: rgba(0,160,80,0.22);
  --glass-edge-glow:  rgba(0,200,120,0.30);
  --glass-noise-op: 0.04;
  --glass-sat:    200%;
  --glass-bright: 106%;
  --glass-depth-shadow:
    inset 0 3px 0 var(--glass-rim),
    inset 0 2px 8px rgba(255,255,255,0.65),
    inset 0 -2px 0 var(--glass-rim2),
    inset 0 -5px 12px rgba(0,160,80,0.25),
    inset 3px 0 0 rgba(255,255,255,0.50),
    inset -3px 0 0 rgba(0,160,80,0.28),
    0 2px 4px rgba(0,40,20,0.10),
    0 6px 16px rgba(0,40,20,0.15),
    0 18px 42px rgba(0,40,20,0.18),
    0 40px 88px var(--glass-shadow),
    0 0 0 1px rgba(0,140,60,0.22);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
::selection { background:rgba(0,255,100,0.25); color:#fff; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-data);
  min-height:100vh; overflow-x:hidden;
  transition:background var(--ta),color var(--ta);
}

/* Noise grain */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.35; mix-blend-mode:overlay;
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg3)}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}

/* ── AURORA ─────────────────────────────────────────────────────── */
#aurora {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
[data-theme="dark"]  #aurora { opacity:0.55; mix-blend-mode:screen; }
[data-theme="light"] #aurora { opacity:0.55; }

.aurora-blob {
  position:absolute; border-radius:50%;
  will-change:transform,opacity;
  transform:translateZ(0);
  top:0; left:0;
}
.ab1 { width:88vmin; height:88vmin;
  background:radial-gradient(ellipse at 42% 46%,rgba(0,220,100,0.65) 0%,rgba(0,220,100,0.38) 18%,rgba(0,180,80,0.14) 38%,rgba(0,140,60,0.04) 62%,transparent 80%); }
.ab2 { width:72vmin; height:72vmin;
  background:radial-gradient(ellipse at 54% 42%,rgba(145,43,255,0.60) 0%,rgba(145,43,255,0.35) 18%,rgba(120,30,220,0.12) 40%,rgba(100,20,200,0.03) 62%,transparent 80%); }
.ab3 { width:64vmin; height:64vmin;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,180,220,0.55) 0%,rgba(0,160,200,0.30) 18%,rgba(0,130,170,0.10) 40%,transparent 70%); }
.ab4 { width:60vmin; height:60vmin;
  background:radial-gradient(ellipse at 46% 54%,rgba(0,255,120,0.50) 0%,rgba(0,255,120,0.25) 20%,rgba(0,200,100,0.08) 42%,transparent 68%); }
.ab5 { width:68vmin; height:68vmin;
  background:radial-gradient(ellipse at 50% 50%,rgba(180,43,255,0.45) 0%,rgba(160,30,240,0.25) 20%,rgba(130,20,200,0.07) 42%,transparent 68%); }
.ab6 { width:55vmin; height:55vmin;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,200,200,0.45) 0%,rgba(0,170,180,0.22) 22%,rgba(0,140,150,0.06) 44%,transparent 68%); }
.ab7 { width:58vmin; height:58vmin;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,255,80,0.40) 0%,rgba(0,230,60,0.18) 24%,rgba(0,180,40,0.05) 46%,transparent 70%); }
.ab8 { width:52vmin; height:52vmin;
  background:radial-gradient(ellipse at 50% 50%,rgba(100,50,255,0.40) 0%,rgba(80,30,240,0.18) 24%,rgba(60,10,200,0.04) 48%,transparent 70%); }

/* ── BG GRID ─────────────────────────────────────────────────────── */
.bg-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:44px 44px;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 8px var(--green-glow))}50%{filter:drop-shadow(0 0 22px var(--green))}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes streakLoop{0%{left:-30%;opacity:0}8%{opacity:1}85%{opacity:.7}100%{left:110%;opacity:0}}
@keyframes barGlow{
  0%{box-shadow:0 0 14px #00FF0099,0 0 28px #00FF0044,inset 0 1px 0 rgba(255,255,255,.15)}
  40%{box-shadow:0 0 16px #44ff88bb,0 0 32px #00FF0055,inset 0 1px 0 rgba(255,255,255,.15)}
  70%{box-shadow:0 0 16px #aa66ffbb,0 0 32px #912BFF55,inset 0 1px 0 rgba(255,255,255,.15)}
  100%{box-shadow:0 0 14px #912BFFaa,0 0 28px #912BFF44,inset 0 1px 0 rgba(255,255,255,.15)}
}
@keyframes borderGlow{
  0%{box-shadow:0 0 14px 2px #00FF0044,inset 0 0 8px #00FF0008}
  33%{box-shadow:0 0 18px 3px #44ff99aa,inset 0 0 10px #44ff9912}
  66%{box-shadow:0 0 20px 4px #912BFF99,inset 0 0 12px #912BFF18}
  100%{box-shadow:0 0 14px 2px #00FF0044,inset 0 0 8px #00FF0008}
}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes etaFade{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes revealFlash{0%{background:rgba(0,255,0,0)}15%{background:rgba(0,255,0,.14)}40%{background:rgba(0,255,0,.04)}100%{background:rgba(0,255,0,0)}}
@keyframes revealScan{0%{top:-100%}100%{top:120%}}
@keyframes revealRow{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes chipSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.92)}65%{transform:translateY(1px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes dzScanPulse{0%,100%{border-color:var(--border)}50%{border-color:var(--green);box-shadow:0 0 16px var(--green-glow)}}
@keyframes recRowIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes glass-sweep{0%,100%{background-position:130% 0;opacity:0.3}50%{background-position:-30% 0;opacity:0.7}}
@keyframes card-hue-ring{0%{background-position:100% 0%}50%{background-position:0% 0%}100%{background-position:100% 0%}}
@keyframes ksPulseGreen{0%,100%{box-shadow:0 0 8px var(--green-glow)}50%{box-shadow:0 0 22px var(--green),0 0 36px var(--green-glow)}}
@keyframes ksPulseYellow{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.3)}50%{box-shadow:0 0 22px #ffd700,0 0 36px rgba(255,215,0,.2)}}
@keyframes ksPulseOrange{0%,100%{box-shadow:0 0 8px rgba(255,140,0,.3)}50%{box-shadow:0 0 22px #ff8c00,0 0 36px rgba(255,140,0,.2)}}
@keyframes ksPulseRed{0%,100%{box-shadow:0 0 8px rgba(229,62,62,.3)}50%{box-shadow:0 0 22px #fc8181,0 0 36px rgba(229,62,62,.2)}}
@keyframes ossPulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes wsRevealScan{0%{top:0;opacity:1}100%{top:100%;opacity:0}}
@keyframes confirmPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,0,0)}50%{box-shadow:0 0 0 5px rgba(0,255,0,.22),0 0 14px rgba(0,255,0,.4)}}
@keyframes consoleBadgePulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes gearMenuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wsFadeOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02);pointer-events:none}}
@keyframes barGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes barShimmer{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(100%)}}
@keyframes expandBtnPulse{0%,100%{box-shadow:0 0 0 rgba(145,43,255,0)}50%{box-shadow:0 0 12px rgba(145,43,255,.65)}}
@keyframes ptTableIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── LIQUID GLASS CARD ENGINE ───────────────────────────────────── */
.card-engine {
  position:relative; transform-style:preserve-3d; perspective:1400px;
  transform:translateZ(0); border-radius:var(--radius); background:transparent;
  z-index:1; transition:box-shadow 0.55s cubic-bezier(0.16,1,0.3,1);
}
.card-engine.card-interactive { cursor:pointer; }
.card-engine:hover, .card-engine.card-aether-glow { z-index:2; }

.card-bg {
  position:absolute; inset:0; border-radius:inherit;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  background:var(--glass-tint);
  border:1px solid transparent;
  box-shadow:var(--glass-depth-shadow);
  transition:border-color .42s,box-shadow .42s,background .32s;
  pointer-events:none;
}
.card-bg::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.06) 1.5px,rgba(255,255,255,0.02) 8%,transparent 30%),
    linear-gradient(var(--shine-angle,128deg),transparent var(--shine-lo,20%),rgba(255,255,255,0.04) calc(var(--shine-pos,48%) - 10%),rgba(255,255,255,0.12) var(--shine-pos,48%),rgba(255,255,255,0.04) calc(var(--shine-pos,48%) + 10%),transparent var(--shine-hi,75%)),
    linear-gradient(0deg,var(--glass-inner-glow) 0%,rgba(255,255,255,0.02) 16%,transparent 28%);
  pointer-events:none;
}
.card-bg::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:var(--glass-noise-op); mix-blend-mode:overlay; pointer-events:none;
}

.glass-spec {
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 60% 50% at var(--spec-x,50%) var(--spec-y,28%),rgba(0,255,100,0.28),rgba(255,255,255,0.10) 32%,transparent 62%);
  opacity:0; transition:opacity .28s; pointer-events:none; z-index:1;
}
.glass-shimmer {
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg,transparent 20%,rgba(0,255,100,0.04) 38%,rgba(255,255,255,0.10) 48%,rgba(0,255,100,0.04) 58%,transparent 72%);
  background-size:300% 100%; background-position:100% 0;
  pointer-events:none; z-index:1; opacity:0.5;
  animation:glass-sweep 8s ease-in-out infinite; animation-play-state:paused;
}
.card-engine:hover .glass-shimmer, .card-engine.card-aether-glow .glass-shimmer {
  opacity:1; animation-duration:3s; animation-play-state:running;
}
.glass-ior {
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 58% 48% at 50% 50%,rgba(0,255,100,0.06),transparent 68%);
  transform:translate(var(--ior-dx,0px),var(--ior-dy,0px));
  pointer-events:none; transition:transform .16s linear; z-index:1;
}

/* Card ring (hue border on hover) */
.card-ring {
  position:absolute; inset:-2px;
  border-radius:calc(var(--radius) + 2px);
  background:linear-gradient(105deg,var(--k-green2) 0%,#44ffbb 20%,var(--k-purple) 38%,var(--k-blue2,#00b4d8) 52%,var(--k-purple) 66%,var(--k-green2) 82%,#88ffcc 100%);
  background-size:400% 100%;
  animation:card-hue-ring 5s ease-in-out infinite; animation-play-state:paused;
  opacity:0; transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none; z-index:0;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude; padding:2px;
}
.card-engine:hover .card-ring, .card-engine.card-aether-glow .card-ring {
  opacity:1; animation-play-state:running;
}
.card-engine::before { content:none; display:none; }

.card-engine {
  box-shadow:0 4px 8px rgba(0,40,20,0.10),0 8px 24px rgba(0,40,20,0.06);
}
.card-engine:hover, .card-engine.card-aether-glow {
  box-shadow:0 0 24px rgba(0,220,100,0.30),0 0 48px rgba(0,180,80,0.15),0 0 80px rgba(0,140,60,0.08),0 12px 40px rgba(0,40,20,0.25),0 24px 64px rgba(0,40,20,0.14);
}
[data-theme="light"] .card-engine:hover,
[data-theme="light"] .card-engine.card-aether-glow {
  box-shadow:0 0 20px rgba(0,180,80,0.28),0 0 40px rgba(0,140,60,0.14),0 12px 36px rgba(0,40,20,0.18);
}
.card-engine:hover .card-bg, .card-engine.card-aether-glow .card-bg {
  background:var(--glass-tint-hi);
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.18),inset 0 2px 8px rgba(255,255,255,0.10),inset 0 -2px 0 var(--glass-rim2),inset 0 -5px 10px rgba(0,200,100,0.18),inset 3px 0 0 rgba(255,255,255,0.09),inset -3px 0 0 rgba(0,200,100,0.15),0 4px 8px rgba(0,0,0,0.35),0 20px 60px var(--glass-shadow-hi);
}
.card-engine:hover .glass-spec, .card-engine.card-aether-glow .glass-spec { opacity:1; }
.card-engine.card-aether-glow {
  transform:translateZ(0) translateY(-3px) scale(1.006);
  transition:transform .38s cubic-bezier(.22,.68,0,1.2),box-shadow 0.55s cubic-bezier(0.16,1,0.3,1);
}
.card-content { position:relative; z-index:2; }

/* ── REVEAL OVERLAY ─────────────────────────────────────────────── */
.reveal-overlay{position:fixed;inset:0;z-index:500;pointer-events:none;display:none;overflow:hidden}
.reveal-overlay.active{display:block;animation:revealFlash .9s ease forwards}
.reveal-scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--green),rgba(0,200,0,.5),var(--green),transparent);box-shadow:0 0 18px var(--green);animation:revealScan .7s ease-in-out forwards}

/* ── GEAR / SETTINGS BUTTON ─────────────────────────────────────── */
#gear-btn {
  position:fixed; top:12px; right:14px; z-index:1002;
  width:42px; height:42px; border-radius:50%;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:var(--glass-tint); border:1.5px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .22s;
  font-size:20px; color:var(--k-purple2); line-height:1; padding:0;
}
#gear-btn:hover { border-color:var(--k-purple2); color:var(--k-purple2); transform:rotate(30deg); box-shadow:0 0 16px rgba(145,43,255,.5); }
#gear-btn.open { border-color:var(--k-purple2); transform:rotate(60deg); box-shadow:0 0 14px rgba(145,43,255,.5); }

#gear-menu {
  position:fixed; top:58px; right:14px; z-index:1001;
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  background:var(--glass-tint);
  border:1px solid var(--glass-border); border-radius:14px;
  padding:8px 0; min-width:190px;
  box-shadow:var(--glass-depth-shadow);
  display:none; animation:gearMenuIn .18s cubic-bezier(.4,0,.2,1);
}
#gear-menu.open { display:block; }

.gear-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background .12s; font-family:var(--font-mono);
  font-size:10px; color:var(--text2); letter-spacing:.07em;
  user-select:none;
}
.gear-item:hover { background:rgba(0,255,100,.06); color:var(--fg); }
.gear-item .gi-track { width:28px; height:14px; border-radius:7px; background:var(--border); position:relative; flex-shrink:0; transition:background .18s; }
.gear-item.on .gi-track { background:var(--k-green2); }
.gear-item .gi-thumb { position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--text2); transition:transform .18s,background .18s; }
.gear-item.on .gi-thumb { transform:translateX(14px); background:#fff; }
.gear-item .gi-icon { font-size:13px; width:18px; text-align:center; flex-shrink:0; }
.gear-item .gi-lbl { flex:1; }
.gear-divider { height:1px; background:var(--glass-border); margin:5px 0; }

/* ── SUPPORT BUTTON ─────────────────────────────────────────────── */
#support-btn {
  position:fixed; top:12px; right:62px; z-index:1002;
  width:42px; height:42px; border-radius:50%;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:var(--glass-tint); border:1.5px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .22s;
  font-size:18px; color:var(--k-purple2); line-height:1; padding:0;
}
#support-btn:hover { border-color:var(--k-purple2); background:rgba(145,43,255,.15); box-shadow:0 0 14px rgba(145,43,255,.5); transform:scale(1.08); }

/* ── WRAP + HEADER ──────────────────────────────────────────────── */
.wrap { position:relative; z-index:1; max-width:var(--wrap-max); margin:0 auto; padding-inline:var(--wrap-pad-inline); padding-block-start:var(--wrap-pad-block-start); padding-block-end:var(--wrap-pad-block-end); }

.hdr { margin-bottom:20px; }
.hdr-top { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.hdr-icon {
  width:clamp(44px,5vw,56px); height:clamp(44px,5vw,56px);
  border-radius:14px; flex-shrink:0; overflow:hidden;
  animation:logoGlowPurple 3s ease-in-out infinite;
  border:1.5px solid rgba(145,43,255,0.55);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:linear-gradient(135deg,rgba(80,10,160,0.75) 0%,rgba(120,30,200,0.65) 100%);
  box-shadow:0 0 18px rgba(145,43,255,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
@keyframes logoGlowPurple{
  0%,100%{box-shadow:0 0 10px rgba(145,43,255,0.40), inset 0 1px 0 rgba(255,255,255,0.15)}
  50%{box-shadow:0 0 24px rgba(145,43,255,0.75), 0 0 40px rgba(145,43,255,0.25), inset 0 1px 0 rgba(255,255,255,0.20)}
}
.hdr-icon img, .hdr-icon svg { width:100%; height:100%; object-fit:cover; display:block; }

.hdr-title {
  font-family:'Syne', sans-serif;
  font-size:clamp(17px,2.4vw,26px);
  font-weight:800;
  background:linear-gradient(105deg,var(--k-green) 0%,#44ffbb 28%,var(--k-purple2) 52%,#00ccee 72%,var(--k-green) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:card-hue-ring 6s ease-in-out infinite;
  letter-spacing:.12em;
}
.hdr-sub { font-family:var(--font-mono); font-size:clamp(8px,1vw,10px); color:var(--text2); letter-spacing:.1em; }
.hdr-line { height:1px; background:var(--hdr-line); margin-top:6px; }

/* ── GLASS PANEL (generic frosted-glass section) ────────────────── */
.glass-panel {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  background:var(--glass-tint);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
}

/* ── MAIN TABS ───────────────────────────────────────────────────── */
.main-tabs { display:flex; gap:0; border-bottom:2px solid var(--k-purple); }
.main-tab {
  padding:clamp(6px,.8vw,9px) clamp(12px,1.8vw,22px);
  font-family:var(--font-mono); font-size:clamp(10px,1.1vw,12px);
  color:var(--text2); cursor:pointer;
  border:1px solid transparent; border-bottom:none;
  border-radius:8px 8px 0 0; background:transparent;
  transition:all .15s; margin-bottom:-2px; letter-spacing:.06em;
}
.main-tab:hover:not(.active) { color:var(--k-purple2); border-color:var(--k-purple); }
.main-tab.active {
  color:var(--k-purple2); border-color:var(--k-purple);
  background:var(--glass-tint); border-bottom-color:var(--glass-tint);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.main-panel { display:none!important; }

/* ── HOW TO PANEL ───────────────────────────────────────────────── */
.howto {
  background:var(--glass-tint);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:22px; animation:fadeIn .2s ease;
}
.howto h2 { font-family:var(--font-serif); color:var(--k-green); font-size:15px; letter-spacing:.1em; margin-bottom:10px; }
.howto h3 { font-family:var(--font-mono); color:var(--k-purple2); font-size:11px; letter-spacing:.1em; margin:16px 0 8px; }
.howto p { font-family:var(--font-data); font-size:13px; color:var(--text3); line-height:1.75; margin-bottom:8px; }
.howto .rule-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:14px; }
.howto .rule-box {
  border-radius:10px; padding:12px 14px;
  background:var(--glass-tint); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.howto .rule-box .rb-ttl { font-family:var(--font-mono); font-size:10px; color:var(--k-green); letter-spacing:.1em; margin-bottom:5px; }
.howto .rule-box p { font-size:12px; color:var(--text4); margin:0; }
.howto p b,.howto p strong { font-weight:inherit; color:inherit; }
.howto p b.c-green,.howto p span.c-green { color:var(--k-green); }
.scan-term { color:var(--k-purple2); }
.scan-lbl { font-family:var(--font-mono); font-size:11px; color:var(--k-green); letter-spacing:.08em; font-weight:700; }
.howto p b.c-green,.howto p strong.c-green { text-decoration:none; }

/* ── ANALYSIS LAYOUT ─────────────────────────────────────────────── */
#mp-analysis {
  width:100%; padding-top:14px; box-sizing:border-box;
  display:grid; grid-template-columns:1fr; gap:0;
}
@media(min-width:700px){
  #mp-analysis { grid-template-columns:clamp(300px,28%,420px) 1fr; gap:16px; align-items:start; }
  .landscape-left { position:sticky; top:0; max-height:100vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
  .landscape-right { min-width:0; overflow:visible; }
}
@media(min-width:1400px){ #mp-analysis { grid-template-columns:clamp(340px,22%,460px) 1fr; } }
@media(min-width:1800px){ #mp-analysis { grid-template-columns:clamp(360px,20%,480px) 1fr; } }
.landscape-left::-webkit-scrollbar{width:4px}
.landscape-left::-webkit-scrollbar-track{background:transparent}
.landscape-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.landscape-right { display:flex; flex-direction:column; gap:12px; min-width:0; }
.landscape-right > * { flex-shrink:0; }

/* ── FILE LIST ──────────────────────────────────────────────────── */
.fl {
  display:block; margin-bottom:12px;
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow); overflow:hidden;
}
.fl-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px;
  background:linear-gradient(90deg,rgba(0,255,100,.04),transparent);
  border-bottom:1px solid var(--glass-border);
}
.fl-lbl { font-family:var(--font-mono); font-size:11px; color:var(--text2); letter-spacing:.12em; }
.fl-btns { display:flex; gap:7px; align-items:center; }
.fl-tog {
  background:transparent; border:1px solid var(--glass-border); border-radius:6px;
  padding:3px 9px; cursor:pointer; font-family:var(--font-mono); font-size:11px;
  color:var(--text2); transition:all .15s; display:flex; align-items:center; gap:4px;
  backdrop-filter:blur(10px);
}
.fl-tog:hover { color:var(--k-green); border-color:var(--k-green); }
.fl-tog .arr { transition:transform .35s cubic-bezier(.4,0,.2,1); display:inline-block; }
.fl-tog.col .arr { transform:rotate(-90deg); }
.btn-clr { font-family:var(--font-mono); font-size:11px; color:var(--k-red); opacity:.6; background:none; border:1px solid var(--red-border); border-radius:5px; padding:2px 9px; cursor:pointer; transition:all .15s; }
.btn-clr:hover { opacity:1; }
.fl-body { padding:0; transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s ease; max-height:600px; opacity:1; overflow:hidden; }
.fl-body.col { max-height:0; opacity:0; }
.fl-body .dz { margin:12px; border-radius:10px; }
.chips { display:flex; flex-direction:column; gap:0; padding:0 0 4px 0; }
.chip {
  display:flex; align-items:center; gap:8px;
  background:transparent; border:none; border-top:1px solid var(--glass-border);
  padding:clamp(6px,.8vw,8px) clamp(10px,1.4vw,14px);
  font-family:var(--font-mono); font-size:clamp(10px,1.1vw,11px);
  animation:chipSlideIn .3s cubic-bezier(.4,0,.2,1) both;
  transition:background .12s;
}
.chip:hover { background:rgba(0,255,100,.04); }
.chip .cn { color:var(--k-green); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip .cc { color:var(--k-purple2); min-width:50px; text-align:right; }
.chip .cd { color:var(--border2); font-size:10px; min-width:90px; text-align:right; }
.chip .cr { color:var(--text2); cursor:pointer; font-size:14px; line-height:1; transition:color .15s; flex-shrink:0; margin-left:4px; padding:0 2px; }
.chip .cr:hover { color:var(--k-red); }
.chip.loading { opacity:.55; }

/* ── DROP ZONE ──────────────────────────────────────────────────── */
.dz {
  border:2px dashed var(--glass-border); border-radius:var(--radius);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,24px);
  background:rgba(0,255,100,.02); cursor:pointer; text-align:center;
  margin-bottom:12px; transition:all .25s;
}
.dz:hover,.dz.over { border-color:var(--k-green); background:var(--green-dim); box-shadow:0 0 16px var(--green-glow); }
.dz.scanning { animation:dzScanPulse 1.1s ease-in-out infinite; }
.dz input { display:none; }
.dz-ttl { font-family:var(--font-mono); color:var(--k-green); font-size:12px; margin-bottom:3px; letter-spacing:.06em; }
.dz-sub { color:var(--text2); font-size:11px; font-family:var(--font-mono); }

/* ── TOTBAR ──────────────────────────────────────────────────────── */
.totbar {
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:var(--glass-tint); border:1px solid var(--glass-border);
  padding:8px 14px; margin-bottom:12px; margin-top:12px;
  display:none; align-items:center; gap:12px; flex-wrap:wrap;
}
.totbar .tl { font-family:var(--font-mono); font-size:10px; color:var(--text2); }
.totbar .tv { font-family:var(--font-mono); font-size:16px; color:var(--k-green); }
.totbar .td { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-left:auto; }

/* ── ALERTS ─────────────────────────────────────────────────────── */
.err { background:var(--red-bg); border:1px solid var(--red-border); border-radius:var(--radius); padding:9px 14px; margin-bottom:10px; color:var(--k-red); font-size:12px; font-family:var(--font-mono); white-space:pre-wrap; display:none; }
.note { background:var(--purple-bg); border:1px solid var(--k-purple); border-radius:var(--radius); padding:8px 14px; margin-bottom:10px; color:var(--purple-dim); font-size:12px; font-family:var(--font-mono); display:none; }

/* ── CONTROL PANEL ──────────────────────────────────────────────── */
.ctrl {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
  padding:clamp(10px,1.2vw,14px) clamp(12px,1.6vw,18px);
  margin-bottom:14px; margin-top:4px;
  container-type:inline-size; container-name:ctrl-panel;
}
.cr2 { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; margin-bottom:10px; }
.cr2:last-child { margin-bottom:0; }
.cg { flex:1; min-width:180px; }
.cl { font-size:10px; color:var(--text2); letter-spacing:.12em; margin-bottom:6px; font-family:var(--font-mono); }
.bg { display:flex; gap:4px; flex-wrap:wrap; }

/* Toggle buttons with glass treatment */
.tb {
  padding:clamp(3px,.5vw,5px) clamp(8px,1vw,11px);
  border-radius:7px; border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(0,255,100,.03);
  color:var(--text2); font-family:var(--font-mono);
  font-size:clamp(10px,1.1vw,11px); cursor:pointer;
  white-space:nowrap; transition:all 80ms; letter-spacing:.04em;
}
.tb:hover:not(:disabled) { color:var(--k-green); border-color:var(--k-green); background:var(--green-dim); }
.tb.ag { border-color:var(--k-green); background:var(--green-dim); color:var(--k-green); box-shadow:0 0 8px var(--green-glow); }
.tb.ap { border-color:var(--k-purple); background:var(--purple-bg); color:var(--k-purple2); }
.tb.ar { border-color:var(--k-red); background:var(--red-bg); color:var(--k-red); }
.tb.ay { border-color:#ffd700; background:rgba(255,215,0,.07); color:#ffd700; }
.tb.ao { border-color:#ff8c00; background:rgba(255,140,0,.07); color:#ff8c00; }
.tb:disabled { opacity:.28; cursor:not-allowed; }
.tb.ag.sel { animation:ksPulseGreen 1.5s ease-in-out infinite; }
.tb.ay.sel { animation:ksPulseYellow 1.5s ease-in-out infinite; box-shadow:0 0 10px rgba(255,215,0,.35); }
.tb.ao.sel { animation:ksPulseOrange 1.5s ease-in-out infinite; }
.tb.ar.sel { animation:ksPulseRed 1.5s ease-in-out infinite; }
.divr { height:1px; background:var(--glass-border); margin:10px 0; }
.pbox { border-left:1px solid var(--glass-border); padding-left:14px; flex-shrink:0; display:none; }
.pbox .pl { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:2px; }
.pbox .pv { font-family:var(--font-mono); color:var(--k-green); font-size:18px; line-height:1.2; }
.pbox .ps { font-family:var(--font-mono); font-size:10px; color:var(--text2); }

/* ── BET WINDOW DUAL RANGE SLIDER ───────────────────────────────── */
.slider-wrap { margin-top:8px; }
.slider-row { display:flex; align-items:center; gap:10px; }
.bet-slider { flex:1; -webkit-appearance:none; appearance:none; height:4px; background:linear-gradient(90deg,var(--k-green) var(--pct,50%),var(--border) var(--pct,50%)); border-radius:2px; outline:none; cursor:pointer; }
.bet-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--k-green); box-shadow:0 0 8px var(--green-glow); cursor:pointer; border:2px solid var(--bg); }
.bet-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--k-green); box-shadow:0 0 8px var(--green-glow); cursor:pointer; border:2px solid var(--bg); }
.slider-val { font-family:var(--font-mono); font-size:11px; color:var(--k-green); min-width:80px; text-align:right; }
.slider-hint { font-family:var(--font-mono); font-size:9px; color:var(--border2); margin-top:3px; }

.dual-range-wrap { position:relative; height:28px; margin:4px 0; }
.drs-track { position:absolute; top:50%; left:0; right:0; height:4px; transform:translateY(-50%); background:var(--border); border-radius:2px; pointer-events:none; }
.drs-fill { position:absolute; top:0; height:100%; background:var(--k-green); border-radius:2px; transition:left .05s,width .05s; }
.dual-range-wrap input[type=range] { position:absolute; top:50%; width:100%; transform:translateY(-50%); -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; height:28px; margin:0; outline:none; }
.dual-range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--k-green); box-shadow:0 0 8px var(--green-glow); cursor:pointer; border:2px solid var(--bg); pointer-events:all; }
.dual-range-wrap input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--k-green); box-shadow:0 0 8px var(--green-glow); cursor:pointer; border:2px solid var(--bg); pointer-events:all; }
.dual-range-wrap input[type=range]:disabled::-webkit-slider-thumb { background:var(--border2); box-shadow:none; cursor:default; }
.drs-labels { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-top:1px; }
.drs-val { font-family:var(--font-mono); font-size:11px; color:var(--k-green); text-align:center; margin-top:2px; min-height:14px; }
.btn-range-confirm { font-family:var(--font-mono); font-size:10px; color:var(--text3); background:var(--glass-tint); border:1px solid var(--glass-border); border-radius:6px; padding:5px 12px; cursor:not-allowed; letter-spacing:.06em; transition:all .25s; white-space:nowrap; align-self:flex-end; margin-left:8px; opacity:.45; backdrop-filter:blur(10px); }
.btn-range-confirm.ready { color:var(--k-green); background:var(--green-dim); border-color:var(--k-green); opacity:1; cursor:pointer; animation:confirmPulse 1.1s ease-in-out infinite; }
.btn-range-confirm:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }

/* ── LOADING PANEL ──────────────────────────────────────────────── */
#load-wrap {
  display:none; border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--k-purple);
  padding:26px 26px 22px; margin-top:12px;
  animation:borderGlow 2.8s ease-in-out infinite;
  width:100%; box-sizing:border-box;
}
#load-ttl { font-family:var(--font-mono); font-size:12px; color:var(--k-green); letter-spacing:.1em; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
#load-spin { width:18px; height:18px; border:2px solid var(--green-glow); border-top-color:var(--k-green); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
#load-phase { color:var(--text2); font-size:11px; letter-spacing:.07em; }
#btn-cancel-compute { font-family:var(--font-mono); font-size:10px; color:#ff6644; background:rgba(255,100,68,.08); border:1px solid #ff664433; border-radius:5px; padding:4px 12px; cursor:pointer; letter-spacing:.06em; transition:all .15s; }
#btn-cancel-compute:hover { background:rgba(255,100,68,.18); border-color:#ff664466; color:#ff8866; }
#btn-start-compute { font-family:var(--font-mono); font-size:10px; color:var(--k-green); background:rgba(0,255,0,.07); border:1px solid var(--green-glow); border-radius:5px; padding:4px 12px; cursor:pointer; letter-spacing:.06em; transition:all .15s; }
#btn-start-compute:hover { background:rgba(0,255,0,.15); box-shadow:0 0 8px var(--green-glow); }

#lpwrap { position:relative; height:18px; border-radius:9px; overflow:hidden; margin-bottom:18px; background:var(--bg3); }
#lpbg { position:absolute; inset:0; background:var(--lp-bg); }
#lpstreak { position:absolute; top:0; height:100%; width:26%; background:linear-gradient(90deg,transparent,#912BFF44,#c060ffaa,#912BFF44,transparent); filter:blur(1px); animation:streakLoop 1.5s ease-in-out infinite; z-index:2; }
#lpbar { position:relative; height:100%; border-radius:9px; background:linear-gradient(90deg,#0a2a14,#00CC44,#00FF00,#44ffaa,#912BFF); background-size:200% 100%; box-shadow:0 0 16px #00FF0088,0 0 32px #00FF0033,inset 0 1px 0 rgba(255,255,255,.15); transition:width .12s ease; width:0%; z-index:1; overflow:hidden; animation:barGlow 4s ease-in-out infinite; }
#lpbar::before { content:''; position:absolute; top:0; height:100%; width:50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); animation:streakLoop 1.8s ease-in-out infinite; }
#lpbar::after { content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; background:#00FF00; box-shadow:0 0 12px #00FF00,0 0 24px #00FF00aa; }
#lcounters { display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; margin-bottom:16px; }
#lpct { font-family:var(--font-mono); font-size:clamp(26px,4vw,46px); color:var(--k-green); font-weight:700; line-height:1; animation:timerPulse 1.2s ease-in-out infinite; }
#leta { font-family:var(--font-mono); font-size:13px; color:var(--k-green2); animation:etaFade 1.8s ease-in-out infinite; background:var(--glass-tint); border:1px solid var(--green-glow); border-radius:5px; padding:3px 10px; backdrop-filter:blur(10px); }
#k-bars { display:flex; gap:8px; flex-wrap:wrap; }
.kbar-wrap { flex:1; min-width:clamp(30px,4vw,56px); }
.kbar-lbl { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:3px; text-align:center; letter-spacing:.06em; }
.kbar-bg { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.kbar-fill { height:100%; background:var(--green-glow); border-radius:3px; transition:width .12s; width:0%; }
.kbar-fill.done { background:var(--k-green); }

/* ── STATS BAR ──────────────────────────────────────────────────── */
.sbar { display:none; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:12px; }
.sc {
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:var(--glass-tint); border:1px solid var(--glass-border);
  padding:clamp(10px,1.2vw,14px) clamp(12px,1.5vw,16px);
}
.sc .sl { font-size:clamp(10px,1.1vw,11px); color:var(--text2); letter-spacing:.1em; margin-bottom:4px; font-family:var(--font-mono); }
.sc .sv { font-family:var(--font-mono); font-size:clamp(16px,1.8vw,20px); line-height:1.3; }

/* ── ANALYSIS TABS ──────────────────────────────────────────────── */
.tabs { display:none; gap:0; margin-bottom:0; margin-top:4px; border-bottom:2px solid var(--k-purple); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  padding:clamp(6px,.8vw,9px) clamp(9px,1.4vw,18px);
  font-family:var(--font-mono); font-size:clamp(10px,1.1vw,12px);
  color:var(--k-purple2); cursor:pointer;
  border:1px solid var(--k-purple); border-bottom:none;
  border-radius:7px 7px 0 0;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(145,43,255,.06);
  transition:all .15s; margin-bottom:-2px; letter-spacing:.06em;
}
.tab:hover:not(.active) { color:var(--k-purple2); background:rgba(145,43,255,.16); border-color:var(--k-purple2); box-shadow:0 0 6px rgba(145,43,255,.25); }
.tab.active { color:var(--k-green); border-color:var(--k-green); background:var(--glass-tint); border-bottom-color:var(--glass-tint); box-shadow:0 0 10px var(--green-glow); }
#tab-report { border-left:1px solid var(--k-purple); margin-left:auto; }

/* ── RESULTS BLOCK ──────────────────────────────────────────────── */
#results-block {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
  overflow:hidden; display:none;
}
#results-block .tabs { border-radius:0; border-bottom:2px solid var(--k-purple); background:rgba(0,255,100,.02); padding:0 8px; }
#results-block .rtbl { border:none; border-radius:0; }
#results-block #profnum-panel { border:none; border-radius:0; margin-bottom:0; }
#results-block #recs-panel { border-radius:0; }
#results-block .chint { background:var(--glass-tint); padding:4px 14px; margin:0; border-top:1px solid var(--glass-border); }

.rtbl { background:transparent; border:1px solid var(--glass-border); border-top:none; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; display:none; }
.rthd { display:grid; grid-template-columns:var(--rthd-cols); gap:clamp(4px,.6vw,7px); padding:clamp(6px,.8vw,9px) clamp(8px,1.2vw,14px); background:rgba(0,255,100,.03); border-bottom:1px solid var(--glass-border); font-size:10px; color:var(--text2); letter-spacing:.1em; font-family:var(--font-mono); position:sticky; top:0; z-index:2; }
.rrow { display:grid; grid-template-columns:var(--rthd-cols); gap:clamp(4px,.6vw,7px); padding:clamp(5px,.7vw,8px) clamp(8px,1.2vw,14px); border-bottom:1px solid rgba(0,255,100,.04); align-items:center; cursor:pointer; transition:background .1s; animation:revealRow .25s ease both; opacity:0; }
.rrow:hover { background:var(--row-hover); }
.rrow:last-child { border-bottom:none; }
.rrow.t3 { background:var(--top3-bg); }
.rrow.t3:hover { background:var(--top3-hover); }
.rrow.hot-row { background:var(--row-hover); }
.rrow.hot-row:hover { background:var(--row-hover2); }
.rnk { font-family:var(--font-mono); font-size:13px; }

/* ── KENO BALLS ─────────────────────────────────────────────────── */
.bls { display:flex; gap:3px; flex-wrap:wrap; align-items:center; }
.bl { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; color:#fff; flex-shrink:0; width:var(--ball-sz,23px); height:var(--ball-sz,23px); border-radius:5px; background:rgba(145,43,255,.82); border:1px solid rgba(145,43,255,.5); box-shadow:0 0 5px rgba(145,43,255,.35); }
.gv { font-family:var(--font-mono); font-size:14px; }
.ev { font-family:var(--font-mono); font-size:10px; color:var(--text2); }

/* ── DUE METER ──────────────────────────────────────────────────── */
.dbg { width:100%; height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.dbf { height:100%; border-radius:3px; transition:width .3s ease; }
.dbl { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-top:2px; }
.bdg { font-size:10px; font-weight:700; letter-spacing:.05em; font-family:var(--font-mono); padding:2px 5px; border-radius:3px; border:1px solid; white-space:nowrap; }
.chint { font-family:var(--font-mono); font-size:9px; color:var(--border2); margin-bottom:6px; text-align:right; padding-right:4px; display:none; }
.empty { text-align:center; padding:60px 20px; color:var(--empty-col); font-family:var(--font-mono); }
.empty .ei { font-size:44px; margin-bottom:12px; opacity:.3; }
.empty .et { letter-spacing:.2em; font-size:13px; }
.empty .es { font-size:10px; margin-top:6px; color:var(--empty-col2); }

/* ── HOT NUMBERS ────────────────────────────────────────────────── */
#profnum-panel { background:transparent; border:1px solid var(--glass-border); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:13px 16px; margin-bottom:14px; display:none; }
#profnum-panel .pn-title { font-family:var(--font-mono); font-size:10px; color:var(--text2); letter-spacing:.1em; margin-bottom:9px; }
.pn-grid { display:grid; grid-template-columns:var(--pn-cols); gap:5px; }
.pn-tile { display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:8px; padding:var(--pn-pad,5px 3px); min-width:0; cursor:default; transition:transform .1s ease,box-shadow .1s ease; }
.pn-tile:hover { transform:scale(1.08); z-index:2; position:relative; }
.pn-tile .pn-num { font-family:var(--font-mono); font-size:var(--pn-font,14px); font-weight:700; }
.pn-tile .pn-pl, .pn-tile .pn-freq { font-family:var(--font-mono); font-size:9px; }

/* ── RECS PANEL ─────────────────────────────────────────────────── */
#recs-panel { background:transparent; border:1px solid var(--glass-border); border-top:none; border-radius:0 0 var(--radius) var(--radius); display:none; overflow:hidden; }
.recs-header { padding:10px 14px; background:rgba(0,255,100,.02); border-bottom:1px solid var(--glass-border); font-family:var(--font-mono); font-size:10px; color:var(--text2); line-height:1.6; }
.recs-subhead { color:var(--k-purple2); }
.rec-hdr { display:grid; grid-template-columns:var(--rec-cols); gap:clamp(4px,.6vw,7px); padding:clamp(5px,.7vw,7px) clamp(8px,1.2vw,14px); background:rgba(0,255,100,.02); border-bottom:1px solid var(--glass-border); font-size:10px; color:var(--text2); letter-spacing:.1em; font-family:var(--font-mono); }
.rec-row { display:grid; grid-template-columns:var(--rec-cols); gap:clamp(4px,.6vw,7px); padding:clamp(5px,.7vw,7px) clamp(8px,1.2vw,14px); border-bottom:1px solid rgba(0,255,100,.03); align-items:center; cursor:pointer; transition:background .12s; animation:recRowIn .3s ease both; opacity:0; }
.rec-row:hover { background:var(--rec-hover); }
.rec-row:last-child { border-bottom:none; }
.rec-row.top-val { background:var(--topval-bg); }
.rec-row.top-val:hover { background:var(--topval-hov); }
.rv { font-family:var(--font-mono); font-size:13px; }
.rec-score-bar { width:100%; height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-bottom:2px; }
.rec-score-fill { height:100%; border-radius:3px; }
.rec-score-lbl { font-family:var(--font-mono); font-size:10px; color:var(--text2); }
.recs-empty { text-align:center; padding:40px; font-family:var(--font-mono); font-size:11px; color:var(--empty-col); }

/* ── DETAIL MODAL ───────────────────────────────────────────────── */
#mbg { display:none; position:fixed; inset:0; background:var(--modal-bg); z-index:300; align-items:center; justify-content:center; padding:14px; backdrop-filter:blur(8px); }
#mbg.show { display:flex; }
#mod {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--k-purple);
  padding:clamp(14px,2vw,20px); max-width:540px; width:100%;
  box-shadow:0 0 50px rgba(145,43,255,.18),var(--glass-depth-shadow);
  position:relative; animation:slideUp .2s ease; max-height:90vh; overflow-y:auto;
}
.mcl { position:absolute; top:11px; right:13px; font-size:18px; color:var(--text2); cursor:pointer; background:none; border:none; transition:color .15s; font-family:var(--font-mono); }
.mcl:hover { color:var(--k-red); }
.mttl { font-family:var(--font-mono); color:var(--k-purple2); font-size:13px; letter-spacing:.12em; margin-bottom:3px; }
.msub { font-family:var(--font-mono); font-size:11px; color:var(--text2); margin-bottom:12px; }
.kb { display:grid; grid-template-columns:var(--kb-cols); gap:3px; margin-bottom:12px; }
.kt { aspect-ratio:1; border-radius:5px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:clamp(9px,1.1vw,11px); font-weight:700; border:1.5px solid transparent; position:relative; }
.kt.n { background:var(--bg3); border-color:var(--border); color:var(--border); }
.kt.s { color:#fff; }
.kt.s::after { content:''; position:absolute; inset:0; border-radius:4px; background:inherit; filter:blur(5px); opacity:.25; z-index:-1; }
.mst { display:grid; grid-template-columns:var(--mst-cols); gap:7px; margin-bottom:10px; }
.msc { border-radius:8px; padding:clamp(5px,.7vw,7px) clamp(7px,1vw,10px); text-align:center; background:var(--bg3); border:1px solid var(--border); }
.msc .ml { font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-bottom:2px; }
.msc .mv { font-family:var(--font-mono); font-size:13px; }
.mtp { background:var(--purple-bg); border:1px solid var(--k-purple); border-radius:8px; padding:8px 12px; font-family:var(--font-mono); font-size:11px; color:var(--purple-dim); line-height:1.6; margin-bottom:10px; }
.mtp b { color:var(--k-purple2); }
.mtp .gr { color:var(--k-green); }
#btn-analyze { width:100%; padding:9px; border-radius:8px; border:1px solid var(--k-green); background:var(--green-dim); color:var(--k-green); font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; cursor:pointer; transition:all .2s; backdrop-filter:blur(10px); }
#btn-analyze:hover { box-shadow:0 0 12px var(--green-glow); background:rgba(0,255,0,.14); }

/* ── CHART MODAL ────────────────────────────────────────────────── */
#cbg { display:none; position:fixed; inset:0; background:var(--modal-bg2); z-index:400; align-items:center; justify-content:center; padding:14px; backdrop-filter:blur(10px); }
#cbg.show { display:flex; }
#cmod {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--k-green);
  padding:18px; width:100%; max-width:800px; max-height:92vh; overflow-y:auto;
  position:relative; animation:slideUp .2s ease;
  box-shadow:0 0 40px rgba(0,255,0,.12),var(--glass-depth-shadow);
}
.ccl { position:absolute; top:11px; right:13px; font-size:18px; color:var(--text2); cursor:pointer; background:none; border:none; font-family:var(--font-mono); transition:color .15s; }
.ccl:hover { color:var(--k-red); }
.cttl { font-family:var(--font-mono); color:var(--k-green); font-size:13px; letter-spacing:.12em; margin-bottom:3px; }
.csub { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:12px; }
#chart-canvas { display:block; width:100%; border-radius:7px; background:var(--bg5); }
#cmod .chart-container { position:relative; }
#chart-wrap { position:absolute; inset:0; pointer-events:auto; }
.cstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:7px; margin-top:10px; }
.csc { border-radius:8px; padding:7px 9px; text-align:center; background:var(--glass-tint); border:1px solid var(--glass-border); backdrop-filter:blur(12px); }
.csc .cl2 { font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-bottom:2px; }
.csc .cv { font-family:var(--font-mono); font-size:14px; }
#chart-crosshair { position:absolute; top:0; bottom:0; width:1px; background:rgba(145,43,255,.65); pointer-events:none; display:none; box-shadow:0 0 6px rgba(145,43,255,.4); }
#chart-tooltip { position:absolute; pointer-events:none; display:none; background:var(--glass-tint); border:1px solid var(--k-purple); border-radius:7px; padding:7px 11px; font-family:var(--font-mono); font-size:11px; color:var(--fg); white-space:nowrap; box-shadow:var(--glass-depth-shadow); z-index:10; backdrop-filter:blur(20px); }
#chart-tooltip .ctt-round { color:var(--text2); font-size:9px; margin-bottom:2px; }
#chart-tooltip .ctt-pl { font-size:13px; }
#chart-tooltip .ctt-pl.pos { color:var(--k-green); }
#chart-tooltip .ctt-pl.neg { color:var(--k-red); }

/* ── PERFORMANCE ─────────────────────────────────────────────────── */
#lpbar,#lpwrap,#load-wrap { will-change:transform,opacity; }
.rrow,.rec-row { will-change:opacity,transform; contain:layout style; }
#tbody { content-visibility:auto; contain-intrinsic-size:0 600px; }
.skeleton { background:linear-gradient(90deg,var(--skl1) 25%,var(--skl2) 50%,var(--skl1) 75%); background-size:800px 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:3px; height:11px; display:inline-block; }
.rrow.preview-row { opacity:.72; }
#preview-banner { display:none; background:var(--purple-bg); border:1px solid var(--k-purple); border-radius:7px; padding:5px 13px; margin-bottom:8px; font-family:var(--font-mono); font-size:10px; color:var(--purple-dk); letter-spacing:.08em; }
#preview-banner.show { display:block; }

/* ── UTILITY COLORS ─────────────────────────────────────────────── */
.c-green  { color:var(--k-green)!important; }
.c-purple { color:var(--k-purple)!important; }
.c-red    { color:var(--k-red)!important; }
.c-gold   { color:var(--k-gold)!important; }
.c-dim    { color:var(--text2)!important; }

/* ── PROB TABLE ──────────────────────────────────────────────────── */
.prob-toggle-btn { background:rgba(145,43,255,.08); border:1px solid var(--k-purple); border-radius:5px; padding:3px 9px; cursor:pointer; font-family:var(--font-mono); font-size:10px; color:var(--k-purple2); transition:all .15s; margin-left:8px; vertical-align:middle; }
.prob-toggle-btn:hover { background:rgba(145,43,255,.2); box-shadow:0 0 8px var(--k-purple); }
.prob-toggle-btn .prob-arr { display:inline-block; transition:transform .28s cubic-bezier(.4,0,.2,1); }
#prob-collapsible { overflow:hidden; max-height:0; opacity:0; transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease; }
#prob-collapsible.open { max-height:700px; opacity:1; }
.pt-wrap { overflow-x:auto; margin-bottom:16px; -webkit-overflow-scrolling:touch; }
.pt-mode-btns { display:flex; gap:5px; margin-bottom:10px; flex-wrap:wrap; }
.pt-tbl { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:11px; min-width:600px; }
.pt-tbl th { background:var(--bg3); color:var(--text2); padding:6px 8px; border:1px solid var(--border); letter-spacing:.08em; font-size:10px; text-align:center; }
.pt-tbl td { padding:5px 8px; border:1px solid var(--bg3); text-align:center; transition:background .1s; }
.pt-tbl tr:hover td { background:var(--pt-hover); }
.pt-tbl .pay-k { color:var(--text2); font-size:10px; }
.pt-zero { color:var(--border); } .pt-low { color:var(--text2); } .pt-mid { color:var(--k-gold); } .pt-high { color:#ff8800; } .pt-max { color:#ff4444; font-weight:700; }
.pt-mode-btns .tb.ay { border-color:#ffd700; background:rgba(255,215,0,.07); color:#ffd700; }
.pt-mode-btns .tb.ao { border-color:#ff8c00; background:rgba(255,140,0,.07); color:#ff8c00; }
.pt-mode-btns .tb.pt-sel { opacity:1; filter:brightness(1.3); box-shadow:0 0 14px currentColor; }
.pt-tbl-anim { animation:ptTableIn .28s cubic-bezier(.4,0,.2,1); }
.pt-tbl tr td,.pt-tbl tr th { transition:background .15s; }
.pt-tbl td.hov { background:rgba(145,43,255,.10)!important; transition:background .05s; }

/* ── PROB CHART ──────────────────────────────────────────────────── */
.prob-k-pills { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.prob-k-label { font-family:var(--font-mono); font-size:10px; color:var(--text2); letter-spacing:.08em; margin-right:4px; }
.pk-pill { font-family:var(--font-mono); font-size:11px; padding:4px 12px; border-radius:20px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text2); transition:all .18s; letter-spacing:.06em; }
.pk-pill:hover { border-color:var(--k-purple2); color:var(--k-purple2); }
.pk-pill.active { border-color:var(--k-purple); background:rgba(145,43,255,.12); color:var(--k-purple2); box-shadow:0 0 7px rgba(145,43,255,.25); }
.prob-chart-wrap { position:relative; background:var(--bg5); border:1px solid var(--glass-border); border-radius:var(--radius); padding:20px 16px 36px; margin-bottom:10px; min-height:180px; overflow:visible; }
.prob-bars { display:flex; align-items:flex-end; gap:4px; height:160px; justify-content:space-around; }
.prob-bar-col { display:flex; flex-direction:column; align-items:center; flex:1; cursor:pointer; position:relative; }
.prob-bar-inner { width:100%; border-radius:4px 4px 0 0; min-height:3px; transition:height .4s cubic-bezier(.4,0,.2,1),opacity .15s,filter .15s; position:relative; overflow:hidden; }
.prob-bar-inner::after { content:''; position:absolute; top:0; left:0; right:0; height:30%; background:rgba(255,255,255,.12); border-radius:4px 4px 0 0; }
.prob-bar-col:hover .prob-bar-inner { filter:brightness(1.4); opacity:1!important; }
.prob-bar-col:hover .prob-bar-inner::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.08); animation:barShimmer .6s ease; }
.prob-bar-lbl { font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-top:5px; text-align:center; white-space:nowrap; }
.prob-bar-pct { font-family:var(--font-mono); font-size:8px; color:var(--text3); margin-top:2px; }
.prob-y-axis { position:absolute; left:0; top:20px; bottom:36px; width:38px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.prob-y-tick { font-family:var(--font-mono); font-size:8px; color:var(--border2); text-align:right; padding-right:6px; }
.prob-tooltip { position:fixed; pointer-events:none; display:none; z-index:9999; background:var(--glass-tint); border:1px solid var(--k-purple); border-radius:9px; padding:10px 14px; font-family:var(--font-mono); font-size:11px; color:var(--fg); white-space:nowrap; box-shadow:var(--glass-depth-shadow); backdrop-filter:blur(20px); }
.prob-tooltip .ptt-hits { color:var(--k-purple2); font-size:13px; margin-bottom:4px; }
.prob-tooltip .ptt-pct { color:var(--k-green); font-size:16px; font-weight:700; margin-bottom:2px; }
.prob-tooltip .ptt-exp { color:var(--text2); font-size:10px; }
.prob-tooltip .ptt-meaning { color:var(--k-gold); font-size:10px; margin-top:4px; max-width:200px; white-space:normal; line-height:1.4; }
.prob-chart-legend { display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-bottom:14px; }
.pcl-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }
.prob-bar-inner.anim { transform-origin:bottom; animation:barGrow .4s cubic-bezier(.4,0,.2,1) both; }

/* ── DATA SOURCE TABS ───────────────────────────────────────────── */
.ds-tabs { display:flex; gap:0; background:var(--glass-tint); border:1px solid var(--glass-border); border-radius:9px; overflow:hidden; margin-bottom:14px; backdrop-filter:blur(12px); }
.ds-tab { flex:1; padding:9px 12px; font-family:var(--font-mono); font-size:11px; color:var(--text2); background:transparent; border:none; cursor:pointer; letter-spacing:.07em; transition:all .2s; text-align:center; }
.ds-tab:not(:last-child) { border-right:1px solid var(--glass-border); }
.ds-tab.active { background:var(--green-dim); color:var(--k-green); }
.ds-tab:hover:not(.active) { background:rgba(0,255,100,.04); color:var(--fg); }
.ds-tab.active.seed-tab { background:rgba(145,43,255,.10); color:var(--k-purple2); }
.ds-tab.active.both-tab { background:rgba(255,215,0,.06); color:var(--k-gold); }

/* ── SEED PANEL ──────────────────────────────────────────────────── */
#seed-panel { background:var(--glass-tint); border:1px solid var(--glass-border); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); }
.sp-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sp-field { flex:1; min-width:160px; }
.sp-field label { font-family:var(--font-mono); font-size:9px; color:var(--text2); display:block; letter-spacing:.09em; margin-bottom:4px; }
.sp-field input { width:100%; background:rgba(0,20,12,.5); border:1px solid var(--glass-border); border-radius:7px; padding:7px 10px; font-family:var(--font-mono); font-size:12px; color:var(--k-green); outline:none; box-sizing:border-box; transition:border-color .15s; letter-spacing:.03em; }
.sp-field input:focus { border-color:var(--k-green); box-shadow:0 0 8px var(--green-glow); }
.sp-field input.invalid { border-color:var(--k-red); }
.sp-field input.valid { border-color:var(--k-green2); }
.sp-hint { font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-top:3px; line-height:1.5; }
.sp-hint.warn { color:var(--k-gold); }
.sp-hint.err { color:var(--k-red); }
.sp-seed-note { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px;
  background:rgba(145,43,255,.06); border:1px solid rgba(145,43,255,.2); border-radius:8px;
  padding:8px 11px; font-family:var(--font-data); font-size:11px; color:var(--text2); line-height:1.6; }
.sp-seed-icon { color:var(--k-purple2); font-size:13px; flex-shrink:0; margin-top:1px; }
.sp-seed-note b { color:var(--k-green); font-weight:600; }
.sp-seed-note em { color:var(--text3); font-style:normal; }
.sp-nonce-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.sp-nonce-row .sp-field { flex:1; min-width:120px; }
.sp-gen-btn { font-family:var(--font-mono); font-size:11px; color:var(--k-green); background:var(--green-dim); border:1px solid var(--k-green); border-radius:7px; padding:8px 16px; cursor:pointer; letter-spacing:.08em; white-space:nowrap; transition:all .18s; align-self:flex-end; }
.sp-gen-btn:hover { background:rgba(0,255,0,.16); box-shadow:0 0 14px var(--green-glow); }
.sp-gen-btn:disabled { opacity:.35; cursor:default; pointer-events:none; }
.sp-status { font-family:var(--font-mono); font-size:10px; color:var(--text3); padding:8px 11px; background:var(--glass-tint); border:1px solid var(--glass-border); border-radius:6px; line-height:1.7; display:none; }
.sp-status.show { display:block; }
.sp-status .sp-ok { color:var(--k-green); } .sp-status .sp-warn { color:var(--k-gold); } .sp-status .sp-err { color:var(--k-red); }
.sp-nonce-info { font-family:var(--font-mono); font-size:9px; color:var(--text2); margin-top:4px; }
.sp-progress-wrap { margin-top:10px; display:none; }
.sp-progress-wrap.show { display:block; }
.sp-prog-bar-bg { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.sp-prog-bar { height:100%; background:var(--k-green); width:0%; transition:width .1s; border-radius:2px; }
.sp-prog-lbl { font-family:var(--font-mono); font-size:9px; color:var(--text3); margin-top:4px; }

/* ── NONCE RANGE MODAL ──────────────────────────────────────────── */
#nrmbg { display:none; position:fixed; inset:0; background:rgba(4,10,16,.90); z-index:900; align-items:center; justify-content:center; padding:14px; backdrop-filter:blur(8px); }
#nrmbg.show { display:flex; animation:fadeIn .2s ease; }
#nrm { background:var(--glass-tint); border:1px solid var(--k-green); border-radius:var(--radius); padding:22px 26px 20px; max-width:480px; width:100%; box-shadow:0 0 40px rgba(0,255,0,.12),var(--glass-depth-shadow); backdrop-filter:blur(var(--glass-blur)); }
.nrm-title { font-family:var(--font-mono); font-size:13px; color:var(--k-green); letter-spacing:.14em; margin-bottom:2px; }
.nrm-sub { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:14px; }
.nrm-stats { font-family:var(--font-mono); font-size:11px; color:var(--text3); background:rgba(0,20,12,.4); border:1px solid var(--glass-border); border-radius:7px; padding:9px 13px; margin-bottom:16px; line-height:1.9; }
.nrm-stats b { color:var(--k-green); }
.nrm-fields { display:flex; gap:12px; align-items:flex-end; margin-bottom:16px; flex-wrap:wrap; }
.nrm-field { flex:1; min-width:120px; }
.nrm-field label { font-family:var(--font-mono); font-size:9px; color:var(--text2); display:block; letter-spacing:.08em; margin-bottom:4px; }
.nrm-field input { width:100%; background:rgba(0,20,12,.5); border:1px solid var(--glass-border); border-radius:6px; padding:7px 9px; font-family:var(--font-mono); font-size:13px; color:var(--k-green); outline:none; box-sizing:border-box; transition:border-color .15s; }
.nrm-field input:focus { border-color:var(--k-green); }
.nrm-sep { font-family:var(--font-mono); font-size:20px; color:var(--border2); padding-bottom:10px; }
.nrm-btns { display:flex; gap:10px; }
.nrm-confirm { flex:1; background:var(--green-dim); border:1px solid var(--k-green); border-radius:7px; padding:10px; font-family:var(--font-mono); font-size:12px; color:var(--k-green); cursor:pointer; letter-spacing:.08em; transition:all .15s; }
.nrm-confirm:hover { background:rgba(0,255,0,.16); box-shadow:0 0 14px var(--green-glow); }
.nrm-all { background:transparent; border:1px solid var(--glass-border); border-radius:7px; padding:10px 14px; font-family:var(--font-mono); font-size:12px; color:var(--text2); cursor:pointer; transition:all .15s; }
.nrm-all:hover { border-color:var(--text3); color:var(--fg); }

/* ── CONSOLE PANEL ──────────────────────────────────────────────── */
#console-panel { display:none; background:var(--bg5); border:1px solid var(--glass-border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; font-family:var(--font-mono); width:100%; box-sizing:border-box; min-width:0; }
#console-panel.visible { display:block; }
#console-header { display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--glass-tint); border-bottom:1px solid var(--glass-border); cursor:pointer; user-select:none; transition:background .12s; height:32px; box-sizing:border-box; flex-shrink:0; }
#console-header:hover { background:rgba(0,255,100,.04); }
#console-title { font-size:10px; color:var(--text2); letter-spacing:.1em; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#console-status-badge { font-size:9px; padding:2px 7px; border-radius:10px; background:rgba(0,255,0,.08); border:1px solid var(--k-green2); color:var(--k-green); letter-spacing:.06em; flex-shrink:0; }
#console-status-badge.running { animation:consoleBadgePulse 1.2s ease-in-out infinite; }
#console-toggle-arrow { font-size:10px; color:var(--text3); transition:transform .22s; flex-shrink:0; }
#console-toggle-arrow.collapsed { transform:rotate(-90deg); }
#console-body { display:flex; flex-direction:row; height:192px; overflow:hidden; transition:height .35s cubic-bezier(.4,0,.2,1),opacity .35s; box-sizing:border-box; }
#console-body.collapsed { height:0!important; opacity:0; pointer-events:none; }
#console-left { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; padding:4px 0; }
#console-left::-webkit-scrollbar { width:3px; }
#console-left::-webkit-scrollbar-track { background:transparent; }
#console-left::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
.console-line { display:flex; gap:6px; padding:1px 10px; font-size:9.5px; line-height:1.7; border-left:2px solid transparent; }
.console-line.info { border-left-color:var(--k-green2); }
.console-line.warn { border-left-color:var(--k-gold); background:rgba(255,215,0,.02); }
.console-line.done { border-left-color:var(--k-purple); }
.console-line.event { border-left-color:var(--border2); }
.cl-time { color:var(--border2); flex-shrink:0; min-width:42px; font-size:8.5px; }
.cl-tag { color:var(--k-green); flex-shrink:0; min-width:72px; font-size:9px; }
.cl-tag.warn { color:var(--k-gold); } .cl-tag.done { color:var(--k-purple2); }
.cl-msg { color:var(--text2); word-break:break-all; font-size:9px; }
#console-right { flex:1; min-width:0; display:flex; flex-direction:column; padding:8px 8px 6px; gap:5px; box-sizing:border-box; overflow:hidden; border-left:1px solid var(--glass-border); }
#console-graph-title { font-size:9px; color:var(--text3); letter-spacing:.1em; flex-shrink:0; }
#console-res-graph { display:block; width:100%; height:110px; border-radius:5px; background:var(--bg2); flex-shrink:0; }
#console-graph-legend { display:flex; gap:8px; flex-shrink:0; flex-wrap:nowrap; }
.cgl-item { font-size:8px; color:var(--text2); display:flex; align-items:center; gap:3px; }
.cgl-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
#console-res-crosshair { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.2); pointer-events:none; display:none; }
#console-res-tooltip { position:fixed; pointer-events:none; display:none; z-index:9998; background:var(--glass-tint); border:1px solid var(--glass-border); border-radius:7px; padding:7px 11px; font-family:var(--font-mono); font-size:10px; color:var(--fg); white-space:nowrap; box-shadow:var(--glass-depth-shadow); backdrop-filter:blur(20px); }
#console-res-tooltip .rt-row { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
#console-res-tooltip .rt-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
#console-res-tooltip .rt-val { font-size:12px; font-weight:700; }
#console-res-tooltip .rt-lbl { color:var(--text2); font-size:9px; }
#console-expand-btn { display:none; font-family:var(--font-mono); font-size:9px; color:var(--k-purple2); border:1px solid var(--k-purple); background:rgba(145,43,255,.07); border-radius:5px; padding:3px 9px; cursor:pointer; letter-spacing:.06em; transition:all .15s; margin-bottom:8px; }
#console-expand-btn:hover { background:rgba(145,43,255,.18); box-shadow:0 0 8px rgba(145,43,255,.35); }
#console-expand-btn.pulse { animation:expandBtnPulse .9s ease-in-out 6; }

/* ── RECS FILTER BAR ────────────────────────────────────────────── */
#recs-filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 14px; background:rgba(0,255,100,.02); border-bottom:1px solid var(--glass-border); font-family:var(--font-mono); font-size:10px; }
#recs-filter-bar.hidden { display:none; }
.rf-label { color:var(--text3); letter-spacing:.08em; font-size:9px; flex-shrink:0; }
.rf-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rf-pill { padding:3px 9px; border-radius:12px; cursor:pointer; border:1px solid var(--glass-border); background:transparent; color:var(--text2); font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; transition:all .14s; }
.rf-pill:hover { border-color:var(--k-purple2); color:var(--k-purple2); }
.rf-pill.active { border-color:var(--k-purple); background:rgba(145,43,255,.12); color:var(--k-purple2); }
.rf-sep { width:1px; height:20px; background:var(--glass-border); flex-shrink:0; }
.rf-slider-wrap { display:flex; align-items:center; gap:6px; }
.rf-slider { -webkit-appearance:none; appearance:none; width:90px; height:4px; border-radius:2px; background:var(--border); outline:none; cursor:pointer; }
.rf-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--k-purple2); cursor:pointer; border:2px solid var(--bg); }
.rf-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--k-purple2); cursor:pointer; border:2px solid var(--bg); }
.rf-val { color:var(--k-purple2); min-width:32px; text-align:right; font-size:9px; }
#recs-filter-toggle { font-family:var(--font-mono); font-size:9px; color:var(--text2); border:1px solid var(--glass-border); background:transparent; border-radius:5px; padding:3px 9px; cursor:pointer; transition:all .14s; letter-spacing:.06em; }
#recs-filter-toggle:hover { border-color:var(--k-purple2); color:var(--k-purple2); }
#recs-filter-toggle.active { border-color:var(--k-purple); color:var(--k-purple2); background:rgba(145,43,255,.08); }
#recs-filter-count { font-size:9px; color:var(--text3); margin-left:auto; letter-spacing:.06em; }

/* ss warn / k badge */
.ss-warn { display:inline-block; font-family:var(--font-mono); font-size:9px; color:var(--k-gold); opacity:.7; border:1px solid var(--k-gold); border-radius:3px; padding:1px 4px; vertical-align:middle; margin-left:3px; }
.k-badge { font-family:var(--font-mono); font-size:9px; font-weight:700; padding:1px 4px; border-radius:3px; border:1px solid; margin-right:3px; vertical-align:middle; }

/* ── WELCOME SCREEN ─────────────────────────────────────────────── */
#welcome-screen {
  position:fixed; inset:0; z-index:9000;
  background:var(--bg5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
#welcome-screen.hiding { animation:wsFadeOut .6s ease forwards; }
.ws-logo {
  width:90px; height:90px; border-radius:24px; flex-shrink:0; overflow:hidden;
  border:2px solid rgba(0,200,100,.5);
  animation:logoGlow 3s ease-in-out infinite; margin-bottom:20px;
  box-shadow:0 0 40px rgba(0,200,100,.35);
  backdrop-filter:blur(12px); background:rgba(0,20,10,.7);
}
.ws-logo svg { width:100%; height:100%; }
.ws-title {
  font-family:'Syne', sans-serif; font-weight:800; font-size:clamp(22px,5vw,32px);
  background:linear-gradient(105deg,var(--k-green) 0%,#44ffbb 30%,var(--k-purple2) 55%,#00ccee 80%,var(--k-green) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:card-hue-ring 5s ease-in-out infinite;
  letter-spacing:.12em; text-align:center; margin-bottom:4px;
}
.ws-subtitle { font-family:var(--font-mono); font-size:11px; color:var(--text2); letter-spacing:.12em; text-align:center; margin-bottom:32px; }
.ws-card {
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  background:var(--glass-tint); border:1px solid var(--glass-border);
  box-shadow:var(--glass-depth-shadow);
  max-width:560px; width:100%; padding:22px 26px; margin-bottom:14px;
}
.ws-card-title { font-family:var(--font-mono); font-size:11px; color:var(--text2); letter-spacing:.12em; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.ws-card-title span { flex:1; height:1px; background:var(--glass-border); }
.ws-card p { font-family:var(--font-data); font-size:15px; color:var(--fg); line-height:1.7; margin:0 0 10px; }
.ws-card p:last-child { margin:0; }
.ws-card p b { color:var(--k-red); }
.ws-card.fallacy-card { border-color:rgba(255,200,0,.3); }
.ws-card.fallacy-card .ws-card-title { color:var(--k-gold); }
.ws-card.legal-card { border-color:var(--glass-border); }
.ws-accept-btn {
  max-width:560px; width:100%; padding:15px;
  background:var(--green-dim); border:1px solid var(--k-green);
  border-radius:var(--radius);
  font-family:var(--font-mono); font-size:13px; color:var(--k-green);
  cursor:pointer; letter-spacing:.12em; text-align:center;
  transition:all .2s; box-shadow:0 0 20px rgba(0,255,0,.08);
  backdrop-filter:blur(12px);
}
.ws-accept-btn:hover { background:rgba(0,255,0,.15); box-shadow:0 0 30px var(--green-glow); transform:translateY(-1px); }
.ws-scroll-hint { font-family:var(--font-mono); font-size:9px; color:var(--border2); margin-top:10px; letter-spacing:.08em; }
.ws-scan-bar { position:fixed; left:0; right:0; height:3px; z-index:9500; background:linear-gradient(90deg,transparent,var(--k-green),var(--k-purple),var(--k-green),transparent); box-shadow:0 0 20px var(--green-glow),0 0 40px rgba(145,43,255,.35); pointer-events:none; display:none; }
.ws-scan-bar.running { display:block; animation:wsRevealScan .7s cubic-bezier(.4,0,.2,1) forwards; }

/* ── LOG POPUP ───────────────────────────────────────────────────── */
#log-popup-bg { position:fixed; inset:0; z-index:2000; background:rgba(4,10,16,.90); display:none; align-items:center; justify-content:center; padding:16px; }
#log-popup-bg.show { display:flex; animation:fadeIn .3s ease; }
#log-popup { background:var(--glass-tint); border:1px solid var(--k-green); border-radius:var(--radius); padding:22px 24px; max-width:500px; width:100%; box-shadow:0 0 40px rgba(0,255,0,.15),var(--glass-depth-shadow); position:relative; backdrop-filter:blur(var(--glass-blur)); }
.lp-icon { font-size:22px; margin-bottom:8px; }
.lp-title { font-family:var(--font-mono); font-size:14px; color:var(--k-green); letter-spacing:.14em; margin-bottom:4px; }
.lp-sub { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:16px; letter-spacing:.07em; }
.lp-stats { background:rgba(0,20,12,.4); border:1px solid var(--glass-border); border-radius:8px; padding:13px 15px; margin-bottom:16px; font-family:var(--font-mono); font-size:11px; color:var(--text3); line-height:2; }
.lp-stats .ls-key { color:var(--text2); min-width:80px; display:inline-block; }
.lp-stats .ls-val { color:var(--k-green); }
.lp-stats .ls-err { color:var(--k-red); }
.lp-stats .ls-warn { color:var(--k-gold); }
.lp-divider { height:1px; background:var(--glass-border); margin:12px 0; }
.lp-note { font-family:var(--font-mono); font-size:10px; color:var(--text2); margin-bottom:14px; line-height:1.6; }
.lp-btns { display:flex; gap:10px; }
.lp-dl { flex:1; background:var(--green-dim); border:1px solid var(--k-green); border-radius:7px; padding:10px 16px; font-family:var(--font-mono); font-size:12px; color:var(--k-green); cursor:pointer; letter-spacing:.08em; transition:all .15s; text-align:center; }
.lp-dl:hover { background:rgba(0,255,0,.16); box-shadow:0 0 14px var(--green-glow); }
.lp-skip { background:transparent; border:1px solid var(--glass-border); border-radius:7px; padding:10px 16px; font-family:var(--font-mono); font-size:12px; color:var(--text2); cursor:pointer; letter-spacing:.07em; transition:all .15s; }
.lp-skip:hover { border-color:var(--text3); color:var(--fg); }

/* ── OSS / SUPPORT MODAL ─────────────────────────────────────────── */
#oss-modal-bg { position:fixed; inset:0; z-index:3000; background:rgba(4,10,16,.90); display:none; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(8px); }
#support-modal-bg { position:fixed; inset:0; z-index:3000; background:rgba(4,10,16,.92); display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(8px); }

/* ── FOOTER ──────────────────────────────────────────────────────── */
.foot {
  margin-top:28px; padding:14px 18px 20px;
  border-top:1px solid var(--glass-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  font-family:var(--font-mono); font-size:9px;
  color:var(--text2); letter-spacing:.08em;
}
.oss-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:var(--k-purple2); border:1px solid var(--k-purple);
  background:rgba(145,43,255,.07); border-radius:7px;
  padding:7px 14px; cursor:pointer; transition:all .18s ease; white-space:nowrap;
  backdrop-filter:blur(10px);
}
.oss-btn:hover { background:rgba(145,43,255,.18); box-shadow:0 0 16px rgba(145,43,255,.4),0 0 32px rgba(145,43,255,.15); color:#fff; border-color:#b87dff; }
.oss-icon { font-size:13px; animation:ossPulse 2.2s ease-in-out infinite; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:1023px){
  :root{ --wrap-max:100%; }
  .rthd,.rrow{ grid-template-columns:30px 1fr 100px 85px 145px 90px; }
  .rec-hdr,.rec-row{ grid-template-columns:28px 44px 54px 1fr 80px 80px 86px; }
}
@media(max-width:767px){
  :root{ --col-m:none; --col-s:none; --rec-col-m:none; --kb-cols:repeat(8,1fr); --mst-cols:repeat(2,1fr); }
  .rthd,.rrow{ grid-template-columns:26px 1fr 86px 66px; }
  .rec-hdr,.rec-row{ grid-template-columns:24px 38px 1fr 74px 74px; }
  .tb{ min-block-size:34px; display:inline-flex; align-items:center; justify-content:center; }
  .tab{ min-block-size:36px; display:inline-flex; align-items:center; }
  .chip .cr{ padding:5px 7px; font-size:16px; }
  .hdr-sub{ display:none; }
  .main-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #mod,#cmod{ max-inline-size:100%; border-radius:var(--radius); }
  .sbar{ grid-template-columns:repeat(3,1fr); }
  #console-body{flex-direction:column!important;height:auto!important;max-height:240px}
  #console-body.collapsed{max-height:0!important;height:0!important}
  #console-left{max-height:100px;border-right:none!important;border-bottom:1px solid var(--glass-border);flex-shrink:0}
  #console-right{width:100%!important;flex-shrink:0}
  #console-res-graph{height:80px}
  .prob-chart-wrap{padding:14px 8px 28px}
  .prob-bars{height:110px}
}
@media(max-width:479px){
  :root{ --kb-cols:repeat(5,1fr); --pn-cols:repeat(5,1fr); }
  .rthd,.rrow{ grid-template-columns:22px 1fr 72px; }
  .rec-hdr,.rec-row{ grid-template-columns:20px 34px 1fr 68px; font-size:9px; }
  .sbar{ grid-template-columns:repeat(2,1fr)!important; }
  .bg-grid{display:none}
  #lpbar::before{display:none}
  #mod,#cmod{ max-inline-size:calc(100vw - 16px); max-block-size:92vh; overflow-y:auto; }
  .foot{ flex-direction:column; align-items:flex-start; gap:8px; }
  .oss-btn{ font-size:9px; padding:6px 12px; }
  .hdr{ margin-bottom:8px; }
  .hdr-icon{ width:32px; height:32px; }
}
@media(max-width:767px) and (orientation:landscape){
  .hdr-sub{ display:none; }
  .mst{ grid-template-columns:repeat(3,1fr); }
  .kb{ grid-template-columns:repeat(10,1fr); }
}
@media(max-width:599px){
  #console-body{flex-direction:column!important;height:auto!important;max-height:240px}
  #console-body.collapsed{max-height:0!important;height:0!important}
  #console-left{max-height:110px;border-right:none!important;border-bottom:1px solid var(--glass-border);flex-shrink:0}
  #console-right{width:100%!important;flex-shrink:0}
  #console-res-graph{height:80px}
}
@media(min-width:600px) and (max-width:699px){ #console-right{width:180px} }
@supports(padding:max(0px)){
  .wrap{
    padding-inline-start:max(var(--wrap-pad-inline),env(safe-area-inset-left));
    padding-inline-end:max(var(--wrap-pad-inline),env(safe-area-inset-right));
    padding-block-end:max(40px,env(safe-area-inset-bottom));
  }
  #gear-btn,#support-btn{ top:max(12px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); }
  #support-btn{ right:max(62px,calc(env(safe-area-inset-right) + 48px)); }
}
@container ctrl-panel (max-width:420px){ .cr2{ flex-direction:column; gap:8px; } .cg{ min-inline-size:unset; } }
#sbar-container{ container-type:inline-size; container-name:sbar-wrap; }
@container sbar-wrap (max-width:400px){ .sbar{ grid-template-columns:repeat(2,1fr); } }
.landscape-right{ container-type:inline-size; container-name:results-panel; }
@container results-panel (max-width:480px){ .rthd,.rrow{ grid-template-columns:22px 1fr 72px; } .col-m,.col-s{display:none;} }
#console-panel{ container-type:inline-size; container-name:console-wrap; }
@container console-wrap (max-width:560px){
  #console-body{flex-direction:column;height:auto!important;max-block-size:240px}
  #console-body.collapsed{max-block-size:0!important;height:0!important}
  #console-left{max-block-size:110px;border-inline-end:none;border-block-end:1px solid var(--glass-border);flex-shrink:0}
  #console-right{inline-size:100%;flex-shrink:0}
  #console-res-graph{height:80px}
}
#mod{ container-type:inline-size; container-name:modal-detail; }
@container modal-detail (max-width:380px){ .kb{grid-template-columns:repeat(5,1fr);} .mst{grid-template-columns:repeat(2,1fr);} }

/* ── TRANSITION (theme) ─────────────────────────────────────────── */
body,#load-wrap,.fl,.fl-hdr,.chip,.ctrl,.sc,.rthd,.rrow,.rec-hdr,.rec-row,
.tab,.main-tab,.howto,.rtbl,.dz,.pn-tile,.msc,#profnum-panel,#recs-panel,
.recs-header,.pt-tbl th,.pt-tbl td,.csc,#mod,#cmod,.mtp,.totbar,.err,.note,
.kbar-bg,.dbg,.rec-score-bar,.msc,.kt.n,.howto .rule-box {
  transition:background .22s,border-color .22s,color .22s,box-shadow .22s;
}

#bp-indicator{display:none}