/* ═══════════════════════════════════════════════════════════════════
   CyberAscii v3.0 — style.css
   Fixes: mobile overlap, aspect ratio side-effects in layout
   New:   mobile drawer, perf HUD, boot overlay, display modes,
          charset selector, fullscreen, toast, export row
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --bg-void:        #020507;
  --bg-deep:        #050c10;
  --bg-surface:     #0a1520;
  --bg-raised:      #0f1e2e;
  --bg-card:        #0d1a27;
  --bg-hover:       #132236;

  --green-bright:   #00ff41;
  --green-mid:      #00cc33;
  --green-dim:      #007a1f;
  --green-glow:     rgba(0,255,65,.15);
  --green-glow-md:  rgba(0,255,65,.30);

  --cyan:           #00d4ff;
  --amber:          #ffb000;
  --red:            #ff2d55;

  --text-primary:   #c8e6c9;
  --text-secondary: #4a7a55;
  --text-dim:       #2a4a33;

  --border:         rgba(0,255,65,.12);
  --border-mid:     rgba(0,255,65,.25);
  --border-bright:  rgba(0,255,65,.50);

  --font-mono:  'JetBrains Mono','Share Tech Mono','Courier New',monospace;
  --font-term:  'Share Tech Mono','JetBrains Mono',monospace;

  --radius:         4px;
  --radius-lg:      8px;
  --radius-xl:      14px;
  --shadow-card:    0 0 0 1px var(--border), 0 4px 24px rgba(0,0,0,.6);
  --shadow-glow:    0 0 16px var(--green-glow-md), 0 0 32px var(--green-glow);
  --t:              150ms ease;
  --t-md:           250ms ease;
  --t-slow:         400ms cubic-bezier(0.16,1,0.3,1);

  --header-h:       44px;
  --panel-w:        296px;   /* left panel width on desktop */
  --drawer-h:       78vh;    /* mobile drawer height */
}

/* ── Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family: var(--font-mono);
  background: var(--bg-void);
  color: var(--text-primary);
  height: 100dvh;        /* dynamic viewport height — mobile-safe */
  overflow: hidden;      /* shell manages its own scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ── CRT overlay ────────────────────────────────────────────────── */
