:root{
  --ink:#10262B; --tx:#10262B; --tx-2:#45585D; --tx-3:#7A8B8F;
  --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4FBFC; --surface-3:#E2F1F4;
  --line:#DCEBEE; --line-2:#B9D3D8;
  --accent:#00768A; --accent-2:#00A9C8; --accent-soft:#E9FDFF;
  --steel:#00768A; --steel-soft:#E9FDFF;
  --ok:#1B6E5A; --ok-soft:#E6F4F1;
  --warn:#8A5D0E; --warn-soft:#FBEFD6;
  --crit:#B62F3E; --crit-soft:#FCE4E7;
  --brand-red:#F40000; --brand-yellow:#FCEC01;
  --shadow:0 1px 2px rgba(16,38,43,.05), 0 8px 22px -14px rgba(16,38,43,.28);
  --shadow-lg:0 14px 44px -14px rgba(16,38,43,.34);
  --r:14px;
  --f-disp:"Familjen Grotesk","Trebuchet MS",sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tx:#E7F2F4; --tx-2:#A6B9BD; --tx-3:#7C8F93;
    --paper:#0C1618; --surface:#132125; --surface-2:#18292E; --surface-3:#22383E;
    --line:#25393E; --line-2:#3B565C;
    --accent:#5FD8EC; --accent-2:#00A9C8; --accent-soft:#0E3138;
    --steel:#5FD8EC; --steel-soft:#0E3138;
    --ok:#5CC7AC; --ok-soft:#123029;
    --warn:#E2B45F; --warn-soft:#33280F;
    --crit:#F08595; --crit-soft:#3A1C21;
    --brand-red:#FF3B29; --brand-yellow:#FCEC01;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 12px 40px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --tx:#E7F2F4; --tx-2:#A6B9BD; --tx-3:#7C8F93;
  --paper:#0C1618; --surface:#132125; --surface-2:#18292E; --surface-3:#22383E;
  --line:#25393E; --line-2:#3B565C;
  --accent:#5FD8EC; --accent-2:#00A9C8; --accent-soft:#0E3138;
  --steel:#5FD8EC; --steel-soft:#0E3138;
  --ok:#5CC7AC; --ok-soft:#123029;
  --warn:#E2B45F; --warn-soft:#33280F;
  --crit:#F08595; --crit-soft:#3A1C21;
  --brand-red:#FF3B29; --brand-yellow:#FCEC01;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 12px 40px -12px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--tx);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.01em}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{width:34px;height:34px;flex:none;display:block}
.brand h1{font-size:16px;line-height:1.1}
.brand small{display:block;font-size:11px;color:var(--tx-3);font-family:var(--f-mono)}
.topbar .spacer{flex:1}
.slogan{margin:0;font-family:var(--f-disp);font-weight:600;font-size:12.5px;line-height:1.15;
  text-align:right;color:var(--brand-red);letter-spacing:-.01em}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;cursor:pointer;color:var(--tx-2);flex:none}
.iconbtn:hover{background:var(--surface-3);color:var(--tx)}
main{padding:20px 16px 60px;max-width:1700px;width:100%;margin:0 auto}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:10px}
.stack{display:flex;flex-direction:column}
.btn{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:8px 14px;font-weight:600;
  font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:var(--tx)}
.btn:hover{background:var(--surface-2)}
.btn-pri{background:var(--ink);color:#FFF;border-color:var(--ink)}
:root[data-theme="dark"] .btn-pri{background:var(--accent-2);color:#04222A;border-color:var(--accent-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-pri{background:var(--accent-2);color:#04222A;border-color:var(--accent-2)}}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn-danger{color:var(--crit);border-color:var(--crit-soft);background:var(--crit-soft)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:3px 8px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-crit{background:var(--crit-soft);color:var(--crit)}
.p-neutral{background:var(--surface-3);color:var(--tx-2)}
.p-steel{background:var(--steel-soft);color:var(--steel)}
.avatar{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  flex:none;font-family:var(--f-body);background:var(--surface);border:1.8px solid var(--cor-ink,var(--line-2));
  color:var(--cor-ink,var(--tx-2));box-shadow:0 0 0 2px var(--surface)}
.swatch{display:block;width:22px;height:22px;border-radius:999px;border:1px solid rgba(0,0,0,.20)}
.avatars{display:flex;gap:4px;flex-wrap:wrap}
.bar{display:block;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--steel);border-radius:999px;transition:width .35s ease}
.bar.done i{background:var(--ok)}
.bar.late i{background:var(--crit)}
.empty{text-align:center;padding:38px 20px;color:var(--tx-3)}
.empty h3{color:var(--tx-2);font-size:16px;margin-bottom:6px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 0 10px}
.sec-head h3{font-size:15px}

/* ---------- cards pintados ---------- */
.pintado{--tx:var(--ink);--tx-2:var(--ink2);--tx-3:var(--ink2);
  --line:rgba(0,0,0,.14);--line-2:rgba(0,0,0,.22);
  --surface:#FFFFFF;--surface-2:rgba(255,255,255,.7);--surface-3:rgba(0,0,0,.11);
  --steel:var(--ink);--steel-soft:#FFFFFF;
  --ok:#14614F;--ok-soft:#E6F4F1;
  --warn:#7E5409;--warn-soft:#FCF0D6;
  --crit:#A82535;--crit-soft:#FDE7EA;
  background:var(--fill);color:var(--ink);border-color:rgba(0,0,0,.13)}

/* ---------- kanban ---------- */
.kb{display:grid;grid-auto-flow:column;grid-auto-columns:265px;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:120px}
.kcol.over{border-color:var(--accent-2);background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-2)}
.kcol.over .kcol-head .eyebrow{color:var(--accent)}
.kcol-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kcol-head .n{width:20px;height:20px;border-radius:6px;background:var(--surface-3);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--tx-2)}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px;cursor:grab;text-align:left;width:100%;display:block;
  touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kcard.pintado{background:var(--fill);border-color:rgba(0,0,0,.13);box-shadow:var(--shadow)}
