/* =====================================================================
   Tema gelap ala Coolify — panel Sairipedia
   Latar #101010, permukaan #181818/#202020, garis #242424, teks putih &
   abu, aksen ungu (#6B16ED) untuk aksi utama, kuning (#FCD452) untuk ikon,
   angka statistik & penekanan. Font Inter + JetBrains Mono (angka).
   Token RGB di bawah dipakai tailwind.config (head.ejs), jadi kelas lama
   (slate-*, indigo-*, primary, dst) otomatis ikut tema ini.
   Dimuat SETELAH style.css.
   ===================================================================== */

:root {
  /* Mode terang (opsional, lewat tombol tema) */
  --c-bg: 250 250 250;
  --c-surface: 255 255 255;
  --c-surface2: 244 244 245;
  --c-line: 228 228 231;
  --c-line2: 212 212 216;
  --c-ink: 17 17 17;
  --c-ink2: 63 63 70;
  --c-muted: 82 82 91;
  --c-muted2: 113 113 122;
  --c-deep: 24 24 27;
  --c-hover: 239 239 241;

  --c-purple: 107 22 237;
  --c-purple-hover: 115 23 255;
  --c-purple-light: 107 22 237;
  --c-purple-soft: 216 200 255;
  --c-purple-tint: 245 240 255;
  --c-purple-tint2: 236 227 255;
  --c-purple-deep: 46 16 101;
  --c-purple-text: 107 22 237;

  --c-yellow: 252 212 82;
  --c-yellow-text: 161 98 7;
  --c-green: 34 197 94;
  --c-red: 239 68 68;

  --color-bg: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-textmain: var(--c-ink);
  --color-textmuted: var(--c-muted);
  --color-bordertone: var(--c-line);
}

[data-theme='dark'] {
  --c-bg: 16 16 16;          /* #101010 */
  --c-surface: 24 24 24;     /* #181818 */
  --c-surface2: 32 32 32;    /* #202020 */
  --c-line: 36 36 36;        /* #242424 */
  --c-line2: 50 50 50;       /* #323232 */
  --c-ink: 245 245 245;
  --c-ink2: 212 212 212;
  --c-muted: 163 163 163;    /* abu teks paragraf */
  --c-muted2: 115 115 115;
  --c-deep: 10 10 10;
  --c-hover: 40 40 40;

  --c-purple-light: 157 131 255;
  --c-purple-soft: 76 45 140;
  --c-purple-tint: 30 22 46;
  --c-purple-tint2: 40 28 64;
  --c-purple-deep: 46 16 101;
  --c-purple-text: 157 131 255;

  --c-yellow-text: 252 212 82;

  --color-bg: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-textmain: var(--c-ink);
  --color-textmuted: var(--c-muted);
  --color-bordertone: var(--c-line);
  color-scheme: dark;
}

/* ---------- Dasar ---------- */
body {
  background: rgb(var(--c-bg)) !important;
  color: rgb(var(--c-ink));
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3 { letter-spacing: -0.02em; }
::selection { background: rgb(var(--c-purple)); color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid rgb(var(--c-purple-light)) !important; outline-offset: 2px; border-radius: 4px; }
svg.lucide { stroke-width: 1.75; }

.blur-3xl, .blur-2xl, .blur-xl { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line2)); border: 2px solid rgb(var(--c-bg)); border-radius: 10px; }
.scroll-thin { scrollbar-color: rgb(var(--c-line2)) transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background-color: rgb(var(--c-line2)); }

