/* ============================================================
   FINZ NEO-BRUTALISM v2  —  neo.css
   Dimuat SETELAH style.css (lihat index.html).
   4 palet: Siang/Malam  x  Mobile/Desktop (breakpoint 900px).
   Mode siang/malam tetap memakai class body.bg-white / body.bg-black
   dari script.js (tidak perlu ubah JS).
============================================================ */

/* ---------- 0. PALET ---------- */
/* SIANG · MOBILE — "Butter Pop": krem mentega, biru + kuning */
:is(html:has(body#finzNeo.bg-white)), html body#finzNeo.neo.neo.bg-white {
  --n-bg:#FFF1C9; --n-dot:rgba(17,17,17,.13); --n-panel:#FFFFFF; --n-panel2:#FFF8E1; --n-input:#FFFFFF;
  --n-ink:#111111; --n-mute:#4B4B4B; --n-bd:#111111; --n-sh:#111111;
  --n-p:#3D8BFF; --n-s:#FFD23F; --n-t:#4DC9FF; --n-q:#7CF29A; --n-r:#B794FF;
  --n-card:#5CC8FF; --n-btx:#1D4ED8;
  --n-fi:#0B0B0F; --n-danger:#FF4D4D; --n-glow:transparent;
  --n-off:4px; --n-bw:3px; --n-rad:16px;
}
/* MALAM · MOBILE — "Midnight Blue": navy pekat, shadow biru neon */
:is(html:has(body#finzNeo.bg-black)), html body#finzNeo.neo.neo.bg-black {
  --n-bg:#0E1530; --n-dot:rgba(238,243,255,.10); --n-panel:#17224A; --n-panel2:#1F2E5E; --n-input:#0F1838;
  --n-ink:#EEF3FF; --n-mute:#A9B8E8; --n-bd:#EEF3FF; --n-sh:#3D8BFF;
  --n-p:#3D8BFF; --n-s:#C8FF3D; --n-t:#4DEBFF; --n-q:#FFB03D; --n-r:#A78BFA;
  --n-card:#4DD0FF; --n-btx:#7DB8FF;
  --n-fi:#0B0B0F; --n-danger:#FF6B6B; --n-glow:rgba(61,139,255,.38);
  --n-off:4px; --n-bw:3px; --n-rad:16px;
}
@media (min-width:900px){
  /* SIANG · DESKTOP — "Ice Studio": biru es, aksen biru + mint + oranye */
  :is(html:has(body#finzNeo.bg-white)), html body#finzNeo.neo.neo.bg-white {
    --n-bg:#DCEBFF; --n-dot:rgba(17,17,17,.10); --n-panel:#FFFFFF; --n-panel2:#EEF5FF; --n-input:#FFFFFF;
    --n-p:#5B8CFF; --n-s:#2EE6A6; --n-t:#FFB020; --n-q:#FF7A7A; --n-r:#C77DFF;
    --n-card:#7CC4FF; --n-btx:#1D4ED8;
    --n-off:6px; --n-rad:10px;
  }
  /* MALAM · DESKTOP — "Deep Ocean": navy-teal, shadow biru langit neon */
  :is(html:has(body#finzNeo.bg-black)), html body#finzNeo.neo.neo.bg-black {
    --n-bg:#07131F; --n-dot:rgba(56,189,248,.09); --n-panel:#0E2236; --n-panel2:#15324A; --n-input:#0A1B2B;
    --n-ink:#EAF6FF; --n-mute:#9CC4D1; --n-bd:#EAF6FF; --n-sh:#38BDF8;
    --n-p:#38BDF8; --n-s:#FFC83D; --n-t:#7C9CFF; --n-q:#FF6B8B; --n-r:#C8FF3D; --n-glow:rgba(56,189,248,.35);
    --n-card:#4FB8FF; --n-btx:#6CC4FF;
    --n-off:6px; --n-rad:10px;
  }
}

/* ---------- 1. DASAR ---------- */
html:has(body#finzNeo){ background:var(--n-bg,#FFF1C9) !important; }
@supports not selector(:has(*)){ html body#finzNeo.neo.neo { background:var(--n-bg) !important; } html body#finzNeo.neo.neo::before{ display:none; } }
html body#finzNeo.neo.neo {
  background:transparent !important; color:var(--n-ink) !important;
  font-family:"Space Grotesk","Plus Jakarta Sans",system-ui,sans-serif !important;
  font-weight:600 !important; -webkit-tap-highlight-color:transparent;
}
html body#finzNeo.neo.neo::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--n-dot) 1.6px, transparent 1.7px);
  background-size:22px 22px;
}
@media (min-width:900px){
  html body#finzNeo.neo.neo::before{
    background-image:linear-gradient(var(--n-dot) 1px,transparent 1px),linear-gradient(90deg,var(--n-dot) 1px,transparent 1px);
    background-size:36px 36px;
  }
}
html body#finzNeo.neo.neo.bg-black::after{ /* glow lembut di malam hari */
  content:""; position:fixed; inset:auto -20% -30% -20%; height:60vh; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, var(--n-glow), transparent 65%);
}
html body#finzNeo.neo.neo .bg-grid, html body#finzNeo.neo.neo #bgScene, html body#finzNeo.neo.neo #bgTint, html body#finzNeo.neo.neo #visualizerCanvas { opacity:.05 !important; filter:grayscale(1); }
html body#finzNeo.neo.neo ::selection { background:var(--n-s); color:var(--n-fi); }
html body#finzNeo.neo.neo * { scrollbar-width:thin; scrollbar-color:var(--n-p) var(--n-panel2); }
html body#finzNeo.neo.neo ::-webkit-scrollbar{ width:12px; height:12px; }
html body#finzNeo.neo.neo ::-webkit-scrollbar-track{ background:var(--n-panel2); border-left:2px solid var(--n-bd); }
html body#finzNeo.neo.neo ::-webkit-scrollbar-thumb{ background:var(--n-p); border:2px solid var(--n-bd); border-radius:0; }

html body#finzNeo.neo.neo .app { width:min(1080px,92%) !important; }
@media (min-width:900px){ html body#finzNeo.neo.neo .app { width:min(1180px,90%) !important; padding-top:34px !important; } }

/* ---------- 2. TIPOGRAFI ---------- */
html body#finzNeo.neo.neo h1, html body#finzNeo.neo.neo h2, html body#finzNeo.neo.neo h3, html body#finzNeo.neo.neo .home-title, html body#finzNeo.neo.neo .hero h1, html body#finzNeo.neo.neo .profile-main-title, html body#finzNeo.neo.neo .search-page-title {
  color:var(--n-ink) !important; font-weight:900 !important; letter-spacing:-.035em !important;
  -webkit-text-fill-color:currentColor !important; text-shadow:none !important;
}
html body#finzNeo.neo.neo .home-title, html body#finzNeo.neo.neo #heroTitle {
  font-size:clamp(34px,9vw,56px) !important; line-height:1.02 !important;
  text-shadow:none !important;
}
@media (min-width:900px){ html body#finzNeo.neo.neo .home-title, html body#finzNeo.neo.neo #heroTitle { font-size:clamp(56px,6vw,84px) !important; text-shadow:none !important; } }
html body#finzNeo.neo.neo .home-title, html body#finzNeo.neo.neo #heroTitle {
  background:var(--n-panel) !important; color:var(--n-btx) !important; -webkit-text-fill-color:var(--n-btx) !important;
  border:var(--n-bw) solid var(--n-bd) !important; box-shadow:8px 8px 0 var(--n-sh) !important; border-radius:var(--n-rad) !important;
  text-shadow:none !important; padding:16px 20px !important; transform:rotate(-1deg) !important;
}
html body#finzNeo.neo.neo .home-title .typing-shimmer, html body#finzNeo.neo.neo #heroTitle .typing-shimmer, html body#finzNeo.neo.neo .home-title * {
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; animation:none !important;
  color:var(--n-btx) !important; -webkit-text-fill-color:var(--n-btx) !important; text-shadow:none !important; filter:none !important;
}
html body#finzNeo.neo.neo .typing-cursor { background:var(--n-p) !important; -webkit-text-fill-color:initial !important; }
html body#finzNeo.neo.neo .subtitle, html body#finzNeo.neo.neo .auth-sub, html body#finzNeo.neo.neo .media-description, html body#finzNeo.neo.neo .tiktok-subtext, html body#finzNeo.neo.neo .history-auto-note,
html body#finzNeo.neo.neo .profile-logout-hint, html body#finzNeo.neo.neo .hub-title p, html body#finzNeo.neo.neo small { color:var(--n-mute) !important; font-weight:600 !important; }
html body#finzNeo.neo.neo .eyebrow {
  display:inline-block !important; background:var(--n-s) !important; color:var(--n-fi) !important;
  border:var(--n-bw) solid var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important;
  border-radius:999px !important; padding:4px 12px !important; font:800 11px/1.2 "Space Mono",monospace !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; transform:rotate(-1.5deg);
}
html body#finzNeo.neo.neo .neon-sub {
  display:inline-block !important; background:var(--n-t) !important; color:var(--n-fi) !important;
  -webkit-text-fill-color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; padding:6px 14px !important;
  border-radius:var(--n-rad) !important; font-size:15px !important; text-transform:uppercase; letter-spacing:.04em !important;
  transform:rotate(-1deg); margin-bottom:14px !important;
}
html body#finzNeo.neo.neo a { color:var(--n-ink); }
html body#finzNeo.neo.neo .auth-switch a, html body#finzNeo.neo.neo .auth-options a { color:var(--n-ink) !important; text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--n-p); text-underline-offset:3px; }
html body#finzNeo.neo.neo footer { color:var(--n-mute) !important; font:700 12px "Space Mono",monospace !important; text-align:center; letter-spacing:.06em; }