.scanlines {
  pointer-events:none; position:fixed; inset:0; z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,
    rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);
  animation:scanline-drift 8s linear infinite;
}
.vignette {
  pointer-events:none; position:fixed; inset:0; z-index:9998;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.65) 100%);
}
@keyframes scanline-drift { from{background-position:0 0} to{background-position:0 -100px} }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar              { width:4px; height:4px; }
::-webkit-scrollbar-track        { background:var(--bg-deep); }
::-webkit-scrollbar-thumb        { background:var(--green-dim); border-radius:2px; }
::-webkit-scrollbar-thumb:hover  { background:var(--green-mid); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes blink       { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes pulse-glow  { 0%,100%{box-shadow:0 0 8px var(--green-glow)} 50%{box-shadow:var(--shadow-glow)} }
@keyframes fade-in     { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes slide-up    { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes flicker     { 0%,98%,100%{opacity:1} 99%{opacity:.85} }
@keyframes dot-bounce  { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes cam-ping    { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.4);opacity:0} }
@keyframes toast-in    { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes boot-type   { from{opacity:0} to{opacity:1} }

/* ── Typography ─────────────────────────────────────────────────── */
.section-label {
  font-family:var(--font-term); font-size:.68rem; letter-spacing:.15em;
  color:var(--text-secondary); text-transform:uppercase; user-select:none;
}
.panel-section-label {
  font-family:var(--font-term); font-size:.65rem; letter-spacing:.15em;
  color:var(--text-secondary); padding:.55rem 1rem .4rem;
  border-bottom:1px solid var(--border); user-select:none;
}
.control-hint {
  display:block; font-size:.58rem; color:var(--text-dim);
  letter-spacing:.04em; margin-top:.1rem;
}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  z-index:1000; display:flex; justify-content:space-between; align-items:center;
  padding:0 1.25rem;
  background:rgba(2,5,7,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  animation:flicker 6s ease-in-out infinite;
}
.header-logo {
  display:flex; align-items:baseline; gap:.15em;
  font-family:var(--font-term); font-size:1.1rem; letter-spacing:.08em; user-select:none;
}
.logo-bracket  { color:var(--green-dim); }
.logo-name     { color:var(--text-primary); }
.logo-accent   { color:var(--green-bright); text-shadow:0 0 8px var(--green-bright); }
.logo-version  { font-size:.56rem; color:var(--text-secondary); margin-left:.4em; }

.header-status { display:flex; align-items:center; gap:.55rem; font-size:.65rem; color:var(--text-secondary); letter-spacing:.1em; }
.status-dot    { width:6px; height:6px; border-radius:50%; background:var(--green-bright); box-shadow:0 0 6px var(--green-bright); animation:blink 2s ease-in-out infinite; flex-shrink:0; }
.status-sep    { color:var(--text-dim); }
.blink         { animation:blink 1.2s step-start infinite; color:var(--red); }

/* ── App shell — the layout container below the header ──────────── */
.app-shell {
  display:grid;
  grid-template-columns: var(--panel-w) 1fr;
  height:calc(100dvh - var(--header-h));
  margin-top:var(--header-h);
  overflow:hidden;   /* children manage their own scroll */
}

/* ── Left panel (sidebar on desktop, drawer on mobile) ───────────── */
.left-panel {
  background:var(--bg-card);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;   /* .panel-inner handles scroll */
  /* Desktop: static, not sticky — avoids stacking context issues */
}
.panel-inner {
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
}
.controls-scroll { flex:1; overflow-y:auto; padding:.75rem 1rem 2rem; }

/* Drawer handle bar (mobile only, hidden on desktop) */
.drawer-handle-bar { display:none; }

/* ── Mode tabs ──────────────────────────────────────────────────── */
.mode-tabs {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.mode-tab {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text-secondary); cursor:pointer; transition:all var(--t);
}
.mode-tab:hover  { color:var(--text-primary); background:var(--bg-hover); }
.mode-tab.active { color:var(--green-bright); border-bottom-color:var(--green-bright); background:rgba(0,255,65,.05); }
.tab-icon { width:13px; height:13px; flex-shrink:0; }

/* ── Upload zone ────────────────────────────────────────────────── */
#panelUpload, #panelCamera { padding:.65rem 1rem .5rem; }
.upload-zone {
  position:relative; border:1px dashed var(--border-mid); border-radius:var(--radius-lg);
  background:var(--bg-surface); padding:1.25rem .75rem; text-align:center; cursor:pointer;
  transition:all var(--t-md); overflow:hidden;
}
.upload-zone::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--green-glow) 0%,transparent 60%);
  opacity:0; transition:opacity var(--t-md); pointer-events:none;
}
.upload-zone:hover,.upload-zone:focus,.upload-zone.drag-over {
  border-color:var(--border-bright); background:var(--bg-raised); box-shadow:var(--shadow-glow); outline:none;
}
.upload-zone:hover::before,.upload-zone:focus::before,.upload-zone.drag-over::before { opacity:1; }
.upload-zone.drag-over { border-style:solid; }
input[type="file"] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.upload-icon  { width:32px; height:32px; margin:0 auto .5rem; color:var(--green-dim); transition:all var(--t-md); }
.upload-zone:hover .upload-icon,.upload-zone.drag-over .upload-icon { color:var(--green-bright); transform:translateY(-3px); filter:drop-shadow(0 0 6px var(--green-bright)); }
.upload-headline { font-size:.78rem; letter-spacing:.1em; color:var(--text-primary); margin-bottom:.25rem; }
.upload-or       { color:var(--text-secondary); }
.upload-cta      { color:var(--green-bright); }
.upload-sub      { font-size:.65rem; color:var(--text-secondary); letter-spacing:.06em; }
.upload-preview  { display:flex; align-items:center; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.upload-thumb    { max-height:72px; max-width:100px; border:1px solid var(--border-mid); border-radius:var(--radius); object-fit:contain; }
.upload-filename { display:block; font-size:.68rem; color:var(--green-bright); margin-bottom:.2rem; word-break:break-all; max-width:150px; }
.upload-filesize { display:block; font-size:.62rem; color:var(--text-secondary); }
.upload-error {
  margin-top:.4rem; padding:.4rem .65rem; border:1px solid var(--red);
  border-radius:var(--radius); background:rgba(255,45,85,.08);
  font-size:.68rem; color:var(--red); animation:fade-in .2s ease;
}

/* ── Camera zone ────────────────────────────────────────────────── */
.camera-zone {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--bg-surface); min-height:72px;
  display:flex; align-items:center; justify-content:center;
  padding:.9rem; margin-bottom:.65rem; position:relative; overflow:hidden;
}
.cam-idle { text-align:center; }
.cam-idle-icon { width:30px; height:30px; margin:0 auto .5rem; color:var(--green-dim); }
.cam-idle-title { font-size:.78rem; letter-spacing:.1em; color:var(--text-primary); margin-bottom:.25rem; }
.cam-live-row { display:flex; align-items:center; gap:.55rem; font-size:.68rem; letter-spacing:.1em; }
.cam-live-dot {
  position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--red); box-shadow:0 0 6px var(--red); flex-shrink:0;
}
.cam-live-dot::after {
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--red);
  animation:cam-ping 1.2s ease-out infinite;
}
.cam-live-label { color:var(--red); font-weight:700; }
.cam-fps-label  { color:var(--text-secondary); margin-left:auto; }
.cam-hidden     { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; top:0; left:0; }
.cam-error { text-align:center; font-size:.72rem; color:var(--red); }
.cam-error-glyph { font-size:1.4rem; display:block; margin-bottom:.25rem; }

