/* /assets/css/firefights.css */
/* FFFF Field Intake - Coming-Soon palette match + immersive screen FX (CSP-safe) */
/* v40 - fixes: missing brace tail, boot overlay class alignment, adds drawer + submit overlay styles, z-index polish */

/* =========================
   Root variables
   ========================= */
:root{
  /* Base */
  --bg0:#050607;
  --bg1:#070a0c;
  --bg2:#0a0f12;

  /* Panels + lines (neutral/steel) */
  --panelA:rgba(10,12,14,0.88);
  --panelB:rgba(8,10,12,0.76);
  --panelC:rgba(12,14,16,0.56);

  --line:rgba(185,205,205,0.11);
  --line2:rgba(185,205,205,0.07);

  /* Text */
  --text:rgba(236,245,244,0.90);
  --muted:rgba(236,245,244,0.62);
  --muted2:rgba(236,245,244,0.46);

  /* Status accents */
  --ok:rgba(110,255,180,0.88);
  --okSoft:rgba(110,255,180,0.14);

  --warn:rgba(255,200,120,0.90);
  --warnSoft:rgba(255,200,120,0.12);

  --bad:rgba(255,110,110,0.90);
  --badSoft:rgba(255,110,110,0.12);

  /* UI highlight */
  --acc:rgba(110,255,180,0.62);
  --acc2:rgba(140,210,230,0.42);
  --accSoft:rgba(110,255,180,0.10);

  /* Typography */
  --radius:18px;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* PDA frame image */
  --frame-img:url("/assets/img/pda-frame.png");
  --frame-aspect:1183 / 720;

  /* Screen window bounds (percent of PDA image) */
  --screen-left: 6.73%;
  --screen-top:  7.92%;
  --screen-w:    83.75%;
  --screen-h:    76.95%;

  /* Inner inset inside glass (reduce so it fills like embedded screen) */
  --screen-inset: 0.16%;

  /* Micro-trim (expand slightly) */
  --trim-x: -0.18%;
  --trim-y: -0.18%;
  --trim-w: 0.68%;
  --trim-h: 0.38%;

  /* FX tuning */
  --glass-radius: clamp(14px, 1.2vw, 20px);
  --inner-radius: clamp(12px, 1.1vw, 18px);

  --scanline-opacity:0.20;
  --scanline-step:4px;

  --vignette-opacity:0.86;

  --noise-opacity:0.055;
  --flicker-opacity:0.055;

  --chroma-opacity:0.085;
  --phosphor-opacity:0.085;

  --side-w:290px;

  /* overlays */
  --overlay-bg: rgba(0,0,0,0.66);
  --overlay-card: rgba(0,0,0,0.66);

  /* UI scale (desktop) */
  --ui-scale: 0.9;
  /* Inner screen UI scale (lets content zoom out while frame zooms in) */
  --inner-ui-scale: 0.9;
  /* Frame overscan (let the bezel push outside viewport slightly) */
  --frame-scale: 1.20;
}

/* =========================
   Baseline
   ========================= */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg0);color:var(--text)}
body{
  font-family:var(--sans);
  overflow:hidden;
}