/* ---------- 3. TOPBAR + TOMBOL ---------- */
html body#finzNeo.neo.neo .brand, html body#finzNeo.neo.neo .brand-neon {
  background:var(--n-s) !important; color:var(--n-fi) !important; -webkit-text-fill-color:var(--n-fi) !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important; animation:none !important;
  border:var(--n-bw) solid var(--n-bd) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important;
  border-radius:var(--n-rad) !important; padding:6px 16px !important; font-weight:900 !important;
  letter-spacing:-.02em; transform:rotate(-2deg); transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
html body#finzNeo.neo.neo .brand:hover { transform:rotate(1deg) scale(1.05); }
html body#finzNeo.neo.neo .secure { background:var(--n-panel) !important; color:var(--n-ink) !important; border:2px solid var(--n-bd) !important; }

html body#finzNeo.neo.neo .icon-btn, html body#finzNeo.neo.neo .chat-icon-btn, html body#finzNeo.neo.neo .gi-icon-btn, html body#finzNeo.neo.neo .chat-back-btn, html body#finzNeo.neo.neo .feature-back-btn, html body#finzNeo.neo.neo .hd-back-btn,
html body#finzNeo.neo.neo #musicToggle, html body#finzNeo.neo.neo #musicListToggle, html body#finzNeo.neo.neo .music-arrow-btn, html body#finzNeo.neo.neo .desktop-nav-toggle, html body#finzNeo.neo.neo .chat-attach-btn, html body#finzNeo.neo.neo .toggle-pass,
html body#finzNeo.neo.neo .tool-icon-btn, html body#finzNeo.neo.neo .currency-swap-btn, html body#finzNeo.neo.neo .currency-picker-close {
  background:var(--n-t) !important; color:var(--n-fi) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) - 4px) !important;
  box-shadow:3px 3px 0 var(--n-sh) !important; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s !important;
}
html body#finzNeo.neo.neo .icon-btn .material-symbols-outlined, html body#finzNeo.neo.neo .chat-icon-btn .material-symbols-outlined, html body#finzNeo.neo.neo .gi-icon-btn .material-symbols-outlined,
html body#finzNeo.neo.neo #musicToggle .material-symbols-outlined, html body#finzNeo.neo.neo #musicListToggle .material-symbols-outlined, html body#finzNeo.neo.neo .tool-icon-btn .material-symbols-outlined,
html body#finzNeo.neo.neo .chat-attach-btn .material-symbols-outlined, html body#finzNeo.neo.neo .toggle-pass .material-symbols-outlined { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo #themeToggle { background:var(--n-s) !important; }
html body#finzNeo.neo.neo #musicToggle { background:var(--n-q) !important; }
html body#finzNeo.neo.neo #authActionBtn { background:var(--n-p) !important; }
html body#finzNeo.neo.neo .icon-btn:hover, html body#finzNeo.neo.neo .chat-icon-btn:hover, html body#finzNeo.neo.neo #musicToggle:hover, html body#finzNeo.neo.neo .tool-icon-btn:hover { transform:translate(-2px,-2px) rotate(-3deg); box-shadow:6px 6px 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .icon-btn:active, html body#finzNeo.neo.neo .chat-icon-btn:active, html body#finzNeo.neo.neo .chat-attach-btn:active, html body#finzNeo.neo.neo .tool-icon-btn:active { transform:translate(3px,3px) !important; box-shadow:0 0 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .music-list { background:var(--n-panel) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; border-radius:var(--n-rad) !important; }

