/* ===== Plano de Aporte — painel administrativo =====
   Mesmos tokens de design-system/tokens/*.css usados pelos outros apps.
   Registro de produto: página preta, navy como único acento, densidade alta
   (é uma tela de trabalho, não de venda). */
:root{
  --navy-700:#17223a; --navy-600:#253551; --navy-500:#35496e; --navy-400:#4c6795;
  --navy-300:#7a93be; --navy-200:#9db4d4;

  --accent-primary:var(--navy-600);
  --accent-primary-bright:var(--navy-500);
  --accent-primary-deep:var(--navy-700);
  --accent-ink:var(--navy-200);

  --black:#000000; --gray-1000:#050505; --gray-950:#0d0d0c; --gray-900:#121111;
  --gray-850:#171616; --gray-800:#1f1e1e; --gray-700:#2a2829; --gray-600:#3a3837;
  --gray-500:#4c4948; --gray-400:#6b6763; --gray-300:#8f8b86; --gray-200:#b3b0aa;
  --gray-100:#e0e0db; --white:#ffffff;

  --surface-page:var(--black);
  --surface-card:var(--gray-950);
  --surface-card-hover:var(--gray-900);
  --surface-raised:#1a1918;
  --surface-input:#141313;
  --surface-chip:#1a1918;
  --surface-navy-wash:#0a0f1a;

  --text-primary:var(--white);
  --text-secondary:var(--gray-100);
  --text-muted:var(--gray-300);
  --text-on-accent:var(--white);
  --text-accent:var(--accent-ink);

  --border-subtle:#1c1b1b;
  --border-default:var(--gray-700);
  --border-strong:var(--gray-600);
  --border-accent:var(--navy-500);

  --positive:var(--navy-200);
  --negative:var(--gray-200);
  --warning:var(--gray-100);
  --data-track:var(--gray-800);

  --gradient-goal:linear-gradient(90deg,#253551 0%,#7a93be 55%,#e0e0db 100%);
  --glow-accent:radial-gradient(60% 60% at 0% 50%,rgba(53,73,110,.6) 0%,rgba(53,73,110,0) 70%);

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --card-pad:20px; --grid-gap:16px;
  --sidebar-w:248px; --topbar-h:64px; --bottomnav-h:72px;

  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --radius-xl:24px; --radius-pill:999px; --radius-card:18px; --radius-control:12px;

  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.6);
  --shadow-popover:0 16px 48px rgba(0,0,0,.8);

  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);

  --fs-heading:24px; --fs-subheading:16px; --fs-body:14px; --fs-additional:12px; --fs-micro:11px;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;

  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  color-scheme: dark;
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3{ font-weight:var(--fw-medium); letter-spacing:-0.01em; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--text-accent); }
.icon{ display:inline-block; vertical-align:-3px; flex:none; }
.muted{ color:var(--text-muted); }
.num{ font-variant-numeric:tabular-nums; }
[hidden]{ display:none !important; }
.boot{ padding:64px 24px; text-align:center; color:var(--text-muted); }
:focus-visible{ outline:2px solid rgba(157,180,212,.6); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===== Shell ===== */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sidebar-w); flex:0 0 auto; height:100vh; position:sticky; top:0;
  border-right:1px solid var(--border-subtle); padding:24px 16px;
  display:flex; flex-direction:column; gap:2px; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:0 8px 6px; }
