/* ============================================================
   SAMBOX • CONSOLE DO OPERADOR — v3 "Gabinete"
   Camada de direção de arte sobre o style.css.
   Conceito: um gaveteiro/fichário de verdade. As abas são frentes
   de gaveta com etiqueta e alça; a gaveta ativa fica puxada.
   O neon roxo vira UM fio de luz por painel — o resto é chapa.
   ============================================================ */

:root{
  --bg:#0a0714;
  --card-bg:#120b1e;
  --sidebar-bg:#0b0713;
  --border:#241634;
  --line-soft:#1b1228;
  --steel:#171022;          /* face de gaveta */
  --steel-2:#120b1c;
  --primary:#b026ff;
  --primary-dark:#7d18c4;
  --primary-glow:rgba(176,38,255,.5);
  --accent:#d9a4ff;
  --phosphor:#46e0a0;       /* "online"/ok, usado com parcimônia */
  --amber:#ffb454;          /* demo/atenção */
  --text:#ece6f5;
  --text-primary:#ece6f5;
  --text-secondary:#c4b8d6;
  --text-muted:#7d7090;
  --display:'Chakra Petch','Space Grotesk',sans-serif;
}

/* utilitário que o JS usa para esconder (não existia em lugar nenhum) */
.hidden{ display:none !important; }

body{ background:
    radial-gradient(1100px 640px at 100% -10%, rgba(176,38,255,.06), transparent 60%),
    var(--bg);
}

/* ---------- MOVIMENTO: keyframes do gabinete ---------- */
@keyframes drawerPull{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes threadOnV{ 0%{ transform:scaleY(0); opacity:0; } 55%{ opacity:1; } 100%{ transform:scaleY(1); opacity:.45; } }
@keyframes breatheSoft{ 0%,100%{ opacity:.35; } 50%{ opacity:.6; } }
@keyframes flickerOn{ /* liga como letreiro de neon */
  0%{ opacity:0; } 8%{ opacity:.9; } 14%{ opacity:.12; } 22%{ opacity:1; }
  30%{ opacity:.35; } 40%{ opacity:1; } 55%{ opacity:.8; } 100%{ opacity:1; }
}
@keyframes kickerDraw{ from{ width:0; opacity:0; } to{ width:22px; opacity:1; } }
:root{ --spring:cubic-bezier(.34,1.4,.44,1); }

/* troca de aba = puxar outra gaveta: a seção desliza e os painéis entram em cascata */
.content-section.active{ animation:drawerPull .4s cubic-bezier(.22,1,.36,1) both; }
.content-section.active > *{ animation:riseIn .45s cubic-bezier(.22,1,.36,1) both; }
.content-section.active > *:nth-child(1){ animation-delay:.05s }
.content-section.active > *:nth-child(2){ animation-delay:.13s }
.content-section.active > *:nth-child(3){ animation-delay:.21s }
.content-section.active > *:nth-child(n+4){ animation-delay:.29s }

/* ---------- SIDEBAR: flanco do gabinete ---------- */
.sidebar{
  position:relative; padding:26px 16px;
  background:linear-gradient(180deg,#0d0816,#080510);
  border-right:1px solid var(--border);
  animation:none;
}
.sidebar::after{ /* costura de neon: acende no boot e fica respirando */
  content:''; position:absolute; top:0; right:-1px; width:1px; height:100%;
  background:linear-gradient(180deg,transparent,var(--primary) 35%,var(--primary) 65%,transparent);
  opacity:.45; box-shadow:0 0 14px var(--primary-glow); transform-origin:center;
  animation:threadOnV .8s .15s both, breatheSoft 5s 1.2s ease-in-out infinite;
}
.sidebar-header{ margin-bottom:24px; padding:2px 2px 0; }
.nameplate{ /* plaqueta de equipamento parafusada, texto gravado na chapa */
  position:relative; width:100%; text-align:center; padding:15px 26px 14px;
  font-family:var(--display); font-weight:700; font-size:1.08rem; letter-spacing:7px; line-height:1;
  text-indent:7px; /* compensa o letter-spacing sobrando no último caractere */
  color:#c9bade; text-transform:uppercase;
  text-shadow:0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
  background:linear-gradient(180deg,#0c0715,#140d22);
  border:1px solid var(--line-soft); border-radius:9px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.045);
  animation:riseIn .5s .15s both;
}
.nameplate::before, .nameplate::after{ /* parafusos */
  content:''; position:absolute; top:50%; margin-top:-2.5px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a3a63, #17101f 70%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
}
.nameplate::before{ left:10px; }
.nameplate::after{ right:10px; }

/* ---------- NAV: cada aba é a frente de uma gaveta ---------- */
nav{ display:flex; flex-direction:column; gap:8px; }
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  cursor:pointer; font-family:inherit;
  padding:13px 34px 13px 16px; border-radius:10px; font-weight:600; font-size:.85rem;
  color:var(--text-muted); position:relative; overflow:hidden; z-index:1; /* hidden p/ conter o ripple */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 6px),
    linear-gradient(180deg,var(--steel),var(--steel-2));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .34s var(--spring), border-color .22s, color .22s, box-shadow .22s;
  animation:drawerPull .5s var(--spring) both;
}
.nav-item:nth-child(1){ animation-delay:.30s } .nav-item:nth-child(2){ animation-delay:.38s }
.nav-item:nth-child(3){ animation-delay:.46s } .nav-item:nth-child(4){ animation-delay:.54s }
.nav-item:nth-child(5){ animation-delay:.62s } .nav-item:nth-child(6){ animation-delay:.70s }
.nav-item:active{ transform:translateX(6px) scale(.98); }
.nav-item i{ width:18px; text-align:center; font-size:.92rem;
  transition:transform .3s var(--spring), color .22s; }
