@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#090909;
  --bg-elevated:#131313;
  --card:#171717;
  --card-2:#1c1c1c;
  --hover:#242424;
  --border:#2a2a2a;
  --text:#FFFFFF;
  --text-dim:#9CA3AF;
  --text-faint:#6B7280;
  --accent:#FF2D2D;
  --accent-dim:rgba(255,45,45,0.14);
  --accent-glow:rgba(255,45,45,0.35);
  --danger:#FF3B3B;
  --danger-dim:rgba(255,59,59,0.14);
  --green:#1FCB6E;
  --amber:#f5b942;
  --blue:#4f8cff;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 2px 10px rgba(0,0,0,0.2);
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app{display:flex;min-height:100vh;}

/* ===================== SIDEBAR ===================== */
.sidebar{
  width:264px;
  flex-shrink:0;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:var(--sp-4) var(--sp-2);
  position:sticky;
  top:0;
  height:100vh;
  transition:width .25s ease,padding .25s ease;
}
.sidebar.collapsed{width:84px;padding:var(--sp-4) var(--sp-1);}
.sidebar.collapsed .brand span:not(.brand-mark),
.sidebar.collapsed .nav-item span:last-child,
.sidebar.collapsed .ghost-btn{display:none;}
.sidebar.collapsed .brand{justify-content:center;padding:0 0 var(--sp-3);}
.sidebar.collapsed .nav-item{justify-content:center;padding:12px 8px;}
.sidebar.collapsed .nav-ico{width:auto;}

.brand{
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.02em;
  padding:0 10px var(--sp-4);
  display:flex;
  align-items:center;
  gap:9px;
}
.brand-mark{
  width:9px;height:9px;border-radius:3px;
  background:var(--accent);
  display:inline-block;
  flex-shrink:0;
}
.brand .accent{color:#FFC700;}

.nav{display:flex;flex-direction:column;gap:5px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:13px;
  background:transparent;border:none;
  color:var(--text-dim);
  font-family:inherit;font-size:14px;font-weight:500;
  padding:13px 15px;border-radius:var(--radius-sm);
  cursor:pointer;text-align:left;
  transition:background .18s ease,color .18s ease,transform .18s ease;
  border-left:3px solid transparent;
}
.nav-item:hover{background:var(--hover);color:var(--text);transform:translateX(2px);}
.nav-item.active{
  background:var(--accent-dim);
  color:var(--text);
  border-left:3px solid var(--accent);
}
.nav-ico{font-size:16px;width:18px;text-align:center;color:var(--accent);flex-shrink:0;}

.sidebar-toggle{
  background:var(--card);border:1px solid var(--border);color:var(--text-dim);
  width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  margin:0 0 var(--sp-3) auto;transition:all .18s ease;flex-shrink:0;
}
.sidebar-toggle:hover{border-color:var(--accent);color:var(--text);}
.sidebar.collapsed .sidebar-toggle{margin:0 auto var(--sp-3);}

.sidebar-footer{display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid var(--border);}
.ghost-btn{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:12.5px;font-family:inherit;font-weight:500;
  cursor:pointer;
  transition:all .18s ease;
}
.ghost-btn:hover{border-color:var(--accent);color:var(--text);background:var(--hover);}
.ghost-btn.danger:hover{border-color:var(--danger);background:var(--danger-dim);color:#ff8080;}

/* ===================== MAIN ===================== */
.main{flex:1;padding:var(--sp-4) var(--sp-5) 60px;max-width:100%;overflow-x:hidden;}
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:var(--sp-4);
  animation:fadeInDown .5s ease;
}
.topbar h1{font-size:27px;font-weight:800;margin:0 0 4px;letter-spacing:-0.02em;}
.subtitle{color:var(--text-dim);margin:0;font-size:13.5px;}
.date-pill{
  background:var(--card);border:1px solid var(--border);
  padding:9px 17px;border-radius:100px;font-size:12.5px;color:var(--text-dim);
  text-transform:capitalize;
}

.page{display:none;animation:fadeIn .35s ease;}
.page.active{display:block;}

/* ===================== KPI GRID / BENTO ===================== */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.kpi-grid.small{grid-template-columns:repeat(4,1fr);margin-bottom:var(--sp-3);}
.kpi-grid.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(108px,auto);}
.kpi-grid.bento .kpi-card:nth-child(1){grid-column:span 2;grid-row:span 2;}
.kpi-grid.bento .kpi-card:nth-child(1) .kpi-value{font-size:38px;}
.kpi-grid.bento .kpi-card:nth-child(1) .kpi-icon{width:42px;height:42px;font-size:19px;}