.brand .mark{ width:22px; height:22px; color:var(--text-primary); flex:none; }
.brand .word{ font-family:var(--font-display-serif); font-size:18px; font-weight:500; }
.brand-sub{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); padding:0 8px 22px; }
.nav-item{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px;
  border-radius:var(--radius-control); color:var(--text-muted);
  font-size:14px; font-weight:var(--fw-medium); cursor:pointer;
  background:none; border:none; width:100%; text-align:left;
  transition:color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.nav-item:hover{ color:var(--text-primary); background:var(--surface-card-hover); }
.nav-item.active{ color:var(--text-primary); background:var(--surface-raised); }
.nav-badge{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--radius-pill);
  background:var(--accent-primary); color:var(--white); font-size:var(--fs-micro);
  display:inline-flex; align-items:center; justify-content:center; font-weight:var(--fw-bold);
}
.nav-sep{ height:1px; background:var(--border-subtle); margin:12px 8px; }
.sidebar-foot{ margin-top:auto; padding:14px 8px 0; font-size:var(--fs-micro); color:var(--text-muted); }
.sidebar-foot .email{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:6px; }
.login-link{ font-size:var(--fs-additional); color:var(--text-accent); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
.login-link:hover{ color:var(--text-primary); }

.shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  min-height:var(--topbar-h); flex:0 0 auto; position:sticky; top:0; z-index:8;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; border-bottom:1px solid var(--border-subtle); background:var(--surface-page);
}
.topbar h1{ font-size:var(--fs-heading); }
.topbar .sub{ font-size:var(--fs-additional); color:var(--text-muted); margin-top:2px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.content{ padding:20px 24px 48px; max-width:1360px; width:100%; margin:0 auto; }

.bottomnav{ display:none; }
@media (max-width:900px){
  .sidebar{ display:none; }
  .topbar{ padding:12px 16px; }
  .content{ padding:16px 16px calc(var(--bottomnav-h) + 32px); }
  .bottomnav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:15;
    height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--surface-raised); border-top:1px solid var(--border-subtle);
  }
  .bottomnav .nav-item{
    flex:1; flex-direction:column; height:100%; border-radius:0;
    justify-content:center; gap:4px; font-size:var(--fs-micro); padding:0 4px;
  }
  .bottomnav .nav-item.active{ background:transparent; color:var(--text-accent); }
}

/* ===== Grids e cards ===== */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); margin-bottom:var(--space-5); }
.kpi-row > *{ min-width:0; }
.grid-2{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--grid-gap); align-items:start; }
.grid-2 > *{ min-width:0; }
.grid-even{ display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap); align-items:start; }
.grid-even > *{ min-width:0; }
@media (max-width:1000px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } .grid-2,.grid-even{ grid-template-columns:1fr; } }

.card{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:var(--card-pad); box-shadow:var(--shadow-card);
}
/* Só entre cards empilhados: dentro de grade quem separa é o gap. */
.card + .card{ margin-top:var(--grid-gap); }
.kpi-row > .card + .card,
.grid-2 > .card + .card,
.grid-even > .card + .card{ margin-top:0; }
.card-accent{ background:var(--surface-navy-wash); border-color:var(--border-accent); }
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); flex-wrap:wrap; }
.card-title{ font-size:var(--fs-subheading); font-weight:var(--fw-medium); }
.card-sub{ font-size:var(--fs-additional); color:var(--text-muted); margin-top:-6px; margin-bottom:var(--space-3); }
.stat-label{ font-size:var(--fs-additional); color:var(--text-muted); margin-bottom:8px; }
.stat-value{ font-size:var(--fs-heading); font-weight:var(--fw-bold); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.stat-foot{ margin-top:8px; font-size:var(--fs-additional); color:var(--text-muted); }
.stat-value.is-accent{ color:var(--text-accent); }

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:40px; padding:0 18px; border-radius:var(--radius-pill); border:none;
  font-size:14px; font-weight:var(--fw-medium); cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.btn-primary{ background:var(--accent-primary); color:var(--text-on-accent); }
.btn-primary:hover{ background:var(--accent-primary-bright); }
.btn-primary:active{ background:var(--accent-primary-deep); }
.btn-ghost{ background:transparent; color:var(--text-secondary); }
.btn-ghost:hover{ background:var(--surface-card-hover); color:var(--text-primary); }
.btn-outline{ background:transparent; color:var(--text-secondary); border:1px solid var(--border-default); }
.btn-outline:hover{ background:var(--surface-card-hover); color:var(--text-primary); }
.btn-danger{ background:transparent; color:var(--negative); border:1px solid var(--border-default); }
.btn-danger:hover{ background:var(--surface-card-hover); }
.btn-sm{ height:32px; padding:0 14px; font-size:var(--fs-additional); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:default; pointer-events:none; }
.btn-icon{
  width:36px; height:36px; padding:0; border-radius:var(--radius-pill);
  background:transparent; border:none; color:var(--text-muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.btn-icon:hover{ background:var(--surface-card-hover); color:var(--text-primary); }
.btn-icon.danger:hover{ color:var(--negative); }

/* ===== Tabela ===== */
.table-wrap{ overflow-x:auto; margin:0 calc(var(--card-pad) * -1); padding:0 var(--card-pad); }
table.dt{ width:100%; border-collapse:collapse; font-size:14px; }
.dt th{
  text-align:left; font-size:var(--fs-additional); color:var(--text-muted);
  font-weight:var(--fw-medium); padding:0 12px 10px; white-space:nowrap;
}
.dt td{ padding:13px 12px; border-top:1px solid var(--border-subtle); vertical-align:middle; }
.dt tbody tr{ transition:background-color var(--dur-fast) var(--ease-standard); }
.dt tbody tr:hover td{ background:var(--surface-card-hover); }
.dt .num{ text-align:right; }
.dt .row-link{ cursor:pointer; }
.dt .cell-main{ font-weight:var(--fw-medium); }
.dt .cell-sub{ font-size:var(--fs-micro); color:var(--text-muted); margin-top:3px; }
.row-actions{ display:flex; gap:2px; justify-content:flex-end; }

/* ===== Filtros ===== */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:var(--grid-gap); }
.search{
  flex:1; min-width:200px; max-width:380px;
  background:var(--surface-input); border:1px solid var(--border-default);
  border-radius:var(--radius-pill); color:var(--text-primary);
  padding:10px 16px; font:inherit; font-size:14px;
}
.search:focus{ outline:2px solid rgba(157,180,212,.5); outline-offset:1px; }
.chip{
  height:34px; padding:0 14px; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--surface-chip); border:1px solid var(--border-subtle); color:var(--text-muted);
  font-size:var(--fs-additional); font-family:inherit;
}
.chip:hover{ color:var(--text-primary); }
.chip.active{ background:var(--accent-primary); border-color:transparent; color:var(--white); }
.segmented{ display:inline-flex; background:var(--surface-raised); border-radius:var(--radius-pill); padding:3px; gap:2px; flex-wrap:wrap; }
.segmented button{
  height:32px; padding:0 16px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-pill); color:var(--text-muted);
  font-size:var(--fs-additional); font-weight:var(--fw-medium);
}
.segmented button:hover{ color:var(--text-primary); }
.segmented button.active{ background:var(--accent-primary); color:var(--white); }

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:var(--radius-pill); font-size:var(--fs-micro); font-weight:var(--fw-medium);
  background:var(--surface-chip); color:var(--text-muted); border:1px solid var(--border-subtle);
  white-space:nowrap;
}
.badge.accent{ color:var(--text-accent); border-color:var(--border-accent); }
.badge.solid{ background:var(--accent-primary); color:var(--white); border-color:transparent; }
.badge.warn{ color:var(--warning); border-color:var(--border-strong); }
.badge.off{ opacity:.55; }

