:root{
  --bg:#0a0a0a; --panel:#141414; --panel-border:#262626; --grid:#1f1f1f;
  --gold:#D4A017; --gold-soft:rgba(212,160,23,0.12);
  --text:#f2f0e8; --text-dim:#9a968c;
  --green:#3fbf8f; --red:#e5555a; --blue:#4fa3d1;
  --header-h:60px; --sidebar-w:220px; --sidebar-w-collapsed:64px;
}
html[data-tema="claro"]{
  --bg:#f5f3ee; --panel:#ffffff; --panel-border:#e2ddd0; --grid:#ece7da;
  --gold:#b8860b; --gold-soft:rgba(184,134,11,0.10);
  --text:#221f18; --text-dim:#726d5e;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:'Segoe UI', Arial, sans-serif;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg);
}

/* ---------- Header fixo ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 20px; border-bottom:1px solid var(--gold); background:var(--bg);
}
.topbar-left{display:flex; align-items:center; gap:16px;}
.topbar-logo{height:32px; width:auto;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.icon-btn{
  background:none; border:1px solid transparent; color:var(--text-dim);
  width:36px; height:36px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{color:var(--gold); border-color:var(--panel-border); background:var(--panel);}
select{background:var(--panel);border:1px solid var(--panel-border);color:var(--text);padding:8px 12px;border-radius:4px;font-size:12px;}
.badge{border:1px solid var(--gold);color:var(--gold);padding:4px 10px;border-radius:20px;font-size:10.5px;letter-spacing:.5px;}

.avatar-wrap{position:relative;}
.avatar-btn{background:none;border:none;color:var(--text);display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.avatar-btn:hover{background:var(--panel);}
.avatar-img{width:28px;height:28px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;color:var(--gold);overflow:hidden;background-size:cover;background-position:center;}
.avatar-nome{font-size:12.5px;font-weight:600;}
.avatar-menu{
  position:absolute; right:0; top:46px; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:8px; min-width:200px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:200;
}
.avatar-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; color:var(--text);
  padding:10px 12px; border-radius:6px; cursor:pointer; font-size:13px; text-align:left;
}
.avatar-menu-item:hover{background:var(--gold-soft); color:var(--gold);}
.avatar-menu-sair{color:var(--red);}
.avatar-menu-upload{cursor:pointer;}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--sidebar-w); z-index:90;
  background:var(--bg); border-right:1px solid var(--panel-border); padding:16px 10px; transition:width .18s;
  overflow-y:auto; overflow-x:hidden;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.side-nav{display:flex; flex-direction:column; gap:4px;}
.side-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:6px; cursor:pointer;
  color:var(--text-dim); font-size:12.5px; letter-spacing:.3px; white-space:nowrap; overflow:hidden;
}
.side-item:hover{color:var(--gold); background:var(--panel);}
.side-item.active{color:#0a0a0a; background:var(--gold); font-weight:700;}
.side-item svg{flex-shrink:0;}
.sidebar.collapsed .side-item span.label{display:none;}

/* ---------- Main content ---------- */
main{margin-left:var(--sidebar-w); margin-top:var(--header-h); max-width:1180px; padding:26px 24px 90px; transition:margin-left .18s;}
.sidebar.collapsed ~ main{margin-left:var(--sidebar-w-collapsed);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.sub-nav{display:flex;gap:8px;margin-bottom:18px;}
.sub-btn{background:transparent;border:1px solid var(--panel-border);color:var(--text-dim);padding:8px 16px;border-radius:20px;font-size:11px;letter-spacing:.8px;cursor:pointer;}
.sub-btn.active{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);}
.sub-panel{display:none;}
.sub-panel.active{display:block;}

.section-label{color:var(--gold);font-size:12px;letter-spacing:2px;font-weight:700;margin:28px 0 12px;}
.section-label:first-child{margin-top:0;}
.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:20px;}

