/* ════════════════════════════════════════════════════════════
   FinLar — Design System v5 · Premium Overhaul
   Fontes: Syne (display/nav) · DM Serif Display (valores) · DM Sans (corpo)
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:    #04060f;
  --bg2:   #070c1c;
  --bg3:   #0a1020;
  --card:  #070c1c;
  --card2: #0d1428;

  --border:  rgba(255,255,255,.055);
  --border2: rgba(255,255,255,.09);

  --green:  #00e5a0;  --greeng:  rgba(0,229,160,.1);
  --gold:   #ffb930;  --goldg:   rgba(255,185,48,.1);
  --red:    #ff4d7e;  --redg:    rgba(255,77,126,.1);
  --blue:   #4d9fff;  --blueg:   rgba(77,159,255,.1);
  --purple: #b87fff;  --purpleg: rgba(184,127,255,.1);

  --t1: #f0f4ff;
  --t2: #5e6e8a;
  --t3: #1e2840;

  --r:  16px;
  --r2: 12px;
  --tr: all .22s cubic-bezier(.16,1,.3,1);

  --shadow:  0 4px 24px rgba(0,0,0,.5);
  --shadow2: 0 12px 48px rgba(0,0,0,.7);
  --shadow3: 0 2px 8px rgba(0,0,0,.35);
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:15px }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
}

::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:4px }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.14) }

/* ── LOADING ─────────────────────────────────────────────── */
.loading-screen {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:20px; z-index:9999;
  transition:opacity .5s;
}
.loading-screen.hide { opacity:0; pointer-events:none }

.loading-logo {
  font-family:'Syne',sans-serif;
  font-size:44px; font-weight:800; letter-spacing:-2.5px;
}
.loading-logo em { color:var(--green); font-style:normal }

.spinner {
  width:28px; height:28px;
  border:2.5px solid rgba(0,229,160,.15);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* ── SKELETON ────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.04) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
.skeleton-row   { height:44px; margin-bottom:8px }
.skeleton-card  { height:90px; border-radius:var(--r) }
.skeleton-text  { height:14px; border-radius:4px; margin-bottom:6px }
.skeleton-text.short  { width:55% }
.skeleton-text.medium { width:78% }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-wrap {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:500;
  opacity:0; pointer-events:none; transition:opacity .35s;
  overflow:hidden;
}
.login-wrap.show { opacity:1; pointer-events:all }

.login-wrap::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%,rgba(0,229,160,.1),transparent 65%),
    radial-gradient(ellipse 50% 60% at 85% 80%,rgba(77,159,255,.08),transparent 60%),
    radial-gradient(ellipse 35% 40% at 65% 15%,rgba(184,127,255,.07),transparent 50%),
    var(--bg);
  animation:meshAnim 14s ease-in-out infinite alternate;
}
@keyframes meshAnim { from{transform:scale(1)} to{transform:scale(1.06)} }

.login-wrap::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,229,160,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,160,.025) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}

.login-box {
  position:relative; z-index:2;
  background:rgba(7,12,28,.88);
  backdrop-filter:blur(48px) saturate(1.5);
  border:1px solid rgba(255,255,255,.07);
  border-radius:26px;
  width:100%; max-width:380px;
  padding:44px 40px;
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(0,229,160,.04);
  animation:cardIn .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(44px) scale(.96) }
  to   { opacity:1; transform:none }
}

.login-logo {
  font-family:'Syne',sans-serif;
  font-size:40px; font-weight:800;
  text-align:center; letter-spacing:-2.5px; line-height:1;
  margin-bottom:2px;
}
.login-logo em { color:var(--green); font-style:normal }

.login-sub {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin:14px 0 30px;
  font-size:9.5px; font-weight:700; color:var(--t3);
  letter-spacing:.18em; text-transform:uppercase;
  font-family:'Syne',sans-serif;
}
.login-sub::before,
.login-sub::after {
  content:'';
  width:4px; height:4px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:dotP 2.4s ease infinite;
}
.login-sub::after { animation-delay:-.8s; background:var(--blue); box-shadow:0 0 10px var(--blue) }
@keyframes dotP { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.8);opacity:1} }