.cam-btn-row   { display:flex; gap:.45rem; margin-bottom:.4rem; }
.btn-cam-start,.btn-cam-stop {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  padding:.45rem; border-radius:var(--radius); cursor:pointer; transition:all var(--t);
}
.btn-cam-start { background:rgba(0,255,65,.08); border:1px solid var(--border-bright); color:var(--green-bright); }
.btn-cam-start:hover { background:rgba(0,255,65,.18); box-shadow:var(--shadow-glow); }
.btn-cam-stop  { background:rgba(255,45,85,.1);  border:1px solid rgba(255,45,85,.4); color:var(--red); }
.btn-cam-stop:hover  { background:rgba(255,45,85,.2); }
.btn-capture {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; margin-top:.55rem; padding:.55rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.3);
  border-radius:var(--radius); color:var(--cyan); cursor:pointer; transition:all var(--t-md);
}
.btn-capture:hover:not(:disabled) { background:rgba(0,212,255,.18); box-shadow:0 0 14px rgba(0,212,255,.2); }
.btn-capture:disabled { opacity:.3; cursor:not-allowed; }

/* ── Shared controls ────────────────────────────────────────────── */
.control-group  { margin-bottom:.85rem; }
.control-label  { display:block; font-size:.66rem; letter-spacing:.1em; color:var(--text-secondary); margin-bottom:.3rem; user-select:none; }
.control-val    { color:var(--green-bright); }

.slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:2px; outline:none; cursor:pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--green-bright); border:2px solid var(--bg-deep);
  box-shadow:0 0 5px var(--green-bright); cursor:pointer; transition:transform var(--t);
}
.slider::-webkit-slider-thumb:hover { transform:scale(1.25); }
.slider::-moz-range-thumb {
  width:12px; height:12px; border-radius:50%; background:var(--green-bright);
  border:2px solid var(--bg-deep); cursor:pointer;
}

.btn-group {
  display:flex; gap:3px; flex-wrap:wrap;
}
.charset-group { gap:2px; }