.nav-item:hover i{ transform:translateX(2px) scale(1.18) rotate(-8deg); }
.nav-item.active i{ animation:iconPop .5s var(--spring) both; }
@keyframes iconPop{
  0%{ transform:scale(.3) rotate(-25deg); }
  60%{ transform:scale(1.25) rotate(6deg); }
  100%{ transform:scale(1) rotate(0); }
}
.nav-item::before{ /* fio de neon na borda esquerda (apagado) */
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:3px; height:auto; border-radius:3px;
  background:var(--primary); opacity:0; z-index:1; transition:opacity .22s;
}
/* ripple do clique (span criado pelo app.js) — tinta roxa da casa */
.nav-item .fx-ripple{ background:rgba(176,38,255,.28); }
.nav-item::after{ /* alça da gaveta */
  content:''; position:absolute; right:12px; top:50%; margin-top:-3px;
  width:14px; height:6px; border-radius:4px;
  background:linear-gradient(180deg,#3b2755,#241634);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .22s;
}
.nav-item:hover{
  color:var(--text-secondary); transform:translateX(6px);
  border-color:rgba(176,38,255,.3);
}
.nav-item:hover::after{ background:linear-gradient(180deg,var(--primary),var(--primary-dark)); }
.nav-item.active{ /* gaveta puxada: mesma chapa, só um degrau mais clara e com o fio aceso */
  color:#fff; transform:translateX(6px);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    linear-gradient(180deg,#1e1230,#150c24);
  border-color:rgba(176,38,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), -10px 8px 22px -16px var(--primary-glow);
}
.nav-item.active::before{ opacity:1; box-shadow:0 0 10px var(--primary-glow); }
.nav-item.active::after{ background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  animation:handleFlash .7s ease both; }
@keyframes handleFlash{ /* a alça acende forte e assenta */
  0%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 0 rgba(176,38,255,0); }
  35%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px 2px var(--primary-glow); }
  100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 8px -2px var(--primary-glow); }
}
.nav-item.active i{ color:var(--accent); }