.login-err {
  background:var(--redg); border:1px solid rgba(255,77,126,.25);
  border-radius:10px; padding:10px 14px;
  font-size:13px; color:var(--red);
  margin-bottom:16px; display:none;
}
.login-err.show { display:block }

/* ── LAYOUT ──────────────────────────────────────────────── */
.shell { display:flex; height:100vh }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width:226px; flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; height:100vh; z-index:100;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}

.logo { padding:24px 20px 20px; border-bottom:1px solid var(--border) }
.logo-mark {
  font-family:'Syne',sans-serif;
  font-size:24px; font-weight:800; letter-spacing:-1.5px; line-height:1;
}
.logo-mark em { color:var(--green); font-style:normal }
.logo-sub {
  font-size:9.5px; color:var(--t3); margin-top:3px;
  letter-spacing:.14em; text-transform:uppercase;
  font-family:'Syne',sans-serif; font-weight:600;
}

.nav { flex:1; padding:14px 10px; overflow-y:auto }
.nav-section { margin-bottom:22px }
.nav-sec-label {
  font-size:9px; font-weight:700; color:var(--t3);
  letter-spacing:.2em; text-transform:uppercase;
  font-family:'Syne',sans-serif;
  padding:0 12px; margin-bottom:4px;
}

.nav-btn {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  cursor:pointer; color:var(--t2);
  font-size:13px; font-weight:500;
  transition:var(--tr);
  position:relative; user-select:none;
}
.nav-btn:hover { background:rgba(255,255,255,.035); color:var(--t1) }
.nav-btn.active {
  background:var(--greeng);
  color:var(--green);
  font-weight:600;
}
.nav-btn.active::before {
  content:'';
  position:absolute; left:0; top:20%; bottom:20%;
  width:3px; border-radius:0 4px 4px 0;
  background:var(--green);
  box-shadow:0 0 12px var(--green), 0 0 24px rgba(0,229,160,.25);
}
.nav-btn .ni {
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}

.sidebar-bottom { padding:14px 20px; border-top:1px solid var(--border) }
.profile-row { display:flex; align-items:center; gap:10px }
.avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  color:var(--bg); flex-shrink:0; cursor:pointer;
  transition:var(--tr);
}
.avatar:hover { transform:scale(1.08) }
.profile-name { font-size:13px; font-weight:600; font-family:'Syne',sans-serif }
.profile-role { font-size:11px; color:var(--t3); display:flex; align-items:center }

/* ── SYNC ────────────────────────────────────────────────── */
.sync-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green); display:inline-block;
  margin-right:5px; animation:pulse 2.5s infinite;
}
.sync-dot.syncing {
  background:var(--gold); animation:spin .7s linear infinite;
  border-radius:50%; width:10px; height:10px;
  border:2px solid var(--gold); border-top-color:transparent;
}
.sync-dot.err { background:var(--red); animation:none }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spin  { to{transform:rotate(360deg)} }

/* ── MAIN ────────────────────────────────────────────────── */
.main { margin-left:226px; flex:1; overflow-y:auto; height:100vh }

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(4,6,15,.92);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--border);
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar-left { display:flex; align-items:center; gap:12px }
.hamburger {
  display:none; background:none; border:none;
  color:var(--t1); font-size:20px; cursor:pointer;
  padding:4px 6px; border-radius:8px;
  transition:var(--tr);
}
.hamburger:hover { background:rgba(255,255,255,.06) }

.page-title {
  font-family:'Syne',sans-serif;
  font-size:18px; font-weight:800; letter-spacing:-.5px;
}
.page-subtitle { font-size:11.5px; color:var(--t2); margin-top:1px }

.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0 }

