/* ============================================================
   ONLym-Api v4.2 — Theme.css (Global Design System)
   Dark Obsidian Pro · Typography-led · Precision Crimson
   ============================================================
   Rules of this system:
   1. Layered obsidian surfaces — base #121319, elevated panels,
      never pitch-black; comfortable on Android and desktop.
   2. Type is the interface — Geist for UI/display,
      JetBrains Mono for numbers, code, API keys (tabular).
   3. Calm interactions — short enter/hover transitions only,
      no decorative infinite loops, prefers-reduced-motion honored.
   ============================================================ */

/* ── Force obsidian immediately (never flash white) ──────────
   html stays opaque (flash guard + overscroll gutter).
   body is TRANSPARENT so the fixed .onlym-bg-stage (z-index:-1)
   shows through instead of being hidden behind an opaque body. */
html {
  background: var(--obsidian-base, #090a0f) !important;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
}
html, body {
  color: #ffffff;
  color: var(--text-primary, #ffffff);
}
body {
  background: transparent !important;
  overflow: visible !important;
}

/* Critical utility: [hidden] must ALWAYS hide elements */
[hidden] {
  display: none !important;
}

/* Responsive GET API button guarantees (never hidden on desktop) */
@media (max-width: 639px) {
  .get-api-btn-desktop { display: none !important; }
  .get-api-btn-mobile { display: inline-flex !important; width: 100% !important; }
}
@media (min-width: 640px) {
  .get-api-btn-desktop { display: inline-flex !important; }
  .get-api-btn-mobile { display: none !important; }
}

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Base Palette — Dark Obsidian v4.2 (layered, not pitch black) */
  --obsidian-base:    #121319;
  --obsidian-surface-1: #181b23;
  --obsidian-surface-2: #1e222d;
  --obsidian-surface-3: #252b3c;

  --bg-deep:          #121319;
  --bg-void:          #181b23;
  --bg-surface:       #1e222d;
  --bg-elevated:      #252b3c;

  /* v4.0: Mobile background lock */
  --bg-stage-z-index: -1;

  /* Glass Overlays — Sleek High-Contrast Obsidian Panels (Foto 2 / ui-ux-pro-max) */
  --glass-bg:       rgba(19, 21, 28, 0.96);
  --glass-bg-light: rgba(23, 26, 36, 0.94);
  --glass-border:   rgba(255, 255, 255, 0.12);
  --glass-border-sm:rgba(255, 255, 255, 0.08);
  --glass-glow-in:  rgba(220, 38, 38, 0.12);

  /* Accent — Obsidian Red */
  --red-primary:    #c81b1c;
  --red-vivid:      #dc2626;
  --red-dark:       #991b1b;
  --red-glow:       rgba(220, 38, 38, 0.25);
  --red-glow-sm:    rgba(220, 38, 38, 0.12);
  --red-glow-xs:    rgba(220, 38, 38, 0.06);

  /* Semantic Colors */
  --emerald:        #34d399;
  --emerald-bg:     rgba(52, 211, 153, 0.08);
  --emerald-border: rgba(52, 211, 153, 0.22);
  --amber:          #fbbf24;
  --amber-bg:       rgba(251, 191, 36, 0.08);
  --amber-border:   rgba(251, 191, 36, 0.25);
  --rose:           #f87171;
  --rose-bg:        rgba(248, 113, 113, 0.08);
  --rose-border:    rgba(248, 113, 113, 0.25);
  --slate:          #94a3b8;

  /* Text */
  --text-primary:   #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted:     #64748b;
  --text-faint:     #334155;

  /* Compatibility Tokens (Unified Nav, Modals, Popovers) */
  --border:         rgba(255, 255, 255, 0.10);
  --popover:        #0d0f17;
  --foreground:     #f8fafc;
  --muted:          rgba(255, 255, 255, 0.05);
  --muted-foreground: #94a3b8;
  --accent:         rgba(255, 255, 255, 0.08);
  --accent-foreground: #ffffff;
  --destructive:    #dc2626;
  --destructive-foreground: #ffffff;
  --primary:        #dc2626;
  --primary-foreground: #ffffff;
  --ring:           #c81b1c;
  --input:          rgba(255, 255, 255, 0.06);

  /* Spacing & Radius — Sleek Modern Geometry (Foto 2) */
  --radius-xl:      1.125rem;
  --radius-lg:      0.875rem;
  --radius-md:      0.625rem;
  --radius-sm:      0.375rem;

  /* Z-Index Scale */
  --z-bg:           -1;
  --z-base:         1;
  --z-card:         10;
  --z-nav:          50;
  --z-modal:        100;
  --z-toast:        200;
  --z-top:          300;

  /* Transitions — 150–300ms micro-interactions */
  --ease-fast:      160ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:  500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Neutral scrollbar (v4.2) */
  --scrollbar-track:      rgba(255, 255, 255, 0.03);
  --scrollbar-thumb:      rgba(255, 255, 255, 0.16);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);

  /* Header height — dipakai .onlym-bg-stage offset & scroll-padding */
  --header-h: 3.6rem;
  /* Tinggi dock nav bawah (unified-nav: bottom 16px + tinggi tombol) —
     dipakai modal supaya tidak tertutup dock. */
  --dock-h: 5.25rem;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Smooth scroll hanya untuk in-page anchor (smooth di-set per-jaga via
     element.style / scrollIntoView({behavior:'smooth'})), bukan global
     di level root — biarkan momentum scroll native OS berjalan mulus. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'cv11', 'ss01';
  line-height: 1.6;
  overflow: visible !important;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Scroll lock saat modal/nav overlay terbuka. */
body.modal-open,
body.nav-overlay-open {
  overflow: hidden !important;
}
html:has(.modal-backdrop.open),
html:has(.onlym-more-overlay.show) {
  overflow: hidden !important;
}
html:has(.modal-backdrop.open),
html:has(.onlym-more-overlay.show) {
  overscroll-behavior: none;
}
/* Touch devices: cegah scroll chaining dari konten modal ke body. */
body.modal-open,
body.nav-overlay-open {
  touch-action: pan-y;
}

/* ---------- Selection & Focus ---------- */
::selection {
  background: rgba(200, 27, 28, 0.35);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--red-vivid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Scrollbar — neutral obsidian (v4.2) ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* ---------- Background Video Stage ---------- */
.onlym-bg-stage {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: var(--locked-vh, 100lvh) !important;
  min-height: 100vh !important;
  z-index: var(--z-bg);
  pointer-events: none;
  background: #040408;
  overflow: hidden;
  overscroll-behavior: none !important;
  touch-action: none;
}
.onlym-bg-stage .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.onlym-bg-stage .bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 28%;
  opacity: 0.85;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container gambar banner statis (Sharp, full-bleed cover, perfectly centered, zero load shift) */
.onlym-bg-stage .bg-image-layer {
  position: absolute;
  inset: 0;
  background-image: url('/assets/background.webp?v=4.4');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
}

/* Smooth transition ONLY when user actively switches theme/wallpaper */
html.ui-theme-switching .onlym-bg-stage .bg-image-layer,
html.ui-theme-switching .onlym-bg-stage .bg video,
html.ui-theme-switching .onlym-bg-stage .scrim {
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.42s cubic-bezier(0.16, 1, 0.3, 1), background 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* State ketika Mode Banner Aktif */
html.bg-mode-banner .onlym-bg-stage .bg video {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

html.bg-mode-banner .onlym-bg-stage .bg-image-layer {
  opacity: 0.85 !important;
  visibility: visible;
}
.onlym-bg-stage .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.60) 40%,
    rgba(0,0,0,0.82) 100%
  );
  pointer-events: none;
}

/* Mobile / Android: Terkunci kokoh di viewport tanpa goyang saat scroll / tab bar muncul, background digeser ke kiri */
@media (max-width: 768px) {
  .onlym-bg-stage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--locked-vh, 100lvh) !important;
    overscroll-behavior: none !important;
  }
  .onlym-bg-stage .bg video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% 25% !important;
    transform: translateZ(0) !important;
    transition: none !important;
  }
  .onlym-bg-stage .bg-image-layer {
    background-image: url('/assets/background-mobile.webp?v=4.4');
    background-size: cover !important;
    background-position: 50% 12% !important;
  }
}
@media (max-width: 480px) {
  .onlym-bg-stage .bg video {
    object-position: 74% 24% !important;
  }
  .onlym-bg-stage .bg-image-layer {
    background-size: cover !important;
    background-position: 50% 10% !important;
  }
}

/* ============================================================
   TYPOGRAPHY SYSTEM  (v4.2.1 — JetBrains Mono Body + Display Titles)
   Titles (Judul) : Outfit / Geist 800 · tracking −0.035em
   Top Bar & Footer: Geist / Plus Jakarta Sans
   All Page Content: JetBrains Mono (400/500/600/700)
   ============================================================ */
body, html {
  font-family: 'JetBrains Mono', monospace;
}

/* Semua konten di dalam halaman (#spa-view: Home, Dashboard, Profile/Login, Uploader, AI Studio) & Modal */
#spa-view,
#spa-view p:not(.font-display):not(.font-podium),
#spa-view label,
#spa-view input,
#spa-view textarea,
#spa-view select,
#spa-view button,
#spa-view a:not(.font-display):not(.font-podium),
#spa-view li,
#spa-view td,
#spa-view th,
#spa-view h4:not(.font-display),
#spa-view h5:not(.font-display),
#spa-view h6:not(.font-display),
.modal-backdrop,
.modal-backdrop p:not(.font-display):not(.font-podium),
.modal-backdrop label,
.modal-backdrop input,
.modal-backdrop textarea,
.modal-backdrop select,
.modal-backdrop button {
  font-family: 'JetBrains Mono', monospace;
}

/* AI Studio Prompt Textareas: Standard Sans-Serif font (Plus Jakarta Sans / system font) */
#aiPromptInput,
#aiNegativePromptInput,
#aiPromptZoomTextarea {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
}

/* Pengecualian 1: JUDUL (H1, H2, H3, .font-display, .font-podium, .cat-title) tetap menggunakan Display Font */
h1,
h2,
h3,
.font-display,
.font-podium,
.cat-title,
.hero-title-flow,
#apiTitle,
h1 > span:not(.font-mono):not(.badge):not(.tag),
h2 > span:not(.font-mono):not(.badge):not(.tag),
h3 > span:not(.font-mono):not(.badge):not(.tag),
.font-display > span:not(.font-mono):not(.badge):not(.tag),
.font-podium > span:not(.font-mono):not(.badge):not(.tag) {
  font-family: 'Outfit', 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

.font-display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
/* Legacy alias — old markup keeps working with the clean stack */
.font-podium {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Pengecualian 2: TOP BAR (header.site-header) tetap menggunakan Sans-Serif asli */
header.site-header,
header.site-header *:not(.font-mono):not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
  font-family: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Pengecualian 3: FOOTER (footer#contact) tetap menggunakan Sans-Serif / Display asli */
footer#contact,
footer#contact *:not(.font-mono):not(.font-display):not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands):not(.fa-regular) {
  font-family: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.font-inter,
.font-sans {
  font-family: 'JetBrains Mono', monospace;
}
.font-serif-accent {
  font-family: 'Outfit', 'Geist', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.font-mono {
  font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace !important;
}
/* Every numeral surface uses mono + tabular figures */
.num,
.tabular-nums {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Eyebrow kicker above section titles */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-kicker::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--red-vivid), transparent);
}

/* ---------- Glow Text ---------- */
.text-glow-red {
  text-shadow: 0 0 24px rgba(200,27,28,0.6), 0 0 48px rgba(200,27,28,0.3);
}
.text-gradient-red {
  background: linear-gradient(135deg, #fff 40%, #f87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-white {
  background: linear-gradient(180deg, #ffffff 30%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   SURFACES — glass cards that answer the cursor
   ============================================================ */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  transition: border-color var(--ease-smooth), box-shadow var(--ease-smooth),
              transform var(--ease-smooth);
}
.glass-card-sm {
  background: var(--glass-bg-light);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid var(--glass-border-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-md);
}

/* Cursor-following spotlight (JS feeds --mx/--my) — soft, compact, not overly bright */
.spotlight-card { overflow: hidden; }
.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.035),
    transparent 70%
  );
}
.spotlight-card:hover::after { opacity: 1; }

/* Lift interaction — subtle, no layout shift */
.lift-card {
  will-change: transform;
}
.lift-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 36px 70px rgba(0,0,0,0.65),
              0 0 0 1px rgba(220,38,38,0.08),
              inset 0 1px 1px var(--glass-glow-in);
}
.lift-card:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 80ms;
}

