/* ============================================
   JAVIN NEOBRUTALISM — OVERRIDE CSS v2.0
   Tujuan: numpuk di atas CSS existing,
   tanpa ngubah struktur HTML
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap');

:root {
  --nb-yellow: #FFE600;
  --nb-pink:   #FF7FE5;
  --nb-cyan:   #00E5E5;
  --nb-purple: #B18CFF;
  --nb-green:  #00D97E;
  --nb-red:    #FF4D6D;
  --nb-orange: #FF8C42;

  --nb-black:  #0A0A0A;
  --nb-white:  #FFFFFF;

  --nb-border: 3px solid var(--nb-black);
  --nb-shadow: 6px 6px 0 var(--nb-black);
  --nb-shadow-sm: 4px 4px 0 var(--nb-black);

  --nb-radius: 10px;
  --nb-font: 'Space Grotesk', system-ui, sans-serif;
  --nb-font-display: 'Archivo Black', system-ui, sans-serif;
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body {
  font-family: var(--nb-font) !important;
  background: var(--nb-yellow) !important;
  color: var(--nb-black) !important;
}

/* Overlay background — bikin kuning solid, bukan transparan */
#loginBgOverlay {
  background: var(--nb-yellow) !important;
  opacity: 1 !important;
}

/* Video background — sembunyiin kalo masih ada */
#loginBgVideo {
  display: none !important;
}

/* ============================================
   CARD — override .card existing
   ============================================ */