.month-pill {
  display:flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:10px; padding:6px 12px;
  transition:var(--tr);
}
.month-pill button {
  background:none; border:none; color:var(--t2);
  cursor:pointer; font-size:16px; line-height:1;
  transition:var(--tr); padding:0 2px;
  font-family:'Syne',sans-serif;
}
.month-pill button:hover { color:var(--green) }
.month-pill span {
  font-family:'Syne',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  min-width:110px; text-align:center;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r2);
  font-family:'Syne',sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.04em;
  cursor:pointer; border:none;
  transition:var(--tr); white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn:disabled { opacity:.45; pointer-events:none }

.btn-primary {
  background:linear-gradient(135deg,#00e5a0,#00b878);
  color:var(--bg);
  box-shadow:0 4px 20px rgba(0,229,160,.2);
}
.btn-primary::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
  transition:opacity .2s;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(0,229,160,.38);
}
.btn-primary:active { transform:translateY(0); box-shadow:0 4px 12px rgba(0,229,160,.2) }

.btn-ghost {
  background:var(--greeng);
  color:var(--green);
  border:1px solid rgba(0,229,160,.2);
}
.btn-ghost:hover { background:rgba(0,229,160,.18); border-color:rgba(0,229,160,.35) }

.btn-danger {
  background:var(--redg);
  color:var(--red);
  border:1px solid rgba(255,77,126,.2);
}
.btn-danger:hover { background:var(--red); color:#fff; border-color:transparent }

.btn-gold {
  background:linear-gradient(135deg,#ffb930,#e69500);
  color:var(--bg);
  box-shadow:0 4px 16px rgba(255,185,48,.2);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,185,48,.35) }

.btn-sm  { padding:6px 14px; font-size:11.5px }
.btn-xs  { padding:4px 9px; font-size:11px; border-radius:8px }
.btn-icon {
  width:32px; height:32px; padding:0;
  border-radius:9px; justify-content:center;
}

/* ── PAGES ───────────────────────────────────────────────── */
.page { display:none; padding:24px 28px 48px }
.page.active {
  display:block;
  animation:pageIn .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:none }
}
.page-inner { width:100%; max-width:900px }

