/* Jejep - tema Liquid Glass. Admin = teal, Membership = indigo. Dimuat paling akhir. */
:root {
  --jx-a: #2dd4bf; --jx-a2: #22d3ee; --jx-ah: #5eead4; --jx-soft: rgba(45,212,191,.18);
  --jx-b1: rgba(45,212,191,.42); --jx-b2: rgba(56,189,248,.40); --jx-b3: rgba(99,102,241,.38);
  --jx-bg: #06141c;
  --jx-glass: rgba(255,255,255,.07); --jx-glass2: rgba(255,255,255,.11);
  --jx-line: rgba(255,255,255,.14); --jx-text: #f1f5f9; --jx-mute: #a8b5c7;
}
html[data-skin="member"] {
  --jx-a: #a78bfa; --jx-a2: #818cf8; --jx-ah: #c4b5fd; --jx-soft: rgba(167,139,250,.20);
  --jx-b1: rgba(139,92,246,.45); --jx-b2: rgba(99,102,241,.40); --jx-b3: rgba(236,72,153,.28);
  --jx-bg: #0c0a1c;
}
html { background: var(--jx-bg) !important; }
body { background: transparent !important; color: var(--jx-mute); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 480px at 8% 4%, var(--jx-b1), transparent 62%),
    radial-gradient(600px 480px at 94% 10%, var(--jx-b2), transparent 62%),
    radial-gradient(700px 520px at 72% 100%, var(--jx-b3), transparent 62%);
}
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--jx-a) !important; }

/* permukaan kaca */
.glass-panel, #sidebar, #customModal > div, #editMemberModal > div, #loginScreen > div, #authScreen > div {
  background: var(--jx-glass) !important; border: 1px solid var(--jx-line) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20) !important;
  border-radius: 18px;
}
#sidebar { border-radius: 0; border-width: 0 1px 0 0 !important; background: rgba(8,16,24,.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
html[data-skin="member"] #sidebar { background: rgba(14,10,32,.64) !important; }
header.sticky, header.md\:flex, main > header {
  background: rgba(8,16,24,.55) !important; border-color: var(--jx-line) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#loginScreen, #authScreen { background: rgba(4,10,16,.78) !important; }
#mobileOverlay, #customModal, #editMemberModal { background: rgba(2,6,12,.62) !important; }

/* teks */
.text-white { color: var(--jx-text) !important; }
.text-slate-400, .text-slate-500, .text-slate-600 { color: var(--jx-mute) !important; }
.text-netflix { color: var(--jx-a) !important; }

/* input */
.input-dark, input.input-dark, select.input-dark, textarea.input-dark {
  background: rgba(255,255,255,.08) !important; border: 1px solid var(--jx-line) !important;
  color: var(--jx-text) !important; border-radius: 12px !important;
}
.input-dark:focus { border-color: var(--jx-a) !important; box-shadow: 0 0 0 3px var(--jx-soft) !important; }
.input-dark::placeholder { color: rgba(203,213,225,.55); }
select.input-dark option { background: #0f1b26; color: #f1f5f9; }

/* tombol utama */
.btn-netflix, .bg-netflix {
  background: linear-gradient(135deg, var(--jx-a), var(--jx-a2)) !important; color: #04121a !important;
  border: 0 !important; box-shadow: 0 6px 18px var(--jx-soft), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.btn-netflix:hover { filter: brightness(1.08); }
.border-l-netflix { border-left-color: var(--jx-a) !important; }

/* sidebar */
.sidebar-item { color: var(--jx-mute) !important; border-radius: 12px !important; }
.sidebar-item:hover { background: rgba(255,255,255,.08) !important; color: var(--jx-text) !important; }
.sidebar-item.active {
  background: var(--jx-soft) !important; color: var(--jx-ah) !important;
  box-shadow: inset 0 0 0 1px var(--jx-a) !important;
}
.sidebar-group { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(168,181,199,.75); padding: 0 8px; margin: 18px 0 8px; }
.sidebar-group:first-child { margin-top: 0; }
#sidebar nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* kartu gelap bawaan */
[class*="bg-[#111"], [class*="bg-[#0a0a0a"], [class*="bg-[#050505"], [class*="bg-[#1A1A1A"] {
  background-color: rgba(255,255,255,.07) !important;
}
[class*="border-[#222"], [class*="border-[#333"] { border-color: var(--jx-line) !important; }
table { color: var(--jx-text); }
.tab-content { animation-duration: .25s; }
@media (max-width: 768px) { #sidebar { width: min(290px, 84vw) !important; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* kartu statistik + banner */
.stat-card {
  background: var(--jx-glass) !important; border: 1px solid var(--jx-line) !important; border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.hero-banner {
  background:
    linear-gradient(115deg, rgba(6,20,28,.86) 25%, rgba(6,20,28,.35) 100%),
    url('../background.png') center/cover !important;
  border: 1px solid var(--jx-line) !important; border-radius: 22px !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
html[data-skin="member"] .hero-banner {
  background: linear-gradient(115deg, rgba(14,10,32,.88) 25%, rgba(14,10,32,.35) 100%), url('../background.png') center/cover !important;
}
.hero-glow { background: var(--jx-a) !important; opacity: .28; }
.n-watermark { opacity: .10 !important; filter: grayscale(1) brightness(2); }

/* LOGIN GLASS */
#loginScreen, #authScreen {
  background:
    radial-gradient(620px 460px at 12% 8%, var(--jx-b1), transparent 62%),
    radial-gradient(560px 460px at 92% 14%, var(--jx-b2), transparent 62%),
    radial-gradient(640px 480px at 70% 100%, var(--jx-b3), transparent 62%),
    var(--jx-bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#loginScreen > div, #authScreen > div {
  background: rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border-radius: 24px !important;
}
#loginScreen img, #authScreen img { filter: drop-shadow(0 0 14px var(--jx-soft)); }
#loginScreen .bg-netflix\/20, #authScreen .bg-netflix\/20 { background: var(--jx-a) !important; opacity: .25; }