/* Duarte Flow — sistema visual v3 (referência: dashboard "InsightX": sidebar em card flutuante, cards chapados, acento lime).
   Tokens claro/escuro. Paleta categórica (--s1..s6) validada com validate_palette.js e usada SÓ pra entidades (bots/séries);
   o acento lime (--acc) é a cor de interface e da série única. Títulos Poppins, texto Plus Jakarta Sans. Movimento só em transform/opacity. */
:root {
  color-scheme: light;
  --page: #ebebe6; --panel: #ffffff; --surface: #ffffff; --surface2: #f3f3ee; --shell: rgba(18,18,16,.04); --ring: rgba(18,18,16,.09);
  --ink: #111110; --ink2: #51504b; --muted: #8a8880; --grid: #e7e6df; --base: #cbcac0;
  --acc: #c3f06a; --acc-ink: #17220a; --acc-t: #4f7d08; --acc-soft: rgba(143,196,40,.16); --acc-glow: rgba(150,205,45,.38);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #4a3aa7;
  --good: #1f9d2b; --good-t: #1a7f24; --good-bg: rgba(31,157,43,.12); --warn: #e8a400; --serious: #ec835a; --crit: #d03b3b; --crit-bg: rgba(208,59,59,.11);
  --sombra: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -28px rgba(20,20,16,.25);
  --ease: cubic-bezier(0.32, 0.72, 0, 1); --r: 22px;
  --font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --panel: #141414; --surface: #181818; --surface2: #202020; --shell: rgba(255,255,255,.04); --ring: rgba(255,255,255,.075);
  --ink: #f5f5f2; --ink2: #b4b4ad; --muted: #7b7b75; --grid: #272727; --base: #3b3b3b;
  --acc: #bff26a; --acc-ink: #131c07; --acc-t: #bff26a; --acc-soft: rgba(191,242,106,.12); --acc-glow: rgba(120,170,20,.5);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;
  --good: #3dd26b; --good-t: #3dd26b; --good-bg: rgba(61,210,107,.13); --warn: #fab219; --crit: #f0605e; --crit-bg: rgba(240,96,94,.14);
  --sombra: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: dark;
  --page: #0d0d0d; --panel: #141414; --surface: #181818; --surface2: #202020; --shell: rgba(255,255,255,.04); --ring: rgba(255,255,255,.075);
  --ink: #f5f5f2; --ink2: #b4b4ad; --muted: #7b7b75; --grid: #272727; --base: #3b3b3b;
  --acc: #bff26a; --acc-ink: #131c07; --acc-t: #bff26a; --acc-soft: rgba(191,242,106,.12); --acc-glow: rgba(120,170,20,.5);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;
  --good: #3dd26b; --good-t: #3dd26b; --good-bg: rgba(61,210,107,.13); --warn: #fab219; --crit: #f0605e; --crit-bg: rgba(240,96,94,.14);
  --sombra: none;
} }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, .kpi .v { font-family: var(--font-display); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--acc-t); text-decoration: none; } a:hover { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 10px; }
::selection { background: var(--acc-soft); }
.muted { color: var(--muted); } .ink2 { color: var(--ink2); } .mono { font-family: var(--mono); font-size: .92em; }
.hide { display: none !important; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- layout: sidebar flutuante + conteúdo ---- */
.app { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns .6s var(--ease); }
body.side-min .app { grid-template-columns: 112px minmax(0, 1fr); }
.side { position: fixed; z-index: 40; top: 14px; left: 14px; bottom: 14px; width: 272px; padding: 18px 14px 14px; display: flex; flex-direction: column; border-radius: 28px; background: var(--panel); box-shadow: 0 0 0 1px var(--ring), var(--sombra); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; transition: width .6s var(--ease), transform .7s var(--ease); }
body.side-min .side { width: 84px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 17px; white-space: nowrap; }
.logo { width: 30px; height: 30px; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f3ffd0 0%, var(--acc) 38%, #5a8a08 100%); box-shadow: 0 6px 16px -6px var(--acc-glow); }
.brand .bn { flex: 1; } .side-toggle { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--shell); color: var(--ink2); transition: background .35s var(--ease); } .side-toggle:hover { background: var(--ring); }
.side-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-g { font-size: 12.5px; color: var(--muted); padding: 18px 10px 8px; font-weight: 500; white-space: nowrap; }
.nav-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 5px 12px 5px 6px; border-radius: 17px; color: var(--ink2); text-align: left; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.nav-i .ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--shell); transition: background .4s var(--ease), color .4s var(--ease); }
.nav-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.nav-i:hover { background: var(--shell); color: var(--ink); } .nav-i:active { transform: scale(.98); }
.nav-i[aria-current="page"] { background: var(--ink); color: var(--page); } .nav-i[aria-current="page"] .ic { background: var(--acc); color: var(--acc-ink); }
.nav-i .bdg { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--crit); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
/* dentro de um bot a lateral vira o menu dele: cabeçalho com avatar + nome, "voltar", e as seções */
.nav-bot { display: flex; align-items: center; gap: 11px; padding: 8px 8px 14px; min-width: 0; animation: vin .6s var(--ease) both; }
.nav-bot .tx { min-width: 0; flex: 1; } .nav-bot .tx b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .nav-bot .tx small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-bot .bt-av { flex: none; } .nav-bot-skel { display: inline-block; border-radius: 50%; background: linear-gradient(90deg, var(--shell), color-mix(in srgb, var(--ink) 9%, transparent), var(--shell)); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
.nav-voltar { color: var(--muted); font-size: 13px; } .nav-voltar .ic { background: transparent; } .nav-voltar svg { transform: rotate(180deg); }
#nav[data-contexto="bot"] .nav-g { padding-top: 12px; }
body.side-min .nav-bot { justify-content: center; padding: 4px 0 10px; } body.side-min .nav-bot .tx { display: none; }
body.side-min .nav-i span:not(.ic), body.side-min .nav-g, body.side-min .brand .bn, body.side-min .conta .ct { display: none; } body.side-min .nav-i { justify-content: center; padding: 5px; } body.side-min .brand { justify-content: center; padding-bottom: 8px; } body.side-min .brand { flex-direction: column; gap: 10px; } body.side-min .side-toggle { display: grid; } body.side-min .side-toggle svg { transform: scaleX(-1); }   /* estreito: o botão continua aí pra reabrir (seta invertida) */
.side-foot { margin-top: 12px; position: relative; }
.conta { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border-radius: 18px; text-align: left; transition: background .35s var(--ease); } .conta:hover { background: var(--shell); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--acc-ink); background: linear-gradient(135deg, var(--acc), #86c33a); }
.conta .ct { min-width: 0; flex: 1; } .conta .ct b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conta .ct small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta .kb { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); } .conta .kb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.conta-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 6px; border-radius: 20px; background: var(--surface2); box-shadow: 0 0 0 1px var(--ring), 0 24px 50px -20px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease); z-index: 5; }
.conta-menu.aberto { opacity: 1; transform: none; pointer-events: auto; }
.conta-menu .nav-i { padding: 7px 10px; } .conta-menu .nav-i .ic { width: 30px; height: 30px; }