/* tombol utama */
html body#finzNeo.neo.neo .primary-btn, html body#finzNeo.neo.neo .auth-btn-primary, html body#finzNeo.neo.neo .convert-btn, html body#finzNeo.neo.neo .dl-btn, html body#finzNeo.neo.neo .tiktok-go-btn, html body#finzNeo.neo.neo .qr-btn, html body#finzNeo.neo.neo .hd-btn,
html body#finzNeo.neo.neo .modal-btn-ok, html body#finzNeo.neo.neo .glass-login-btn, html body#finzNeo.neo.neo .tool-tab.active, html body#finzNeo.neo.neo .tiktok-option-btn, html body#finzNeo.neo.neo .gi-invite-link-btn {
  background:var(--n-p) !important; color:var(--n-fi) !important; -webkit-text-fill-color:var(--n-fi) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; font-weight:900 !important; letter-spacing:.01em;
  text-transform:uppercase; font-size:13px !important; cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s !important;
}
html body#finzNeo.neo.neo .auth-btn-secondary, html body#finzNeo.neo.neo .tool-secondary-btn, html body#finzNeo.neo.neo .tool-tab, html body#finzNeo.neo.neo .modal-btn-cancel, html body#finzNeo.neo.neo .remove-logo-btn, html body#finzNeo.neo.neo .brat-api-copy, html body#finzNeo.neo.neo .clear-history-btn, html body#finzNeo.neo.neo .profile-upload-btn {
  background:var(--n-panel) !important; color:var(--n-ink) !important; -webkit-text-fill-color:var(--n-ink) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; font-weight:800 !important; cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s !important;
}
html body#finzNeo.neo.neo .tiktok-option-mp3 { background:var(--n-s) !important; }
html body#finzNeo.neo.neo .tiktok-option-wm { background:var(--n-panel) !important; color:var(--n-ink) !important; -webkit-text-fill-color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .primary-btn:hover, html body#finzNeo.neo.neo .auth-btn-primary:hover, html body#finzNeo.neo.neo .convert-btn:not(:disabled):hover, html body#finzNeo.neo.neo .dl-btn:hover, html body#finzNeo.neo.neo .tiktok-option-btn:hover,
html body#finzNeo.neo.neo .auth-btn-secondary:hover, html body#finzNeo.neo.neo .tool-secondary-btn:hover, html body#finzNeo.neo.neo .tool-tab:hover { transform:translate(-2px,-2px); box-shadow:calc(var(--n-off) + 3px) calc(var(--n-off) + 3px) 0 var(--n-sh) !important; background:var(--n-s) !important; color:var(--n-fi) !important; -webkit-text-fill-color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .primary-btn:active, html body#finzNeo.neo.neo .auth-btn-primary:active, html body#finzNeo.neo.neo .convert-btn:active, html body#finzNeo.neo.neo .dl-btn:active, html body#finzNeo.neo.neo .tiktok-option-btn:active,
html body#finzNeo.neo.neo .auth-btn-secondary:active, html body#finzNeo.neo.neo .tool-secondary-btn:active, html body#finzNeo.neo.neo .tool-tab:active { transform:translate(var(--n-off),var(--n-off)) !important; box-shadow:0 0 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .convert-btn:disabled { background:var(--n-panel2) !important; color:var(--n-mute) !important; -webkit-text-fill-color:var(--n-mute) !important; box-shadow:none !important; border-style:dashed !important; cursor:not-allowed; }
html body#finzNeo.neo.neo .auth-google { background:var(--n-panel) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; font-weight:800 !important; }
html body#finzNeo.neo.neo .btn-ban, html body#finzNeo.neo.neo .admin-delete-btn, html body#finzNeo.neo.neo .profile-logout-btn, html body#finzNeo.neo.neo .profile-remove-avatar, html body#finzNeo.neo.neo .vc-ctrl.hangup, html body#finzNeo.neo.neo .icb-reject {
  background:var(--n-danger) !important; color:var(--n-fi) !important; -webkit-text-fill-color:var(--n-fi) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; font-weight:900 !important;
}
html body#finzNeo.neo.neo .profile-logout-btn .material-symbols-outlined { color:var(--n-fi) !important; }

/* ---------- 4. KARTU / PANEL ---------- */
html body#finzNeo.neo.neo .hub-card, html body#finzNeo.neo.neo .profile-card, html body#finzNeo.neo.neo .converter-card, html body#finzNeo.neo.neo .resolution-card, html body#finzNeo.neo.neo .qr-card, html body#finzNeo.neo.neo .brat-card, html body#finzNeo.neo.neo .calc-card,
html body#finzNeo.neo.neo .auth-card, html body#finzNeo.neo.neo .compact-modal-card, html body#finzNeo.neo.neo .gi-sheet, html body#finzNeo.neo.neo .history-card, html body#finzNeo.neo.neo .currency-picker-sheet, html body#finzNeo.neo.neo .creator-card,
html body#finzNeo.neo.neo .widget-card, html body#finzNeo.neo.neo .info-widget, html body#finzNeo.neo.neo .mediafire-file-card, html body#finzNeo.neo.neo .format-card, html body#finzNeo.neo.neo .brat-api-box {
  background:var(--n-panel) !important; color:var(--n-ink) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
