/* =====================================================================
   CALKOLAI — estilo comum do site (padrão visual calkolai-tema)
   Amarelo (destaque) · Preto (texto) · Cinza (base)
   ===================================================================== */
:root{
  --bg:#f4f4f1; --surface:#ffffff; --sunk:#ecebe6; --line:#e1e0da; --line-strong:#c9c8c0;
  --muted:#5d5f63; --ink:#1b1c1e;
  --accent:#f2b705; --accent-ink:#1b1c1e; --accent-soft:#fdf1c7;
  --ok:#2c7a4b; --ok-soft:#e3f2e8; --warn:#9a5b00; --warn-soft:#fdf0dc; --err:#b3261e; --err-soft:#fbe9e7;
  --shadow:0 1px 2px rgba(27,28,30,.06),0 6px 22px rgba(27,28,30,.07);
  --r:10px;
  --f-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#131416; --surface:#1c1d20; --sunk:#232427; --line:#2d2e31; --line-strong:#44464a;
  --muted:#a3a49f; --ink:#ececea; --accent:#f5c02a; --accent-ink:#17181a; --accent-soft:#3a3013;
  --ok:#6cc08c; --ok-soft:#1d3326; --warn:#f0b860; --warn-soft:#3a2c14; --err:#f08a80; --err-soft:#3d1f1c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.35); color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-sans);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto}
[hidden]{display:none!important}

/* ---------- marca ---------- */
.ck-brand{display:inline-flex;align-items:center;gap:.22em;font:700 26px/1 var(--f-sans);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.ck-brand-mark{width:.46em;height:.46em;background:var(--accent);box-shadow:.11em .11em 0 -.02em var(--ink);margin-right:.12em}
.ck-brand-ai{background:var(--accent);color:var(--accent-ink);border-radius:.16em;padding:0 .08em;margin-left:.02em;font-weight:700}

/* ---------- topo ---------- */
.top{display:flex;align-items:center;gap:14px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.top .sp{flex:1}
.top .who{display:block;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

/* ---------- botões e campos ---------- */
button,.btn{font:600 15px/1 var(--f-sans);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
button:hover,.btn:hover{border-color:var(--ink)}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pri:hover{border-color:var(--ink)}
.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ghost{background:transparent;border-color:transparent;text-decoration:underline;padding-inline:6px}
button:disabled{opacity:.55;cursor:default}
label.f{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
label.f small{font-weight:400;color:var(--muted)}
input,select{font:16px var(--f-sans);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:11px 12px;width:100%}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- mensagens ---------- */
.msg{border-radius:8px;padding:10px 12px;font-size:14px;border-left:4px solid}
.msg.ok{background:var(--ok-soft);border-color:var(--ok)}
.msg.warn{background:var(--warn-soft);border-color:var(--warn)}
.msg.err{background:var(--err-soft);border-color:var(--err)}
.msg.info{background:var(--accent-soft);border-color:var(--accent)}
.pill{display:inline-block;font:600 12px/1 var(--f-sans);padding:5px 8px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.err{background:var(--err-soft);color:var(--err)}
.pill.mut{background:var(--sunk);color:var(--muted)}

/* ---------- janela (login, assinar) ---------- */
.dlg{position:fixed;inset:0;background:rgba(10,10,12,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:max(40px,env(safe-area-inset-top,0px)) 16px 24px;z-index:50;overflow-y:auto}
.dlg-box{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);width:100%;max-width:440px;padding:22px;display:flex;flex-direction:column;gap:14px;position:relative}
.dlg-box h2{font-size:22px}
.dlg-x{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:22px;padding:6px 10px}
.tabs{display:flex;gap:4px;margin-right:34px;background:var(--sunk);border-radius:8px;padding:4px}
.tabs button{flex:1;border:0;background:transparent;padding:9px}
.tabs button[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow)}

/* ---------- rodapé com aviso ---------- */
.foot{border-top:1px solid var(--line);margin-top:48px;padding-block:20px 28px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:10px}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.aviso{font-size:12.5px;color:var(--muted);max-width:110ch}

/* ---------- cookies ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--bg);z-index:40;
  padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px}
.cookies p{max-width:70ch}
.cookies a{color:var(--bg)}

/* ---------- ícones de sistema (linha Prancheta) ---------- */
.appic{width:100%;height:auto;filter:drop-shadow(0 2px 5px rgba(27,28,30,.16))}

@media (max-width:600px){.top .who{display:none}}