.main { grid-column: 2; min-width: 0; padding: 14px clamp(16px, 2.4vw, 36px) 90px 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 0 22px; position: sticky; top: 0; z-index: 30; background: linear-gradient(var(--page) 72%, transparent); }
.topbar h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca { position: relative; width: min(380px, 34vw); flex: none; }
.busca input { width: 100%; height: 48px; padding: 0 56px 0 46px; border-radius: 999px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; box-shadow: 0 0 0 1px var(--ring) inset; transition: box-shadow .3s var(--ease); }
.busca input::placeholder { color: var(--muted); } .busca input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--acc) inset, 0 0 0 5px var(--acc-soft); }
.busca > svg { position: absolute; left: 17px; top: 14px; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.busca kbd { position: absolute; right: 14px; top: 13px; font-family: var(--mono); font-size: 11px; color: var(--muted); padding: 3px 8px; border-radius: 8px; background: var(--shell); box-shadow: 0 0 0 1px var(--ring) inset; pointer-events: none; }
.busca-res { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 10; padding: 6px; border-radius: 20px; background: var(--surface2); box-shadow: 0 0 0 1px var(--ring), 0 24px 50px -20px rgba(0,0,0,.6); max-height: 60vh; overflow-y: auto; }
.busca-res .nav-i { padding: 6px 10px 6px 6px; } .busca-res .nav-i .ic { width: 30px; height: 30px; } .busca-res .nav-i small { margin-left: auto; color: var(--muted); font-size: 11.5px; } .busca-res .nav-i[aria-selected="true"] { background: var(--shell); color: var(--ink); }
.ib { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--ring) inset; transition: background .4s var(--ease), transform .45s var(--ease); }
.ib:hover { background: var(--surface2); } .ib:active { transform: scale(.94); } .ib svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.ib .pt { position: absolute; top: 9px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--crit); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.burger { display: none; } .top-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.view { min-width: 0; max-width: 1280px; }
.eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--ink2); background: var(--shell); box-shadow: 0 0 0 1px var(--ring) inset; }

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; } body.side-min .app { grid-template-columns: 1fr; }
  .side { width: min(86vw, 320px) !important; transform: translateX(-112%); z-index: 80; } body.side-min .nav-i span:not(.ic), body.side-min .nav-g, body.side-min .brand .bn, body.side-min .conta .ct { display: revert; }
  body.menu-aberto .side { transform: none; box-shadow: 0 0 0 1px var(--ring), 40px 0 80px -30px rgba(0,0,0,.8); }
  body.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70; }
  .burger { display: grid; } .main { grid-column: 1; padding: 10px 14px 80px; } .busca { width: auto; flex: 1; min-width: 0; } .topbar h1 { display: none; } .topbar { flex-wrap: nowrap; padding-bottom: 14px; }
  .busca kbd { display: none; } .ib.so-desk { display: none; } .titulo-m { display: block !important; }
}
.titulo-m { display: none; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin: 2px 2px 16px; }

