/* ============================================================================
 * console-theme.css — the Console skin, second pass (full-surface).
 *
 * Loaded after styles.css. Visual layer only: no id, class name or element is
 * added or moved, so every control app.js looks up by id is the same node.
 *
 * The first pass only reached the big surfaces, so the old sheet's grid,
 * segment tabs, win map, bars and body::before/::after decoration still showed
 * through. This pass covers those too, and marks visual properties !important
 * so a later rule in styles.css cannot pull the page back.
 * ========================================================================== */

:root {
  --bg: #03070D;
  --ink: #F2FEFF;
  --muted: #8FB4C0;
  --cyan: #3FF3FF;
  --green: #3DFF9A;
  --violet: #B24DFF;
  --line: rgba(63, 243, 255, 0.30);
  --line-soft: rgba(63, 243, 255, 0.14);
  --glass: rgba(7, 19, 30, 0.78);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ── ground: black glass, two glows, a fine grid, a slow scan ───────────── */
html { background: var(--bg) !important; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -12%, rgba(14, 42, 58, 0.95) 0, rgba(3, 7, 13, 0) 60%),
    radial-gradient(ellipse 60% 45% at 110% 105%, rgba(178, 77, 255, 0.20) 0, rgba(3, 7, 13, 0) 70%),
    radial-gradient(ellipse 50% 40% at -10% 80%, rgba(61, 255, 154, 0.10) 0, rgba(3, 7, 13, 0) 70%),
    #03070D !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}

/* the old sheet's decorative layers are replaced, not stacked on */
body::before {
  content: "" !important;
  position: fixed !important; inset: 0 !important; z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(63, 243, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 243, 255, 0.055) 1px, transparent 1px) !important;
  background-size: 44px 44px, 44px 44px !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 30%, transparent 100%);
  animation: none !important;
}
body::after {
  content: "" !important;
  position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important;
  height: 38vh !important; z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(63, 243, 255, 0.055), transparent 80%) !important;
  mix-blend-mode: screen !important;
  animation: skinScan 9s linear infinite !important;
}
@keyframes skinScan {
  0% { transform: translateY(-45vh); opacity: 0.25; }
  50% { opacity: 0.7; }
  100% { transform: translateY(115vh); opacity: 0.25; }
}
.shell { position: relative !important; z-index: 2 !important; max-width: 1480px !important; }

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar {
  gap: 16px 22px !important;
  padding: 18px 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background:
    linear-gradient(90deg, rgba(63, 243, 255, 0.10), transparent 40%, rgba(178, 77, 255, 0.10)) !important;
  box-shadow: 0 1px 0 rgba(63, 243, 255, 0.10) !important;
}
.brand-mark {
  width: 62px !important; height: 46px !important;
  display: grid !important; place-items: center !important;
  border-radius: 12px !important; font-size: 25px !important; line-height: 1 !important;
  color: var(--cyan) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(63, 243, 255, 0.28), transparent 60%),
    #04090F !important;
  border: 1px solid rgba(63, 243, 255, 0.65) !important;
  box-shadow: 0 0 26px rgba(63, 243, 255, 0.35), 0 0 60px rgba(178, 77, 255, 0.30),
              inset 0 0 20px rgba(63, 243, 255, 0.14) !important;
  text-shadow: 0 0 14px var(--cyan) !important;
}
.brand-text h1, .brand h1 {
  font-family: var(--sans) !important;
  font-size: 23px !important; font-weight: 800 !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: var(--ink) !important;
  text-shadow: 0 0 22px rgba(63, 243, 255, 0.65), 0 0 46px rgba(178, 77, 255, 0.35) !important;
  margin: 0 !important;
}
.brand-text p, .brand p {
  margin: 3px 0 0 !important;
  font-family: var(--mono) !important; font-size: 11.5px !important;
  letter-spacing: 0.06em !important; color: var(--muted) !important;
}