.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-3);
  position:relative;
  overflow:hidden;
  box-shadow:none;
  animation:fadeInUp .5s ease both;
  transition:transform .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;justify-content:center;
}
.kpi-card:hover{transform:translateY(-2px);border-color:#3a4055;}
.kpi-icon{
  width:34px;height:34px;border-radius:10px;
  background:var(--bg-elevated);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-2);color:var(--text-dim);
}
.kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:600;margin-bottom:6px;}
.kpi-value{font-size:26px;font-weight:800;letter-spacing:-0.01em;}
.kpi-value.positive{color:var(--green);}
.kpi-value.negative{color:var(--danger);}
.kpi-value.text{font-size:16px;line-height:1.3;word-break:break-word;}
.kpi-delta{font-size:12px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:4px;color:var(--text-faint);}
.kpi-delta.up{color:var(--green);}
.kpi-delta.down{color:var(--danger);}

/* ===================== PANEL / CARD ===================== */
.panel-grid{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.panel-grid.two{grid-template-columns:1fr 1fr;}
.panel-grid.three{grid-template-columns:repeat(3,1fr);}
.panel-grid.main-wide{grid-template-columns:3fr 2fr;}
.panel-grid>.card{min-width:0;}

/* ===================== TV ===================== */
.tv-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:0 0 10px 4px;}
.tv-celebracao{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  background:rgba(9,9,9,0);
  transition:background .4s ease;
}
.tv-celebracao.show{background:rgba(9,9,9,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.tv-celebracao[hidden]{display:none;}
#tvConfettiCanvas{position:absolute;inset:0;width:100%;height:100%;}

.tv-celebracao-glow{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  animation:tvGlowPulse 1.8s ease-in-out infinite;
  filter:blur(6px);
}
@keyframes tvGlowPulse{
  0%,100%{transform:scale(.9);opacity:.5;}
  50%{transform:scale(1.15);opacity:.9;}
}

.tv-celebracao-card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border:2px solid var(--accent);border-radius:24px;
  padding:44px 72px;text-align:center;
  box-shadow:0 25px 70px rgba(0,0,0,0.6), 0 0 60px var(--accent-glow);
  animation:tvCardPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.tv-celebracao-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 60%);
  transform:translateX(-120%);
  animation:tvShine 2.4s ease-in-out .5s infinite;
}
@keyframes tvShine{
  0%{transform:translateX(-120%);}
  60%,100%{transform:translateX(120%);}
}
@keyframes tvCardPop{
  0%{transform:scale(.5) translateY(30px);opacity:0;}
  60%{transform:scale(1.05) translateY(-4px);opacity:1;}
  100%{transform:scale(1) translateY(0);opacity:1;}
}

.tv-celebracao-emoji{
  font-size:60px;line-height:1;margin-bottom:6px;
  display:inline-block;
  animation:tvEmojiBounce 1s ease-in-out .6s infinite;
}
@keyframes tvEmojiBounce{
  0%,100%{transform:translateY(0) rotate(-6deg);}
  50%{transform:translateY(-10px) rotate(6deg);}
}

