:root{
  --bg:#E4E9EE; --panel:#F8FAFB; --panel2:#EEF2F5; --ink:#17202A; --muted:#566370; --line:#C6D0D9;
  --accent:#0B6E78; --accent-ink:#FFFFFF; --danger:#B4232A;
  --term:#0F1A22; --term2:#15232D; --term-ink:#D3DFE7; --term-dim:#6D8593; --term-miss:#FF9AA0; --term-note:#E8B54A;
  --c-base:#2F6FDE; --c-if:#D9A400; --c-rt:#1BA5B8; --c-mpls:#E2701B; --c-qos:#8B5CF6; --c-mnt:#7A8794;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11181F; --panel:#19222B; --panel2:#1F2A34; --ink:#DCE4EB; --muted:#8F9CA8; --line:#2C3945;
    --accent:#3BB3BF; --accent-ink:#06262A; --danger:#FF7B82; --term:#0A1116; --term2:#101B22; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11181F; --panel:#19222B; --panel2:#1F2A34; --ink:#DCE4EB; --muted:#8F9CA8; --line:#2C3945;
  --accent:#3BB3BF; --accent-ink:#06262A; --danger:#FF7B82; --term:#0A1116; --term2:#101B22; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;padding:18px 20px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
header.top h1{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin-right:auto}
header.top h1 small{display:block;font-size:.8rem;font-weight:400;color:var(--muted)}
.sel{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--muted)}
.sel select{min-width:150px}
select,input,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%}
textarea{resize:vertical;font-family:var(--mono);font-size:.85rem}
input.bad,textarea.bad{border-color:var(--danger)}
.iconbtn{background:none;border:1px solid var(--line);border-radius:6px;padding:7px 10px;cursor:pointer}