.text-primary { color: rgb(var(--c-purple-text)) !important; }
.text-warning, .text-yellow { color: rgb(var(--c-yellow-text)) !important; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Tombol ---------- */
.btn,
a[class*="from-indigo-6"], button[class*="from-indigo-6"],
a.bg-primary, button.bg-primary,
button[type="submit"]:not([class*="bg-rose"]):not([class*="bg-emerald"]):not([class*="bg-white"]):not(.bg-transparent):not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
.btn { padding: 10px 16px; font-size: 14px; line-height: 1.25; white-space: normal; text-align: center; max-width: 100%; cursor: pointer; background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); border-color: rgb(var(--c-line)) !important; }
.btn-primary,
a[class*="from-indigo-6"], button[class*="from-indigo-6"],
a.bg-primary, button.bg-primary,
button[type="submit"]:not([class*="bg-rose"]):not([class*="bg-emerald"]):not([class*="bg-white"]):not(.bg-transparent):not(.btn) {
  background: rgb(var(--c-purple)) !important;
  color: #fff !important;
  border-color: rgb(var(--c-purple)) !important;
}
.btn-primary *, a.bg-primary *, button.bg-primary *, a[class*="from-indigo-6"] *, button[type="submit"] svg { color: inherit !important; }
.btn-primary:hover:not(:disabled), a.bg-primary:hover, button.bg-primary:hover:not(:disabled),
a[class*="from-indigo-6"]:hover, button[type="submit"]:hover:not(:disabled):not(.btn) {
  background: rgb(var(--c-purple-hover)) !important;
  border-color: rgb(var(--c-purple-hover)) !important;
}
.btn:not(.btn-primary):hover:not(:disabled) { background: rgb(var(--c-hover)); border-color: rgb(var(--c-line2)) !important; }
.btn:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); }
.btn-soft-success { background: rgb(var(--c-green) / 0.15); color: rgb(var(--c-green)); border-color: rgb(var(--c-green) / 0.3) !important; }
.btn-soft-warning { background: rgb(var(--c-yellow) / 0.15); color: rgb(var(--c-yellow-text)); border-color: rgb(var(--c-yellow) / 0.3) !important; }
.btn-white { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); }
.btn-ghost-white { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3) !important; }
button[class*="bg-rose-6"], a[class*="bg-rose-6"], button[class*="bg-rose-5"], a[class*="bg-rose-5"] {
  background: rgb(var(--c-red) / 0.12) !important;
  color: rgb(var(--c-red)) !important;
  border: 1px solid rgb(var(--c-red) / 0.35) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
button[class*="bg-rose-6"]:hover, a[class*="bg-rose-6"]:hover, button[class*="bg-rose-5"]:hover, a[class*="bg-rose-5"]:hover { background: rgb(var(--c-red) / 0.22) !important; }
span[class*="from-indigo-6"], div[class*="from-indigo-6"], span.bg-primary { background: rgb(var(--c-purple)) !important; }
span[class*="from-indigo-6"] svg, span.bg-primary svg { color: #fff !important; }

/* ---------- Navbar publik ---------- */
.site-nav { background: rgb(var(--c-bg) / 0.92); border-bottom: 1px solid rgb(var(--c-line)); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); }
.site-nav a.font-display { font-weight: 800 !important; font-size: 22px; letter-spacing: -0.03em; }
.site-nav-link { padding: 6px 2px; font-size: 14px; font-weight: 500; color: rgb(var(--c-muted)); transition: color 120ms ease; }
.site-nav-link:hover { color: rgb(var(--c-ink)); }
#publicNavMenu { background: rgb(var(--c-bg)) !important; border-top: 1px solid rgb(var(--c-line)) !important; border-bottom: 1px solid rgb(var(--c-line)); }
#publicNavMenu a:not(.bg-primary) { color: rgb(var(--c-ink2)); font-weight: 500; }
#publicNavMenu a.rounded { border-radius: 4px; }

/* ---------- Hero ---------- */
.hero, .auth-page { background: transparent; }
.auth-page { display: block; }
.hero-shape { display: none !important; }
.auth-page > .relative { width: 100%; }

.cf-hero { padding: 72px 0 40px; text-align: center; }
.cf-hero-title {
  font-size: clamp(38px, 7.2vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: rgb(var(--c-ink));
  text-wrap: balance;
}
.cf-dot { color: rgb(var(--c-yellow)); }
.cf-hero-sub { margin: 26px auto 0; max-width: 46rem; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.6; color: rgb(var(--c-muted)); }
.cf-hero-sub strong { display: block; margin-top: 4px; font-weight: 400; color: rgb(var(--c-ink)); }
.cf-hero-sub strong a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cf-hero-links { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.cf-hero-links a { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: rgb(var(--c-ink2)); transition: color 120ms ease; }
.cf-hero-links a:hover { color: rgb(var(--c-ink)); }
.cf-hero-links svg { width: 20px; height: 20px; color: rgb(var(--c-yellow)); }
.cf-hero-links a:last-child svg { color: rgb(var(--c-purple-light)); }

.cf-choice { margin: 48px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; max-width: 560px; }
.cf-choice-item { display: flex; flex-direction: column; align-items: center; }
.cf-choice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 14px;
  background: rgb(var(--c-surface2));
  color: rgb(var(--c-ink));
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 120ms ease;
}
.cf-choice-btn:hover { background: rgb(var(--c-hover)); }
.cf-choice-btn svg { width: 22px; height: 22px; color: rgb(var(--c-yellow)); }
.cf-stat { margin-top: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: rgb(var(--c-yellow-text)); }
.cf-stat-label { margin-top: 2px; font-size: 15px; color: rgb(var(--c-muted)); }

/* ---------- Section landing ---------- */
.section-block { padding: 64px 0; }
.section-tint { background: transparent; }
.section-head { max-width: 680px; margin: 0 auto; text-align: center; }
.section-pill, .cf-eyebrow {
  display: block;
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-purple-text));
  text-align: center;
}
.cf-eyebrow.is-muted { color: rgb(var(--c-muted)); font-size: clamp(20px, 3.2vw, 26px); }
.section-title { margin-top: 10px; font-size: clamp(40px, 7vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: rgb(var(--c-ink)); text-align: center; }
.section-title.text-left { text-align: left; }
.section-sub { margin-top: 16px; color: rgb(var(--c-muted)); font-size: 17px; line-height: 1.65; }

/* Kartu layanan = kartu sponsor besar bergaris ungu */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 28px 36px;
  background: linear-gradient(135deg, rgb(24 24 32) 0%, rgb(26 22 34) 60%, rgb(30 22 34) 100%);
  border: 2px solid rgb(var(--c-purple) / 0.35);
  border-radius: 6px;
  transition: border-color 150ms ease;
}
:root:not([data-theme='dark']) .service-card { background: linear-gradient(135deg, #fff 0%, #faf7ff 100%); }
.service-card:hover { border-color: rgb(var(--c-purple) / 0.75); }
.service-icon { width: 64px; height: 64px; display: grid; place-items: center; color: rgb(var(--c-yellow)); }
.service-icon svg { width: 52px !important; height: 52px !important; stroke-width: 1.5; }
.service-card h3 { font-size: clamp(28px, 4.6vw, 38px) !important; font-weight: 800 !important; letter-spacing: -0.03em; color: rgb(var(--c-ink)); }
.service-card p { max-width: 34ch; font-size: 15px !important; color: rgb(var(--c-muted)) !important; }
.service-card a { color: rgb(var(--c-yellow-text)) !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Daftar fitur (ikon kuning, judul putih, paragraf abu) */
.cf-features { max-width: 880px; margin: 40px auto 0; display: grid; gap: 64px; }
.cf-feature-title { display: flex; align-items: center; gap: 18px; font-size: clamp(24px, 4vw, 30px); font-weight: 500; letter-spacing: -0.015em; color: rgb(var(--c-ink)); }
.cf-feature-title svg { width: 30px; height: 30px; flex-shrink: 0; color: rgb(var(--c-yellow)); }
.cf-feature p { margin-top: 18px; font-size: clamp(16px, 2.3vw, 18px); line-height: 1.75; color: rgb(var(--c-muted)); max-width: 70ch; }
@media (min-width: 900px) { .cf-features { grid-template-columns: 1fr 1fr; gap: 56px 64px; max-width: 1080px; } }

/* (dipakai halaman lain) */
.feature-box { display: flex; gap: 16px; padding: 20px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.feature-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; color: rgb(var(--c-yellow)); }

/* Grid runtime = deretan logo sponsor (logo putih polos) */
.cf-logos { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
@media (min-width: 768px) { .cf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.runtime-box { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 4px; background: none; border: 0; }
.runtime-icon { width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; transition: filter 150ms ease, opacity 150ms ease; }
:root:not([data-theme='dark']) .runtime-icon { filter: brightness(0); }
.runtime-box:hover .runtime-icon { filter: none; opacity: 1; }
.runtime-name { font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -0.03em; color: rgb(var(--c-ink)); white-space: nowrap; }
.runtime-monogram { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgb(var(--c-ink)); color: rgb(var(--c-bg)); font-weight: 800; font-size: 15px; }
.runtime-invert-dark { }
@media (max-width: 420px) { .runtime-icon, .runtime-monogram { width: 30px; height: 30px; } .runtime-name { font-size: 19px; } }

/* ---------- Harga & kalkulator ---------- */
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.price-card.is-featured { border: 2px solid rgb(var(--c-purple)); }
.price-ribbon { position: absolute; top: -12px; right: 16px; padding: 3px 10px; background: rgb(var(--c-purple)); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 600; }
.price-name { font-size: 18px; font-weight: 600; color: rgb(var(--c-ink)); text-align: center; }
.price-amount { margin-top: 12px; text-align: center; padding-bottom: 20px; border-bottom: 1px solid rgb(var(--c-line)); }
.price-amount span { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: rgb(var(--c-ink)); }
.price-amount small { font-size: 14px; color: rgb(var(--c-muted)); }
.price-list { flex: 1; margin-top: 20px; display: grid; gap: 10px; font-size: 14px; color: rgb(var(--c-ink2)); }
.price-card .btn { margin-top: 26px !important; }

.calc-tabs { display: flex; gap: 4px; padding: 4px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.calc-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; font-size: 14px; font-weight: 600; color: rgb(var(--c-muted)); background: transparent; border-radius: 4px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.calc-tab:hover { color: rgb(var(--c-ink)); }
.calc-tab.is-on { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); }
.calc-tab.is-on svg { color: rgb(var(--c-yellow)); }
.calc-panel { margin-top: 16px; }
.calc-empty { padding: 20px; border: 1px dashed rgb(var(--c-line2)); border-radius: 6px; color: rgb(var(--c-muted)); text-align: center; }

.calc-product { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; color: rgb(var(--c-ink)); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.calc-product:hover { border-color: rgb(var(--c-line2)); background: rgb(var(--c-surface2)); }
.calc-product.is-on { border-color: rgb(var(--c-purple)); background: rgb(var(--c-purple-tint)); }
.calc-radio { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid rgb(var(--c-line2)); border-radius: 50%; display: grid; place-items: center; }
.calc-product.is-on .calc-radio { border-color: rgb(var(--c-purple-light)); }
.calc-product.is-on .calc-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c-purple-light)); }
.calc-product-name { display: block; font-size: 15px; font-weight: 600; }
.calc-product-spec { display: block; margin-top: 3px; font-size: 13px; color: rgb(var(--c-muted)); }
.calc-product-price { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: rgb(var(--c-yellow-text)); white-space: nowrap; }

.calc-slider { padding: 18px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.calc-slider + .calc-slider { margin-top: 12px; }
.calc-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.calc-slider-head span { display: inline-flex; align-items: center; gap: 8px; }
.calc-slider-head span svg { color: rgb(var(--c-yellow)); }
.calc-slider-head b { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: rgb(var(--c-yellow-text)); }

.calc-summary { position: sticky; top: 96px; padding: 26px; background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); border: 2px solid rgb(var(--c-purple) / 0.45); border-radius: 6px; }
.calc-summary-label { font-size: 14px; font-weight: 500; color: rgb(var(--c-muted)); }
.calc-total { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: clamp(32px, 6vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: rgb(var(--c-yellow-text)); overflow-wrap: anywhere; }
.calc-period { margin-top: 6px; font-size: 14px; color: rgb(var(--c-muted)); }
.calc-lines { margin-top: 20px; border-top: 1px solid rgb(var(--c-line)); }
.calc-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgb(var(--c-line)); font-size: 14px; }
.calc-lines span { color: rgb(var(--c-muted)); font-size: 14px; }
.calc-lines b { text-align: right; font-weight: 600; }
.calc-note { margin-top: 12px; font-size: 13px; color: rgb(var(--c-muted)); }
.calc-foot { margin-top: 14px; font-size: 13px; color: rgb(var(--c-muted)); text-align: center; }
@media (max-width: 1023px) { .calc-summary { position: static; } }

/* ---------- FAQ & CTA ---------- */
.cf-faq { border-top: 1px solid rgb(var(--c-line)); }
.cf-faq details { border-bottom: 1px solid rgb(var(--c-line)); }
.cf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; color: rgb(var(--c-ink)); }
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq summary svg { width: 20px; height: 20px; flex-shrink: 0; color: rgb(var(--c-yellow)); transition: transform 180ms ease; }
.cf-faq details[open] summary svg { transform: rotate(45deg); }
.cf-faq details p { padding: 0 2px 22px; font-size: 16px; line-height: 1.75; color: rgb(var(--c-muted)); max-width: 70ch; }

.cf-cta { margin: 24px 16px 88px; padding: 56px 24px; text-align: center; border: 2px solid rgb(var(--c-purple) / 0.35); border-radius: 6px; background: linear-gradient(135deg, rgb(24 24 32), rgb(30 22 34)); }
:root:not([data-theme='dark']) .cf-cta { background: linear-gradient(135deg, #fff, #faf7ff); }
.cf-cta h2 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: rgb(var(--c-ink)); }
.cf-cta p { margin: 14px auto 0; max-width: 40rem; font-size: 17px; line-height: 1.65; color: rgb(var(--c-muted)); }

/* Tombol melayang (pojok kanan bawah) */
.cf-float {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: rgb(var(--c-purple));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 30px -8px rgb(var(--c-purple) / 0.6);
  transition: background-color 120ms ease, opacity 200ms ease, transform 200ms ease;
}
.cf-float:hover { background: rgb(var(--c-purple-hover)); }
.cf-float.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ---------- Form masuk / daftar ---------- */
.trial-card { position: relative; background: rgb(var(--c-surface)) !important; border: 1px solid rgb(var(--c-line)); border-radius: 6px !important; box-shadow: none; }
.trial-card h2 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em; }
.trial-label { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; color: rgb(var(--c-ink2)); }
.trial-input {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  background: rgb(var(--c-surface2)) !important;
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 4px !important;
  color: rgb(var(--c-ink)) !important;
  font-size: 15px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.trial-input::placeholder { color: rgb(var(--c-muted2)); }
.trial-input:focus { border-color: rgb(var(--c-purple)) !important; box-shadow: 0 0 0 3px rgb(var(--c-purple) / 0.25) !important; }
.trial-card .relative > button { right: 8px !important; }

/* ---------- Popup notifikasi ---------- */
.nb-popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
.nb-popup.is-open { opacity: 1; pointer-events: auto; }
.nb-popup-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.65); }
.nb-popup-card { position: relative; width: 100%; max-width: 400px; padding: 28px 24px 24px; text-align: center; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 8px; box-shadow: 0 20px 50px -12px rgb(0 0 0 / 0.6); transform: translateY(12px) scale(0.98); transition: transform 200ms ease-out; }
.nb-popup.is-open .nb-popup-card { transform: none; }
.nb-popup-icon { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; }
.nb-popup-card.is-success .nb-popup-icon { background: rgb(var(--c-green) / 0.15); color: rgb(var(--c-green)); }
.nb-popup-card.is-error .nb-popup-icon { background: rgb(var(--c-yellow) / 0.15); color: rgb(var(--c-yellow-text)); }
.nb-popup-title { font-size: 20px; font-weight: 700; color: rgb(var(--c-ink)); }
.nb-popup-message { margin-top: 8px; font-size: 15px; line-height: 1.55; color: rgb(var(--c-muted)); }

/* ---------- Tombol tema ---------- */
.theme-btn { position: relative; width: 36px; height: 36px; flex-shrink: 0; overflow: hidden; background: transparent; color: rgb(var(--c-muted)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; cursor: pointer; transition: color 120ms ease, background-color 120ms ease; }
.theme-btn:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-surface2)); }
.theme-btn-icon { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 300ms ease, opacity 200ms ease; }
.theme-btn-sun { transform: translateY(120%); opacity: 0; }
.theme-btn-moon { transform: none; opacity: 1; }
[data-theme='dark'] .theme-btn-sun { transform: none; opacity: 1; }
[data-theme='dark'] .theme-btn-moon { transform: translateY(-120%); opacity: 0; }
.lang-menu-wrapper > button { border-radius: 4px !important; color: rgb(var(--c-muted)) !important; }
.lang-menu-wrapper > button:hover { color: rgb(var(--c-ink)) !important; background: rgb(var(--c-surface2)) !important; }
.lang-menu-dropdown, #notifDropdown { border-radius: 6px !important; border: 1px solid rgb(var(--c-line)) !important; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.6) !important; }

