/* Tema: segue o sistema; data-theme="light|dark" no <html> (cookie "tema", botão na barra lateral) força um dos dois */
:root{color-scheme:light;--bg:#f5f6f8;--card:#fff;--tx:#1d2330;--mut:#667085;--bd:#e3e6ec;--ac:#2563eb;--ac-tx:#fff;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;--side:#1d2330;--side-tx:#cfd5e1}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#12151c;--card:#1b2029;--tx:#e6e9ef;--mut:#98a2b3;--bd:#2c3340;--ac:#6ea0ff;--ac-tx:#0b1220;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--side:#0d1016;--side-tx:#b8c0cf}}
:root[data-theme=dark]{color-scheme:dark;--bg:#12151c;--card:#1b2029;--tx:#e6e9ef;--mut:#98a2b3;--bd:#2c3340;--ac:#6ea0ff;--ac-tx:#0b1220;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--side:#0d1016;--side-tx:#b8c0cf}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 14px}h1 .muted{font-size:14px;font-weight:400}
h2{font-size:15px;margin:0 0 8px}
code,.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.muted{color:var(--mut)}.small{font-size:12px}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.dim{opacity:.55}

.shell{display:flex;min-height:100vh}
.side{width:220px;flex:none;background:var(--side);color:var(--side-tx);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.brand{font-size:16px;color:#fff;padding:0 10px 18px}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{color:var(--side-tx);padding:8px 10px;border-radius:6px}
.side nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.side nav a.on{background:rgba(255,255,255,.12);color:#fff}
.me{border-top:1px solid rgba(255,255,255,.1);padding:12px 10px 0;display:flex;flex-direction:column;gap:2px}
.me span{color:#fff}.me small{color:var(--side-tx);opacity:.8;word-break:break-all}
.me .link{color:var(--side-tx);padding:6px 0 0;text-align:left}
.theme-toggle{display:flex;align-items:center;gap:9px;background:none;border:0;padding:12px 0 0;color:var(--side-tx);font:inherit;cursor:pointer;text-align:left}
.theme-toggle i{position:relative;flex:none;width:30px;height:16px;border-radius:99px;background:rgba(255,255,255,.2);transition:background .15s}
.theme-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.theme-toggle[aria-checked=true] i{background:var(--ac)}
.theme-toggle[aria-checked=true] i::after{transform:translateX(14px)}
.theme-toggle:hover span{color:#fff}
.theme-toggle:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.main{flex:1;min-width:0;padding:22px 28px}

.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.head h1{margin:0}
.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
.cards .card{margin:0}
.stat b{display:block;font-size:20px}.stat span{color:var(--mut);font-size:12px}
.cards .act{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;transition:border-color .15s,box-shadow .15s}
.cards .act:hover{border-color:var(--ac)}
.cards .act.on{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--card))}
.cards .act.on span{color:var(--ac)}
.cards .act:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.wrap{overflow:auto}
.card.wrap{padding:0}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;background:var(--card)}
tbody tr:last-child td{border-bottom:0}
tr:hover td{background:color-mix(in srgb,var(--ac) 6%,transparent)}
td.actions{text-align:right;white-space:nowrap}
td.actions>*{vertical-align:middle}
td.actions form{display:inline}
td.actions .btn+.btn,td.actions .btn+form,td.actions form+.btn,td.actions form+form{margin-left:6px}
table.kv{width:auto;margin:8px 0}table.kv th{padding-right:24px}

.tag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;border:1px solid var(--bd);white-space:nowrap}
.tag.ok{border-color:var(--ok)}.tag.bad{border-color:var(--bad)}.tag.warn{border-color:var(--warn)}

.btn{display:inline-block;background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:6px;padding:7px 13px;font:inherit;cursor:pointer}
.btn:hover{border-color:var(--ac);text-decoration:none}
.btn.primary{background:var(--ac);border-color:var(--ac);color:var(--ac-tx)}
.link{background:none;border:0;padding:0;color:var(--ac);font:inherit;cursor:pointer}
.link:hover{text-decoration:underline}
form.inline{display:inline-block;margin:6px 8px 0 0}

input,select{background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:6px;padding:7px 9px;font:inherit;max-width:100%}
input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--ac) 40%,transparent);border-color:var(--ac)}
.form{max-width:560px;display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-weight:500}
.form label.check,label.check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400}
.form fieldset{border:1px solid var(--bd);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.form legend{padding:0 6px;color:var(--mut)}
.form .btn{align-self:flex-start}
.checks{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}

.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.bar input:not([type=date]){min-width:220px}
.tabs{display:flex;gap:4px}
.tabs a{padding:6px 12px;border-radius:6px;border:1px solid var(--bd);color:var(--tx);background:var(--card)}
.tabs a.on{border-color:var(--ac);color:var(--ac)}
.upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.alert{padding:10px 14px;border-radius:6px;margin-bottom:14px;border:1px solid var(--bd);background:var(--card)}
.alert.success{border-color:var(--ok);color:var(--ok)}
.alert.error{border-color:var(--bad);color:var(--bad)}
.alert.warn{border-color:var(--warn);color:var(--warn)}

pre{background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:10px 12px;overflow:auto;margin:8px 0}
[data-copy]{cursor:copy}
[data-copy].copied{outline:2px solid var(--ok)}
ul.plain{margin:6px 0 0;padding-left:18px}

/* login */
body.guest{display:grid;place-items:center;min-height:100vh;padding:16px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;padding:26px}
.login h1{margin:0}.login p{margin:0 0 6px}
.login label{display:flex;flex-direction:column;gap:4px;font-weight:500}
.login .btn{margin-top:6px}

/* contas do servidor: sem rolagem lateral; colunas p3/p2 somem em telas menores */
.card.accounts{overflow:visible}
.accounts>table>thead th{position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;border-bottom:1px solid var(--bd)}
.accounts>table>thead th:first-child{border-top-left-radius:8px}.accounts>table>thead th:last-child{border-top-right-radius:8px}
.accounts>table>thead th:hover{color:var(--tx)}
.accounts>table>thead th.s{color:var(--ac)}
.accounts>table>thead th.s::after{content:" ▼"}.accounts>table>thead th.s.a::after{content:" ▲"}
.accounts>table>tbody>tr.cl>td{padding:9px 12px;vertical-align:middle;white-space:nowrap}
.accounts .n{text-align:right}
.accounts tr.cl{cursor:pointer}
.accounts tr.cl.open>td{background:color-mix(in srgb,var(--ac) 8%,transparent);border-bottom-color:transparent}
.accounts .l1{line-height:1.35}
.accounts .sub{font-size:12px;color:var(--mut);line-height:1.35}
.accounts .sub.warn{color:var(--warn)}.accounts .sub.bad{color:var(--bad)}
.accounts .tag{font-size:10.5px;padding:0 6px;vertical-align:1px}
.meter{display:flex;align-items:center;gap:6px}
.pb{display:inline-block;width:64px;height:6px;background:var(--bd);border-radius:4px;overflow:hidden}
.pb i{display:block;height:100%;border-radius:4px;background:var(--ac)}
.pb i.warn{background:var(--warn)}.pb i.bad{background:var(--bad)}
.det>td{background:var(--bg);padding:14px 16px 16px;white-space:normal}
.det h3{font-size:13px;margin:14px 0 6px;color:var(--mut);font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 18px}
.kv div{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
.kv span{font-size:11.5px;color:var(--mut)}
table.mini{width:100%;background:var(--card);border:1px solid var(--bd);border-radius:6px}
table.mini th,table.mini td{padding:5px 9px;font-size:12.5px}
table.mini td.mono{overflow-wrap:anywhere}
.file-btn input{display:none}
@media(max-width:1360px){.accounts .p3{display:none}}
@media(max-width:1050px){.accounts .p2{display:none}}
@media(max-width:600px){
  .accounts>table>tbody>tr.cl>td{padding:8px;white-space:normal}
  .accounts>table>tbody>tr.cl>td:first-child{overflow-wrap:anywhere}
  .accounts>table>thead th{padding:7px 8px}
  .pb{width:40px}
  .bar input:not([type=date]){min-width:0;flex:1 1 100%}
}

@media(max-width:800px){
  .shell{flex-direction:column}
  .side{width:auto;height:auto;position:static;padding:12px 16px}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .brand{padding:0 0 10px}
  .me{flex-direction:row;gap:10px;align-items:center;flex-wrap:wrap}
  .main{padding:16px}
}

/* assinaturas */
.thumb{width:68px;height:50px;object-fit:cover;border-radius:4px;border:1px solid var(--bd);display:block}
.thumb.big{width:137px;height:100px;margin:6px 0}
.signature-frame{display:block;width:100%;max-width:740px;height:230px;border:1px solid var(--bd);border-radius:6px;background:#fff}
.form .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form input[type=color]{width:64px;height:34px;padding:2px}
.sub{font-size:12px}
.tabs-gap{margin:10px 0}
.btn.sm{padding:4px 10px;font-size:12.5px;line-height:1.4}
.preview-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.preview-pair .card{margin-bottom:0}
.preview-box{overflow:hidden}
.preview-box .signature-frame{max-width:none;border:0;background:transparent}
@media(max-width:1100px){.preview-pair{grid-template-columns:1fr}}

fieldset.plain{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:12px}
fieldset.plain[disabled]{opacity:.6}

/* senhas: olho, medidor de força e recuperação */
.pw{position:relative;display:block}
.pw input{width:100%;padding-right:38px}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:36px;display:grid;place-items:center;background:none;border:0;color:var(--mut);cursor:pointer;border-radius:0 6px 6px 0}
.pw-toggle:hover,.pw-toggle:focus-visible{color:var(--ac)}
.pw-meter{display:block;margin-top:-4px}
.pw-meter[hidden]{display:none}
.pw-meter .bar{display:block;height:5px;border-radius:99px;background:var(--bd);overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;background:var(--bad);transition:width .2s}
.pw-meter[data-level=weak] i{background:var(--warn)}
.pw-meter[data-level=good] i{background:var(--ac)}
.pw-meter[data-level=great] i{background:var(--ok)}
.pw-meter small{color:var(--mut);font-weight:400}
.login .center{text-align:center;font-size:13px}
input.otp{font-family:ui-monospace,Consolas,monospace;font-size:20px;letter-spacing:.35em;text-align:center}