/* Intake readability tuning (public intake only) */
body.intake-public{
  --inner-ui-scale: 0.94;
  --scanline-opacity: 0.14;
  --noise-opacity: 0.03;
  --flicker-opacity: 0.03;
  --chroma-opacity: 0.05;
  --phosphor-opacity: 0.06;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.intake-public .h1{
  font-size:30px;
  letter-spacing:0.6px;
  text-shadow:none;
}
body.intake-public .sub{
  font-size:13px;
  color:rgba(236,245,244,0.74);
}
body.intake-public .kv{
  font-size:13px;
  line-height:1.65;
  color:rgba(236,245,244,0.84);
}
body.intake-public form label{
  font-size:12px;
  letter-spacing:0.9px;
  color:rgba(236,245,244,0.8);
}
body.intake-public input[type="text"],
body.intake-public input[type="number"],
body.intake-public textarea,
body.intake-public select{
  font-size:14px;
  line-height:1.45;
  color:rgba(236,245,244,0.96);
}
body.intake-public .help{
  font-size:12px;
  line-height:1.5;
  color:rgba(236,245,244,0.68);
}

/* lock scroll during boot (JS adds body.is-booting) */
body.is-booting{overflow:hidden}

/* Layout mode */
html[data-layout="FRAME"] body{overflow:hidden}
html[data-layout="PLAIN"] body{overflow:hidden}

/* clipboard offscreen helper (CSP-safe) */
.ffff-offscreen{
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* =========================
   Stage (grimy / industrial)
   ========================= */
.pda-stage{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 110% at 50% 55%, rgba(0,0,0,0.00) 42%, rgba(0,0,0,0.94) 100%),
    radial-gradient(72% 52% at 50% 10%, rgba(150,200,190,0.10), rgba(0,0,0,0.0) 58%),
    radial-gradient(60% 70% at 8% 52%, rgba(120,160,150,0.055), rgba(0,0,0,0.0) 62%),
    radial-gradient(60% 70% at 92% 54%, rgba(120,160,150,0.045), rgba(0,0,0,0.0) 64%),
    linear-gradient(to right, rgba(140,210,230,0.020) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(to bottom, rgba(140,210,230,0.014) 1px, rgba(0,0,0,0) 1px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.030) 0 1px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at 72% 64%, rgba(255,255,255,0.024) 0 1px, rgba(0,0,0,0) 2px),
    radial-gradient(circle at 44% 78%, rgba(255,255,255,0.020) 0 1px, rgba(0,0,0,0) 2px),
    linear-gradient(115deg, rgba(255,255,255,0.014), rgba(0,0,0,0) 28%, rgba(255,255,255,0.010) 55%, rgba(0,0,0,0) 78%),
    linear-gradient(to bottom, rgba(7,9,10,1), rgba(0,0,0,1));

  background-size:
    auto,
    auto,
    auto,
    auto,
    72px 72px,
    72px 72px,
    220px 220px,
    260px 260px,
    300px 300px,
    auto,
    auto;

  background-position:
    center,
    center,
    center,
    center,
    center,
    center,
    0 0,
    0 0,
    0 0,
    center,
    center;

  filter:saturate(0.90) contrast(1.05);
}

/* =========================
   PDA container
   ========================= */
.pda-frame{
  position:relative;
  user-select:none;
}
.pda-frame::after{
  content:"© Firefightsandfunnyfeelings.com · Hamsey was here.";
  position:absolute;
  right:18px;
  bottom:14px;
  color:rgba(236,245,244,0.14);
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  pointer-events:none;
  z-index:95;
}

/* FRAME mode */
html[data-layout="FRAME"] .pda-frame{
  width:min(100vw, calc(100svh * (var(--frame-aspect))));
  height:min(100svh, calc(100vw / (var(--frame-aspect))));
  aspect-ratio:var(--frame-aspect);
  background:var(--frame-img) center / contain no-repeat;
  transform: scale(calc(var(--ui-scale) * var(--frame-scale)));
  transform-origin: center;
}

/* PLAIN mode */
html[data-layout="PLAIN"] .pda-frame{
  width:100vw;
  height:100svh;
  background:none;
}

/* =========================
   Embedded PDA screen bed
   ========================= */
.pda-screen{
  position:absolute;
  overflow:hidden;
  border-radius:var(--glass-radius);

  background:
    linear-gradient(115deg,
      rgba(255,255,255,0.020) 0%,
      rgba(0,0,0,0.00) 22%,
      rgba(255,255,255,0.012) 42%,
      rgba(0,0,0,0.00) 62%,
      rgba(255,255,255,0.010) 100%
    ),
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 12px,
      rgba(0,0,0,0.10) 13px,
      rgba(0,0,0,0.00) 26px
    ),
    radial-gradient(120% 95% at 50% 8%,
      rgba(32,58,52,0.46) 0%,
      rgba(10,14,16,0.55) 35%,
      rgba(0,0,0,0.92) 78%
    ),
    radial-gradient(110% 95% at 50% 50%,
      rgba(0,0,0,0.00) 52%,
      rgba(0,0,0,0.70) 100%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0.96)
    );

  box-shadow:
    inset 0 0 0 1px rgba(165,205,190,0.14),
    inset 0 0 0 3px rgba(0,0,0,0.55),
    inset 0 16px 30px rgba(0,0,0,0.62),
    inset 0 -10px 24px rgba(0,0,0,0.55),
    0 18px 60px rgba(0,0,0,0.55);
}