/* ---------- Badge / Pill System ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.75em;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
  white-space: nowrap;
}
.badge-free   {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-vvip   {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.12));
  color: #fef08a;
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#memberTierBadge.badge-vvip::before {
  content: '👑';
  display: inline-block;
  font-size: 11px;
  margin-right: 4px;
}
.badge-locked { background: var(--rose-bg);    color: var(--rose);     border-color: var(--rose-border); }
.badge-admin  { background: var(--rose-bg);    color: var(--rose);     border-color: var(--rose-border); }
.badge-neutral{ background: rgba(255,255,255,0.05); color: var(--slate); border-color: rgba(255,255,255,0.1); }
.badge-method-get    { background: rgba(52,211,153,0.1); color:#34d399; border-color:rgba(52,211,153,0.25); }
.badge-method-post   { background: rgba(251,191,36,0.1); color:#fbbf24; border-color:rgba(251,191,36,0.25); }
.badge-method-delete { background: rgba(248,113,113,0.1); color:#f87171; border-color:rgba(248,113,113,0.25); }

/* ============================================================
   ENDPOINT TAGS (v3.9.1)
   ------------------------------------------------------------
   Menggantikan `.badge badge-*` pada kartu endpoint. Sebelumnya
   status/premium/limit semuanya memakai badge-vvip yang sama —
   PREMIUM, Limit 5/Req, dan UPDATE tampil identik amber sehingga
   tidak terbaca bedanya. Palet di bawah mengikuti versi lama
   (api-page/index.html): ready hijau, error merah, update oranye,
   locked netral putih, premium rose, admin biru, limit amber,
   1-limit indigo.
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding: 0.16rem 0.5rem;
  border-radius: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
/* Ikon di dalam tag: dipatok ukurannya supaya tidak lebih besar dari teks —
   ikon crown PREMIUM sebelumnya mewarisi font-size kartu dan tampak jomplang. */
.tag svg,
.tag i {
  width: 9px;
  height: 9px;
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}
/* Titik status kecil sebagai pengganti ikon — lebih bersih untuk state. */
.tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
}

.tag-ready   { background: rgba(34,197,94,0.13);  color: #4ade80; border-color: rgba(34,197,94,0.36); }
.tag-error   { background: rgba(239,68,68,0.13);  color: #f87171; border-color: rgba(239,68,68,0.38); }
.tag-update  { background: rgba(249,115,22,0.13); color: #fb923c; border-color: rgba(249,115,22,0.38); }
.tag-locked  { background: rgba(255,255,255,0.09); color: #e2e8f0; border-color: rgba(255,255,255,0.28); }
/* Premium = rose, jelas beda dari limit (amber) dan vvip (kuning) */
.tag-premium { background: rgba(244,63,94,0.13);  color: #fb7185; border-color: rgba(244,63,94,0.36); }
.tag-vvip    { background: rgba(234,179,8,0.14);  color: #facc15; border-color: rgba(234,179,8,0.4); }
.tag-admin   { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.45); }
.tag-limit   { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.32); }
.tag-cost    { background: rgba(129,140,248,0.12); color: #a5b4fc; border-color: rgba(129,140,248,0.3); }

/* Baris tag pada kartu endpoint — SELALU horizontal kiri→kanan di bawah
   deskripsi, baik di mobile maupun desktop (v3.9.2). */
.endpoint-tags {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* ============================================================
   BUTTONS — sheen sweep + press feedback
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.5em;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--ease-fast), box-shadow var(--ease-smooth),
              background var(--ease-smooth), color var(--ease-smooth),
              border-color var(--ease-smooth), filter var(--ease-smooth);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--red-vivid);
  outline-offset: 3px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Sheen sweep on hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--red-primary), var(--red-vivid));
  color: #fff;
  box-shadow: 0 0 18px var(--red-glow), 0 4px 12px rgba(0,0,0,0.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--red-vivid), #ef4444);
  box-shadow: 0 0 30px rgba(220,38,38,0.45), 0 6px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}
.btn-ghost:active { transform: translateY(0) scale(0.975); }

.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: visible;
}
.btn-icon::before { display: none; }
.btn-icon svg { transition: transform var(--ease-fast); }
.btn-icon:hover svg { transform: scale(1.12); }

/* ---------- Input Fields ---------- */
.input {
  width: 100%;
  padding: 0.65em 1em;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color var(--ease-smooth), background var(--ease-smooth),
              box-shadow var(--ease-smooth);
  outline: none;
}
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #64748b !important;
  opacity: 0.65 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.input:not(:placeholder-shown),
input:not(:placeholder-shown) {
  color: #ffffff;
  font-style: normal;
}
.input:hover:not(:focus) { border-color: rgba(255,255,255,0.16); }
.input:focus {
  border-color: rgba(220,38,38,0.55);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px var(--red-glow-xs), 0 0 16px var(--red-glow-xs);
}
.input.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}

/* Password eye toggle inside relative wrapper */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 2.9rem; }
.pw-eye {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--slate);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--ease-fast);
}
.pw-eye:hover { color: var(--text-primary); }

/* Password meter */
.pw-meter {
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 0.4rem;
}
.pw-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--rose);
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1), background 0.35s ease;
}

/* ---------- Header Bar ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px !important;
  z-index: 1000;
  padding: 0 16px !important;
  background: rgba(8, 10, 15, 0.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #161b26 !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
@media (min-width: 640px) {
  .site-header {
    padding: 0 24px !important;
  }
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex-shrink: 0;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}
.header-brand img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  object-fit: contain;
  transition: transform var(--ease-bounce);
  border: none !important;
  outline: none !important;
}
.header-brand:hover img { transform: rotate(-8deg) scale(1.08); }
.header-brand-text {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  border: none !important;
  outline: none !important;
}
.header-brand-text span {
  border: none !important;
  outline: none !important;
}
/* "ONLym" & "v3.9" putih (warisan dari .header-brand-text), "-Api." merah */
.header-brand-text .dot-red { color: var(--red-vivid); }

.header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}
#bgToggleBtn, #notifBell, #headerProfileBtn {
  position: relative;
  overflow: visible;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  max-width: 2.25rem;
  max-height: 2.25rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  outline: none;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
#bgToggleBtn::-moz-focus-inner, #notifBell::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}
#bgToggleBtn:hover, #notifBell:hover, #headerProfileBtn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
#bgToggleBtn svg, #notifBell svg, #headerProfileBtn svg {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
}
#bgToggleBtn svg.hidden, #bgToggleBtn svg[hidden] {
  display: none !important;
}

/* ---------- Hero Section ---------- */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 3rem;
  position: relative;
}

/* Rotating Glow Ring */
.glow-ring-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.glow-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(200,27,28,0.8) 40%,
    transparent 60%
  );
  filter: blur(3px);
}
.glow-ring::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bg-deep);
}
.avatar-logo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border);
}

/* Flowing-gradient hero title (living silky white & crimson wave animation) */
@keyframes heroTitleFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -300% 50%;
  }
}

@keyframes heroTitleGlow {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.28));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(239, 68, 68, 0.52));
  }
}

.hero-title-flow {
  background: linear-gradient(
    105deg,
    #ffffff 0%,
    #ffffff 12%,
    #ffe4e6 22%,
    #fda4af 30%,
    #f87171 38%,
    #ef4444 46%,
    #dc2626 52%,
    #ef4444 58%,
    #f87171 66%,
    #fda4af 74%,
    #ffe4e6 82%,
    #ffffff 90%,
    #ffffff 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleFlow 9s linear infinite, heroTitleGlow 4.5s ease-in-out infinite;
  will-change: background-position;
}

/* VIP Gold Ring */
.vip-ring {
  background: conic-gradient(
    from 0deg,
    #f59e0b, #fbbf24, #f59e0b, #d97706, #f59e0b
  );
  filter: blur(2px);
}

/* ---------- Category Pills ---------- */
.pill-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.pill-scroll::-webkit-scrollbar { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 1em;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  transition: background-color var(--ease-smooth),
              border-color var(--ease-smooth),
              color var(--ease-smooth),
              transform var(--ease-smooth),
              box-shadow var(--ease-smooth);
  user-select: none;
  -webkit-user-select: none;
}
.pill .pill-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  opacity: 0.55;
}
.pill:hover {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.35);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.pill.active {
  background: rgba(220,38,38,0.18);
  border-color: rgba(220,38,38,0.55);
  color: #fff;
  box-shadow: 0 0 12px var(--red-glow-sm);
}

/* ============================================================
   CATEGORY GROUP SECTIONS (home page grouping, v3.8 / v4.0 - Photo 3)
   ============================================================ */
.category-group {
  margin-bottom: 1.25rem;
  background: rgba(12, 14, 20, 0.82) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-xl, 18px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
}
.category-group:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.category-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.35rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  transition: background var(--ease-fast);
}
.category-header:hover { background: rgba(255, 255, 255, 0.04); }
.category-header .cat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #ef4444;
  flex-shrink: 0;
  font-size: 0.95rem;
  transition: transform var(--ease-bounce), box-shadow var(--ease-smooth);
}
.category-header:hover .cat-icon {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 0 16px var(--red-glow-sm);
}
.category-header .cat-title {
  font-family: 'Outfit', 'Geist', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
}
.category-header .cat-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 1px;
}
.category-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.category-group.collapsed .category-chevron { transform: rotate(-90deg); }

.category-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  overflow: hidden;
  max-height: 99999px;
  opacity: 1;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.35rem 0.85rem 0.85rem;
  transform: translateZ(0);
  will-change: max-height, opacity;
}
.category-group.collapsed .category-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Endpoint Card (Photo 3) ---------- */
.endpoint-card {
  display: flex;
  flex-direction: column;
  background: rgba(18, 20, 28, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px;
  content-visibility: auto;
  contain-intrinsic-size: 0 76px;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.endpoint-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(22, 25, 36, 0.85) !important;
}

/* Tombol GET API */
.get-api-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
  background: rgba(220, 38, 38, 0.2) !important;
  border: 1px solid rgba(220, 38, 38, 0.45) !important;
  border-radius: 9px;
  padding: 0.45rem 1rem !important;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.get-api-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.5);
}

/* Tombol Execute (Photo 2) & AI Studio Generate */
#edExecBtn, #aiGenerateBtn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#edExecBtn:hover:not(:disabled), #aiGenerateBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
#edExecBtn:active:not(:disabled), #aiGenerateBtn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* Search highlight */
mark.search-hit {
  background: rgba(220,38,38,0.28);
  color: #fecaca;
  border-radius: 3px;
  padding: 0 0.15em;
}