@media (min-width:900px){
  html body#finzNeo.neo.neo .hub-card, html body#finzNeo.neo.neo .profile-card, html body#finzNeo.neo.neo .converter-card, html body#finzNeo.neo.neo .resolution-card, html body#finzNeo.neo.neo .qr-card, html body#finzNeo.neo.neo .brat-card, html body#finzNeo.neo.neo .calc-card { box-shadow:8px 8px 0 var(--n-sh) !important; }
}
html body#finzNeo.neo.neo .profile-card h3, html body#finzNeo.neo.neo .hub-title h2, html body#finzNeo.neo.neo .qr-header h2, html body#finzNeo.neo.neo .resolution-card h2, html body#finzNeo.neo.neo .compact-modal-card h2, html body#finzNeo.neo.neo .auth-card h2 { color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .hub-header { border-bottom:3px dashed var(--n-bd) !important; padding-bottom:14px !important; }
html body#finzNeo.neo.neo .hub-avatar, html body#finzNeo.neo.neo .profile-avatar, html body#finzNeo.neo.neo .chat-avatar, html body#finzNeo.neo.neo .chat-room-avatar, html body#finzNeo.neo.neo .chat-conv-avatar, html body#finzNeo.neo.neo .gi-avatar, html body#finzNeo.neo.neo .glass-avatar {
  border:var(--n-bw) solid var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important; background:var(--n-s) !important; color:var(--n-fi) !important; overflow:hidden;
}
html body#finzNeo.neo.neo .hub-avatar { border-radius:50% !important; }
html body#finzNeo.neo.neo .hub-status-box, html body#finzNeo.neo.neo .support-note, html body#finzNeo.neo.neo .file-info, html body#finzNeo.neo.neo .currency-result, html body#finzNeo.neo.neo .resolution-info, html body#finzNeo.neo.neo .text-preview {
  background:var(--n-panel2) !important; color:var(--n-ink) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) - 2px) !important; box-shadow:3px 3px 0 var(--n-sh) !important;
}
html body#finzNeo.neo.neo .hub-status-box, html body#finzNeo.neo.neo .hub-status-row .hub-status-box { background:var(--n-panel2) !important; }
html body#finzNeo.neo.neo .hub-status-box * { color:inherit; }
html body#finzNeo.neo.neo .hub-status-label, html body#finzNeo.neo.neo .hub-status-label * { color:var(--n-mute) !important; font:700 11px "Space Mono",monospace !important; text-transform:uppercase; }
html body#finzNeo.neo.neo #liveClock, html body#finzNeo.neo.neo #batteryLevel, html body#finzNeo.neo.neo #ipDisplay, html body#finzNeo.neo.neo #hubMemberCount, html body#finzNeo.neo.neo #hubOnlineCount { color:var(--n-ink) !important; font-weight:900 !important; }
html body#finzNeo.neo.neo .hub-online-dot { background:#16C964 !important; border:2px solid var(--n-bd) !important; box-shadow:none !important; }
html body#finzNeo.neo.neo .hub-social-item {
  background:var(--n-panel2) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important;
  border-radius:var(--n-rad) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s !important;
}
html body#finzNeo.neo.neo .hub-social-item:hover { transform:translate(-3px,-3px); box-shadow:calc(var(--n-off) + 4px) calc(var(--n-off) + 4px) 0 var(--n-sh) !important; background:var(--n-s) !important; }
html body#finzNeo.neo.neo .hub-social-item:hover * { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .hub-social-item:active { transform:translate(var(--n-off),var(--n-off)); box-shadow:none !important; }
html body#finzNeo.neo.neo .hub-social-icon { border:var(--n-bw) solid var(--n-bd) !important; border-radius:12px !important; background:#fff !important; }
html body#finzNeo.neo.neo .hub-arrow { color:var(--n-ink) !important; }