/* Screen bounds in FRAME */
html[data-layout="FRAME"] .pda-screen{
  left:  calc(var(--screen-left) + var(--trim-x));
  top:   calc(var(--screen-top)  + var(--trim-y));
  width: calc(var(--screen-w)    + var(--trim-w));
  height:calc(var(--screen-h)    + var(--trim-h));
}

/* Screen fills viewport in PLAIN */
html[data-layout="PLAIN"] .pda-screen{
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
}

/* Inner app area */
.pda-screen-inner{
  position:absolute;
  inset:var(--screen-inset);
  border-radius:var(--inner-radius);
  overflow:hidden;

  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,0.92),
    inset 0 0 22px rgba(0,0,0,0.72);
}
html[data-layout="PLAIN"] .pda-screen-inner{
  inset:0.25%;
  border-radius:0;
  box-shadow:none;
}

/* =========================
   Mock window buttons + top bar hint
   ========================= */
.pda-screen-inner::before{
  content:"";
  position:absolute;
  left:8px;
  top:8px;
  width:9px;
  height:9px;
  border-radius:50%;
  background: rgba(255,110,110,0.92);
  box-shadow:
    13px 0 0 rgba(255,200,120,0.92),
    26px 0 0 rgba(110,255,180,0.92),
    0 0 0 1px rgba(0,0,0,0.55) inset,
    0 0 10px rgba(0,0,0,0.18);
  opacity:0.92;
  pointer-events:none;
  z-index:120;
}
.pda-screen-inner::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:40px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.62), rgba(0,0,0,0.00));
  pointer-events:none;
  z-index:110;
  opacity:0.82;
}

/* Keep header content from sitting under the mock buttons */
html[data-layout="FRAME"] .app-header{ padding-left:56px; }

/* =========================
   Immersive Screen FX Stack
   ========================= */

/* Scanlines + glass sheen */
.pda-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 18%, rgba(0,0,0,0.00) 70%, rgba(0,0,0,0.30)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,var(--scanline-opacity)) 0,
      rgba(255,255,255,var(--scanline-opacity)) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) var(--scanline-step)
    );
  mix-blend-mode:overlay;
  opacity:0.25;
}

/* Vignette */
.pda-screen::after{
  content:"";
  position:absolute;
  inset:-2%;
  pointer-events:none;
  background:radial-gradient(62% 56% at 50% 45%, rgba(0,0,0,0.00) 40%, rgba(0,0,0,var(--vignette-opacity)) 100%);
  opacity:0.82;
}

/* FX elements (place inside .pda-screen-inner or .pda-screen) */
.pda-noise,
.pda-flicker,
.pda-chroma,
.pda-phosphor{
  z-index:80;
}