/* ---------- Accordion (legacy helper kept) ---------- */
.accordion-trigger {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  transition: background var(--ease-fast);
}
.accordion-trigger:hover { background: rgba(255,255,255,0.04); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.accordion-content.open { max-height: 99999px; }
.accordion-chevron {
  transition: transform var(--ease-smooth);
  flex-shrink: 0;
}
.accordion-trigger.open .accordion-chevron {
  transform: rotate(90deg);
}

/* ---------- Code/Response Viewer ---------- */
.response-viewer {
  background: rgba(2,4,10,0.92);
  border: 1px solid var(--glass-border-sm);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  white-space: pre;
  word-break: break-all;
}
.response-viewer .json-key    { color: #c4b5fd; }
.response-viewer .json-string { color: #86efac; }
.response-viewer .json-number { color: #67e8f9; }
.response-viewer .json-bool   { color: #f9a8d4; }
.response-viewer .json-null   { color: #f87171; }
.response-viewer .line-no     { color: #334155; padding-right: 1em; user-select: none; }

/* ---------- cURL Preview ---------- */
.curl-preview {
  background: rgba(2,4,10,0.85);
  border: 1px solid var(--glass-border-sm);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.73rem;
  color: #93c5fd;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

/* ---------- Search Bar (professional, v3.8) ---------- */
.search-bar {
  position: relative;
  flex: 1;
  max-width: 480px;
}
.search-bar input {
  padding-left: 2.6rem;
  padding-right: 5.2rem;
}
.search-bar .search-prefix {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red-vivid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  pointer-events: none;
  user-select: none;
  transition: color var(--ease-fast);
}
.search-bar:focus-within .search-prefix {
  color: var(--red-vivid);
}
.search-bar .search-kbd {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.search-bar .search-kbd kbd {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--text-muted);
}
.search-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  height: 1.65rem;
  padding: 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #cbd5e1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}
.search-bar.has-value .search-clear {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.search-clear:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* Search meta row (result count) */
.search-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 11px;
  color: var(--text-muted);
  min-height: 1.4rem;
}
.search-meta .num { color: var(--text-secondary); }

/* ---------- Notification Bell ---------- */
.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  background: rgba(15, 8, 12, 0.92);
  color: #f87171;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
  z-index: 10;
}

/* ---------- Limit Bar ---------- */
.limit-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.limit-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red-primary), var(--red-vivid));
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.limit-bar-fill.safe  { background: linear-gradient(90deg, #059669, #34d399); }
.limit-bar-fill.warn  { background: linear-gradient(90deg, #d97706, #fbbf24); }
.limit-bar-fill.danger{ background: linear-gradient(90deg, var(--red-dark), var(--red-vivid)); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal, 100050);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Padding atas = header, bawah = dock nav. Menjaga modal selalu di dalam batas layar */
  padding: calc(var(--header-h, 3.6rem) + 0.75rem) 1rem calc(var(--dock-h, 4.5rem) + 0.75rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease-smooth), visibility var(--ease-smooth);
}
.modal-backdrop.open {
  z-index: 100050 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}
.modal-box {
  width: 100%;
  max-width: 540px;
  /* Sisa tinggi setelah header + dock — tidak akan pernah melampaui batas layar */
  max-height: calc(100dvh - var(--header-h, 3.6rem) - var(--dock-h, 4.5rem) - 1.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(10, 12, 18, 0.94) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-lg);
  transform: translateY(14px) scale(0.97);
  transition: transform var(--ease-bounce);
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
}
.modal-backdrop.open .modal-box {
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
}

/* Flex-column modals: container has no inner scroll, header is pinned top, body handles scroll */
.modal-box.flex-col,
#endpointDetailModal .modal-box {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  max-height: calc(100dvh - var(--header-h, 3.6rem) - var(--dock-h, 4.5rem) - 1.25rem);
}

.endpoint-modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  flex-shrink: 0 !important;
}

.endpoint-scrollable-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .modal-backdrop {
    padding: calc(var(--header-h, 3.6rem) + 0.35rem) 0.5rem calc(var(--dock-h, 4.25rem) + 0.5rem);
    align-items: center;
  }
  .modal-box {
    max-height: calc(100dvh - var(--header-h, 3.6rem) - var(--dock-h, 4.25rem) - 0.75rem);
    border-radius: 16px;
    padding: 1rem;
  }
  .modal-box.flex-col,
  #endpointDetailModal .modal-box {
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* ---------- Toast (Top-Right Aligned with Banner Endpoint) ---------- */
#onlym-toast-container,
.toast-container {
  position: fixed !important;
  top: calc(var(--header-h, 3.6rem) + 0.75rem) !important;
  bottom: auto !important;
  right: 1rem !important;
  left: auto !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
  pointer-events: none !important;
  max-width: calc(100vw - 2rem) !important;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(12,14,20,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  font-size: 0.83rem;
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: auto;
  animation: slide-in-toast 0.3s var(--ease-bounce) forwards;
  max-width: 320px;
}
.toast.removing { animation: slide-out-toast 0.25s ease forwards; }
.toast-icon { flex-shrink: 0; }
.toast.success .toast-icon { color: var(--emerald); }
.toast.error   .toast-icon { color: var(--rose); }
.toast.info    .toast-icon { color: #60a5fa; }
@keyframes slide-in-toast {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-toast {
  to { opacity: 0; transform: translateX(24px); }
}

/* ---------- Sparkline ---------- */
/* Sparkline base — versi lengkap (animasi & glow) ada di blok
   "REALTIME ANALYTICS ANIMATIONS" di bawah. */

/* ---------- SVG Circular Progress ---------- */
.circular-progress {
  transform: rotate(-90deg);
}
.circular-progress circle {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Dropzone ---------- */
.retention-btn {
  padding: 0.5rem 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color var(--ease-fast),
              border-color var(--ease-fast),
              color var(--ease-fast),
              box-shadow var(--ease-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.retention-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
}
.retention-btn.active {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.4);
  color: var(--emerald);
  box-shadow: 0 2px 8px rgba(16,185,129,0.15);
}
.retention-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dropzone {
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-xl);
  /* v3.9: padding vertikal dikecilkan karena pill format + baris limit sekarang
     berada di dalam kotak ini. */
  padding: 2rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
/* Ambient subtle red glow */
.dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, 0.12) 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* Tactile press feedback */
.dropzone:active {
  transform: scale(0.985);
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.25), inset 0 0 16px rgba(239, 68, 68, 0.08);
  transition: transform 0.1s ease, border-color 0.1s ease;
}
/* Pill/limit di dalam dropzone tidak boleh menelan klik — seluruh kotak
   harus tetap membuka file picker. */
.dropzone > * { pointer-events: none; position: relative; z-index: 2; }
.dz-kbd {
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.dz-limit {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--red-primary);
  background: var(--red-glow-xs);
  box-shadow: 0 0 32px var(--red-glow-sm), inset 0 0 32px rgba(200,27,28,0.04);
}
.dropzone.dragover {
  border-color: var(--red-vivid);
  transform: scale(1.005);
}

/* Energetic bouncing icon removed for calm workspace */
.dropzone-icon-float {
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.35));
}

/* ---------- Progress Bar ---------- */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red-primary), var(--red-vivid), #f97316);
  background-size: 200% 100%;
  animation: shimmer-progress 1.5s ease infinite;
  transition: width 0.2s linear;
}
@keyframes shimmer-progress {
  0%  { background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---------- Live Indicator (clean static dot) ---------- */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px rgba(52,211,153,0.4);
  flex-shrink: 0;
}

/* ---------- Marquee ---------- */
.marquee-wrap {
  overflow-x: auto;
  width: 100%;
  scrollbar-width: none;
}
.marquee-wrap::-webkit-scrollbar { display: none; }
.marquee-track {
  display: inline-flex;
  width: max-content;
  gap: 1rem;
}

/* ---------- Param Grid Picker ---------- */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.4rem;
}
.param-choice {
  padding: 0.4em 0.6em;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--ease-fast),
              border-color var(--ease-fast),
              color var(--ease-fast),
              transform var(--ease-fast),
              box-shadow var(--ease-fast);
  user-select: none;
}
.param-choice:hover {
  background: rgba(220,38,38,0.14);
  border-color: rgba(220,38,38,0.4);
  color: #fff;
  transform: translateY(-1px);
}
.param-choice.selected {
  background: rgba(220,38,38,0.22);
  border-color: var(--red-vivid);
  color: #fff;
  box-shadow: 0 0 8px var(--red-glow-sm);
}

/* ---------- Leaderboard Medals ---------- */
.medal-gold   { color: #f59e0b; filter: drop-shadow(0 0 6px rgba(245,158,11,0.6)); }
.medal-silver { color: #94a3b8; filter: drop-shadow(0 0 4px rgba(148,163,184,0.4)); }
.medal-bronze { color: #b45309; filter: drop-shadow(0 0 4px rgba(180,83,9,0.4)); }

/* ---------- Tab System ---------- */
.tab-list {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  padding: 4px;
}
.tab-btn {
  flex: 1;
  padding: 0.5em 1em;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: color var(--ease-smooth),
              background-color var(--ease-smooth),
              box-shadow var(--ease-smooth);
  user-select: none;
  -webkit-user-select: none;
}
.tab-btn:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.tab-btn.active {
  background: rgba(220,38,38,0.22);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.28s var(--ease-smooth); }

/* Auth card panels wrapper & smooth window open/close animation below Turnstile */
.auth-panels-wrapper {
  overflow: hidden;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
  position: relative;
}
#authPanelsWrapper .tab-panel.active {
  animation: none;
}
#authPanelsWrapper .tab-panel.anim-slide-unfold {
  animation: authPanelWindowUnfold 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
}
@keyframes authPanelWindowUnfold {
  0% {
    opacity: 0;
    transform: translateY(-18px) scaleY(0.92);
    clip-path: inset(0 0 100% 0 round 12px);
    filter: blur(4px);
  }
  55% {
    opacity: 0.92;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    clip-path: inset(0 0 0% 0 round 12px);
    filter: blur(0px);
  }
}

/* Section yang jadi target scrollIntoView({block:'start'}) — scroll-padding-top
   di html tidak berlaku untuk scrollIntoView, jadi butuh scroll-margin di target. */
#topupSection, [id][data-scroll-target] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* ---------- Page Content Wrapper ---------- */
.page-content {
  position: relative;
  z-index: auto;
  flex: 1 0 auto;
  min-height: 0;
  padding-bottom: 1.5rem;
}

.page-content:has(.modal-backdrop.open),
.page-content:has(#aiModelBottomSheet.flex) {
  z-index: 300 !important;
}

/* ---------- Footer (v3.9 — 100% Transparent Ambient Overlay) ---------- */
footer#contact {
  position: relative;
  z-index: 1 !important;
  margin-top: auto;
  flex-shrink: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
  padding-top: 1.5rem;
  padding-bottom: calc(var(--dock-h, 4.5rem) + 1.25rem) !important;
}

body.modal-open footer#contact,
html:has(.modal-backdrop.open) footer#contact,
html:has(#aiModelBottomSheet.flex) footer#contact {
  z-index: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.modal-open .onlym-nav,
html:has(.modal-backdrop.open) .onlym-nav,
html.modal-open .onlym-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 20px) scale(0.95) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

footer#contact .glass-card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

footer#contact .glass-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 640px) {
  footer#contact {
    padding-top: 1.25rem;
    padding-bottom: calc(var(--dock-h, 4.25rem) + 0.85rem) !important;
  }
  footer#contact .grid {
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Desktop Browser (>768px): Sembunyikan PWA Install Banner & tombol install di Lainnya */
@media (min-width: 769px) {
  #pwa-install-banner,
  #onlymInstallBtn {
    display: none !important;
  }
}

/* ---------- Details (accordion) styling ---------- */
details summary::-webkit-details-marker,
details summary::marker {
  display: none !important;
}
details summary {
  list-style: none !important;
}

/* ---------- Stat Cards (Vesper stats-row style) ---------- */
.stat-card {
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--red-glow-xs);
  filter: blur(24px);
  pointer-events: none;
  transition: transform var(--ease-smooth), opacity var(--ease-smooth);
  opacity: 0.7;
}
.stat-card:hover::before {
  transform: scale(1.35);
  opacity: 1;
}

/* Vesper-style stat row — thin top border, big numeral */
.stat-cell {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.09);
  transition: border-color var(--ease-smooth);
}
.stat-cell:hover { border-top-color: rgba(220,38,38,0.5); }
.stat-cell .stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8; /* slate-400 — readable on dark glass (was too-dim --text-muted) */
}
.stat-cell .stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Metric icon chip + shared stat label/value (dashboard cards) */
.metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.metric-icon svg { width: 13px; height: 13px; }
.stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}
.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ============================================================
   LIVE METRIC INDICATORS (v3.9.1 dashboard)
   ------------------------------------------------------------
   Anatomi seragam untuk 6 kartu metrik:
     .metric-head → .metric-value-row → [.metric-subline] → .metric-viz → .metric-foot
   Tinggi viz dipatok supaya keenam kartu rata walau isinya beda
   (sparkline vs gauge vs daftar vs bar-jam).
   ============================================================ */
