:root{
  --glass: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.22);
}
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
.page-fade{animation:pageFade .22s ease}
@keyframes pageFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.btn-anim{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn-anim:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-anim:active{transform:translateY(0) scale(.98);filter:brightness(.95)}
.login-bg{min-height:100vh;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;padding:24px}
.glass{width:min(480px,92vw);background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.30);padding:22px}
.glass .form-control,.glass .form-select{background:rgba(255,255,255,.88)}

/* THEMES */
html[data-theme="dark"]{
  --sb-w: 290px;
  --sb-w-collapsed: 92px;
  --bg0:#070A12;
  --bg1:#0B1222;
  --surface: rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.03);
  --stroke: rgba(255,255,255,.08);
  --neon:#5EE7FF;
  --neon2:#A855F7;
  --txt: rgba(255,255,255,.92);
  --txt2: rgba(255,255,255,.62);
  --main-bg: #0b1222;
  --topbar-bg: rgba(0,0,0,.16);
}

html[data-theme="light"]{
  --sb-w: 290px;
  --sb-w-collapsed: 92px;
  --bg0:#F7FAFF;
  --bg1:#EEF4FF;
  --surface: rgba(0,0,0,.05);
  --surface2: rgba(0,0,0,.03);
  --stroke: rgba(0,0,0,.10);
  --neon:#2563EB;
  --neon2:#7C3AED;
  --txt: rgba(0,0,0,.88);
  --txt2: rgba(0,0,0,.58);
  --main-bg: #F3F6FF;
  --topbar-bg: rgba(255,255,255,.72);
}

.app-shell{ background: var(--main-bg); }

/* Overlay mobile */
.app-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
  z-index: 980;
}

/* Sidebar */
.app-sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width: var(--sb-w);
  z-index: 990;
  color: var(--txt);
  background:
    radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--neon) 18%, transparent), transparent 50%),
    radial-gradient(900px 500px at 80% 20%, color-mix(in srgb, var(--neon2) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  border-right: 1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  transform: translateX(0);
  transition: width .22s ease, transform .22s ease;
}

.sidebar-brand{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 10px 14px;
}
.brand-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color: var(--txt);
}
.brand-logo{ height:30px; width:auto; border-radius:10px; }
.brand-name{
  font-weight:900;
  letter-spacing:.4px;
  background: linear-gradient(90deg, var(--txt), color-mix(in srgb, var(--neon) 80%, var(--txt) 20%), color-mix(in srgb, var(--neon2) 80%, var(--txt) 20%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.icon-btn{
  border: 1px solid var(--stroke);
  color: color-mix(in srgb, var(--txt) 75%, transparent);
  background: var(--surface);
  border-radius: 12px;
}
.icon-btn:hover{ color: var(--txt); background: color-mix(in srgb, var(--surface) 100%, transparent); }

.btn-ghost{
  border: 1px solid var(--stroke) !important;
  background: var(--surface) !important;
  color: color-mix(in srgb, var(--txt) 78%, transparent) !important;
  border-radius: 12px !important;
}

/* Search */
.sidebar-search-input{
  background: var(--surface) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--txt) !important;
}
.sidebar-search-input::placeholder{ color: var(--txt2); }

/* Nav */
.sidebar-nav{
  padding: 6px 10px 10px 10px;
  overflow:auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--txt) 25%, transparent) transparent;
}
.sidebar-nav::-webkit-scrollbar{ width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--txt) 20%, transparent); border-radius: 99px; }

.nav-group{ margin: 6px 0; }
.nav-group-toggle{
  width: 100%;
  position: relative;
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  margin: 6px 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  background: var(--surface2);
  color: color-mix(in srgb, var(--txt) 85%, transparent);
  overflow:hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav-group-toggle:hover{
  transform: translateY(-1px);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--neon) 22%, var(--stroke) 78%);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-chevron{ transition: transform .18s ease; opacity:.85; }
.nav-group.open .nav-chevron{ transform: rotate(180deg); }

.nav-group-items{
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}
.nav-group.open .nav-group-items{ max-height: 520px; }