/* ===== Formulários ===== */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.field label{ font-size:var(--fs-additional); color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:var(--surface-input); border:1px solid var(--border-default);
  border-radius:var(--radius-control); color:var(--text-primary);
  padding:11px 12px; font:inherit; font-size:14px; width:100%;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid rgba(157,180,212,.5); outline-offset:1px; border-color:var(--border-accent);
}
.field-hint{ font-size:var(--fs-micro); color:var(--text-muted); line-height:1.6; }
.field-error{ font-size:var(--fs-additional); color:var(--gray-200); margin:-4px 0 14px; }
.field-inline{ display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:13px; color:var(--text-secondary); }
.field-inline input[type=checkbox]{ width:18px; height:18px; accent-color:var(--navy-500); flex:none; }

/* ===== Diálogos ===== */
.modal-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.dialog{
  background:var(--surface-raised); border-radius:var(--radius-xl); padding:24px;
  width:100%; max-width:560px; max-height:88vh; overflow:auto; box-shadow:var(--shadow-popover);
}
.dialog-wide{ max-width:780px; }
.dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.dialog-head h2{ font-size:var(--fs-subheading); }
.dialog-head .sub{ font-size:var(--fs-additional); color:var(--text-muted); margin-top:4px; }
.dialog-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; flex-wrap:wrap; }
@media (max-width:560px){
  .modal-scrim{ padding:0; align-items:flex-end; }
  .dialog{ max-width:none; border-radius:var(--radius-xl) var(--radius-xl) 0 0; max-height:92vh; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}

/* ===== Detalhe chave/valor ===== */
.kv{ display:flex; flex-direction:column; }
.kv-row{ display:flex; gap:16px; padding:11px 0; border-top:1px solid var(--border-subtle); font-size:13px; }
.kv-row:first-child{ border-top:none; }
.kv-key{ width:170px; flex:none; color:var(--text-muted); }
.kv-val{ flex:1; min-width:0; overflow-wrap:anywhere; }
.raw{
  background:var(--surface-input); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:14px; font-size:11px; line-height:1.6;
  max-height:320px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
  color:var(--text-muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ===== Avisos / vazios ===== */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--radius-lg);
  background:var(--surface-navy-wash); border:1px solid var(--border-accent);
  font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:var(--grid-gap);
}
.notice .icon{ color:var(--text-accent); margin-top:2px; }
.notice strong{ color:var(--text-primary); font-weight:var(--fw-medium); }
.notice-plain{ background:var(--surface-card); border-color:var(--border-subtle); }
.notice-plain .icon{ color:var(--text-muted); }
.notice-warn{ background:var(--surface-card); border-color:var(--border-strong); }
.notice-warn .icon{ color:var(--warning); }
.notice-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.empty{ padding:40px 20px; text-align:center; color:var(--text-muted); font-size:13px; }
.empty-title{ color:var(--text-secondary); font-size:15px; margin-bottom:6px; }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:80;
  background:var(--surface-raised); border:1px solid var(--border-accent);
  border-radius:var(--radius-pill); padding:12px 22px; font-size:13px;
  box-shadow:var(--shadow-popover); max-width:calc(100vw - 32px); text-align:center;
}
@media (max-width:900px){ .toast{ bottom:calc(var(--bottomnav-h) + 16px); } }