.metric-card {
  display: flex;
  flex-direction: column;
  /* v3.9.2: dikompakkan agar terasa seperti panel analitik modern, bukan
     kartu besar. Di mobile lebih ramping lagi (lihat media query bawah). */
  padding: 0.85rem 0.9rem 0.75rem;
}
.metric-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.metric-head .stat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
/* Angka utama = fokus kartu, tapi tetap proporsional (analitik, bukan hero). */
/* Angka utama = fokus kartu (bold, tabular-nums, Foto 2) */
.metric-number {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.metric-card {
  padding: 1.1rem 1.15rem 1rem;
}

.metric-subline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-muted);
}
.metric-subline .metric-chip { margin-left: auto; }
/* Tinggi tetap: keenam kartu sejajar, dan empty-state tidak bikin layout lompat. */
.metric-viz {
  position: relative;
  margin-top: 0.55rem;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.metric-viz-split {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}
.metric-foot {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
}
.metric-hint { font-size: 9.5px; color: var(--text-faint); }

@media (max-width: 640px) {
  #metricsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .metric-card { padding: 0.55rem 0.65rem 0.5rem; }
  .metric-head { gap: 0.35rem; margin-bottom: 0.35rem; }
  .metric-icon { width: 22px; height: 22px; border-radius: 7px; }
  .metric-icon svg { width: 11px; height: 11px; }
  .metric-head .stat-label { font-size: 8px; letter-spacing: 0.08em; }
  .metric-number { font-size: 1.05rem; }
  .metric-delta { font-size: 7.5px; padding: 0.06rem 0.24rem; }
  .metric-chip { font-size: 7.5px; padding: 0.08rem 0.28rem; }
  .metric-viz { min-height: 24px; margin-top: 0.35rem; }
  .metric-foot { font-size: 8px; margin-top: 0.3rem; padding-top: 0.25rem; }
  .metric-subline { font-size: 8.5px; }
  .hour-bars { height: 24px; }
  .metric-gauge { width: 34px !important; height: 34px !important; }
}

/* Health dot — hijau/kuning/merah sesuai kondisi data (diisi JS), bukan
   hardcode hijau. Abu-abu = belum ada data, jadi kartu kosong tidak
   berpura-pura sehat. */
.metric-health {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex-shrink: 0;
  background: var(--text-faint);
  opacity: 1;
  transition: background var(--ease-smooth), box-shadow var(--ease-smooth);
}
.metric-health.is-ok     { background: var(--emerald); }
.metric-health.is-warn   { background: var(--amber); }
.metric-health.is-danger { background: var(--rose); }
.metric-health.is-idle   { background: var(--text-faint); }
/* Denyut hanya saat data baru masuk — warnanya ikut status kartu. */
.metric-health.beating.is-ok     { animation: beat-ok 1.6s ease-out; }
.metric-health.beating.is-warn   { animation: beat-warn 1.6s ease-out; }
.metric-health.beating.is-danger { animation: beat-danger 1.6s ease-out; }
@keyframes beat-ok {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@keyframes beat-warn {
  0% { box-shadow: 0 0 0 0 rgba(251,191,36,0.5); } 70% { box-shadow: 0 0 0 8px rgba(251,191,36,0); } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
@keyframes beat-danger {
  0% { box-shadow: 0 0 0 0 rgba(248,113,113,0.55); } 70% { box-shadow: 0 0 0 8px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}

/* Empty state — ikon outline + kalimat penjelas, menempati slot viz supaya
   tidak terlihat seperti grafik gagal render. */
.metric-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 9.5px;
  line-height: 1.35;
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
}
.metric-empty[hidden] { display: none; }
.metric-empty svg { opacity: 0.55; }
/* Saat empty aktif, grafik di belakangnya disembunyikan sepenuhnya. */
.metric-viz.is-empty > :not(.metric-empty) { visibility: hidden; }

/* Delta tren naik/turun/tetap */
.metric-delta {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
}
.metric-delta.up   { color: var(--emerald); border-color: var(--emerald-border); background: var(--emerald-bg); }
.metric-delta.down { color: var(--rose);    border-color: var(--rose-border);    background: var(--rose-bg); }
.metric-delta.flat { color: var(--text-muted); }

/* Chip status. `.neutral` untuk state "kosong" — abu-abu, jadi terbaca
   sebagai status yang disengaja, bukan warning. */
.metric-chip {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 99px;
  border: 1px solid var(--emerald-border);
  background: var(--emerald-bg);
  color: var(--emerald);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
}
.metric-chip.neutral { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text-muted); }
.metric-chip.warn    { border-color: var(--amber-border); background: var(--amber-bg); color: var(--amber); }
.metric-chip.danger  { border-color: var(--rose-border);  background: var(--rose-bg);  color: var(--rose); }
/* Kritis alert: outline halus tanpa animasi perulangan tak henti */
.metric-chip.danger.alert {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.12);
}
/* Ikon kartu Error Rate ikut memerah saat kritis */
.metric-icon.is-critical {
  background: rgba(244,63,94,0.2) !important;
  border-color: rgba(248,113,113,0.5) !important;
}

.metric-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Radial gauge — stroke-dashoffset digerakkan JS */
.metric-gauge { transform: rotate(-90deg); flex-shrink: 0; }
.metric-gauge .gauge-track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 4;
}
.metric-gauge .gauge-fill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113.1; /* 2πr, r=18 */
  stroke-dashoffset: 113.1;
  transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1), stroke 300ms ease;
}

/* Bar ambang batas + skala. Penanda pada 10%/50% lebar = error 1%/5%,
   karena bar penuh dipetakan ke 10% error (lihat setThreshold di JS). */
.threshold-bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.threshold-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--emerald), #fbbf24 60%, var(--red-vivid));
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.threshold-mark {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.4);
}
.threshold-mark.warn { background: rgba(251,191,36,0.75); }
.threshold-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--text-faint);
}

/* Daftar top halaman di kartu Page Stats */
.page-stat-list { display: flex; flex-direction: column; gap: 0.4rem; }
.page-stat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.4rem;
  align-items: center;
  font-size: 9.5px;
}
.page-stat-row .path {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-stat-row .hits {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: #38bdf8;
}
.page-stat-row .track {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.page-stat-row .track > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bar per-jam untuk visitor logs 24 jam */
.hour-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
}
.hour-bars > span {
  flex: 1;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(244,114,182,0.85), rgba(244,114,182,0.2));
  transition: height 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hour-bars > span.now {
  background: linear-gradient(180deg, #fb7185, #f472b6);
  box-shadow: 0 0 8px rgba(251,113,133,0.4);
}
.hour-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--text-faint);
}

/* ============================================================
   REALTIME ANALYTICS ANIMATIONS (v3.9.2)
   ------------------------------------------------------------
   Membuat 6 kartu metrik terasa "hidup" seperti panel analitik
   modern: garis sparkline menggambar sendiri, sapuan scanline
   halus, dan angka berkedip saat nilai berubah.
   ============================================================ */

/* 1. Sparkline menggambar sendiri saat data baru masuk */
.sparkline {
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px currentColor);
}
.sparkline.drawing {
  stroke-dasharray: 240;
  animation: spark-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes spark-draw {
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}
.sparkline-area {
  fill-opacity: 0.16;
  transition: fill-opacity var(--ease-smooth);
}
.metric-card:hover .sparkline-area { fill-opacity: 0.26; }

/* 2. Scanline halus melintasi area grafik — sinyal "live monitoring" */
.metric-viz::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: -110% 0;
  opacity: 0;
}
.metric-card[data-live="1"] .metric-viz::after {
  opacity: 0.7;
}

/* 3. Angka berkedip singkat saat nilainya berubah */
.metric-number.value-changed {
  animation: value-flash 700ms ease-out;
}
@keyframes value-flash {
  0%   { text-shadow: 0 0 12px currentColor; filter: brightness(1.45); }
  100% { text-shadow: none; filter: brightness(1); }
}

/* 4. Bar per-jam muncul bertahap (efek "streaming") */
.hour-bars.animate-in > span {
  animation: bar-rise 480ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes bar-rise {
  from { transform: scaleY(0.15); opacity: 0.35; }
  to   { transform: scaleY(1); opacity: 1; }
}
.hour-bars > span { transform-origin: bottom; }

/* 5. Border kartu bersinar tipis mengikuti status kesehatan */
.metric-card[data-state="danger"] { border-color: rgba(248,113,113,0.32) !important; }
.metric-card[data-state="warn"]   { border-color: rgba(251,191,36,0.28) !important; }
.metric-card[data-state="ok"]     { border-color: rgba(52,211,153,0.22) !important; }

/* Ring gauge besar (kartu Limit Tersisa di profil). Rotasi & transisi ada di
   CSS, bukan inline style, supaya bisa dinonaktifkan oleh reduced-motion. */
.metric-ring-wrap {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}
.metric-ring #limitRing {
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 900ms cubic-bezier(0.16, 1, 0.3, 1), stroke 300ms ease;
}
/* Ring status kritis — aksen border merah terdefinisi tanpa animasi loop */
.metric-ring.is-critical #limitRing {
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.4));
}

/* ---------- Premium gold glow (profile identity card) ---------- */
.premium-glow {
  border-color: rgba(251,191,36,0.4) !important;
  box-shadow: 0 0 0 1px rgba(251,191,36,0.25),
              0 20px 50px rgba(0,0,0,0.5),
              0 0 40px rgba(251,191,36,0.15) !important;
}
.badge-premium-gold {
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.45);
  box-shadow: 0 0 12px rgba(251,191,36,0.25);
}

/* ---------- Synchronized Profile Metric Cards (v3.8) ---------- */
#memberView .grid .metric-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 24, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1rem;
  padding: 1.15rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

#memberView .grid .metric-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* ══════════════════════════════════════════════════════════════
   PMC — Profile Metrics Compact Strip  (v3.9.x)
   UI-UX Pro Max: Data-Dense Dashboard + Micro-interactions
   Satu strip glass horizontal, 3 sel sejajar, hemat scroll.
   ══════════════════════════════════════════════════════════════ */
.pmc-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(10, 12, 20, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pmc-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  cursor: default;
  position: relative;
  transition: background 0.2s ease;
}
.pmc-cell:hover { background: rgba(255,255,255,0.03); }
.pmc-divider {
  width: 1px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-self: stretch;
  margin: 8px 0;
}
.pmc-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.pmc-cell:hover .pmc-icon { transform: scale(1.08); }
.pmc-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pmc-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(148, 163, 184, 0.7);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmc-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
}
.pmc-val {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pmc-bar-wrap {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 3px;
}
.pmc-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.pmc-spark {
  width: 100%;
  margin-top: 2px;
}
.pmc-sub {
  font-size: 8px;
  color: rgba(100, 116, 139, 0.75);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
/* Responsive: dibawah 480px susun vertikal */
@media (max-width: 480px) {
  .pmc-strip {
    flex-direction: column;
    border-radius: 14px;
  }
  .pmc-divider {
    width: auto;
    height: 1px;
    margin: 0 10px;
    align-self: auto;
  }
  .pmc-cell { padding: 9px 12px; }
  .pmc-val { font-size: 1rem; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .pmc-val { font-size: 0.95rem; }
  .pmc-cell { padding: 9px 10px; gap: 7px; }
}

/* Perbandingan Paket Matrix Table Scrollbar & Sticky header — Glowing Red Scrollbar */
#comparisonTableWrap {
  scrollbar-width: thin !important;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.06) !important;
}
#comparisonTableWrap::-webkit-scrollbar {
  height: 8px !important;
  width: 8px !important;
}
#comparisonTableWrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
}
#comparisonTableWrap::-webkit-scrollbar-thumb {
  background: #ef4444 !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75) !important;
}
#comparisonTableWrap::-webkit-scrollbar-thumb:hover {
  background: #dc2626 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 1) !important;
}

/* ---------- Info Rows (account details) ---------- */
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--ease-fast), padding-left var(--ease-fast);
  border-radius: 6px;
}
.info-row:last-child { border-bottom: none; }
.info-row:hover { background: rgba(255,255,255,0.025); padding-left: 0.55rem; }
.info-key {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.info-val {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  word-break: break-all;
}

/* ---------- Danger zone item ---------- */
.danger-item {
  border: 1px solid rgba(248,113,113,0.16);
  background: rgba(248,113,113,0.04);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  transition: border-color var(--ease-smooth), background var(--ease-smooth);
}
.danger-item:hover {
  border-color: rgba(248,113,113,0.32);
  background: rgba(248,113,113,0.06);
}

/* ---------- Ping Dot Matrix ---------- */
.ping-tier-fast   { color: var(--emerald); }
.ping-tier-medium { color: var(--amber); }
.ping-tier-slow   { color: var(--rose); }

/* ============================================================
   SCROLL REVEAL — sections rise as you scroll (v3.8)
   NOTE: Never leave active `transform` or `will-change` after reveal,
   as Chromium / Android Chrome treats transformed ancestors as Backdrop Roots,
   which breaks `backdrop-filter: blur(...)` on child `.glass-card` elements
   and causes a 26px clip seam on Android mobile!
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed {
  opacity: 1;
  transform: none !important;
  will-change: auto !important;
}

/* ---------- Animations ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in-fast {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}

.anim-fade-in { animation: fade-in 0.35s var(--ease-smooth); }
.anim-fade-in-fast { animation: fade-in-fast 0.25s ease; }
.anim-scale-in { animation: scale-in 0.3s var(--ease-bounce); }

/* ============================================================
   SPA PAGE TRANSITIONS (v3.9)
   ============================================================
   PENTING: hanya `opacity` yang dianimasikan pada #spa-view dan .page-enter.
   `transform`/`filter` pada ancestor akan membuat Backdrop Root di Android Chrome
   sehingga `backdrop-filter: blur(...)` pada `.glass-card` mati atau terpotong. */
#spa-view {
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
#spa-view.view-leaving {
  opacity: 0;
}