/* ── PANELS ──────────────────────────────────────────────── */
.panel {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.panel-hd {
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-hd.no-border { border-bottom:none; padding-bottom:4px }
.panel-title {
  font-family:'Syne',sans-serif;
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
}
.panel-sub  { font-size:11.5px; color:var(--t2); margin-top:2px }
.panel-bd   { padding:18px 20px }
.panel-bd.compact { padding:12px 16px }

/* Section header (acima de grupos de conteúdo) */
.sec-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.sec-title {
  font-family:'Syne',sans-serif;
  font-size:11px; font-weight:700; color:var(--t3);
  letter-spacing:.16em; text-transform:uppercase;
}

/* ── GRIDS ───────────────────────────────────────────────── */
.grid2     { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
.grid3     { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px }
.grid6040  { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px }

/* ── STAT CARDS ──────────────────────────────────────────── */
.sc {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 20px;
  position:relative; overflow:hidden;
  transition:var(--tr); cursor:default;
}
.sc:hover {
  transform:translateY(-3px);
  border-color:var(--border2);
  box-shadow:var(--shadow2);
}

.sc-glow::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:2px 2px 0 0;
}
.sc-glow.green::before { background:linear-gradient(90deg,var(--green),transparent) }
.sc-glow.red::before   { background:linear-gradient(90deg,var(--red),transparent) }
.sc-glow.gold::before  { background:linear-gradient(90deg,var(--gold),transparent) }
.sc-glow.blue::before  { background:linear-gradient(90deg,var(--blue),transparent) }

.sc-glow::after {
  content:'';
  position:absolute; top:-10px; right:-10px;
  width:80px; height:80px; border-radius:50%; opacity:.08;
}
.sc-glow.green::after { background:var(--green) }
.sc-glow.red::after   { background:var(--red) }
.sc-glow.gold::after  { background:var(--gold) }
.sc-glow.blue::after  { background:var(--blue) }

.sc-icon {
  position:absolute; top:16px; right:16px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  opacity:.5; font-size:16px;
}
.sc-label {
  font-family:'Syne',sans-serif;
  font-size:9.5px; font-weight:700; color:var(--t2);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;
}
.sc-val {
  font-family:'DM Serif Display',serif;
  font-size:26px; letter-spacing:-1px; margin-bottom:5px;
}
.sc-val.green  { color:var(--green) }
.sc-val.red    { color:var(--red) }
.sc-val.gold   { color:var(--gold) }
.sc-val.blue   { color:var(--blue) }
.sc-note { font-size:11.5px; color:var(--t2) }

/* ── FLUXO HERO ──────────────────────────────────────────── */
.fluxo-hero {
  background:linear-gradient(135deg,rgba(0,229,160,.07),rgba(77,159,255,.05));
  border:1px solid rgba(0,229,160,.12);
  border-radius:var(--r); padding:26px 28px; margin-bottom:16px;
  position:relative; overflow:hidden;
}
.fluxo-hero::before {
  content:'';
  position:absolute; top:-80px; right:-80px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,160,.12),transparent 65%);
  pointer-events:none;
}
.fluxo-hero-top {
  display:flex; align-items:flex-start;
  justify-content:space-between; margin-bottom:20px;
}
.fluxo-hero-label {
  font-family:'Syne',sans-serif;
  font-size:9.5px; font-weight:700; color:var(--green);
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.fluxo-hero-label::before {
  content:''; width:18px; height:1px;
  background:linear-gradient(90deg,var(--green),transparent);
}
.fluxo-hero-val {
  font-family:'DM Serif Display',serif;
  font-size:48px; letter-spacing:-2.5px; color:var(--t1); line-height:1;
}
.fluxo-hero-val em { color:var(--green); font-style:normal }
.fluxo-hero-sub { font-size:12px; color:var(--t2); margin-top:6px }

.fluxo-steps {
  display:flex; background:rgba(0,0,0,.3);
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  margin-top:18px;
}
.fluxo-step {
  flex:1; padding:11px 14px; text-align:center;
  border-right:1px solid rgba(255,255,255,.04); position:relative;
}
.fluxo-step:last-child { border-right:none }
.fluxo-step-label {
  font-family:'Syne',sans-serif;
  font-size:8.5px; color:var(--t3); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px;
}
.fluxo-step-val { font-size:14px; font-weight:700 }
.fluxo-step-arrow {
  position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--t3); z-index:2;
}

/* ── TX ITEMS ────────────────────────────────────────────── */
.tx-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(14,20,40,.7);
  transition:var(--tr); cursor:pointer;
}
.tx-item:last-child { border-bottom:none }
.tx-item:hover { opacity:.78 }