.btn-toggle {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em;
  padding:.22rem .45rem; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-secondary); cursor:pointer; transition:all var(--t);
}
.btn-toggle:hover  { border-color:var(--border-mid); color:var(--text-primary); }
.btn-toggle.active { background:rgba(0,255,65,.1); border-color:var(--border-bright); color:var(--green-bright); box-shadow:0 0 6px var(--green-glow); }
.btn-toggle:focus-visible { outline:1px solid var(--green-bright); outline-offset:2px; }

.select-input {
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em;
  width:100%; padding:.38rem .65rem; background:var(--bg-raised);
  border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary);
  cursor:pointer; outline:none; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300cc33' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; padding-right:1.75rem;
}
.select-input:focus { border-color:var(--green-mid); box-shadow:0 0 0 2px var(--green-glow); }
.select-input option { background:var(--bg-surface); color:var(--text-primary); }

.control-divider { border:none; border-top:1px solid var(--border); margin:.7rem 0; }

.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; padding:.6rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  background:rgba(0,255,65,.09); border:1px solid var(--border-bright);
  border-radius:var(--radius); color:var(--green-bright); cursor:pointer;
  transition:all var(--t-md); position:relative; overflow:hidden;
  animation:pulse-glow 3s ease-in-out infinite;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,255,65,.1),transparent);
  transform:translateX(-100%); transition:transform .4s ease;
}
.btn-primary:hover:not(:disabled) { background:rgba(0,255,65,.18); box-shadow:var(--shadow-glow); animation:none; }
.btn-primary:hover::before { transform:translateX(100%); }
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { opacity:.33; cursor:not-allowed; animation:none; box-shadow:none; }
.btn-primary:focus-visible { outline:2px solid var(--green-bright); outline-offset:2px; }

/* Export row */
.export-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.35rem; margin-top:.4rem; }
.btn-export {
  display:flex; align-items:center; justify-content:center; gap:.3rem;
  padding:.4rem .3rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.07em;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-secondary); cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.btn-export:hover { border-color:var(--border-mid); color:var(--green-bright); }
.btn-export:disabled { opacity:.3; cursor:not-allowed; }
.btn-icon { width:13px; height:13px; flex-shrink:0; }

/* ── Right panel ────────────────────────────────────────────────── */
.right-panel {
  display:flex; flex-direction:column;
  background:var(--bg-deep);
  overflow-y:auto; overflow-x:hidden;
  /* Fixed height — parent manages it */
}

/* ── Preview panel ──────────────────────────────────────────────── */
.preview-panel {
  flex-shrink:0; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column;
  /* Height: try to fill 55% of right panel height on desktop */
  min-height:300px;
}

.preview-topbar {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .9rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.preview-label { margin-bottom:0; margin-right:auto; }

/* Display mode buttons */
.display-mode-group { display:flex; gap:2px; }
.btn-display {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em;
  padding:.2rem .42rem; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-secondary); cursor:pointer; transition:all var(--t);
}
.btn-display:hover  { border-color:var(--border-mid); color:var(--text-primary); }
.btn-display.active { background:rgba(0,255,65,.1); border-color:var(--border-bright); color:var(--green-bright); }

/* Topbar icon buttons */
.topbar-actions { display:flex; gap:3px; }
.topbar-btn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-secondary); cursor:pointer; transition:all var(--t); flex-shrink:0;
}
.topbar-btn svg { width:13px; height:13px; }
.topbar-btn:hover { border-color:var(--border-mid); color:var(--green-bright); }
.topbar-btn[aria-pressed="true"] { background:rgba(0,255,65,.1); border-color:var(--border-bright); color:var(--green-bright); }

/* ── Canvas wrap ────────────────────────────────────────────────── */
.canvas-wrap {
  flex:1; position:relative; background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;   /* clip canvas in FIT mode */
  padding:6px;
  min-height:200px;
}

/* FIT mode — canvas scales down to fit, never stretches, centered */
.canvas-wrap[data-display="fit"] #asciiCanvas {
  /* Dimensions set by JS fitCanvas() */
  display:block;
}