.tv-celebracao-titulo{
  font-size:20px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:16px;
  opacity:0;animation:tvFadeUp .5s ease .15s forwards;
}
.tv-celebracao-vendedor{
  font-size:42px;font-weight:800;margin-bottom:10px;color:var(--text);
  opacity:0;animation:tvFadeUp .5s ease .3s forwards;
}
.tv-celebracao-valor{
  font-size:58px;font-weight:800;color:var(--green);
  text-shadow:0 0 30px rgba(31,203,110,0.5);
  opacity:0;animation:tvFadeUp .5s ease .45s forwards;
}
@keyframes tvFadeUp{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-3);
  margin-bottom:var(--sp-2);
  box-shadow:var(--shadow);
  animation:fadeInUp .5s ease both;
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2);}
.card-head h3{font-size:15.5px;font-weight:700;margin:0;display:flex;align-items:baseline;gap:8px;}
.card-head h3 span{font-size:11.5px;font-weight:500;color:var(--text-faint);}
.card-head h4{font-size:13.5px;font-weight:700;margin:0;}
.chart-card{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-2);margin-bottom:0;transition:border-color .2s ease;}
.chart-card:hover{border-color:#3a4055;}
.chart-card.sub{padding:14px;}
.chart-wrap{position:relative;height:230px;}
.chart-card.sub .chart-wrap{height:190px;}

.head-actions{display:flex;gap:6px;}
.chip-filter{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  padding:6px 12px;border-radius:100px;font-size:12px;cursor:pointer;font-family:inherit;
  transition:all .18s ease;
}
.chip-filter:hover{border-color:var(--accent);}
.chip-filter.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ===================== FORMS ===================== */
.grid-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-2);
  margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--border);
}
.grid-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;color:var(--text-dim);font-weight:500;
}
.grid-form .span2{grid-column:1 / -1;}
.grid-form input,.grid-form select,.grid-form textarea{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  color:var(--text);
  height:42px;
  padding:0 13px;
  border-radius:var(--radius-sm);
  font-family:inherit;font-size:13.5px;
  outline:none;
  resize:vertical;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.grid-form textarea{height:auto;padding:10px 13px;}
.grid-form input:focus,.grid-form select:focus,.grid-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);background:var(--hover);}
.form-actions{grid-column:1 / -1;display:flex;gap:10px;margin-top:4px;}

.filters-form{grid-template-columns:repeat(4,1fr);border-bottom:none;padding-bottom:6px;margin-bottom:6px;}
.fornecedor-field{display:flex;gap:8px;align-items:flex-start;}
.fornecedor-field .dropdown-select{flex:1;min-width:0;}
.fornecedor-field .btn-cancel{white-space:nowrap;height:42px;padding:0 14px;flex:none;}

.dropdown-select{position:relative;}
.dropdown-toggle{
  width:100%;height:42px;padding:0 13px;
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);font-family:inherit;font-size:13.5px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;text-align:left;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.dropdown-toggle:hover{border-color:var(--accent);}
.dropdown-toggle.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.dropdown-toggle-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.dropdown-chevron{flex:none;display:flex;color:var(--text-dim);transition:transform .15s ease;}
.dropdown-chevron svg{width:14px;height:14px;display:block;}
.dropdown-toggle.open .dropdown-chevron{transform:rotate(180deg);}
.dropdown-panel{
  margin-top:6px;
}
.dropdown-panel[hidden]{display:none;}

.checkbox-list{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  height:auto;
  max-height:148px;
  overflow-y:auto;
  padding:8px 10px;
  display:flex;flex-direction:column;gap:2px;
}
.checkbox-list label{
  display:flex;flex-direction:row;align-items:center;gap:9px;
  padding:5px 4px;border-radius:6px;
  font-size:13px;font-weight:400;color:var(--text);
  cursor:pointer;transition:background .12s ease;
}
.checkbox-list label:hover{background:var(--hover);}
.checkbox-list input[type="checkbox"],.checkbox-list input[type="radio"]{
  width:16px;height:16px;flex:none;
  accent-color:var(--accent);
  cursor:pointer;
}
.checkbox-list-empty{font-size:12.5px;color:var(--text-faint);padding:4px;}
.checkbox-list::-webkit-scrollbar{width:8px;}
.checkbox-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

.add-conta-actions{display:flex;gap:12px;flex-wrap:wrap;}
.modal-box-sm .add-conta-actions{flex-direction:column;}
.modal-box-sm .add-conta-actions .btn-primary{width:100%;justify-content:center;}
.custos-export-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.custos-export-bar .checkbox-list{max-height:none;flex-direction:row;gap:16px;padding:10px 14px;}
.custos-export-bar .checkbox-list label{padding:2px 4px;}
.add-conta-actions .btn-primary{display:flex;align-items:center;gap:8px;}
.add-conta-actions .btn-primary svg{width:16px;height:16px;}