.view-switch { gap: 6px !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.view-btn {
  font-family: var(--mono) !important; font-size: 12px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 10px 16px !important; border-radius: 6px !important;
  background: rgba(63, 243, 255, 0.03) !important;
  border: 1px solid rgba(63, 243, 255, 0.18) !important;
  box-shadow: none !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
}
.view-btn:hover { color: var(--ink) !important; border-color: rgba(63, 243, 255, 0.55) !important; }
.view-btn.is-active {
  color: #03070D !important; font-weight: 700 !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 26px rgba(63, 243, 255, 0.55) !important;
}

.chip, .card-tag, .slider-tag {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  border-radius: 5px !important; padding: 7px 12px !important;
  background: rgba(178, 77, 255, 0.08) !important;
  color: #E7CCFF !important;
  border: 1px solid rgba(178, 77, 255, 0.55) !important;
  box-shadow: inset 0 0 14px rgba(178, 77, 255, 0.16) !important;
}
.chip-quiet { color: var(--muted) !important; border-color: rgba(143, 180, 192, 0.40) !important; background: transparent !important; }
.status {
  font-family: var(--mono) !important; font-size: 11.5px !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  border-radius: 5px !important; padding: 7px 14px !important;
  border: 1px solid rgba(61, 255, 154, 0.65) !important;
  color: var(--green) !important; background: rgba(61, 255, 154, 0.08) !important;
  box-shadow: inset 0 0 16px rgba(61, 255, 154, 0.16) !important;
}
.status-dot { border-radius: 2px !important; background: currentColor !important; box-shadow: 0 0 10px currentColor !important; }
.status[data-state="running"] { color: var(--cyan) !important; border-color: rgba(63, 243, 255, 0.7) !important; background: rgba(63, 243, 255, 0.08) !important; }
.status[data-state="found"] { color: var(--green) !important; border-color: var(--green) !important; box-shadow: 0 0 26px rgba(61, 255, 154, 0.45) !important; }
.status[data-state="paused"] { color: #FFE14A !important; border-color: rgba(255, 225, 74, 0.65) !important; background: rgba(255, 225, 74, 0.07) !important; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.layout { gap: 22px !important; align-items: start !important; }
.card {
  position: relative !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(160deg, rgba(12, 30, 44, 0.88), rgba(5, 12, 20, 0.94)) !important;
  box-shadow:
    0 0 0 1px rgba(178, 77, 255, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(63, 243, 255, 0.16) !important;
  overflow: hidden !important;
  backdrop-filter: blur(6px) !important;
}
/* corner ticks — the "instrument panel" tell */
.card::before, .card::after {
  content: "" !important;
  position: absolute !important; width: 14px !important; height: 14px !important;
  pointer-events: none !important;
  border-color: rgba(63, 243, 255, 0.75) !important;
  border-style: solid !important;
}
.card::before { top: 0 !important; left: 0 !important; border-width: 2px 0 0 2px !important; }
.card::after { bottom: 0 !important; right: 0 !important; border-width: 0 2px 2px 0 !important; }
.card-head {
  padding: 16px 22px 12px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background:
    linear-gradient(90deg, rgba(63, 243, 255, 0.10), rgba(63, 243, 255, 0) 55%) !important;
}
.card-head::after {
  content: "" !important;
  position: absolute !important; left: 22px !important; right: 22px !important; bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--cyan), rgba(178, 77, 255, 0.6), transparent) !important;
}
.card-head h2 {
  font-family: var(--mono) !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase !important;
  color: var(--cyan) !important; margin: 0 !important;
  text-shadow: 0 0 16px rgba(63, 243, 255, 0.55) !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
.card-head h2::before {
  content: "▚" !important; color: var(--violet) !important;
  text-shadow: 0 0 12px var(--violet) !important; font-size: 12px !important;
}
.card-body { padding: 18px 22px 22px !important; gap: 16px !important; }

/* ── labels, fields ─────────────────────────────────────────────────────── */
.field { gap: 7px !important; }
.field > label, .field-row > label, .join-field > label, .coord-field > label, .modeset legend {
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  min-height: 46px !important; border-radius: 7px !important; padding: 0 14px !important;
  background: #04090F !important;
  border: 1px solid rgba(63, 243, 255, 0.32) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important; font-size: 13.5px !important;
  box-shadow: inset 0 0 18px rgba(63, 243, 255, 0.06) !important;
}
textarea { padding: 12px 14px !important; min-height: 96px !important; line-height: 1.5 !important; }
input[readonly] { color: var(--cyan) !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cyan) !important; outline-offset: 2px !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 4px rgba(63, 243, 255, 0.16), inset 0 0 20px rgba(63, 243, 255, 0.12) !important;
}
input::placeholder, textarea::placeholder { color: rgba(143, 180, 192, 0.55) !important; }
select {
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 38px !important;
}
input[disabled], select[disabled], textarea[disabled] { opacity: 0.5 !important; }

.hint, .range-info, .workers-info, .join-hint, .check-note, .persist-note, .slider-span {
  font-family: var(--sans) !important; font-size: 12.5px !important;
  line-height: 1.6 !important; color: var(--muted) !important;
}
.hint strong, .hint em, .hint b { color: var(--ink) !important; }
.field-error { color: #FF7B72 !important; font-family: var(--mono) !important; font-size: 11.5px !important; }
.slider-key, .join-code, code, .hud-line code {
  font-family: var(--mono) !important; font-size: 12px !important;
  color: var(--cyan) !important;
  background: rgba(63, 243, 255, 0.07) !important;
  border: 1px solid rgba(63, 243, 255, 0.16) !important;
  border-radius: 6px !important; padding: 3px 8px !important;
}
code.slider-key { display: block !important; padding: 10px 12px !important; }

/* ── segment tabs (the old sheet's most visible leftover) ───────────────── */
.segments { gap: 6px !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.segment span, .segment > span {
  font-family: var(--mono) !important; font-size: 11.5px !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  background: rgba(63, 243, 255, 0.04) !important;
  border: 1px solid rgba(63, 243, 255, 0.20) !important;
  box-shadow: none !important;
}
.segment:hover span { border-color: rgba(63, 243, 255, 0.5) !important; color: var(--ink) !important; }
.segment input:checked + span {
  color: #03070D !important; font-weight: 700 !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 22px rgba(63, 243, 255, 0.45) !important;
}

/* preset rows */
.preset-row { gap: 8px !important; }
.preset-row button, .preset-row .btn {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  border-radius: 6px !important;
  background: rgba(63, 243, 255, 0.05) !important;
  border: 1px solid rgba(63, 243, 255, 0.24) !important;
  color: var(--ink) !important;
}
.preset-row button:hover, .preset-row .btn:hover {
  border-color: var(--cyan) !important; background: rgba(63, 243, 255, 0.14) !important;
  box-shadow: 0 0 18px rgba(63, 243, 255, 0.30) !important;
}

/* ── checkboxes ─────────────────────────────────────────────────────────── */
/* .check-row is itself a <label>, so it must be exempt from the uppercase
   field-label rules: these rows carry whole sentences, not field names. */
.check-row, .check-row > span, .check-row span, .check-note {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--sans) !important;
}
.check-row { gap: 10px !important; font-size: 13.5px !important; font-weight: 400 !important; color: var(--ink) !important; line-height: 1.5 !important; }
.check-note { display: block !important; margin-top: 4px !important; font-size: 12px !important; font-weight: 400 !important; color: var(--muted) !important; line-height: 1.6 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan) !important; width: 18px !important; height: 18px !important; }
.check-row input[type="checkbox"] { accent-color: var(--cyan) !important; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  min-height: 44px !important; padding: 0 18px !important; border-radius: 7px !important;
  font-family: var(--mono) !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--ink) !important;
  background: rgba(63, 243, 255, 0.06) !important;
  border: 1px solid rgba(63, 243, 255, 0.32) !important;
  box-shadow: inset 0 0 20px rgba(63, 243, 255, 0.08) !important;
}
.btn:hover:not(:disabled) {
  border-color: var(--cyan) !important;
  background: rgba(63, 243, 255, 0.14) !important;
  box-shadow: 0 0 22px rgba(63, 243, 255, 0.35) !important;
}
.btn:disabled { opacity: 0.42 !important; }
.btn-primary {
  min-height: 56px !important; border: 0 !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.18em !important;
  color: #03070D !important;
  background: linear-gradient(100deg, var(--cyan), var(--green)) !important;
  box-shadow: 0 0 30px rgba(63, 243, 255, 0.50), inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06) !important;
  box-shadow: 0 0 46px rgba(61, 255, 154, 0.65) !important;
}
.btn-mini, .btn-copy {
  min-height: 32px !important; padding: 0 12px !important; border-radius: 5px !important;
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: 0.10em !important; text-transform: uppercase !important;
  color: var(--cyan) !important;
  background: rgba(63, 243, 255, 0.07) !important;
  border: 1px solid rgba(63, 243, 255, 0.30) !important;
}
.btn-mini:hover, .btn-copy:hover { border-color: var(--cyan) !important; box-shadow: 0 0 16px rgba(63, 243, 255, 0.3) !important; }
.actions { gap: 12px !important; }