/* Noise overlay element */
.pda-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("/assets/img/noise.png") center / 256px 256px repeat;
  opacity:var(--noise-opacity);
  mix-blend-mode:overlay;
  animation:noiseShift 1.8s steps(2,end) infinite;
}
@keyframes noiseShift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-2%,1%,0)}
  45%{transform:translate3d(2%,-1%,0)}
  70%{transform:translate3d(3%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Flicker element */
.pda-flicker{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 35%, rgba(0,0,0,0.05));
  opacity:var(--flicker-opacity);
  mix-blend-mode:overlay;
  animation:screenFlicker 5.2s infinite;
}
@keyframes screenFlicker{
  0%{opacity:0.02}
  6%{opacity:0.06}
  7%{opacity:0.01}
  12%{opacity:0.05}
  13%{opacity:0.02}
  36%{opacity:0.07}
  37%{opacity:0.02}
  64%{opacity:0.06}
  65%{opacity:0.02}
  86%{opacity:0.08}
  87%{opacity:0.02}
  100%{opacity:0.03}
}

/* Chroma element */
.pda-chroma{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--chroma-opacity);
  mix-blend-mode:screen;
  filter:blur(0.3px);
  background:radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,0.00) 55%, rgba(0,0,0,0.45) 100%);
}
.pda-chroma::before,
.pda-chroma::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,0,0,0.07), rgba(0,0,0,0.00) 40%, rgba(0,255,150,0.06));
}
.pda-chroma::before{transform:translate3d(-0.4px,0,0)}
.pda-chroma::after{transform:translate3d(0.4px,0,0)}

/* Phosphor element */
.pda-phosphor{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--phosphor-opacity);
  background:
    radial-gradient(55% 45% at 50% 45%, rgba(110,255,180,0.14), rgba(0,0,0,0.00) 65%),
    radial-gradient(65% 55% at 50% 55%, rgba(140,210,230,0.08), rgba(0,0,0,0.00) 70%);
  mix-blend-mode:screen;
  animation:phosphor 7.2s ease-in-out infinite;
}
@keyframes phosphor{
  0%{opacity:0.06}
  40%{opacity:0.12}
  60%{opacity:0.08}
  100%{opacity:0.06}
}

/* Perf tiers */
html[data-perf="LOW"] .pda-noise{display:none}
html[data-perf="LOW"] .pda-flicker{display:none}
html[data-perf="LOW"] .pda-chroma{display:none}
html[data-perf="LOW"] .pda-phosphor{display:none}
html[data-perf="LOW"] .pda-screen::before{opacity:0.18}
html[data-perf="LOW"] .pda-screen::after{opacity:0.68}
html[data-perf="LOW"] .app{backdrop-filter:none}
html[data-perf="LOW"] #steamHelp{backdrop-filter:none}

html[data-perf="MID"] .pda-noise{opacity:0.04}
html[data-perf="MID"] .pda-flicker{opacity:0.04}
html[data-perf="MID"] .pda-chroma{opacity:0.06}
html[data-perf="MID"] .pda-phosphor{opacity:0.08}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pda-noise{animation:none}
  .pda-flicker{animation:none}
  .pda-phosphor{animation:none}
}

/* Utility */
.hidden{display:none !important}

/* =========================
   App Shell
   ========================= */
.app{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  font-family:var(--mono);
  letter-spacing:0.2px;
  background:rgba(0,0,0,0.56);
  backdrop-filter:blur(4px);
  z-index:90;
}
html[data-layout="FRAME"] .app{
  transform:scale(var(--inner-ui-scale));
  transform-origin:top left;
  width:calc(100% / var(--inner-ui-scale));
  height:calc(100% / var(--inner-ui-scale));
}

/* =========================
   Boot overlay (matches JS: .show, .boot-off, .is-off)
   ========================= */
.boot{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(10,18,18,0.95), rgba(0,0,0,0.98)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  z-index:150;
  opacity:1;
  pointer-events:auto;
  transition:opacity 260ms ease;
}

/* robust off-states */
.boot.is-off{opacity:0; pointer-events:none;}
.boot.boot-off{opacity:0; pointer-events:none;}
.boot.show{opacity:1; pointer-events:auto;}