.modal-overlay{
  position:fixed;inset:0;
  background:rgba(8,9,14,0.72);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
  backdrop-filter:blur(2px);
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:100%;max-width:640px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-box-sm{max-width:380px;}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg-elevated);z-index:1;
}
.modal-head h3{margin:0;font-size:16px;}
.modal-close{
  background:none;border:none;color:var(--text-dim);
  font-size:22px;line-height:1;cursor:pointer;
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.modal-close:hover{background:var(--hover);color:var(--text);}
.modal-body{padding:20px 22px;}
.modal-body .grid-form{border-bottom:none;padding-bottom:0;margin-bottom:0;}
body.modal-open{overflow:hidden;}
.subtitle-inline{font-size:12px;color:var(--text-faint);font-weight:500;}
.card-head-actions label.subtitle-inline{display:flex;align-items:center;gap:8px;}
.card-head-actions label.subtitle-inline input[type="date"]{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  height:34px;padding:0 10px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:12.5px;outline:none;
}
.card-head-actions label.subtitle-inline input[type="date"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.subtitle-inline.block{display:block;margin:-6px 0 10px;}
.card-head-title{display:flex;align-items:baseline;gap:8px;}
.card-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
@media (max-width:1180px){.filters-form{grid-template-columns:repeat(2,1fr);}}

.filter-bar{padding:var(--sp-2) var(--sp-3);}
.filter-bar-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.filter-bar-row label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim);font-weight:500;}
.filter-bar-row input{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  height:40px;padding:0 12px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;outline:none;
}
.filter-bar-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.filter-bar-row .btn-primary,.filter-bar-row .btn-cancel{height:40px;padding:0 18px;display:flex;align-items:center;}
.filtro-geral-status{margin-left:auto;font-size:12.5px;color:var(--text-faint);}
.filtro-geral-status strong{color:var(--accent);font-weight:700;}
@media (max-width:880px){.filtro-geral-status{margin-left:0;}}

.radio-group{display:flex;gap:10px;}
.radio-pill{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:0 12px;height:42px;cursor:pointer;
  font-size:13px;color:var(--text-dim);transition:all .18s ease;position:relative;
}
.radio-pill:hover{background:var(--hover);}
.radio-pill input{position:absolute;opacity:0;pointer-events:none;}
.radio-pill:has(input:checked){border-color:var(--accent);background:var(--accent-dim);color:var(--text);}

