/* Latar luar angkasa + polesan permukaan. Dimuat paling akhir agar menimpa tema dasar.
   Kanvas #space-bg (z-index:-1) tidak membuat stacking context baru bagi sidebar/modal/toast. */
#space-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: -1; pointer-events: none; display: block; max-width: none; border: 0; margin: 0; padding: 0; transform: translate3d(0, 0, 0); contain: strict; }
html, body { min-height: 100%; }
body { background-color: transparent !important; }
@supports (overflow: clip) { html { overflow-x: clip; } }

/* Permukaan semi-transparan: latar tampak di sela-sela, teks tetap kontras tinggi */
.card, .stat-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--silver) 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--border) 85%, var(--blue));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--silver) 7%, transparent);
}
.sidebar { background: color-mix(in srgb, var(--bg-2) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Sebagai drawer di HP, sidebar harus solid: konten di belakangnya tidak boleh tembus. */
@media (max-width: 760px) {
  .sidebar { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar { background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.app-footer { background: color-mix(in srgb, var(--bg) 55%, transparent); }

.lw-hero {
  background:
    radial-gradient(ellipse at 82% 42%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--bg-2) 50%, transparent));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--silver) 9%, transparent);
}
.lw-feature-card, .lw-risk-notice { background: color-mix(in srgb, var(--surface) 78%, transparent); }
body.is-login .login-screen { background: transparent; }

/* Polesan tipografi merek (tema gelap saja) */
:root:not([data-theme="light"]) .brand-copy strong {
  background: linear-gradient(90deg, #f8fbff, #9fbbe3); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-list a.active { box-shadow: inset 2px 0 0 var(--blue), inset 0 0 0 1px color-mix(in srgb, var(--silver) 8%, transparent); }

@media (prefers-reduced-transparency: reduce) {
  .card, .stat-card, .sidebar, .topbar, .lw-hero, .lw-feature-card, .lw-risk-notice { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar, .sidebar { background: var(--bg-2); }
}