/* ─────────────────────────────────────────────────────────────
   Bancada de simulação — faceplate de gabinete + janela de leitura
   Paleta: alumínio escovado, tinta de silkscreen, verniz teal,
   lâmpadas âmbar/verde/vermelha de painel anunciador.
   ───────────────────────────────────────────────────────────── */
:root{
  --metal-1:#DCDED8;
  --metal-2:#CBCEC7;
  --panel:#E9EAE5;
  --panel-2:#F2F3EF;
  --edge:#B2B6AE;
  --edge-soft:#C8CBC3;
  --ink:#1B2320;
  --ink-2:#4C5450;
  --ink-3:#79817C;
  --readout-bg:#121A1B;
  --readout-bg-2:#0C1213;
  --readout-fg:#CFE1DD;
  --teal:#1F4E4A;
  --teal-hi:#2A6660;
  --amber:#E39B27;
  --green:#4C9A5B;
  --red:#A83A2C;
  --focus:#E39B27;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --label:'Saira Condensed', 'IBM Plex Sans Condensed', sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(0,0,0,.018) 1px 3px),
    linear-gradient(180deg, var(--metal-1), var(--metal-2));
  background-attachment:fixed;
  font-size:14px;
  line-height:1.45;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── tipografia de painel ── */
.lbl{
  font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--ink-2);
}
.lbl-xs{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--ink-3)}
.mono{font-family:var(--mono)}

/* ── layout ── */
.wrap{max-width:1480px;margin:0 auto;padding:18px 18px 48px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}
@media (max-width:1080px){.cols{grid-template-columns:minmax(0,1fr)}}

/* ── faceplate ── */
.faceplate{
  position:relative;
  background:linear-gradient(180deg,#F4F5F1,#E1E3DD);
  border:1px solid var(--edge);
  border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(0,0,0,.12);
  padding:16px 18px 14px;
  margin-bottom:14px;
}
.faceplate::before,.faceplate::after{
  content:"";position:absolute;top:9px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FBFCFA, #9DA29B 60%, #7C817B);
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}
.faceplate::before{left:9px}
.faceplate::after{right:9px}
.plate-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.plate-title{
  font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.20em;font-size:19px;margin:0;color:var(--ink);
}
.plate-sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em}

.grid-cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field input,.field select,.field textarea{
  background:var(--panel-2);
  border:1px solid var(--edge);
  border-radius:2px;
  padding:6px 8px;
  font-family:var(--mono);font-size:12.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.05) inset;
  min-width:0;width:100%;
}
.field textarea{resize:vertical;line-height:1.5}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding-top:14px}
.switch input{width:15px;height:15px;accent-color:var(--teal)}

