:root{
  --pv-blue:#0b2341;
  --pv-cyan:#30c5ff;
  --pv-emerald:#19c37d;
  --pv-gold:#f5a524;
  --pv-rose:#f15f79;
  --pv-ink:#08111f;
  --pv-surface:#f4f7fb;
  --pv-card:#ffffff;
  --pv-border:rgba(9,18,32,.08);
}
*{box-sizing:border-box}
body{
  background:
    radial-gradient(circle at top left, rgba(48,197,255,.16), transparent 30%),
    radial-gradient(circle at top right, rgba(241,95,121,.13), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
  color:#142033;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
}
.navbar,.app-topbar{background:linear-gradient(135deg,#07182f 0%,#0b2341 60%,#102f52 100%);box-shadow:0 12px 30px rgba(4,15,34,.18)}
.navbar-brand{letter-spacing:.03em}
.brand-version{display:inline-flex;align-items:center;padding:.14rem .5rem;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.brand-logo{height:32px;width:32px;object-fit:cover;background:#fff;border-radius:10px;padding:3px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.navbar-user{opacity:.85}
.sidebar{background:linear-gradient(180deg,#071521 0%,#0b1725 100%);min-height:calc(100vh - 72px);border-right:1px solid rgba(255,255,255,.06)}
.sidebar__label{color:rgba(255,255,255,.48);letter-spacing:.16em}
.sidebar-link{color:#dce8ee;text-decoration:none;padding:.72rem .9rem;display:block;border-radius:.9rem;transition:transform .2s ease,background .2s ease,color .2s ease}
.sidebar-link:hover,.sidebar-link.active{background:rgba(255,255,255,.1);color:#fff;transform:translateX(3px)}
.app-main{min-height:calc(100vh - 72px)}
.card,.panel-card,.auth-card,.dashboard-hero{border:1px solid var(--pv-border);border-radius:1.3rem;box-shadow:0 18px 40px rgba(11,35,65,.08)}
.card{background:var(--pv-card)}
.page-title,.eyebrow{color:var(--pv-blue)}
.page-title{font-weight:800}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700}
.dashboard-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b2341 0%,#123d67 60%,#0f5b7d 100%);color:#fff;padding:1.4rem 1.5rem;min-height:170px}
.dashboard-hero__content{position:relative;z-index:1;max-width:740px}
.dashboard-hero__accent{position:absolute;inset:auto -120px -120px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(48,197,255,.55) 0%, rgba(48,197,255,0) 70%);filter:blur(4px)}
.stat-card{position:relative;overflow:hidden;border-left:0}
.stat-card::before{content:'';position:absolute;inset:0 auto 0 0;width:6px;background:var(--stat-accent)}
.stat-card--blue{--stat-accent:linear-gradient(180deg,#20a4ff,#0b6ea9)}
.stat-card--teal{--stat-accent:linear-gradient(180deg,#1fbf9a,#0d8570)}
.stat-card--gold{--stat-accent:linear-gradient(180deg,#ffcb66,#f59e0b)}
.stat-card--rose{--stat-accent:linear-gradient(180deg,#ff7b93,#e9486c)}
.stat-label{font-size:.85rem;color:#617086;text-transform:uppercase;letter-spacing:.08em}
.stat-value{margin-bottom:0;font-weight:800;color:#08111f}
.panel-card{background:rgba(255,255,255,.88);backdrop-filter:blur(14px)}
.chart-shell{position:relative;min-height:340px}
.province-map-shell {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.province-map {
  width: 100%;
  max-height: 260px;
  height: auto;
  display: block;
}

.province-map #features path {
  transition: fill .18s ease, opacity .18s ease, filter .18s ease;
}

.province-map #features path:hover {
  fill: #2f80ed;
  filter: drop-shadow(0 8px 16px rgba(11, 110, 169, .16));
}

.province-map #label_points circle {
  display: none;
}

.province-overlay-count {
  fill: #ffffff;
  font-size: 16px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(11, 24, 49, .55);
  stroke-width: 2px;
  pointer-events: none;
}
.province-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: rgba(14, 23, 38, .92);
  color: #fff;
  border-radius: 10px;
  padding: .45rem .65rem;
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
}
.btn-outline-primary{color:var(--pv-blue);border-color:rgba(11,35,65,.22)}
.btn-outline-primary:hover,.btn-outline-primary.is-active{background:var(--pv-blue);border-color:var(--pv-blue);color:#fff}
.btn-soft{background:#eef4fb;border:1px solid rgba(11,35,65,.08);color:#38526f;border-radius:999px;padding:.45rem .9rem;transition:background .2s ease,color .2s ease,transform .2s ease}
.btn-soft:hover,.btn-soft.is-active{background:var(--pv-blue);color:#fff;transform:translateY(-1px)}
.dashboard-filters .btn{border-radius:999px}
.dashboard-filters.is-disabled{opacity:.45;pointer-events:none}
.insight-row{padding:.9rem 0;border-bottom:1px solid rgba(11,35,65,.08)}
.insight-row:last-child{border-bottom:0;padding-bottom:0}
.table thead{background:#edf3f7}
.badge-soft{background:#e7f7fd;color:var(--pv-blue)}
.btn-primary{background:linear-gradient(135deg,#0b2341,#123d67);border-color:#0b2341;box-shadow:0 10px 22px rgba(11,35,65,.18)}
.btn-primary:hover{background:linear-gradient(135deg,#123d67,#0b2341);border-color:#0b2341}
.auth-shell{min-height:100vh;position:relative;overflow:hidden}
.auth-shell__bg{position:absolute;inset:0;background:
  radial-gradient(circle at 15% 20%, rgba(48,197,255,.24), transparent 28%),
  radial-gradient(circle at 85% 20%, rgba(241,95,121,.18), transparent 25%),
  linear-gradient(180deg,#08111f 0%,#0b2341 100%);}
.auth-card{position:relative;z-index:1;background:#fff}
.auth-card__brand{background:linear-gradient(160deg,#0b2341 0%,#123d67 54%,#0f5b7d 100%)}
.auth-brand-logo{height:58px;width:auto;background:#fff;border-radius:14px;padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.auth-form .form-control,.auth-form .form-select{border-radius:.9rem;padding:.85rem 1rem;border-color:rgba(11,35,65,.14)}
.auth-form .form-control:focus,.auth-form .form-select:focus{border-color:rgba(11,35,65,.42);box-shadow:0 0 0 .2rem rgba(11,35,65,.08)}
.auth-form label{font-weight:600;color:#1f2d42}
.auth-form .mb-3{margin-bottom:1rem !important}
@media(max-width:991px){
  .sidebar{min-height:auto}
  .dashboard-hero{padding:1.2rem}
  .chart-shell{min-height:260px}
}