:root { --bg:#0f172a; --card:#1e293b; --txt:#e2e8f0; --muted:#94a3b8;
        --ok:#22c55e; --alerta:#f59e0b; --estourou:#ef4444; --brand:#3b82f6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
       font-family:system-ui,-apple-system,sans-serif; padding-bottom:72px; }
header.topo { display:flex; justify-content:space-between; align-items:center;
              padding:16px; position:sticky; top:0; background:var(--bg); }
main { padding:0 16px 16px; max-width:560px; margin:0 auto; }
.card { background:var(--card); border-radius:16px; padding:16px; margin:12px 0; }
.barra { height:10px; border-radius:6px; background:#334155; overflow:hidden; }
.barra > span { display:block; height:100%; }
.barra .ok { background:var(--ok); } .barra .alerta { background:var(--alerta); }
.barra .estourou { background:var(--estourou); }
.barra .comprometido { background:repeating-linear-gradient(45deg,#64748b,#64748b 4px,#475569 4px,#475569 8px); }
nav.inferior { position:fixed; bottom:0; left:0; right:0; display:flex;
               justify-content:space-around; background:var(--card);
               padding:8px 0; border-top:1px solid #334155; }
nav.inferior a { color:var(--muted); text-decoration:none; font-size:12px;
                 display:flex; flex-direction:column; align-items:center; gap:2px; }
nav.inferior a.ativo { color:var(--brand); }
input,select,button { font-size:16px; padding:12px; border-radius:12px;
                      border:1px solid #334155; background:#0b1220; color:var(--txt); width:100%; }
input:focus,select:focus { outline:none; border-color:var(--brand);
                           box-shadow:0 0 0 3px rgba(59,130,246,.25); }
button.primario { background:var(--brand); border:none; font-weight:600; cursor:pointer; }
label { display:block; margin:12px 0 4px; color:var(--muted); font-size:14px; }
/* respiro: botões nunca colados na caixa de cima; campos com ritmo vertical */
form button { margin-top:16px; }
.campo { margin-bottom:14px; }
.campo label { margin-top:0; }

/* ---- Telas de autenticação (login / cadastro) ---- */
body.auth-page { padding-bottom:0; }
body.auth-page main { padding:0; max-width:none; }
.auth-wrap { min-height:100dvh; display:flex; align-items:center; justify-content:center;
             padding:24px;
             background:
               radial-gradient(1100px 560px at 50% -12%, rgba(59,130,246,.20), transparent 60%),
               radial-gradient(760px 460px at 108% 112%, rgba(34,197,94,.14), transparent 55%),
               var(--bg); }
.auth-card { width:100%; max-width:380px; padding:34px 28px 28px;
             background:linear-gradient(180deg, #1e293b, #151f30);
             border:1px solid #2b3a52; border-radius:24px;
             box-shadow:0 24px 70px -24px rgba(0,0,0,.7); }
.brand-mark { width:58px; height:58px; margin:0 auto 18px; border-radius:17px;
              display:flex; align-items:center; justify-content:center;
              font-size:20px; font-weight:800; color:#fff; letter-spacing:-.02em;
              background:linear-gradient(135deg, var(--brand), var(--ok));
              box-shadow:0 10px 26px -8px rgba(59,130,246,.6); }
.brand-title { text-align:center; font-size:23px; font-weight:800;
               letter-spacing:-.02em; margin:0 0 5px; }
.brand-sub { text-align:center; color:var(--muted); font-size:14px; margin:0 0 26px; }
.auth-form .campo { margin-bottom:14px; }
.auth-form label { margin:0 0 6px; }
.auth-form input { transition:border-color .15s, box-shadow .15s; }
.auth-form button.primario { margin-top:8px; padding:14px;
                             transition:filter .15s, transform .05s; }
.auth-form button.primario:hover { filter:brightness(1.08); }
.auth-form button.primario:active { transform:translateY(1px); }
.auth-toggle { text-align:center; color:var(--muted); font-size:14px; margin:20px 0 0; }
.auth-toggle a { color:var(--brand); text-decoration:none; font-weight:600; }
.erro { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4);
        color:#fca5a5; padding:10px 12px; border-radius:10px; font-size:14px;
        margin:0 0 16px; text-align:center; }
.abas { display:flex; gap:8px; margin:12px 0; overflow-x:auto; }
.abas a { padding:8px 14px; border-radius:999px; background:var(--card);
          color:var(--muted); text-decoration:none; white-space:nowrap;
          font-size:14px; }
.abas a.ativa { background:var(--brand); color:#fff; font-weight:600; }
a.link-card { text-decoration:none; color:inherit; display:block; }
button.perigo { background:var(--estourou); border:none; font-weight:600; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.chip { padding:6px 12px; border-radius:999px; background:#0b1220;
        border:1px solid #334155; color:var(--muted); font-size:14px;
        cursor:pointer; user-select:none; }
.chip.ativa { background:var(--brand); border-color:var(--brand); color:#fff; }
a.chip { text-decoration:none; }
.nova-tag-row { display:flex; gap:8px; }
.nova-tag-row button { width:auto; margin-top:0; padding:12px 18px; }
.nav-mes { display:flex; align-items:center; justify-content:space-between;
           gap:8px; background:var(--card); border-radius:16px;
           padding:8px; margin:12px 0; }
.nav-mes .seta { width:44px; height:44px; flex:none; display:flex;
                 align-items:center; justify-content:center;
                 background:#0b1220; border:1px solid #334155;
                 border-radius:12px; color:var(--txt); text-decoration:none;
                 font-size:22px; line-height:1; padding-bottom:3px; }
.nav-mes .seta:active { background:var(--brand); border-color:var(--brand); }
.nav-mes .mes-centro { text-align:center; line-height:1.15; min-width:0; }
.nav-mes .mes-nome { display:block; font-weight:700; font-size:18px; }
.nav-mes .mes-ano { display:block; color:var(--muted); font-size:11px;
                    letter-spacing:4px; margin-left:4px; }
.nav-mes .mes-hoje { display:inline-block; margin-top:4px; padding:2px 10px;
                     border-radius:999px; background:rgba(59,130,246,.15);
                     color:var(--brand); font-size:12px; font-weight:600;
                     text-decoration:none; }