/* 1:1 mode — canvas at native pixel size, overflow scrolls */
.canvas-wrap[data-display="1to1"] {
  overflow:auto; align-items:flex-start; justify-content:flex-start;
}
.canvas-wrap[data-display="1to1"] #asciiCanvas {
  width:auto; height:auto;
  display:block;
}

/* FULL mode — the canvas wrap is promoted to fullscreen via JS/API */
.canvas-wrap.ascii-fullscreen {
  position:fixed; inset:0; z-index:2000; padding:0;
  background:#000;
}
.canvas-wrap.ascii-fullscreen #asciiCanvas {
  /* JS fitCanvas() re-runs and uses window dimensions */
}

.canvas-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; min-height:200px; gap:.65rem; color:var(--text-dim);
  font-size:.72rem; letter-spacing:.12em; user-select:none; text-align:center;
}
.placeholder-art { font-size:1.1rem; line-height:1.5; color:var(--bg-raised); }

#asciiCanvas {
  display:none; /* shown by JS after first render */
  image-rendering:pixelated;
}

/* ── Preview metabar ────────────────────────────────────────────── */
.preview-metabar {
  display:flex; justify-content:space-between; align-items:center;
  padding:.35rem .9rem; border-top:1px solid var(--border); flex-shrink:0;
  background:rgba(5,12,16,.6);
}
.preview-meta   { font-size:.6rem; color:var(--text-secondary); letter-spacing:.07em; }
.preview-charset{ font-size:.6rem; color:var(--green-dim); letter-spacing:.07em; }

/* ── Performance HUD overlay ────────────────────────────────────── */
.perf-hud {
  position:absolute; top:.5rem; right:.5rem; z-index:10;
  background:rgba(2,5,7,.88); backdrop-filter:blur(8px);
  border:1px solid var(--border-mid); border-radius:var(--radius);
  padding:.4rem .65rem; display:flex; flex-direction:column; gap:.15rem;
  animation:fade-in .2s ease;
}
.hud-item { display:flex; justify-content:space-between; gap:.8rem; }
.hud-key  { font-size:.58rem; color:var(--text-secondary); letter-spacing:.1em; }
.hud-val  { font-size:.58rem; color:var(--green-bright); font-family:var(--font-term); min-width:3rem; text-align:right; }

/* ── Boot overlay ───────────────────────────────────────────────── */
.boot-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(2,5,7,.97);
  display:flex; align-items:center; justify-content:center;
}
.boot-terminal {
  width:min(500px,90vw); padding:1.5rem 1.75rem;
  border:1px solid var(--border-mid); border-radius:var(--radius-lg);
  background:var(--bg-surface);
  box-shadow:0 0 60px var(--green-glow);
}
.boot-lines { display:flex; flex-direction:column; gap:.35rem; }
.boot-line {
  font-family:var(--font-term); font-size:.78rem; color:var(--text-secondary);
  letter-spacing:.06em; opacity:0; animation:boot-type .05s ease forwards;
}
.boot-line.ok   { color:var(--green-bright); }
.boot-line.warn { color:var(--amber); }
.boot-cursor {
  display:inline-block; color:var(--green-bright); font-family:var(--font-term);
  animation:blink .6s step-start infinite; margin-top:.5rem; font-size:.9rem;
}

/* ── Analysis section ───────────────────────────────────────────── */
.analysis-section {
  padding:.9rem; border-bottom:1px solid var(--border);
  background:var(--bg-card); animation:fade-in .4s ease;
}
.analysis-section .section-label { margin-bottom:.8rem; }
.analysis-pending { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; font-size:.72rem; color:var(--text-secondary); }
.terminal-prompt  { color:var(--green-bright); font-family:var(--font-term); }
.dots-loader { display:inline-flex; gap:3px; }
.dots-loader span { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--green-bright); animation:dot-bounce 1.4s ease-in-out infinite; }
.dots-loader span:nth-child(2) { animation-delay:.2s; }
.dots-loader span:nth-child(3) { animation-delay:.4s; }
.pending-text { letter-spacing:.1em; }