.tx-ico {
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.tx-info { flex:1; min-width:0 }
.tx-info p {
  font-size:13.5px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tx-info span { font-size:11px; color:var(--t2) }
.tx-amt {
  font-family:'Syne',sans-serif;
  font-weight:700; font-size:13.5px; flex-shrink:0;
}

/* ── PROGRESS ────────────────────────────────────────────── */
.prog-wrap { height:6px; background:rgba(255,255,255,.05); border-radius:3px; overflow:hidden }
.prog-fill { height:100%; border-radius:3px; transition:width .7s cubic-bezier(.16,1,.3,1) }

/* ── TABLE ───────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse; font-size:13px }
th {
  padding:9px 14px; text-align:left;
  font-family:'Syne',sans-serif;
  font-size:9px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.14em;
  border-bottom:1px solid var(--border);
}
td {
  padding:12px 14px;
  border-bottom:1px solid rgba(14,20,40,.6);
  vertical-align:middle;
}
tr:last-child td { border-bottom:none }
tr:hover td { background:rgba(255,255,255,.012) }

.date-sep-row td { padding:0 !important; border:none !important }
.date-sep {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px 5px;
  border-top:1px solid rgba(14,20,40,.7);
}
.date-sep-row:first-child .date-sep { border-top:none }
.date-sep-label {
  font-family:'Syne',sans-serif;
  font-size:9.5px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.1em;
}
.date-sep-total { font-family:'Syne',sans-serif; font-size:11px; font-weight:700 }

.table-footer td {
  padding:10px 14px !important;
  border-top:1px solid var(--border) !important;
  background:var(--bg3) !important;
}

/* ── FILTER BAR ──────────────────────────────────────────── */
.filter-bar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap }
.filter-bar .fc { max-width:220px }

/* ── PERIOD BUTTONS ──────────────────────────────────────── */
.period-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px }
.period-btn {
  background:var(--bg3); border:1px solid var(--border2);
  color:var(--t2); border-radius:20px; padding:5px 14px;
  font-family:'Syne',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.period-btn:hover { border-color:rgba(0,229,160,.3); color:var(--green) }
.period-btn.active {
  background:var(--greeng);
  border-color:rgba(0,229,160,.3);
  color:var(--green);
}

/* ── MODAL ───────────────────────────────────────────────── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(14px);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.overlay.open { opacity:1; pointer-events:all }
.modal {
  background:rgba(7,12,28,.97);
  backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  width:100%; max-width:490px; max-height:90vh; overflow-y:auto;
  transform:scale(.95) translateY(16px);
  transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .22s;
  box-shadow:0 32px 80px rgba(0,0,0,.8);
}
.overlay.open .modal { transform:scale(1) translateY(0) }
.modal-hd {
  padding:22px 24px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:rgba(7,12,28,.97);
  backdrop-filter:blur(20px); z-index:1;
}
.modal-title {
  font-family:'Syne',sans-serif;
  font-size:15px; font-weight:800; letter-spacing:.01em;
}
.modal-close {
  width:30px; height:30px; border-radius:9px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--t2); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:var(--tr);
}
.modal-close:hover { background:var(--redg); color:var(--red); border-color:rgba(255,77,126,.25) }
.modal-bd { padding:22px 24px }

/* ── FORMS ───────────────────────────────────────────────── */
.fg { margin-bottom:14px }
.fl {
  display:block;
  font-family:'Syne',sans-serif;
  font-size:10px; font-weight:700; color:var(--t3);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
}
.fc {
  width:100%; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r2); padding:11px 14px;
  color:var(--t1); font-family:'DM Sans',sans-serif;
  font-size:13.5px; outline:none; transition:var(--tr);
}
.fc:focus {
  border-color:rgba(0,229,160,.4);
  background:rgba(0,229,160,.03);
  box-shadow:0 0 0 3px rgba(0,229,160,.07);
}
.fc::placeholder { color:var(--t3) }
.fc:-webkit-autofill {
  -webkit-box-shadow:0 0 0 40px #0a1020 inset !important;
  -webkit-text-fill-color:var(--t1) !important;
}
select.fc { cursor:pointer }
select.fc option { background:var(--bg2) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:20px }

/* Tipo toggle */
.type-toggle {
  display:flex; gap:5px;
  background:var(--bg3); border-radius:12px; padding:4px;
  margin-bottom:16px;
}
.tt-btn {
  flex:1; padding:9px 6px; border-radius:9px;
  border:none; background:transparent;
  color:var(--t2); cursor:pointer;
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.04em; transition:var(--tr);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.tt-btn.in.active  { background:var(--greeng);  color:var(--green) }
.tt-btn.out.active { background:var(--redg);    color:var(--red) }
.tt-btn.res.active { background:var(--goldg);   color:var(--gold) }
.tt-btn.mes.active { background:var(--blueg);   color:var(--blue) }

/* Payment method toggle */
.pay-toggle {
  display:flex; gap:5px;
  background:var(--bg3); border-radius:12px; padding:4px;
}
.pay-btn {
  flex:1; padding:9px 6px; border-radius:9px; border:none;
  background:transparent; color:var(--t2); cursor:pointer;
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.04em; transition:var(--tr);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.pay-btn.active { background:var(--greeng); color:var(--green) }

/* ── BUDGET BARS ─────────────────────────────────────────── */
#gastBudgetBars { display:none; margin-bottom:16px }
.budget-bar-item {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r2); padding:12px 14px; margin-bottom:8px;
}
.budget-bar-item:last-child { margin-bottom:0 }
.budget-row { margin-bottom:12px }
.budget-row-header { display:flex; justify-content:space-between; margin-bottom:5px }
.budget-label { font-size:12px; color:var(--t2) }
.budget-value { font-size:12px; font-weight:700 }
.budget-over  { color:var(--red) }
.budget-ok    { color:var(--green) }
.budget-warn  { color:var(--gold) }

/* ── DASHBOARD WIDGETS ───────────────────────────────────── */
.dash-today {
  font-size:12.5px; color:var(--t2);
  padding:8px 0 4px; border-top:1px solid var(--border); margin-top:10px;
}
.dash-couple-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px 16px; margin-bottom:14px;
}