/* ── metrics ────────────────────────────────────────────────────────────── */
.metrics { gap: 12px !important; }
.metric {
  position: relative !important;
  background: rgba(4, 10, 17, 0.85) !important;
  border: 1px solid var(--line-soft) !important;
  border-top: 2px solid var(--cyan) !important;
  border-radius: 8px !important; padding: 15px 16px !important;
  box-shadow: inset 0 0 22px rgba(63, 243, 255, 0.06) !important;
}
.metric:nth-child(2) { border-top-color: var(--violet) !important; }
.metric:nth-child(3) { border-top-color: var(--green) !important; }
.metric:nth-child(4) { border-top-color: var(--cyan) !important; }
.metric:nth-child(5) { border-top-color: var(--violet) !important; }
.metric:nth-child(6) { border-top-color: var(--green) !important; }
.metric-label {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--muted) !important; margin: 0 0 8px !important;
}
.metric-value {
  font-family: var(--mono) !important; font-size: 27px !important; font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  text-shadow: 0 0 18px rgba(63, 243, 255, 0.55) !important;
}
.metric-value-lg { font-size: 32px !important; }
.metric-foot { font-family: var(--mono) !important; font-size: 10.5px !important; color: var(--muted) !important; }
.meter { background: rgba(63, 243, 255, 0.10) !important; border-radius: 2px !important; height: 6px !important; overflow: hidden !important; }
.meter-bar, .bar-fill {
  background: linear-gradient(90deg, var(--violet), var(--cyan) 55%, var(--green)) !important;
  box-shadow: 0 0 14px rgba(63, 243, 255, 0.7) !important;
  border-radius: 2px !important;
}
.bar { background: rgba(63, 243, 255, 0.08) !important; border-radius: 2px !important; overflow: hidden !important; }