.btn-primary{
  background:var(--accent);color:#fff;border:none;
  padding:12px 22px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:background .15s ease;
}
.btn-primary:hover{background:#e02020;}
.btn-primary.danger{background:var(--danger);color:#fff;}
.btn-primary.danger:hover{background:#e02f2f;}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}
.modal-title-danger{display:flex;align-items:center;gap:8px;color:var(--danger);}
.modal-title-danger svg{color:var(--danger);}
.btn-cancel{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  padding:12px 18px;border-radius:var(--radius-sm);font-family:inherit;font-size:13.5px;cursor:pointer;
  transition:all .15s ease;
}
.btn-cancel:hover{border-color:var(--text-dim);color:var(--text);background:var(--hover);}

.btn-export{
  background:var(--card-2);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .18s ease;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn-export:hover{border-color:var(--accent);background:var(--accent-dim);transform:translateY(-1px);}
.export-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ===================== TABLES ===================== */
.table-wrap{overflow:auto;max-height:520px;border-radius:var(--radius-sm);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
thead th{
  background:var(--bg-elevated);color:var(--text-faint);
  text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;font-weight:700;
  padding:12px 14px;text-align:left;white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
tbody td{padding:12px 14px;border-top:1px solid var(--border);color:var(--text-dim);white-space:nowrap;}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums;}
thead th.num{text-align:right;}
tbody tr{transition:background .15s ease;}
tbody tr:nth-child(even){background:rgba(255,255,255,0.015);}
tbody tr:hover{background:var(--hover);}
tbody td.strong{color:var(--text);font-weight:600;}
.wrap-cells tbody td{white-space:normal;max-width:200px;word-break:break-word;}
.wrap-cells tbody td:has(.badge){white-space:nowrap;max-width:none;word-break:normal;}
tbody td.positive{color:var(--green);font-weight:600;}
tbody td.negative{color:var(--danger);font-weight:600;}
.empty-row td{text-align:center;color:var(--text-faint);padding:26px;font-style:italic;}

.badge{
  display:inline-block;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}
.badge-pendente{background:rgba(245,185,66,0.15);color:var(--amber);}
.badge-pago,.badge-recebido{background:rgba(31,203,110,0.15);color:var(--green);}
.badge-parcial{background:rgba(79,140,255,0.15);color:var(--blue);}
.badge-vencido{background:var(--danger-dim);color:var(--danger);}
.badge-estoque{background:rgba(255,199,0,0.15);color:var(--accent);}
.badge-fora{background:rgba(79,140,255,0.15);color:var(--blue);}
.badge-misto{background:rgba(168,85,247,0.15);color:#a855f7;}
.badge-entrada{background:rgba(31,203,110,0.15);color:var(--green);}
.badge-saida{background:var(--danger-dim);color:var(--danger);}

.row-actions{display:flex;gap:8px;}
.icon-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  width:28px;height:28px;border-radius:9px;cursor:pointer;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.icon-btn:hover{border-color:var(--accent);color:var(--text);background:var(--hover);}
.icon-btn.del:hover{border-color:var(--danger);background:var(--danger-dim);color:#ff8080;}

/* ===================== HISTORICO / MES CARDS ===================== */
.mes-grid{grid-template-columns:repeat(4,1fr);}
.mes-card{background:var(--card-2);padding:var(--sp-2);margin-bottom:0;}
.mes-card h4{font-size:13px;}
.mes-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);padding:6px 0;border-top:1px solid var(--border);}
.mes-row:first-of-type{border-top:none;}
.mes-row.total{font-weight:700;color:var(--text);border-top:1px solid var(--border);margin-top:2px;padding-top:8px;}
@media (max-width:1180px){.mes-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mes-grid{grid-template-columns:1fr;}}

/* ===================== PEDIDOS / SUB-TABELA ===================== */
.detail-row td{background:var(--bg-elevated);padding:var(--sp-2);}
.sub-table{width:100%;font-size:12.5px;}
.sub-table th{color:var(--text-faint);text-transform:uppercase;font-size:10px;padding:6px 10px;text-align:left;}
.sub-table td{padding:6px 10px;color:var(--text-dim);border-top:1px solid var(--border);}
.obs-text{font-size:12.5px;color:var(--text-faint);margin:8px 0 0;font-style:italic;}

/* ===================== HISTORICO DE PAGAMENTOS ===================== */
.pagamento-resumo{display:flex;gap:24px;font-size:13px;color:var(--text-dim);margin-bottom:var(--sp-2);}
.pagamento-resumo strong{font-size:15px;}
.pagamento-form{margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);}
.pagamento-form label{font-size:11.5px;}
.pedido-total-draft{text-align:right;font-size:16px;font-weight:800;padding:12px 4px;color:var(--text);}
.pedido-total-draft span{color:var(--accent);}

/* ===================== CONFIGURACOES ===================== */
.filtro-select{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  padding:8px 12px;border-radius:var(--radius-sm);font-family:inherit;font-size:12.5px;outline:none;
}
.file-label{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.filtro-wide{width:100%;height:42px;}

/* ===================== CREDITO ===================== */
.credito-saldo-info{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:13px;color:var(--text-dim);
}
.credito-saldo-info strong{color:var(--green);font-weight:700;}
.credito-saldo-info.warn strong{color:var(--danger);}

/* ===================== AUTENTICACAO ===================== */
.auth-screen{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 20%,rgba(255,199,0,0.08),transparent 60%),var(--bg);
  padding:20px;
}
.auth-card{
  width:100%;max-width:380px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-4);box-shadow:var(--shadow);
  animation:fadeInUp .4s ease both;
}
.auth-brand{padding:0 0 var(--sp-3);justify-content:center;font-size:21px;}
.auth-card h2{margin:0 0 6px;font-size:20px;text-align:center;}
.auth-card .subtitle{text-align:center;margin-bottom:var(--sp-3);}
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim);font-weight:500;}
.auth-form input{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);
  height:44px;padding:0 14px;border-radius:var(--radius-sm);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.auth-form .btn-primary{width:100%;height:46px;margin-top:4px;}
.auth-toggle{text-align:center;margin:var(--sp-3) 0 0;font-size:13px;color:var(--text-dim);}
.auth-toggle a{color:var(--accent);text-decoration:none;font-weight:600;}
.auth-toggle a:hover{text-decoration:underline;}
.auth-error{
  background:var(--danger-dim);border:1px solid var(--danger);color:#ff9a9a;
  padding:10px 14px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:var(--sp-2);
}

.app-loading{
  position:fixed;inset:0;z-index:900;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg);color:var(--text-dim);font-size:13.5px;
}
.loading-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.user-badge{
  font-size:12px;color:var(--text-dim);padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-elevated);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===================== BANCOS ===================== */
