/* ============================================================
   BintzGE — THEME (tokens + shared chrome)
   Terang  : putih kebiruan + aksen cyan neon (acuan: GlowTeam Sites)
   Gelap   : navy pekat + aksen cyan neon
   Dimuat oleh SEMUA halaman (termasuk halaman game yang berdiri sendiri),
   jadi sidebar, tombol tutup & overlay selalu identik di mana-mana.
   ============================================================ */
:root {
  color-scheme: light;

  /* --- Aksen (terang) --- */
  --primary: #0b86a6;              /* teks/garis aksen, kontras 4.2:1 di atas putih */
  --primary-light: #22c7e6;
  --primary-rgb: 11,134,166;
  --primary-solid: #0b86a6;        /* latar tombol / elemen terisi (teks putih di atasnya) */
  --neon: #06c3e3;                 /* cyan neon: cincin, glow, garis dekorasi */
  --neon-rgb: 6,195,227;
  --neon-blue: #1c84e0;
  --neon-blue-rgb: 28,132,224;
  --neon-purple: #6d5df0;
  --accent: #06b6d4;
  --accent-rgb: 6,182,212;
  --on-primary: #ffffff;
  --grad: linear-gradient(135deg, #0b86a6 0%, #1c84e0 100%);
  --success: #12945a;
  --success-rgb: 18,148,90;
  --error: #d92d4b;
  --warning: #b7791f;

  /* --- Permukaan (terang) --- */
  --bg: #eaf3fd;
  --bg2: #e1eefb;
  --page-bg: linear-gradient(180deg, #f5fafe 0, #eaf3fd 280px, #e7f1fb 100%);
  --card-bg: #ffffff;
  --card-border: #d3e6f3;
  --tile-bg: linear-gradient(180deg, #f6fafe 0%, #e7f4fd 100%);
  --tile-border: #cfe5f3;
  --text: #152437;
  --text-muted: #5a7088;
  --sidebar-bg: #ffffff;
  --sidebar-text: #152437;
  --header-bg: #ffffff;
  --running-bg: #e3f5fb;
  --running-text: #0a6f8a;
  --running-border: #bfe4f0;
  --input-bg: #f3f9fe;
  --code-bg: #10243a;
  --code-text: #d7ecfb;
  --nav-label-bg: rgba(6,182,212,0.08);
  --nav-label-border: #cfe5f3;
  --shadow-card: 0 6px 22px rgba(30,100,170,0.08);
  --shadow-pop: 0 14px 40px rgba(20,80,140,0.18);
  --glow: 0 0 18px rgba(6,195,227,0.35);
  --overlay-bg: rgba(12,36,60,0.45);
  --radius: 22px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --primary: #22d3ee;
  --primary-light: #67e8f9;
  --primary-rgb: 34,211,238;
  --primary-solid: #0891b2;
  --neon: #00e5ff;
  --neon-rgb: 0,229,255;
  --neon-blue: #38bdf8;
  --neon-blue-rgb: 56,189,248;
  --neon-purple: #a78bfa;
  --accent: #00e5ff;
  --accent-rgb: 0,229,255;
  --on-primary: #ffffff;
  --grad: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
  --success: #34d399;
  --success-rgb: 52,211,153;
  --error: #ff6b81;
  --warning: #fbbf24;

  --bg: #06111f;
  --bg2: #0a1a2e;
  --page-bg: linear-gradient(180deg, #081a2f 0, #06111f 320px, #050e1a 100%);
  --card-bg: #0c1f36;
  --card-border: #17385a;
  --tile-bg: linear-gradient(180deg, #0f2540 0%, #0b1c32 100%);
  --tile-border: #1a3e63;
  --text: #e6f3ff;
  --text-muted: #8fabc4;
  --sidebar-bg: #08182b;
  --sidebar-text: #dcecfa;
  --header-bg: #0a1a2e;
  --running-bg: #0a2238;
  --running-text: #67e8f9;
  --running-border: #17456a;
  --input-bg: #0a1a2e;
  --code-bg: #04101d;
  --code-text: #d7ecfb;
  --nav-label-bg: rgba(34,211,238,0.08);
  --nav-label-border: #17385a;
  --shadow-card: 0 6px 24px rgba(0,0,0,0.35);
  --shadow-pop: 0 14px 40px rgba(0,0,0,0.55);
  --glow: 0 0 20px rgba(0,229,255,0.28);
  --overlay-bg: rgba(0,6,14,0.62);
}

/* ===== OVERLAY (dipakai sidebar & modal) ===== */
.overlay {
  position: fixed; inset: 0; background: var(--overlay-bg); z-index: 190;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }

/* ===== SIDEBAR — identik di semua halaman ===== */
.sidebar {
  position: fixed; top: 0; left: -300px; width: 286px; max-width: 86vw; height: 100%;
  background: var(--sidebar-bg); color: var(--sidebar-text);
  border-right: 1px solid var(--card-border);
  box-shadow: var(--shadow-pop);
  z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  transition: left .25s cubic-bezier(.4,0,.2,1);
  font-family: 'Manrope', system-ui, sans-serif;
  padding-bottom: 24px;
}
.sidebar.open { left: 0; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .45); border-radius: 4px; }
.sidebar-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1rem; background: var(--sidebar-bg);
  border-bottom: 1px solid var(--card-border);
}
.sidebar-logo {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--primary); letter-spacing: .2px;
}
.close-sidebar {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: var(--nav-label-bg); border: 1px solid var(--card-border); color: var(--text-muted);
  transition: color .15s, border-color .15s, transform .2s;
}
.close-sidebar:hover { color: var(--primary); border-color: var(--primary); transform: rotate(90deg); }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; padding: .7rem .7rem; }
.nav-link {
  display: flex; align-items: center; color: var(--sidebar-text); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.nav-link-inner {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .62rem .8rem; border-radius: 14px;
  border: 1px solid transparent; background: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-ico {
  width: 1.25em; text-align: center; flex: 0 0 auto; font-size: 1.02em;
  color: var(--text-muted); transition: color .15s ease;
}
.nav-link:hover .nav-link-inner { background: var(--nav-label-bg); border-color: var(--card-border); }
.nav-link:hover .nav-ico { color: var(--primary); }
.nav-link.active .nav-link-inner {
  background: var(--tile-bg); border-color: rgba(var(--primary-rgb), .38);
  color: var(--primary); font-weight: 700;
  box-shadow: 0 4px 14px rgba(var(--neon-rgb), .16);
}
.nav-link.active .nav-ico { color: var(--primary); }

/* ===== LOADING SCREEN (ikut tema, tampil singkat) ===== */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
  transition: opacity .25s ease;
}
#loading-screen.hidden { opacity: 0; pointer-events: none; }
.loading-content { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.loading-logo { width: 64px; height: 64px; border-radius: 16px; box-shadow: var(--glow); }
.loading-text { font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 1.2px; color: var(--text); text-align: center; }
.loading-bar { width: 220px; height: 5px; border-radius: 4px; background: rgba(var(--primary-rgb), .15); overflow: hidden; }
.loading-bar-fill { width: 0%; height: 100%; border-radius: 4px; background: var(--grad); transition: width .2s linear; }