/* ---- cards chapados ---- */
.shell { padding: 0; border-radius: var(--r); background: none; box-shadow: none; min-width: 0; }
.core { border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--ring), var(--sombra); padding: clamp(18px, 2vw, 26px); min-width: 0; position: relative; }
.core > h2, .core > .h2 { font-size: 14px; font-weight: 500; color: var(--ink2); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grid { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.sp { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 14px; }
.stack > * + * { margin-top: clamp(12px, 1.4vw, 18px); }

/* ---- botões ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; min-height: 40px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: var(--surface2); box-shadow: 0 0 0 1px var(--ring) inset; transition: transform .45s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--ink) 10%, var(--surface2)); } .btn:active { transform: scale(.97); }
.btn.pri { background: var(--acc); color: var(--acc-ink); box-shadow: 0 10px 26px -12px var(--acc-glow); } .btn.pri:hover { background: color-mix(in srgb, var(--acc) 88%, #fff); }
.btn.perigo { color: var(--crit); } .btn.sm { padding: 5px 14px; min-height: 32px; font-size: 12.5px; } .btn[disabled] { opacity: .42; pointer-events: none; }
.btn.ico { padding: 0; width: 40px; }
.inp, .sel, .txt { width: 100%; padding: 11px 16px; border-radius: 15px; border: 0; background: var(--surface2); color: var(--ink); font: inherit; font-size: 14px; box-shadow: 0 0 0 1px var(--ring) inset; transition: box-shadow .3s var(--ease); min-height: 44px; }
.txt { min-height: 104px; resize: vertical; line-height: 1.55; border-radius: 17px; } .txt.mono, .inp.mono { font-family: var(--mono); font-size: 13px; }
.inp::placeholder, .txt::placeholder { color: var(--muted); }
.inp:focus, .sel:focus, .txt:focus { outline: none; box-shadow: 0 0 0 1.5px var(--acc) inset, 0 0 0 5px var(--acc-soft); }
.sel { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a8880' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.sel option { background: var(--surface); color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field > label, .field > .lab { font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.field .dica { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.sw { position: relative; display: inline-flex; width: 44px; height: 26px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; } .sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--base); transition: background .4s var(--ease); }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .5s var(--ease); box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.sw input:checked + i { background: var(--acc); } .sw input:checked + i::after { transform: translateX(18px); background: var(--acc-ink); }
.sw input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 3px; }
.linha-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .linha-sw .t { font-size: 14px; font-weight: 500; } .linha-sw .d { font-size: 12px; color: var(--muted); }

/* ---- peças ---- */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--shell); box-shadow: 0 0 0 1px var(--ring) inset; width: max-content; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge.ok { color: var(--good-t); background: var(--good-bg); box-shadow: none; } .badge.ok::before { background: var(--good); } .badge.warn::before { background: var(--warn); } .badge.bad { color: var(--crit); background: var(--crit-bg); box-shadow: none; } .badge.bad::before { background: var(--crit); } .badge.info::before { background: var(--s1); }
.tabs { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--surface2); box-shadow: 0 0 0 1px var(--ring) inset; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
.tabs button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; transition: background .4s var(--ease), color .4s var(--ease), transform .35s var(--ease); }
.tabs button:hover { color: var(--ink); } .tabs button:active { transform: scale(.96); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--page); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--grid); white-space: nowrap; font-size: 12.5px; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; transition: background .3s var(--ease); } .tbl tr:hover td { background: var(--shell); } .tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; }
.kpi .l { font-size: 13px; color: var(--ink2); font-weight: 500; } .kpi .v { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin-top: 4px; } .kpi .d { font-size: 12px; color: var(--muted); }
.vazio { padding: 54px 18px; text-align: center; color: var(--muted); } .vazio b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.lista > .item { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--grid); } .lista > .item:last-child { border-bottom: 0; } .lista .item .t { font-weight: 600; } .lista .item .s { font-size: 12.5px; color: var(--muted); }
.lista > .item.clic { cursor: pointer; transition: background .3s var(--ease); border-radius: 16px; } .lista > .item.clic:hover { background: var(--shell); }
.chip { display: inline-flex; padding: 2px 10px; border-radius: 9px; font-size: 11.5px; background: var(--shell); box-shadow: 0 0 0 1px var(--ring) inset; font-family: var(--mono); }
.err { color: var(--crit); font-size: 13px; min-height: 18px; } .ok-t { color: var(--good-t); }
pre.code { background: var(--surface2); border-radius: 15px; padding: 14px; overflow: auto; font-family: var(--mono); font-size: 12px; box-shadow: 0 0 0 1px var(--ring) inset; max-height: 360px; }
.skel { border-radius: 12px; background: linear-gradient(90deg, var(--shell), color-mix(in srgb, var(--ink) 9%, transparent), var(--shell)); background-size: 200% 100%; animation: sk 1.4s linear infinite; height: 18px; } @keyframes sk { to { background-position: -200% 0; } }

