/* =============== botões, campos e peças dos modais / Configurações =============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 18px;border-radius:12px;font-size:14px;font-weight:600;line-height:18px;white-space:nowrap;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.btn-primary{background:var(--grad);color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:var(--chip);border-color:var(--line);color:var(--t300)}
.btn-ghost:hover{border-color:rgba(59,130,246,.5);color:#fff;background:rgba(59,130,246,.1)}
.btn-danger{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.4);color:#fb7185}
.btn-danger:hover{background:rgba(244,63,94,.24);border-color:rgba(244,63,94,.65);color:#fff}
.btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:9px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn-ghost:disabled:hover{background:var(--chip);border-color:var(--line);color:var(--t300)}
.btn-primary:disabled:hover{filter:none}
.btn:focus-visible,.fi:focus-visible,.pm-model:focus-visible,.pm-x:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}
.fi{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#0a0c10;font-size:14px;color:#fff;transition:border-color .15s,box-shadow .15s}
.fi::placeholder{color:var(--t500)}
.fi:hover{border-color:#2b3649}
.fi:focus{border-color:rgba(56,189,248,.6);box-shadow:0 0 0 3px rgba(56,189,248,.12);outline:0}
.fi.bad{border-color:rgba(244,63,94,.6)}
select.fi{appearance:none;padding-right:34px;cursor:pointer;background:#0a0c10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
select.fi option{background:#0f1218;color:#fff}
input[type=date].fi{color-scheme:dark}
.ctag{display:inline-block;padding:3px 10px;border-radius:9999px;font-size:12px;font-weight:600;line-height:16px;border:1px solid;white-space:nowrap}
.ctag-norm{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.25);color:#93c5fd}
.ctag-ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25);color:var(--ok)}
.ctag-off{background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.3);color:var(--t400)}
.ctag-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:#fbbf24}
.tgl{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.tgl input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.tgl i{position:absolute;inset:0;border-radius:9999px;background:#252b38;border:1px solid var(--line);transition:background .18s,border-color .18s}
.tgl i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:9999px;background:#cbd5e1;transition:transform .18s,background .18s}
.tgl input:checked+i{background:var(--grad);border-color:transparent}
.tgl input:checked+i::after{transform:translateX(18px);background:#fff}
.tgl input:focus-visible+i{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}
.chk{position:relative;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--t200);cursor:pointer}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk-b{width:18px;height:18px;border-radius:5px;border:1px solid #334155;background:#0a0c10;display:grid;place-items:center;flex:none;transition:.15s}
.chk input:checked+.chk-b{background:var(--grad);border-color:transparent}
.chk input:checked+.chk-b::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.chk input:focus-visible+.chk-b{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}

/* tabelas (Configurações e modal de acessos) */
.tbl-wrap{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:13px;color:var(--t300)}
.dtable th{padding:11px 20px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.55px;text-transform:uppercase;color:var(--t400);background:linear-gradient(180deg,#0c0e12,#15181f);border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:14px 20px;border-top:1px solid rgba(30,41,59,.6);vertical-align:middle}
.dtable tbody tr:first-child td{border-top:0}
.dtable td.r,.dtable th.r{text-align:right}
.dtable .dim{color:var(--t500)}
.dtable tbody tr:hover{background:rgba(59,130,246,.04)}
.cfg-key b{font-size:13px;font-weight:600;color:var(--t100);white-space:nowrap}
.cfg-tbl td:first-child{width:260px}
.hint2{font-size:13px;line-height:20px;color:var(--t400)}
.mono-t{font-variant-numeric:tabular-nums;letter-spacing:.3px;color:var(--t200)}
.tk-act{display:inline-flex;gap:8px}

/* aba Configurações */
#view-config{display:flex;flex-direction:column;gap:20px}
#view-config[hidden]{display:none}
.cf-banner{padding-bottom:9px;border-bottom:1px solid rgba(30,41,59,.6)}
.cf-banner h1{font-size:24px;font-weight:700;line-height:32px;letter-spacing:-.6px;color:#fff}
.cf-banner p{margin-top:4px;font-size:14px;line-height:20px;color:var(--t400)}
.cf-panel{overflow:hidden}
.cf-ph{display:flex;align-items:center;gap:14px;padding:18px 20px}
.cf-ph h3{font-size:16px;font-weight:700;line-height:22px;color:#fff}
.psub{margin-top:2px;max-width:900px;font-size:13px;line-height:19px;color:var(--t400)}
.cf-pic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#60a5fa}
.cf-go{margin-left:auto}
.cf-foot{padding:14px 20px;border-top:1px solid rgba(30,41,59,.6)}
.cf-acc{padding:14px 20px;border-top:1px solid rgba(30,41,59,.6);font-size:13px;color:var(--t400)}
.cf-ro{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-top:1px solid rgba(30,41,59,.6);font-size:13px;color:var(--t400)}
.cf-ro b{color:var(--t200)}
.icon-btn-info.on{background:rgba(59,130,246,.22);border-color:rgba(59,130,246,.6)}

/* modais */
body.modal-open{overflow:hidden}
.scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,5,8,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .16s}
.scrim.in{opacity:1}
.modal{width:min(560px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);transform:translateY(10px) scale(.98);transition:transform .18s;overflow:hidden}
.scrim.in .modal{transform:none}
.m-h{display:flex;align-items:center;gap:12px;padding:20px 22px 4px;font-size:18px;font-weight:700;color:#fff}
.m-hi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#60a5fa}
.m-body{display:flex;flex-direction:column;gap:14px;padding:14px 22px 18px;overflow:auto}
.m-hint{font-size:13px;line-height:19px;color:var(--t400)}
.m-row{display:flex}
.m-act{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 20px}
.m-code{display:inline-block;padding:3px 8px;border-radius:6px;background:#0a0c10;border:1px solid var(--line);color:var(--ok);letter-spacing:.8px;font-weight:600;user-select:all}
.modal .tbl-wrap{border:1px solid var(--line);border-radius:12px}
.modal .dtable th,.modal .dtable td{padding:10px 14px}
.modal.cf{width:min(420px,100%);align-items:center;text-align:center;padding:26px 24px 0}
.cf h3{margin-top:14px;font-size:18px;font-weight:700;color:#fff}
.cf p{margin-top:8px;font-size:14px;line-height:21px;color:var(--t400)}
.cf .m-act{justify-content:center;padding:22px 0 24px}
.cf-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#60a5fa}
.cf-ic.bad{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.3);color:#fb7185}
.pm-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.pm-f>label{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--t400)}

/* modal do pixel */
.modal.pm{width:min(720px,100%)}
.pm-h{display:flex;align-items:center;gap:16px;padding:20px 22px 16px;border-bottom:1px solid rgba(30,41,59,.7)}
.pm-ht{flex:1;min-width:0}
.pm-ht h3{font-size:20px;font-weight:700;line-height:26px;letter-spacing:-.3px;color:#fff}
.pm-sub{margin-top:2px;font-size:13px;color:var(--t400)}
.pm-x{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--t400);border:1px solid transparent;transition:.15s;flex:none}
.pm-x:hover{color:#fff;background:var(--chip);border-color:var(--line)}
.pm-b{display:flex;flex-direction:column;overflow:auto;padding:4px 22px 6px}
.pm-sec{display:flex;flex-direction:column;gap:12px;padding:16px 0;border-top:1px solid rgba(30,41,59,.5)}
.pm-sec:first-child{border-top:0}
.pm-sec h4{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--t400)}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-idw{display:flex;align-items:center;gap:8px}
.pm-ext{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);color:var(--t400);flex:none;transition:.15s}
.pm-ext:hover{color:#fff;border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.1)}
.pm-err{font-size:12px;color:#fb7185}
.pm-err:empty{display:none}
.pm-models{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pm-model{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#0a0c10;transition:border-color .15s,background .15s}
.pm-model b{font-size:13px;font-weight:700;color:var(--t100)}
.pm-model small{font-size:11px;line-height:15px;color:var(--t500)}
.pm-model:hover{border-color:rgba(59,130,246,.45)}
.pm-model.on{border-color:rgba(56,189,248,.7);background:rgba(59,130,246,.12);box-shadow:0 0 20px -6px rgba(56,189,248,.35)}
.pm-model.on small{color:var(--t300)}
.pm-badge{margin-top:2px;padding:1px 7px;border-radius:9999px;font-size:10px;font-weight:600;color:var(--ok);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25)}
.pm-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--t300)}
.pm-inline .fi{width:auto;min-width:130px;flex:0 1 160px}
.pm-inline select.fi{min-width:90px;flex:0 0 96px}
.pm-note{padding:10px 12px;border-radius:10px;font-size:12px;line-height:18px;color:var(--t400);background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15)}
.pm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0a0c10;cursor:pointer;transition:border-color .15s}
.pm-row:hover{border-color:#2b3649}
.pm-row-t{display:flex;flex-direction:column;gap:2px}
.pm-row-t b{font-size:14px;font-weight:600;color:var(--t100)}
.pm-row-t small{font-size:12px;color:var(--t500)}
.pm-row.pm-on{padding:6px 12px;gap:12px}
.pm-tk{display:flex;flex-direction:column;gap:10px}
.pm-tkrow{display:flex;align-items:center;gap:10px}
.pm-tkrow .fi{flex:1}
.pm-pill{padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--t400);background:rgba(100,116,139,.12);border:1px solid rgba(100,116,139,.3)}
.pm-pill.ok{color:var(--ok);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25)}
.pm-tknew{display:flex;flex-direction:column;gap:10px}
.pm-how{font-size:12px;color:var(--t400)}
.pm-how summary{cursor:pointer;color:#60a5fa;font-weight:600;width:max-content}
.pm-how p{margin-top:6px;line-height:18px}
.pm-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid rgba(30,41,59,.7);background:linear-gradient(180deg,#0c0e12,#15181f)}
.pm-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t400);flex:1;min-width:200px}
.pm-status .dot6{background:#475569}.pm-status .dot6.ok{background:var(--ok)}
.pm-ferr{font-size:12px;color:#fb7185;flex-basis:100%;order:3}
.pm-ferr:empty{display:none}
.pm-act{display:flex;gap:10px}
.m-err,.m-body .pm-ferr{flex-basis:auto}
@media (max-width:720px){.pm-grid{grid-template-columns:1fr}.pm-models{grid-template-columns:repeat(2,minmax(0,1fr))}.scrim{padding:0;align-items:flex-end}.modal{border-radius:20px 20px 0 0;max-height:92vh;width:100%}}

/* o degradê repetia dentro da borda transparente (pontinhas nas laterais): fixa a origem na borda */
.btn-primary,.tgl input:checked+i,.chk input:checked+.chk-b{background-origin:border-box}