/* ── faixa de estado (janela de leitura) ── */
.readout{
  margin-top:14px;
  background:linear-gradient(180deg,var(--readout-bg),var(--readout-bg-2));
  border:1px solid #2C3A3A;border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.35) inset;
  padding:10px 12px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 18px;
}
.ro-item{min-width:0}
.ro-k{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:9.5px;color:#6E837F}
.ro-v{font-family:var(--mono);font-size:13px;color:var(--readout-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-v.amber{color:var(--amber)}
.ro-v.dim{color:#5C6E6B}

/* ── trilho anunciador (assinatura) ── */
.rail{
  border:1px solid var(--edge);border-radius:3px;background:var(--panel);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  padding:12px 14px;margin-bottom:14px;
}
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.rail-track{display:flex;gap:0;overflow-x:auto;padding-bottom:4px}
.stop{
  flex:1 0 auto;min-width:98px;position:relative;
  padding:0 10px;text-align:center;
}
.stop + .stop::before{
  content:"";position:absolute;left:-2px;top:9px;width:4px;height:1px;background:var(--edge);
}
.lamp{
  width:13px;height:13px;border-radius:50%;margin:0 auto 6px;
  background:#A9AEA8;
  box-shadow:0 1px 2px rgba(0,0,0,.35) inset, 0 0 0 3px rgba(0,0,0,.05);
}
.lamp.ok{background:var(--green);box-shadow:0 0 8px rgba(76,154,91,.75), 0 1px 2px rgba(0,0,0,.25) inset}
.lamp.err{background:var(--red);box-shadow:0 0 8px rgba(168,58,44,.75), 0 1px 2px rgba(0,0,0,.25) inset}
.lamp.wait{background:var(--amber);box-shadow:0 0 9px rgba(227,155,39,.8);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lamp.wait{animation:none}}
.stop-n{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.06em}
.stop-t{font-family:var(--label);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;color:var(--ink-2);line-height:1.25;margin-top:2px}

/* ── abas ── */
.tabs{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:-1px;position:relative;z-index:2}
.tab{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;
  background:linear-gradient(180deg,#DDE0DA,#CFD2CB);
  border:1px solid var(--edge);border-bottom-color:var(--edge);
  border-radius:3px 3px 0 0;padding:8px 14px;cursor:pointer;color:var(--ink-2);
}
.tab[aria-selected="true"]{
  background:var(--panel);color:var(--ink);border-bottom-color:var(--panel);
  box-shadow:0 -2px 0 var(--teal) inset;
}
.panel{
  background:var(--panel);border:1px solid var(--edge);border-radius:0 3px 3px 3px;
  padding:18px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.panel h2{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:13px;margin:0 0 4px}
.panel .hint{color:var(--ink-3);font-size:12.5px;margin:0 0 16px;max-width:70ch}
.block{border-top:1px solid var(--edge-soft);padding-top:14px;margin-top:16px}
.block:first-of-type{border-top:0;padding-top:0;margin-top:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1 1 150px}

/* ── botões ── */
.btn{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;
  background:linear-gradient(180deg,var(--teal-hi),var(--teal));
  color:#EFF4F2;border:1px solid #17403C;border-radius:2px;
  padding:9px 14px;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(0,0,0,.2);
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.3) inset}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:linear-gradient(180deg,#F1F2EE,#E0E2DC);color:var(--ink);border-color:var(--edge)}
.btn.danger{background:linear-gradient(180deg,#B94A3A,#9A3225);border-color:#7E271C;color:#FBF0EE}
.btn.wide{width:100%}
.btnbar{display:flex;gap:8px;flex-wrap:wrap}

/* ── console ── */
.console{
  position:sticky;top:18px;
  background:linear-gradient(180deg,var(--readout-bg),var(--readout-bg-2));
  border:1px solid #2C3A3A;border-radius:3px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
  display:flex;flex-direction:column;max-height:calc(100vh - 36px);
}
.console-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border-bottom:1px solid #24302F;
}
.console-head .lbl{color:#8CA39E}
.console-list{overflow-y:auto;padding:8px 8px 12px}
.entry{border:1px solid #24302F;border-radius:2px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.entry-head{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer}
.entry-head:hover{background:rgba(255,255,255,.04)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--green);box-shadow:0 0 6px rgba(76,154,91,.7)}
.dot.err{background:var(--red);box-shadow:0 0 6px rgba(168,58,44,.7)}
.dot.wait{background:var(--amber);animation:blink 1s steps(2,end) infinite}
.entry-path{font-family:var(--mono);font-size:12px;color:var(--readout-fg);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry-meta{font-family:var(--mono);font-size:10.5px;color:#6E837F;white-space:nowrap}
.entry-body{border-top:1px solid #24302F;padding:8px 9px;display:grid;gap:8px}
pre.json{
  margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:#B8CFCA;background:rgba(0,0,0,.28);border:1px solid #223030;border-radius:2px;
  padding:8px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}
pre.json.err{color:#E7A99F;border-color:#4A2A24}
.empty{color:#5C6E6B;font-family:var(--mono);font-size:12px;padding:22px 12px;text-align:center}

/* ── diversos ── */
.note{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  background:#F0EEE4;border-left:3px solid var(--amber);padding:8px 10px;border-radius:0 2px 2px 0;
}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.steps li{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;padding:5px 8px;border:1px solid transparent;border-radius:2px}
.steps li.active{border-color:var(--edge);background:var(--panel-2)}
.steps li .st{width:9px;height:9px;border-radius:50%;background:#B4B8B0;flex:0 0 auto}
.steps li .st.ok{background:var(--green)}
.steps li .st.err{background:var(--red)}
.steps li .st.wait{background:var(--amber);animation:blink 1s steps(2,end) infinite}
.pager{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.kv{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.kv b{color:var(--ink);font-weight:600}
.tag{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--edge);border-radius:2px;padding:1px 5px}

/* ── cabine ── */
.cab-glass{
  background:linear-gradient(180deg,var(--readout-bg),var(--readout-bg-2));
  border:1px solid #2C3A3A;border-radius:3px;
  box-shadow:0 3px 12px rgba(0,0,0,.3) inset;
  padding:14px;
}
.reels{display:grid;gap:7px}
.reel{display:grid;gap:7px}
.cell{
  aspect-ratio:1/.82;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:26px;font-weight:500;
  color:var(--amber);background:rgba(255,255,255,.035);
  border:1px solid #26332F;border-radius:2px;
  text-shadow:0 0 10px rgba(227,155,39,.35);
}
.cell.spinning{color:#5E736F;text-shadow:none}
.cell .sym-name{font-size:9.5px;letter-spacing:.05em;line-height:1.15;text-align:center;padding:0 3px;word-break:break-word}
.cell.hit{border-color:var(--amber);background:rgba(227,155,39,.10)}
.cab-strip{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.credit{font-family:var(--mono);font-size:26px;color:var(--readout-fg);letter-spacing:.02em}
.credit small{font-family:var(--label);font-size:10px;letter-spacing:.16em;color:#6E837F;display:block}
.win-amount{font-family:var(--mono);font-size:26px;color:var(--amber)}
.status-bar{
  margin-top:12px;padding:9px 11px;border:1px solid #26332F;border-radius:2px;
  background:rgba(0,0,0,.25);font-family:var(--label);text-transform:uppercase;
  letter-spacing:.13em;font-size:12px;color:#9FB5B0;
}
.btn.spin{font-size:15px;letter-spacing:.22em;padding:16px 34px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{
  width:28px;height:28px;border:1px solid var(--edge);border-radius:2px;background:linear-gradient(180deg,#F1F2EE,#DFE1DB);
  cursor:pointer;font-family:var(--mono);line-height:1;
}
.stepper span{font-family:var(--mono);font-size:14px;min-width:22px;text-align:center}
@media (prefers-reduced-motion:reduce){.cell{transition:none}}