@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}
.page-enter {
  animation: page-enter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progress bar tipis di atas — feedback instan saat route berganti,
   supaya klik nav tidak terasa "menggantung" saat view di-fetch. */
#spa-route-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 999999;
  background: linear-gradient(90deg, #dc2626, #ef4444, #f97316);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.75);
  opacity: 0;
  transition: width 240ms ease-out, opacity 200ms ease;
  pointer-events: none;
  display: none;
}
#spa-route-progress.active {
  display: block;
  opacity: 1;
}
#spa-route-progress.done {
  display: block;
  width: 100%;
  opacity: 0;
}

/* Staggered entrance for lists/grids */
.stagger > * {
  animation: fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 40ms; }
.stagger > *:nth-child(3)  { animation-delay: 80ms; }
.stagger > *:nth-child(4)  { animation-delay: 120ms; }
.stagger > *:nth-child(5)  { animation-delay: 160ms; }
.stagger > *:nth-child(6)  { animation-delay: 200ms; }
.stagger > *:nth-child(7)  { animation-delay: 240ms; }
.stagger > *:nth-child(8)  { animation-delay: 280ms; }
.stagger > *:nth-child(n+9){ animation-delay: 320ms; }

/* Count-up flash when value changes */
.count-flash { animation: count-flash 0.5s ease; }
@keyframes count-flash {
  0% { color: #feca8a; }
  100% { color: inherit; }
}

/* ---------- Param Info Icon (!) tooltip ---------- */
.param-info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(251,191,36,0.4);
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 900;
  cursor: help;
  user-select: none;
  flex-shrink: 0;
}
.param-info-icon .param-info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  min-width: 160px;
  max-width: 240px;
  width: max-content;
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  background: rgba(10,12,18,0.97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--ease-fast), visibility var(--ease-fast), transform var(--ease-fast);
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.param-info-icon:hover .param-info-tooltip,
.param-info-icon:focus .param-info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.param-info-wrap {
  position: absolute;
  top: 50%;
  right: 2.25rem;
  z-index: 35;
  display: inline-flex;
  transform: translateY(-50%);
}
.param-info-wrap .param-info-icon {
  cursor: pointer;
}
.param-info-wrap .param-info-tooltip {
  right: -0.75rem;
  width: min(15rem, calc(100vw - 2rem));
  pointer-events: none;
}
.param-info-wrap:hover .param-info-tooltip,
.param-info-wrap:focus-within .param-info-tooltip,
.param-info-wrap.is-open .param-info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.param-info-example {
  display: inline-flex;
  min-height: 28px;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7dd3fc;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- Locked Endpoint Card ---------- */
.api-locked .endpoint-head { cursor: default; }
.api-locked .endpoint-head:hover { background: transparent; }
.api-locked .endpoint-head:hover .ep-icon { transform: none; }

/* ---------- Header Profile Avatar ---------- */
.header-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-border);
  transition: transform var(--ease-bounce), box-shadow var(--ease-smooth);
}
.header-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 14px var(--red-glow-sm);
}

/* ---------- Feature Pills (uncopyable) ---------- */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  transition: border-color var(--ease-smooth), color var(--ease-smooth);
}
.feature-pill:hover { border-color: rgba(255,255,255,0.22); color: var(--text-primary); }
.feature-pill .dot { color: var(--emerald); }
.feature-pill .star { color: var(--amber); }

/* ---------- Skeleton shimmer ---------- */
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}
.skeleton-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.045), transparent);
  transform: translateX(-100%);
  animation: shimmer-sweep 1.6s infinite;
}
@keyframes shimmer-sweep {
  100% { transform: translateX(100%); }
}

/* ============================================================
   PROFILE v3.9 — APIKey blur reveal + Topup pricing cards
   ============================================================ */

/* APIKey: default blur, reveals ONLY when hovering directly on the text */
.apikey-blur {
  filter: blur(5px);
  transition: filter var(--ease-fast);
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.apikey-blur:hover,
.apikey-blur:focus {
  filter: blur(0);
  background: rgba(16, 185, 129, 0.12);
}

/* Topup cycle toggle (Bulanan / Tahunan) */
.topup-cycle-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}
.topup-cycle-btn:hover { color: var(--text-secondary); }
.topup-cycle-btn.active {
  background: rgba(220,38,38,0.22);
  color: #fff;
}
/* Pricing card */
.price-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible !important;
  transition: transform var(--ease-smooth), border-color var(--ease-smooth),
              box-shadow var(--ease-smooth);
}
.price-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 1px var(--glass-glow-in);
}
.price-tier.popular {
  border-color: rgba(251,191,36,0.5);
  box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 0 28px rgba(251,191,36,0.12),
              inset 0 1px 1px var(--glass-glow-in);
}
.price-tier.selected {
  transform: translateY(-4px);
  border-color: var(--red-vivid);
  box-shadow: 0 30px 60px rgba(0,0,0,0.65), 0 0 24px var(--red-glow-sm);
}
.tier-badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid rgba(251,191,36,0.5);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(245,158,11,0.45);
}
.price-tier-price {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.price-feature-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  padding: 0.28rem 0;
}
.price-feature-row.excluded { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.3); }
.price-feature-row svg { flex-shrink: 0; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  /* Transisi halaman jadi cut instan — tanpa fade/slide */
  #spa-view, #spa-view.view-leaving { opacity: 1 !important; transition: none !important; }
  .page-enter { animation: none !important; }
  #spa-route-progress { display: none !important; }
  /* Indikator metrik: warna tetap informatif, denyutnya dimatikan */
  .metric-health.beating,
  .metric-chip.danger.alert,
  .metric-ring.is-critical #limitRing { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-header { padding: 0 16px !important; }
  .hero-container { padding-top: 5.5rem; }
  /* HANYA search bar di header yang di-hide di mobile.
     Search bar di halaman docs/home tetap tampil penuh di mobile & Android! */
  .site-header .search-bar { display: none; }
}
@media (max-width: 768px) {
  .glass-card { border-radius: var(--radius-lg); }
}

/* ============================================================
   HERO FEATURE BADGES (Non-clickable living status pills)
   ============================================================ */
@keyframes heroBadgeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}

.hero-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  user-select: none;
  cursor: default !important;
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  animation: heroBadgeFloat 3.8s ease-in-out infinite;
}
.hero-badge-free {
  background: rgba(16, 185, 129, 0.11);
  border-color: rgba(52, 211, 153, 0.34);
  color: #34d399;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.14);
  animation-delay: 0s;
}
.hero-badge-ai {
  background: rgba(99, 102, 241, 0.11);
  border-color: rgba(129, 140, 248, 0.34);
  color: #a5b4fc;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.14);
  animation-delay: 0.6s;
}
.hero-badge-prem {
  background: rgba(245, 158, 11, 0.11);
  border-color: rgba(251, 191, 36, 0.34);
  color: #fbbf24;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.14);
  animation-delay: 1.2s;
}

/* ============================================================
   TEXT LOCK (v3.9) — UI chrome tidak bisa di-select/copy
   ============================================================
   Label, heading, badge, nav, tombol, dan teks dekoratif dikunci
   supaya UI tidak bisa diseret/di-copy. Yang MASIH bisa dipilih:
   input/textarea, kode & snippet, URL/APIKey, output JSON, dan
   apapun yang diberi class .selectable / [data-selectable].
   ------------------------------------------------------------ */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* matikan menu long-press iOS/Android */
}

/* Whitelist — data milik user tetap bisa disalin manual */
input,
textarea,
select,
code,
pre,
kbd,
samp,
[contenteditable="true"],
.selectable,
[data-selectable],
.response-viewer,
.curl-preview,
.mono,
.num,
#cdnUrlInput,
#historyList a,
#announcementList {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Elemen yang tidak boleh ikut terpilih meski berada di dalam blok kode */
.response-viewer .line-no,
.dropzone,
.btn,
.badge,
.feature-pill,
.tab-btn,
.retention-btn,
.site-header,
footer {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Kunci drag gambar/ikon (drag-away = cara lain "meng-copy" aset) */
img:not([data-draggable]),
svg {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ---------- Overflow Guard (v3.9) ----------
   Scrollbar horizontal di desktop muncul karena elemen full-bleed melampaui
   viewport. html dijadikan satu-satunya scroll container (body pakai
   overflow-x: clip di atas) supaya tidak ada scrollbar ganda. */
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   GET API POPUP RED SCROLLBAR & NOTIFICATION PULSE (v4.0.6)
   ============================================================ */
#endpointDetailModal .modal-body,
#endpointDetailModal .overflow-y-auto,
#endpointDetailModal pre,
#endpointDetailModal code {
  scrollbar-width: thin !important;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.08) !important;
}
#endpointDetailModal .modal-body::-webkit-scrollbar,
#endpointDetailModal .overflow-y-auto::-webkit-scrollbar,
#endpointDetailModal pre::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}
#endpointDetailModal .modal-body::-webkit-scrollbar-track,
#endpointDetailModal .overflow-y-auto::-webkit-scrollbar-track,
#endpointDetailModal pre::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
  border-radius: 4px;
}
#endpointDetailModal .modal-body::-webkit-scrollbar-thumb,
#endpointDetailModal .overflow-y-auto::-webkit-scrollbar-thumb,
#endpointDetailModal pre::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-radius: 4px;
  box-shadow: none !important;
}
#endpointDetailModal .modal-body::-webkit-scrollbar-thumb:hover,
#endpointDetailModal .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#endpointDetailModal pre::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

.notif-dot-glow {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #080a0f;
  box-shadow: 0 0 10px #ef4444, 0 0 14px rgba(239, 68, 68, 0.8);
}

/* ============================================================
   HIGH-CONTRAST OBSIDIAN CARDS & PANELS (v4.0 ui-ux-pro-max)
   Ensures cards never blend with background wallpaper
   ============================================================ */
.glass-card, 
.dropzone,
#identityCard,
#apiKeyManagerCard,
#sessionsCard,
#uploadPanel,
#resultCard,
.danger-item,
details.glass-card {
  background: rgba(11, 13, 21, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.glass-card:hover,
#identityCard:hover,
#apiKeyManagerCard:hover {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.input, input.input, textarea.input, select.input {
  background: #07080e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}
.input:focus, input.input:focus, textarea.input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3) !important;
}