.card {
  background: var(--nb-white) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================
   LOGO
   ============================================ */
.logo {
  background: var(--nb-black) !important;
  color: var(--nb-yellow) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-family: var(--nb-font-display) !important;
}

/* ============================================
   HEADINGS & TEXT
   ============================================ */
h1, h2, h3 {
  font-family: var(--nb-font-display) !important;
  color: var(--nb-black) !important;
  font-weight: 400 !important;
  letter-spacing: -0.5px !important;
}

.subtitle {
  color: #4A4A4A !important;
}

.footer {
  color: #4A4A4A !important;
  border-top: 3px solid var(--nb-black) !important;
  padding-top: 16px !important;
  margin-top: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* ============================================
   FORM
   ============================================ */
.field label {
  color: var(--nb-black) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

.field input,
input[type="email"],
input[type="text"] {
  background: var(--nb-white) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,0.08) !important;
  font-family: var(--nb-font) !important;
  font-weight: 500 !important;
  transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.field input:focus,
input[type="email"]:focus,
input[type="text"]:focus {
  background: var(--nb-yellow) !important;
  box-shadow: 3px 3px 0 var(--nb-black) !important;
  transform: scale(1.01) !important;
  outline: none !important;
}

.field input::placeholder,
input::placeholder {
  color: #9A9A9A !important;
}

/* OTP input */
input.otp {
  font-family: 'Courier New', monospace !important;
  letter-spacing: 8px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

/* ============================================
   BUTTON
   ============================================ */
.btn-primary {
  background: var(--nb-pink) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-family: var(--nb-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
  will-change: transform !important;
}

.btn-primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--nb-black) !important;
}

.btn-primary:active {
  transform: scale(0.94) translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
  transition: transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.08s ease !important;
}

.btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Back button */
.back-btn {
  background: var(--nb-cyan) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
  will-change: transform !important;
}

.back-btn:active {
  transform: scale(0.94) translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
}

/* Demo button */
.btn-demo {
  background: var(--nb-cyan) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
  will-change: transform !important;
}

.btn-demo:active {
  transform: scale(0.94) translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
}

/* ============================================
   DIVIDER "atau"
   ============================================ */
.demo-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 24px 0 !important;
  color: var(--nb-black) !important;
}

.demo-divider::before,
.demo-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 3px !important;
  background: var(--nb-black) !important;
  border-radius: 2px !important;
}

.demo-divider span {
  color: var(--nb-black) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
  flex: 0 0 auto !important;
  background: var(--nb-yellow) !important;
  padding: 0 4px !important;
}

/* ============================================
   ALERT
   ============================================ */
.error {
  background: var(--nb-red) !important;
  color: var(--nb-white) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
}

.success {
  background: var(--nb-green) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}

.success b {
  color: var(--nb-black) !important;
  font-weight: 800 !important;
}

.success .hint {
  color: #2A2A2A !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* ============================================
   LOADING (default: hidden)
   ============================================ */
.loading {
  color: var(--nb-black) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ============================================
   DEMO NOTE
   ============================================ */
.demo-note {
  color: var(--nb-black) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}


/* ============================================
   INDEX PAGE — NEOBRUTALISM OVERRIDE
   Scope: background kuning + list card (.fx-card)
   ============================================ */








/* ============================================
   FIX v3 — FORCE OVERRIDE BG + CARD
   ============================================ */

/* 1. Paksa HTML & BODY kuning, hapus biru kaze-video */
html,
html[data-theme],
html[class] {
  background: #FFE600 !important;
  background-image: none !important;
  color-scheme: light !important;
}

body,
body[data-theme],
body[class] {
  background: #FFE600 !important;
  background-image: none !important;
  background-color: #FFE600 !important;
}

/* 2. Sembunyiin video background (kaze + beto) */
#betoBgLayer,
#betoBgVideo,
#kazeVideo,
#bgVideo,
#bg-video,
.bg-video,
.kaze-video,
#loginBgVideo,
#loginBgOverlay,
video[autoplay] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 3. Paksa .fx-card — pake body prefix biar menang specificity */
body .fx-card,
body .fx-grid .fx-card,
body #grid .fx-card,
body main .fx-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #0A0A0A !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease !important;
}

body .fx-card:hover,
body .fx-grid .fx-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
  background-color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}

body .fx-card:active,
body .fx-grid .fx-card:active {
  transform: scale(0.97) translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #0A0A0A !important;
}

/* 4. Title & desc & arrow & badge — lebih specific */
body .fx-card .fx-card-title h3 {
  font-family: 'Archivo Black', system-ui, sans-serif !important;
  color: #0A0A0A !important;
  font-weight: 400 !important;
}

body .fx-card .fx-card-desc {
  color: #4A4A4A !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

body .fx-card .fx-card-arrow {
  color: #0A0A0A !important;
  font-weight: 700 !important;
}

body .fx-card .fx-badge {
  background: #00E5E5 !important;
  background-color: #00E5E5 !important;
  color: #0A0A0A !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}


/* ============================================
   FIX v4 — FULL NEOBRUTALISM OVERRIDE
   ============================================ */

/* 1. HTML & BODY kuning — PAKSA */
html {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  color-scheme: light !important;
}

body {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  color: #0A0A0A !important;
}

/* 2. Sembunyiin video background (kaze + beto) */
#betoBgLayer,
#betoBgVideo,
#kazeVideo,
#bgVideo,
#bg-video,
.bg-video,
.kaze-video,
#loginBgVideo,
#loginBgOverlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
}

/* 3. Splash screen kuning */
#splashScreen {
  background: #FFE600 !important;
}

#splashScreen .splash-inner,
#splashScreen .splash-title,
#splashScreen .splash-icon {
  color: #0A0A0A !important;
}

/* 4. Header — hapus blur, jadi kuning */
header.fx-header {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 3px solid #0A0A0A !important;
  box-shadow: 0 4px 0 #0A0A0A !important;
}

header.fx-header > * {
  color: #0A0A0A !important;
}

/* 5. Search input */
.fx-search-wrap input,
#search {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #0A0A0A !important;
}

.fx-search-wrap input:focus,
#search:focus {
  background: #FFE600 !important;
  outline: none !important;
}

.fx-search-wrap input::placeholder,
#search::placeholder {
  color: #666 !important;
}

/* 6. Category chips */
.fx-cat {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #0A0A0A !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease !important;
}

.fx-cat:active {
  transform: scale(0.94) translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #0A0A0A !important;
}

.fx-cat.active {
  background: #0A0A0A !important;
  color: #FFE600 !important;
}

/* 7. Premium featured card */
.fx-featured {
  background: #FF7FE5 !important;
  background-color: #FF7FE5 !important;
  background-image: none !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
}