.boot-card{
  width:min(560px, 92%);
  border:1px solid rgba(190,220,218,0.14);
  border-radius:16px;
  background:rgba(0,0,0,0.62);
  box-shadow:0 18px 55px rgba(0,0,0,0.56);
  padding:14px 14px 12px;
}
.boot-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(190,220,218,0.10);
}
.boot-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:rgba(236,245,244,0.92);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.boot-sub{
  font-size:11px;
  color:rgba(236,245,244,0.56);
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.boot-line{
  margin-top:10px;
  font-size:12px;
  color:rgba(236,245,244,0.78);
  white-space:pre-wrap;
}
.boot-prog{
  margin-top:10px;
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(190,220,218,0.12);
  background:rgba(255,255,255,0.08);
  appearance:none;
  -webkit-appearance:none;
}
.boot-prog::-webkit-progress-bar{background:rgba(255,255,255,0.08)}
.boot-prog::-webkit-progress-value{
  background:linear-gradient(90deg, rgba(110,255,180,0.30), rgba(110,255,180,0.55), rgba(140,210,230,0.40));
}
.boot-prog::-moz-progress-bar{
  background:linear-gradient(90deg, rgba(110,255,180,0.30), rgba(110,255,180,0.55), rgba(140,210,230,0.40));
}

/* Header */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(190,220,218,0.10);
  background:linear-gradient(to bottom, rgba(0,0,0,0.70), rgba(0,0,0,0.18));
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:260px;
}
.logo{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(0,0,0,0.50);
  border:1px solid rgba(190,220,218,0.14);
  overflow:hidden;
  flex:0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.logo img{width:100%;height:100%;display:block;object-fit:cover}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-text strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.brand-text span{
  font-size:10px;
  color:rgba(236,245,244,0.55);
  text-transform:uppercase;
  letter-spacing:1.4px;
}

/* HUD */
.hud{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(190,220,218,0.13);
  background:rgba(0,0,0,0.42);
  color:rgba(236,245,244,0.78);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  user-select:none;
}
.pill b{color:rgba(236,245,244,0.94);font-weight:800}
.pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(110,255,180,0.72);
  box-shadow:0 0 10px rgba(110,255,180,0.16);
}
.pill.warn .dot{background:rgba(255,200,120,0.78);box-shadow:0 0 10px rgba(255,200,120,0.12)}
.pill.bad .dot{background:rgba(255,110,110,0.78);box-shadow:0 0 10px rgba(255,110,110,0.12)}
.pill.ok .dot{background:rgba(110,255,180,0.78);box-shadow:0 0 10px rgba(110,255,180,0.16)}
button.pill{cursor:pointer}
button.pill:hover{
  border-color:rgba(110,255,180,0.20);
  background:rgba(0,0,0,0.50);
}

/* Focus-visible */
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(110,255,180,0.44);
  outline-offset:2px;
}

/* Body grid */
.app-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: var(--side-w) 1fr;
  gap:12px;
  padding:12px 12px 10px;
}
html[data-layout="PLAIN"] .app-body{padding:16px}

/* Side panel */
.side{
  border:1px solid rgba(190,220,218,0.11);
  border-radius:18px;
  background:rgba(0,0,0,0.30);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.side-top{
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(190,220,218,0.10);
  background:
    radial-gradient(80% 90% at 15% 0%, rgba(110,255,180,0.08), rgba(0,0,0,0.00)),
    linear-gradient(to bottom, rgba(0,0,0,0.52), rgba(0,0,0,0.12));
}
.side-top .big{
  font-size:22px;
  letter-spacing:1px;
  margin:2px 0 6px;
  color:rgba(236,245,244,0.92);
}
.side-top .meta{
  font-size:11px;
  color:rgba(236,245,244,0.58);
}
.session-row{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}
.btn.mini{
  padding:4px 8px;
  font-size:11px;
  line-height:1;
  border-radius:8px;
}

/* Nav */
.nav{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav button{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(190,220,218,0.11);
  background:linear-gradient(to bottom, rgba(0,0,0,0.36), rgba(0,0,0,0.22));
  color:rgba(236,245,244,0.82);
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.0px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.nav button::before{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  height:100%;
  width:30%;
  background:linear-gradient(90deg, rgba(110,255,180,0.00), rgba(110,255,180,0.10), rgba(110,255,180,0.00));
  transform:skewX(-18deg);
  opacity:0;
}
.nav button:hover{
  border-color:rgba(110,255,180,0.18);
  background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.26));
}
.nav button:hover::before{
  opacity:1;
  animation:navSweep 1.2s ease both;
}
@keyframes navSweep{
  0%{transform:translateX(-40%) skewX(-18deg)}
  100%{transform:translateX(360%) skewX(-18deg)}
}
.nav button[aria-current="page"]{
  border-color:rgba(110,255,180,0.22);
  box-shadow:0 0 0 2px rgba(110,255,180,0.10);
  background:
    radial-gradient(120% 120% at 0% 50%, rgba(110,255,180,0.10), rgba(0,0,0,0.00)),
    linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0.24));
}

