/* ЭТАП 3: корпус прибора. Только внешний вид. Цвета берём из theme.css, текстуры рисует js/tex.js (потом заменим на твои файлы). */
body { background:#0a0c0b; }
#app { max-width:480px; position:relative; gap:9px;
  padding:max(10px, calc(env(safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px))) max(10px, env(safe-area-inset-right,0px)) max(10px, env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px));
  background:var(--metal, linear-gradient(160deg,#5b605d,#3c403e)) 0 0/100% 100% no-repeat, #4d524f; image-rendering:pixelated;
  box-shadow:inset 0 0 0 2px #15181a, inset 0 0 0 4px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.55); }
/* верхний монитор: утопленный экран */
#top { position:relative; background:var(--glass); border:2px solid; border-color:#0b0d0c #6b706d #6b706d #0b0d0c; padding:8px 10px 6px;
  box-shadow:0 0 0 2px #25282a, 0 0 0 4px #0d0f0e, 0 2px 0 4px rgba(255,255,255,.14), inset 0 0 26px rgba(82,255,138,.10), inset 0 0 6px #000; }
#top::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
#top.alert { border-color:#2a0b0e #a33 #a33 #2a0b0e; }
#top.alert #stg::after { content:"  [!] СБОЙ"; }
/* шкала: сегменты и метки 33 / 66 */
#barwrap { margin:6px 0 16px; background:rgba(0,0,0,.45); border:1px solid rgba(82,255,138,.7); padding:2px; height:20px; }
#bar { -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px); mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px); }
#barwrap i { top:-5px; bottom:-5px; opacity:.9; z-index:1; }
#barwrap i::after { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:2px; font:9px "HudMono",monospace; color:var(--g); opacity:.8; font-style:normal; }
#barwrap i:nth-of-type(1)::after { content:"33"; } #barwrap i:nth-of-type(2)::after { content:"66"; }
/* нижняя панель */
#lower { padding:8px; background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.34)), var(--plate, #3a3e3c); background-size:auto, 96px 96px; image-rendering:pixelated;
  border:2px solid; border-color:#0d0f0e #6b706d #6b706d #0d0f0e; box-shadow:0 0 0 2px #1a1d1c, inset 0 0 22px rgba(0,0,0,.5); }
/* полоса команд — тёмный LCD */
#cmds { background:#020b05; border:2px solid; border-color:#050706 #5d625f #5d625f #050706; padding:6px; box-shadow:inset 0 0 12px rgba(0,0,0,.8); }
.cmd { border-color:rgba(82,255,138,.55); }
/* плитки — металлические пластины с болтами */
.ctl { --base:linear-gradient(150deg, rgba(255,255,255,.16), rgba(0,0,0,.16)), var(--plate, #8b908d); --bsz:auto, 96px 96px; --bpos:0 0, 0 0; --brep:no-repeat, repeat;
  border:2px solid; border-color:#c9cdc8 #3a3d3b #3a3d3b #c9cdc8;
  background-image:var(--base); background-size:var(--bsz); background-position:var(--bpos); background-repeat:var(--brep); image-rendering:pixelated;
  box-shadow:0 2px 0 rgba(0,0,0,.6); }
.ctl::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(circle at 6px 6px,#a8aeab 0 1.4px,#111 2px 3px,transparent 3.5px) no-repeat,
             radial-gradient(circle at calc(100% - 6px) 6px,#a8aeab 0 1.4px,#111 2px 3px,transparent 3.5px) no-repeat,
             radial-gradient(circle at 6px calc(100% - 6px),#a8aeab 0 1.4px,#111 2px 3px,transparent 3.5px) no-repeat,
             radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#a8aeab 0 1.4px,#111 2px 3px,transparent 3.5px) no-repeat; }
/* иконки-стрелки */
.ic { width:.9em; height:.9em; display:inline-block; vertical-align:-.1em; fill:currentColor; }
.ic.r90 { transform:rotate(90deg); } .ic.r180 { transform:rotate(180deg); } .ic.r270 { transform:rotate(270deg); } .ic.fx { transform:scaleX(-1); }
/* компактнее: полоса команд и низкие экраны */
#cmds { min-height:150px; gap:5px; padding:5px; }
.cmd { padding:4px 8px; } .cmd .tx { font-size:16px; margin-bottom:3px; } .tb { height:5px; }
@media (max-height:700px) {
  #app { gap:6px; } #ecg { height:40px; } #top { padding:6px 10px 4px; }
  #barwrap { margin:4px 0 14px; height:18px; } #pct { font-size:19px; }
  #lower { padding:6px; gap:6px; } #cmds { min-height:136px; } .cmd .tx { font-size:15px; }
}

/* ЭТАП 3.1: гравировка и «настоящие» органы управления */
.ctl .nm { color:#15181a; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.ctl .ty { color:#232725; opacity:.8; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.ctl .vl { color:#15181a; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.ctl:active { transform:translateY(1px); filter:brightness(.93); }
/* кнопка: светлый пластиковый колпак */
.ctl.button { background-image:radial-gradient(circle closest-side at 38% 30%, rgba(255,255,255,.85) 0 12%, transparent 60%), radial-gradient(circle closest-side, #e3e6da 0 56%, #a2a69a 60% 76%, #1c1e1d 79% 96%, transparent 100%), var(--base);
  background-size:42px 42px, 52px 52px, var(--bsz); background-position:right 16px center, right 12px center, var(--bpos); background-repeat:no-repeat, no-repeat, var(--brep); }
/* удержание: тёмный резиновый колпак + светодиодная шкала */
.ctl.hold { padding-bottom:22px; background-image:radial-gradient(circle closest-side at 38% 30%, rgba(255,255,255,.28) 0 12%, transparent 60%), radial-gradient(circle closest-side, #444847 0 54%, #1e201f 58% 74%, #070808 77% 96%, transparent 100%), var(--base);
  background-size:42px 42px, 52px 52px, var(--bsz); background-position:right 16px center, right 12px center, var(--bpos); background-repeat:no-repeat, no-repeat, var(--brep); }
.ctl.hold::before { content:""; position:absolute; left:10px; right:10px; bottom:8px; height:8px; border:1px solid #000; background:linear-gradient(90deg, var(--g) calc(var(--f,0) * 100%), #0b0e0c 0); box-shadow:inset 0 0 3px #000, 0 1px 0 rgba(255,255,255,.35); }
/* тумблер: корпус, рычажок слева (выкл) / справа (вкл) */
.ctl.toggle { background-image:radial-gradient(circle closest-side at 35% 30%, #f4f6f0, #a4a9a3 60%, #4b504d 96%, transparent 100%), linear-gradient(#050606, #161918), linear-gradient(#a3a8a4, #3b3f3d), var(--base);
  background-size:24px 24px, 56px 26px, 62px 32px, var(--bsz); background-repeat:no-repeat, no-repeat, no-repeat, var(--brep);
  background-position:right 45px center, right 15px center, right 12px center, var(--bpos); }
.ctl.toggle.on { background-position:right 17px center, right 15px center, right 12px center, var(--bpos); }
.ctl.toggle .vl { top:auto; bottom:8px; right:12px; font-size:12px; }
/* рычаг */
.trk { width:20px; border:1px solid #000; border-radius:9px; background:linear-gradient(90deg,#070908,#262927 50%,#070908); box-shadow:inset 0 0 5px #000, 0 1px 0 rgba(255,255,255,.4); }
.hd { left:-7px; right:-7px; height:18px; margin-top:-9px; border:1px solid #111; border-radius:4px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), linear-gradient(90deg,#5b605d,#dde0da 40%,#8d928e 62%,#474b49); box-shadow:0 2px 2px rgba(0,0,0,.7); }
/* ручка */
.dial { border:3px solid #a9aeaa; box-shadow:0 2px 3px rgba(0,0,0,.7), 0 0 0 3px #2d302e;
  background:repeating-conic-gradient(rgba(255,255,255,.10) 0 6deg, transparent 6deg 12deg), radial-gradient(circle at 35% 30%, #5d625f, #1a1c1b 58%, #070808); }
.dial i { background:#eceee5; box-shadow:0 0 2px #000; }
/* селектор: клавиши */
.sel span { border:2px solid; border-color:#f0f2ea #6a6e6a #6a6e6a #f0f2ea; background:linear-gradient(#dcdfd5,#a8aca2); color:#15181a; font-weight:bold; text-shadow:0 1px 0 rgba(255,255,255,.5); box-shadow:0 2px 0 #343735; }
.sel span.on { background:linear-gradient(#222524,#0b0d0c); border-color:#050606 #4a4e4c #4a4e4c #050606; color:var(--g); text-shadow:0 0 6px var(--g); box-shadow:inset 0 2px 3px #000; transform:translateY(2px); }
/* крышка: металл с предупреждающими полосами */
.cover { color:#15181a; background-image:repeating-linear-gradient(-45deg,#c9a51f 0 8px,#1b1b19 8px 16px), repeating-linear-gradient(-45deg,#c9a51f 0 8px,#1b1b19 8px 16px), var(--base);
  background-size:100% 10px, 100% 10px, var(--bsz); background-position:top, bottom, var(--bpos); background-repeat:no-repeat, no-repeat, var(--brep); border:2px solid; border-color:#d3d7d2 #2f3230 #2f3230 #d3d7d2; }
.arrow-up { border-bottom-color:#15181a; }
/* слот: карта и гнездо */
.chip { background:linear-gradient(135deg,#d0d3ca,#8b908a); border:2px solid; border-color:#f0f2ea #4b4f4c #4b4f4c #f0f2ea; color:#15181a; box-shadow:0 2px 2px rgba(0,0,0,.6); }
.hole { background:#060807; border:2px dashed #5a5e5b; color:#5a5e5b; box-shadow:inset 0 0 8px #000, 0 1px 0 rgba(255,255,255,.35); }
.hole.hot { border-style:solid; border-color:var(--g); color:var(--g); background:#0a1a10; }
/* вектор */
.vector-seq { color:#15181a; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.vector-seq span { border:1px solid #232725 !important; background:rgba(0,0,0,.06); opacity:.8; }
.vector-seq span.done { opacity:1; background:#0b1a10; color:var(--g); border-color:var(--g) !important; text-shadow:0 0 5px var(--g); }