.fx-featured-title,
.fx-featured-desc {
  color: #0A0A0A !important;
}

.fx-featured-badge {
  background: #0A0A0A !important;
  color: #FFE600 !important;
  border: 2px solid #0A0A0A !important;
}

/* 8. Footer */
footer {
  color: #0A0A0A !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}


/* ============================================
   FIX v5 — THEME-DARK BYPASS
   Handle specificity body.theme-dark (0,2,1)
   ============================================ */

/* --- BODY & HTML — paksa kuning di semua theme --- */
html[data-theme="dark"],
html[data-theme="light"],
body.theme-dark,
body.theme-light {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  color: #0A0A0A !important;
}

/* --- KILL VIDEO LAYER (kaze + beto) --- */
body.theme-dark #betoBgLayer,
body.theme-light #betoBgLayer,
html[data-theme="dark"] #betoBgLayer,
html[data-theme="light"] #betoBgLayer,
#betoBgLayer,
#betoBgVideo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --- HEADER — paksa kuning --- */
body.theme-dark header.fx-header,
body.theme-light header.fx-header,
header.fx-header {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 3px solid #0A0A0A !important;
  box-shadow: 0 4px 0 #0A0A0A !important;
}

body.theme-dark header.fx-header *,
body.theme-light header.fx-header *,
header.fx-header * {
  color: #0A0A0A !important;
}

/* --- PREMIUM CARD .fx-featured — override theme-dark --- */
body.theme-dark .fx-featured,
body.theme-light .fx-featured,
body .fx-featured {
  background: #FF7FE5 !important;
  background-color: #FF7FE5 !important;
  background-image: none !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
  color: #0A0A0A !important;
}

body.theme-dark .fx-featured::before,
body.theme-light .fx-featured::before,
body .fx-featured::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.theme-dark .fx-featured:hover,
body.theme-light .fx-featured:hover,
body .fx-featured:hover {
  background: #FF7FE5 !important;
  background-image: none !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 #0A0A0A !important;
}

body.theme-dark .fx-featured .fx-featured-title,
body.theme-dark .fx-featured .fx-featured-desc,
body.theme-dark .fx-featured .fx-featured-arrow,
body.theme-light .fx-featured .fx-featured-title,
body.theme-light .fx-featured .fx-featured-desc,
body.theme-light .fx-featured .fx-featured-arrow,
body .fx-featured .fx-featured-title,
body .fx-featured .fx-featured-desc,
body .fx-featured .fx-featured-arrow {
  color: #0A0A0A !important;
}

body.theme-dark .fx-featured .fx-featured-badge,
body.theme-light .fx-featured .fx-featured-badge,
body .fx-featured .fx-featured-badge {
  background: #0A0A0A !important;
  color: #FFE600 !important;
  border: 2px solid #0A0A0A !important;
}

/* --- CHIPS .fx-cat — override theme-dark --- */
body.theme-dark .fx-cat,
body.theme-light .fx-cat,
body .fx-cat {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #0A0A0A !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #0A0A0A !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
}

body.theme-dark .fx-cat small,
body.theme-light .fx-cat small,
body .fx-cat small {
  background: #0A0A0A !important;
  color: #FFE600 !important;
  border-radius: 6px !important;
}

body.theme-dark .fx-cat.active,
body.theme-light .fx-cat.active,
body .fx-cat.active {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  color: #FFE600 !important;
  border-color: #0A0A0A !important;
}

body.theme-dark .fx-cat.active small,
body.theme-light .fx-cat.active small,
body .fx-cat.active small {
  background: #FFE600 !important;
  color: #0A0A0A !important;
}

body.theme-dark .fx-cat:hover:not(.active),
body.theme-light .fx-cat:hover:not(.active),
body .fx-cat:hover:not(.active) {
  background: #FFFFFF !important;
  border-color: #0A0A0A !important;
}

/* --- LIST CARD .fx-card — override theme-dark --- */
body.theme-dark .fx-card,
body.theme-light .fx-card,
body .fx-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #0A0A0A !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #0A0A0A !important;
}