/* ── MESADA CARD ─────────────────────────────────────────── */
.mesada-card {
  background:linear-gradient(135deg,rgba(0,229,160,.06),rgba(77,159,255,.04));
  border:1px solid rgba(0,229,160,.12);
  border-radius:var(--r); padding:20px 22px;
}
.mesada-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.mesada-row:last-child { border-bottom:none }
.mesada-name {
  font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.mesada-val {
  font-family:'DM Serif Display',serif;
  font-size:22px; color:var(--green);
}

/* ── FECHAMENTO PAGE ─────────────────────────────────────── */
.fech-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-bottom:20px;
}
.fech-person {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r); padding:20px;
  transition:var(--tr);
}
.fech-person:hover { border-color:var(--border2); box-shadow:var(--shadow) }
.fech-person-head {
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.fech-person-name {
  font-family:'Syne',sans-serif;
  font-size:15px; font-weight:700;
}
.fech-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,.025);
  margin-bottom:6px; font-size:13px;
}
.fech-row-label { color:var(--t2) }
.fech-row-val { font-weight:700 }
.fech-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-radius:11px;
  background:rgba(0,229,160,.07);
  border:1px solid rgba(0,229,160,.2);
  margin-top:10px;
}
.fech-total-label { font-size:14px; font-weight:700 }
.fech-total-val {
  font-family:'DM Serif Display',serif;
  font-size:22px; color:var(--green);
}

.fech-flow {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px 16px;
  margin-bottom:16px;
}
.fech-flow-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 10px; border-radius:8px;
  background:rgba(255,255,255,.02);
  margin-bottom:5px; font-size:13px;
}
.fech-flow-row:last-child { margin-bottom:0 }
.fech-flow-row.highlight {
  background:rgba(0,229,160,.06);
  border:1px solid rgba(0,229,160,.15);
  margin-top:8px;
}
.fech-flow-label { color:var(--t2) }
.fech-flow-val   { font-weight:700 }

.fech-status-closed {
  background:rgba(0,229,160,.08);
  border:1px solid rgba(0,229,160,.25);
  border-radius:12px; padding:12px 16px;
  text-align:center; color:var(--green);
  font-weight:700; font-size:13.5px;
  margin-top:12px;
}

.fech-history-hd {
  font-family:'Syne',sans-serif;
  font-size:10px; font-weight:700; color:var(--t3);
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:10px; margin-top:20px;
}
.fech-history-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; margin-bottom:6px;
  transition:var(--tr);
}
.fech-history-item:hover { border-color:var(--border2) }
.fech-history-month {
  font-family:'Syne',sans-serif;
  font-weight:700; font-size:14px;
}
.fech-history-date { font-size:11px; color:var(--t3); margin-top:2px }
.fech-history-vals { text-align:right; font-size:12px }
.fech-hint {
  font-size:11px; color:var(--t3);
  margin-top:16px; line-height:1.7;
  padding:10px 14px;
  background:rgba(255,255,255,.02);
  border-radius:10px; border:1px solid var(--border);
}

