/* ============================================================
   THEMES — 5 tema + dekorasi langit
   ============================================================ */

/* ============ MALAM ============ */
body.theme-malam{
  --bg:#0a0e27;--sur:#141a3d;--bd:#2a3160;--tx:#e8ecff;--mt:#8894c9;
  --pr:#6366f1;--wr:#fbbf24;--dg:#ef4444;--ok:#10b981;--pu:#a855f7;
  background:linear-gradient(180deg,#0a0e27 0%,#1a1f4a 50%,#0f1330 100%)!important;
  background-attachment:fixed;min-height:100vh;
}
body.theme-malam::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 60% 70%,#fff,transparent),
    radial-gradient(1px 1px at 40% 90%,#fff,transparent),
    radial-gradient(2px 2px at 80% 20%,#fff,transparent),
    radial-gradient(1px 1px at 10% 60%,#fff,transparent),
    radial-gradient(1px 1px at 90% 80%,#fff,transparent),
    radial-gradient(2px 2px at 55% 15%,#fff,transparent),
    radial-gradient(1px 1px at 30% 50%,#fff,transparent),
    radial-gradient(1px 1px at 70% 40%,#fff,transparent),
    radial-gradient(1px 1px at 15% 85%,#fff,transparent);
  background-size:200% 200%;
  animation:twinkle 4s ease-in-out infinite alternate;
  opacity:.7;
}
@keyframes twinkle{
  0%{background-position:0 0;opacity:.5}
  100%{background-position:100% 100%;opacity:.9}
}
body.theme-malam::after{
  content:'';position:fixed;top:90px;right:22px;
  width:62px;height:62px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 30% 30%,#fef3c7 0%,#fcd34d 55%,#f59e0b 100%);
  box-shadow:0 0 40px 12px rgba(252,211,77,.35),
    inset -8px -6px 0 -1px rgba(180,130,20,.35),
    inset 6px 10px 0 -2px rgba(180,130,20,.25);
}
body.theme-malam .tb{background:rgba(10,14,39,.9)}
body.theme-malam .bn{background:#141a3d;border-top-color:#2a3160}

/* ============ SIANG ============ */
body.theme-siang{
  --bg:#e0f2fe;--sur:#fff;--bd:#bae6fd;--tx:#0c4a6e;--mt:#0369a1;
  --pr:#0284c7;--wr:#ea580c;--dg:#dc2626;--ok:#16a34a;--pu:#7c3aed;
  background:linear-gradient(180deg,#87ceeb 0%,#bae6fd 40%,#e0f2fe 100%)!important;
  background-attachment:fixed;min-height:100vh;
}
body.theme-siang::before{
  content:'';position:fixed;top:100px;left:-40px;right:-40px;height:180px;
  pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 80px 30px at 15% 50%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(ellipse 60px 25px at 25% 60%,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(ellipse 100px 35px at 55% 40%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(ellipse 70px 28px at 70% 55%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(ellipse 90px 32px at 90% 45%,rgba(255,255,255,.8),transparent 70%);
  animation:cloudDrift 30s linear infinite;filter:blur(2px);
}
@keyframes cloudDrift{
  0%{transform:translateX(-40px)}
  50%{transform:translateX(40px)}
  100%{transform:translateX(-40px)}
}
body.theme-siang::after{
  content:'';position:fixed;top:60px;right:30px;
  width:70px;height:70px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 40% 40%,#fef9c3 0%,#fde047 50%,#facc15 100%);
  box-shadow:0 0 60px 20px rgba(250,204,21,.55),
             0 0 100px 40px rgba(250,204,21,.25);
  animation:sunPulse 3s ease-in-out infinite alternate;
}
@keyframes sunPulse{
  0%{box-shadow:0 0 60px 20px rgba(250,204,21,.55),0 0 100px 40px rgba(250,204,21,.25)}
  100%{box-shadow:0 0 80px 25px rgba(250,204,21,.7),0 0 130px 50px rgba(250,204,21,.35)}
}
body.theme-siang .tb{background:rgba(2,132,199,.9)}
body.theme-siang .bn{background:#fff;border-top-color:#bae6fd}

/* ============ PAGI ============ */
body.theme-pagi{
  --bg:#fff7ed;--sur:#fffbf5;--bd:#fed7aa;--tx:#7c2d12;--mt:#c2410c;
  --pr:#ea580c;--wr:#f59e0b;--dg:#dc2626;--ok:#16a34a;--pu:#a855f7;
  background:linear-gradient(180deg,#fef3c7 0%,#fed7aa 30%,#fecaca 60%,#fde68a 100%)!important;
  background-attachment:fixed;min-height:100vh;
}
body.theme-pagi::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 50% 85%,rgba(251,191,36,.5) 0%,transparent 50%),
    radial-gradient(circle at 50% 90%,rgba(249,115,22,.4) 0%,transparent 60%);
  animation:sunrise 8s ease-in-out infinite alternate;
}
@keyframes sunrise{
  0%{transform:translateY(0);opacity:.7}
  100%{transform:translateY(-20px);opacity:1}
}
body.theme-pagi::after{
  content:'';position:fixed;bottom:-30px;left:50%;
  transform:translateX(-50%);width:140px;height:140px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 50% 50%,#fef08a 0%,#fbbf24 60%,#f97316 100%);
  box-shadow:0 0 80px 40px rgba(251,191,36,.5),
             0 0 160px 80px rgba(249,115,22,.3);
}
body.theme-pagi .tb{background:rgba(234,88,12,.9)}
body.theme-pagi .bn{background:#fffbf5;border-top-color:#fed7aa}

/* ============ SORE ============ */
body.theme-sore{
  --bg:#1a0b2e;--sur:#2d1b4e;--bd:#4c2c7a;--tx:#f5e6ff;--mt:#c4a0e0;
  --pr:#d946ef;--wr:#fbbf24;--dg:#ef4444;--ok:#10b981;--pu:#a855f7;
  background:linear-gradient(180deg,#1a0b2e 0%,#4c1d95 30%,#7c2d12 60%,#ea580c 100%)!important;
  background-attachment:fixed;min-height:100vh;
}
body.theme-sore::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 70% 80%,rgba(251,146,60,.6) 0%,transparent 40%),
    radial-gradient(circle at 50% 90%,rgba(239,68,68,.5) 0%,transparent 50%);
  animation:sunsetGlow 6s ease-in-out infinite alternate;
}
@keyframes sunsetGlow{0%{opacity:.7}100%{opacity:1}}
body.theme-sore::after{
  content:'';position:fixed;bottom:-20px;left:50%;
  transform:translateX(-50%);width:180px;height:180px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 50% 50%,#fef08a 0%,#fb923c 40%,#dc2626 100%);
  box-shadow:0 0 100px 50px rgba(251,146,60,.6),
             0 0 200px 100px rgba(220,38,38,.4);
  opacity:.85;
}
body.theme-sore .tb{background:rgba(76,29,149,.9)}
body.theme-sore .bn{background:#2d1b4e;border-top-color:#4c2c7a}

/* ============ DEKORASI ============ */
.decor{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}

/* MALAM — bintang jatuh */
body.theme-malam .decor::before{
  content:'';position:absolute;top:-10%;left:-10%;width:2px;height:2px;
  background:white;border-radius:50%;
  box-shadow:
    0 0 6px 2px rgba(255,255,255,.8),
    30vw 20vh 0 0 white, 60vw 10vh 0 0 white, 80vw 30vh 0 0 white,
    15vw 45vh 0 0 white, 45vw 55vh 0 0 white, 70vw 70vh 0 0 white,
    25vw 80vh 0 0 white, 90vw 50vh 0 0 white;
  animation:shootingStar 12s linear infinite;
}
@keyframes shootingStar{
  0%{transform:translate(0,0) scale(0);opacity:0}
  10%{transform:translate(30vw,30vh) scale(1);opacity:1}
  20%{transform:translate(60vw,60vh) scale(.5);opacity:.5}
  30%,100%{transform:translate(80vw,80vh) scale(0);opacity:0}
}
body.theme-malam .decor::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:120px;
  background:linear-gradient(to top,rgba(99,102,241,.15) 0%,transparent 100%);
  animation:malamFog 8s ease-in-out infinite alternate;
}
@keyframes malamFog{
  0%{opacity:.4;transform:translateY(0)}
  100%{opacity:.8;transform:translateY(-15px)}
}

/* SIANG — awan + burung */
body.theme-siang .decor::before{
  content:'';position:absolute;top:25%;left:-100px;
  width:80px;height:30px;border-radius:60px;
  background:rgba(255,255,255,.7);
  box-shadow:
    0 0 20px 4px rgba(255,255,255,.5),
    30px -10px 0 -5px rgba(255,255,255,.8),
    60px 5px 0 -3px rgba(255,255,255,.75);
  animation:awanKecil 20s linear infinite;
}
@keyframes awanKecil{
  0%{transform:translateX(0) scale(1);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translateX(calc(100vw + 200px)) scale(.8);opacity:0}
}
body.theme-siang .decor::after{
  content:'🕊️';position:absolute;top:15%;right:-40px;font-size:24px;
  animation:burungTerbang 18s linear infinite;
}
@keyframes burungTerbang{
  0%{transform:translateX(0) translateY(0) rotate(-5deg);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(-50vw) translateY(-40px) rotate(5deg);opacity:1}
  90%{opacity:1}
  100%{transform:translateX(-100vw) translateY(20px) rotate(-5deg);opacity:0}
}

/* PAGI — embun + burung */
body.theme-pagi .decor::before{
  content:'';position:absolute;top:30%;left:10%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff 0%,#fef3c7 50%,#fcd34d 100%);
  box-shadow:
    15vw 20vh 0 0 rgba(254,243,199,.8),
    35vw 10vh 0 2px rgba(254,243,199,.6),
    60vw 30vh 0 0 rgba(254,243,199,.7),
    75vw 5vh 0 3px rgba(254,243,199,.5),
    20vw 50vh 0 0 rgba(254,243,199,.6),
    55vw 60vh 0 2px rgba(254,243,199,.5),
    85vw 45vh 0 0 rgba(254,243,199,.7);
  animation:embun 5s ease-in-out infinite alternate;
}
@keyframes embun{
  0%{opacity:.5;transform:scale(.8)}
  100%{opacity:1;transform:scale(1.2)}
}
body.theme-pagi .decor::after{
  content:'🐦';position:absolute;top:20%;left:-40px;font-size:22px;
  animation:burungPagi 14s linear infinite;
}
@keyframes burungPagi{
  0%{transform:translateX(0) translateY(0);opacity:0}
  10%{opacity:1}
  50%{transform:translateX(50vw) translateY(-30px);opacity:1}
  90%{opacity:1}
  100%{transform:translateX(110vw) translateY(10px);opacity:0}
}

/* SORE — awan senja + bintang */
body.theme-sore .decor::before{
  content:'';position:absolute;top:10%;left:20%;width:100px;height:35px;border-radius:60px;
  background:rgba(217,70,239,.25);
  box-shadow:
    40px -5px 0 -5px rgba(217,70,239,.3),
    80px 5px 0 -3px rgba(217,70,239,.28),
    20px 15px 0 -8px rgba(217,70,239,.35);
  animation:awanSenja 25s linear infinite;filter:blur(1px);
}
@keyframes awanSenja{
  0%{transform:translateX(0)}
  50%{transform:translateX(30vw)}
  100%{transform:translateX(0)}
}
body.theme-sore .decor::after{
  content:'';position:absolute;top:15%;right:15%;
  width:3px;height:3px;border-radius:50%;background:#fff;
  box-shadow:
    20px -10px 0 0 rgba(255,255,255,.9),
    60px 5px 0 -1px rgba(255,255,255,.7),
    -30px 20px 0 0 rgba(255,255,255,.8),
    100px 30px 0 0 rgba(255,255,255,.6),
    40px 50px 0 0 rgba(255,255,255,.7),
    150px 10px 0 1px rgba(255,255,255,.5),
    -60px 60px 0 0 rgba(255,255,255,.6);
  animation:bintangMuncul 4s ease-in-out infinite alternate;
}
@keyframes bintangMuncul{0%{opacity:.3}100%{opacity:1}}

/* Dashboard 4 kolom di layar lebar */
@media (min-width:600px){
  .sm{grid-template-columns:repeat(4,1fr)}
}