:root{
  --d-bg:#07111f;
  --d-sidebar:#071522;
  --d-surface:rgba(15,30,45,.92);
  --d-soft:rgba(255,255,255,.055);
  --d-text:#f5fbff;
  --d-text-soft:#d5e3ec;
  --d-muted:#9eb1bf;
  --d-primary:#68e0cf;
  --d-primary2:#2bc7d5;
  --d-accent:#ff795d;
  --d-border:rgba(104,224,207,.17);
  --d-border-soft:rgba(255,255,255,.08);
  --d-shadow:0 22px 60px rgba(0,0,0,.25);
}

html[data-daerah-theme="light"]{
  --d-bg:#f4f7fb;
  --d-sidebar:#ffffff;
  --d-surface:#ffffff;
  --d-soft:#f1f6f8;
  --d-text:#102033;
  --d-text-soft:#32465a;
  --d-muted:#607286;
  --d-primary:#087d79;
  --d-primary2:#087fa2;
  --d-accent:#df593f;
  --d-border:rgba(8,125,121,.16);
  --d-border-soft:rgba(16,32,51,.09);
  --d-shadow:0 18px 50px rgba(28,54,80,.11);
}

body{
  background:
    radial-gradient(circle at 84% 8%,rgba(43,199,213,.13),transparent 27%),
    radial-gradient(circle at 18% 32%,rgba(104,224,207,.08),transparent 28%),
    var(--d-bg)!important;

  color:var(--d-text)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:16px!important;
  line-height:1.6!important;
}

h1,h2,h3{
  font-family:Poppins,Inter,sans-serif!important;
}

/* SIDEBAR */

.shell{
  grid-template-columns:270px minmax(0,1fr)!important;
}

.side{
  position:sticky;
  top:0;
  height:100vh;

  background:
    radial-gradient(circle at 70% 5%,rgba(104,224,207,.13),transparent 30%),
    var(--d-sidebar)!important;

  border-right:1px solid var(--d-border)!important;
  box-shadow:12px 0 38px rgba(0,0,0,.18)!important;
}

.side-head{
  padding:25px 20px 22px!important;
  border-color:var(--d-border-soft)!important;
}

.side-logo{
  width:58px!important;
  height:58px!important;
  border-radius:14px!important;
  padding:5px!important;
  background:var(--d-soft)!important;
  border:1px solid var(--d-border)!important;
}

.side-head strong{
  color:var(--d-text)!important;
  font-size:24px!important;
}

.side-head span{
  color:var(--d-muted)!important;
  font-size:12px!important;
}

.side-label{
  color:var(--d-muted)!important;
  font-size:10px!important;
  letter-spacing:.16em!important;
}

.side-menu{
  gap:5px!important;
  padding:18px 12px!important;
}

.side-link{
  min-height:46px;
  padding:12px 14px!important;
  border-radius:11px!important;
  border:1px solid transparent!important;

  color:var(--d-text-soft)!important;
  font-size:14px!important;
}

.side-link:hover{
  color:var(--d-text)!important;
  background:var(--d-soft)!important;
  border-color:var(--d-border-soft)!important;
}

.side-link.active{
  color:var(--d-primary)!important;
  background:rgba(104,224,207,.11)!important;
  border-color:var(--d-border)!important;
  box-shadow:inset 3px 0 0 var(--d-primary)!important;
}

/* CONTENT */

.content{
  padding:36px 38px 60px!important;
  width:100%;
  max-width:1600px;
}

.top{
  position:relative;

  margin-bottom:24px!important;
  padding:28px 30px;

  border-radius:22px;
  border:1px solid var(--d-border);

  background:
    radial-gradient(circle at 88% 8%,rgba(104,224,207,.13),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));

  box-shadow:var(--d-shadow);
}

html[data-daerah-theme="light"] .top{
  background:
    radial-gradient(circle at 88% 8%,rgba(8,125,121,.07),transparent 28%),
    #fff;
}

.eyebrow{
  background:rgba(104,224,207,.10)!important;
  color:var(--d-primary)!important;
  border:1px solid var(--d-border)!important;

  font-size:11px!important;
  letter-spacing:.1em;
}

.top h1{
  margin:13px 0 10px!important;

  color:var(--d-text)!important;

  font-size:clamp(34px,4vw,52px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}

.top p{
  color:var(--d-text-soft)!important;
  font-size:16px!important;
  line-height:1.65!important;
}

/* THEME TOGGLE */

.daerah-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;

  min-height:42px;

  padding:9px 13px;

  border-radius:999px;
  border:1px solid var(--d-border);

  background:var(--d-soft);
  color:var(--d-text);

  font-size:12px;
  font-weight:800;

  cursor:pointer;
}

/* PANEL */

.panel{
  background:var(--d-surface)!important;
  border:1px solid var(--d-border)!important;
  border-radius:18px!important;
  box-shadow:var(--d-shadow)!important;
}

.controls{
  gap:10px!important;
}

.control{
  min-height:46px;

  background:var(--d-soft)!important;
  border:1px solid var(--d-border-soft)!important;

  color:var(--d-text)!important;

  border-radius:10px!important;
}

.control::placeholder{
  color:var(--d-muted)!important;
}

.control option{
  background:var(--d-bg)!important;
  color:var(--d-text)!important;
}

.status{
  color:var(--d-muted)!important;
}

/* BUTTONS */

.btn{
  min-height:44px;
  border-radius:10px!important;
  font-size:13px!important;
  transition:.18s ease!important;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background:linear-gradient(135deg,var(--d-primary),#dffff9)!important;
  color:#07141c!important;

  box-shadow:0 12px 28px rgba(104,224,207,.16)!important;
}

.btn-secondary{
  background:var(--d-soft)!important;
  color:var(--d-text)!important;
  border:1px solid var(--d-border-soft)!important;
}

/* SUMMARY STATS */

.stats{
  gap:12px!important;
}

.stat{
  position:relative;

  min-height:112px;

  padding:18px!important;

  border-radius:14px!important;
  border:1px solid var(--d-border-soft);

  background:var(--d-soft)!important;
}

.stat strong{
  color:var(--d-primary)!important;
  font-size:30px!important;
}

.stat span{
  color:var(--d-muted)!important;

  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* TABLE */

.table-wrap{
  border:1px solid var(--d-border-soft)!important;
  border-radius:13px!important;

  background:var(--d-soft)!important;
}

.table{
  color:var(--d-text-soft)!important;
  font-size:13px!important;
}

.table th{
  background:rgba(104,224,207,.08)!important;

  color:var(--d-primary)!important;

  border-color:var(--d-border-soft)!important;

  font-size:10px!important;
  letter-spacing:.08em;
}

.table td{
  color:var(--d-text-soft)!important;
  border-color:var(--d-border-soft)!important;
}

.table tbody tr:hover{
  background:rgba(104,224,207,.055)!important;
}

/* CHIPS */

.chip{
  border-radius:999px!important;
  font-size:11px!important;
}

.district{
  background:rgba(104,224,207,.11)!important;
  color:var(--d-primary)!important;
}

.category{
  background:rgba(255,121,93,.11)!important;
  color:var(--d-accent)!important;
}

/* LIGHT MODE */

html[data-daerah-theme="light"] .side-head strong{
  color:#102033!important;
}

html[data-daerah-theme="light"] .side-head span,
html[data-daerah-theme="light"] .side-label{
  color:#607286!important;
}

/* MOBILE */

@media(max-width:980px){

  .shell{
    grid-template-columns:1fr!important;
  }

  .side{
    display:none!important;
  }

  .content{
    padding:20px 14px 42px!important;
  }

  .top{
    padding:22px 18px;
  }

  .top h1{
    font-size:34px!important;
  }

}

@media(max-width:520px){

  body{
    font-size:15px!important;
  }

  .stats{
    grid-template-columns:1fr 1fr!important;
  }

}

/* SAME GLOBAL SIDEBAR FOOTER */

.side-foot{
  display:grid!important;
  gap:10px!important;
  padding:16px!important;
}

.side-foot .btn{
  width:100%!important;
  min-height:48px!important;
  justify-content:flex-start!important;
  padding:12px 16px!important;
  background:rgba(255,255,255,.08)!important;
  color:var(--d-text)!important;
  border:1px solid var(--d-border-soft)!important;
}

.side-foot .btn:hover{
  background:rgba(104,224,207,.12)!important;
  border-color:var(--d-border)!important;
}

html[data-daerah-theme="light"] .side-foot .btn{
  background:#f1f6f8!important;
  color:#102033!important;
}