/* Mobile quick nav + drawer */
.nav-mini{
  display:none;
  padding:6px 10px 4px;
  border-bottom:1px solid rgba(190,220,218,0.10);
  background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.08));
}
.nav-mini-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
}
.nav-mini-row button{
  min-width:110px;
  white-space:nowrap;
  scroll-snap-align:start;
}
.nav-mini-more{
  min-width:70px;
  text-transform:uppercase;
}
.nav-mini-row::-webkit-scrollbar{height:8px}
.nav-mini-row::-webkit-scrollbar-thumb{
  background:rgba(110,255,180,0.18);
  border-radius:999px;
}
.nav-mini-row::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}

.nav-drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:999;
}
.nav-drawer.is-open{display:block}
.nav-drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
}
.nav-drawer-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4,6,8,0.96);
  border-top:1px solid rgba(190,220,218,0.18);
  border-radius:18px 18px 0 0;
  padding:12px 12px 18px;
  box-shadow:0 -10px 40px rgba(0,0,0,0.55);
}
.nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.nav-drawer-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  color:var(--muted);
}
.nav-drawer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.nav-drawer-grid button{
  padding:12px;
  text-align:center;
}

/* Side bottom */
.side-bottom{
  padding:10px 12px 12px;
  border-top:1px solid rgba(190,220,218,0.10);
  font-size:11px;
  color:rgba(236,245,244,0.60);
}
.side-bottom ul{
  margin:8px 0 0;
  padding-left:18px;
  color:rgba(236,245,244,0.62);
}

/* Main panel */
.main{
  border:1px solid rgba(190,220,218,0.11);
  border-radius:18px;
  background:rgba(0,0,0,0.24);
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* Main scroll */
.main-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:14px;
  scrollbar-width:thin;
  scrollbar-color: rgba(110,255,180,0.18) rgba(0,0,0,0.12);
}
.main-scroll::-webkit-scrollbar{width:10px}
.main-scroll::-webkit-scrollbar-thumb{
  background:rgba(110,255,180,0.14);
  border:2px solid rgba(0,0,0,0.34);
  border-radius:999px;
}
.main-scroll::-webkit-scrollbar-track{background:rgba(0,0,0,0.12)}

.tab{display:none}
.tab.active{display:block}

/* Titles */
.h1{
  font-size:28px;
  letter-spacing:1px;
  margin:0 0 6px;
  font-family:var(--mono);
  color:rgba(236,245,244,0.94);
  text-shadow: 0 0 18px rgba(110,255,180,0.06);
}
.sub{
  font-size:12px;
  color:rgba(236,245,244,0.62);
  margin:0 0 12px;
  font-family:var(--mono);
}

