/* Scanner App — handheld-radio faceplate styling.
   The whole screen is the device: dark rubberized body, speaker grille,
   a backlit LCD, and chunky tactile keys. County-agnostic. */

:root{
  --body:#17181c; --body2:#101116; --edge:#26272e; --edge2:#31323b;
  --ink:#e8e8ec; --muted:#9a9aa5;
  --lcd-bg1:#b3c19c; --lcd-bg2:#93a37c; --lcd-ink:#1d2613; --lcd-dim:#46523a;
  --amber:#ffb02e; --green:#43d17c; --red:#ff453a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#060607 radial-gradient(120% 90% at 50% 0%,#141419 0%,#060607 60%);
  color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
button:disabled{cursor:default;opacity:.38}

/* ---------- device body ---------- */
.radio{
  position:relative;
  max-width:430px;margin:0 auto;
  min-height:100dvh;
  display:flex;flex-direction:column;gap:14px;
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px),
    linear-gradient(165deg,#1d1e24 0%,var(--body) 34%,var(--body2) 100%);
  border-left:1px solid var(--edge);border-right:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -18px 34px rgba(0,0,0,.55);
}
@media(min-width:480px){
  body{padding:26px 0}
  .radio{min-height:0;border:1px solid var(--edge);border-radius:34px;
    box-shadow:0 34px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -18px 34px rgba(0,0,0,.55)}
}
.antenna{
  position:absolute;top:-16px;left:34px;width:17px;height:64px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(90deg,#33343c,#17181d 55%,#26272e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),2px 3px 6px rgba(0,0,0,.5);z-index:0;
}
.antenna::after{content:"";position:absolute;top:-7px;left:1px;right:1px;height:12px;border-radius:6px;background:#3a3b44}
.screw{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#4a4b55,#23242a 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 1px rgba(255,255,255,.06)}
.screw::after{content:"";position:absolute;left:1.5px;right:1.5px;top:5.5px;height:2px;background:#101116;border-radius:1px;transform:rotate(38deg)}
.screw.tl{top:10px;left:10px}.screw.tr{top:10px;right:10px}
.screw.bl{bottom:10px;left:10px}.screw.br{bottom:10px;right:10px}

.plate{
  position:relative;z-index:1;margin-top:16px;text-align:center;
  padding:9px 10px 8px;border-radius:10px;
  background:linear-gradient(180deg,#23242b,#14151a);
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -8px 14px rgba(0,0,0,.5);
}
.plate-name{display:block;font-weight:850;font-size:19px;letter-spacing:3.5px;color:#f2f2f5}
.plate-sub{display:block;font-size:9.5px;font-weight:700;letter-spacing:6px;color:var(--muted);margin-top:1px}

.grille{
  height:44px;border-radius:10px;flex:none;
  background-image:radial-gradient(circle,#050506 2.6px,rgba(255,255,255,.045) 2.9px,transparent 3.4px);
  background-size:13px 13px;background-position:center;
  background-color:#131318;border:1px solid #1e1f26;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.8);
}

/* ---------- LCD ---------- */
.lcd{
  border-radius:12px;padding:12px 14px 11px;color:var(--lcd-ink);
  background:linear-gradient(172deg,var(--lcd-bg1) 0%,var(--lcd-bg2) 78%,#86976e 100%);
  border:1px solid #05060a;
  box-shadow:inset 0 2px 14px rgba(29,38,19,.45),inset 0 -1px 0 rgba(255,255,255,.25),0 1px 0 rgba(255,255,255,.05);
  font-family:ui-monospace,"SF Mono","Cascadia Mono","Courier New",monospace;
}
.lcd-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--lcd-dim)}
.lcd-bank{font-size:12.5px;font-weight:700;letter-spacing:2.2px;margin-top:5px;color:var(--lcd-ink);opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-mode{font-size:31px;font-weight:800;letter-spacing:2.5px;line-height:1.12;margin:1px 0 3px;color:var(--lcd-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-line{font-size:12px;font-weight:600;letter-spacing:.4px;margin-top:5px;color:var(--lcd-ink);opacity:.88;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-meter{display:inline-flex;gap:2.5px;align-items:flex-end;height:13px}
.lcd-meter i{width:5px;background:var(--lcd-ink);opacity:.16;border-radius:1px}
.lcd-meter i:nth-child(1){height:4px}.lcd-meter i:nth-child(2){height:6px}
.lcd-meter i:nth-child(3){height:8px}.lcd-meter i:nth-child(4){height:10px}.lcd-meter i:nth-child(5){height:13px}
.lcd-meter.live i{opacity:.28}
.lcd-meter.live i.on{opacity:1}

/* ---------- keys ---------- */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.key{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:15px 8px 12px;border-radius:15px;color:var(--ink);
  background:linear-gradient(180deg,#2b2c34,#1a1b21 60%,#14151a);
  border:1px solid #34353f;
  box-shadow:0 5px 0 #060607,0 8px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);
}
.key:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #060607,0 4px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.key-glyph{font-size:19px;line-height:1}
.key-label{font-size:12.5px;font-weight:800;letter-spacing:2.6px}
.key-scan{grid-column:1 / -1;padding:19px 8px 15px}
.key-scan .key-glyph{font-size:24px}
.key-scan .key-label{font-size:15px}
.key-scan.lit{border-color:#2c5c40;box-shadow:0 5px 0 #060607,0 0 18px rgba(67,209,124,.35),inset 0 1px 0 rgba(255,255,255,.09)}
.key-scan.lit .key-glyph,.key-scan.lit .key-label{color:var(--green)}
.key-hold.lit{border-color:#6e5518;box-shadow:0 5px 0 #060607,0 0 18px rgba(255,176,46,.32),inset 0 1px 0 rgba(255,255,255,.09)}
.key-hold.lit .key-glyph,.key-hold.lit .key-label{color:var(--amber)}
.key-rewind.lit{border-color:#3d4b6e;box-shadow:0 5px 0 #060607,0 0 16px rgba(110,150,255,.30),inset 0 1px 0 rgba(255,255,255,.09)}

/* ---------- volume ---------- */
.volrow{display:flex;align-items:center;gap:10px}
.vkey{
  flex:none;padding:11px 13px;border-radius:11px;color:var(--ink);
  font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  background:linear-gradient(180deg,#26272f,#17181d);
  border:1px solid #33343e;box-shadow:0 3px 0 #060607,inset 0 1px 0 rgba(255,255,255,.08);
}
.vkey:active{transform:translateY(2px);box-shadow:0 1px 0 #060607}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:30px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;
  background:linear-gradient(180deg,#0a0a0d,#1d1e24);box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,255,255,.05)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:7px;
  background:linear-gradient(180deg,#3a3b45,#222329);border:1px solid #484955;
  box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#14151a}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:7px;background:#2c2d36;border:1px solid #484955}

/* ---------- rewind deck ---------- */
.deck{
  border:1px solid var(--edge2);border-radius:16px;padding:14px;
  background:linear-gradient(180deg,#14151b,#0e0f13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.deck-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.deck-title{font-size:10.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.deck-live{
  padding:8px 11px;border-radius:9px;font-size:11px;font-weight:800;letter-spacing:1px;color:#0d1512;
  background:linear-gradient(180deg,#57dd95,#2fbf71);border:1px solid #2c5c40;box-shadow:0 3px 0 #060607}
.deck-live:active{transform:translateY(2px);box-shadow:0 1px 0 #060607}
.deck-jumps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.jkey{
  padding:11px 4px;border-radius:11px;color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(180deg,#26272f,#17181d);border:1px solid #33343e;
  box-shadow:0 3px 0 #060607,inset 0 1px 0 rgba(255,255,255,.08)}
.jkey:active{transform:translateY(2px);box-shadow:0 1px 0 #060607}
.deck-status{font-size:12px;color:var(--muted);margin:11px 0 4px;min-height:17px}
.deck-list{display:flex;flex-direction:column;gap:7px;margin-top:8px;max-height:264px;overflow:auto}
.seg{
  display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;
  padding:10px 12px;border-radius:10px;color:var(--ink);
  background:#17181e;border:1px solid #26272f;font-size:13px}
.seg:active{background:#1e2027}
.seg.playing{border-color:#2c5c40;background:#16241b}
.seg .seg-t{font-weight:700;letter-spacing:.4px}
.seg .seg-d{font-size:11px;color:var(--muted);white-space:nowrap}

.fineprint{margin-top:auto;text-align:center;font-size:11.5px;color:var(--muted)}
.fineprint b{color:#d8d8de}
.brandline{text-align:center;font-size:10px;font-weight:800;letter-spacing:2.6px;color:#5c5d68;margin:0}