/* Modo Rádio — recriação genérica "estilo IC-7760" (e skin "estilo X6200"); dados 100% ao vivo */
#radio{padding:10px;max-width:1280px;margin:0 auto}
.rigbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px;color:var(--mut);font-size:13px}
.rigbar input{background:#0f1a2e;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:14px}
.rigbar select{background:#0f1a2e;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.rig{--bez:#121315;--bez2:#1d1f22;--key:#24272b;--keyt:#d7dbe0;--lcd:#05070c;--amber:#ffb000;
  display:grid;grid-template-columns:150px minmax(0,1fr) 270px;grid-template-areas:"left screen right" "bottom bottom bottom";
  gap:10px;padding:16px 16px 12px;border-radius:14px;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#26282c 0%,var(--bez) 18%,#0c0d0f 100%);box-shadow:0 10px 30px #000a, inset 0 1px 0 #ffffff1a, inset 0 -2px 0 #0008;
  border:1px solid #000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--keyt);position:relative}
.rig .brand{position:absolute;top:4px;left:18px;font:600 11px/1 system-ui;letter-spacing:2px;color:#9aa3ad}
.rig .model{position:absolute;top:4px;right:20px;font:600 11px/1 system-ui;letter-spacing:1px;color:#9aa3ad}
.rleft{grid-area:left;display:flex;flex-direction:column;gap:9px;align-items:stretch;padding-top:12px}
.rright{grid-area:right;align-items:start;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;padding-top:12px}
.rbottom{grid-area:bottom;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;border-top:1px solid #000;padding-top:8px}
.key{background:linear-gradient(180deg,#30343a,var(--key));border:1px solid #000;border-radius:5px;color:var(--keyt);font:600 11px/1.1 system-ui;
  padding:8px 6px;box-shadow:inset 0 1px 0 #ffffff22,0 2px 0 #000;cursor:pointer;text-align:center;touch-action:manipulation;min-width:54px}
.key:active{transform:translateY(1px);box-shadow:inset 0 1px 0 #ffffff11}
.key.on{color:#fff;box-shadow:inset 0 0 0 1px var(--amber),0 0 8px #ffb00066}.key.dim{opacity:.45}.key small{display:block;font-size:9px;color:#9aa3ad;font-weight:400}
.lamp{display:inline-block;width:9px;height:9px;border-radius:50%;background:#333;vertical-align:middle;margin-right:5px;box-shadow:inset 0 1px 2px #000}
.lamp.g{background:#39ff7a;box-shadow:0 0 8px #39ff7a}.lamp.a{background:#ffb000;box-shadow:0 0 8px #ffb000}.lamp.r{background:#ff3048;box-shadow:0 0 8px #ff3048}
.knob{position:relative;border-radius:50%;cursor:grab;touch-action:none;margin:0 auto}
.knob .cap{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5a5f66 0%,#2a2d31 35%,#141518 70%),#222;
  box-shadow:0 6px 14px #000c, inset 0 2px 3px #ffffff33, inset 0 -3px 6px #000c}
.knob .cap::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#ffffff10 0deg 2deg,#0000 2deg 6deg);mask:radial-gradient(circle,#0000 62%,#000 63%);-webkit-mask:radial-gradient(circle,#0000 62%,#000 63%)}
.knob .dimple{position:absolute;width:18%;height:18%;left:41%;top:12%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1a1b1e,#3a3e44);box-shadow:inset 0 2px 4px #000}
.knob .tick{position:absolute;left:49%;top:3%;width:2%;height:10%;background:#e9eef4;border-radius:2px}
.knob.main{width:190px;height:190px;grid-column:1/3}
.knob.small{width:62px;height:62px}.knob.small .dimple{display:none}
.knobwrap{text-align:center;font-size:10px;color:#9aa3ad}
.rscreen{grid-area:screen;background:var(--lcd);border:3px solid #000;border-radius:6px;box-shadow:inset 0 0 0 1px #2a3140,0 0 0 2px #2b2e33;
  padding:6px 8px;display:flex;flex-direction:column;gap:4px;min-width:0;font-family:"Segoe UI",system-ui,sans-serif;overflow:hidden}
.topbar,.iconsrow{display:flex;gap:6px;align-items:center;font-size:11px;flex-wrap:wrap}
.chipb{border:1px solid #2c3a55;border-radius:3px;padding:1px 5px;color:#cfe3ff;background:#0b1424;white-space:nowrap}
.chipb.mode{background:#1f5fbf;border-color:#3a7be0;color:#fff;font-weight:700}
.chipb.inh{color:#556;border-color:#223}.chipb.on-r{background:#b3122a;color:#fff;border-color:#ff3048;animation:blink 1s steps(2) infinite}
.chipb.on-g{background:#0e5a2c;color:#bfffd5;border-color:#39ff7a}.chipb.off{color:#445;border-color:#1a2130}
@keyframes blink{50%{opacity:.35}}
.livepill{margin-left:auto;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:4px;font-size:12px}
.livepill.g{background:#0e5a2c;color:#39ff7a}.livepill.a{background:#5a430e;color:#ffb000}.livepill.r{background:#5a0e1a;color:#ff5a6e;animation:blink 1s steps(2) infinite}
.clock{color:#e8f0ff;font-variant-numeric:tabular-nums}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.meter{background:linear-gradient(180deg,#f3ead2,#e6dab8);border-radius:4px;position:relative;overflow:hidden;box-shadow:inset 0 0 6px #0006}
.meter svg{display:block;width:100%;height:auto}
.meter .mlabel{position:absolute;left:6px;top:3px;font:700 10px system-ui;color:#333}
.meter .mread{position:absolute;right:6px;top:3px;font:700 11px ui-monospace,monospace;color:#7a1010}
.vfos{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;align-items:end}
.vfo{line-height:1}.vfo .vlabel{font-size:11px;color:#8fb3ff;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.vfo .freq{font:600 50px/1.05 "Segoe UI",system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.5px;white-space:nowrap}
.vfo.b .freq{color:#9aa6b8;font-size:32px}
.freq span{position:relative;display:inline-block}.freq .sm{font-size:.55em;color:#c8d2e0}
.freq span.ts::before{content:"▼";position:absolute;top:-.55em;left:50%;transform:translateX(-50%);font-size:.32em;color:var(--amber)}
.vfo .vsub{font-size:12px;color:#ffd36a;min-height:15px}
.scopehead{display:flex;gap:8px;font-size:10px;color:#9fb6da;align-items:center;flex-wrap:wrap;border-top:1px solid #1b2333;padding-top:3px}
.scopehead b{color:#fff}
canvas.scope,canvas.wfall{width:100%;display:block;background:#000;cursor:crosshair;touch-action:manipulation}
canvas.scope{height:120px}canvas.wfall{height:90px}
.softkeys{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.softkeys button{background:linear-gradient(180deg,#24324a,#152036);color:#e8f0ff;border:1px solid #33486e;border-radius:3px;font:600 11px system-ui;padding:6px 2px;cursor:pointer;touch-action:manipulation}
.softkeys button.on{background:linear-gradient(180deg,#3a6fc4,#22508f)}.softkeys button:disabled{opacity:.35}
.mini{grid-column:1/3;background:var(--lcd);border:3px solid #000;border-radius:5px;padding:4px;box-shadow:0 0 0 2px #2b2e33}
.mini canvas{width:100%;height:96px;display:block}
.mini .mhead{display:flex;justify-content:space-between;font-size:10px;color:#9fb6da}
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:2px 5px;font-size:10px;color:#cfe3ff;align-items:center;margin-top:3px}
.bars i{height:7px;background:#14203a;border-radius:2px;overflow:hidden;display:block}.bars i b{display:block;height:100%;background:linear-gradient(90deg,#39ff7a,#ffe14d,#ff3048);width:0}
.toast{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);background:#0b1424ee;border:1px solid #3a7be0;padding:8px 12px;border-radius:6px;font-size:13px;z-index:3;max-width:90%}
.toast a{color:#9fd0ff}
.grille{display:none}
/* ---- skin estilo X6200 (Xiegu): left grey panel with VOL/SQL + keys + MFK, central LCD, 5 hardware ▲ soft-keys, speaker grille + big dial at right ---- */
.rig.skin-x6200{grid-template-columns:200px minmax(0,1fr) 230px;grid-template-areas:"left screen right" "left softhw right";
  background:linear-gradient(180deg,#3b3e43 0%,#2a2c30 50%,#1f2124 100%);border-radius:18px;border:3px solid #0b0b0c;padding:18px 34px 14px;
  box-shadow:0 10px 30px #000a,inset 0 0 0 2px #4a4e55}
.skin-x6200 .bar{position:absolute;top:10%;bottom:10%;width:14px;border:4px solid #c9ced6;border-radius:12px;box-shadow:0 0 3px #000}
.skin-x6200 .bar.l{left:-7px;border-right:none}.skin-x6200 .bar.r{right:-7px;border-left:none}
.skin-x6200 .rleft{background:linear-gradient(180deg,#5b5f66,#45484e);border-radius:10px;padding:10px;gap:10px;align-items:center;box-shadow:inset 0 1px 0 #ffffff22}
.skin-x6200 .rleft .knobwrap{color:#d6dae0}.skin-x6200 .rleft .knobwrap span{display:block}.skin-x6200 .ring{color:#aab;font-size:9px}
.skin-x6200 .knob.small{width:58px;height:58px}
.xbrand{display:flex;gap:6px;align-items:center;justify-content:center;width:100%}
.xbrand>span{background:#141518;border-radius:5px;padding:7px 8px;font:700 10px/1 system-ui;letter-spacing:1px;color:#e6e9ee;white-space:nowrap}
.skin-x6200 .xbrand .key{min-width:0;padding:5px 6px;font-size:10px}
.xkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.xkeys .key{min-width:0;border-radius:9px;background:linear-gradient(180deg,#26282c,#141517);padding:7px 2px}
.skin-x6200 .rscreen{background:#030611;border:6px solid #0c0d10;border-radius:6px;box-shadow:0 0 0 2px #55595f}
.xmain{display:grid;grid-template-columns:110px minmax(0,1fr) 170px;gap:6px;align-items:stretch}
.xside{display:flex;flex-direction:column;gap:5px}
.xbox{border:1px solid #2f5aa8;background:#0a1630;border-radius:3px;padding:3px 6px;display:flex;flex-direction:column;gap:2px;color:#fff}
.xbox small{font-size:10px;color:#9fc3ff}.xbox b{font:700 15px ui-monospace,monospace}.xbox.inh{border-color:#3a2030;background:#1a0d14}.xbox.inh b{color:#866}
.xbox.vfo.b .freq{font:700 18px ui-monospace,monospace;color:#d9e2ff;white-space:nowrap}
.skin-x6200 .vfo.a .freq{font:700 56px/1 ui-monospace,"DejaVu Sans Mono",monospace;color:#3dff5a;text-shadow:0 0 8px #3dff5a55;letter-spacing:1px}
.skin-x6200 .freq span.ts{outline:2px solid #fff;outline-offset:1px;border-radius:2px}.skin-x6200 .freq span.ts::before{content:none}
.xline{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:11px;margin:4px 0}.xline .vsub{color:#ffd36a;font-size:12px}
.xscale{display:flex;justify-content:space-between;font:700 10px system-ui;color:#fff;padding:0 2px}.xscale .r{color:#ff4b5c}
.sbar{height:12px;background:#0b1424;border:1px solid #23395f;position:relative;overflow:hidden}.sbar.sm{height:7px}
.sfill{height:100%;width:0;background:linear-gradient(90deg,#3dff5a 0,#3dff5a 60%,#ff3048 60%,#ff3048 100%);background-size:var(--w,100%) 100%;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,#0000 5px 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,#0000 5px 7px)}
#meterA.sfill{background:linear-gradient(90deg,#3dff5a,#b8ff3d 50%,#ffe14d 60%,#ff3048)}
.xread{font-size:10px;color:#9fc3ff;margin-top:2px}.xread b{color:#fff}
.xscope{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:4px}
.skin-x6200 canvas.scope{height:105px}.skin-x6200 canvas.wfall{height:80px}
.skin-x6200 .xscope .mini{grid-column:auto;border:1px solid #23395f;padding:2px;box-shadow:none}.skin-x6200 .xscope .mini canvas{height:170px}
.skin-x6200 .softkeys{grid-template-columns:repeat(5,1fr)}
.skin-x6200 .softkeys button{background:#0a1630;border:1px solid #2f5aa8;border-radius:2px;font-size:10.5px}
.softhw{grid-area:softhw;display:none}
.skin-x6200 .softhw{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0 6px}
.skin-x6200 .softhw .key{border-radius:7px;font-size:12px;padding:7px 0;background:linear-gradient(180deg,#2b2d31,#111214)}
.skin-x6200 .rright{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:0;background:#26282c;border-radius:10px;padding:10px}
.skin-x6200 .grille{display:block;width:150px;height:110px;border-radius:12px;background:radial-gradient(circle,#050505 40%,#0000 43%) 0 0/8px 8px,#3a3c40;box-shadow:inset 0 2px 6px #000}
.skin-x6200 .knob.main{width:175px;height:175px}
.skin-x6200 .knob.main .cap{background:radial-gradient(circle at 50% 50%,#1b1c1f 0 56%,#0000 57%),repeating-conic-gradient(#2b2d31 0 4deg,#131416 4deg 8deg);box-shadow:0 6px 14px #000c,0 0 0 4px #1a1b1e}
.skin-x6200 .knob.main .dimple{width:30%;height:30%;left:35%;top:12%;background:radial-gradient(circle at 45% 40%,#2c2e33,#0d0e10);box-shadow:inset 0 3px 6px #000,0 1px 0 #ffffff22;transform-origin:50% 127%}
.xright-keys{display:flex;gap:6px}.xright-keys .key{min-width:0;padding:7px 8px}

#radio .astatrow{font:700 12px system-ui;padding:3px 8px;border-radius:4px;background:#0b1424;color:#9fb6da;border:1px solid #23395f}
#radio .astatrow.g{color:#39ff7a;border-color:#1f7a3a}#radio .astatrow.a{color:#ffb000;border-color:#7a5a1f}#radio .astatrow.r{color:#ff5a6e;border-color:#7a1f2a}
/* --- plan v2 additions (both skins) --- */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.kgrid .key{min-width:0;padding:7px 2px;font-size:10.5px}
.rleft .ring,.knobwrap .ring{display:block;font-size:9px;color:#8a929c}
.chipb.cov{background:#5a3a0e;border-color:#ffb000;color:#ffd27a}.chipb.mem{background:#0e2a5a;border-color:#3a7be0;color:#fff;font-weight:700}
.chipb.on{background:#0e5a2c}
#srit.on-g{color:#bfffd5}
.speak{position:absolute;top:0;bottom:0;width:2px;background:#ff3048;left:0}
.xscale.tx{color:#55606e;font-weight:400;font-size:9px;justify-content:flex-start}
.skin-x6200 .freq span.ts{outline:none;background:#1f9d3a;color:#fff;border-radius:2px;text-shadow:none}
.xbrand .lamp{margin-right:6px}
.skin-x6200 .xkeys .key small{font-size:8.5px}
.skin-x6200 .xread #irxs .chipb{font-size:9px;padding:0 3px}
.skin-x6200 .xside .xbox b{font-size:13px}
/* ================= layout modes (set by radio.js fit()) =================
   .fixed = desktop / tablet / phone landscape: design canvas at the real radio's aspect, scaled to the viewport
   .stack = phone portrait: screen on top full width, meters, then big knob + keys                         */
body.radiomode header,body.radiomode nav#tabs{display:none}
body.radiomode #radio{max-width:none;padding:4px 4px 0}
body.radiomode{overflow-x:hidden}
.rigbar{gap:6px;margin:0 0 4px;font-size:12px}.rigbar .key{min-width:0;padding:4px 10px}
.rigbar .rnote{opacity:.75}
#rhint{background:#2a2410;border:1px solid #6b5a1f;color:#ffd27a;padding:6px 10px;border-radius:6px;margin:0 0 6px;font-size:13px}
#rstage{margin:0 auto;position:relative}
.rig.fixed{transform-origin:0 0;position:absolute;left:0;top:0}
/* IC-7760 design canvas 1620 x 600 (≈2.7:1) */
.rig.fixed.skin-ic7760{grid-template-columns:176px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) auto;padding:20px 18px 10px;gap:10px}
.fixed.skin-ic7760 .rscreen{min-height:0}
.fixed .row2{display:grid;grid-template-columns:640px minmax(0,1fr);gap:10px;align-items:center}
.fixed .meters{grid-template-columns:1fr 1fr;gap:8px}
.fixed .vfos{grid-template-columns:1fr;gap:4px}
.fixed.skin-ic7760 .vfo .freq{font-size:58px}.fixed.skin-ic7760 .vfo.b .freq{font-size:34px}
.fixed canvas.scope{flex:1 1 0;height:0;min-height:60px}
.fixed.skin-ic7760 canvas.wfall{height:96px;flex:0 0 auto}
.fixed.skin-ic7760 .rright{grid-template-columns:1fr;gap:8px;padding-top:12px}
.fixed .modes5{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.fixed .modes5 .key{min-width:0;padding:7px 0}
.dialrow{display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.fixed.skin-ic7760 .knob.main{width:200px;height:200px;margin:0}
.fixed .rbottom{flex-wrap:nowrap}.fixed .rbottom .key{flex:1;max-width:120px}
/* X6200 design canvas 1560 x 650 (2.4:1) */
.rig.fixed.skin-x6200{grid-template-columns:220px minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr) auto;padding:20px 36px 14px;gap:12px}
.fixed.skin-x6200 .rscreen{min-height:0}
.fixed.skin-x6200 .vfo.a .freq{font-size:64px}
.fixed .xscope{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr)}.fixed .xscope>div:first-child{display:flex;flex-direction:column;min-height:0}
.fixed.skin-x6200 canvas.wfall{height:110px;flex:0 0 auto}
.fixed.skin-x6200 .xscope .mini{display:flex;flex-direction:column}.fixed.skin-x6200 .xscope .mini canvas{flex:1;height:0}
.fixed.skin-x6200 .rleft{justify-content:space-between}
.fixed.skin-x6200 .knob.main{width:190px;height:190px}
/* ---- phone portrait: stacked ---- */
.rig.stack,.rig.stack.skin-x6200{grid-template-columns:1fr 1fr;grid-template-areas:"screen screen" "right right" "left left" "bottom bottom";padding:10px 8px;gap:8px}
.stack .rleft{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-top:0}
.stack .rright{padding-top:0}.stack .knob.main,.stack.skin-x6200 .knob.main{width:min(62vw,240px);height:min(62vw,240px)}
.stack .softkeys{grid-template-columns:repeat(4,1fr)}.stack .softkeys button{padding:9px 2px;font-size:12px}
.stack .row2{display:flex;flex-direction:column;gap:6px}
.stack .meters{gap:4px}.stack .vfos{grid-template-columns:1fr}.stack .vfo .freq{font-size:clamp(34px,11vw,52px)}.stack .vfo.b .freq{font-size:clamp(20px,6vw,30px)}
.stack canvas.scope{height:100px}.stack canvas.wfall{height:70px}.rig.stack .model{display:none}.stack .key{padding:10px 6px;font-size:12px}
.stack .modes5{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;grid-column:1/3}.stack .modes5 .key{min-width:0}
.stack .dialrow{grid-column:1/3;justify-content:center;align-items:center;gap:20px}
.stack .rbottom .key{min-width:0;flex:1 0 22%}
.rig.stack.skin-x6200{grid-template-columns:1fr;grid-template-areas:"screen" "softhw" "right" "left";padding:10px 12px}
.stack.skin-x6200 .bar,.stack.skin-x6200 .grille{display:none}
.stack .xmain{grid-template-columns:1fr 1fr}.stack .xmain .xcenter{grid-column:1/3;order:-1}.stack .xmain .xside{flex-direction:row}.stack .xmain .xside .xbox{flex:1}
.stack .xscope{grid-template-columns:1fr}.stack.skin-x6200 .xscope .mini canvas{height:80px}
.stack.skin-x6200 .softhw{gap:6px;padding:0}.stack.skin-x6200 .softkeys{grid-template-columns:repeat(5,1fr)}.stack.skin-x6200 .softkeys button{font-size:10px;padding:7px 1px}
.stack.skin-x6200 .rleft{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.stack.skin-x6200 .rleft .xbrand{grid-column:1/4;order:-1}.stack.skin-x6200 .xkeys{grid-column:2}
.stack.skin-x6200 .vfo.a .freq{font-size:clamp(34px,11vw,52px)}
:fullscreen #radio,:-webkit-full-screen #radio{background:var(--bg)}

/* ---- phones ---- */
body.radiomode.rphone{overscroll-behavior:none}
body.radiomode.rphone #radio{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) 0 max(4px,env(safe-area-inset-left))}
body.rphone .rigbar .rnote{display:none}
body.rphone .rigbar{font-size:12px;gap:4px}body.rphone .rigbar .key{min-height:34px;padding:4px 8px;font-size:12px}
body.rphone .rigbar input{width:120px;font-size:16px}
body.radiomode.rrot{overflow:hidden;height:100dvh}
body.rrot #radio{background:var(--bg);overflow:hidden;padding:4px}
/* portrait opt-out layout: AO VIVO/clock/mode on top, big VFO A, full-width S meter, scope+waterfall, big knob + keys ≥44px */
.stack .topbar>.chipb:not(#smode):not(#sauto):not(#sch),.stack .topbar .muted{display:none}
.stack #sutc{display:none}.stack .iconsrow>*:not(#ibusy):not(#irec):not(#irx){display:none}
.stack .meters{grid-template-columns:1fr}.stack .meter:nth-child(2){display:none}
.stack .meter svg{max-height:120px}
.stack .vfo.b .vlabel,.stack .vfo.b .vsub{font-size:11px}
.stack .mini{display:none}
.stack .key,.stack .softkeys button,.stack .softhw .key{min-height:44px}
.stack .xmain .xside:first-child{display:none}

/* slim top bar outside the radio */
#radio .rigbar{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;padding:3px 6px;overflow-x:auto;scrollbar-width:none;min-height:34px}
#radio .rigbar::-webkit-scrollbar{display:none}
#radio .rigbar .key{padding:3px 8px;min-height:28px;font-size:12px;white-space:nowrap;flex:0 0 auto}
#radio .rigbar select{font-size:12px;padding:3px;flex:0 0 auto}
#radio .rigbar #rfin{width:78px;font-size:12px;flex:0 0 auto}
#radio #rbands{display:flex;gap:3px;flex:0 0 auto}
#radio #rbands .band{display:flex;flex-direction:column;line-height:1;align-items:center;padding:2px 7px}
#radio #rbands .band small{font-size:9px;opacity:.75}
#radio #rbands .band.on{background:#f5a623;color:#111;border-color:#f5a623}
#radio #rbands .band.scan small::after{content:" ●";color:#00e676}
body.rphone #radio .rigbar .key{min-height:32px}
#tapover{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#tapover button{font-size:22px;padding:18px 30px;border-radius:14px;border:0;background:#00c853;color:#fff;font-weight:700;box-shadow:0 4px 24px #000a}
#tapover a{color:#ddd;font-size:13px}
#radio #scov{padding:0 4px}
body.rphone #radio .rigbar #rfin{font-size:16px;width:92px}

/* editable VFO digits */
.digits{cursor:default;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.digits .dg{cursor:ns-resize;border-radius:3px;position:relative;display:inline-block}
.digits .dg.sel{background:rgba(255,255,255,.14);box-shadow:inset 0 -3px 0 #f5a623}
.digits .fedit{font-size:.32em;opacity:.55;cursor:text;vertical-align:super;margin-left:.25em;padding:0 .2em}
.digits .fedit:hover{opacity:1}
.digits.bad{animation:fbad .6s}
@keyframes fbad{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#fedit{font:600 20px ui-monospace,Menlo,monospace;padding:8px 10px;border-radius:8px;border:2px solid #f5a623;background:#0b1220;color:#fff;box-shadow:0 6px 30px #000c}
#fedit.bad{border-color:#ff3b3b}
.dialf .unit{font-size:.4em;opacity:.7}

body.radiomode{padding-bottom:env(safe-area-inset-bottom,0px)!important}

.digits .dg:hover{background:linear-gradient(rgba(95,176,255,.22) 50%,rgba(255,90,90,.16) 50%)}

/* phone landscape (.ph): bigger scale, full height, decorative/TX parts hidden */
body.radiomode.rphone #radio{padding-bottom:0}
body.radiomode.rfit:not(.rrot){height:100dvh;overflow:hidden}
.rig.ph .tx,.rig.ph .model,.rig.ph .brand,.rig.ph .bar{display:none!important}
.rig.ph.skin-ic7760{grid-template-columns:150px minmax(0,1fr) 240px;padding:8px 10px 6px;gap:8px}
.rig.ph .row2{grid-template-columns:300px minmax(0,1fr)}
.rig.ph .meters{grid-template-columns:1fr}.rig.ph .meters .meter:nth-child(2){display:none}
.rig.ph.skin-ic7760 .vfo .freq{font-size:64px}.rig.ph.skin-ic7760 .vfo.b .freq{font-size:36px}
.rig.ph.skin-ic7760 .knob.main{width:190px;height:190px}
.rig.ph.skin-ic7760 .rright{padding-top:0;gap:6px}
.rig.ph .iconsrow .chipb.off,.rig.ph .iconsrow .chipb.inh{display:none}
.rig.ph.skin-ic7760 canvas.wfall{height:70px}
.rig.ph .key{font-size:16px}.rig.ph .softkeys button{font-size:17px;min-height:46px}
.rig.ph .rbottom .key{max-width:none;min-height:48px;font-size:17px}
.rig.ph.skin-x6200{grid-template-columns:190px minmax(0,1fr) 220px;padding:8px 12px 6px;gap:8px}
.rig.ph.skin-x6200 .vfo.a .freq{font-size:72px}
.rig.ph.skin-x6200 .knob.main{width:180px;height:180px}
.rig.ph.skin-x6200 canvas.wfall{height:80px}
.rig.ph .topbar .chipb{font-size:14px}
.rig.ph .rscreen,.rig.ph .rright,.rig.ph .rleft{min-width:0;overflow:hidden}
.rig.ph.skin-ic7760 .knob.main{width:170px;height:170px}
.rig.ph.skin-ic7760 .mini canvas{height:90px}
.rig.ph .xscale.tx,.rig.ph.skin-x6200 .xbrand>span{display:none}
.rig.ph.skin-x6200 .vfo.a .freq{font-size:62px}
.rig.ph.skin-x6200 .softkeys button{min-height:40px;font-size:16px}
.rig.ph.skin-x6200 .xside .xbox{padding:2px 6px}
.rig.ph.skin-x6200 canvas.wfall{height:60px}
.rig.ph.skin-x6200 .xscope{min-height:150px}
.rig.ph .topbar .chipb.off,.rig.ph .topbar .chipb:not([id]),.rig.ph .topbar .muted{display:none}
.rig.ph.skin-ic7760 .rleft{display:grid;grid-template-columns:1fr 1fr;align-content:space-between;gap:5px}
.rig.ph.skin-ic7760 .rleft>.kgrid{grid-column:1/-1}
.rig.ph.skin-ic7760 .rleft .knob.small{width:54px;height:54px}
.rig.ph .meter svg{max-height:96px}
.rig.ph .astatrow{padding:1px 6px;font-size:13px}
.rig.ph.skin-x6200 .xmain>.xside:first-child{display:none}
.rig.ph.skin-x6200 .xmain{grid-template-columns:minmax(0,1fr) 210px}
.rig.ph.skin-ic7760 .iconsrow{display:none}
.rig.ph.skin-ic7760 canvas.wfall{height:56px}
.rig.ph.skin-x6200 .xscope{min-height:0}
.rig.ph.skin-x6200 canvas.wfall{height:48px}
.rig.ph .softkeys{flex:0 0 auto}
.rig.ph.skin-ic7760 .softkeys button{min-height:40px}
.rig.ph.skin-ic7760 .rbottom .key{min-height:42px;padding:3px 0}
.rig.ph.skin-ic7760 .meter svg{max-height:84px}
.rig.ph.skin-ic7760 .vfo .freq{font-size:60px}
.rig.ph.skin-ic7760 .rright{grid-template-rows:auto auto minmax(0,1fr);align-content:stretch}
.rig.ph.skin-ic7760 .mini canvas{height:64px;width:100%}
.rig.ph.skin-ic7760 .mini{min-width:0;overflow:hidden}
.rig.ph.skin-ic7760 .modes5 .key{font-size:15px;padding:6px 0;min-height:36px}
.rig.ph.skin-ic7760 .knob.main{width:150px;height:150px}
.rig.ph.skin-ic7760 .dialrow{min-height:0}
.rig.ph.skin-ic7760 .rright{display:flex!important;flex-direction:column;gap:6px}
.rig.ph.skin-ic7760 .rright>.mini,.rig.ph.skin-ic7760 .rright>.modes5{flex:0 0 auto;width:100%}
.rig.ph.skin-ic7760 .rright>.dialrow{flex:1 1 0;min-height:0;justify-content:space-between;align-items:center}

/* phone landscape: small gap line between the band bar and the radio */
body.rphone #radio .rigbar{margin:0 0 8px;border-bottom:1px solid #2a3a55;padding-bottom:4px}

/* rotated portrait: slim band strip (physical right edge), no outer margins */
body.rrot #radio .rigbar{margin:0 0 3px;padding:0 0 2px;min-height:0;gap:3px;border-bottom:1px solid #2a3a55}
body.rrot #radio .rigbar .key{min-height:24px;padding:1px 6px;font-size:11px;line-height:1.1}
body.rrot #radio #rbands .band{padding:1px 5px}
body.rrot #radio #rbands .band small{font-size:8px}
body.rrot #radio .rigbar select{font-size:11px;padding:1px 2px;height:24px}
body.rrot #radio .rigbar #rfin{font-size:16px;width:70px;height:24px;padding:0 4px}
body.rrot #rstage{margin:0}
body.radiomode.rfit{min-height:100svh;height:100dvh;overflow:hidden}

/* active (selected) digit = dial step: clear amber block */
.digits .dg.sel{background:#f5a623!important;color:#111!important;box-shadow:0 0 0 2px #f5a623;text-shadow:none}
.skin-x6200 .digits .dg.sel{background:#f5a623!important;color:#111!important}

#radio .aclip{font:700 12px system-ui;margin-left:6px;padding:2px 8px;border-radius:4px;background:#13233d;color:#ffb000;border:1px solid #7a5a1f;cursor:pointer}
#radio .aclip[hidden]{display:none}
.rig.ph .aclip{font-size:13px;padding:1px 6px}

#radio .chipb.tap{cursor:pointer}#radio .chipb.tap:hover{filter:brightness(1.3)}
body.radiomode{overflow-x:hidden}