/* ---------- Halaman Top-up ---------- */
.topup-active { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 14px 16px; background: rgb(var(--c-yellow) / 0.1); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-yellow) / 0.4); border-radius: 6px; }
.topup-active-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--c-yellow) / 0.18); color: rgb(var(--c-yellow-text)); }
.topup-label { display: block; font-size: 14px; font-weight: 500; color: rgb(var(--c-ink2)); }
.topup-amount { margin-top: 8px; display: flex; align-items: stretch; border: 1px solid rgb(var(--c-line)); border-radius: 6px; overflow: hidden; background: rgb(var(--c-surface2)); }
.topup-amount:focus-within { border-color: rgb(var(--c-purple)); box-shadow: 0 0 0 3px rgb(var(--c-purple) / 0.25); }
.topup-amount span { display: grid; place-items: center; padding: 0 14px; color: rgb(var(--c-muted)); font-weight: 600; font-size: 18px; border-right: 1px solid rgb(var(--c-line)); }
.topup-amount input#amount { flex: 1; min-width: 0; padding: 12px 14px !important; border: 0 !important; box-shadow: none !important; font-family: 'JetBrains Mono', monospace; font-size: 22px !important; font-weight: 600 !important; background: transparent !important; }
.topup-chip { padding: 10px 8px; background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.topup-chip:hover { border-color: rgb(var(--c-line2)); }
.topup-chip.is-on { border-color: rgb(var(--c-purple)); background: rgb(var(--c-purple-tint)); color: rgb(var(--c-purple-text)); }
.topup-steps { margin-top: 22px; display: grid; gap: 10px; }
.topup-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgb(var(--c-ink2)); }
.topup-steps li span { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--c-surface2)); color: rgb(var(--c-yellow-text)); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
.topup-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid rgb(var(--c-line)); transition: background-color 120ms ease; }
.topup-row:last-child { border-bottom: 0; }
.topup-row:hover { background: rgb(var(--c-surface2)); }
.topup-row-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.topup-row-icon.is-paid { background: rgb(var(--c-green) / 0.15); color: rgb(var(--c-green)); }
.topup-row-icon.is-pending { background: rgb(var(--c-yellow) / 0.15); color: rgb(var(--c-yellow-text)); }
.topup-row-icon.is-expired { background: rgb(var(--c-surface2)); color: rgb(var(--c-muted)); }