/* Bento 2026 Glass Surface */
.bento-surface {
  background: radial-gradient(130% 120% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(13, 16, 23, 0.88) 55%, rgba(6, 8, 12, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-surface:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.bento-surface:active {
  transform: scale(0.98);
}

/* Gradient metallic texts */
.gold-gradient {
  background: linear-gradient(135deg, #fffbeb 0%, #fde047 30%, #eab308 60%, #ca8a04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}
.emerald-gradient {
  background: linear-gradient(135deg, #d1fae5 0%, #34d399 45%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cyan-gradient {
  background: linear-gradient(135deg, #f0f9ff 0%, #38bdf8 45%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   UPLOADER: Riwayat Upload Scroll Container (Maksimal 8 Foto)
   Red Scrollbar (Matches response.sh) + Overscroll Page Chaining
   ============================================================ */
#historyTableBody {
  max-height: 660px;
  overflow-y: auto;
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.08) !important;
}
#historyTableBody::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}
#historyTableBody::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 4px;
}
#historyTableBody::-webkit-scrollbar-thumb {
  background: #ef4444 !important;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45) !important;
}
#historyTableBody::-webkit-scrollbar-thumb:hover {
  background: #f87171 !important;
}
@media (min-width: 640px) {
  #historyTableBody {
    max-height: 695px;
  }
}

/* ══════════ Foto 2 Style: 16:9 Locked Banner Cropper ══════════ */
.cropper-container {
  font-family: inherit;
  user-select: none;
}
.cropper-view-box {
  outline: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 12px rgba(239, 68, 68, 0.35);
  border-radius: 4px;
}
.cropper-dashed {
  border: 1px dashed rgba(255, 255, 255, 0.6) !important;
}
.cropper-modal {
  background-color: rgba(0, 0, 0, 0.78) !important;
}
/* White corner brackets matching Foto 2 */
.cropper-point {
  background-color: transparent !important;
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
  z-index: 20 !important;
}
.cropper-point.point-nw {
  top: -3px !important;
  left: -3px !important;
  border-top: 3.5px solid #ffffff !important;
  border-left: 3.5px solid #ffffff !important;
  cursor: nwse-resize !important;
}
.cropper-point.point-ne {
  top: -3px !important;
  right: -3px !important;
  border-top: 3.5px solid #ffffff !important;
  border-right: 3.5px solid #ffffff !important;
  cursor: nesw-resize !important;
}
.cropper-point.point-sw {
  bottom: -3px !important;
  left: -3px !important;
  border-bottom: 3.5px solid #ffffff !important;
  border-left: 3.5px solid #ffffff !important;
  cursor: nesw-resize !important;
}
.cropper-point.point-se {
  bottom: -3px !important;
  right: -3px !important;
  border-bottom: 3.5px solid #ffffff !important;
  border-right: 3.5px solid #ffffff !important;
  cursor: nwse-resize !important;
}
/* Edge lines clickable for drag/move without distorting 16:9 aspect ratio */
.cropper-line {
  background-color: #ef4444 !important;
  opacity: 0.8 !important;
}
.cropper-point.point-n,
.cropper-point.point-s,
.cropper-point.point-e,
.cropper-point.point-w {
  display: none !important;
}

/* Dimension pill matching Foto 2 */
.cropper-dimension-pill {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 30;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  user-select: none;
}

/* ============================================================
   APPEARANCE SWITCHER MODAL & GLOBAL GLASSMORPHISM UI (v4.5.3)
   Covers: Home (Docs), Dashboard, Profile, Uploader & AI Studio
   ============================================================ */

/* Active state for Appearance Modal option cards */
.appearance-opt-btn {
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.appearance-opt-btn .opt-check {
  opacity: 0.25;
  transform: scale(0.85);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.appearance-opt-btn.active {
  border-color: rgba(239, 68, 68, 0.65) !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  box-shadow: 0 8px 24px -6px rgba(239, 68, 68, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.appearance-opt-btn.active .opt-check {
  opacity: 1;
  transform: scale(1);
  background: #ef4444;
  border-color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

/* Smooth animated transition when toggling Wallpaper or UI Mode
   (NOTE: Never apply filter/transform to #spa-view so fixed modals stay viewport-anchored) */
html.ui-theme-switching .glass-card,
html.ui-theme-switching .bento-surface,
html.ui-theme-switching #userQuickCard,
html.ui-theme-switching #userProfileState,
html.ui-theme-switching #userGuestState,
html.ui-theme-switching #identityCard,
html.ui-theme-switching #apiKeyManagerCard,
html.ui-theme-switching #topupSection,
html.ui-theme-switching #securityCard,
html.ui-theme-switching #dangerCard,
html.ui-theme-switching #uploadPanel,
html.ui-theme-switching #resultCard,
html.ui-theme-switching .ep-card,
html.ui-theme-switching .cat-card,
html.ui-theme-switching .modal-box,
html.ui-theme-switching .onlym-nav,
html.ui-theme-switching header.site-header {
  transition: background 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── GLASSMORPHISM MODE (html.ui-mode-glass) ── */
/* 1. Reveal background wallpaper (Static or TMNT Video) clearly behind glass */
html.ui-mode-glass .onlym-bg-stage .scrim {
  background: linear-gradient(
    to bottom,
    rgba(5, 7, 14, 0.36) 0%,
    rgba(5, 7, 14, 0.22) 45%,
    rgba(5, 7, 14, 0.44) 100%
  ) !important;
}

html.ui-mode-glass.bg-mode-banner .onlym-bg-stage .bg-image-layer {
  opacity: 0.96 !important;
}

html.ui-mode-glass:not(.bg-mode-banner) .onlym-bg-stage .bg video {
  opacity: 0.95 !important;
}

/* 2. Frosted Glass Header, Transparent Ambient Footer & Floating Bottom Dock */
html.ui-mode-glass header.site-header {
  background: linear-gradient(180deg, rgba(16, 20, 30, 0.54) 0%, rgba(10, 13, 22, 0.44) 100%) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Keep footer#contact 100% transparent without any rectangular box or bottom gap (Fixes Photo 1 & 3) */
html.ui-mode-glass footer#contact {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

html.ui-mode-glass footer#contact .glass-card {
  background: linear-gradient(145deg, rgba(20, 25, 38, 0.56) 0%, rgba(11, 14, 24, 0.64) 100%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html.ui-mode-glass footer#contact .glass-card:hover {
  background: linear-gradient(145deg, rgba(28, 34, 50, 0.66) 0%, rgba(15, 19, 32, 0.72) 100%) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

/* Bottom Navigation Dock (.onlym-nav) in Glassmorphism Mode */
html.ui-mode-glass .onlym-nav {
  background: linear-gradient(145deg, rgba(18, 22, 34, 0.62) 0%, rgba(10, 13, 22, 0.70) 100%) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
}

/* Remove duplicate outer border frame around Profile #identityCard in Glass Mode (Fixes Photo 3 bottom border) */
html.ui-mode-glass #identityOuterFrame {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
html.ui-mode-glass #identityOuterFrame > div.pointer-events-none:first-child {
  display: none !important;
}

/* 3. Unified Rich Smoky-Obsidian Glassmorphism Recipe (Matches Profile Page Photo 3)
      Applied identically across ALL 5 Pages on BOTH Desktop & Android Mobile:
      Home (Docs Profile Card & Catalog), Dashboard, Profile, Uploader, AI Studio */
html.ui-mode-glass .glass-card,
html.ui-mode-glass .glass-card-sm,
html.ui-mode-glass .bento-surface,
html.ui-mode-glass .dropzone,
html.ui-mode-glass #dropzone,
html.ui-mode-glass #userQuickCard,
html.ui-mode-glass #userGuestState,
html.ui-mode-glass #userProfileState,
html.ui-mode-glass #identityCard,
html.ui-mode-glass #apiKeyManagerCard,
html.ui-mode-glass #topupSection,
html.ui-mode-glass #securityCard,
html.ui-mode-glass #dangerCard,
html.ui-mode-glass #uploadPanel,
html.ui-mode-glass #resultCard,
html.ui-mode-glass .danger-item,
html.ui-mode-glass details.glass-card,
html.ui-mode-glass .cat-card,
html.ui-mode-glass .metric-card,
html.ui-mode-glass .stat-card {
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(239, 68, 68, 0.05) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.05) 0%, transparent 55%),
    linear-gradient(
      155deg,
      rgba(15, 18, 27, 0.84) 0%,
      rgba(10, 13, 20, 0.90) 52%,
      rgba(6, 8, 14, 0.95) 100%
    ) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75),
              inset 0 1px 1px rgba(255, 255, 255, 0.18),
              inset 0 -1px 1px rgba(255, 255, 255, 0.04) !important;
}

/* Prevent pseudo-elements inside #dropzone or spotlight cards from creating a horizontal seam on Android */
html.ui-mode-glass .dropzone::before,
html.ui-mode-glass #dropzone::before,
html.ui-mode-glass .dropzone::after,
html.ui-mode-glass #dropzone::after {
  display: none !important;
  content: none !important;
}

/* Guarantee zero ancestor Backdrop Root interference on Android & Desktop in Glass Mode */
html.ui-mode-glass #spa-view,
html.ui-mode-glass .page-content,
html.ui-mode-glass .page-enter,
html.ui-mode-glass [data-reveal],
html.ui-mode-glass [data-reveal].revealed,
html.ui-mode-glass .anim-fade-in,
html.ui-mode-glass .anim-scale-in {
  transform: none !important;
  will-change: auto !important;
}

html.ui-mode-glass .glass-card:hover,
html.ui-mode-glass .bento-surface:hover,
html.ui-mode-glass #identityCard:hover,
html.ui-mode-glass #userProfileState:hover,
html.ui-mode-glass #apiKeyManagerCard:hover {
  border-color: rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 22px 54px -10px rgba(0, 0, 0, 0.72),
              inset 0 1px 1px rgba(255, 255, 255, 0.24) !important;
}

/* Home Page Profile Card Inner Box Harmony (Matches Profile Page #identityCard Photo 3) */
html.ui-mode-glass #memberKeyBox,
html.ui-mode-glass #primaryKeyBox {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(10, 13, 22, 0.45) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html.ui-mode-glass #memberKeyBox:hover,
html.ui-mode-glass #primaryKeyBox:hover {
  border-color: rgba(239, 68, 68, 0.38) !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.13) 0%, rgba(12, 16, 28, 0.52) 100%) !important;
}

/* 4. Distinct Recessed Glass Layer for Inner Sub-Cards, Uploader & AI Studio Controls
      Ensures clear visual separation between outer card and inner elements while keeping text 100% legible */
html.ui-mode-glass .ep-card,
html.ui-mode-glass .ep-item,
html.ui-mode-glass #aiImageDropzone,
html.ui-mode-glass #stickySearchContainer,
html.ui-mode-glass .ai-hist-card,
html.ui-mode-glass .uploader-hist-row,
html.ui-mode-glass #uploaderLoginPrompt,
html.ui-mode-glass #aiVideoResolutionCard,
html.ui-mode-glass #aiResolutionBlock,
html.ui-mode-glass #aiFormatBlock,
html.ui-mode-glass #aiResultUrlWrap,
html.ui-mode-glass #httpStatusInlineBox > div > div {
  background: linear-gradient(145deg, rgba(12, 15, 24, 0.82) 0%, rgba(8, 10, 18, 0.88) 100%) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html.ui-mode-glass .ep-card:hover,
html.ui-mode-glass .ai-hist-card:hover,
html.ui-mode-glass .uploader-hist-row:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(145deg, rgba(14, 18, 30, 0.54) 0%, rgba(8, 11, 19, 0.62) 100%) !important;
}

html.ui-mode-glass .try-drawer,
html.ui-mode-glass .code-box,
html.ui-mode-glass pre.code-block,
html.ui-mode-glass .response-viewer {
  background: rgba(6, 8, 15, 0.52) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

html.ui-mode-glass .input,
html.ui-mode-glass input.input,
html.ui-mode-glass textarea.input,
html.ui-mode-glass select.input,
html.ui-mode-glass .search-bar,
html.ui-mode-glass #aiDirectUrlInput,
html.ui-mode-glass #cdnUrlInput {
  background: rgba(7, 10, 18, 0.48) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

html.ui-mode-glass .input:focus,
html.ui-mode-glass input.input:focus,
html.ui-mode-glass textarea.input:focus {
  background: rgba(10, 14, 24, 0.62) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
}

/* 5. All Modals, GET API Endpoint Modal (#endpointDetailModal) & Notification Modal (#announcementModal) in Glass Mode */
html.ui-mode-glass .modal-box,
html.ui-mode-glass #endpointDetailModal .modal-box,
html.ui-mode-glass #httpStatusModal .modal-box,
html.ui-mode-glass #announcementModal .modal-box,
html.ui-mode-glass #appearanceModal .modal-box {
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(239, 68, 68, 0.04) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.04) 0%, transparent 55%),
    linear-gradient(
      145deg,
      rgba(22, 27, 40, 0.64) 0%,
      rgba(13, 17, 27, 0.70) 55%,
      rgba(8, 11, 19, 0.76) 100%
    ) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75),
              inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
}

/* Modal Headers in Glassmorphism Mode */
html.ui-mode-glass #endpointDetailModal .endpoint-modal-header,
html.ui-mode-glass #httpStatusModal .modal-box > div:first-child,
html.ui-mode-glass #announcementModal .modal-box > div:first-child,
html.ui-mode-glass #appearanceModal .modal-box > div:first-child,
html.ui-mode-glass #aiHistoryDetailModal .modal-box > div:first-child,
html.ui-mode-glass #aiApiDocsModal .modal-box > div:first-child {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(15, 19, 30, 0.32) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
}