/* ── hud, telemetry, log ────────────────────────────────────────────────── */
.hud, .hud-sub, .hud-kv {
  background: rgba(3, 8, 14, 0.80) !important;
  border: 1px solid rgba(63, 243, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 24px rgba(63, 243, 255, 0.05) !important;
}
.hud-title { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--muted) !important; }
.hud-line, .hud-kv { font-family: var(--mono) !important; font-size: 12px !important; color: var(--ink) !important; }

#logList, .logList {
  font-family: var(--mono) !important; font-size: 12px !important; line-height: 1.65 !important;
  color: #BFEAF3 !important;
  background: rgba(2, 6, 11, 0.85) !important;
  border: 1px solid rgba(63, 243, 255, 0.14) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 30px rgba(63, 243, 255, 0.05) !important;
}
#logList > * { border-bottom: 1px solid rgba(63, 243, 255, 0.06) !important; }

.result-row { border-bottom: 1px solid var(--line-soft) !important; }
.result-row dt { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted) !important; }
.result-row dd, .result-row code, .fm-row code { font-family: var(--mono) !important; font-size: 12.5px !important; color: var(--ink) !important; }
.result-row-key code, .fm-row-key code {
  color: var(--green) !important;
  text-shadow: 0 0 14px rgba(61, 255, 154, 0.55) !important;
}