.nav-item-link{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px;
  margin: 6px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: color-mix(in srgb, var(--txt) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
  background: var(--surface2);
  overflow:hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav-item-link:hover{
  transform: translateY(-1px);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--neon) 22%, var(--stroke) 78%);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.nav-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 16%, transparent), color-mix(in srgb, var(--neon2) 12%, transparent));
  border: 1px solid var(--stroke);
}
.nav-text{ font-weight: 700; letter-spacing:.2px; }
.nav-glow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--neon) 18%, transparent), transparent 55%),
              radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--neon2) 14%, transparent), transparent 60%);
  opacity:0;
  transition: opacity .15s ease;
}
.nav-item-link:hover .nav-glow{ opacity:1; }
.nav-item-link.active{
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 14%, transparent), color-mix(in srgb, var(--neon2) 12%, transparent));
  border-color: color-mix(in srgb, var(--neon) 28%, transparent);
}
.nav-item-link.active::before{
  content:"";
  position:absolute; left:0; top:10px; bottom:10px;
  width: 4px; border-radius: 99px;
  background: linear-gradient(180deg, var(--neon), var(--neon2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--neon) 35%, transparent);
}

/* Badges */
.nav-badge{
  margin-left:auto;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--txt);
}
.nav-badge-primary{ background: color-mix(in srgb, var(--neon) 20%, var(--surface) 80%); }
.nav-badge-danger{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.28); }
.nav-badge-success{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.28); }
.nav-badge-warning{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.28); }
.nav-badge-info{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.26); }

/* Footer */
.sidebar-footer{
  margin-top:auto;
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg0) 78%, transparent);
}
.user-chip{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.user-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--neon), var(--neon2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 35%, transparent);
}
.user-name{ font-weight: 800; font-size: 13px; }
.user-role{ font-size: 11px; color: var(--txt2); }

/* Main */
.app-main{
  margin-left: var(--sb-w);
  min-height: 100vh;
  transition: margin-left .22s ease;
}
.app-topbar{
  position: sticky; top:0; z-index: 50;
  height: 64px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-title{ color: var(--txt); font-weight: 850; letter-spacing:.2px; }
.topbar-actions .btn{ border-radius: 12px; }
.app-content{ padding: 18px; }

/* Collapsed sidebar */
body.sidebar-collapsed .app-sidebar{ width: var(--sb-w-collapsed); }
body.sidebar-collapsed .app-main{ margin-left: var(--sb-w-collapsed); }
body.sidebar-collapsed .brand-name,
body.sidebar-collapsed .sidebar-search,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-right,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-footer .user-meta{ display:none !important; }
body.sidebar-collapsed .nav-group-toggle,
body.sidebar-collapsed .nav-item-link{ justify-content:center; }
body.sidebar-collapsed .nav-ico{ width:44px; height:44px; border-radius: 16px; }
body.sidebar-collapsed .nav-group-items{ display:none; }

/* Mobile */
@media (max-width: 991.98px){
  .app-sidebar{ transform: translateX(-105%); }
  body.sidebar-open .app-sidebar{ transform: translateX(0); }
  .app-main{ margin-left: 0; }
  body.sidebar-open .app-overlay{ opacity:1; pointer-events:auto; }
  .topbar-actions .btn-outline-light{ display:none; }
}

/* Ripple */
.ripple-target{ position: relative; overflow: hidden; }
.ripple-span{
  position:absolute;
  border-radius:50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background: color-mix(in srgb, var(--txt) 25%, transparent);
  pointer-events:none;
}
@keyframes ripple{
  to{ transform: scale(4); opacity: 0; }
}


/* Light theme: outline-light should be readable */
html[data-theme="light"] .topbar-actions .btn-outline-light{
  color: rgba(0,0,0,.88) !important;
  border-color: rgba(0,0,0,.22) !important;
}
html[data-theme="light"] .topbar-actions .btn-outline-light:hover{
  background: rgba(0,0,0,.06) !important;
}

/* If JS fails to load, keep sidebar visible on mobile */
@media (max-width: 991.98px){
  body.no-js .app-sidebar{ transform: translateX(0); }
  body.no-js .app-main{ margin-left: 0; }
  body.no-js .app-overlay{ display:none; }
}


/* DASHBOARD FUTURISTA */
.dash-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 20% 10%, color-mix(in srgb, var(--neon) 18%, transparent), transparent 60%),
    radial-gradient(800px 520px at 80% 20%, color-mix(in srgb, var(--neon2) 16%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--main-bg) 92%, #000 8%), var(--main-bg));
  opacity: .95;
}
.app-content{ position: relative; z-index: 1; }