/* ---------- 5. GRID FITUR ---------- */
html body#finzNeo.neo.neo .feature-grid { display:grid !important; grid-template-columns:1fr; gap:16px !important; max-width:none !important; }
@media (min-width:560px){ html body#finzNeo.neo.neo .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ html body#finzNeo.neo.neo .feature-grid { grid-template-columns:repeat(3,1fr); gap:24px !important; } }
@media (min-width:1200px){ html body#finzNeo.neo.neo .feature-grid { grid-template-columns:repeat(4,1fr); } }
html body#finzNeo.neo.neo #featureGrid .feature-card, html body#finzNeo.neo.neo #featureGrid .feature-card:nth-child(n), html body#finzNeo.neo.neo .feature-card {
  background:var(--n-card) !important; color:var(--n-fi) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; padding:16px !important; gap:14px !important;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s !important; position:relative; overflow:hidden;
}
html body#finzNeo.neo.neo .feature-card::after {
  content:"call_made"; position:absolute; top:10px; right:12px; font-family:"Material Symbols Outlined" !important; font-weight:500; font-style:normal;
  font-size:22px; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr;
  font-feature-settings:"liga"; -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; color:var(--n-fi); opacity:.75; pointer-events:none;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
html body#finzNeo.neo.neo .feature-card:hover::after { transform:translate(2px,-2px); }
html body#finzNeo.neo.neo .feature-card-disabled::after, html body#finzNeo.neo.neo .feature-back-card::after { content:none; }
html body#finzNeo.neo.neo #featureGrid .feature-card:hover, html body#finzNeo.neo.neo .feature-card:hover { transform:translate(-3px,-3px) rotate(-.6deg) !important; box-shadow:calc(var(--n-off) + 5px) calc(var(--n-off) + 5px) 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo #featureGrid .feature-card:hover { filter:brightness(1.07); }
html body#finzNeo.neo.neo .feature-card:active { transform:translate(var(--n-off),var(--n-off)) !important; box-shadow:0 0 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .feature-card .feature-icon { background:var(--n-fi) !important; color:#fff !important; border:2px solid var(--n-fi) !important; border-radius:12px !important; box-shadow:none !important; }
html body#finzNeo.neo.neo .feature-card .feature-icon .material-symbols-outlined { color:#fff !important; }
html body#finzNeo.neo.neo .feature-card strong, html body#finzNeo.neo.neo .feature-card h3 { color:var(--n-fi) !important; font-weight:900 !important; }
html body#finzNeo.neo.neo .feature-card small, html body#finzNeo.neo.neo .feature-card p { color:rgba(11,11,15,.78) !important; font-weight:700 !important; }
html body#finzNeo.neo.neo .feature-card-disabled { background:var(--n-panel2) !important; filter:grayscale(1); opacity:.6 !important; border-style:dashed !important; box-shadow:none !important; }
html body#finzNeo.neo.neo .feature-back-card { background:var(--n-panel) !important; border-style:dashed !important; color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .feature-back-card strong, html body#finzNeo.neo.neo .feature-back-card small { color:var(--n-ink) !important; }

/* ---------- 6. INPUT ---------- */
html body#finzNeo.neo.neo input[type=text], html body#finzNeo.neo.neo input[type=password], html body#finzNeo.neo.neo input[type=number], html body#finzNeo.neo.neo input[type=url], html body#finzNeo.neo.neo input[type=search], html body#finzNeo.neo.neo input:not([type]),
html body#finzNeo.neo.neo textarea, html body#finzNeo.neo.neo select, html body#finzNeo.neo.neo .profile-input, html body#finzNeo.neo.neo .tool-text-input, html body#finzNeo.neo.neo .tool-textarea, html body#finzNeo.neo.neo .search-box, html body#finzNeo.neo.neo .currency-select-btn,
html body#finzNeo.neo.neo .auth-input-wrap, html body#finzNeo.neo.neo .tiktok-input-row input, html body#finzNeo.neo.neo .currency-picker-search-wrap, html body#finzNeo.neo.neo .qr-logo-drop, html body#finzNeo.neo.neo .color-picker-wrap {
  background:var(--n-input) !important; color:var(--n-ink) !important; -webkit-text-fill-color:var(--n-ink) !important;
  border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) - 2px) !important;
  box-shadow:3px 3px 0 var(--n-sh) !important; font-family:inherit !important; font-weight:700 !important; outline:none !important;
}
html body#finzNeo.neo.neo .auth-input-wrap input, html body#finzNeo.neo.neo .search-box input, html body#finzNeo.neo.neo .currency-picker-search-wrap input { border:0 !important; box-shadow:none !important; background:transparent !important; }
html body#finzNeo.neo.neo input::placeholder, html body#finzNeo.neo.neo textarea::placeholder { color:var(--n-mute) !important; -webkit-text-fill-color:var(--n-mute) !important; opacity:.8; font-weight:600; }
html body#finzNeo.neo.neo input:focus, html body#finzNeo.neo.neo textarea:focus, html body#finzNeo.neo.neo select:focus, html body#finzNeo.neo.neo .auth-input-wrap:focus-within, html body#finzNeo.neo.neo .search-box:focus-within {
  background:var(--n-panel) !important; box-shadow:5px 5px 0 var(--n-p) !important; transform:translate(-1px,-1px);
}
html body#finzNeo.neo.neo .search-box .material-symbols-outlined, html body#finzNeo.neo.neo .currency-picker-search-wrap .material-symbols-outlined { color:var(--n-ink) !important; }
html body#finzNeo.neo.neo label, html body#finzNeo.neo.neo .profile-label, html body#finzNeo.neo.neo .input-group label { color:var(--n-ink) !important; font:800 12px "Space Mono",monospace !important; text-transform:uppercase; letter-spacing:.05em; }
html body#finzNeo.neo.neo .tool-checkbox-row, html body#finzNeo.neo.neo .auth-check { color:var(--n-ink) !important; font-weight:700 !important; }
html body#finzNeo.neo.neo input[type=checkbox], html body#finzNeo.neo.neo input[type=radio] { accent-color:var(--n-p); width:18px; height:18px; }
html body#finzNeo.neo.neo input[type=range] { accent-color:var(--n-p); box-shadow:none !important; border:0 !important; background:transparent !important; }

/* ---------- 7. KONVERTER / DROPZONE ---------- */
html body#finzNeo.neo.neo .drop-zone { background:var(--n-panel2) !important; border:var(--n-bw) dashed var(--n-bd) !important; border-radius:var(--n-rad) !important; color:var(--n-ink) !important; transition:background .2s, transform .2s; }
html body#finzNeo.neo.neo .drop-zone.dragover, html body#finzNeo.neo.neo .drop-zone:hover { background:var(--n-s) !important; color:var(--n-fi) !important; transform:rotate(-.5deg); }
html body#finzNeo.neo.neo .drop-zone.dragover *, html body#finzNeo.neo.neo .drop-zone:hover h2, html body#finzNeo.neo.neo .drop-zone:hover p { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .upload-icon, html body#finzNeo.neo.neo .format-icon, html body#finzNeo.neo.neo .swap { background:var(--n-t) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important; border-radius:12px !important; }
html body#finzNeo.neo.neo .swap { border-radius:50% !important; background:var(--n-s) !important; }
html body#finzNeo.neo.neo .format-chip { background:var(--n-panel) !important; color:var(--n-ink) !important; border:2px solid var(--n-bd) !important; box-shadow:2px 2px 0 var(--n-sh) !important; border-radius:999px !important; font:700 12px "Space Mono",monospace !important; }
html body#finzNeo.neo.neo .format-chip:hover { background:var(--n-q) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .progress { background:var(--n-panel2) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:999px !important; height:20px !important; overflow:hidden; }
html body#finzNeo.neo.neo .progress span, html body#finzNeo.neo.neo #progressBar { background:repeating-linear-gradient(45deg,var(--n-p) 0 12px,var(--n-s) 12px 24px) !important; border-right:3px solid var(--n-bd) !important; }
html body#finzNeo.neo.neo .status { color:var(--n-ink) !important; font-weight:700 !important; }
html body#finzNeo.neo.neo .status.error { color:var(--n-danger) !important; } html body#finzNeo.neo.neo .status.success { color:#16C964 !important; }
html body#finzNeo.neo.neo pre, html body#finzNeo.neo.neo code, html body#finzNeo.neo.neo .brat-api-url { background:var(--n-panel2) !important; color:var(--n-ink) !important; border:2px solid var(--n-bd) !important; border-radius:8px !important; font-family:"Space Mono",monospace !important; }
html body#finzNeo.neo.neo .calc-card { padding:14px !important; }
html body#finzNeo.neo.neo .calc-display-wrap { background:var(--n-input) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; box-shadow:inset 4px 4px 0 rgba(0,0,0,.18) !important; }
html body#finzNeo.neo.neo .calc-display, html body#finzNeo.neo.neo .calc-result { color:var(--n-ink) !important; font-family:"Space Mono",monospace !important; font-weight:700 !important; }
html body#finzNeo.neo.neo .calc-btn { background:var(--n-panel) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) - 4px) !important; box-shadow:3px 3px 0 var(--n-sh) !important; font-weight:900 !important; transition:transform .1s !important; }
html body#finzNeo.neo.neo .calc-btn:active { transform:translate(3px,3px) !important; box-shadow:0 0 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .calc-fn { background:var(--n-t) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .calc-op { background:var(--n-s) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .calc-eq { background:var(--n-p) !important; color:var(--n-fi) !important; }