.banco-icone-preview-wrap{display:flex;align-items:center;gap:10px;}
.banco-icone-preview-wrap[hidden]{display:none;}
.banco-icone-preview-wrap img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--bg-elevated);border:1px solid var(--border);}
.banco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);}
.banco-card{
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-2);position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.banco-card:hover{transform:translateY(-3px);}
.banco-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;}
.banco-icone{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);border:2px solid var(--border);
  overflow:hidden;
}
.banco-icone img{width:100%;height:100%;object-fit:cover;}
.banco-icone-fallback{color:var(--text-dim);}
.banco-nome-wrap{display:flex;align-items:center;gap:10px;min-width:0;}
.banco-nome{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.banco-saldo{font-size:22px;font-weight:800;letter-spacing:-0.01em;}
.banco-label{font-size:11px;color:var(--text-faint);margin-top:4px;text-transform:uppercase;letter-spacing:.04em;}
.banco-card.saldo-baixo .banco-saldo{color:var(--danger);}
.banco-card.saldo-baixo{border-color:rgba(255,59,59,0.4);}
.banco-card.saldo-medio .banco-saldo{color:var(--amber);}
.banco-card.saldo-medio{border-color:rgba(245,185,66,0.4);}
.banco-card.saldo-alto .banco-saldo{color:var(--green);}
.banco-card.saldo-alto{border-color:rgba(31,203,110,0.35);}
.banco-card-geral{
  grid-column:span 2;background:var(--card);padding:var(--sp-3);
  box-shadow:0 0 0 1px var(--border),0 8px 24px rgba(0,0,0,0.35);
}
.banco-card-geral .banco-saldo{font-size:32px;}
.banco-card-geral .banco-nome{font-size:15px;}
@media (max-width:1180px){.banco-grid{grid-template-columns:repeat(2,1fr);}.banco-card-geral{grid-column:span 2;}}
@media (max-width:560px){.banco-grid{grid-template-columns:1fr;}.banco-card-geral{grid-column:span 1;}}

/* ===================== TOAST ===================== */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card-2);border:1px solid var(--border);color:var(--text);
  padding:13px 22px;border-radius:100px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;transition:all .3s ease;z-index:999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

.kpi-card:nth-child(1){animation-delay:.02s;}
.kpi-card:nth-child(2){animation-delay:.06s;}
.kpi-card:nth-child(3){animation-delay:.10s;}
.kpi-card:nth-child(4){animation-delay:.14s;}
.kpi-card:nth-child(5){animation-delay:.18s;}
.kpi-card:nth-child(6){animation-delay:.22s;}
.kpi-card:nth-child(7){animation-delay:.26s;}
.kpi-card:nth-child(8){animation-delay:.30s;}
.kpi-card:nth-child(9){animation-delay:.34s;}
.kpi-card:nth-child(10){animation-delay:.38s;}
.kpi-card:nth-child(11){animation-delay:.42s;}
.kpi-card:nth-child(12){animation-delay:.46s;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .kpi-grid,.kpi-grid.small,.kpi-grid.bento{grid-template-columns:repeat(2,1fr);}
  .kpi-grid.bento .kpi-card:nth-child(1){grid-column:span 2;grid-row:span 1;}
  .kpi-grid.bento .kpi-card:nth-child(1) .kpi-value{font-size:30px;}
  .panel-grid.two,.panel-grid.three{grid-template-columns:1fr;}
}
@media (max-width:880px){
  .app{flex-direction:column;}
  .sidebar{width:100%!important;height:auto;position:relative;top:auto;flex-direction:column;padding:16px;align-items:stretch;}
  .sidebar.collapsed .brand span:not(.brand-mark){display:inline;}
  .sidebar.collapsed .nav-item span:last-child{display:inline;}
  .sidebar.collapsed .ghost-btn{display:block;}
  .sidebar-toggle{display:none;}
  .brand{padding:0 0 16px;}
  .nav{flex-direction:column;flex-wrap:nowrap;}
  .nav-item{border-left:none;border-radius:var(--radius-sm);justify-content:flex-start;}
  .nav-item.active{border-left:3px solid var(--accent);}
  .sidebar-footer{flex-direction:column;border-top:1px solid var(--border);padding-top:16px;margin-left:0;margin-top:12px;}
  .main{padding:20px;}
  .grid-form{grid-template-columns:1fr;}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px;}
}
@media (max-width:560px){
  .kpi-grid,.kpi-grid.small,.kpi-grid.bento{grid-template-columns:1fr;}
  .kpi-grid.bento .kpi-card:nth-child(1){grid-column:span 1;}
}