/* Cyber grid + scanline */
.app-content::before{
  content:"";
  position:absolute; inset:-20px;
  background:
    linear-gradient(transparent 0 96%, color-mix(in srgb, var(--txt) 10%, transparent) 96% 100%),
    linear-gradient(90deg, transparent 0 96%, color-mix(in srgb, var(--txt) 10%, transparent) 96% 100%);
  background-size: 46px 46px;
  opacity: .14;
  pointer-events:none;
  mask-image: radial-gradient(circle at 40% 10%, rgba(0,0,0,1), rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 75%);
}
.app-content::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.04), transparent);
  opacity:.10;
  pointer-events:none;
  animation: scan 6s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes scan{
  0%{ transform: translateY(-20%); }
  100%{ transform: translateY(120%); }
}

.dash-hero{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.dash-kicker{
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--txt2);
  margin-bottom: 6px;
}
.dash-sub{
  color: var(--txt2);
  margin-top: 6px;
}
.dash-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-filters{
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  border: 1px solid var(--stroke) !important;
}

/* KPI cards */
.kpi-card{
  position: relative;
  border-radius: 18px;
  padding: 14px 14px 12px 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover{
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
  border-color: color-mix(in srgb, var(--neon) 24%, var(--stroke) 76%);
}
.kpi-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.kpi-label{
  color: var(--txt2);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
  text-transform: uppercase;
}
.kpi-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 18%, transparent), color-mix(in srgb, var(--neon2) 14%, transparent));
  color: var(--txt);
}
.kpi-value{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 8px;
  line-height: 1.1;
  color: var(--txt);
  text-shadow: 0 0 20px color-mix(in srgb, var(--neon) 18%, transparent);
}
.kpi-sub{
  color: var(--txt2);
  margin-top: 6px;
  font-size: 12px;
}
.kpi-spark{
  width: 100%;
  height: 44px;
  margin-top: 10px;
  opacity: .9;
}
.spark-line{
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: draw 1.2s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.spark-in{ stroke: color-mix(in srgb, var(--neon) 85%, #fff 15%); }
.spark-out{ stroke: color-mix(in srgb, var(--neon2) 80%, #fff 20%); }

.kpi-glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--neon) 18%, transparent), transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--neon2) 14%, transparent), transparent 60%);
  opacity: .35;
  animation: glowPulse 5.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.28; }
  50%{ transform: translate3d(2%, -2%, 0) scale(1.02); opacity:.42; }
}

.kpi-micro{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  color: var(--txt2);
  font-size: 12px;
}
.chip b{ color: var(--txt); }

/* Open stack */
.kpi-stack{ margin-top: 10px; display:flex; flex-direction:column; gap:10px; }
.kpi-row{ display:flex; justify-content:space-between; align-items:center; }
.kpi-row-label{ color: var(--txt2); font-weight: 700; }
.kpi-row-val{ color: var(--txt); font-weight: 900; }

/* Bank cards */
.bank-card{
  position: relative;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bank-card:hover{
  border-color: color-mix(in srgb, var(--neon2) 22%, var(--stroke) 78%);
  box-shadow: 0 26px 70px rgba(0,0,0,.20);
}
.bank-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
}
.bank-name{
  font-weight: 900;
  color: var(--txt);
}
.bank-num{ color: var(--txt2); font-weight: 800; }
.bank-sub{
  color: var(--txt2);
  font-size: 12px;
  margin-top: 4px;
}
.bank-badge{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon2) 18%, transparent), color-mix(in srgb, var(--neon) 14%, transparent));
}
.bank-balance{
  margin-top: 12px;
  font-size: 22px;
  font-weight: 900;
  color: var(--txt);
  text-shadow: 0 0 16px color-mix(in srgb, var(--neon2) 18%, transparent);
}
.bank-foot{
  margin-top: 8px;
  color: var(--txt2);
  font-size: 12px;
}
.bank-glow{
  position:absolute; inset:-45%;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--neon2) 14%, transparent), transparent 60%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--neon) 12%, transparent), transparent 62%);
  opacity: .28;
  animation: glowPulse 6.8s ease-in-out infinite;
  pointer-events:none;
}