/* ---------- Anti melebar di HP ---------- */
body { overflow-x: clip; }
main { min-width: 0; }
.panel-card, .stat-card, .page-head { max-width: 100%; }
.page-title { overflow-wrap: anywhere; }

/* ---------- Catatan Penting (merah) ---------- */
.notes-card { padding: 18px 20px; background: rgb(var(--c-red) / 0.07); border: 1px solid rgb(var(--c-red) / 0.35); border-radius: 6px; color: rgb(248 113 113); }
:root:not([data-theme='dark']) .notes-card { color: #B91C1C; }
.notes-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.notes-icon { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--c-red) / 0.18); }
.notes-list { margin-top: 12px; padding-left: 20px; list-style: disc; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; }

/* ---------- Halaman Pesan Produk ---------- */
.vip-head-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--c-surface2)); color: rgb(var(--c-yellow)); }
.vip-summary { top: 96px; }
.section-mini-title { margin-bottom: 14px; font-size: 18px; font-weight: 700; color: rgb(var(--c-ink)); }
.product-card { display: flex; flex-direction: column; padding: 20px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; transition: border-color 120ms ease; }
.product-card:hover { border-color: rgb(var(--c-purple) / 0.6); }
.product-card .btn { margin-top: auto; }
.product-card .grid { margin-bottom: 20px; }
.product-price { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 600; color: rgb(var(--c-yellow-text)); text-align: right; line-height: 1.15; }
.product-price small { display: block; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; color: rgb(var(--c-muted)); }
.product-name { margin-top: 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--c-ink)); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { background: rgb(var(--c-bg)); border-top: 1px solid rgb(var(--c-line)); }
.site-footer a.font-display { font-weight: 800 !important; letter-spacing: -0.03em; }
.footer-head { font-size: 14px; font-weight: 600; color: rgb(var(--c-ink)); }
.footer-links { margin-top: 14px; display: grid; gap: 10px; font-size: 14px; }
.footer-links a { color: rgb(var(--c-muted)); transition: color 120ms ease; }
.footer-links a:hover { color: rgb(var(--c-ink)); }