/* ---- toast e modal ---- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 400px); }
.toast { padding: 13px 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 500; box-shadow: 0 22px 44px -18px rgba(0,0,0,.7); animation: tin .6s var(--ease); } .toast.bad { background: var(--crit); color: #fff; } @keyframes tin { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.modal-bg { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 16px; animation: fin .35s var(--ease); } @keyframes fin { from { opacity: 0; } }
.modal { width: min(100%, var(--w, 560px)); max-height: 92dvh; display: flex; flex-direction: column; animation: mup .6s var(--ease); } @keyframes mup { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal .core { display: flex; flex-direction: column; min-height: 0; max-height: 92dvh; }
.modal .mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .modal .mh b { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; font-weight: 600; } .modal .mb { overflow-y: auto; min-height: 0; flex: 1; padding: 2px; } .modal .mf { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; }
.login { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 24px 16px; } .login .core { display: flex; flex-direction: column; gap: 16px; padding: 32px; } .login-h { font-size: 34px; letter-spacing: -.04em; line-height: 1; font-weight: 600; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.go { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 7px 7px 24px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 700; transition: transform .5s var(--ease); } .go:active { transform: scale(.98); }
.go .arr { width: 40px; height: 40px; border-radius: 50%; background: var(--acc-ink); color: var(--acc); display: grid; place-items: center; transition: transform .5s var(--ease); } .go:hover .arr { transform: translate(3px, -2px) scale(1.06); }
.go .arr svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- entrada de página ---- */
.view > * { animation: vin .8s var(--ease) both; } .view > *:nth-child(2) { animation-delay: .06s; } .view > *:nth-child(3) { animation-delay: .12s; } .view > *:nth-child(4) { animation-delay: .18s; } .view > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes vin { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .tbl { font-size: 12.5px; } .modal-bg { align-items: end; padding: 0; } .modal { width: 100%; --w: 100%; } .modal .core { border-radius: var(--r) var(--r) 0 0; } .core { padding: 18px; } }