/* Cards */
.card{
  border:1px solid rgba(190,220,218,0.10);
  border-radius:16px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(110,255,180,0.05), rgba(0,0,0,0.00)),
    radial-gradient(120% 140% at 88% 0%, rgba(140,210,230,0.04), rgba(0,0,0,0.00)),
    rgba(0,0,0,0.22);
  padding:12px 12px 10px;
  margin:12px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.card h3{
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:rgba(236,245,244,0.72);
  font-family:var(--mono);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{
  font-size:12px;
  color:rgba(236,245,244,0.74);
  line-height:1.5;
  font-family:var(--mono);
}

/* Form */
form label{
  display:block;
  font-size:11px;
  color:rgba(236,245,244,0.70);
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin:12px 0 6px;
  font-family:var(--mono);
}
input[type="text"],
input[type="number"],
textarea,
select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(190,220,218,0.11);
  background:linear-gradient(to bottom, rgba(0,0,0,0.36), rgba(0,0,0,0.24));
  color:rgba(236,245,244,0.90);
  font-family:var(--mono);
  font-size:13px;
  outline:none;
}
textarea{min-height:140px;resize:vertical}
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(110,255,180,0.20);
  box-shadow:0 0 0 3px rgba(110,255,180,0.08);
}
.help{
  font-size:11px;
  color:rgba(236,245,244,0.55);
  margin-top:6px;
  font-family:var(--mono);
}
.err{
  display:none;
  margin-top:6px;
  font-size:11px;
  color:rgba(255,140,140,0.92);
  font-family:var(--mono);
}
.err.on{display:block}

/* Buttons */
.actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:14px;
  flex-wrap:wrap;
}
.btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(190,220,218,0.13);
  background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.30));
  color:rgba(236,245,244,0.84);
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn:hover{background:linear-gradient(to bottom, rgba(0,0,0,0.56), rgba(0,0,0,0.34))}
.btn.primary{
  border-color:rgba(110,255,180,0.18);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(110,255,180,0.12), rgba(0,0,0,0.00)),
    linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.30));
}
.btn.primary:hover{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(110,255,180,0.16), rgba(0,0,0,0.00)),
    linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.34));
}
.btn.danger{border-color:rgba(255,110,110,0.20)}
.btn:disabled{opacity:0.55;cursor:not-allowed}

.hr{height:1px;background:rgba(190,220,218,0.10);margin:14px 0}

/* Result banner */
.result{
  display:none;
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(190,220,218,0.12);
  background:rgba(0,0,0,0.26);
  padding:10px 12px;
  font-size:12px;
  color:rgba(236,245,244,0.78);
  font-family:var(--mono);
}
.result.on{display:block}
.result.ok{border-color:rgba(110,255,180,0.22)}
.result.bad{border-color:rgba(255,110,110,0.22)}
.result.warn{border-color:rgba(255,200,120,0.22)}

/* =========================
   Submit overlay (IDs expected by JS)
   ========================= */
#submitOverlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--overlay-bg);
  z-index:160;
}
#submitOverlay.on{display:flex}

#submitCard{
  width:min(680px, 92%);
  border-radius:18px;
  border:1px solid rgba(190,220,218,0.12);
  background:var(--overlay-card);
  padding:14px 14px 12px;
  box-shadow:0 18px 55px rgba(0,0,0,0.52);
}
#submitCard.error{
  border-color:rgba(255,110,110,0.32);
}
#submitTitle{
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-family:var(--mono);
  color:rgba(236,245,244,0.86);
}
#submitCard.error #submitTitle{
  color:rgba(255,150,150,0.92);
}
#submitMsg{
  margin:8px 0;
  color:rgba(236,245,244,0.72);
  font-size:12px;
  line-height:1.6;
  font-family:var(--mono);
}
#submitHint{
  margin:8px 0 0;
  font-size:11px;
  color:rgba(236,245,244,0.60);
  font-family:var(--mono);
}
#submitCaseBox{
  margin:10px 0 12px;
}
#submitCaseBox .case-id,
#submitCaseBox{
  border-radius:12px;
}
#submitCaseBox .case-id{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(190,220,218,0.18);
  background:rgba(0,0,0,0.28);
  font-family:var(--mono);
}
#submitCaseBox .label{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(236,245,244,0.62);
}
#submitCaseId{
  font-size:14px;
  color:rgba(236,245,244,0.92);
  font-family:var(--mono);
}

#submitOverlay .actions{
  justify-content:flex-end;
}

/* =========================
   Drawer (Steam help) - IDs expected by JS
   ========================= */