.cards{display:grid;gap:14px;margin-bottom:6px;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--panel);border:1px solid var(--panel-border);border-left:3px solid var(--gold);border-radius:6px;padding:16px;}
.card.neg{border-left-color:var(--red);}
.card.pos{border-left-color:var(--green);}
.card .val{font-size:20px;font-weight:800;}
.card .lbl{font-size:10.5px;color:var(--text-dim);letter-spacing:.5px;margin-top:6px;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;color:var(--text-dim);font-weight:600;font-size:10.5px;letter-spacing:.5px;padding:10px 8px;border-bottom:1px solid var(--panel-border);}
td{padding:11px 8px;border-bottom:1px solid var(--grid);}
tr:hover td{background:var(--gold-soft);}
.carregando{color:var(--text-dim);text-align:center;padding:20px;}
.saldo-pos{color:var(--green);font-weight:700;}
.saldo-neg{color:var(--red);font-weight:700;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.dre-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--grid);font-size:13px;}
.dre-row.total{border-top:1px solid var(--gold);border-bottom:none;padding-top:12px;margin-top:6px;font-weight:700;}
.dre-row .neg{color:var(--red);}

.note{font-size:11.5px;color:var(--text-dim);border-left:2px solid var(--gold);padding:10px 14px;margin:16px 0;background:var(--panel);}
.note.warn{border-left-color:var(--red);}

.detalhe-toggle{background:none;border:none;color:var(--gold);font-size:11.5px;cursor:pointer;padding:12px 0;letter-spacing:.5px;}
.detalhe-lista{display:none;margin-top:6px;}
.detalhe-lista.aberto{display:block;}

.form-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.form-row label{width:230px;font-size:12px;color:var(--text-dim);}
.form-row input, .form-row select{flex:1;background:var(--bg);border:1px solid var(--panel-border);color:var(--text);padding:9px 12px;border-radius:4px;font-size:13px;}
.btn-salvar{background:var(--gold);color:#0a0a0a;border:none;padding:10px 22px;border-radius:4px;font-weight:700;letter-spacing:.5px;cursor:pointer;font-size:12px;}
.salvo-ok{color:var(--green);margin-left:12px;font-size:12px;}

/* ---------- Drawers (Atualizações / Configurações) ---------- */
.drawer{
  position:fixed; top:var(--header-h); right:0; bottom:0; width:360px; max-width:90vw; z-index:150;
  background:var(--panel); border-left:1px solid var(--panel-border); padding:0; overflow-y:auto;
  box-shadow:-8px 0 24px rgba(0,0,0,.3);
}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--panel-border);font-weight:700;color:var(--gold);letter-spacing:.5px;font-size:13px;}
.drawer-body{padding:18px 20px;}
.drawer-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;line-height:1;}
.update-item{font-size:12.5px;padding:10px 0;border-bottom:1px solid var(--grid);color:var(--text-dim);}
.update-data{color:var(--gold);font-weight:700;margin-right:8px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:flex;align-items:center;justify-content:center;}
.modal-overlay[hidden]{display:none !important;}
.modal{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:0;width:380px;max-width:92vw;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--panel-border);font-weight:700;color:var(--gold);font-size:13px;}
.modal form{padding:18px 20px;}

/* ---------- Login ---------- */
.pagina-login{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:40px 36px;width:360px;max-width:90vw;text-align:center;}
.login-logo{height:56px;margin-bottom:18px;}
.login-card h1{font-size:20px;margin:0 0 4px;letter-spacing:.5px;}
.login-sub{color:var(--text-dim);font-size:12px;margin:0 0 24px;}
.login-row{flex-direction:column;align-items:flex-start;gap:6px;}
.login-row label{width:auto;}
.login-btn{width:100%;padding:12px;}
.login-erro{color:var(--red);font-size:12px;margin-bottom:12px;text-align:left;}

@media (max-width: 900px){
  :root{--sidebar-w:200px;}
  .sidebar{transform:translateX(-100%); transition:transform .18s;}
  .sidebar.mobile-open{transform:translateX(0);}
  main, .sidebar.collapsed ~ main{margin-left:0;}
  .topbar-logo{height:26px;}
  .avatar-nome{display:none;}
}
@media (max-width: 720px){
  .cards.c3, .cards.c4{grid-template-columns:1fr;}
  .grid2{grid-template-columns:1fr;}
  .form-row{flex-direction:column;align-items:flex-start;gap:4px;}
  .form-row label{width:auto;}
  .drawer{width:100vw;}
}