/* Páginas internas do SK PLAYER. Menu HORIZONTAL no topo (decisão dele, 04/10) —
   as referências traziam menu lateral, que não existe no site. */
:root{
  --sinal:#3b9dff; --ciano:#37d8ff; --noite:#060b14; --carta:#101c2e;
  --carta2:#0d1829; --linha:rgba(126,178,205,.14); --txt:#e8f1fa; --fraco:#8ba0b5;
  --ok:#4ade80; --perigo:#f87171; --ambar:#e8b046;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--noite);color:var(--txt);
  font:16px/1.6 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.w{width:min(980px,100%);margin:0 auto;padding:0 20px}

/* ─── migalha e título ─── */
.migalha{margin:22px 0 4px;font-size:13px;color:var(--fraco)}
.migalha a:hover{color:var(--txt)}
h1{margin:0 0 8px;font-size:clamp(26px,3.3vw,34px);letter-spacing:-.03em;font-weight:750}
.sub{margin:0 0 24px;color:var(--fraco);font-size:15px;max-width:62ch}

/* ─── cartões ─── */
.cx{padding:20px;background:var(--carta);border:1px solid var(--linha);border-radius:14px;margin-bottom:12px}
.cx-topo{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px}
.cx-topo i{flex:none;display:grid;place-items:center;width:42px;height:42px;font-style:normal;
  font-size:19px;border-radius:11px;background:rgba(59,157,255,.12);border:1px solid rgba(59,157,255,.22)}
.cx-topo b{display:block;font-size:15.5px;margin-bottom:3px}
.cx-topo span{font-size:13.5px;color:var(--fraco);line-height:1.55}

label{display:block;margin-bottom:7px;font-size:13.5px;color:var(--fraco)}
input{width:100%;height:50px;padding:0 15px;font-size:16px;border-radius:10px;
  background:#0a1322;border:1px solid var(--linha);color:var(--txt)}
input:focus{outline:2px solid var(--sinal);outline-offset:-1px}
input[readonly]{color:var(--fraco);background:#080f1b}
.codigo{letter-spacing:.2em;text-align:center;font-size:19px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;
  margin-top:11px;border:1px solid transparent;border-radius:10px;font-size:15.5px;font-weight:700;
  cursor:pointer;transition:background .18s,transform .14s;font-family:inherit}
.btn-cheio{color:#06101d;background:var(--sinal)}
.btn-cheio:hover{background:#56aeff}
.btn-linha{color:var(--txt);background:transparent;border-color:var(--linha)}
.btn-linha:hover{background:rgba(255,255,255,.05)}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ─── aparelho encontrado ─── */
.achado{padding:17px 19px;border-radius:14px;margin-bottom:12px;
  background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.25)}
.achado-l1{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.achado-l1 i{flex:none;display:grid;place-items:center;width:42px;height:42px;font-style:normal;
  font-size:19px;border-radius:11px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.22)}
.achado-l1 b{display:block;font-size:15.5px}
.achado-l1 .pt{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:#86efac;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.28)}
.achado-l1 .pt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok)}
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}
.dados div{padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.03)}
.dados span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fraco)}
.dados b{font-size:13.5px;font-weight:650}
.trocar{margin-left:auto;font-size:13px;color:var(--ciano);cursor:pointer;background:none;border:0;font-family:inherit}
.trocar:hover{text-decoration:underline}

/* ─── atalhos ─── */
.atalhos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.atalho{display:flex;align-items:center;gap:12px;padding:16px;background:var(--carta);
  border:1px solid var(--linha);border-radius:13px;transition:border-color .18s,transform .18s}
.atalho:hover{border-color:rgba(59,157,255,.45);transform:translateY(-2px)}
.atalho i{flex:none;display:grid;place-items:center;width:40px;height:40px;font-style:normal;font-size:18px;
  border-radius:11px;background:rgba(59,157,255,.12);border:1px solid rgba(59,157,255,.22)}
.atalho b{display:block;font-size:14.5px;margin-bottom:2px}
.atalho span{font-size:12.5px;color:var(--fraco);line-height:1.5}
.atalho::after{content:"›";margin-left:auto;color:var(--sinal);font-size:21px}

/* ─── perigo ─── */
.perigo-cx{display:flex;align-items:center;gap:13px;padding:16px;border-radius:13px;cursor:pointer;
  background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.3);
  width:100%;text-align:left;font-family:inherit;color:inherit;transition:background .18s}
.perigo-cx:hover{background:rgba(248,113,113,.12)}
.perigo-cx i{flex:none;display:grid;place-items:center;width:40px;height:40px;font-style:normal;font-size:18px;
  border-radius:11px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.26)}