/* lattice + window map surfaces */
.lat-table th, .win-grid th, th {
  font-family: var(--mono) !important; font-size: 10.5px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: var(--muted) !important; border-bottom: 1px solid var(--line-soft) !important;
}
.lat-table td, .win-grid td, td { font-family: var(--mono) !important; border-bottom: 1px solid rgba(63, 243, 255, 0.07) !important; color: var(--ink) !important; }
.winmap, .win-range, .win-foot, .lat-fact, .lat-no, .lat-wide, .drawer-col, .join-field, .coord-field, .grid-sub {
  border-color: var(--line-soft) !important;
  font-family: var(--mono) !important;
}
.lat-ok { color: var(--green) !important; text-shadow: 0 0 12px rgba(61, 255, 154, 0.5) !important; }
.notice { border: 1px solid rgba(63, 243, 255, 0.35) !important; background: rgba(63, 243, 255, 0.06) !important; border-radius: 8px !important; color: var(--ink) !important; }
.alertBanner, #alertBanner { border: 1px solid var(--green) !important; background: rgba(61, 255, 154, 0.10) !important; border-radius: 8px !important; }

/* ── found modal ────────────────────────────────────────────────────────── */
.fm-overlay { background: rgba(2, 6, 11, 0.86) !important; backdrop-filter: blur(8px) !important; }
.fm-card, .fm-overlay > div {
  border-radius: 10px !important;
  border: 1px solid var(--green) !important;
  background: linear-gradient(160deg, rgba(8, 30, 24, 0.97), rgba(5, 12, 20, 0.97)) !important;
  box-shadow: 0 0 0 1px rgba(61, 255, 154, 0.22), 0 24px 70px rgba(0, 0, 0, 0.65),
              0 0 70px rgba(61, 255, 154, 0.28) !important;
}
.fm-row dt { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--muted) !important; }

/* ── sliders, scrollbars, misc ─────────────────────────────────────────── */
input[type="range"] { accent-color: var(--cyan) !important; }
.slider-row input[type="range"]::-webkit-slider-thumb { background: var(--cyan) !important; box-shadow: 0 0 14px var(--cyan) !important; }
a { color: var(--cyan) !important; }
hr { border: 0 !important; border-top: 1px solid var(--line-soft) !important; }
* { scrollbar-color: rgba(63, 243, 255, 0.35) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(2, 6, 11, 0.8); }
::-webkit-scrollbar-thumb { background: rgba(63, 243, 255, 0.28); border-radius: 0; border: 2px solid rgba(2, 6, 11, 0.9); }
::-webkit-scrollbar-thumb:hover { background: rgba(63, 243, 255, 0.5); }

@media (max-width: 720px) {
  .brand-mark { width: 50px !important; height: 38px !important; font-size: 20px !important; }
  .brand-text h1, .brand h1 { font-size: 18px !important; letter-spacing: 0.06em !important; }
  .metric-value { font-size: 22px !important; }
  .metric-value-lg { font-size: 26px !important; }
  .card-body { padding: 14px 16px 18px !important; }
  .card-head { padding: 13px 16px 10px !important; }
  .card-head h2 { font-size: 11.5px !important; letter-spacing: 0.16em !important; }
  .shell { padding: 12px 12px 36px !important; }
  body::before { background-size: 32px 32px, 32px 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; opacity: 0.2 !important; }
}

