/* Design system Lucrativa: tokens do navy do mark; claro e escuro */
:root {
  --brand-700:#303549; --brand-900:#1e2231; --brand-500:#474e6b; --brand-100:#e6e8f2;
  --surface-000:#fff; --surface-100:#f4f5f8; --surface-200:#e7e9f0;
  --ink-900:#1b1e29; --ink-700:#303549; --ink-500:#5b6179; --ink-on-brand:#fcfcfc;
  --border-200:#d2d6e2; --border-strong:#767c90; --focus-ring:#3f4a78;
  --success-600:#2a7a58; --warning-600:#8a5a00; --danger-600:#96222f;
  --shadow-sm:0 1px 2px rgba(30,34,49,.08); --shadow-md:0 6px 16px rgba(30,34,49,.12);
  --sans:"Manrope","Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-900:#141823; --brand-500:#7b84ad; --brand-100:#2b3145;
    --surface-000:#161922; --surface-100:#1e2230; --surface-200:#272c3c;
    --ink-900:#f5f6f9; --ink-700:#dfe2ec; --ink-500:#a7aec4;
    --border-200:#333a4d; --border-strong:#6b7489; --focus-ring:#9aa4d8;
    --success-600:#7fd9ae; --warning-600:#e5ad45; --danger-600:#e0727e;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--surface-100); color:var(--ink-700); font:400 15px/23px var(--sans); min-height:100vh; }
h1,h2,h3 { color:var(--ink-900); margin:0; }
h1 { font:700 28px/34px var(--sans); letter-spacing:-.01em; }
h2 { font:600 20px/28px var(--sans); }
h3 { font:600 16px/24px var(--sans); }
p { margin:0 0 12px; }
a { color:var(--focus-ring); text-underline-offset:2px; }
a.btn, a.tab { text-decoration:none; }
a.btn-primary { color:var(--ink-on-brand); }
.muted { color:var(--ink-500); } .small { font-size:13px; line-height:20px; }
.label { font:600 12px/16px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
.fig { font:500 15px/22px var(--mono); font-variant-numeric:tabular-nums; }
.fig-lg { font:500 24px/30px var(--mono); color:var(--ink-900); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Barra superior (igual ao painel do Luc) */
.topbar { background:var(--brand-700); color:var(--ink-on-brand); padding:calc(env(safe-area-inset-top) + 10px) 16px 10px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; font:700 20px/24px var(--sans); letter-spacing:-.01em; margin-right:auto; }
.brand img { width:32px; height:32px; border-radius:22%; display:block; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.12); font:600 13px/20px var(--sans); color:var(--ink-on-brand); white-space:nowrap; }
.chip .fig { font-size:13px; }
.topbar .btn-ghost { color:var(--ink-on-brand); border-color:rgba(255,255,255,.35); }
.topbar .btn-ghost:hover { background:rgba(255,255,255,.12); }

/* Abas */
.tabs { background:var(--surface-000); border-bottom:1px solid var(--border-200); display:flex; gap:4px; padding:0 12px; overflow-x:auto; position:sticky; top:var(--topbar-h,56px); z-index:19; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { appearance:none; background:none; border:0; border-bottom:3px solid transparent; padding:14px 14px 11px; font:600 14px/20px var(--sans); color:var(--ink-500); cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; }
.tab svg { width:20px; height:20px; flex:none; }
.tab:hover { color:var(--ink-900); }
.tab[aria-current="page"] { color:var(--ink-900); border-bottom-color:var(--brand-700); }
@media (prefers-color-scheme: dark) { .tab[aria-current="page"] { border-bottom-color:var(--brand-500); } }

main { max-width:1100px; margin:0 auto; padding:24px 16px 96px; }
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:24px; }
.grid { display:grid; gap:16px; } .grid.stats { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.card { background:var(--surface-000); border:1px solid var(--border-200); border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow-sm); }
.card .label { margin-bottom:8px; }
.card.pad-0 { padding:0; overflow:hidden; }
.card-head { padding:16px; border-bottom:1px solid var(--border-200); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.stack > * + * { margin-top:24px; }

/* Botões e campos */
.btn { appearance:none; border:1px solid transparent; border-radius:var(--r-md); padding:12px 16px; min-height:44px; font:600 15px/22px var(--sans); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-primary { background:var(--brand-700); color:var(--ink-on-brand); }
.btn-primary:hover { background:var(--brand-500); } .btn-primary:active { background:var(--brand-900); }
@media (prefers-color-scheme: dark) { .btn-primary { background:#3a4260; } }
.btn-ghost { background:transparent; color:var(--ink-700); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--brand-100); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-sm { min-height:36px; padding:6px 12px; font-size:13px; }
.btn svg { width:18px; height:18px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
input[type=text],input[type=email],input[type=password],input[type=search],select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface-000); color:var(--ink-900); font:400 16px/22px var(--sans); }
input[type=checkbox] { width:22px; height:22px; accent-color:var(--brand-700); cursor:pointer; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--r-sm); font:600 12px/18px var(--sans); background:var(--brand-100); color:var(--ink-700); white-space:nowrap; }
.badge.ok { color:var(--success-600); } .badge.warn { color:var(--warning-600); } .badge.err { color:var(--danger-600); }
.banner { padding:12px 16px; border-radius:var(--r-md); border:1px solid var(--border-200); background:var(--surface-000); display:flex; gap:12px; align-items:flex-start; }
.banner.ok { border-color:var(--success-600); } .banner.warn { border-color:var(--warning-600); } .banner.err { border-color:var(--danger-600); }
.banner b { color:var(--ink-900); }

/* Tabelas (viram cartões no celular) */
table { width:100%; border-collapse:collapse; }
th { text-align:left; background:var(--surface-200); padding:10px 12px; font:600 12px/16px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
td { padding:12px; border-top:1px solid var(--border-200); vertical-align:middle; }
td.num, th.num { text-align:right; }
tr.sel td { background:var(--brand-100); }
td select, td input[type=text] { min-height:36px; padding:6px 8px; font-size:14px; }
@media (max-width:720px) {
  table.stack-m thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.stack-m, table.stack-m tbody, table.stack-m tr, table.stack-m td { display:block; width:100%; }
  table.stack-m tr { border-top:1px solid var(--border-200); padding:8px 12px; }
  table.stack-m td { border:0; padding:4px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right; }
  table.stack-m td::before { content:attr(data-label); font:600 12px/16px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); text-align:left; flex:none; }
  table.stack-m td.nolabel::before { display:none; }
  table.stack-m td select, table.stack-m td input[type=text] { max-width:60%; }
}

/* Chat */
.chat { display:flex; flex-direction:column; height:min(70vh,640px); min-height:420px; }
.chat-log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--surface-100); }
.msg { max-width:min(560px,88%); padding:10px 14px; border-radius:var(--r-md); white-space:pre-wrap; word-wrap:break-word; border:1px solid var(--border-200); background:var(--surface-000); }
.msg.user { align-self:flex-end; background:var(--brand-700); color:var(--ink-on-brand); border-color:transparent; }
.msg .who { display:block; font:600 11px/16px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:2px; }
.msg.user .who { display:none; }
.chat-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--border-200); background:var(--surface-000); }
.chat-form input { flex:1; }