body.theme-dark .fx-card:hover,
body.theme-light .fx-card:hover,
body .fx-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

body.theme-dark .fx-card:active,
body.theme-light .fx-card:active,
body .fx-card:active {
  transform: scale(0.97) translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #0A0A0A !important;
}

body.theme-dark .fx-card .fx-card-title h3,
body.theme-light .fx-card .fx-card-title h3,
body .fx-card .fx-card-title h3 {
  font-family: 'Archivo Black', system-ui, sans-serif !important;
  color: #0A0A0A !important;
  font-weight: 400 !important;
}

body.theme-dark .fx-card .fx-card-desc,
body.theme-light .fx-card .fx-card-desc,
body .fx-card .fx-card-desc {
  color: #4A4A4A !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

body.theme-dark .fx-card .fx-card-arrow,
body.theme-light .fx-card .fx-card-arrow,
body .fx-card .fx-card-arrow {
  color: #0A0A0A !important;
}

body.theme-dark .fx-card .fx-badge,
body.theme-light .fx-card .fx-badge,
body .fx-card .fx-badge {
  background: #00E5E5 !important;
  color: #0A0A0A !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* --- SEARCH INPUT --- */
body.theme-dark #search,
body.theme-light #search,
body #search,
body.theme-dark .fx-search-wrap input,
body .fx-search-wrap input {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 #0A0A0A !important;
}

body.theme-dark #search::placeholder,
body #search::placeholder {
  color: #666 !important;
}

/* --- SPLASH SCREEN --- */
body.theme-dark #splashScreen,
body.theme-light #splashScreen,
#splashScreen {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
}

body.theme-dark #splashScreen *,
body.theme-light #splashScreen * {
  color: #0A0A0A !important;
}


/* ============================================
   FIX v6 — SUPER HIGH SPECIFICITY
   ============================================ */

/* Paksa html & body jadi kuning — specificity tinggi */
:root,
html,
html[data-theme],
html[data-theme="dark"],
html[data-theme="light"],
html.theme-dark,
html.theme-light,
body,
body.theme-dark,
body.theme-light,
html body,
html body.theme-dark,
html body.theme-light {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  color-scheme: light !important;
}

/* Kill #betoBgLayer & everything */
:root #betoBgLayer,
html #betoBgLayer,
html body #betoBgLayer,
html[data-theme] #betoBgLayer,
body #betoBgLayer,
#betoBgLayer,
#betoBgLayer *,
#betoBgVideo,
#bgCanvas,
#betoBgOverlay,
#betoStrip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* ============================================
   HEADER — inline style override
   ============================================ */

header.fx-header,
body header.fx-header,
body.theme-dark header.fx-header,
body.theme-light header.fx-header {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 3px solid #0A0A0A !important;
  box-shadow: 0 4px 0 #0A0A0A !important;
}

/* Profile card — inline style #fff → paksa border tebal */
#profileCard {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #0A0A0A !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease !important;
}

#profileCard:active {
  transform: scale(0.97) translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #0A0A0A !important;
}

#profileAvatar {
  border: 2px solid #0A0A0A !important;
}

#headerName {
  color: #0A0A0A !important;
  font-family: 'Archivo Black', system-ui, sans-serif !important;
}

#userId,
#userLimit {
  color: #4A4A4A !important;
}

/* Bell, diamond, gear */
#notifBell,
a[href="/buy"],
a[href="/settings"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 3px solid #0A0A0A !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 #0A0A0A !important;
  color: #0A0A0A !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.15s ease !important;
}

#notifBell:active,
a[href="/buy"]:active,
a[href="/settings"]:active {
  transform: scale(0.94) translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #0A0A0A !important;
}

/* Status bar (jam, battery) */
#betoStrip,
#betoBatteryBar,
.status-bar,
.fx-status,
body > div:not([class]):not([id]) {
  /* biarin — tapi kalo ini yang nutupin, hide */
}

/* Cek #betoStrip — strip status */
#betoStrip {
  background: #FFE600 !important;
  background-color: #FFE600 !important;
  border-top: 3px solid #0A0A0A !important;
  border-bottom: 3px solid #0A0A0A !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
}