:root {
    color-scheme: dark;
    --color-bg: #070908;             /* fundo mais escuro */
    --color-surface: #1A1D1B;        /* containers e menu */
    --color-surface-muted: #151815;  /* variação sutil */
    --color-border: rgba(3, 205, 71, 0.12);
    --color-border-strong: rgba(3, 205, 71, 0.18);
    --color-text: #f5f5f5;
    --color-text-muted: #9ca3af;
    --color-accent: #03CD47;         /* CTA */
    --color-accent-strong: #03CD47;  /* manter mesmo tom p/ consistência */
    --color-blue: #38bdf8;
    --color-purple: #a855f7;
    --color-orange: #f97316;
    --shadow-soft: 0 20px 60px rgba(16, 185, 129, 0.05);
    --radius-large: 28px;
    --radius-medium: 20px;
    --radius-small: 12px;
    /* Shell fixa atual */
    --sidebar-w: 256px;
    --header-h: 64px;
    --sidebar-offset-x: 24px;
    --sidebar-offset-y: 24px;
    --radius-strong: 20px;
    --container-pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(120% 120% at 50% 10%, rgba(3, 205, 71, 0.10), transparent 50%), var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}
a, html, body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; background: transparent; }

/* Shell fixa do app (mapeada à nossa estrutura) */
#topbar { position: fixed; top: var(--sidebar-offset-y); left: calc(var(--sidebar-w) + var(--sidebar-offset-x) + var(--container-pad)); right: var(--sidebar-offset-x); height: var(--header-h); display: flex; align-items: center; z-index: 60; border-radius: var(--radius-strong); overflow: visible; }
#app-main { padding-top: calc(var(--header-h) + var(--sidebar-offset-y) + 12px); margin-left: calc(var(--sidebar-w) + var(--sidebar-offset-x)); min-height: calc(100vh - var(--header-h)); }
@media (max-width: 960px){ #app-main { margin-left: 0 } #topbar { left: var(--sidebar-offset-x); right: var(--sidebar-offset-x); } }
@media (max-width: 640px){ #topbar { left: var(--sidebar-offset-x); right: var(--sidebar-offset-x); } }
/* Mobile stacking helpers */
@media (max-width: 640px){
  .stack-mobile{ flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; }
  .stack-mobile > *{ width: 100% !important; }
  .table{ min-width: 100% !important; }
}
#sidebar { z-index: 120; overflow-y: auto; background: var(--color-surface); border-radius: var(--radius-strong); }
#sidebar::-webkit-scrollbar{ width:0; height:0 }
#sidebar{ scrollbar-width: none }
.container-page { max-width: 100%; margin: 0; padding: 0 24px }
@media (max-width: 640px){ .container-page{ padding: 0 16px } }

/* Auth */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: radial-gradient(120% 120% at 50% 10%, rgba(16, 185, 129, 0.18), transparent 50%), var(--color-bg); }
.auth__shell { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.auth__card { width: 100%; padding: 2.5rem; border-radius: var(--radius-medium); border: 1px solid var(--color-border); background: linear-gradient(160deg, rgba(13,13,13,.95), rgba(9,9,9,.85)); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1.5rem; }
.auth__brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--color-accent); font-size: 1.1rem }
.auth__title { margin:0; font-size:1.45rem; font-weight:600 }
.auth__subtitle { margin:0; color: var(--color-text-muted); font-size:.95rem }
.auth__alert { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius: var(--radius-small); border:1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.1); color: rgba(248,113,113,.95); font-size:.9rem }
.auth__form { display:flex; flex-direction:column; gap:1.25rem }
.auth__group { display:flex; flex-direction:column; gap:.6rem }
.auth__group label { font-weight:500 }
.auth__group input { padding:.9rem 1rem; border-radius:14px; border:1px solid rgba(16,185,129,.35); background: rgba(16,185,129,.08); color: var(--color-text); transition: border .2s ease, box-shadow .2s ease, background .2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) }
.auth__group input::placeholder { color: rgba(226,232,240,.5) }
.auth__group input:focus { outline:none; border-color: rgba(34,197,94,.85); background: rgba(16,185,129,.16); box-shadow: 0 0 0 3px rgba(16,185,129,.25) }
.auth__submit { justify-content:center }
.auth__footer { font-size:.8rem; color: var(--color-text-muted); text-align:center }

/* Card */
.card { background: #1A1D1B; border: 0; border-radius: var(--radius-medium); padding: 1.25rem; box-shadow: none; position: relative; }
.card::after { content:""; display:none }
.card__header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem }
.card__title { display:inline-flex; align-items:center; gap:.6rem; font-size:1.25rem; font-weight:600 }
.card__subtitle { margin:0; font-size:.9rem; color: var(--color-text-muted); max-width:36rem }
.card__content { display:flex; flex-direction:column; gap:1.5rem }
.card__content--table { padding:0; overflow:hidden }

/* Grids e métricas */
.grid { display:grid; gap:1.5rem }
.grid--metrics { grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width:1280px){ .grid--metrics{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:600px){ .grid--metrics{ grid-template-columns: 1fr } }
.metric-card { display:flex; align-items:center; gap:12px; padding:12px }
.metric-card__icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(16,185,129,.2) }
.metric-card__icon--blue{ background: rgba(56,189,248,.2) }
.metric-card__icon--purple{ background: rgba(168,85,247,.2) }
.metric-card__icon--orange{ background: rgba(249,115,22,.2) }
.metric-card__body{ display:flex; flex-direction:column }
.metric-card__value{ font-size:26px; line-height:1; font-weight:700 }
.metric-card__label{ color: var(--color-text-muted); font-size:13px }
.metric-card__trend{ margin-left:auto; font-size:12px; color: var(--color-text-muted) }
.metric-card__trend.is-positive{ color: var(--color-accent-strong) }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius: var(--radius-small); border:0; background: rgba(255,255,255,.04); color: var(--color-text); font-weight:500; cursor:pointer; transition: background .18s ease, color .18s ease }
.btn:hover { background: rgba(255,255,255,.06) }
.btn.btn-primary { background: #03CD47; color:#000000; border:0 }

/* Tabela */
.table-wrapper{ width:100%; overflow-x:auto }
table{ width:100%; border-collapse: collapse; min-width:720px }
.table thead tr{ background: rgba(16,185,129,.08) }
.table th, .table td{ padding:.9rem 1rem; text-align:left; font-size:.9rem }
.table th{ font-weight:600; color: var(--color-text-muted) }
.table tr + tr td{ border-top:1px solid rgba(255,255,255,.06) }
.badge{ display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .65rem; border-radius:999px; font-size:.75rem; font-weight:500; border:1px solid rgba(16,185,129,.35); color: var(--color-accent); background: rgba(16,185,129,.08) }

/* Sidebar links visuais */
.sidebar__link{ display:flex; align-items:center; gap:10px; padding:10px; border-radius: var(--radius-small); color: var(--color-text-muted); transition: background .2s ease, color .2s ease; border:0; background: rgba(255,255,255,.02) }
.sidebar__link:hover{ background: rgba(255,255,255,.06); color: var(--color-text) }
.sidebar__link.is-active{ background: #03CD47; color: #000000 }

/* Responsivo da sidebar fixa */
@media (max-width: 960px){ #sidebar{ position:fixed; inset:0 40% 0 0; transform: translateX(-110%); transition: transform .3s ease; max-width:320px; } #sidebar.is-open{ transform: translateX(0) } }