/* Better contrast for light theme buttons in dashboard */
html[data-theme="light"] .dash-actions .btn-outline-primary{
  color: rgba(0,0,0,.88) !important;
  border-color: rgba(0,0,0,.18) !important;
}


/* DASH QUICK BUTTONS */
.dash-quick-panel{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 12px 12px 10px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  overflow: hidden;
  position: relative;
}
.dash-quick-panel::before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--neon) 22%, transparent), transparent 55%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--neon2) 18%, transparent), transparent 60%);
  opacity:.28;
  animation: glowPulse 6.2s ease-in-out infinite;
  pointer-events:none;
}
.dash-quick-title{
  display:flex; align-items:center; gap:8px;
  color: var(--txt2);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 10px;
}
.dash-quick-buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-quick-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--txt);
  font-weight: 850;
  letter-spacing:.2px;
  border: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
  overflow: hidden;
}
.dash-quick-btn .dq-ico{
  width: 30px; height: 30px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 18%, transparent), color-mix(in srgb, var(--neon2) 14%, transparent));
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.dash-quick-btn .dq-text{ position: relative; z-index: 2; }
.dash-quick-btn .dq-glow{
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--neon) 24%, transparent), transparent 58%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--neon2) 18%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events:none;
}
.dash-quick-btn::after{
  /* shimmer */
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width: 60%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: rotate(18deg);
  opacity: .0;
}
.dash-quick-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--neon) 28%, var(--stroke) 72%);
  box-shadow: 0 22px 60px rgba(0,0,0,.20);
  filter: saturate(1.05);
}
.dash-quick-btn:hover .dq-glow{ opacity: .55; }
.dash-quick-btn:hover::after{
  opacity: .85;
  animation: shimmer 900ms ease;
}
@keyframes shimmer{
  0%{ left:-60%; }
  100%{ left:140%; }
}

html[data-theme="light"] .dash-quick-btn{
  border-color: rgba(0,0,0,.14);
}
html[data-theme="light"] .dash-quick-btn:hover{
  border-color: rgba(37,99,235,.28);
}


/* DASH SEGMENTED CONTROL */
.dash-seg{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 12px 12px 10px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  overflow: hidden;
  position: relative;
  min-width: min(560px, 100%);
}
.dash-seg::before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--neon) 22%, transparent), transparent 55%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--neon2) 18%, transparent), transparent 60%);
  opacity:.22;
  animation: glowPulse 6.2s ease-in-out infinite;
  pointer-events:none;
}
.dash-seg-title{
  display:flex; align-items:center; gap:10px;
  color: var(--txt2);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.dash-seg-hint{
  margin-left:auto;
  font-weight: 900;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--txt2) 80%, transparent);
  border: 1px solid var(--stroke);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
}
.dash-seg-bar{
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--seg-count), minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  overflow: hidden;
  z-index: 1;
}
.seg-indicator{
  position:absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: calc((100% - 24px) / var(--seg-count));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--neon) 26%, var(--stroke) 74%);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neon) 16%, transparent),
    color-mix(in srgb, var(--neon2) 14%, transparent)
  );
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform: translateX(calc(var(--seg-index) * (100% + 8px)));
  transition: transform .22s ease, opacity .22s ease;
  pointer-events:none;
  opacity: 1;
}
.dash-seg[style*="--seg-index: -1"] .seg-indicator{ opacity: 0; }

.seg-btn{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--txt);
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform .16s ease, filter .16s ease;
  overflow: hidden;
  z-index: 2;
}
.seg-btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }
.seg-btn.active{ text-shadow: 0 0 18px color-mix(in srgb, var(--neon) 18%, transparent); }
.seg-ico{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 18%, transparent), color-mix(in srgb, var(--neon2) 14%, transparent));
}
.seg-text{ white-space: nowrap; }

@media (max-width: 991.98px){
  .dash-seg{ min-width: 0; width: 100%; }
  .dash-seg-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-indicator{ display:none; }
}