/* ---------- 8. NAV BAWAH ---------- */
html body#finzNeo.neo.neo .bottom-nav {
  background:var(--n-panel) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) + 4px) !important;
  box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html body#finzNeo.neo.neo .nav-item { background:transparent !important; color:var(--n-ink) !important; border:var(--n-bw) solid transparent !important; border-radius:calc(var(--n-rad) - 2px) !important; font-weight:800 !important; }
html body#finzNeo.neo.neo .nav-item .material-symbols-outlined, html body#finzNeo.neo.neo .nav-item .nav-label { color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .nav-item.active { background:var(--n-p) !important; border-color:var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .nav-item.active .material-symbols-outlined, html body#finzNeo.neo.neo .nav-item.active .nav-label { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .nav-item:not(.active):hover { background:var(--n-panel2) !important; }
@media (max-width:899px){
  /* MOBILE: dock penuh menempel ke bawah, aman untuk notch */
  html body#finzNeo.neo.neo .bottom-nav {
    position:fixed !important; top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; margin:0 !important;
    width:100% !important; max-width:100% !important; height:auto !important; transform:none !important; translate:none !important;
    display:flex !important; flex-direction:row !important; justify-content:space-around !important; align-items:stretch !important; box-sizing:border-box !important;
    border-radius:20px 20px 0 0 !important; border-bottom-width:0 !important; box-shadow:0 -4px 0 var(--n-sh) !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important;
  }
  html body#finzNeo.neo.neo .nav-item { flex:1 1 0 !important; min-width:0 !important; width:auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:2px; padding:6px 4px !important; }
  html body#finzNeo.neo.neo body.desktop-nav-open .bottom-nav, html body#finzNeo.neo.neo.desktop-nav-open .bottom-nav { transform:none !important; }
  html body#finzNeo.neo.neo .nav-item .nav-label { font:800 10px "Space Mono",monospace !important; text-transform:uppercase; letter-spacing:.04em; }
  html body#finzNeo.neo.neo .app { padding-bottom:110px !important; }
}
@media (min-width:900px){
  /* DESKTOP: panel navigasi bergaya sidebar/dock */
  html body#finzNeo.neo.neo .bottom-nav { box-shadow:8px 8px 0 var(--n-sh) !important; padding:14px !important; gap:8px; }
  html body#finzNeo.neo.neo .nav-item { padding:12px 16px !important; font-size:15px !important; }
  html body#finzNeo.neo.neo .nav-item:hover:not(.active) { transform:translateX(-3px); }
  html body#finzNeo.neo.neo .desktop-nav-toggle { background:var(--n-s) !important; }
}

/* ---------- 9. MODAL & AUTH ---------- */
html body#finzNeo.neo.neo .auth-modal { background:rgba(10,8,20,.62) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html body#finzNeo.neo.neo .auth-modal::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1.5px,transparent 1.6px); background-size:18px 18px; pointer-events:none; }
html body#finzNeo.neo.neo .auth-card, html body#finzNeo.neo.neo .compact-modal-card { box-shadow:8px 8px 0 var(--n-sh) !important; border-width:4px !important; }
html body#finzNeo.neo.neo .auth-card h2 { color:var(--n-btx) !important; -webkit-text-fill-color:var(--n-btx) !important; font-size:clamp(26px,7vw,34px) !important; text-shadow:2px 2px 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .auth-card .auth-sub { color:var(--n-btx) !important; -webkit-text-fill-color:var(--n-btx) !important; font-weight:800 !important; }
html body#finzNeo.neo.neo .auth-card { background:var(--n-panel) !important; }
html body#finzNeo.neo.neo .auth-close, html body#finzNeo.neo.neo .chat-lightbox-close { background:var(--n-danger) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:10px !important; box-shadow:3px 3px 0 var(--n-sh) !important; font-weight:900 !important; }
html body#finzNeo.neo.neo .auth-input-wrap { margin-bottom:12px !important; }
html body#finzNeo.neo.neo .auth-divider span { background:var(--n-panel) !important; color:var(--n-mute) !important; font:700 11px "Space Mono",monospace; text-transform:uppercase; }
html body#finzNeo.neo.neo .auth-divider::before, html body#finzNeo.neo.neo .auth-divider::after { border-color:var(--n-bd) !important; background:var(--n-bd) !important; }
/* inline style di modal (warna #ddd/#fff bawaan tema gelap lama) */
html body#finzNeo.neo.neo .compact-modal-card [style*="color:#ddd"], html body#finzNeo.neo.neo .compact-modal-card [style*="color: #ddd"] { color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .compact-modal-card [style*="rgba(255,255,255,0.05)"] { background:var(--n-panel2) !important; border:var(--n-bw) solid var(--n-bd); box-shadow:3px 3px 0 var(--n-sh); }
html body#finzNeo.neo.neo #profileLoginPrompt h3[style], html body#finzNeo.neo.neo #profileLoginPrompt h3 { color:var(--n-ink) !important; }
html body#finzNeo.neo.neo #profileLoginPrompt p[style] { color:var(--n-mute) !important; }
html body#finzNeo.neo.neo #reportReasonInput { color:var(--n-ink) !important; }

/* ---------- 10. PROFIL & RIWAYAT ---------- */
html body#finzNeo.neo.neo .profile-avatar { background:var(--n-p) !important; color:var(--n-fi) !important; font-weight:900 !important; }
html body#finzNeo.neo.neo .history-item, html body#finzNeo.neo.neo .history-day-group { background:var(--n-panel2) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:calc(var(--n-rad) - 2px) !important; box-shadow:3px 3px 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .history-day-label { background:var(--n-s) !important; color:var(--n-fi) !important; border:2px solid var(--n-bd) !important; font:800 11px "Space Mono",monospace !important; border-radius:999px !important; display:inline-block; padding:2px 10px; }
html body#finzNeo.neo.neo .history-icon-box { background:var(--n-t) !important; color:var(--n-fi) !important; border:2px solid var(--n-bd) !important; border-radius:10px !important; }
html body#finzNeo.neo.neo .history-icon-box .material-symbols-outlined { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .history-item *, html body#finzNeo.neo.neo .history-empty { color:inherit; }
html body#finzNeo.neo.neo .history-empty { color:var(--n-mute) !important; }