.kcard{transition:transform .12s ease, box-shadow .12s ease}
.kcard:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,0,0,.35)}
.kcard.segurando{transform:scale(.985);box-shadow:0 0 0 2px var(--accent-2), 0 10px 22px -12px rgba(0,0,0,.35)}
.kcard:active{cursor:grabbing}
.kcard.fixo,.kcard.fixo:active{cursor:pointer}
.kcard.dragging{opacity:.28;filter:saturate(.35)}
.kcard.fantasma{position:fixed;left:0;top:0;z-index:90;pointer-events:none;margin:0;
  box-shadow:0 20px 44px -12px rgba(0,0,0,.42);transform:rotate(-1.6deg) scale(1.02);cursor:grabbing}
body.arrastando{cursor:grabbing}
body.arrastando *{cursor:grabbing!important}
.kcard h4{font-size:14px;line-height:1.3;margin-bottom:7px}
.kcard .krow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;min-height:20px}
.kcard .kdate{font-family:var(--f-mono);font-size:11.5px;color:var(--tx-3)}
.kcard .kdesc{margin:2px 0 7px;font-size:12.5px;line-height:1.38;color:var(--tx-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.etapas{display:flex;flex-wrap:wrap;gap:6px}
.etapa{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--tx-2)}
.etapa:hover{background:var(--surface-2);color:var(--tx)}
.etapa[aria-pressed="true"]{background:var(--accent-2);border-color:var(--accent-2);color:#04222A}
.cont{align-self:flex-end;font-family:var(--f-mono);font-size:11px;color:var(--tx-3)}
.cont.quase{color:var(--warn)}
.cont.cheio{color:var(--crit);font-weight:600}
.micro .md{display:block;margin-top:3px;font-size:12.5px;color:var(--tx-2);line-height:1.35}
.kcard.k-macro{border-left:5px solid var(--faixa,var(--ink))}
.kcard.k-micro{position:relative;padding-left:16px}
.kcard.k-micro .ktag{position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:10px 0 0 10px;background:var(--faixa,var(--ink))}
.kcard.k-micro .kmacro{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard.k-micro h4{font-weight:600;margin-bottom:2px}
.kcard.k-micro.feita h4{text-decoration:line-through;color:var(--tx-3)}
.kcard.k-micro.feita{opacity:.72}
.legenda{display:flex;flex-wrap:wrap;gap:8px 14px;margin:-2px 0 11px}
.legenda .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2)}
.legenda .lg i{width:12px;height:12px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.16)}

/* ---------- sheet ---------- */
.backdrop{position:fixed;inset:0;background:rgba(6,20,24,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(2px);animation:fade .18s ease}
.backdrop[hidden]{display:none}
.sheet{background:var(--surface);width:100%;max-width:640px;max-height:92vh;border-radius:18px 18px 0 0;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:up .22s cubic-bezier(.2,.8,.3,1)}
.sheet-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;position:sticky;top:0;background:var(--surface);border-radius:18px 18px 0 0}
.sheet-head h3{font-size:17px;flex:1;line-height:1.2}
.sheet-body{padding:16px;overflow-y:auto}
.sheet-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--surface-2)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(22px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.field input,.field select,.field textarea{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;
  padding:9px 11px;font-size:14.5px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-2);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:64px;font-family:inherit}