/* rodapé: operador logado */
.sidebar-footer{ padding-top:16px; }
.avatar{ /* plaquinha de operador, não chip roxo */
  border-radius:9px; font-family:var(--display);
  background:linear-gradient(180deg,#1e1230,#130c20); color:var(--accent);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 2px rgba(0,0,0,.5);
  text-shadow:0 -1px 0 rgba(0,0,0,.8); }
.user-info .details #admin-name{ font-size:.82rem; font-weight:700; }
.user-info .details #admin-role{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:1px; }
#logout-btn{ /* o botão vinha sem estilo nenhum (quadrado branco nativo) */
  width:36px; height:36px; flex-shrink:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  transition:var(--transition-fast);
}
#logout-btn:hover{ color:#ff5d5d; border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); }

/* ---------- TOP BAR: kicker + título HUD + status ---------- */
.content{ padding:38px 46px;
  background-image:radial-gradient(rgba(176,38,255,.045) 1px, transparent 1.4px);
  background-size:26px 26px; }
.top-bar{ align-items:center; margin-bottom:30px; }
.kicker{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:3px;
  color:var(--primary); text-transform:uppercase; margin-bottom:9px; display:flex; align-items:center; gap:8px;
}
.kicker::before{ content:''; width:22px; height:2px; background:var(--primary); box-shadow:0 0 8px var(--primary-glow); }
/* troca de aba: o cabeçalho reanima (classe posta pelo app.js) */
.title-group.swap .kicker::before{ animation:kickerDraw .5s cubic-bezier(.22,1,.36,1) both; }
.title-group.swap .kicker{ animation:riseIn .35s ease both; }
.title-group.swap h2{ animation:drawerPull .4s cubic-bezier(.22,1,.36,1) both; }
.title-group.swap .subtitle{ animation:riseIn .45s .08s ease both; }
.title-group h2{
  font-family:var(--display); font-weight:700; font-size:1.65rem; letter-spacing:.5px;
  text-transform:uppercase; text-shadow:none;
}
.subtitle{ font-size:.84rem; margin-top:6px; }
/* status = lâmpada encaixada no painel + etiqueta gravada (sem cápsula) */
.sys-pill{
  display:inline-flex; align-items:center; gap:11px; padding:0;
  font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); background:none; border:none;
  text-shadow:0 -1px 0 rgba(0,0,0,.8);
  animation:flickerOn 1s .5s both;
}
.sys-pill .live-dot, .readout-val .live-dot{
  width:11px; height:11px; flex-shrink:0;
  background:radial-gradient(circle at 35% 28%, #c9ffe4, var(--phosphor) 52%, #157a4e 100%);
  box-shadow:
    0 0 12px rgba(70,224,160,.65),
    inset 0 -1px 2px rgba(0,0,0,.45),
    0 0 0 2.5px #0c0715, 0 0 0 3.5px var(--line-soft); /* soquete */
}

/* ---------- READOUT: régua de instrumento ---------- */
.readout{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-bottom:26px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
    linear-gradient(180deg,#150d23,#0e0818);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px -22px #000, inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
.readout::before{ /* fio de neon no topo do instrumento */
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent); opacity:.6;
}
.readout-cell{ padding:18px 22px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:7px;
  animation:riseIn .4s ease both; transition:background .2s; }
.readout-cell:hover{ background:rgba(176,38,255,.05); }
.readout-cell:hover .readout-val{ text-shadow:0 0 16px rgba(176,38,255,.45); }
.readout-cell:nth-child(1){ animation-delay:.12s } .readout-cell:nth-child(2){ animation-delay:.19s }
.readout-cell:nth-child(3){ animation-delay:.26s } .readout-cell:nth-child(4){ animation-delay:.33s }
.readout-cell:last-child{ border-right:none; }
.readout-label{ font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-muted); }
.readout-val{ font-family:var(--display); font-weight:700; font-size:1.85rem; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; }
.readout-cell.status .readout-val{ font-size:1rem; display:inline-flex; align-items:center; gap:9px;
  color:var(--phosphor); padding-top:8px; }

/* ---------- CARDS: painéis de equipamento ---------- */
.data-card{
  background:linear-gradient(180deg,var(--card-bg),#0d0817);
  border:1px solid var(--border); border-radius:14px; position:relative;
  transition:border-color .25s, box-shadow .25s;
  animation-delay:.1s;
}
.data-card::before{ /* aresta superior de neon, acende no hover */
  content:''; position:absolute; top:-1px; left:18px; right:18px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent); opacity:.2; transition:opacity .25s;
}
.data-card:hover{
  border-color:rgba(176,38,255,.28);
  box-shadow:0 16px 36px -22px var(--primary-glow);
}
.data-card:hover::before{ opacity:.65; }
.card-header{ padding:20px 24px; align-items:flex-start; }
.card-header h3{
  font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
}
.card-header h3::before{ content:''; width:3px; height:13px; background:var(--primary); border-radius:2px;
  box-shadow:0 0 8px var(--primary-glow); }
.card-header .hint{ color:var(--text-muted); font-size:.78rem; margin-top:6px; font-weight:400;
  text-transform:none; letter-spacing:0; padding-left:12px; line-height:1.55; }
.card-header .actions{ gap:10px; }
.card-body{ padding:22px 24px; }

/* ---------- FORM ---------- */
label{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:1.2px; }
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.row > .form-group{ flex:1; min-width:160px; margin-bottom:0; }
.row > .form-group.tight{ flex:0 0 auto; min-width:0; }
.form-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; color:var(--text); font-weight:500;
  font-family:'Outfit',sans-serif; letter-spacing:0; text-transform:none; }