/* DASH SEG SMALL */
@media (max-width: 575.98px){
  .seg-btn{ padding: 12px 8px; }
  .seg-text{ display:none; }
  .dash-seg-hint{ display:none; }
}


/* CADASTROS PRO UI */
body{
  color: var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  letter-spacing: .1px;
}
h1,h2,h3,h4,h5{ letter-spacing:.2px; font-weight: 900; }

/* Cards semitransparentes (global) */
.card{
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
}
.card .table{ color: var(--txt); }

/* Inputs profissionais */
.form-control, .form-select, .input-group-text{
  border-radius: 14px !important;
}
.form-control, .form-select{
  background: color-mix(in srgb, var(--surface2) 92%, transparent) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--txt) !important;
}
.form-control::placeholder{ color: var(--txt2) !important; }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--neon) 35%, var(--stroke) 65%) !important;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--neon) 18%, transparent) !important;
}
.input-group-text{
  background: color-mix(in srgb, var(--surface2) 92%, transparent) !important;
  border: 1px solid var(--stroke) !important;
  color: color-mix(in srgb, var(--txt) 70%, transparent) !important;
}

/* Botões mais premium */
.btn{
  border-radius: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .2px !important;
}
.btn-outline-dark{
  color: var(--txt) !important;
  border-color: var(--stroke) !important;
}
.btn-outline-dark:hover{
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}
.btn-outline-primary{
  border-color: color-mix(in srgb, var(--neon) 28%, var(--stroke) 72%) !important;
}
.btn-outline-primary:hover{
  background: color-mix(in srgb, var(--neon) 12%, transparent) !important;
}
html[data-theme="light"] .btn-outline-light{
  color: rgba(0,0,0,.88) !important;
  border-color: rgba(0,0,0,.22) !important;
}

/* Listagens em cards */
.list-card{
  position: relative;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  overflow:hidden;
}
.list-card::before{
  content:"";
  position:absolute; inset:-60%;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--neon) 16%, transparent), transparent 60%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--neon2) 12%, transparent), transparent 62%);
  opacity:.18;
  pointer-events:none;
}
.list-title{
  font-weight: 900;
  color: var(--txt);
  line-height: 1.2;
}
.list-sub{
  color: var(--txt2);
  font-size: 12px;
  margin-top: 4px;
}
.list-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.meta-item{
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  border-radius: 14px;
  padding: 10px 10px;
}
.meta-label{
  color: var(--txt2);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
}
.meta-value{
  margin-top: 4px;
  font-weight: 800;
  color: var(--txt);
  word-break: break-word;
}
.list-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}


/* LISTVIEW MODES */
html[data-listview="compact"] .list-card{
  padding: 12px;
}
html[data-listview="compact"] .list-meta{
  grid-template-columns: 1fr;
}
html[data-listview="compact"] .meta-item{
  padding: 8px 10px;
}
html[data-listview="compact"] .list-actions{
  justify-content: space-between;
}
html[data-listview="compact"] .list-title{
  font-size: 15px;
}
html[data-listview="compact"] .list-sub{
  font-size: 11px;
}

/* Premium toggle buttons */
.listview-toggle{
  display:flex;
  gap: 10px;
}
.listview-toggle .btn{
  border-radius: 999px !important;
  padding: 8px 12px !important;
}
.listview-toggle .btn.active{
  border-color: color-mix(in srgb, var(--neon) 30%, var(--stroke) 70%) !important;
  background: color-mix(in srgb, var(--neon) 12%, transparent) !important;
}

/* Glowing badge */
.badge.glow-badge{
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neon) 22%, transparent),
    color-mix(in srgb, var(--neon2) 18%, transparent)
  ) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 20%, transparent);
  animation: badgePulse 3.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{ filter: saturate(1); opacity: .92; }
  50%{ filter: saturate(1.25); opacity: 1; }
}

/* List card hover highlight */
.list-card:hover{
  border-color: color-mix(in srgb, var(--neon) 26%, var(--stroke) 74%) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.18) !important;
}