/* GET API Modal (#endpointDetailModal) Inner Terminal & cURL Boxes in Glass Mode (Fixes Photo 4) */
html.ui-mode-glass #endpointDetailModal #edPlayground > div,
html.ui-mode-glass #endpointDetailModal #edRespWrap {
  background: rgba(9, 12, 21, 0.46) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html.ui-mode-glass #endpointDetailModal #edRespWrap > div:first-child {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html.ui-mode-glass #endpointDetailModal #edCurl,
html.ui-mode-glass #endpointDetailModal #edRespWrap > div:last-child {
  background: rgba(4, 6, 12, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Notification Popup Modal (#announcementModal) Body & Rows in Glass Mode */
html.ui-mode-glass #announcementList {
  background: transparent !important;
}

html.ui-mode-glass #announcementList .notif-row {
  background: rgba(10, 14, 24, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.ui-mode-glass #announcementList .notif-row.border-red-500\/25 {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.14) 0%, rgba(12, 16, 28, 0.50) 100%) !important;
  border-color: rgba(239, 68, 68, 0.34) !important;
}

html.ui-mode-glass #announcementList .notif-row:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(16, 21, 34, 0.56) !important;
}


/* ============================================================
   CLASSIC GLASS UI MODE (html.ui-mode-liquid) — v4.6.1
   Refined Crystal-Clear Glass with Obsidian Dark Fade (Sesuai Referensi Raphael TMNT):
   - Scrim atmosferik halus: wallpaper tetap 100% nampak jelas dan hidup
   - Kartu utama & sub-kartu memiliki "Fade Hitam" yang elegan & kontras
   - Teks, badges status, dan metrik memiliki kontras tinggi & sangat tajam dibaca
   - Selaras sempurna di web desktop dan mobile Android
   ============================================================ */

/* 1. Scrim latar belakang: atmosferik lembut agar wallpaper tetap hidup */
html.ui-mode-liquid .onlym-bg-stage .scrim {
  background: linear-gradient(
    to bottom,
    rgba(5, 7, 14, 0.32) 0%,
    rgba(5, 7, 14, 0.18) 45%,
    rgba(5, 7, 14, 0.38) 100%
  ) !important;
}

html.ui-mode-liquid.bg-mode-banner .onlym-bg-stage .bg-image-layer,
html.ui-mode-liquid:not(.bg-mode-banner) .onlym-bg-stage .bg video {
  opacity: 1 !important;
}

/* 2. Header & Bottom Navigation Dock */
html.ui-mode-liquid header.site-header {
  background: linear-gradient(180deg, rgba(12, 16, 26, 0.85) 0%, rgba(7, 9, 16, 0.80) 100%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

html.ui-mode-liquid .onlym-nav {
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.85) 0%, rgba(8, 10, 18, 0.90) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* 3. Kartu utama di semua halaman — Fade Hitam Bening (Sesuai Referensi Raphael TMNT) */
html.ui-mode-liquid .glass-card,
html.ui-mode-liquid .glass-card-sm,
html.ui-mode-liquid .bento-surface,
html.ui-mode-liquid .dropzone,
html.ui-mode-liquid #dropzone,
html.ui-mode-liquid #userQuickCard,
html.ui-mode-liquid #userGuestState,
html.ui-mode-liquid #userProfileState,
html.ui-mode-liquid #identityCard,
html.ui-mode-liquid #apiKeyManagerCard,
html.ui-mode-liquid #topupSection,
html.ui-mode-liquid #securityCard,
html.ui-mode-liquid #dangerCard,
html.ui-mode-liquid #uploadPanel,
html.ui-mode-liquid #resultCard,
html.ui-mode-liquid .danger-item,
html.ui-mode-liquid details.glass-card,
html.ui-mode-liquid .cat-card,
html.ui-mode-liquid .metric-card,
html.ui-mode-liquid .stat-card,
html.ui-mode-liquid footer#contact .glass-card {
  background: linear-gradient(
    160deg,
    rgba(14, 18, 27, 0.86) 0%,
    rgba(9, 12, 19, 0.90) 55%,
    rgba(5, 7, 13, 0.95) 100%
  ) !important;
  backdrop-filter: blur(14px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(155%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Remove spotlight haze overlay so wallpaper shines through 100% crystal clear */
html.ui-mode-liquid .spotlight-card::after {
  display: none !important;
  content: none !important;
}

html.ui-mode-liquid .glass-card:hover,
html.ui-mode-liquid .bento-surface:hover,
html.ui-mode-liquid #identityCard:hover,
html.ui-mode-liquid #userProfileState:hover,
html.ui-mode-liquid #apiKeyManagerCard:hover,
html.ui-mode-liquid footer#contact .glass-card:hover {
  background: linear-gradient(
    160deg,
    rgba(18, 24, 36, 0.90) 0%,
    rgba(12, 15, 24, 0.94) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* 4. Sub-kartu, Endpoint Cards, & Stream List Items — Fade Hitam Elegan */
html.ui-mode-liquid .endpoint-card,
html.ui-mode-liquid .ep-card,
html.ui-mode-liquid .ep-item,
html.ui-mode-liquid #aiImageDropzone,
html.ui-mode-liquid #stickySearchContainer,
html.ui-mode-liquid .ai-hist-card,
html.ui-mode-liquid .uploader-hist-row,
html.ui-mode-liquid #uploaderLoginPrompt,
html.ui-mode-liquid #aiVideoResolutionCard,
html.ui-mode-liquid #aiResolutionBlock,
html.ui-mode-liquid #aiFormatBlock,
html.ui-mode-liquid #aiResultUrlWrap,
html.ui-mode-liquid #memberKeyBox,
html.ui-mode-liquid #primaryKeyBox,
html.ui-mode-liquid #httpStatusInlineBox > div > div,
html.ui-mode-liquid #reqStream > div,
html.ui-mode-liquid #errorStream > div,
html.ui-mode-liquid [data-reveal] > div[class*="bg-gradient"] {
  background: linear-gradient(
    90deg,
    rgba(16, 21, 32, 0.82) 0%,
    rgba(10, 13, 22, 0.76) 50%,
    rgba(14, 18, 28, 0.82) 100%
  ) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.ui-mode-liquid .endpoint-card:hover,
html.ui-mode-liquid .ep-card:hover,
html.ui-mode-liquid .ai-hist-card:hover,
html.ui-mode-liquid .uploader-hist-row:hover {
  background: linear-gradient(
    90deg,
    rgba(24, 30, 48, 0.88) 0%,
    rgba(14, 18, 28, 0.82) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* 5. Input & Terminal Box — Fade Gelap Pekat untuk Kontras Teks Maksimal */
html.ui-mode-liquid .input,
html.ui-mode-liquid input.input,
html.ui-mode-liquid textarea.input,
html.ui-mode-liquid select.input,
html.ui-mode-liquid .search-bar,
html.ui-mode-liquid #aiPromptInput,
html.ui-mode-liquid #aiNegativePromptInput,
html.ui-mode-liquid #aiDirectUrlInput,
html.ui-mode-liquid #cdnUrlInput {
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.88) 0%, rgba(4, 6, 12, 0.94) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  color: #f8fafc !important;
}

/* Text Shadow pada Teks Endpoint agar Sangat Tajam di atas Wallpaper Apapun */
html.ui-mode-liquid .ep-card h3,
html.ui-mode-liquid .ep-card p,
html.ui-mode-liquid .cat-header h2,
html.ui-mode-liquid .search-bar input {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

html.ui-mode-liquid .try-drawer,
html.ui-mode-liquid .code-box,
html.ui-mode-liquid pre.code-block,
html.ui-mode-liquid .response-viewer,
html.ui-mode-liquid #endpointDetailModal #edCurl,
html.ui-mode-liquid #endpointDetailModal #edRespWrap > div:last-child {
  background: rgba(4, 6, 12, 0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* 6. Modals dalam Liquid Glass */
html.ui-mode-liquid .modal-box,
html.ui-mode-liquid #endpointDetailModal .modal-box,
html.ui-mode-liquid #httpStatusModal .modal-box,
html.ui-mode-liquid #announcementModal .modal-box,
html.ui-mode-liquid #appearanceModal .modal-box,
html.ui-mode-liquid #checkoutModal .modal-box,
html.ui-mode-liquid #orderModal .modal-box {
  background: linear-gradient(
    150deg,
    rgba(14, 18, 28, 0.94) 0%,
    rgba(9, 12, 19, 0.97) 55%,
    rgba(5, 7, 12, 0.99) 100%
  ) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html.ui-mode-liquid #endpointDetailModal .endpoint-modal-header,
html.ui-mode-liquid #httpStatusModal .modal-box > div:first-child,
html.ui-mode-liquid #announcementModal .modal-box > div:first-child,
html.ui-mode-liquid #appearanceModal .modal-box > div:first-child,
html.ui-mode-liquid #aiHistoryDetailModal .modal-box > div:first-child,
html.ui-mode-liquid #aiApiDocsModal .modal-box > div:first-child {
  background: rgba(14, 18, 28, 0.70) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.ui-mode-liquid #announcementList .notif-row {
  background: rgba(12, 16, 26, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 7. Inner controls di AI Studio, Uploader, Profile di Liquid Glass */
html.ui-mode-liquid #aiModelTriggerBtn,
html.ui-mode-liquid #aiDurationCard,
html.ui-mode-liquid #aiDurationTriggerBtn,
html.ui-mode-liquid #aiCameraMovementCard,
html.ui-mode-liquid #aiCameraTriggerBtn,
html.ui-mode-liquid #aiVideoAudioWrap,
html.ui-mode-liquid #retentionOptions,
html.ui-mode-liquid #filePreviewBox,
html.ui-mode-liquid #endpointDetailModal #edPlayground > div,
html.ui-mode-liquid #endpointDetailModal #edRespWrap {
  background: rgba(10, 14, 22, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html.ui-mode-liquid #aiPromptInput,
html.ui-mode-liquid #aiNegativePromptInput {
  background: rgba(6, 8, 14, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ══════════ AI Studio Model, Duration & Camera Dropdowns (100% Solid Opaque across ALL themes) ══════════ */
#aiStudioControlsCard {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}

#aiStudioControlsCard.dropdown-open,
#aiStudioControlsCard:has(#aiDesktopDropdown[data-open="true"]),
#aiStudioControlsCard:has(#aiDurationDropdown[data-open="true"]),
#aiStudioControlsCard:has(#aiCameraDropdown[data-open="true"]) {
  z-index: 99990 !important;
  overflow: visible !important;
}

#aiStandardModelWrap {
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

#aiStandardModelWrap.dropdown-open,
#aiStandardModelWrap:has(#aiDesktopDropdown[data-open="true"]) {
  z-index: 99995 !important;
  overflow: visible !important;
}

#videoOptionsWrap {
  position: relative;
  z-index: 35;
  overflow: visible !important;
}

#videoOptionsWrap.dropdown-open,
#videoOptionsWrap:has(#aiDurationDropdown[data-open="true"]),
#videoOptionsWrap:has(#aiCameraDropdown[data-open="true"]) {
  z-index: 99995 !important;
  overflow: visible !important;
}

#aiVideoTier0 {
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

#aiVideoTier0.dropdown-open,
#aiVideoTier0:has(#aiCameraDropdown[data-open="true"]) {
  z-index: 99997 !important;
  overflow: visible !important;
}

#aiVideoTier1 {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}

#aiVideoTier1.dropdown-open,
#aiVideoTier1:has(#aiDurationDropdown[data-open="true"]) {
  z-index: 99997 !important;
  overflow: visible !important;
}

#aiDurationCard {
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

#aiDurationCard.is-open,
#aiDurationCard:has(#aiDurationDropdown[data-open="true"]),
html.ui-mode-liquid #aiDurationCard.is-open,
html.ui-mode-liquid #aiDurationCard:has(#aiDurationDropdown[data-open="true"]),
html.ui-mode-glass #aiDurationCard.is-open,
html.ui-mode-glass #aiDurationCard:has(#aiDurationDropdown[data-open="true"]),
html.ui-mode-obsidian #aiDurationCard.is-open,
html.ui-mode-obsidian #aiDurationCard:has(#aiDurationDropdown[data-open="true"]) {
  z-index: 99998 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0b0f19 !important;
}

#aiCameraMovementCard {
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

#aiCameraMovementCard.is-open,
#aiCameraMovementCard:has(#aiCameraDropdown[data-open="true"]),
html.ui-mode-liquid #aiCameraMovementCard.is-open,
html.ui-mode-liquid #aiCameraMovementCard:has(#aiCameraDropdown[data-open="true"]),
html.ui-mode-glass #aiCameraMovementCard.is-open,
html.ui-mode-glass #aiCameraMovementCard:has(#aiCameraDropdown[data-open="true"]),
html.ui-mode-obsidian #aiCameraMovementCard.is-open,
html.ui-mode-obsidian #aiCameraMovementCard:has(#aiCameraDropdown[data-open="true"]) {
  z-index: 99998 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0b0f19 !important;
}

#aiVideoAudioWrap,
#aiVideoResolutionCard {
  position: relative;
  z-index: 1;
}

#aiModelPickerWrapper,
#aiDurationPickerWrapper,
#aiCameraPickerWrapper {
  position: relative;
  z-index: 20;
  overflow: visible !important;
}

#aiModelPickerWrapper.is-open,
#aiModelPickerWrapper:has(#aiDesktopDropdown[data-open="true"]),
#aiDurationPickerWrapper.is-open,
#aiDurationPickerWrapper:has(#aiDurationDropdown[data-open="true"]),
#aiCameraPickerWrapper.is-open,
#aiCameraPickerWrapper:has(#aiCameraDropdown[data-open="true"]) {
  z-index: 100000 !important;
  position: relative !important;
  overflow: visible !important;
}