/* ---------- Area member: sidebar (gaya dashboard Coolify) ---------- */
.app-sidebar { background: rgb(var(--c-bg)); border-right: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); }
.app-sidebar-brand { border-bottom: 1px solid rgb(var(--c-line)); }
.app-sidebar-brand a { color: rgb(var(--c-ink)) !important; font-weight: 800 !important; letter-spacing: -0.03em; }
.app-sidebar-brand button { color: rgb(var(--c-muted)) !important; }
.app-sidebar-label { margin: 0 0 6px 20px; padding: 0 !important; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-muted2)); }
.app-sidebar > .app-sidebar-label { align-self: flex-start; margin-top: 20px; }
.app-sidebar-muted { color: rgb(var(--c-muted)); }
.app-nav-link { display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 9px 12px; border-radius: 4px; color: rgb(var(--c-muted)); font-size: 14px; font-weight: 500; transition: background-color 120ms ease, color 120ms ease; }
.app-nav-link:hover { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); }
.app-nav-link.is-active, .app-nav-link.is-active:hover { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); }
.app-nav-link.is-active svg { color: rgb(var(--c-yellow)); }
.app-sidebar-help { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px !important; }
.app-sidebar-help p.text-white { color: rgb(var(--c-ink)) !important; }
.app-sidebar-help a { border-radius: 4px !important; }
.app-sidebar-ghost { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)) !important; }