.result-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-bottom:.9rem; animation:fade-in .35s ease; }
.result-card  { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:.55rem; }
.rcard-label  { font-size:.56rem; letter-spacing:.12em; color:var(--text-secondary); margin-bottom:.22rem; }
.rcard-value  { font-size:.8rem; font-weight:700; color:var(--text-primary); letter-spacing:.05em; }

.threat-value[data-level="LOW"]      { color:var(--green-bright); }
.threat-value[data-level="MODERATE"] { color:var(--amber); }
.threat-value[data-level="HIGH"]     { color:var(--red); text-shadow:0 0 8px var(--red); }
.threat-value[data-level="CRITICAL"] { color:var(--red); text-shadow:0 0 12px var(--red); animation:blink .8s step-start infinite; }
.threat-value[data-level="UNKNOWN"]  { color:var(--cyan); }
.threat-value[data-level="ERROR"]    { color:var(--red); }

.result-body  { display:flex; flex-direction:column; gap:.7rem; animation:fade-in .5s ease; }
.result-key   { font-size:.56rem; letter-spacing:.12em; color:var(--text-secondary); margin-bottom:.22rem; }
.result-text  { font-size:.75rem; line-height:1.7; color:var(--text-primary); }
.result-tags  { display:flex; flex-wrap:wrap; gap:.3rem; }
.tag {
  display:inline-block; padding:.16rem .45rem; border:1px solid var(--border-mid);
  border-radius:2px; font-size:.6rem; letter-spacing:.1em; color:var(--green-mid);
  background:rgba(0,255,65,.05); transition:all var(--t);
}
.tag:hover { border-color:var(--border-bright); color:var(--green-bright); }
.tag-anomaly { color:var(--amber); border-color:rgba(255,176,0,.3); background:rgba(255,176,0,.05); }
.analysis-error {
  padding:.55rem .85rem; border:1px solid var(--red); border-radius:var(--radius);
  background:rgba(255,45,85,.06); font-size:.7rem; color:var(--red); animation:fade-in .2s ease;
}
.error-prefix { font-weight:700; margin-right:.45rem; }

/* ── Performance section ────────────────────────────────────────── */
.perf-section { padding:.9rem; background:var(--bg-card); animation:fade-in .45s ease; }
.perf-section .section-label { margin-bottom:.8rem; }
.perf-metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; margin-bottom:1.1rem; }
.metric-card  { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:.55rem; text-align:center; transition:all var(--t); }
.metric-card:hover { border-color:var(--border-mid); box-shadow:0 0 10px var(--green-glow); }
.metric-label { font-size:.54rem; letter-spacing:.12em; color:var(--text-secondary); margin-bottom:.28rem; }
.metric-val   { font-family:var(--font-term); font-size:1.15rem; color:var(--green-bright); line-height:1.1; text-shadow:0 0 8px var(--green-glow-md); }
.metric-unit  { font-size:.56rem; color:var(--text-dim); margin-top:.1rem; letter-spacing:.07em; }
.charts-grid  { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.chart-card   { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; }
.chart-title  { font-size:.58rem; letter-spacing:.12em; color:var(--text-secondary); margin-bottom:.6rem; }
.chart-body   { position:relative; height:150px; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:5rem; left:50%; transform:translate(-50%,0);
  z-index:4000; padding:.45rem 1rem; background:var(--bg-raised);
  border:1px solid var(--border-bright); border-radius:20px;
  font-size:.68rem; letter-spacing:.08em; color:var(--green-bright);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  white-space:nowrap;
}
.toast.show { opacity:1; animation:toast-in .2s ease; }

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  display:inline-block; width:11px; height:11px;
  border:2px solid var(--green-dim); border-top-color:var(--green-bright);
  border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  flex-wrap: wrap;
  text-align: center;        /* center text inside spans */

  gap: .6rem;
  padding: .6rem 1.25rem;

  border-top: 1px solid var(--border);
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--text-dim);
  background: rgba(2,5,7,.9);
  flex-shrink: 0;
}
.footer-secure { color:var(--green-dim); }

/* ── Mobile FAB ─────────────────────────────────────────────────── */
.fab-controls { display:none; } /* hidden on desktop */