/* ── FATURAS PAGE ────────────────────────────────────────── */
.fatura-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  margin-bottom:16px;
  overflow:hidden;
  transition:var(--tr);
}
.fatura-card:hover { border-color:var(--border2) }
.fatura-card-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.fatura-card-info { display:flex; align-items:center; gap:12px }
.fatura-card-icon {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.fatura-card-name {
  font-family:'Syne',sans-serif;
  font-size:14px; font-weight:700; margin-bottom:3px;
}
.fatura-card-meta { font-size:11px; color:var(--t3) }
.fatura-card-total {
  text-align:right;
}
.fatura-total-val {
  font-family:'DM Serif Display',serif;
  font-size:22px; color:var(--red);
}
.fatura-close-label { font-size:11px; margin-top:2px }
.fatura-body { padding:0 20px }
.fatura-tx {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(14,20,40,.7);
}
.fatura-tx:last-of-type { border-bottom:none }
.fatura-tx-left { display:flex; align-items:center; gap:10px }
.fatura-tx-icon { font-size:18px; flex-shrink:0 }
.fatura-tx-desc { font-size:13px; font-weight:600 }
.fatura-tx-meta { font-size:11px; color:var(--t3) }
.fatura-tx-val { color:var(--red); font-size:14px; font-weight:700; flex-shrink:0 }
.fatura-total-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; font-weight:700;
  border-top:1px solid var(--border);
  margin-top:4px;
}
.fatura-empty { padding:16px 0; font-size:13px; color:var(--t3) }

/* ── MOBILE NAV ──────────────────────────────────────────── */
.mob-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:rgba(7,12,28,.96);
  backdrop-filter:blur(24px) saturate(1.5);
  border-top:1px solid var(--border);
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));
  z-index:100;
}
.mob-nav-items { display:flex; justify-content:space-around; align-items:flex-end }
.mob-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; border-radius:10px; cursor:pointer;
  color:var(--t3); font-size:9.5px;
  font-family:'Syne',sans-serif; font-weight:700; letter-spacing:.04em;
  transition:var(--tr); user-select:none;
}
.mob-item .mi { font-size:22px }
.mob-item.active { color:var(--green) }

/* FAB central */
.mob-fab-wrap {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; cursor:pointer; user-select:none;
  position:relative;
}
.mob-fab {
  width:50px; height:50px;
  background:linear-gradient(135deg,#00e5a0,#00b878);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,229,160,.45);
  transition:all .22s cubic-bezier(.16,1,.3,1);
  margin-top:-18px;
}
.mob-fab:active { transform:scale(.92) }
.mob-fab-wrap:hover .mob-fab {
  transform:scale(1.08);
  box-shadow:0 6px 28px rgba(0,229,160,.55);
}
.mob-fab-label {
  font-family:'Syne',sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--green);
}

/* More drawer (mobile) */
.mob-more-drawer {
  position:fixed; bottom:0; left:0; right:0; z-index:150;
  background:rgba(7,12,28,.97);
  backdrop-filter:blur(32px) saturate(1.5);
  border-top:1px solid var(--border2);
  border-radius:22px 22px 0 0;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -12px 40px rgba(0,0,0,.6);
}
.mob-more-drawer.open { transform:translateY(0) }
.mob-more-handle {
  width:36px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.12);
  margin:0 auto 16px;
}
.mob-more-title {
  font-family:'Syne',sans-serif;
  font-size:10px; font-weight:700; color:var(--t3);
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:12px; text-align:center;
}
.mob-more-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.mob-more-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border-radius:var(--r2);
  background:var(--bg3); border:1px solid var(--border);
  cursor:pointer; transition:var(--tr);
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  color:var(--t2); text-align:center;
}
.mob-more-item:active { transform:scale(.96) }
.mob-more-item.active { background:var(--greeng); border-color:rgba(0,229,160,.3); color:var(--green) }
.mob-more-item .mm-icon { font-size:22px }
.mob-overlay {
  position:fixed; inset:0; z-index:140;
  background:rgba(0,0,0,.5);
  display:none; backdrop-filter:blur(4px);
}
.mob-overlay.open { display:block }

/* ── SIDEBAR OVERLAY ─────────────────────────────────────── */
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:90 }
.sb-overlay.open { display:block }