.field .hint{font-size:11.5px;color:var(--tx-3)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:999px;padding:5px 11px 5px 5px;font-size:13px;cursor:pointer;font-weight:500}
.chip .avatar{width:22px;height:22px;font-size:9.5px}
.chip[aria-pressed="true"]{border-color:var(--accent-2);background:var(--accent-soft);color:var(--accent);font-weight:700}
.chips.seg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.chip.tipo{flex-direction:column;align-items:flex-start;gap:1px;border-radius:11px;padding:10px 12px;text-align:left}
.chip.tipo b{font-size:13.5px;font-weight:700}
.chip.tipo small{font-size:11px;color:var(--tx-3);font-weight:500}
.chip.tipo[aria-pressed="true"] small{color:var(--accent)}
.chip[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- micro tarefas no detalhe ---------- */
.micro{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.micro:last-of-type{border-bottom:0}
.micro .chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;flex:none;margin-top:2px;padding:0}
.micro .chk[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.micro .chk svg{width:12px;height:12px;color:#fff;opacity:0}
.micro .chk[aria-pressed="true"] svg{opacity:1}
.micro .mi{flex:1;min-width:0}
.micro .mi b{font-size:14px;font-weight:600;display:block;line-height:1.3}
.micro.done .mi b{text-decoration:line-through;color:var(--tx-3)}
.micro .mm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:5px;font-size:11.5px;color:var(--tx-3);font-family:var(--f-mono)}
.micro .mcost{font-family:var(--f-mono);font-size:13.5px;font-weight:600;white-space:nowrap}
.totrow{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0 0;margin-top:6px;border-top:2px solid var(--line-2)}
.totrow b{font-family:var(--f-mono);font-size:17px;font-weight:600}

/* ---------- anexos ---------- */
.anexos{display:flex;flex-direction:column;gap:8px}
.anexo{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.anexo .ext{flex:none;min-width:42px;height:30px;padding:0 6px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
  font-family:var(--f-mono);font-weight:700;font-size:10.5px;line-height:30px;text-align:center;letter-spacing:.04em}
.anexo .ai{flex:1;min-width:0}
.anexo .ai b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo .ai small{font-family:var(--f-mono);font-size:11px;color:var(--tx-3)}
.anexo .iconbtn{width:30px;height:30px}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border:1.5px dashed var(--line-2);border-radius:10px;
  cursor:pointer;color:var(--tx-2);font-size:13.5px;text-align:center;background:var(--surface-2)}
.dropzone:hover,.dropzone.sobre{border-color:var(--accent-2);background:var(--accent-soft);color:var(--accent)}
.dropzone u{color:var(--accent);font-weight:600;text-decoration-thickness:1px}
.dropzone small{font-size:11.5px;color:var(--tx-3)}
.dropzone.salvando{pointer-events:none;opacity:.7}
.field label.dropzone{font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tx-2)}
.field label.dropzone:hover,.field label.dropzone.sobre{color:var(--accent)}
.field label.dropzone b{font-weight:600}
.kclip{display:inline-flex;align-items:center;gap:3px;font-family:var(--f-mono);font-size:11.5px;color:var(--tx-2)}
.kclip svg{width:13px;height:13px}
.dl{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:2px 0 16px}
.dl div{background:var(--surface-2);border-radius:10px;padding:10px 11px}
.dl dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3)}
.dl dd{margin:3px 0 0;font-family:var(--f-mono);font-size:15px;font-weight:600}

