/* ───────────────────────────────────────────────────────────────────────────
   Sakura Bloom UI — tokens & komponen dasar (plain CSS, framework-agnostic)
   Gaya: kaca pastel yang manis & mengkilap ("candy glass"), gradient lavender→sakura
   yang berani, kartu KPI berikon dengan orb glow, kelopak sakura berjatuhan.
   Disarikan dari assets/examples/dashboard.html & donation-alert.html.

   Kontrol: <html data-theme="dark|light">. Warna per kartu/komponen lewat
   style="--accent: var(--mint)" (default lavender).
   Font: Plus Jakarta Sans (400–800) + JetBrains Mono (400–600).
   ─────────────────────────────────────────────────────────────────────────── */

/* ───── Section: Token tema dark (default) ───── */
:root {
  color-scheme: dark;
  --bg: #14111d;
  --bg-2: #1b1628;
  --text: #f1ecfa;
  --muted: #a69dbd;
  --faint: #6f6787;

  /* Kaca: isi putih tipis + border putih + rim atas tegas (glossy) */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.11);
  --rim: rgba(255, 255, 255, 0.16);
  --shadow: rgba(4, 2, 12, 0.45);
  --track: rgba(255, 255, 255, 0.08);
  --grid: rgba(255, 255, 255, 0.06);
  --well: rgba(10, 8, 18, 0.35); /* area dalam: log, kode, textarea */

  /* Palet: lavender & sakura lebih muda/manis + pendamping */
  --lav: #c6b6ff;
  --lav-deep: #9d86f5;
  --sakura: #ffb3d1;
  --sakura-deep: #f27fb0;
  --mint: #9eefc8;
  --amber: #ffd59a;
  --rose: #ff9fb0;
  --sky: #a9d4ff;

  /* Latar ambient */
  --blob-a: rgba(157, 134, 245, 0.42);
  --blob-b: rgba(242, 127, 176, 0.32);
  --blob-c: rgba(120, 170, 255, 0.18);

  /* Gradient tanda tangan */
  --bloom: linear-gradient(90deg, var(--lav), var(--sakura));
  --bloom-diag: linear-gradient(140deg, var(--lav), var(--sakura));

  --radius-panel: 22px;
  --radius-card: 16px;
  --radius-ctl: 12px;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ───── Section: Token tema light (lavender-pink susu) ───── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f0fb;
  --bg-2: #fbf4f8;
  --text: #2a2140;
  --muted: #6c6385;
  --faint: #9d95b3;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --rim: rgba(255, 255, 255, 0.95);
  --shadow: rgba(110, 86, 160, 0.16);
  --track: rgba(80, 60, 130, 0.1);
  --grid: rgba(80, 60, 130, 0.08);
  --well: rgba(255, 255, 255, 0.45);
  /* Warna digelapkan agar terbaca di latar terang */
  --lav: #7b63e0;
  --lav-deep: #6a50d6;
  --sakura: #d9558e;
  --sakura-deep: #c63f7a;
  --mint: #1f9a68;
  --amber: #b9741a;
  --rose: #d23f5c;
  --sky: #2f7fd0;
  --blob-a: rgba(186, 166, 255, 0.55);
  --blob-b: rgba(255, 179, 209, 0.55);
  --blob-c: rgba(169, 212, 255, 0.4);
}

/* ───── Section: Dasar ───── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(120% 90% at 10% 0%, var(--bg-2), var(--bg) 60%);
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; }

/* ───── Section: Latar ambient (blob + kelopak) ───── */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); transition: background 0.5s ease; }
.blob.a { width: 520px; height: 520px; top: -160px; left: -120px; background: var(--blob-a); animation: bloom-drift 22s ease-in-out infinite alternate; }
.blob.b { width: 460px; height: 460px; top: 30%; right: -140px; background: var(--blob-b); animation: bloom-drift 26s ease-in-out infinite alternate-reverse; }
.blob.c { width: 420px; height: 420px; bottom: -180px; left: 30%; background: var(--blob-c); animation: bloom-drift 30s ease-in-out infinite alternate; }
@keyframes bloom-drift { to { transform: translate(60px, 40px) scale(1.08); } }

/* Kelopak sakura: dibuat via JS (lihat petals.js), jatuh miring sambil berputar */
.petal {
  position: absolute; top: -20px; width: 12px; height: 10px;
  background: linear-gradient(135deg, var(--sakura), transparent 140%);
  border-radius: 12px 1px 12px 1px; opacity: 0.45;
  animation: bloom-fall linear infinite;
}
@keyframes bloom-fall {
  0% { transform: translate(0, -20px) rotate(0deg); }
  100% { transform: translate(-120px, 110vh) rotate(540deg); }
}
/* Konten di atas ambient */
.wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }

/* ───── Section: Kaca ───── */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 var(--rim), 0 12px 36px -8px var(--shadow);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Tombol ikon persegi-bulat & elemen "pil" */
.icon-btn {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text);
  box-shadow: inset 0 1px 0 var(--rim);
  transition: transform 0.2s ease, background 0.3s ease;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; }

.live {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--muted); font-size: 12.5px;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: bloom-pulse 2s infinite; }
@keyframes bloom-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 70%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* Tile logo gradient (brand) */
.logo-tile {
  width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--bloom-diag); color: #fff;
  box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--sakura-deep) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ───── Section: Kartu KPI (ikon + orb glow pojok) ───── */