/* Topbar */
.app-topbar { background: rgb(var(--c-bg) / 0.92); border-bottom: 1px solid rgb(var(--c-line)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.app-search { padding: 0 12px; height: 38px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; }
.app-search:focus-within { border-color: rgb(var(--c-purple)); }
.app-search-input { flex: 1; min-width: 0; height: 100%; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; font-size: 14px; color: rgb(var(--c-ink)) !important; }

/* Judul halaman + breadcrumb */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding: 0 0 18px; border-bottom: 1px solid rgb(var(--c-line)); }
.page-title { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: rgb(var(--c-ink)); }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--c-muted)); }
.breadcrumb a:hover { color: rgb(var(--c-ink)); }
.breadcrumb span { color: rgb(var(--c-ink2)); }

/* Kartu statistik */
.stat-card { display: block; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; transition: border-color 120ms ease; }
.stat-card-link:hover { border-color: rgb(var(--c-purple) / 0.6); }
.stat-card-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; }
.stat-label { font-size: 14px; font-weight: 500; color: rgb(var(--c-muted)); }
.stat-value { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: rgb(var(--c-yellow-text)); line-height: 1.1; overflow-wrap: anywhere; }
.stat-value-sm { font-size: 18px; }
.stat-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--c-surface2)); color: rgb(var(--c-yellow)); }
.stat-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-top: 1px solid rgb(var(--c-line)); font-size: 13px; color: rgb(var(--c-muted)); }

/* Lencana status */
.badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-success { background: rgb(var(--c-green) / 0.14); color: rgb(var(--c-green)); }
.badge-warning { background: rgb(var(--c-yellow) / 0.14); color: rgb(var(--c-yellow-text)); }
.badge-primary { background: rgb(var(--c-purple-tint2)); color: rgb(var(--c-purple-text)); }

/* Panel */
.panel-card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: 6px; overflow: hidden; }
.panel-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgb(var(--c-line)); }
.panel-card-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--c-ink)); }