#aiDesktopDropdown > div,
#aiQuickSettingsDrawer > div,
#aiModelBottomSheet > div,
html.ui-mode-obsidian #aiDesktopDropdown > div,
html.ui-mode-obsidian #aiQuickSettingsDrawer > div,
html.ui-mode-glass #aiDesktopDropdown > div,
html.ui-mode-glass #aiQuickSettingsDrawer > div,
html.ui-mode-liquid #aiDesktopDropdown > div,
html.ui-mode-liquid #aiQuickSettingsDrawer > div {
  background: #090c14 !important;
  background-color: #090c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.98), 0 0 0 1px rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

#aiDesktopDropdown:not([data-open="true"]) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#aiDesktopDropdown[data-open="true"] {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 100005 !important;
}

#aiDurationDropdown,
#aiCameraDropdown {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#aiDurationList,
#aiCameraList {
  display: flex !important;
  flex-wrap: wrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#aiQuickSettingsDrawer #aiSettingsModalBody,
#aiDesktopDropdown #desktopModelList {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}

#aiQuickSettingsDrawer button,
#aiDesktopDropdown button,
#aiDesktopDropdown .model-select-item {
  touch-action: manipulation;
}

#aiDesktopDropdown #desktopModelList,
#aiModelBottomSheet #aiModelListContainer,
html.ui-mode-obsidian #aiDesktopDropdown #desktopModelList,
html.ui-mode-glass #aiDesktopDropdown #desktopModelList,
html.ui-mode-liquid #aiDesktopDropdown #desktopModelList {
  background: #090c14 !important;
  background-color: #090c14 !important;
  opacity: 1 !important;
}

#aiDesktopDropdown .model-select-item,
#aiDurationDropdown .duration-select-item,
#aiCameraDropdown .camera-select-item,
#aiModelBottomSheet .model-select-item,
html.ui-mode-obsidian #aiDesktopDropdown .model-select-item,
html.ui-mode-glass #aiDesktopDropdown .model-select-item,
html.ui-mode-liquid #aiDesktopDropdown .model-select-item,
html.ui-mode-obsidian #aiDurationDropdown .duration-select-item,
html.ui-mode-glass #aiDurationDropdown .duration-select-item,
html.ui-mode-liquid #aiDurationDropdown .duration-select-item,
html.ui-mode-obsidian #aiCameraDropdown .camera-select-item,
html.ui-mode-glass #aiCameraDropdown .camera-select-item,
html.ui-mode-liquid #aiCameraDropdown .camera-select-item {
  background: #111522 !important;
  background-color: #111522 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  opacity: 1 !important;
}

#aiDesktopDropdown .model-select-item:hover,
#aiDurationDropdown .duration-select-item:hover,
#aiCameraDropdown .camera-select-item:hover,
#aiModelBottomSheet .model-select-item:hover,
html.ui-mode-obsidian #aiDesktopDropdown .model-select-item:hover,
html.ui-mode-glass #aiDesktopDropdown .model-select-item:hover,
html.ui-mode-liquid #aiDesktopDropdown .model-select-item:hover,
html.ui-mode-obsidian #aiDurationDropdown .duration-select-item:hover,
html.ui-mode-glass #aiDurationDropdown .duration-select-item:hover,
html.ui-mode-liquid #aiDurationDropdown .duration-select-item:hover,
html.ui-mode-obsidian #aiCameraDropdown .camera-select-item:hover,
html.ui-mode-glass #aiCameraDropdown .camera-select-item:hover,
html.ui-mode-liquid #aiCameraDropdown .camera-select-item:hover {
  background: #181f33 !important;
  background-color: #181f33 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#aiDesktopDropdown .model-select-item[class*="border-red-500"],
#aiDurationDropdown .duration-select-item[class*="border-red-500"],
#aiCameraDropdown .camera-select-item[class*="border-red-500"],
#aiModelBottomSheet .model-select-item[class*="border-red-500"],
html.ui-mode-obsidian #aiDesktopDropdown .model-select-item[class*="border-red-500"],
html.ui-mode-glass #aiDesktopDropdown .model-select-item[class*="border-red-500"],
html.ui-mode-liquid #aiDesktopDropdown .model-select-item[class*="border-red-500"],
html.ui-mode-obsidian #aiDurationDropdown .duration-select-item[class*="border-red-500"],
html.ui-mode-glass #aiDurationDropdown .duration-select-item[class*="border-red-500"],
html.ui-mode-liquid #aiDurationDropdown .duration-select-item[class*="border-red-500"],
html.ui-mode-obsidian #aiCameraDropdown .camera-select-item[class*="border-red-500"],
html.ui-mode-glass #aiCameraDropdown .camera-select-item[class*="border-red-500"],
html.ui-mode-liquid #aiCameraDropdown .camera-select-item[class*="border-red-500"] {
  background: #191424 !important;
  background-color: #191424 !important;
  border-color: rgba(239, 68, 68, 0.85) !important;
}

/* ══════════ AI Studio Dropdowns & Pickers — Glowing Red Scrollbar ══════════ */
#desktopModelList,
#aiModelListContainer,
#aiCameraList,
#aiDurationList,
#aiMentionList,
#aiDesktopDropdown .overflow-y-auto,
#aiDurationDropdown .overflow-y-auto,
#aiCameraDropdown .overflow-y-auto,
#aiModelBottomSheet .overflow-y-auto {
  scrollbar-width: thin !important;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.06) !important;
}

#desktopModelList::-webkit-scrollbar,
#aiModelListContainer::-webkit-scrollbar,
#aiCameraList::-webkit-scrollbar,
#aiDurationList::-webkit-scrollbar,
#aiMentionList::-webkit-scrollbar,
#aiDesktopDropdown .overflow-y-auto::-webkit-scrollbar,
#aiDurationDropdown .overflow-y-auto::-webkit-scrollbar,
#aiCameraDropdown .overflow-y-auto::-webkit-scrollbar,
#aiModelBottomSheet .overflow-y-auto::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

#desktopModelList::-webkit-scrollbar-track,
#aiModelListContainer::-webkit-scrollbar-track,
#aiCameraList::-webkit-scrollbar-track,
#aiDurationList::-webkit-scrollbar-track,
#aiMentionList::-webkit-scrollbar-track,
#aiDesktopDropdown .overflow-y-auto::-webkit-scrollbar-track,
#aiDurationDropdown .overflow-y-auto::-webkit-scrollbar-track,
#aiCameraDropdown .overflow-y-auto::-webkit-scrollbar-track,
#aiModelBottomSheet .overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 9999px !important;
}

#desktopModelList::-webkit-scrollbar-thumb,
#aiModelListContainer::-webkit-scrollbar-thumb,
#aiCameraList::-webkit-scrollbar-thumb,
#aiDurationList::-webkit-scrollbar-thumb,
#aiMentionList::-webkit-scrollbar-thumb,
#aiDesktopDropdown .overflow-y-auto::-webkit-scrollbar-thumb,
#aiDurationDropdown .overflow-y-auto::-webkit-scrollbar-thumb,
#aiCameraDropdown .overflow-y-auto::-webkit-scrollbar-thumb,
#aiModelBottomSheet .overflow-y-auto::-webkit-scrollbar-thumb {
  background: #ef4444 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75) !important;
}

#desktopModelList::-webkit-scrollbar-thumb:hover,
#aiModelListContainer::-webkit-scrollbar-thumb:hover,
#aiCameraList::-webkit-scrollbar-thumb:hover,
#aiDurationList::-webkit-scrollbar-thumb:hover,
#aiMentionList::-webkit-scrollbar-thumb:hover,
#aiDesktopDropdown .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#aiDurationDropdown .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#aiCameraDropdown .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#aiModelBottomSheet .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #dc2626 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 1) !important;
}

/* Red Glow Scrollbar for AI History, Admin Studio & Upgrade Plan Checkout Modals */
#reqStream,
#errorStream {
  scrollbar-width: thin;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.04);
  overscroll-behavior: contain;
}
#reqStream::-webkit-scrollbar,
#errorStream::-webkit-scrollbar {
  width: 6px;
}
#reqStream::-webkit-scrollbar-track,
#errorStream::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9999px;
}
#reqStream::-webkit-scrollbar-thumb,
#errorStream::-webkit-scrollbar-thumb {
  background: #ef4444;
  border-radius: 9999px;
}
#reqStream::-webkit-scrollbar-thumb:hover,
#errorStream::-webkit-scrollbar-thumb:hover {
  background: #dc2626;
}

#aiHistoryDetailModal .overflow-y-auto,
#asDetailModal .overflow-y-auto,
#asDetailModal > div,
#asModalBody,
#topupModalBody {
  scrollbar-width: thin !important;
  scrollbar-color: #ef4444 rgba(255, 255, 255, 0.04) !important;
}

#aiHistoryDetailModal .overflow-y-auto::-webkit-scrollbar,
#asDetailModal .overflow-y-auto::-webkit-scrollbar,
#asDetailModal > div::-webkit-scrollbar,
#asModalBody::-webkit-scrollbar,
#topupModalBody::-webkit-scrollbar {
  width: 6px !important;
}

#aiHistoryDetailModal .overflow-y-auto::-webkit-scrollbar-track,
#asDetailModal .overflow-y-auto::-webkit-scrollbar-track,
#asDetailModal > div::-webkit-scrollbar-track,
#asModalBody::-webkit-scrollbar-track,
#topupModalBody::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 9999px !important;
}

#aiHistoryDetailModal .overflow-y-auto::-webkit-scrollbar-thumb,
#asDetailModal .overflow-y-auto::-webkit-scrollbar-thumb,
#asDetailModal > div::-webkit-scrollbar-thumb,
#asModalBody::-webkit-scrollbar-thumb,
#topupModalBody::-webkit-scrollbar-thumb {
  background: #ef4444 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75) !important;
}

#aiHistoryDetailModal .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#asDetailModal .overflow-y-auto::-webkit-scrollbar-thumb:hover,
#asDetailModal > div::-webkit-scrollbar-thumb:hover,
#asModalBody::-webkit-scrollbar-thumb:hover,
#topupModalBody::-webkit-scrollbar-thumb:hover {
  background: #dc2626 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 1) !important;
}

/* ══════════ Top Supporters Live Upgrade Marquee & Animated Mini Profile Card ══════════ */
@keyframes supporterMarqueeRTL {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.supporter-ticker-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.supporter-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  will-change: transform;
  animation: supporterMarqueeRTL var(--ticker-duration, 34s) linear infinite;
}

.supporter-ticker-wrap:hover .supporter-ticker-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .supporter-ticker-track {
    animation: none;
  }
}

@keyframes supModalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes supCardPopIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.92);
  }
  65% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

#supporterProfileModal.is-open {
  animation: supModalBackdropIn 0.2s ease-out forwards;
}

#supporterProfileModal.is-open .supporter-mini-card {
  animation: supCardPopIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}