/* ── Utilities ──────────────────────────────────────────────────── */
[hidden] { display:none !important; }
:focus-visible { outline:1px solid var(--green-mid); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — < 768px
   Left panel becomes a bottom drawer.
   Right panel fills the full screen height.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body { overflow:hidden; }

  /* Remove fixed header height compensation */
  .site-header { padding:0 1rem; }
  .logo-version { display:none; }
  .header-status .status-sep:last-of-type,
  .header-status .blink { display:none; }

  /* App shell becomes single column, full height */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;  /* right panel fills all */
  }

  /* RIGHT PANEL fills everything */
  .right-panel {
    grid-row:1; grid-column:1;
    overflow-y:auto;
  }

  /* Preview panel grows to fill mobile viewport */
  .preview-panel {
    /* Use dvh units so mobile chrome bar doesn't cause jumps */
    min-height:calc(50dvh - var(--header-h));
    flex:1;
  }
  .canvas-wrap { min-height:calc(50dvh - var(--header-h) - 60px); }

  /* LEFT PANEL → bottom drawer */
  .left-panel {
    position:fixed;
    bottom:0; left:0; right:0;
    height:var(--drawer-h);
    max-height:var(--drawer-h);
    border-right:none;
    border-top:1px solid var(--border-bright);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    z-index:500;
    transform:translateY(100%);
    transition:transform var(--t-slow);
    box-shadow:0 -4px 40px rgba(0,0,0,.8);
    /* Grid hidden off-screen, not removed */
    grid-row:none;
  }
  .left-panel.drawer-open {
    transform:translateY(0);
  }

  /* Drawer handle bar — visible on mobile */
  .drawer-handle-bar {
    display:block;
    width:40px; height:4px; border-radius:2px;
    background:var(--border-bright);
    margin:.65rem auto .2rem;
    flex-shrink:0;
    cursor:pointer;
  }

  /* Drawer backdrop */
  .drawer-backdrop {
    position:fixed; inset:0; z-index:490;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px);
    animation:fade-in .2s ease;
  }

  /* FAB controls button */
  .fab-controls {
    display:flex; align-items:center; gap:.4rem;
    position:fixed; bottom:1rem; right:1rem; z-index:480;
    padding:.55rem 1rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
    background:var(--bg-card); border:1px solid var(--border-bright);
    border-radius:20px; color:var(--green-bright); cursor:pointer;
    box-shadow:0 0 20px var(--green-glow-md); transition:all var(--t);
  }
  .fab-controls svg { width:14px; height:14px; }
  .fab-controls:hover { background:var(--bg-raised); box-shadow:var(--shadow-glow); }
  .fab-controls.open  { background:rgba(255,45,85,.15); border-color:rgba(255,45,85,.4); color:var(--red); }

  /* Compact preview topbar on mobile */
  .preview-topbar { flex-wrap:nowrap; padding:.45rem .65rem; gap:.35rem; }
  .preview-label  { font-size:.6rem; }
  .display-mode-group .btn-display { font-size:.55rem; padding:.18rem .35rem; }
  .topbar-btn { width:24px; height:24px; }

  /* Analysis + perf in scrollable right panel */
  .analysis-section,
  .perf-section { flex-shrink:0; }

  /* Compact cards on small screens */
  .result-cards  { grid-template-columns:repeat(2,1fr); }
  .perf-metrics  { grid-template-columns:repeat(3,1fr); }
  .charts-grid   { grid-template-columns:1fr; }

  /* Toast higher up to clear FAB */
  .toast { bottom:6rem; }

  /* Footer hidden on mobile — saves space */
  .site-footer { display:none; }
}

/* ── Medium screens ─────────────────────────────────────────────── */
@media (max-width:1100px) and (min-width:768px) {
  :root { --panel-w: 260px; }
  .perf-metrics { grid-template-columns:repeat(3,1fr); }
}

/* ── Large screens ──────────────────────────────────────────────── */
@media (min-width:1400px) {
  :root { --panel-w: 320px; }
}