/* Item server */
.server-item { padding: 20px; border-color: rgb(var(--c-line)) !important; }
.server-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--c-surface2)); color: rgb(var(--c-yellow)); }
.resource-chip { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgb(var(--c-surface2)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; min-width: 0; }
.resource-chip .text-primary { color: rgb(var(--c-yellow-text)) !important; }

/* Kapasitas di dashboard */
.capacity-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 10px; text-align: center; }
.capacity-cell + .capacity-cell { border-left: 1px solid rgb(var(--c-line)); }
.capacity-num { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; color: rgb(var(--c-yellow-text)); line-height: 1.1; }
.capacity-label { font-size: 13px; color: rgb(var(--c-muted)); }
.capacity-bar { height: 8px; background: rgb(var(--c-surface2)); border-radius: 999px; overflow: hidden; }
.capacity-bar span { display: block; height: 100%; background: rgb(var(--c-purple)); border-radius: 999px; }

/* Donut ringkasan */
.donut { width: 164px; height: 164px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(rgb(var(--c-purple)) calc(var(--pct) * 1%), rgb(var(--c-surface2)) 0); }
.donut-hole { width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgb(var(--c-surface)); }
.donut + div .bg-primary { background: rgb(var(--c-purple)) !important; }
.donut-rest-dot { background: rgb(var(--c-surface2)); border: 1px solid rgb(var(--c-line2)); }

/* Kartu saldo */
.balance-card { background: linear-gradient(135deg, rgb(24 24 32), rgb(30 22 34)) !important; border: 2px solid rgb(var(--c-purple) / 0.45) !important; }
:root:not([data-theme='dark']) .balance-card { background: linear-gradient(135deg, #fff, #faf7ff) !important; }
.balance-card .text-white { color: rgb(var(--c-ink)) !important; }
.balance-card .text-white\/80 { color: rgb(var(--c-muted)) !important; }
.balance-card .font-display { font-family: 'JetBrains Mono', monospace; color: rgb(var(--c-yellow-text)) !important; }

/* ---------- Kartu & form umum ---------- */
.shadow-soft, .shadow-softhover { border: 1px solid rgb(var(--c-line)) !important; box-shadow: none !important; }
.bg-white, .bg-white\/80, .bg-white\/90, .bg-white\/70 { background-color: rgb(var(--c-surface)) !important; }
.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 6px !important; }
.bg-gradient-to-br.from-indigo-900, .from-indigo-900 { background: linear-gradient(135deg, rgb(24 24 32), rgb(30 22 34)) !important; border: 2px solid rgb(var(--c-purple) / 0.35); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.trial-input):not(.app-search-input):not(#amount),
select, textarea {
  background-color: rgb(var(--c-surface2)) !important;
  color: rgb(var(--c-ink)) !important;
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: 4px !important;
}
input::placeholder, textarea::placeholder { color: rgb(var(--c-muted2)) !important; opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.app-search-input):not(#amount):focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgb(var(--c-purple)) !important;
  box-shadow: 0 0 0 3px rgb(var(--c-purple) / 0.25) !important;
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--c-purple)); }
input[type="file"]::file-selector-button { background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); border-radius: 4px; font-weight: 600; padding: 6px 12px; margin-right: 10px; cursor: pointer; }

.vip-slider { height: 6px !important; border-radius: 999px !important; background: rgb(var(--c-surface2)) !important; border: 0 !important; }
.vip-slider::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 50% !important; background: rgb(var(--c-purple-light)) !important; border: 3px solid rgb(var(--c-surface)) !important; box-shadow: 0 0 0 1px rgb(var(--c-purple)) !important; }
.vip-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50% !important; background: rgb(var(--c-purple-light)) !important; border: 3px solid rgb(var(--c-surface)) !important; box-shadow: 0 0 0 1px rgb(var(--c-purple)) !important; }

/* Tabel */
thead tr { background: rgb(var(--c-surface2)) !important; }
thead th, thead th * { color: rgb(var(--c-muted)) !important; font-weight: 600 !important; }
tbody tr { border-bottom: 1px solid rgb(var(--c-line)); }