.kpi { padding: 18px 18px 16px; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; }
.kpi::after {
  content: ""; position: absolute; width: 140px; height: 140px; right: -50px; top: -60px; border-radius: 50%;
  background: var(--accent, var(--lav)); opacity: 0.13; filter: blur(30px); pointer-events: none;
}
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.kpi-icon {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--lav)) 18%, transparent); color: var(--accent, var(--lav));
}
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-value { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-foot { margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 12.5px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); display: inline-block; }

/* Bar & ring progres bergradient */
.bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 12px; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--bloom); transition: width 0.6s ease; }
.ring { width: 62px; height: 62px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: var(--track); }
.ring .fg { stroke: url(#bloomGrad); stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }

/* Angka hero bergradient (dipakai hemat: 1 per layar/kartu) */
.bloom-text {
  background: linear-gradient(95deg, var(--lav-deep), var(--sakura-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ───── Section: Kartu konten & kontrol ───── */
.card { padding: 18px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.count { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--lav) 20%, transparent); color: var(--lav); }

.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--track); gap: 2px; }
.seg button {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 9px; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--text); box-shadow: inset 0 1px 0 var(--rim), 0 2px 8px var(--shadow); }

.chip {
  border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text); font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; letter-spacing: 0.04em; background: color-mix(in srgb, var(--accent, var(--sakura)) 22%, transparent); color: var(--accent, var(--sakura)); }

.search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border-radius: var(--radius-ctl);
  background: var(--track); color: var(--muted); min-width: 0;
}
.search input { border: 0; background: none; color: var(--text); font: inherit; outline: none; width: 100%; min-width: 0; }
.search input::placeholder { color: var(--faint); }

/* Baris list: hover menjadi kaca */
.row-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; transition: background 0.2s; }
.row-item:hover { background: var(--glass-strong); }

/* Area dalam (log/kode) */
.well { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; background: var(--well); border: 1px solid var(--glass-border); border-radius: 16px; padding: 12px 14px; overflow: auto; }
.lvl { font-weight: 600; font-size: 11px; padding: 0 6px; border-radius: 5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Toast/tooltip kaca */
.glass-pop {
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 8px 20px var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ───── Section: Varian "kaca susu" (overlay stream / kartu sorotan) ─────
   Kartu terang hampir opak, teks ungu tua → terbaca di atas game apa pun. */
.milk-card {
  --ink: #2f1d47; --ink-soft: #4f3a68; --ink-mute: #7a6592;
  position: relative; overflow: hidden; border-radius: 24px; padding: 18px 20px 20px; color: var(--ink);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(205, 188, 255, 0.55), transparent 58%),
    radial-gradient(110% 100% at 100% 100%, rgba(255, 186, 214, 0.6), transparent 60%),
    linear-gradient(145deg, rgba(247, 241, 255, 0.9), rgba(255, 239, 247, 0.9));
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(150, 110, 200, 0.22),
    0 0 0 1px rgba(70, 35, 110, 0.22),
    0 18px 36px -12px rgba(38, 16, 66, 0.6),
    0 4px 10px -2px rgba(38, 16, 66, 0.25);
}
/* Halo pastel di belakang kartu (pasang di pembungkus .halo) */
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; inset: -14px -10px -18px; border-radius: 34px; z-index: -1; filter: blur(18px);
  background:
    radial-gradient(60% 70% at 18% 30%, rgba(196, 178, 255, 0.55), transparent 70%),
    radial-gradient(60% 70% at 85% 75%, rgba(255, 182, 210, 0.55), transparent 70%);
  animation: bloom-halo 3.2s ease-in-out infinite alternate;
}
@keyframes bloom-halo { from { opacity: 0.75; } to { opacity: 1; } }
/* Kilau yang menyapu sekali saat muncul */
.sheen::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg); animation: bloom-sheen 1.25s 0.45s ease-out both;
}
@keyframes bloom-sheen { to { left: 125%; } }

/* ───── Section: Animasi masuk & reduced motion ───── */
@keyframes bloom-enter {
  0% { opacity: 0; transform: translateY(22px) scale(0.92); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes bloom-leave { to { opacity: 0; transform: translateY(-14px) scale(0.96); filter: blur(4px); } }
@keyframes bloom-pop { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: none; } }
@keyframes bloom-slide { from { opacity: 0; transform: translateY(4px); } }
.enter { animation: bloom-enter 0.7s cubic-bezier(0.2, 1.25, 0.35, 1) both; }
.leave { animation: bloom-leave 0.5s cubic-bezier(0.5, 0, 0.75, 0.2) both; }
.pop { animation: bloom-pop 0.5s 0.25s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.slide-in { animation: bloom-slide 0.35s ease; }

/* DIUBAH untuk vyllenn-paste: aturan "kurangi gerak" hanya berlaku bila mode gerak
   FrostedGlass bukan "full" (Windows USER melaporkan reduce → tanpa ini semua tampak mati). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-fg-motion="full"]) *, :root:not([data-fg-motion="full"]) *::before, :root:not([data-fg-motion="full"]) *::after { animation: none !important; transition: none !important; }
  :root:not([data-fg-motion="full"]) .petal { display: none; }
}
:root[data-fg-motion="reduced"] *, :root[data-fg-motion="reduced"] *::before, :root[data-fg-motion="reduced"] *::after { animation: none !important; transition: none !important; }
:root[data-fg-motion="reduced"] .petal { display: none; }