/* ---------- pessoas (no menu) ---------- */
.pcard{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pcard:last-of-type{border-bottom:0}
.pcard .pi{min-width:0;flex:1}
.pcard .pi b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pi small{color:var(--tx-3);font-size:12.5px}
.pcard .avatar{width:36px;height:36px;font-size:12.5px;border-width:2px}

@media (max-width:700px){ .hide-sm{display:none} }
@media (min-width:1180px){
  main{padding:26px 30px 60px}
  .kb{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .backdrop{align-items:center}
  .sheet{border-radius:16px;max-height:86vh}
  .sheet-head{border-radius:16px 16px 0 0}
}

/* =================== app na nuvem =================== */
[hidden]{display:none!important}
.tela-central{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--paper)}
.caixa-login{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px 22px}
.caixa-login .marca{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.caixa-login .marca .mark{width:46px;height:46px}
.caixa-login h1{font-size:21px;line-height:1.15}
.caixa-login .slogan-login{margin:2px 0 0;color:var(--brand-red);font-family:var(--f-disp);font-weight:600;font-size:13px}
.abas{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:3px;margin-bottom:16px}
.abas button{border:0;background:none;border-radius:8px;padding:8px;font-weight:600;font-size:14px;color:var(--tx-2);cursor:pointer}
.abas button[aria-selected="true"]{background:var(--surface);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.btn-bloco{width:100%;justify-content:center;padding:11px 14px;font-size:15px}
.link-btn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.msg{border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0 0 14px;line-height:1.4}
.msg.erro{background:var(--crit-soft);color:var(--crit)}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.msg.info{background:var(--accent-soft);color:var(--accent)}
.espera-icone{width:56px;height:56px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 14px}

.carregando{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 16px;color:var(--tx-3);font-size:14px}
.giro{width:18px;height:18px;border-radius:999px;border:2px solid var(--line-2);border-top-color:var(--accent-2);animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

.faixa-offline{background:var(--warn-soft);color:var(--warn);font-size:13px;font-weight:600;text-align:center;padding:7px 12px}

.eu-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:3px 10px 3px 3px;cursor:pointer;color:var(--tx);max-width:190px}
.eu-btn:hover{background:var(--surface-3)}
.eu-btn .avatar{width:28px;height:28px;box-shadow:none}
.eu-btn .eu-nome{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bolinha{min-width:18px;height:18px;border-radius:999px;background:var(--brand-red);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 5px}

.menu-lista{display:flex;flex-direction:column;gap:8px}
.menu-lista .btn{justify-content:space-between}
.perm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* painel de permissões */
.pessoa{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.pessoa:last-child{border-bottom:0}
.pessoa .avatar{width:38px;height:38px;font-size:13px;border-width:2px}
.pessoa .pi b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pessoa .pi small{display:block;color:var(--tx-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pessoa .perms{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
.pessoa.pendente{background:var(--warn-soft);margin:0 -16px;padding:12px 16px;border-bottom-color:transparent;border-radius:0}
.chave{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;
  padding:5px 11px 5px 6px;font-size:12.5px;font-weight:600;color:var(--tx-2);cursor:pointer}
.chave i{width:28px;height:16px;border-radius:999px;background:var(--line-2);position:relative;flex:none;transition:background .15s}
.chave i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:999px;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.chave[aria-checked="true"]{border-color:var(--accent-2);color:var(--accent);background:var(--accent-soft)}
.chave[aria-checked="true"] i{background:var(--accent-2)}
.chave[aria-checked="true"] i::after{transform:translateX(12px)}
.chave:disabled{opacity:.55;cursor:not-allowed}
.sec-tit{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin:6px 0 2px}

/* comentários */
.comentarios{display:flex;flex-direction:column;gap:12px}
.coment{display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.coment .avatar{grid-row:span 2;margin-top:2px}
.coment .cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px}
.coment .cab b{font-weight:600}
.coment .cab time{font-family:var(--f-mono);font-size:11px;color:var(--tx-3)}
.coment .cab .link-btn{font-size:12px;color:var(--tx-3);margin-left:auto}
.coment p{margin:0;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tx)}
.novo-coment{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.novo-coment textarea{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:9px 11px;font-size:14.5px;min-height:62px;resize:vertical;width:100%;font-family:inherit}
.novo-coment textarea:focus{border-color:var(--accent-2);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.novo-coment .row{justify-content:space-between}
.vazio-min{color:var(--tx-3);font-size:13.5px;margin:4px 0 0}

/* histórico */
.hist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--tx-2)}
.hist time{font-family:var(--f-mono);font-size:11px;color:var(--tx-3);margin-right:6px}
details.bloco{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
details.bloco summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);list-style:none}
details.bloco summary::-webkit-details-marker{display:none}
details.bloco summary::before{content:"▸ "} details.bloco[open] summary::before{content:"▾ "}
details.bloco > *:not(summary){margin-top:10px}

.somente-leitura{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12.5px;color:var(--tx-2);margin-bottom:14px}
fieldset.campos{border:0;padding:0;margin:0;min-width:0}
fieldset.campos:disabled input,fieldset.campos:disabled select,fieldset.campos:disabled textarea{background:var(--surface-2);color:var(--tx-2)}

/* avisos */
.toasts{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,440px)}
.toast{background:var(--ink);color:#fff;border-radius:11px;padding:10px 14px;font-size:14px;box-shadow:var(--shadow-lg);pointer-events:auto;animation:up .2s ease}
:root[data-theme="dark"] .toast{background:#E7F2F4;color:#10262B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:#E7F2F4;color:#10262B}}
.toast.erro{background:var(--crit);color:#fff}
.progresso-import{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:10px 0}
.progresso-import i{display:block;height:100%;background:var(--accent-2);width:0;transition:width .2s}

/* celular */
.kb-wrap{position:relative}
@media (max-width:1179px){
  .kb{grid-auto-columns:min(84vw,300px);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .kcol{scroll-snap-align:start}
}
@media (max-width:700px){
  main{padding:14px 12px 40px}
  .topbar{padding-left:12px;padding-right:12px;gap:10px}
  .brand h1{font-size:15px}
  .eu-btn{padding:3px}
  .eu-btn .eu-nome{display:none}
  .brand small{font-size:10.5px;line-height:1.35}
  .sec-head{margin:18px 0 8px}
}