/* ---------- 11. CHAT ---------- */
html body#finzNeo.neo.neo #page-chat, html body#finzNeo.neo.neo .chat-list-view, html body#finzNeo.neo.neo .chat-room-view, html body#finzNeo.neo.neo .chat-container, html body#finzNeo.neo.neo .chat-messages, html body#finzNeo.neo.neo .chat-conversation-list {
  background:var(--n-bg) !important; color:var(--n-ink) !important;
}
html body#finzNeo.neo.neo .chat-list-header, html body#finzNeo.neo.neo .chat-header, html body#finzNeo.neo.neo .chat-room-header {
  background:var(--n-card) !important; color:var(--n-fi) !important; border-bottom:var(--n-bw) solid var(--n-bd) !important; box-shadow:0 var(--n-off) 0 var(--n-sh) !important;
}
html body#finzNeo.neo.neo .chat-list-header h2, html body#finzNeo.neo.neo .chat-header h2, html body#finzNeo.neo.neo #chatRoomTitle, html body#finzNeo.neo.neo .chat-room-sub, html body#finzNeo.neo.neo .chat-list-header * { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .chat-list-header .chat-icon-btn, html body#finzNeo.neo.neo .chat-header .chat-icon-btn, html body#finzNeo.neo.neo .chat-back-btn { background:var(--n-panel) !important; }
html body#finzNeo.neo.neo .chat-back-btn .ico-back::before, html body#finzNeo.neo.neo .chat-back-btn .ico-back { color:var(--n-ink) !important; border-color:var(--n-ink) !important; }
html body#finzNeo.neo.neo .chat-badge, html body#finzNeo.neo.neo .unread-badge, html body#finzNeo.neo.neo .chat-conv-unread { background:var(--n-p) !important; color:var(--n-fi) !important; border:2px solid var(--n-bd) !important; border-radius:999px !important; font:800 10px "Space Mono",monospace !important; box-shadow:2px 2px 0 var(--n-sh); }
html body#finzNeo.neo.neo .chat-conv-item, html body#finzNeo.neo.neo .chat-list-item {
  background:var(--n-panel) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important;
  border-radius:var(--n-rad) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; margin-bottom:12px !important;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s !important;
}
html body#finzNeo.neo.neo .chat-conv-item:hover { transform:translate(-2px,-2px); box-shadow:calc(var(--n-off) + 3px) calc(var(--n-off) + 3px) 0 var(--n-sh) !important; }
html body#finzNeo.neo.neo .chat-conv-item:active { transform:translate(var(--n-off),var(--n-off)); box-shadow:none !important; }
html body#finzNeo.neo.neo .chat-conv-global { background:var(--n-s) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .chat-conv-global * { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .chat-conv-preview, html body#finzNeo.neo.neo .chat-conv-time { color:var(--n-mute) !important; }
html body#finzNeo.neo.neo .chat-conv-global .chat-conv-preview, html body#finzNeo.neo.neo .chat-conv-global .chat-conv-time { color:rgba(11,11,15,.75) !important; }
html body#finzNeo.neo.neo .chat-list-header h2, html body#finzNeo.neo.neo .chat-header h2 { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; transform:none !important; text-shadow:none !important; font-size:26px !important; }
html body#finzNeo.neo.neo .chat-bubble { border:var(--n-bw) solid var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important; font-weight:600 !important; }
html body#finzNeo.neo.neo .chat-bubble.other { background:var(--n-panel) !important; color:var(--n-ink) !important; border-radius:6px var(--n-rad) var(--n-rad) var(--n-rad) !important; }
html body#finzNeo.neo.neo .chat-bubble.own { background:var(--n-p) !important; color:var(--n-fi) !important; border-radius:var(--n-rad) 6px var(--n-rad) var(--n-rad) !important; }
html body#finzNeo.neo.neo .chat-bubble.own *, html body#finzNeo.neo.neo .chat-bubble.own .chat-text { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .chat-bubble-meta, html body#finzNeo.neo.neo .chat-time { font:700 10px "Space Mono",monospace !important; opacity:.8; }
html body#finzNeo.neo.neo .chat-name { color:var(--n-ink) !important; font-weight:900 !important; }
html body#finzNeo.neo.neo .chat-input-wrap, html body#finzNeo.neo.neo .chat-composer-row, html body#finzNeo.neo.neo .chat-login-prompt, html body#finzNeo.neo.neo .reply-preview, html body#finzNeo.neo.neo .chat-search-bar, html body#finzNeo.neo.neo .typing-indicator { background:var(--n-panel) !important; color:var(--n-ink) !important; border-top:var(--n-bw) solid var(--n-bd) !important; }
html body#finzNeo.neo.neo .chat-composer-row #chatInput, html body#finzNeo.neo.neo #chatInput { border-radius:999px !important; padding:10px 16px !important; }
html body#finzNeo.neo.neo .chat-send-btn, html body#finzNeo.neo.neo #chatSendBtn { background:var(--n-s) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; box-shadow:3px 3px 0 var(--n-sh) !important; border-radius:50% !important; }
html body#finzNeo.neo.neo .chat-send-btn .material-symbols-outlined { color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .chat-room-menu, html body#finzNeo.neo.neo .chat-menu-dropdown, html body#finzNeo.neo.neo .chat-attach-menu, html body#finzNeo.neo.neo .gi-menu, html body#finzNeo.neo.neo .mention-dropdown {
  background:var(--n-panel) !important; color:var(--n-ink) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important;
}
html body#finzNeo.neo.neo .chat-room-menu button, html body#finzNeo.neo.neo .chat-menu-item, html body#finzNeo.neo.neo .chat-attach-menu button, html body#finzNeo.neo.neo .gi-menu button { color:var(--n-ink) !important; font-weight:800 !important; }
html body#finzNeo.neo.neo .chat-room-menu button:hover, html body#finzNeo.neo.neo .chat-menu-item:hover, html body#finzNeo.neo.neo .chat-attach-menu button:hover { background:var(--n-s) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .vn-record-bar { background:var(--n-panel2) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; }
html body#finzNeo.neo.neo .incoming-call-banner { background:var(--n-q) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; border-radius:var(--n-rad) !important; }
html body#finzNeo.neo.neo .icb-accept { background:var(--n-s) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; border-radius:12px !important; font-weight:900; }
@media (min-width:900px){
  html body#finzNeo.neo.neo .chat-container { border:var(--n-bw) solid var(--n-bd) !important; border-radius:var(--n-rad) !important; box-shadow:8px 8px 0 var(--n-sh) !important; overflow:hidden; }
}