/* ============================================================================
 * SCAN EYE — the animation from the supplied screen, mounted on the dashboard.
 * Hidden while idle; the small script at the end of index.html shows it when
 * the status chip leaves idle and hands it the numbers the gauges already show.
 * ========================================================================== */
.eye-card { padding: 0 !important; overflow: hidden !important; }
.eye-card[hidden] { display: none !important; }
.eyePane {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 5; min-height: 130px;
  background: #03070d;
  --cy: #3ff3ff; --gr: #3dff9a; --pu: #b24dff;
  direction: ltr;
}
/* the eye itself: painted here because the recording's photo is not a file in
   this project; every timing below is lifted from that recording's stage */
.eyePane .eyeArt {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  transition: filter 0.6s;
}
.eyePane.scanning .eyeArt { animation: eyeBreath 1.6s ease-in-out infinite; }
@keyframes eyeBreath { 50% { filter: brightness(1.2) saturate(1.25); } }
.eyePane.found .eyeArt { filter: brightness(1.1) saturate(1.15) hue-rotate(-12deg); }

.eyePane .eyeIris {
  position: absolute; left: 50%; top: 50%;
  width: 22.8%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.eyePane .eyeRadar {
  position: absolute; inset: 3%;
  border-radius: 50%; opacity: 0.5; mix-blend-mode: screen;
  background: conic-gradient(transparent 0 68%, rgba(61, 255, 154, 0.06) 80%, rgba(61, 255, 154, 0.6));
  animation: eyeSpin 4.5s linear infinite;
  transition: opacity 0.4s;
}
.eyePane .eyeRing {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed var(--cy);
  box-shadow: 0 0 16px var(--cy);
  animation: eyeSpin 5s linear infinite;
  transition: inset 0.9s cubic-bezier(0.6, 0, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}
.eyePane .eyeRing.b {
  inset: 9%; border: 3px dotted var(--pu); box-shadow: 0 0 14px var(--pu);
  animation-direction: reverse; animation-duration: 3.5s;
}
.eyePane .eyeRing.c {
  inset: -6%; border: 1px solid var(--gr);
  border-top-color: transparent; border-bottom-color: transparent;
  animation-duration: 2.2s;
}
.eyePane.found .eyeRing {
  inset: 20%; border-style: solid; border-color: var(--gr);
  box-shadow: 0 0 30px var(--gr), inset 0 0 30px var(--gr);
  animation-duration: 12s;
}
.eyePane.found .eyeRing.b { inset: 28%; border-color: #fff; }
.eyePane.found .eyeRing.c { inset: 12%; }
.eyePane.found .eyeRadar { opacity: 0; }
@keyframes eyeSpin { to { transform: rotate(360deg); } }
.eyePane .eyeScan {
  position: absolute; left: 0; right: 0; height: 14%; top: -14%; opacity: 0;
  background: linear-gradient(transparent, rgba(63, 243, 255, 0.12) 70%, rgba(63, 243, 255, 0.55) 98%, #e8ffff);
  box-shadow: 0 6px 28px 4px rgba(63, 243, 255, 0.5);
  mix-blend-mode: screen;
}
.eyePane.scanning .eyeScan { opacity: 1; animation: eyeSweep 1.7s linear infinite; }
@keyframes eyeSweep { to { top: 100%; } }
.eyePane .eyeRain {
  position: absolute; inset: 0; overflow: hidden; opacity: 0;
  mix-blend-mode: screen; color: var(--cy);
  font: 600 11px/1.3 var(--mono);
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  transition: opacity 0.5s;
}
.eyePane .eyeRain span {
  position: absolute; top: -10%; white-space: pre;
  text-shadow: 0 0 6px var(--cy);
  animation: eyeFall linear infinite;
}
@keyframes eyeFall { to { transform: translateY(130%); } }
.eyePane.scanning .eyeRain { opacity: 0.5; }
.eyePane.paused .eyeRing, .eyePane.paused .eyeRadar,
.eyePane.paused .eyeArt { animation-play-state: paused; }
.eyePane.paused .eyeScan { opacity: 0.35; animation-play-state: paused; }
.eyePane .eyeBurst {
  position: absolute; inset: 0; border-radius: 50%;
  opacity: 0; transform: scale(0.2); pointer-events: none;
  background: radial-gradient(circle, #fff 0, rgba(61, 255, 154, 0.8) 25%, transparent 65%);
}
.eyePane.found .eyeBurst { animation: eyeBurst 1.4s ease-out; }
@keyframes eyeBurst { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(2.4); } }
.eyePane .eyeTitle {
  position: absolute; top: 9%; left: 50%; transform: translateX(-50%) scale(0.8);
  padding: 7px 26px; border-radius: 999px;
  text-align: center; direction: rtl; opacity: 0; white-space: nowrap;
  background: rgba(2, 10, 14, 0.82);
  border: 1px solid rgba(61, 255, 154, 0.65);
  box-shadow: 0 0 26px rgba(61, 255, 154, 0.4);
  font-family: var(--sans) !important; font-weight: 800;
  font-size: clamp(20px, 3.2vw, 34px); line-height: 1.4; color: var(--gr);
  text-shadow: 0 0 18px var(--gr), 0 2px 6px #000;
}
.eyePane.found .eyeTitle { animation: eyeTitle 0.6s 0.3s forwards; }
@keyframes eyeTitle { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.eyePane .eyeHud {
  position: absolute; left: 4%; right: 4%; bottom: 4%;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 14px;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(2, 10, 14, 0.78);
  border: 1px solid rgba(63, 243, 255, 0.6);
  font-family: var(--mono) !important; font-size: 12px; line-height: 1.45;
  color: var(--cy); text-shadow: 0 0 8px var(--cy);
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.eyePane .eyeTag { width: 100%; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; font-size: 10px; }
.eyePane .eyeKey {
  flex: 1 1 100%; min-height: 1.5em; color: #fff;
  font-size: 12px; word-break: break-all;
}
.eyePane .eyeStats { opacity: 0.9; }
.eyePane.found .eyeHud {
  color: var(--gr); border-color: var(--gr);
  box-shadow: 0 0 30px rgba(61, 255, 154, 0.7);
  text-shadow: 0 0 8px var(--gr);
}

/* the locked-off uncompressed switch explains itself in a paragraph nobody
   needs before starting a scan; the input stays in the DOM for app.js */
label[for="optUncompressed"] { display: none !important; }

@media (max-width: 720px) {
  .eyePane { min-height: 0; }
  .eyePane .eyeHud { font-size: 10px; padding: 6px 10px; }
  .eyePane .eyeKey { font-size: 10px; }
  .eyePane .eyeTitle { font-size: 16px; padding: 4px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .eyePane .eyeArt, .eyePane .eyeRadar, .eyePane .eyeRing,
  .eyePane .eyeScan, .eyePane .eyeRain span { animation-duration: 20s !important; }
}

/* Drop & jitter: one compact block, so the two menus and the action sit
   together on a phone instead of stretching the panel. */
.drop-group {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(63, 243, 255, 0.18);
  border-radius: 12px;
  background: rgba(6, 20, 28, 0.5);
}

.drop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.drop-actions .hint {
  margin: 0;
  flex: 1 1 180px;
  min-width: 0;
}

@media (max-width: 520px) {
  .drop-group { padding: 10px; gap: 8px; }
  .drop-actions { gap: 8px; }
  .drop-actions .hint { flex-basis: 100%; }
}

.drop-status {
  margin: 0;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(150, 226, 240, 0.9);
}

.drop-status b {
  color: #7ef8ff;
  font-weight: 700;
}

.drop-status-dead {
  color: rgba(255, 170, 120, 0.95);
}