/* ===== Login ===== */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
.login-page::before{ content:""; position:absolute; inset:0; background:var(--glow-accent); pointer-events:none; }
.login-card{ position:relative; width:100%; max-width:392px; display:flex; flex-direction:column; gap:22px; }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.login-brand .mark{ width:44px; height:44px; color:var(--text-primary); }
.login-brand .word{ font-family:var(--font-display-serif); font-size:22px; font-weight:500; }
.login-brand .tagline{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); }
.login-foot{ text-align:center; font-size:var(--fs-micro); color:var(--text-muted); line-height:1.7; }

/* ===== Comunidade (moderação) ===== */
.post-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-micro); font-weight:var(--fw-medium); color:var(--text-accent); text-transform:uppercase;
}
.post-author{ font-size:13px; font-weight:var(--fw-medium); }
.post-time{ font-size:var(--fs-micro); color:var(--text-muted); }
.post-title{ font-size:var(--fs-subheading); font-weight:var(--fw-medium); margin-bottom:6px; }
.post-body{ font-size:14px; color:var(--text-secondary); line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.post-body.clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-foot{ display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-subtle); flex-wrap:wrap; }
.post-action{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:var(--radius-pill); background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:var(--fs-additional); font-family:inherit;
}
.post-action:hover{ background:var(--surface-raised); color:var(--text-primary); }
.post-action.danger:hover{ color:var(--negative); }
.card.is-hidden{ opacity:.6; border-style:dashed; }
.comment{ display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--border-subtle); }
.comment-main{ flex:1; min-width:0; }
.comment-body{ font-size:13px; color:var(--text-secondary); line-height:1.6; margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ===== Suporte ===== */
.thread{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; max-height:52vh; overflow-y:auto; }
.msg{ max-width:78%; padding:12px 16px; border-radius:var(--radius-lg); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-mine{ align-self:flex-end; background:var(--accent-primary); color:var(--white); border-bottom-right-radius:var(--radius-xs); }
.msg-theirs{ align-self:flex-start; background:var(--surface-raised); border-bottom-left-radius:var(--radius-xs); }
.msg-time{ font-size:var(--fs-micro); color:var(--text-muted); margin-top:5px; }
.msg-mine .msg-time{ color:rgba(255,255,255,.65); }
@media (max-width:560px){ .msg{ max-width:88%; } }

/* ===== Conteúdos ===== */
.module-title{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); margin:22px 0 10px; }
.module-title:first-child{ margin-top:0; }
.lesson{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  border-radius:var(--radius-md); background:var(--surface-card);
  border:1px solid var(--border-subtle); margin-bottom:8px;
}
.lesson-main{ flex:1; min-width:0; }
.lesson-title{ font-size:14px; font-weight:var(--fw-medium); }
.lesson-sum{ font-size:var(--fs-additional); color:var(--text-muted); margin-top:3px; }

/* ===== Barras ===== */
.goal-bar-track{ height:8px; border-radius:var(--radius-pill); background:var(--data-track); overflow:hidden; margin:10px 0 8px; }
.goal-bar-fill{ height:100%; border-radius:var(--radius-pill); background:var(--gradient-goal); }

/* ===== Utilidades ===== */
.flex{ display:flex; align-items:center; gap:8px; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stack-sm{ display:flex; flex-direction:column; gap:8px; }
.mt-4{ margin-top:var(--space-4); }
.disclosure{ font-size:var(--fs-micro); color:var(--text-muted); margin-top:var(--space-8); line-height:1.7; }