/* Envio de arquivos e progresso */
.drop { border:2px dashed var(--border-strong); border-radius:var(--r-lg); padding:32px 16px; text-align:center; background:var(--surface-000); }
.drop.over { background:var(--brand-100); border-color:var(--brand-700); }
.steps { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.step { padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); font:600 13px/20px var(--sans); color:var(--ink-500); }
.step.on { background:var(--brand-700); color:var(--ink-on-brand); border-color:transparent; }
.step.done { color:var(--success-600); border-color:var(--success-600); }
.progress { height:14px; background:var(--surface-200); border-radius:999px; overflow:hidden; border:1px solid var(--border-200); }
.progress > i { display:block; height:100%; background:var(--brand-700); transition:width .3s; }
@media (prefers-color-scheme: dark) { .progress > i { background:var(--brand-500); } }
.bars { display:flex; align-items:flex-end; gap:6px; height:120px; }
.bars div { flex:1; background:var(--brand-700); border-radius:4px 4px 0 0; min-height:2px; position:relative; }
@media (prefers-color-scheme: dark) { .bars div { background:var(--brand-500); } }
.sticky-act { position:sticky; bottom:calc(64px + env(safe-area-inset-bottom)); background:var(--surface-000); border:1px solid var(--border-200); border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--shadow-md); display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:16px; }
@media (min-width:721px) { .sticky-act { bottom:16px; } }

/* Login */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.auth-card { width:min(440px,100%); background:var(--surface-000); border:1px solid var(--border-200); border-radius:var(--r-lg); padding:32px 24px; box-shadow:var(--shadow-md); }
.auth-card .brand { color:var(--ink-900); margin-bottom:8px; }
.seg { display:flex; gap:4px; background:var(--surface-200); padding:4px; border-radius:var(--r-md); margin:16px 0; }
.seg button { flex:1; border:0; background:none; padding:10px; border-radius:var(--r-sm); font:600 14px/20px var(--sans); color:var(--ink-500); cursor:pointer; min-height:44px; }
.seg button[aria-pressed="true"] { background:var(--surface-000); color:var(--ink-900); box-shadow:var(--shadow-sm); }
#toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); background:var(--brand-900); color:var(--ink-on-brand); padding:10px 16px; border-radius:var(--r-md); box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s; max-width:90vw; z-index:50; }
#toast.show { opacity:1; }

/* Celular: abas viram barra inferior (PWA) */
@media (max-width:720px) {
  h1 { font-size:24px; line-height:30px; }
  main { padding:16px 12px 120px; }
  .tabs { position:fixed; top:auto; bottom:0; left:0; right:0; padding:0 0 env(safe-area-inset-bottom); justify-content:space-around; border-top:1px solid var(--border-200); border-bottom:0; box-shadow:0 -2px 8px rgba(30,34,49,.08); z-index:30; overflow:visible; }
  .tab { flex-direction:column; gap:2px; padding:8px 2px; font-size:11px; line-height:14px; flex:1; border-bottom:0; border-top:3px solid transparent; justify-content:center; }
  .tab[aria-current="page"] { border-top-color:var(--brand-700); }
  .topbar .hide-m { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }