:root{
  --bg-deep:#050914; --bg-mid:#0a1024;
  --panel:rgba(15,23,45,0.42); --panel-border:rgba(96,165,250,0.18);
  --sidebar:rgba(8,13,28,0.85);
  --accent:#4da3ff; --accent2:#22d3ee; --accent3:#818cf8;
  --text:#e9eefb; --text-dim:#7d8bab;
  --green:#34d399; --red:#f87171; --amber:#fbbf24; --white-bar:#dbe4f5;
  --mono:'SFMono-Regular', Consolas, 'Courier New', monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(77,163,255,0.10), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(129,140,248,0.08), transparent 40%),
    var(--bg-deep);
  color:var(--text); font-family:'Segoe UI', Arial, sans-serif; min-height:100vh;
}

/* ---------- LOGIN / AUTH ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{
  width:100%;max-width:410px;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:16px;padding:34px;backdrop-filter:blur(14px);box-shadow:0 10px 50px rgba(0,0,0,0.4);
}
.auth-card h1{
  font-size:22px;margin:0 0 4px;font-weight:800;
  background:linear-gradient(90deg,var(--text),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-card .sub{font-size:12.5px;color:var(--text-dim);margin-bottom:26px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;color:var(--text-dim);letter-spacing:.6px;margin-bottom:6px;text-transform:uppercase;}
.field input,.field select{width:100%;}
.auth-links{margin-top:18px;font-size:12px;color:var(--text-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.auth-links a{color:var(--accent2);text-decoration:none;}
.auth-links a:hover{text-decoration:underline;}
.alert{padding:11px 14px;border-radius:8px;font-size:12.5px;margin-bottom:16px;}
.alert.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5;}
.alert.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#6ee7b7;}
.alert.info{background:rgba(77,163,255,.10);border:1px solid rgba(77,163,255,.35);color:#93c5fd;}

/* ---------- LAYOUT ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--panel-border);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:22px 14px;
  position:sticky;top:0;height:100vh;
}
.brand{font-size:13px;font-weight:800;letter-spacing:1px;background:linear-gradient(90deg,var(--text),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;}
.brand-sub{font-size:10px;color:var(--text-dim);margin-bottom:26px;letter-spacing:.5px;}
.side-nav{display:flex;flex-direction:column;gap:6px;}
.side-nav button{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:1px solid transparent;color:var(--text-dim);padding:11px 12px;border-radius:8px;font-size:12.5px;cursor:pointer;font-weight:600;width:100%;}
.side-nav button.active{background:linear-gradient(90deg,rgba(77,163,255,.18),rgba(129,140,248,.10));color:var(--accent2);border-color:var(--panel-border);}
.side-nav button:hover:not(.active){color:var(--text);}
.side-nav button.hidden-tab{display:none;}
.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.content{flex:1;min-width:0;}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 30px;border-bottom:1px solid var(--panel-border);background:rgba(5,9,20,0.5);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10;gap:12px;flex-wrap:wrap;}
.profile{display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#04070f;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.profile-info{line-height:1.2;}
.profile-info .name{font-size:12.5px;font-weight:700;}
.profile-info .mail{font-size:10.5px;color:var(--text-dim);}
main{max-width:1180px;margin:0 auto;padding:26px 26px 90px;}
.page-head{margin-bottom:14px;}
.page-head h2{font-size:18px;margin:0 0 2px;}
.page-head p{font-size:12px;color:var(--text-dim);margin:0;}
.section-label{color:var(--accent2);font-size:12px;letter-spacing:2px;font-weight:700;margin:30px 0 14px;}
.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:22px;backdrop-filter:blur(14px);box-shadow:0 4px 30px rgba(0,0,0,0.25);}
.filters{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap;justify-content:space-between;}
.hint{font-size:12px;color:var(--text-dim);}

/* ---------- FORM CONTROLS ---------- */
select,input,textarea{background:#0f1730;border:1px solid var(--panel-border);color:var(--text);padding:9px 14px;border-radius:6px;font-size:13px;color-scheme:dark;font-family:inherit;}
select option{background:#0f1730;color:#e9eefb;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent3));border:none;color:#04070f;padding:9px 16px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}
.btn.ghost{background:transparent;border:1px solid var(--panel-border);color:var(--text-dim);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent2);}
.btn.confirm{background:linear-gradient(90deg,#2fd398,#10b981);color:#04150d;}
.btn.danger-solid{background:linear-gradient(90deg,#f87171,#dc2626);color:#1a0505;}
.btn.sm{padding:6px 12px;font-size:11px;}
.btn.full{width:100%;padding:11px;font-size:13px;}
.icon-btn{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:2px 6px;}
.icon-btn:hover{color:var(--red);}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:18px;position:relative;overflow:hidden;backdrop-filter:blur(14px);}
.card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);}
.card.pos::before{background:var(--green);}
.card.neg::before{background:var(--red);}
.card.warn::before{background:var(--amber);}
.card .val{font-size:19px;font-weight:800;font-family:var(--mono);}
.card .lbl{font-size:10.5px;color:var(--text-dim);letter-spacing:.5px;margin-top:6px;}
.card .cap{font-size:9.5px;color:var(--text-dim);margin-top:4px;opacity:.7;}

/* ---------- TABLES ---------- */
.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;margin-top:8px;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);white-space:nowrap;}
td{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,0.04);font-family:var(--mono);}
td:first-child{font-family:'Segoe UI',Arial,sans-serif;}
tr:hover td{background:rgba(255,255,255,0.02);}
.empty{font-family:'Segoe UI',Arial,sans-serif;color:var(--text-dim);padding:18px 8px;}
.tag{font-size:10px;padding:3px 9px;border-radius:12px;letter-spacing:.5px;font-weight:700;font-family:'Segoe UI',Arial,sans-serif;white-space:nowrap;}
.tag.pago{background:rgba(52,211,153,.15);color:var(--green);}
.tag.aberto{background:rgba(77,163,255,.15);color:var(--accent2);}
.tag.venc{background:rgba(248,113,113,.15);color:var(--red);}
.rec-flag{font-size:9px;color:var(--accent3);border:1px solid var(--accent3);padding:2px 6px;border-radius:8px;margin-left:6px;font-family:'Segoe UI',Arial,sans-serif;}
.parc{font-size:11px;color:var(--text-dim);}
.up{color:var(--green);} .down{color:var(--red);}

/* ---------- CHARTS ---------- */
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:18px;}
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.legend{font-size:12px;}
.legend div{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--text-dim);}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.legend-bar{display:flex;gap:16px;font-size:11px;color:var(--text-dim);margin-top:8px;flex-wrap:wrap;}
.legend-bar span{display:flex;align-items:center;gap:6px;}
.sq{width:10px;height:10px;border-radius:2px;}

/* ---------- INLINE ROWS / FORMS ---------- */
.tab-content{display:none;}
.tab-content.active{display:block;}
.note{font-size:12px;color:var(--text-dim);border-left:2px solid var(--accent);padding:10px 14px;margin-top:20px;background:rgba(255,255,255,0.02);border-radius:0 6px 6px 0;}
.newform{display:none;gap:10px;margin-bottom:18px;flex-wrap:wrap;background:rgba(255,255,255,0.03);padding:16px;border-radius:8px;border:1px solid var(--panel-border);}
.newform.open{display:flex;}
.newform input,.newform select{flex:1;min-width:120px;}
.inline-row{display:flex;gap:8px;padding:10px 8px;align-items:center;flex-wrap:wrap;}
.inline-row.baixa{background:rgba(52,211,153,0.06);}
.inline-row.del{background:rgba(248,113,113,0.06);}

/* ---------- DROPDOWN PANELS ---------- */
.pop{display:none;position:absolute;top:64px;right:26px;background:#0d1526;border:1px solid var(--panel-border);border-radius:10px;padding:16px;width:250px;z-index:30;box-shadow:0 10px 40px rgba(0,0,0,0.5);}
.pop.open{display:block;}
.pop .title{font-size:11px;color:var(--accent2);letter-spacing:1px;margin-bottom:10px;font-weight:700;}
.pop label{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0;color:var(--text-dim);}
.pop button{width:100%;margin-bottom:8px;}
.pop a{display:block;color:var(--text-dim);font-size:12.5px;padding:8px 0;text-decoration:none;}
.pop a:hover{color:var(--accent2);}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .grid2{grid-template-columns:1fr;}
  .cards,.cards.c3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .app{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;}
  .brand,.brand-sub{margin:0;}
  .brand-sub{display:none;}
  .side-nav{flex-direction:row;flex-wrap:wrap;flex:1;}
  .side-nav button{width:auto;padding:8px 12px;font-size:11.5px;}
  .side-bottom{margin:0;}
  .cards,.cards.c3{grid-template-columns:1fr;}
  main{padding:18px 14px 70px;}
  .pop{right:14px;left:14px;width:auto;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}