/* SELECT/DROPDOWN: melhora contraste (principalmente no tema escuro) */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* A caixa do select */
.form-select{
  background-color: color-mix(in srgb, var(--surface2) 92%, transparent) !important;
  color: var(--txt) !important;
}

/* O dropdown de opções (nem todos navegadores respeitam, mas ajuda muito no Windows/Chrome/Firefox) */
html[data-theme="dark"] .form-select option,
html[data-theme="dark"] .form-select optgroup{
  background: #0B1222;
  color: rgba(255,255,255,.92);
}
html[data-theme="light"] .form-select option,
html[data-theme="light"] .form-select optgroup{
  background: #ffffff;
  color: rgba(0,0,0,.88);
}

/* Placeholder visual (quando existe) */
.form-select:invalid{
  color: color-mix(in srgb, var(--txt2) 92%, transparent) !important;
}


/* DARK MODE TEXT VISIBILITY FIX */
html[data-theme="dark"] body,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-card{
  color: var(--txt) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .small,
html[data-theme="dark"] .list-sub,
html[data-theme="dark"] .meta-label{
  color: var(--txt2) !important;
}

html[data-theme="dark"] a,
html[data-theme="dark"] .btn-link{
  color: color-mix(in srgb, var(--neon) 70%, #ffffff 30%) !important;
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .btn-link:hover{
  color: color-mix(in srgb, var(--neon) 85%, #ffffff 15%) !important;
}

/* Tables (para páginas que ainda usam tabela) */
html[data-theme="dark"] .table{
  color: var(--txt) !important;
}
html[data-theme="dark"] .table thead{
  color: rgba(255,255,255,.92) !important;
}
html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-bg-type: color-mix(in srgb, var(--surface2) 92%, transparent);
}
html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(even)>*{
  --bs-table-bg-type: color-mix(in srgb, var(--surface) 92%, transparent);
}

/* Alerts (evita texto escuro no tema escuro) */
html[data-theme="dark"] .alert{
  border: 1px solid var(--stroke) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--txt) !important;
}
html[data-theme="dark"] .alert a{ color: color-mix(in srgb, var(--neon) 80%, #fff 20%) !important; }

/* Ensure Bootstrap placeholders and disabled fields are visible */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled{
  opacity: .75 !important;
  color: color-mix(in srgb, var(--txt) 70%, transparent) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder{
  color: color-mix(in srgb, var(--txt2) 95%, transparent) !important;
}


/* PARTY VIEW CARD */
.party-head{
  display:flex;
  align-items:center;
  gap: 12px;
}
.party-avatar{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  letter-spacing: .12em;
  color: var(--txt);
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neon) 18%, transparent),
    color-mix(in srgb, var(--neon2) 16%, transparent)
  );
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.party-stats{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.stat-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
}
.stat-lbl{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--txt2);
}
.stat-val{
  font-weight: 950;
  color: var(--txt);
}


/* PARTY MOVEMENTS */
.table-dark{ --bs-table-bg: color-mix(in srgb, var(--bg0) 86%, #000 14%); }
html[data-theme="dark"] .table-dark th{ color: rgba(255,255,255,.92) !important; }


/* PARTY SPARKLINE */
.party-sparkline-wrap{
  margin-top: 10px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface2) 92%, transparent);
  border-radius: 14px;
  padding: 10px 10px 8px 10px;
}
.party-sparkline-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--txt2);
  margin-bottom: 6px;
}
.party-sparkline{
  width: 100%;
  height: 46px;
  opacity: .95;
}


.party-sparkline-legend{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 8px;
  color: var(--txt2);
  font-size: 12px;
}
.leg-item{ display:inline-flex; align-items:center; gap: 6px; }
.leg-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
}
.leg-in{ background: color-mix(in srgb, var(--neon) 75%, transparent); }
.leg-out{ background: color-mix(in srgb, var(--neon2) 70%, transparent); }

/* Make overlapped sparklines readable */
.party-sparkline .spark-out{ opacity: .90; stroke-width: 2.2; }
.party-sparkline .spark-in{ opacity: .95; stroke-width: 2.6; }


/* MONEY INPUT */
input[data-money="brl"]{
  font-variant-numeric: tabular-nums;
}


html[data-theme="dark"] .form-check-label{ color: var(--txt2) !important; }