/* © 2026 bladept696 — Centro de Comando / Hash Commander. Todos os direitos reservados. */
/* Estilos partilhados das páginas Novidades e Guias. Usa os tokens de site.css. */
:root{--bad:#ff8a8a;--bolt:var(--gold-2)}
.gh{padding-block:8px 8px}
.pag h1,.guia h1{font-size:clamp(28px,6vw,42px);margin-top:.3em}
.guia section,.pag section{padding-block:0;border-top:0}
.guia img{max-width:100%;height:auto}

/* ---------- Novidades ---------- */
.ver{padding:0 16px;margin-top:10px}
.ver summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:14px 0}
.ver .vn{font:700 15px/1 var(--mono);color:var(--gold)}
.ver .vt{flex:1 1 220px;min-width:0;font-weight:600}
.ver .vd{font:500 12px/1 var(--mono);color:var(--muted)}
.vb{padding-bottom:12px}
.vb h4,.vb h5{font:600 16px/1.3 var(--body);margin:18px 0 6px;color:var(--gold-2)}
.vb p,.vb li{font-size:15px;color:var(--fg)}
.vb ul,.vb ol{padding-left:22px;margin:0 0 12px}
.vb li{margin-bottom:6px}
.vb code{font:500 13px/1.4 var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-all}
.vb .tw{overflow-x:auto;margin:0 0 14px}
.vb table{border-collapse:collapse;width:100%;min-width:420px;font-size:14px}
.vb th,.vb td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.vb th{background:var(--panel);color:var(--gold);font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Guias: índice ---------- */
.guias{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gcard{text-decoration:none;color:var(--fg);display:block}
.gcard:hover{border-color:var(--gold)}
.gcard h3{margin-bottom:6px}

/* ---------- Guias: componentes comuns ---------- */
.guia{--panel2:#100d0a}
.guia code{font:500 14px/1.4 var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-all}
.guia .file{font:500 14px/1.4 var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px;word-break:break-all}
.guia .step h2{font-size:20px}
.guia ol.steps.long{gap:34px;margin-top:30px}
.guia ol.steps.long>li{padding-top:26px;border-top:1px solid var(--line)}
.guia .part{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.guia .part-tag{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#1a1206;background:var(--gold);border-radius:999px;padding:6px 10px;margin-bottom:12px}
.guia .gap{margin-top:36px}
.guia .okc{color:var(--ok)}
.guia .note.tip{border-left-color:var(--ok)}
.guia .note.tip b{color:var(--ok)}
.guia .tip{border-left:3px solid var(--gold);background:#17130d;padding:10px 12px;margin-top:12px;font-size:15px}
.guia .note.tip{padding:12px 14px;margin-top:12px}
.guia .tip.first{margin-top:0}
.guia .warnb{border-left-color:var(--warn)}
.guia .cap{font-size:13px;color:var(--muted);margin-top:6px}
.guia .small{font-size:14px}
.guia .inl{display:inline;color:var(--fg);letter-spacing:0;text-transform:none;font:inherit}
.guia .fig{margin:14px 0 6px}
.guia .fig figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.guia .faq{display:grid;gap:10px;margin-top:14px}
.guia details p{margin:10px 0 0}
.guia .faq dl{display:grid;gap:14px;margin:14px 0 0}
.guia .faq dt{font-weight:600}
.guia .faq dd{margin:2px 0 0;color:var(--muted)}
.guia section.faq{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);display:block}
.guia .safe{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.guia .safe div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0;font-size:15px}
.guia .safe b{display:block;margin-bottom:4px}
.guia section.safe{display:block;margin-top:34px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.guia section.safe ul{margin:6px 0 0;padding-left:20px}
.guia section.safe li{margin:4px 0}
.guia .perm{display:grid;gap:6px;margin:8px 0 12px;padding:0;list-style:none}
.guia .perm li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.guia .perm .y{color:var(--ok);font-weight:700;flex:none;width:1.2em;text-align:center}
.guia .need,.guia .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:24px 0 8px}
.guia .need div,.guia .two>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0;font-size:15px}
.guia .need b,.guia .two b{display:block;font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.guia .need p,.guia .two p{margin:0;font-size:15px;color:var(--muted)}
.guia .two .what{font:500 14px/1.4 var(--mono);color:var(--gold-2);margin:6px 0 8px;word-break:break-all}

/* ---------- Instalar ---------- */
.guia .tabs{display:flex;gap:8px;margin:36px 0 22px;flex-wrap:wrap}
.guia .tabs button{font:600 15px/1 var(--body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:11px 20px;cursor:pointer}
.guia .tabs button[aria-selected="true"]{color:#1a1206;background:var(--gold);border-color:var(--gold)}
.guia .tabs button:hover:not([aria-selected="true"]){border-color:var(--gold);color:var(--fg)}
.guia section.panel{display:block}
.guia section.panel[hidden]{display:none}
.guia .cmd{display:flex;align-items:stretch;margin:10px 0 12px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--code-bg)}
.guia .cmd code{flex:1;min-width:0;font:500 14px/1.5 var(--mono);padding:10px 12px;overflow-x:auto;white-space:pre;color:var(--fg);border:0;border-radius:0;background:none;word-break:normal}
.guia .cmd button{flex:none;font:600 13px/1 var(--body);background:#2a2117;color:var(--gold-2);border:0;border-left:1px solid var(--line);padding:0 14px;cursor:pointer}
.guia .cmd button:hover{background:#3a2c1c}
.guia .smart{margin:12px 0 4px;max-width:420px;background:#0f3a6b;color:#fff;border-radius:6px;padding:16px 18px;font:400 14px/1.5 'Segoe UI',system-ui,sans-serif}
.guia .smart .t{font-size:19px;font-weight:600;margin-bottom:6px}
.guia .smart .lnk{color:#fff;text-decoration:underline;font-weight:600;outline:2px dashed var(--gold);outline-offset:3px}
.guia .smart .row{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.guia .smart .b{border:1px solid #fff;padding:6px 14px;font-weight:600}
.guia .smart .b.hl{outline:2px dashed var(--gold);outline-offset:3px}
.guia .after{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:18px}
.guia .after h2{margin-bottom:6px}

/* ---------- Alby: simulação da caixa da carteira ---------- */
.guia .mock{margin:12px 0 4px;background:var(--panel2);border:1px solid #3a2f22;border-radius:10px;padding:14px 16px;max-width:520px}
.guia .mock b{display:block;font-weight:600;margin-bottom:8px}
.guia .mock .row{display:flex;gap:8px;flex-wrap:wrap}
.guia .mock .in{flex:1;min-width:180px;font:500 13px/1 var(--mono);color:#7d7262;background:var(--code-bg);border:1px solid #3a2f22;border-radius:8px;padding:11px 12px}
.guia .mock .mbtn{font:600 13px/1 var(--body);color:#1a1206;background:var(--gold);border-radius:8px;padding:11px 14px;outline:2px dashed var(--gold-2);outline-offset:3px}
.guia .mock .help{font-size:13px;color:var(--muted);margin-top:8px}
.guia .mock.on{border-color:#2f5a43}
.guia .mock.on .okline{color:var(--ok);font-weight:600}

/* ---------- Tailscale: ilustrações ---------- */
.guia .diag{margin:26px 0 6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.guia .diag svg{display:block;width:100%;height:auto}
.guia .shots{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.guia .phone{width:200px;flex:none;border:3px solid #3a3358;border-radius:28px;background:#0d0b16;padding:12px 10px 16px;box-shadow:0 10px 30px #0008}
.guia .phone .notch{width:60px;height:6px;border-radius:9px;background:#3a3358;margin:0 auto 10px}
.guia .ts-app{background:#f6f6f8;color:#222;border-radius:14px;padding:12px;font-size:12px;min-height:250px}
.guia .ts-app .hd{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:10px}
.guia .tog{width:34px;height:20px;border-radius:20px;background:#3c7bf4;position:relative}
.guia .tog::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.guia .ts-app .dev{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e3e3e8}
.guia .ts-app .dev small{color:#888;display:block;font-size:10px}
.guia .dot{width:8px;height:8px;border-radius:50%;background:#22b35a;display:inline-block;margin-right:6px}
.guia .okt{color:#22b35a;font-weight:600}
.guia .mb6{margin-bottom:6px}
.guia .my8{margin:8px 0}
.guia .gr6{margin-top:8px;color:#666}
.guia .grow{flex:1;min-width:220px}
.guia .pc{flex:1;min-width:240px;background:#f6f6f8;color:#222;border-radius:12px;padding:12px;font-size:12px;border:3px solid #3a3358}
.guia .pc .bar{display:flex;gap:5px;margin-bottom:10px}
.guia .pc .bar i{width:9px;height:9px;border-radius:50%;background:#ccc}
.guia .app{background:#0b1018;border:1px solid #1f2b40;border-radius:12px;padding:12px;max-width:520px;position:relative}
.guia .app .row{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:#7fd8ff;letter-spacing:1px}
.guia .gear{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid #2ea3c4;display:grid;place-items:center;font-size:16px;color:#fff;background:#10283a}
.guia .ring{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}
.guia .menu{margin-top:10px;background:#0e1422;border:1px solid #1f2b40;border-radius:10px;padding:10px}
.guia .menu b{display:block;font:600 11px var(--mono);color:#8f9bb8;letter-spacing:1px;margin-bottom:6px}
.guia .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.guia .tiles div{background:#121a2c;border:1px solid #23304a;border-radius:8px;padding:8px 4px;text-align:center;font-size:11px;color:#c9d6ee}
.guia .tiles div span{display:block;font-size:18px}
.guia .tiles .hit{border-color:var(--gold);background:#2a1d0c;color:#fff}
.guia .win{background:#0e1220;border:1px solid #2a3654;border-radius:14px;max-width:560px;overflow:hidden;font-size:14px}
.guia .win .hd{display:flex;justify-content:space-between;padding:10px 14px;background:#141a2e;border-bottom:1px solid #2a3654;font-weight:600}
.guia .win .bd{padding:14px}
.guia .win .okl{color:var(--ok);font-weight:600;margin-bottom:10px}
.guia .addr{display:flex;gap:12px;align-items:center;background:#121a2c;border:1px solid #23304a;border-radius:10px;padding:10px;flex-wrap:wrap}
.guia .addr .t{flex:1;min-width:200px}
.guia .addr b{display:block;font-size:12px;color:#8f9bb8;margin-bottom:4px}
.guia .addr code{display:block;font-size:12px;margin-bottom:6px}
.guia .mbtn{display:inline-block;font:600 12px var(--body);border:1px solid #3a4a6e;border-radius:7px;padding:4px 10px;color:#dfe9f5;background:#18223a}
.guia .mbtn.p{background:var(--gold);border-color:transparent;color:#1a1206}
.guia .mbtn.blk{display:block}
.guia .qr{width:96px;height:96px;flex:none;background:#fff;border-radius:6px;padding:6px}
.guia .qr svg{width:100%;height:100%;display:block}
.guia .wrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;border:1px solid #23304a;border-radius:8px}
.guia .chk{display:flex;gap:8px;align-items:center;margin-top:10px}
.guia .chk i{width:16px;height:16px;border-radius:4px;background:var(--gold);display:grid;place-items:center;color:#1a1206;font-style:normal;font-size:11px;flex:none}
.guia .win small{display:block;color:#8f9bb8;font-size:12px;margin-top:4px}
.guia .mark{outline:2px dashed var(--gold);outline-offset:3px;border-radius:8px}
.guia .browser{background:#1b1b22;border-radius:14px;padding:8px;min-height:250px}
.guia .browser .url{background:#2a2a34;border-radius:16px;padding:5px 9px;font:10px var(--mono);color:#cfd;margin-bottom:10px;word-break:break-all}
.guia .browser .ban{text-align:center;padding:14px 0 6px;font:700 18px var(--display)}
.guia .browser .ban .ha{color:var(--fg)}
.guia .browser .ban .hb{color:var(--gold)}
.guia .browser .login{background:#11162a;border:1px solid #2a3654;border-radius:10px;padding:10px;margin-top:8px;font-size:11px;color:#c9d6ee}
.guia .browser .login div{background:#0b0f1d;border:1px solid #2a3654;border-radius:6px;padding:5px;margin:6px 0;color:#667}
.guia .browser .login span{display:block;text-align:center;margin-top:6px}

@media (max-width:520px){
  .guia .tiles{grid-template-columns:repeat(2,1fr)}
  .guia .phone{width:100%;max-width:240px}
  .guia ol.steps>li{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .guia ol.steps>li::before{width:34px;height:34px;font-size:15px}
}