/* Panel kode tetap gelap */
pre.bg-slate-900, .bg-slate-900 pre, pre[class*="bg-slate-9"] { background: #0a0a0a !important; color: #EDEDED !important; border: 1px solid rgb(var(--c-line)); border-radius: 6px; }
.bg-slate-900 .text-slate-100, .bg-slate-900.text-slate-100 { color: #EDEDED !important; }

/* Status */
.bg-emerald-500, .bg-green-500, .bg-success { background-color: rgb(var(--c-green)) !important; }
.text-emerald-600, .text-emerald-700, .text-green-600, .text-success { color: rgb(var(--c-green)) !important; }
.bg-amber-500, .bg-yellow-500 { background-color: rgb(var(--c-yellow)) !important; }
.bg-rose-500, .bg-red-500 { background-color: rgb(var(--c-red)) !important; }

main.min-h-screen { background: transparent; }

/* ---------- Mode gelap: ganti override kebiruan dari style.css dengan abu netral ---------- */
[data-theme='dark'] .bg-slate-50, [data-theme='dark'] .hover\:bg-slate-50:hover { background-color: rgb(var(--c-surface2)) !important; }
[data-theme='dark'] .bg-slate-100, [data-theme='dark'] .hover\:bg-slate-100:hover { background-color: rgb(var(--c-hover)) !important; }
[data-theme='dark'] .bg-indigo-50, [data-theme='dark'] .bg-indigo-50\/50, [data-theme='dark'] .bg-indigo-50\/60,
[data-theme='dark'] .bg-indigo-50\/40, [data-theme='dark'] .hover\:bg-indigo-50:hover { background-color: rgb(var(--c-purple-tint)) !important; }
[data-theme='dark'] .hover\:bg-indigo-100:hover { background-color: rgb(var(--c-purple-tint2)) !important; }
[data-theme='dark'] .bg-amber-50, [data-theme='dark'] .bg-amber-50\/70 { background-color: rgb(var(--c-yellow) / 0.08) !important; }
[data-theme='dark'] .bg-emerald-50 { background-color: rgb(var(--c-green) / 0.1) !important; }
[data-theme='dark'] .bg-rose-50, [data-theme='dark'] .hover\:bg-rose-50:hover { background-color: rgb(var(--c-red) / 0.1) !important; }
[data-theme='dark'] .border-slate-100, [data-theme='dark'] .border-slate-200, [data-theme='dark'] .border-slate-300,
[data-theme='dark'] .border-indigo-100, [data-theme='dark'] .border-indigo-200 { border-color: rgb(var(--c-line)) !important; }
[data-theme='dark'] .border-amber-100, [data-theme='dark'] .border-amber-200 { border-color: rgb(var(--c-yellow) / 0.3) !important; }
[data-theme='dark'] .text-slate-400 { color: rgb(var(--c-muted2)) !important; }
[data-theme='dark'] .text-slate-500 { color: rgb(var(--c-muted)) !important; }
[data-theme='dark'] .text-slate-600 { color: rgb(var(--c-ink2)) !important; }
[data-theme='dark'] .text-slate-700, [data-theme='dark'] .text-slate-800, [data-theme='dark'] .text-slate-900 { color: rgb(var(--c-ink)) !important; }
[data-theme='dark'] .text-amber-600, [data-theme='dark'] .text-amber-700, [data-theme='dark'] .text-amber-700\/90, [data-theme='dark'] .text-amber-800 { color: rgb(var(--c-yellow)) !important; }
[data-theme='dark'] .shadow-soft, [data-theme='dark'] .shadow-softhover, [data-theme='dark'] .hover\:shadow-softhover:hover { box-shadow: none !important; }
[data-theme='dark'] .hover\:text-primary:hover, [data-theme='dark'] .text-indigo-500, [data-theme='dark'] .text-indigo-600,
[data-theme='dark'] .text-indigo-700, [data-theme='dark'] .hover\:text-indigo-700:hover, [data-theme='dark'] .text-violet-500,
[data-theme='dark'] .text-violet-600, [data-theme='dark'] .text-sky-500, [data-theme='dark'] .text-sky-600,
[data-theme='dark'] .text-blue-500, [data-theme='dark'] .text-blue-600 { color: rgb(var(--c-purple-text)) !important; }
[data-theme='dark'] .text-indigo-100, [data-theme='dark'] .text-indigo-200, [data-theme='dark'] .text-violet-100,
[data-theme='dark'] .text-violet-300 { color: rgb(var(--c-muted)) !important; }

@media (max-width: 640px) {
  .section-block { padding: 52px 0; }
  .cf-hero { padding-top: 56px; }
  .server-item, .panel-card-head { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-float, .theme-btn-icon, .cf-faq summary svg { transition: none !important; }
}

/* Lencana merah + bar sisa allocation node (Admin > Node) */
.badge-danger { background: rgb(244 63 94 / 0.14); color: rgb(225 29 72); }
.alloc-bar { height: 6px; border-radius: 999px; background: rgb(var(--c-surface2)); overflow: hidden; }
.alloc-bar > span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--c-green)); }
.alloc-bar > span.is-warning { background: rgb(var(--c-yellow)); }
.alloc-bar > span.is-danger { background: rgb(244 63 94); }

/* Tombol "Lanjut dengan Google" */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 600; border-radius: 4px; background: rgb(var(--c-surface2)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); transition: background .15s; }
.btn-google:hover { background: rgb(var(--c-hover)); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; font-size: 12px; color: rgb(var(--c-muted)); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgb(var(--c-line)); }