/* ── TOAST ───────────────────────────────────────────────── */
.toast-wrap {
  position:fixed; bottom:18px; right:18px; z-index:500;
  display:flex; flex-direction:column; gap:7px;
}
.toast {
  background:rgba(7,12,28,.97);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:12px; padding:11px 16px; font-size:13px;
  display:flex; align-items:center; gap:9px;
  min-width:230px; box-shadow:var(--shadow2);
  animation:toastIn .3s cubic-bezier(.16,1,.3,1);
  transition:opacity .3s;
}
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
.toast.ok   { border-left:3px solid var(--green) }
.toast.err  { border-left:3px solid var(--red) }
.toast.info { border-left:3px solid var(--blue) }

/* ── MISC ────────────────────────────────────────────────── */
.empty {
  padding:36px 16px; text-align:center; color:var(--t2);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.empty .ei {
  width:44px; height:44px; border-radius:14px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; opacity:.5; margin-bottom:2px;
}
.empty p { font-size:13px }

.chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:20px; padding:4px 10px;
  font-size:12px; font-weight:500;
}

/* ── NAV BADGE ───────────────────────────────────────────── */
.nav-btn { position:relative }
.nav-badge {
  position:absolute; top:6px; right:8px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red); display:block;
  box-shadow:0 0 6px rgba(255,83,112,.7);
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.6; transform:scale(.8) }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px) {
  .grid2,.grid3,.grid6040 { grid-template-columns:1fr }
  .fech-grid { grid-template-columns:1fr }
  .fluxo-steps { flex-wrap:wrap }
}
@media(max-width:640px) {
  .sidebar { transform:translateX(-100%) }
  .sidebar.open { transform:translateX(0) }
  .main { margin-left:0 }
  .mob-nav { display:block }
  .hamburger { display:block }
  .page { padding:16px 14px calc(96px + env(safe-area-inset-bottom)) }
  .topbar { padding:10px 14px; gap:8px }
  .page-title { font-size:16px }
  .month-pill span { min-width:90px; font-size:11.5px }
  .btn-primary { padding:8px 14px; font-size:12px }
  .fluxo-hero { padding:18px 16px }
  .fluxo-hero-val { font-size:34px }
  .fluxo-steps { overflow-x:auto }
  .fluxo-step { min-width:80px; padding:10px 10px }
  .fluxo-step-val { font-size:12px }
  .grid2 { grid-template-columns:1fr 1fr; gap:10px }
  .grid3 { grid-template-columns:1fr 1fr; gap:10px }
  .filter-bar .fc { max-width:100%; width:100% }
  .toast-wrap { bottom:calc(72px + env(safe-area-inset-bottom)); right:12px; left:12px }
  .toast { min-width:unset }
  .overlay { align-items:flex-end; padding:0 }
  .modal {
    border-radius:22px 22px 0 0;
    max-height:92vh; width:100%;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .sc-val { font-size:20px }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
  table { min-width:480px }
  .fatura-total-val { font-size:18px }
  .fech-grid { grid-template-columns:1fr }
  .fech-person { padding:16px }
}
@media(max-width:400px) {
  .grid2,.grid3 { grid-template-columns:1fr }
  .fluxo-hero-val { font-size:28px }
  .sc-val { font-size:22px }
}

/* ── TABLE CARD MODE (mobile) ─────────────────────────────── */
@media(max-width:640px) {
  .tbl-card-mode thead { display:none }
  .tbl-card-mode tbody tr {
    display:block; margin-bottom:10px;
    background:var(--card); border-radius:14px;
    padding:12px 14px; border:1px solid var(--border);
  }
  .tbl-card-mode tbody td {
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 0; border:none; font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .tbl-card-mode tbody td:last-child { border-bottom:none; justify-content:flex-end; gap:6px }
  .tbl-card-mode tbody td:first-child { font-weight:600 }
  .tbl-card-mode .date-sep-row { display:block }
  .tbl-card-mode .date-sep { display:flex; justify-content:space-between; padding:6px 0; font-size:12px }
  .tbl-card-mode .table-footer { display:block; padding:8px 0 }
  .btn-xs { min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center }
  td .btn-xs { padding:8px }
}

input[type=number]::-webkit-inner-spin-button { opacity:0 }