main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;padding:20px;max-width:1500px;margin:0 auto}
@media (max-width:980px){main{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.panel h2{font-size:1rem;margin:0 0 10px;font-weight:600}
.panel p.hint{margin:-4px 0 12px;color:var(--muted);font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px}
.f label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px}
.f.wide{grid-column:1/-1}
.f .h{font-size:.75rem;color:var(--muted);margin-top:3px}
.f.chk label{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:.85rem;margin-top:22px;cursor:pointer}
.f.chk input{width:auto}
.sub{font-size:.88rem;font-weight:600;margin:14px 0 6px}
input:disabled{opacity:.6;cursor:not-allowed}
.preview{margin-top:12px;font-family:var(--mono);font-size:.82rem;background:var(--panel2);border-radius:6px;padding:8px 10px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.preview span:nth-child(odd){color:var(--muted);font-family:var(--sans)}
details.panel summary{cursor:pointer;font-weight:600}
details.panel[open] summary{margin-bottom:10px}

.palette{display:flex;flex-direction:column;gap:10px}
.pgroup{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pgroup b{font-size:.78rem;font-weight:500;color:var(--muted);width:100%}
.chip{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:4px 11px 4px 9px;cursor:pointer;font-size:.84rem;display:inline-flex;gap:6px;align-items:center}
.chip:hover{border-color:var(--accent)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--cc)}
.kits{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.kit{background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:500;font-size:.85rem}
.ghost{background:none;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;font-size:.85rem}

.block{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--cc);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.block .bh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.block .bh strong{font-weight:600;margin-right:auto}
.block .bh button{background:none;border:1px solid var(--line);border-radius:5px;width:30px;height:28px;cursor:pointer;color:var(--muted)}
.block .bh button:hover{color:var(--ink);border-color:var(--ink)}
.block .bh button.rm:hover{color:var(--danger);border-color:var(--danger)}
.block .bd{font-size:.8rem;color:var(--muted);margin:-6px 0 10px}
[hidden]{display:none!important}
.empty{color:var(--muted);text-align:center;padding:26px 10px;border:1px dashed var(--line);border-radius:8px}

.out{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);align-self:start;background:var(--term);color:var(--term-ink);border-radius:10px;display:flex;flex-direction:column;max-height:calc(100dvh - 40px);overflow:hidden}
@media (max-width:980px){.out{position:static;max-height:none}}
.outh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #22323D}
.outh .t{margin-right:auto;font-weight:500}
.outh .t small{display:block;color:var(--term-dim);font-size:.78rem;font-weight:400}
.btn{background:#1BA5B8;color:#04252A;border:0;border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer}
.btn.sm{padding:4px 10px;font-size:.78rem;background:#22343F;color:var(--term-ink)}
.btn.sm:hover{background:#2D4553}
.outb{overflow:auto;padding:4px 0 12px}
.ob{border-left:3px solid var(--cc);margin:12px 14px 0;background:var(--term2);border-radius:0 6px 6px 0}
.ob .obh{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:.82rem;color:var(--term-dim)}
.ob .obh span{margin-right:auto;color:var(--term-ink)}
.badge{font-size:.72rem;color:var(--term-miss);border:1px solid currentColor;border-radius:999px;padding:0 7px}
pre{margin:0;padding:2px 12px 12px;font:13px/1.55 var(--mono);white-space:pre;overflow-x:auto}
pre mark{background:rgba(255,90,100,.16);color:var(--term-miss);border-radius:3px;padding:0 2px}
pre .note{color:var(--term-note);font-family:var(--sans);font-size:.8rem;display:inline-block;padding:3px 0}
.oempty{color:var(--term-dim);padding:40px 20px;text-align:center}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- conta e navegação ---------- */
.userbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.85rem;color:var(--muted)}
.userbar strong{color:var(--ink);font-weight:600}
.lvl{border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:.75rem;color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:4px 2px;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
a.linkbtn{display:inline-block}
.f.locked label::after{content:"padrão";margin-left:6px;font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--muted)}
.f.locked input,.f.locked textarea{background:var(--panel2)}
select:disabled,textarea:disabled,input:disabled{opacity:.7;cursor:not-allowed}
.note-panel{font-size:.85rem;color:var(--muted);margin:0}
.btn.solid{background:var(--accent);color:var(--accent-ink)}
.btn.quiet{background:var(--panel2);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn:disabled{opacity:.6;cursor:wait}

/* ---------- login e senha ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:20px 16px}
.authcard{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px 24px}
.authcard h1{font-size:1.2rem;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}
.authcard p.sub{color:var(--muted);margin:0 0 20px;font-size:.88rem}
.authcard .f{margin-bottom:14px}
.authcard .btn{width:100%;margin-top:4px;padding:10px 14px}
.authmark{display:flex;gap:4px;margin-bottom:18px}
.authmark i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.authmark i:nth-child(1){background:var(--c-base)}.authmark i:nth-child(2){background:var(--c-if)}.authmark i:nth-child(3){background:var(--c-rt)}.authmark i:nth-child(4){background:var(--c-mpls)}
.err{color:var(--danger);font-size:.85rem;min-height:1.3em;margin:8px 0 0}
.ok{color:var(--accent);font-size:.85rem}

/* ---------- administração ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px}
.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:500;color:var(--muted);font-size:.8rem}
td select{width:auto;min-width:120px;padding:5px 7px}
td .acts{display:flex;gap:8px;flex-wrap:wrap}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center;width:110px}
.matrix input{width:18px;height:18px}
.muted{color:var(--muted)}
.off td{color:var(--muted)}
.secret{margin-top:12px;padding:12px 14px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.secret code{font-family:var(--mono);font-size:1.05rem;user-select:all;color:var(--ink)}
.secret p{margin:0 0 6px;font-size:.85rem;color:var(--muted)}
.row-end{display:flex;justify-content:flex-end;margin-top:12px}
.evt td:first-child{white-space:nowrap;color:var(--muted)}

main.auth{display:grid;grid-template-columns:minmax(0,1fr);max-width:none;margin:0}
main.wrap{display:block;max-width:1100px;padding:20px 16px}
.credbox{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:var(--panel)}
.credbox summary{cursor:pointer;font-weight:500}
.credbox[open] summary{margin-bottom:10px}
.f{min-width:0}
.credbox .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:end}
input,select,textarea,button{box-sizing:border-box}