/* ---------- 12. LAIN-LAIN ---------- */
html body#finzNeo.neo.neo .currency-picker-overlay { background:rgba(10,8,20,.6) !important; }
html body#finzNeo.neo.neo .currency-picker-list > * { color:var(--n-ink) !important; border-bottom:2px solid var(--n-bd) !important; }
html body#finzNeo.neo.neo .currency-picker-list > *:hover { background:var(--n-s) !important; color:var(--n-fi) !important; }
html body#finzNeo.neo.neo .tool-tab-row { gap:8px; }
html body#finzNeo.neo.neo .toast, html body#finzNeo.neo.neo .toast-msg { background:var(--n-s) !important; color:var(--n-fi) !important; border:var(--n-bw) solid var(--n-bd) !important; box-shadow:var(--n-off) var(--n-off) 0 var(--n-sh) !important; border-radius:var(--n-rad) !important; font-weight:800 !important; }
html body#finzNeo.neo.neo .page-section.active-page { animation:neoPop .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes neoPop { from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@media (hover:none){ /* layar sentuh: matikan efek hover yang "nyangkut" */
  html body#finzNeo.neo.neo .feature-card:hover, html body#finzNeo.neo.neo .icon-btn:hover, html body#finzNeo.neo.neo .hub-social-item:hover, html body#finzNeo.neo.neo .chat-conv-item:hover { transform:none !important; }
}
@media (prefers-reduced-motion:reduce){ html body#finzNeo.neo.neo *, html body#finzNeo.neo.neo *::before, html body#finzNeo.neo.neo *::after { animation:none !important; transition:none !important; } }

/* ---------- CHAT FULLSCREEN: paksa lebar penuh (tidak ikut lebar .app) ---------- */
html body#finzNeo.neo.neo.chat-fullscreen .app, html body#finzNeo.neo.neo.chat-fullscreen .app#mainApp {
  width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
}
html body#finzNeo.neo.neo.chat-fullscreen #page-chat, html body#finzNeo.neo.neo.chat-fullscreen .chat-list-view, html body#finzNeo.neo.neo.chat-fullscreen .chat-room-view, html body#finzNeo.neo.neo.chat-fullscreen .chat-container { width:100% !important; max-width:none !important; }

/* ---------- BARIS INPUT + TOMBOL (TikTok, IG, Spotify, MediaFire) ---------- */
html body#finzNeo.neo.neo .tiktok-input-row { display:flex !important; gap:12px !important; flex-wrap:wrap; align-items:stretch; margin-bottom:10px !important; }
html body#finzNeo.neo.neo .tiktok-input-row input { flex:1 1 200px !important; min-width:0 !important; width:auto !important; padding:12px 14px !important; }
html body#finzNeo.neo.neo .tiktok-input-row .primary-btn, html body#finzNeo.neo.neo .tiktok-go-btn { flex:0 0 auto; }
@media (max-width:560px){
  html body#finzNeo.neo.neo .tiktok-input-row { flex-direction:column; }
  html body#finzNeo.neo.neo .tiktok-input-row input, html body#finzNeo.neo.neo .tiktok-input-row .primary-btn { width:100% !important; flex:0 0 auto !important; }
}
html body#finzNeo.neo.neo .converter-card, html body#finzNeo.neo.neo .tiktok-card { min-width:0; overflow-wrap:anywhere; }

/* ============================================================
   FIX 1 — Ikon Material Symbols tidak boleh ikut aturan teks
   Penyebab bug: ".hub-status-label *" memakai font Space Mono + uppercase,
   sehingga ligatur ikon (schedule, battery_full, lan, group) rusak dan
   tampil sebagai teks "SCHEDULE", "BATTERY_FULL", dst.
   Rule ini WAJIB berada paling bawah supaya menang atas rule teks di atas.
============================================================ */
html body#finzNeo.neo.neo .material-symbols-outlined,
html body#finzNeo.neo.neo .hub-status-label .material-symbols-outlined,
html body#finzNeo.neo.neo label .material-symbols-outlined,
html body#finzNeo.neo.neo .nav-item .material-symbols-outlined {
  font-family:"Material Symbols Outlined" !important;
  font-weight:normal !important; font-style:normal !important;
  text-transform:none !important; letter-spacing:normal !important;
  font-feature-settings:"liga" !important; -webkit-font-feature-settings:"liga" !important;
  white-space:nowrap !important; direction:ltr !important; line-height:1 !important;
}
html body#finzNeo.neo.neo .hub-status-label .material-symbols-outlined {
  font-size:16px !important; vertical-align:middle; flex:0 0 auto;
}

/* ============================================================
   FIX 2 — Desktop: laci navigasi tertutup layar gelap di halaman Chat
   Penyebab bug: di halaman Chat laci mendapat z-index 200 (rule lama
   "body.chat-fullscreen:not(.chat-in-room) .bottom-nav"), padahal
   backdrop gelap z-index 1170 -> backdrop menutupi laci, menu tidak bisa
   ditekan. Laci harus selalu di atas backdrop.
============================================================ */
@media (min-width:900px){
  html body#finzNeo.neo.neo .desktop-nav-backdrop { z-index:1170 !important; }
  html body#finzNeo.neo.neo.desktop-nav-open .bottom-nav,
  html body#finzNeo.neo.neo.desktop-nav-open #bottomNav,
  html body#finzNeo.neo.neo.desktop-nav-open.chat-fullscreen .bottom-nav,
  html body#finzNeo.neo.neo.desktop-nav-open.chat-in-room .bottom-nav { z-index:1180 !important; }
  html body#finzNeo.neo.neo .desktop-nav-toggle { z-index:1200 !important; }
}