.perigo-cx b{display:block;font-size:14.5px;margin-bottom:2px;color:#fca5a5}
.perigo-cx span{font-size:12.5px;color:#c89393;line-height:1.5}
.perigo-cx::after{content:"›";margin-left:auto;color:var(--perigo);font-size:21px}

/* ─── passos numerados ─── */
.passo{display:flex;gap:14px;margin-bottom:16px}
.passo .n{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-weight:800;font-size:14px;color:#06101d;background:var(--sinal);margin-top:26px}
.passo > div{flex:1;min-width:0}

/* ─── listas ─── */
.lista{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:11px;margin-bottom:8px;
  background:#0a1322;border:1px solid var(--linha)}
.lista i{flex:none;font-style:normal;font-size:16px}
.lista > div > b{display:block;font-size:14px}
/* O <b> do usuario fica DENTRO do span: sem isso ele herda o display:block de cima
   e cai numa linha sozinho. break-all saiu junto com a URL, que nao aparece mais. */
.lista span{font-size:12px;color:var(--fraco);overflow-wrap:anywhere}
.lista span b{display:inline;font-size:12px;font-weight:600;color:var(--txt)}
.lista .tag{margin-left:auto;flex:none;padding:3px 9px;border-radius:999px;font-size:10.5px;
  font-weight:700;color:#8ab0ff;background:rgba(59,157,255,.12)}

/* ─── avisos ─── */
.info{display:flex;gap:12px;padding:15px 17px;border-radius:12px;margin-top:12px;
  background:rgba(59,157,255,.07);border:1px solid rgba(59,157,255,.2);font-size:13.5px;color:#a8c4dc}
.info i{flex:none;font-style:normal}
.info b{color:#cfe3f5}
.aviso{display:flex;gap:12px;padding:15px 17px;border-radius:0 12px 12px 0;margin-top:12px;
  border-left:3px solid var(--ambar);background:rgba(232,176,70,.07);font-size:13.5px;color:#cdbb97}
.aviso b{color:#f5d89f}
.msg{margin-top:11px;font-size:14px;min-height:21px}
.msg.erro{color:#fca5a5} .msg.bom{color:#86efac}

/* ─── dúvidas ─── */
details.duvida{background:var(--carta);border:1px solid var(--linha);border-radius:12px;margin-bottom:8px}
details.duvida summary{list-style:none;cursor:pointer;padding:15px 17px;font-size:14.5px;
  display:flex;align-items:center;gap:10px}
details.duvida summary::-webkit-details-marker{display:none}
details.duvida summary::after{content:"⌄";margin-left:auto;color:var(--sinal);font-size:18px;transition:transform .18s}
details.duvida[open] summary::after{transform:rotate(180deg)}
details.duvida .corpo{padding:0 17px 16px;font-size:14px;color:var(--fraco);line-height:1.65}

/* ─── abas e índice (termos) ─── */
.abas{display:flex;gap:7px;margin-bottom:20px}
.abas button{flex:1;height:44px;border-radius:10px;font-size:14.5px;font-weight:650;cursor:pointer;
  background:transparent;border:1px solid var(--linha);color:var(--fraco);font-family:inherit}
.abas button[aria-selected="true"]{color:#06101d;background:var(--sinal);border-color:var(--sinal)}
.doc{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.indice{position:sticky;top:76px;padding:15px;background:var(--carta);border:1px solid var(--linha);border-radius:13px}
.indice b{display:block;margin-bottom:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fraco)}
.indice a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--fraco)}
.indice a:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.texto-doc h2{margin:26px 0 8px;font-size:18px;letter-spacing:-.02em}
.texto-doc h2:first-child{margin-top:0}
.texto-doc p{margin:0 0 12px;font-size:14.5px;color:#b9cadb;line-height:1.7}
.selo-data{display:inline-block;padding:5px 11px;border-radius:999px;font-size:11.5px;
  color:var(--fraco);background:rgba(255,255,255,.04);border:1px solid var(--linha);margin-bottom:16px}

footer{margin-top:34px;padding:24px 0 40px;border-top:1px solid var(--linha);font-size:13px;color:var(--fraco)}
footer a{margin-right:16px}
footer a:hover{color:var(--txt)}
.nota{margin-top:14px;font-size:11.5px;opacity:.7}
.esconde{display:none}

@media (max-width:900px){
  .atalhos{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr}
  .indice{position:static}
  .abas button{font-size:13.5px}
  /* Alvo de toque no dedo: 17px e 36px de altura nao se acerta. Minimo 44. */
  .trocar{padding:14px 2px;font-size:14px}
  .indice a{padding:12px 10px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }