/* ===== Penyegaran tampilan (v1.0.60): tema gelap yang sama, lebih lega, lebih bersih, lebih rapi =====
   File ini dimuat paling akhir, jadi cukup menimpa gaya lama. Tidak ada perubahan fungsi. */
:root{
  --bg:#070B11;--bg2:#0B1017;--card:#0E141C;--card2:#121A24;
  --line:rgba(148,163,184,.11);--line2:rgba(148,163,184,.19);
  --text:#EEF2F8;--muted:#95A1B4;--dim:#6C788A;
  --r:20px;--r-sm:12px;
  --surface:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  --edge:inset 0 1px 0 rgba(255,255,255,.045);
  --lift:0 1px 2px rgba(0,0,0,.35),0 12px 32px -12px rgba(0,0,0,.55);
}
body{background:var(--bg);color:var(--text);letter-spacing:.002em}
/* Latar: cahaya lembut di atas + kisi yang memudar, bukan kisi rata di seluruh layar */
body.grid-bg{background-image:none}
body.grid-bg::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(46,229,157,.10),transparent 62%),
    radial-gradient(760px 480px at 92% -12%,rgba(75,163,245,.08),transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 420px,rgba(0,0,0,.18) 900px);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 420px,rgba(0,0,0,.18) 900px)}
.orb{display:none}

/* Judul */
h1{font-size:32px;font-weight:800;letter-spacing:-.03em}
h2{font-size:20px;font-weight:700}
.page-head h1{background:linear-gradient(180deg,#FFFFFF,#C9D3E1);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head p{font-size:15px;color:var(--muted);max-width:720px}
.kicker{letter-spacing:.12em}

/* Kartu: permukaan kaca tipis, sudut lebih bulat, tanpa lompat saat disentuh */
.card{background:var(--surface),var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--edge),var(--lift)}
.main .card:hover{border-color:rgba(148,163,184,.17);box-shadow:var(--edge),var(--lift)}
.glow-green,.hero-card{background:
  radial-gradient(110% 80% at 50% -10%,rgba(46,229,157,.11),transparent 58%) padding-box,
  linear-gradient(180deg,#111924,#0C121A) padding-box,
  linear-gradient(140deg,rgba(46,229,157,.45),rgba(148,163,184,.14) 42%,rgba(75,163,245,.35)) border-box;
  border:1px solid transparent;box-shadow:var(--edge),0 24px 60px -20px rgba(0,0,0,.6)}
.glow-red{background:radial-gradient(120% 140% at 100% 100%,rgba(255,92,108,.10),transparent 55%),var(--surface),var(--card)}
.card-head{margin-bottom:18px}
.card-head h2,.card-head h3{letter-spacing:-.02em}
.mstat{background:var(--surface),var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--edge)}
.quota,.plan-box{background:var(--surface),var(--card);border:1px solid var(--line);box-shadow:var(--edge)}
.issue{background:rgba(255,255,255,.015);border-color:var(--line);border-radius:16px}
.icon-box{border-radius:13px}

/* Tombol: hijau bergradasi dengan kilau tipis (sama dengan tombol Daftar di atas) */
.btn{border-radius:999px;font-weight:700;letter-spacing:.005em}
.btn-primary{background:linear-gradient(135deg,#3BF0A8,#22D38E 55%,#1FBFA0);color:#04140D;box-shadow:0 0 0 1px rgba(46,229,157,.45),0 8px 22px -6px rgba(46,229,157,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{color:#04140D;box-shadow:0 0 0 1px rgba(46,229,157,.7),0 12px 30px -6px rgba(46,229,157,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{background:rgba(255,255,255,.025);border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(148,163,184,.3);color:var(--text)}
.btn-ghost svg{color:var(--green)}
.btn-soft{background:rgba(46,229,157,.1);box-shadow:inset 0 0 0 1px rgba(46,229,157,.22)}
.btn-soft:hover{background:rgba(46,229,157,.16);color:var(--green)}

/* Lencana: cincin tipis supaya lebih tegas */
.badge{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent)}
.b-muted{background:rgba(148,163,184,.08);color:var(--muted)}

/* Form */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=range]),select,textarea{background:rgba(3,7,12,.55);border:1px solid var(--line2);border-radius:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=range]):hover,select:hover,textarea:hover{border-color:rgba(148,163,184,.3)}
input:focus,select:focus,textarea:focus{border-color:rgba(46,229,157,.6)!important;box-shadow:0 0 0 4px rgba(46,229,157,.12)!important}
label{font-size:13.5px;color:#D6DEE9}
.field .hint{color:var(--dim)}

/* Pesan: garis warna di kiri, latar lebih tenang */
.alert{border-radius:14px;border-color:transparent;box-shadow:inset 3px 0 0 currentColor;padding:14px 18px}
.alert-good{background:rgba(46,229,157,.065);color:#C9F8E3;box-shadow:inset 3px 0 0 var(--green),inset 0 0 0 1px rgba(46,229,157,.18)}
.alert-bad{background:rgba(255,92,108,.065);color:#FFCDD2;box-shadow:inset 3px 0 0 var(--red),inset 0 0 0 1px rgba(255,92,108,.2)}
.alert-warn{background:rgba(245,184,75,.065);color:#F9E2B4;box-shadow:inset 3px 0 0 var(--amber),inset 0 0 0 1px rgba(245,184,75,.2)}
.alert-info{background:rgba(75,163,245,.065);color:#CFE4FB;box-shadow:inset 3px 0 0 var(--blue),inset 0 0 0 1px rgba(75,163,245,.2)}

/* Tabel: kepala tabel tanpa blok, garis tipis, baris menyala lembut */
th{background:transparent;color:var(--dim);border-bottom:1px solid var(--line);padding:12px 16px;font-size:11px;letter-spacing:.1em}
th:first-child,th:last-child{border-radius:0}
td{border-bottom:1px solid var(--line)}
tbody tr:hover{background:rgba(148,163,184,.035)}
.tabs{background:rgba(3,7,12,.5);border-color:var(--line)}
.tabs a{color:var(--muted)}.tabs a:hover{color:var(--text)}
.tabs a.on{background:linear-gradient(135deg,#3BF0A8,#22D38E 55%,#1FBFA0);color:#04140D;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.bar{background:rgba(148,163,184,.1)}

/* Menu samping: lebih ringan, item aktif tenang dan jelas */
.side{background:linear-gradient(180deg,rgba(11,16,23,.92),rgba(8,12,18,.92));border-right:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:22px 14px}
.admin .side{background:linear-gradient(180deg,rgba(11,15,21,.95),rgba(7,10,15,.95))}
.side nav{gap:2px}
.side nav a{color:#A9B4C4;border-radius:11px}
.side nav a svg{opacity:.7;transition:opacity .15s,color .15s}
.side nav a:hover{background:rgba(148,163,184,.07);color:var(--text)}
.side nav a:hover svg{opacity:1}
.side nav a.on{background:linear-gradient(90deg,rgba(46,229,157,.13),rgba(46,229,157,.03));color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(46,229,157,.16)}
.side nav a.on svg{color:var(--green);opacity:1;filter:none}
.side nav a.on::before{left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(46,229,157,.7)}
.side nav .nav-sec{color:#5D6A7D;font-size:10px;letter-spacing:.18em;padding:18px 12px 8px}
.side nav a .tagp{font-size:10px;padding:2px 7px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(46,229,157,.25)}
.side nav a .tagp.pro{box-shadow:inset 0 0 0 1px rgba(255,122,89,.3)}
.side nav a .tagp.soon{box-shadow:inset 0 0 0 1px var(--line2)}
.plan-box{border-radius:16px;padding:14px 14px 12px}
.admin-tag{border-color:rgba(75,163,245,.35);color:var(--blue);background:rgba(75,163,245,.08)}

/* Isi halaman: sedikit lebih lega */
.main{padding:34px 44px 72px}
.main-inner{max-width:1140px;gap:24px}

/* Header HP: tombol menu dengan ikon garis */
.side-toggle{background:rgba(7,11,17,.82);border-bottom:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.side-toggle button{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:12px;padding:8px 13px}
.side-toggle button::before{content:'';width:15px;height:10px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
@media(max-width:900px){
  .main{padding:22px 16px 56px}
  h1{font-size:26px}
  .side{background:#0A0F16}
}
@media(max-width:640px){.card{border-radius:18px}}

/* Header publik: kaca lebih bersih */
.pub-head{background:rgba(7,11,17,.55)}
.pub-head.scrolled{background:rgba(7,11,17,.86);border-bottom-color:var(--line)}
.pub-links{background:rgba(255,255,255,.03);border-color:var(--line)}
.term{background:var(--surface),var(--card);border-color:var(--line2);box-shadow:var(--edge),0 40px 90px -30px rgba(0,0,0,.75)}
.plan{background:var(--surface),var(--card);border-color:var(--line);border-radius:20px;box-shadow:var(--edge)}

/* Menu samping mengambang: panel bulat terpisah dari tepi layar (PC) */
@media(min-width:901px){
  .shell{padding-left:0}
  .side{margin:14px 0 14px 14px;height:calc(100vh - 28px);top:14px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--edge),0 30px 60px -30px rgba(0,0,0,.8);width:248px}
  .side nav a.on::before{left:-14px}
  .main{padding-top:30px}
}
/* Kepala halaman: garis tipis bercahaya di bawah judul */
.page-head{position:relative;padding-bottom:20px}
.page-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(46,229,157,.4),rgba(148,163,184,.12) 35%,transparent)}
/* HP: tab penyaring turun ke baris sendiri supaya semua pilihan terlihat (dulu "Perlu perhatian" terpotong) */
@media(max-width:640px){.card-head{flex-wrap:wrap}.card-head>.tabs{width:100%;justify-content:space-between}}

/* Menu samping di layar PC yang pendek (laptop 768px): jarak diperingkas supaya semua menu muat tanpa digulir.
   Posisi gulir juga diingat antar halaman oleh public/js/menu.js. */
@media(min-width:901px) and (max-height:860px){
  .side{padding:12px 12px;margin:10px 0 10px 10px;height:calc(100vh - 20px);top:10px}
  .side .brand{padding-bottom:8px}
  .side nav{gap:1px}
  .side nav a{padding:4px 12px;font-size:13.5px;line-height:1.3}
  .side nav .nav-sec{padding:9px 12px 4px}
  .side nav .nav-sec:first-child{padding-top:2px}
  .side .foot{padding-top:8px;gap:6px}
  .side .plan-box{padding:8px 11px}
  .side .plan-box .bar{margin:6px 0}
  .side .foot .btn-sm{padding-top:5px;padding-bottom:5px}
  .admin .side .row{padding-bottom:12px!important}
}