#steamHelp{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(520px, 92%);
  transform:translateX(105%);
  transition:transform 220ms ease, opacity 220ms ease;
  opacity:0;
  pointer-events:none;
  z-index:140;
  border-left:1px solid rgba(190,220,218,0.12);
  background:linear-gradient(to bottom, rgba(0,0,0,0.70), rgba(0,0,0,0.56));
  backdrop-filter: blur(6px);
  padding:14px;
  overflow:auto;
}
#steamHelp.on,
#steamHelp.open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
#steamHelp h3{
  margin:0 0 10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-family:var(--mono);
  color:rgba(236,245,244,0.78);
}
#steamHelp p,
#steamHelp li{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  color:rgba(236,245,244,0.72);
}
#steamHelp .actions{
  justify-content:flex-end;
}

/* Log buffer */
.term{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.55;
  color:rgba(236,245,244,0.72);
  white-space:pre-wrap;
  word-break:break-word;
}
.termBox{
  max-height:360px;
  overflow:auto;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(190,220,218,0.10);
  background:rgba(0,0,0,0.22);
}

/* Footer */
.app-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px 12px;
  border-top:1px solid rgba(190,220,218,0.10);
  background:linear-gradient(to top, rgba(0,0,0,0.64), rgba(0,0,0,0.06));
  font-size:11px;
  color:rgba(236,245,244,0.60);
  font-family:var(--mono);
  flex-wrap:wrap;
}
.app-footer__copyright{
  color:rgba(236,245,244,0.78);
  font-size:11px;
}
.ticker{
  display:flex;
  gap:10px;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
}
.ticker span{opacity:0.90}
.ticker i{display:inline-block;width:1px;height:10px;background:rgba(190,220,218,0.14)}

/* Responsive */
@media (max-width: 980px){
  :root{--ui-scale:0.97;--inner-ui-scale:0.9}
  .app-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .brand{min-width:auto}
  .hud{justify-content:flex-start}
  .app-body{grid-template-columns:1fr}
  .nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .nav button{text-align:center}
  .grid2{grid-template-columns:1fr}
  #steamHelp{width:min(640px, 96%)}
}
@media (max-width: 520px){
  :root{--ui-scale:1;--inner-ui-scale:0.9}
  .app-body{padding:10px}
  html[data-layout="PLAIN"] .app-body{padding:10px}
  .main-scroll{padding:12px}
  .h1{font-size:22px}
}

@media (max-width: 900px){
  html[data-layout="FRAME"] .pda-frame{
    width:100vw;
    height:100svh;
    background:none;
    transform: scale(1);
  }
  html[data-layout="FRAME"] .pda-screen{
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:0;
  }
  html[data-layout="FRAME"] .pda-screen-inner{
    border-radius:0;
  }
  html[data-layout="FRAME"] .pda-screen::before,
  html[data-layout="FRAME"] .pda-screen::after{
    border-radius:0;
  }
}

@media (max-width: 820px){
  .app-header{
    padding:10px 12px 6px;
  }
  .brand-text strong{font-size:14px}
  .brand-text span{font-size:11px}
  .hud{
    gap:6px;
    flex-wrap:wrap;
  }
  .hud .pill{font-size:11px}
  .app-body{
    padding:8px;
    gap:10px;
  }
  .side{
    position:sticky;
    top:0;
    z-index:2;
  }
  .side-top .big{font-size:18px}
  .nav{
    grid-template-columns:1fr;
  }
  .nav button{
    padding:10px 12px;
  }
  .main-scroll{
    padding:10px;
  }
}

@media (max-width: 680px){
  .app-body{
    grid-template-columns:1fr;
  }
  .side{display:none}
  .nav{display:none}
  .nav-mini{display:block}
  .main-scroll{
    padding:10px 8px 12px;
  }
}

/* Optional PLAIN hide */
html[data-plainhide="1"] .side{display:none}
html[data-plainhide="1"] .app-body{grid-template-columns:1fr}

/* Locked scale profile: Intake zoom-out 8% */
:root{
  --ui-scale: 0.92 !important;
  --inner-ui-scale: 0.92 !important;
}