.chk input{ width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }

/* base p/ inputs de texto soltos — a lista de jogos do R2 caía no branco nativo */
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number]{
  background:#0d0817; border:1px solid var(--border); color:#fff;
  padding:9px 12px; border-radius:8px; font-family:'Outfit',sans-serif; font-size:.85rem;
  outline:none; box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder{ color:#4d4160; }

/* lista de jogos da gaveta (R2) */
.gameItem.r2game{ align-items:flex-start; gap:12px; padding:12px 0; }
.gi-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.gi-row{ display:flex; gap:10px; align-items:center; }
.gi-row .gi-name-input{ flex:1; min-width:0; font-weight:600; }
.gi-row .chk{ flex-shrink:0; }
.gi-row-urls{ flex-wrap:wrap; }
.gi-row-urls input{ flex:1 1 220px; font-size:.76rem; color:var(--text-secondary); font-family:'JetBrains Mono',monospace; }
/* indicador de auto-save (salvando… / salvo ✓ / erro) */
.save-state{
  font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.5px;
  color:var(--text-muted); white-space:nowrap; flex-shrink:0; min-width:70px; text-align:right;
}
.save-state.ok{ color:var(--phosphor); }
.save-state.err{ color:#ff5d5d; }
td .save-state{ min-width:0; }

.games-tools{ display:flex; align-items:center; gap:14px; margin:4px 0 10px; flex-wrap:wrap; }
.games-search{ position:relative; flex:0 1 340px; min-width:200px; }
.games-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:.8rem; pointer-events:none; }
.games-search input{ width:100%; padding-left:34px; }
.games-more{ text-align:center; padding-top:14px; }
.games-more button{ display:inline-flex; align-items:center; gap:8px; }

/* base p/ TODO select — os soltos (ex.: #r2gFolder) caíam no branco nativo do navegador */
select{
  background-color:#0d0817; border:1px solid var(--border); color:#fff;
  padding:11px 40px 11px 14px; border-radius:9px;
  font-family:'Outfit',sans-serif; font-size:.88rem; cursor:pointer;
  outline:none; -webkit-appearance:none; appearance:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b026ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
  transition:border-color .2s, box-shadow .2s;
}
select:hover{ border-color:rgba(176,38,255,.45); }
select option, select optgroup{ background:#150d23; color:var(--text); }
.form-group input, .form-group select, .form-group textarea{
  background:#0d0817; border-color:var(--border);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4); /* fresado na chapa */
}
.form-group select{ /* devolve o chevron que o shorthand acima apaga */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b026ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:40px; cursor:pointer;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(176,38,255,.5) !important;
  box-shadow:0 0 0 3px rgba(176,38,255,.14) !important;
}
/* textarea solta (ex.: importar JSON) — fora de .form-group cai no branco do navegador */
textarea{
  width:100%; background:#0d0817; border:1px solid var(--border); color:#fff;
  padding:12px 14px; border-radius:10px; font-family:'JetBrains Mono',monospace;
  font-size:.82rem; line-height:1.5; outline:none; resize:vertical;
  transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;
}
textarea::placeholder{ color:#4d4160; }

/* ---------- BOTÕES ---------- */
.btn-primary{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:1.5px; border-radius:9px;
  position:relative; overflow:hidden;
  /* tecla física: luz vinda de cima, sem gradiente diagonal nem aura */
  background:linear-gradient(180deg,#bd45ff,#8d10d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 8px -4px #000; }
.btn-primary::after{ /* lâmina de luz que varre no hover */
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg);
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35), 0 8px 18px -10px var(--primary-glow); }
.btn-primary:hover::after{ animation:sheen .7s ease; }
.btn-primary:active{ /* tecla pressionada: afunda de verdade */
  transform:translateY(1px); filter:brightness(.96);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(0,0,0,.2); }
@keyframes sheen{ to{ left:140%; } }
.btn-outline{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:1.5px; border-radius:10px; color:var(--accent); }
.btn-sm{ padding:9px 15px; font-size:.66rem; }
.btn-danger{
  background:rgba(239,68,68,.1); color:#ff5d5d; border:1px solid rgba(239,68,68,.3);
  padding:9px 15px; border-radius:9px; font-weight:700; font-size:.72rem; cursor:pointer;
  transition:var(--transition-fast); font-family:'JetBrains Mono',monospace; letter-spacing:.5px;
}
.btn-danger:hover{ background:rgba(239,68,68,.2); transform:translateY(-1px); }

/* ---------- BOTÕES DE AÇÃO EM ÍCONE (colunas "Ações") ---------- */
.row-actions{ display:inline-flex; gap:8px; justify-content:flex-end; align-items:center; }
.btn-icon{
  width:34px; height:34px; flex:0 0 auto; padding:0; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:.82rem; line-height:1; transition:var(--transition-fast);
}
.btn-icon{ transition:transform .25s var(--spring), border-color .15s, color .15s, background .15s, box-shadow .2s; }
.btn-icon:hover{ color:#fff; border-color:var(--primary);
  background:rgba(176,38,255,.12); transform:translateY(-2px) scale(1.06); box-shadow:0 0 14px -4px var(--primary-glow); }
.btn-icon:active{ transform:scale(.92); }
.btn-icon.danger:hover{ color:#ff5d5d; border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.14); }
.btn-icon.ok:hover{ color:var(--phosphor); border-color:rgba(70,224,160,.55); background:rgba(70,224,160,.12); }
.btn-icon.on{ /* estado ligado (demo/admin ativo) */
  color:#fff; border-color:rgba(176,38,255,.55);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 0 14px -3px var(--primary-glow);
}
.btn-icon.on:hover{ filter:brightness(1.1); }

/* ---------- BADGES ---------- */
.badge{ font-family:'JetBrains Mono',monospace; letter-spacing:1px; border-radius:6px; }
.badge.adm  { background:rgba(176,38,255,.18); color:var(--accent); border:1px solid rgba(176,38,255,.4); }
.badge.usr  { background:rgba(255,255,255,.04); color:var(--text-muted); border:1px solid var(--border); }
.badge.demo { background:rgba(255,180,84,.14); color:var(--amber); border:1px solid rgba(255,180,84,.32); }

/* ---------- MENSAGENS ---------- */
.muted{ color:var(--text-muted); font-size:.85rem; }
.err{ color:#ff5d5d; font-size:.82rem; margin-top:10px; }
.ok{ color:var(--phosphor); font-size:.82rem; margin-top:10px; }
.err,.ok{ animation:fadeInScale .25s ease; }
.divider{ border-top:1px solid var(--border); margin:18px 0; padding-top:16px; }
.sub-title{ font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:12px; color:var(--accent);
  display:flex; align-items:center; gap:9px; }
.sub-title::before{ content:''; width:3px; height:12px; background:var(--primary); border-radius:2px; }

/* ---------- TABELAS ---------- */
th{ font-family:'JetBrains Mono',monospace; letter-spacing:1.5px; font-size:.62rem; }
/* entrada escalonada das linhas (cascata) */
tbody tr{ animation:fadeInUp .45s ease both; }
tbody tr:nth-child(1){ animation-delay:.03s }  tbody tr:nth-child(2){ animation-delay:.06s }
tbody tr:nth-child(3){ animation-delay:.09s }  tbody tr:nth-child(4){ animation-delay:.12s }
tbody tr:nth-child(5){ animation-delay:.15s }  tbody tr:nth-child(6){ animation-delay:.18s }
tbody tr:nth-child(7){ animation-delay:.21s }  tbody tr:nth-child(8){ animation-delay:.24s }
tbody tr:nth-child(n+9){ animation-delay:.27s }
td code, .key-code{ font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--accent);
  background:rgba(176,38,255,.08); padding:3px 8px; border-radius:6px; font-size:.78rem; }
tbody tr:hover td{ background:rgba(176,38,255,.04); color:var(--text-secondary); }
td input, td select, td textarea{
  background:#0d0817; border:1px solid var(--border); color:#fff; border-radius:8px;
  font-family:'Outfit',sans-serif; outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
td input::placeholder, td textarea::placeholder{ color:#4d4160; }
td select option{ background:#0d0817; color:#fff; }
td select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b026ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}
td input[type=text]{ padding:8px 10px; font-size:.82rem; }
td select{ width:auto; padding:6px 28px 6px 10px; font-size:.8rem; }

/* checkboxes (tabela e .chk) — nativas ficam brancas no tema escuro, então
   desenhamos uma caixa visível com "check" quando marcada. */
td input[type=checkbox], .chk input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin:0; padding:0; flex:none;
  border:1.5px solid rgba(255,255,255,.30);
  border-radius:6px; background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  cursor:pointer; position:relative; vertical-align:middle; transition:all .15s;
}
td input[type=checkbox]:hover, .chk input[type=checkbox]:hover{ border-color:var(--primary); }
td input[type=checkbox]:checked, .chk input[type=checkbox]:checked{
  background:var(--primary); border-color:var(--primary); box-shadow:none; }
td input[type=checkbox]:checked::after, .chk input[type=checkbox]:checked::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
td input[type=checkbox]:focus, .chk input[type=checkbox]:focus{
  outline:none; box-shadow:0 0 0 3px rgba(176,38,255,.25); }

/* ---------- ARRASTAR PARA ORDENAR (gavetas R2) ---------- */
.r2-row .drag-handle{ cursor:grab; color:var(--text-muted); text-align:center; transition:color .15s; user-select:none; }
.r2-row .drag-handle:active{ cursor:grabbing; }
.r2-row:hover .drag-handle{ color:var(--accent); }
.r2-row.dragging{
  opacity:.85; background:rgba(176,38,255,.1);
  box-shadow:0 0 0 1px rgba(176,38,255,.4), 0 12px 30px -10px var(--primary-glow);
}
.r2-row.dragging .drag-handle{ cursor:grabbing; color:var(--primary); }
.r2-row.dragging td{ border-color:transparent; }

/* ---------- ITENS DE JOGO ---------- */
.cover{ width:44px; height:62px; object-fit:cover; border-radius:7px; border:1px solid var(--border);
  background:var(--steel-2); flex-shrink:0; }
.gameItem{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft);
  transition:background .12s ease; }
.gameItem:hover{ background:rgba(255,255,255,.015); }
.gameItem .gi-name{ font-weight:600; color:#fff; }
.gameItem .gi-url{ color:var(--text-muted); font-size:.76rem; word-break:break-all; font-family:'JetBrains Mono',monospace; }

/* ---------- TOAST ---------- */
.toast-icon{ font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.toast-message{ flex:1; color:#fff; word-break:break-word; }
.toast-close{ background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; font-size:.95rem;
  line-height:1; padding:0; flex-shrink:0; }
.toast-close:hover{ color:#fff; }

/* ---------- LOGIN: placa de acesso do gabinete ---------- */
#login-view{ background:
    radial-gradient(rgba(176,38,255,.05) 1px, transparent 1.4px),
    radial-gradient(70% 55% at 50% -10%, rgba(176,38,255,.12), transparent 70%),
    var(--bg);
  background-size:26px 26px, auto, auto;
}
#login-view .btn-primary{ /* mata o override de gradiente+aura do style.css */
  background:linear-gradient(180deg,#bd45ff,#8d10d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 8px -4px #000;
  border-radius:9px;
}
#login-view .btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35), 0 8px 18px -10px var(--primary-glow); }
#login-view .btn-primary:active{ transform:translateY(1px); filter:brightness(.96);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }
.input-group input{ box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
.login-card{
  background:linear-gradient(180deg,#160e26,#0e0818 60%,#0b0614);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
.login-card::before{ /* fio de neon no topo da placa: acende e respira */
  content:''; position:absolute; top:-1px; left:26px; right:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  box-shadow:0 0 18px var(--primary-glow); transform-origin:center;
  animation:threadOnX .7s .25s both, breathe 4.5s 1.4s ease-in-out infinite;
}
@keyframes threadOnX{ 0%{ transform:scaleX(0); opacity:0; } 55%{ opacity:1; } 100%{ transform:scaleX(1); opacity:.9; } }
@keyframes breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* boot do login: placa, campos e botão em cascata */
.login-header{ animation:riseIn .5s .1s both; }
.input-group{ animation:riseIn .45s .28s cubic-bezier(.22,1,.36,1) both; }
.input-group + .input-group{ animation-delay:.38s; }
#login-view .btn-primary{ animation:riseIn .45s .48s both; }
.login-header .nameplate{ margin-bottom:16px; padding:17px 26px 16px; font-size:1.2rem; }
.login-header p{ font-family:'JetBrains Mono',monospace; letter-spacing:2.5px; font-size:.62rem;
  text-shadow:0 -1px 0 rgba(0,0,0,.8); }
.input-group input{ background:#0d0817; border-radius:10px; }
.input-group input:focus{ border-color:rgba(176,38,255,.5); box-shadow:0 0 0 3px rgba(176,38,255,.14); }
.error-message{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.5px; }

/* ---------- ACESSIBILIDADE ---------- */
button:focus-visible, a:focus-visible, .nav-item:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

@media (max-width:900px){
  /* devolve o comportamento de gaveta fixa do style.css
     (o position:relative desta camada vencia o cascade e deixava
     a sidebar invisível ocupando espaço no topo) */
  .sidebar{
    position:fixed; top:0; left:0; height:100%; z-index:100;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.mobile-open{ transform:translateX(0); box-shadow:4px 0 40px rgba(0,0,0,.6); }
  .title-group{ min-width:0; }
  .content{ padding:26px 20px; }
  .readout{ grid-auto-flow:row; grid-auto-columns:auto; }
  .readout-cell{ border-right:none; border-bottom:1px solid var(--line-soft); }
  .readout-cell:last-child{ border-bottom:none; }
  .nav-item:hover, .nav-item.active{ transform:none; }
}
@media (max-width:480px){
  .nameplate{ font-size:.95rem; letter-spacing:5px; text-indent:5px; }
  .title-group h2{ font-size:1.35rem; }
}