@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
  --bg:#090b10;--surface:#111318;--surface2:#181c24;--border:#1f2433;
  --accent:#5b6ef5;--accent2:#8b5cf6;--accent3:#06b6d4;
  --green:#10b981;--red:#ef4444;--yellow:#f59e0b;
  --text:#e8eaf2;--muted:#6b7385;--soft:#9ca3af;
  --mono:'JetBrains Mono',monospace;--sans:'Space Grotesk',sans-serif
}
html[data-theme="light"]{
  --bg:#f4f5f9;--surface:#ffffff;--surface2:#eef0f6;--border:#dde1ec;
  --text:#161821;--muted:#6b7385;--soft:#4b5163
}
html[data-theme="light"] body{background:var(--bg)}
html[data-theme="light"] header{background:rgba(244,245,249,.85)}
html[data-theme="light"] #bottom-nav{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.08)}
html{transition:background .2s}
body{transition:background .2s,color .2s}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;padding:13px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(9,11,16,.85);backdrop-filter:blur(20px) saturate(1.4);z-index:100}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--accent2),#ec4899);background-size:200% 200%;animation:gchatAvatarShift 6s ease infinite;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 12px rgba(91,110,245,.35)}
.logo-text{font-size:17px;font-weight:700;letter-spacing:-.3px}.logo-text span{color:var(--accent)}
.logo-ver{font-size:9px;font-family:var(--mono);background:rgba(91,110,245,.15);color:var(--accent);padding:2px 6px;border-radius:4px;margin-left:6px}
.btn-hdr{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:7px 15px;border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-hdr:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,110,245,.3)}
.btn-hdr:active{transform:translateY(0) scale(.97)}

/* ENGINE BANNER */
#engine-banner{padding:7px 24px;font-size:12px;color:#a5b0ff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:4px;border-bottom:1px solid rgba(91,110,245,.15);background:rgba(91,110,245,.05)}
@media(max-width:640px){
  #engine-banner{padding:10px 14px;flex-direction:column;align-items:center;text-align:center;gap:6px}
  #engine-banner #engine-status{width:100%}
  #engine-banner #live-status-pill{margin-left:0!important;padding-left:0!important;border-left:none!important;padding-top:4px;border-top:1px solid rgba(91,110,245,.15);width:100%;justify-content:center}
  #engine-banner>span[style*="margin-left:auto"]{margin-left:0!important;text-align:center}
}
#engine-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

/* HERO */
.hero{text-align:center;padding:36px 24px 32px;position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:700px;height:450px;background:
    radial-gradient(ellipse 60% 60% at 30% 40%,rgba(91,110,245,.10) 0%,transparent 65%),
    radial-gradient(ellipse 60% 60% at 70% 60%,rgba(236,72,153,.07) 0%,transparent 65%);
  animation:heroGlowDrift 12s ease-in-out infinite;pointer-events:none}
@keyframes heroGlowDrift{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(14px)}}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(91,110,245,.1);border:1px solid rgba(91,110,245,.25);color:#a5b0ff;font-size:10px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:18px;letter-spacing:.6px;text-transform:uppercase;max-width:92vw}
@media(max-width:420px){.badge{white-space:normal;text-align:center;line-height:1.6;border-radius:14px}}
.badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.hero-glow{animation:none}}
h1{font-size:clamp(26px,4.5vw,46px);font-weight:700;line-height:1.12;letter-spacing:-1px;margin-bottom:12px}
h1 .g{background:linear-gradient(120deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{color:var(--muted);font-size:15px;max-width:460px;margin:0 auto 22px;line-height:1.65}
.hero-stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.hero-stat{transition:transform .2s}
.hero-stat:hover{transform:translateY(-2px)}
.hero-stat .num{font-size:20px;font-weight:700;font-family:var(--mono);background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-stat .lbl{font-size:10px;color:var(--muted);margin-top:1px}

/* WORKSPACE */
.workspace{max-width:1200px;margin:0 auto;padding:22px 14px 60px;display:grid;grid-template-columns:1fr 330px;gap:18px}
@media(max-width:640px){.workspace{gap:14px;padding:18px 14px 60px}}
.full-col{grid-column:1/-1}

/* NOTE BARS */
.compat-note{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);border-radius:12px;padding:11px 15px;font-size:12px;color:#6ee7b7;display:flex;align-items:center;gap:8px;line-height:1.5}
.warn-note{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:11px 15px;font-size:12px;color:#fcd34d;display:flex;align-items:flex-start;gap:8px;line-height:1.6;display:none}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 15px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 4px 14px rgba(0,0,0,.12);transition:transform .2s,border-color .2s,box-shadow .2s}
.stat-box:hover{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 20px rgba(0,0,0,.18)}
.stat-box:hover{transform:translateY(-2px);border-color:rgba(91,110,245,.35)}
.stat-box .s-label{font-size:10px;color:var(--muted);margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.stat-box .s-val{font-size:19px;font-weight:700;font-family:var(--mono)}
.s-val.green{color:var(--green)}.s-val.blue{color:var(--accent)}.s-val.purple{color:var(--accent2)}.s-val.cyan{color:var(--accent3)}

/* DROPZONE */
.dropzone{border:2px dashed var(--border);border-radius:15px;background:var(--surface);padding:40px 28px;text-align:center;cursor:pointer;transition:all .25s;position:relative}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:rgba(91,110,245,.05);box-shadow:0 0 0 4px rgba(91,110,245,.08)}
.dropzone-icon{width:56px;height:56px;background:linear-gradient(135deg,rgba(91,110,245,.15),rgba(139,92,246,.15));border-radius:13px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 16px rgba(91,110,245,.15);transition:transform .25s}
.dropzone:hover .dropzone-icon{transform:scale(1.06) rotate(-2deg)}
.dropzone h2{font-size:17px;font-weight:600;margin-bottom:5px}.dropzone p{color:var(--muted);font-size:13px;margin-bottom:16px}
.btn-upload{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:9px 24px;border-radius:8px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-upload:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(91,110,245,.3)}
.btn-upload:active{transform:translateY(0) scale(.97)}
.format-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;max-width:340px;margin-left:auto;margin-right:auto}
.tag{background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:10px;font-family:var(--mono);padding:2px 6px;border-radius:3px;transition:border-color .15s,color .15s}
.tag:hover{border-color:var(--accent);color:var(--accent)}
#fileInput{display:none}

/* ACTIONS BAR */
.actions-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.spacer{flex:1}
@media(max-width:600px){
  .actions-bar{padding:10px 12px;gap:8px}
  .actions-bar #btn-compress{flex:1 1 100%;min-width:0!important;order:-1}
  .actions-bar .spacer{flex-basis:100%;height:0}
  .actions-bar .btn{flex:1 1 auto;font-size:12px;padding:8px 10px;text-align:center;justify-content:center}
}
.btn{padding:8px 16px;border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s,color .15s;border:none;-webkit-tap-highlight-color:transparent}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,110,245,.3);box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent)}.btn-primary:active{transform:translateY(0) scale(.97)}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}.btn-danger:hover{background:rgba(239,68,68,.22);transform:translateY(-1px)}
.btn-green{background:linear-gradient(135deg,var(--green),#0ea56f);color:#fff}.btn-green:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(16,185,129,.3)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* FILE ITEMS */
.file-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:7px;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative}
.file-item:hover{border-color:rgba(91,110,245,.4);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.file-item-top{display:flex;align-items:center;gap:10px}
.file-thumb{width:80px;height:52px;background:var(--surface2);border-radius:7px;overflow:hidden;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:1px solid var(--border);transition:border-color .15s}
.file-thumb:hover{border-color:var(--accent)}
.file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);opacity:0;transition:opacity .2s;border-radius:6px;font-size:16px}
.file-thumb:hover .file-thumb-play{opacity:1}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.file-meta-detail{font-size:10px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.file-meta-badge{background:var(--surface2);border:1px solid var(--border);padding:1px 6px;border-radius:3px;font-family:var(--mono);font-size:10px}
.file-status{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap;flex-shrink:0}
.status-wait{background:rgba(245,158,11,.12);color:var(--yellow)}
.status-done{background:rgba(16,185,129,.12);color:var(--green)}
.status-proc{background:rgba(91,110,245,.12);color:var(--accent)}
.status-error{background:rgba(239,68,68,.12);color:var(--red)}
.file-remove{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;font-size:14px;flex-shrink:0;transition:color .2s,transform .15s}.file-remove:hover{color:var(--red);transform:scale(1.15)}
.file-item-bot{margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
.file-compress-info{font-size:11px;color:var(--green);font-family:var(--mono);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.download-btn{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.25);padding:4px 12px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .2s,transform .15s;animation:dlGridIn .3s cubic-bezier(.2,.8,.3,1) both}
.download-btn:hover{background:rgba(16,185,129,.22);transform:translateY(-1px)}
.download-btn:active{transform:scale(.95)}
/* Highlight khusus preset "Terbaik" biar langsung ketebak pilihan yang
   direkomendasikan di antara semua opsi kualitas */
.download-btn.dl-btn-best{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.download-btn.dl-btn-best:hover{filter:brightness(1.1)}
@keyframes dlGridIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.download-btn{animation:none}}
.dl-result-in{animation:dlResultIn .35s cubic-bezier(.2,.8,.3,1)}
@keyframes dlResultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.dl-result-in{animation:none}}
/* Progress fill visual di tombol download — diisi lewat CSS var --progress
   (0%-100%) yang di-update JS pas dlDownload() jalan. isolation:isolate +
   z-index:-1 di ::before biar fill-nya selalu di BELAKANG teks tombol,
   gak perlu span pembungkus tambahan. .download-btn otomatis kepakai
   (grid preset); tombol lain (musik/subtitle) opt-in lewat class
   .dl-progress-btn di HTML-nya. */
.download-btn,.dl-progress-btn{position:relative;overflow:hidden;isolation:isolate}
.download-btn::before,.dl-progress-btn::before{content:'';position:absolute;inset:0;width:var(--progress,0%);background:rgba(91,110,245,.18);background:color-mix(in srgb, var(--accent) 18%, transparent);transition:width .2s linear;z-index:-1;pointer-events:none}
/* Toggle switch modern buat checkbox on/off (trim, sponsorblock) —
   gantiin checkbox default browser yang polos. Native <input> tetap ada
   (cuma disembunyiin visualnya) biar accessibility & keyboard nav tetap
   jalan normal. */
.dl-toggle{position:relative;display:inline-block;width:34px;height:19px;flex-shrink:0}
.dl-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.dl-toggle-track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border);border-radius:20px;transition:background .2s,border-color .2s}
.dl-toggle-track::before{content:'';position:absolute;width:13px;height:13px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:transform .2s,background .2s}
.dl-toggle input:checked ~ .dl-toggle-track{background:rgba(91,110,245,.25);border-color:var(--accent)}
.dl-toggle input:checked ~ .dl-toggle-track{background:color-mix(in srgb, var(--accent) 25%, var(--surface2));border-color:var(--accent)}
.dl-toggle input:checked ~ .dl-toggle-track::before{transform:translateX(15px);background:var(--accent)}
.dl-toggle input:focus-visible ~ .dl-toggle-track{box-shadow:0 0 0 3px rgba(91,110,245,.2);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
@media (prefers-reduced-motion:reduce){.dl-toggle-track,.dl-toggle-track::before{transition:none}}
/* Skeleton shimmer — placeholder animasi pas nunggu "Cek Video" diproses,
   bentuknya niru layout kartu hasil (thumbnail + baris teks) */
.dl-skeleton{display:flex;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px}
.dl-skeleton-thumb{width:70px;height:70px;border-radius:8px;flex-shrink:0}
.dl-skeleton-lines{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center;min-width:0}
.dl-skeleton-line{height:10px;border-radius:4px}
.dl-skeleton-thumb,.dl-skeleton-line{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);background-size:200% 100%;animation:dlSkeletonShimmer 1.4s ease-in-out infinite}
@keyframes dlSkeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dl-skeleton-thumb,.dl-skeleton-line{animation:none;opacity:.6}}
#dl-subtitle-lang:focus,#dl-trim-start:focus,#dl-trim-end:focus,#qrgen-input:focus,#qris-amount:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(91,110,245,.12);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
.progress-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899);background-size:200% 100%;animation:progressShimmer 1.6s linear infinite;border-radius:2px;transition:width .3s ease;width:0%}
@keyframes progressShimmer{0%{background-position:0% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.progress-bar{animation:none}}

/* SETTINGS PANEL */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.panel-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel-title::before{content:'';width:3px;height:12px;background:var(--accent);border-radius:2px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:500}
.field select,.field input[type="text"],.field input[type="number"]{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:7px;font-family:var(--sans);font-size:12px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select:focus,.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,110,245,.12);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
.field select option{background:var(--surface)}
.range-wrap{display:flex;align-items:center;gap:10px}
.range-val{font-family:var(--mono);font-size:11px;color:var(--accent);min-width:34px;text-align:right}
input[type="range"]{-webkit-appearance:none;width:100%;height:3px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 0 2px rgba(91,110,245,.3)}

/* TABS */
.tab-bar{display:flex;gap:3px;margin-bottom:12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px}
.tab{flex:1;padding:6px 8px;border-radius:6px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center}
.tab.active{background:var(--surface2);color:var(--text)}
.tab-content{display:none}.tab-content.active{display:block}
/* Mode switcher khusus tool QR/QRIS — SENGAJA pakai class sendiri (bukan
   .tab/.tab-content) karena switchTab() global nyari .tab di SELURUH
   halaman, jadi kalau dipakai ulang di sini bisa numpangi/reset tab
   Kompres/Convert/dll yang lagi aktif di kartu lain. */
.qr-mode-btn{flex:1;padding:6px 8px;border-radius:6px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center}
.qr-mode-btn.active{background:var(--surface2);color:var(--text)}
.qr-mode-content{display:none}.qr-mode-content.active{display:block}

/* TOGGLES */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}.toggle-row:last-child{border-bottom:none}
.toggle-info{display:flex;align-items:center;gap:9px}
.toggle-icon{font-size:14px}
.toggle-label{font-size:12px}.toggle-sub{font-size:10px;color:var(--muted);margin-top:1px}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--border);border-radius:20px;transition:.3s}
.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s}
.toggle input:checked+.slider{background:var(--accent)}.toggle input:checked+.slider:before{transform:translateX(16px)}

/* ═══ ANNOUNCEMENT / INFO BANNER (public) ═══ */
#sys-announcement-bar{display:none;width:100%;padding:9px 24px;font-size:12.5px;font-weight:600;text-align:center;position:relative;z-index:99;animation:slideDown .4s ease}
#sys-announcement-bar.show{display:flex;align-items:center;justify-content:center;gap:10px}
#sys-announcement-bar .ann-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;opacity:.6;padding:2px 6px;border-radius:4px}
#sys-announcement-bar .ann-close:hover{opacity:1}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══ TRADING / MARKET SECTION ═══ */
.trading-section{max-width:1200px;margin:0 auto 32px;padding:0 14px}
.trading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:14px}
.market-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 16px;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer;position:relative;overflow:hidden}
.market-card:hover{border-color:rgba(91,110,245,.4);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.market-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.market-card.up::before{background:linear-gradient(90deg,var(--green),transparent)}
.market-card.down::before{background:linear-gradient(90deg,var(--red),transparent)}
.market-card.neutral::before{background:linear-gradient(90deg,var(--muted),transparent)}
.mc-symbol{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px;font-family:var(--mono)}
.tradingview-widget-container{display:flex;flex-direction:column}
.tradingview-widget-copyright{height:32px;line-height:32px;font-size:12px;text-align:center;flex-shrink:0}
.tradingview-widget-copyright a{text-decoration:none;color:var(--muted)}
.tradingview-widget-copyright .blue-text{color:#2962ff}
.mc-name{font-size:12px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-price{font-size:18px;font-weight:700;font-family:var(--mono);margin-bottom:3px}
.mc-change{font-size:11px;font-weight:600;font-family:var(--mono)}
.mc-change.up{color:var(--green)}.mc-change.down{color:var(--red)}.mc-change.neutral{color:var(--muted)}
.mc-volume{font-size:10px;color:var(--muted);margin-top:4px}
.market-tabs{display:flex;gap:4px;margin-bottom:12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px;width:fit-content}
.market-tab{padding:5px 12px;border-radius:6px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s}
.market-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 8px rgba(91,110,245,.3)}
.trading-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);padding:8px 0;border-top:1px solid var(--border);margin-top:8px}
.market-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
.ai-analysis-box{background:var(--surface);border:1px solid rgba(6,182,212,.25);border-radius:11px;padding:16px;margin-top:10px}
.ai-analysis-box .ai-badge{margin-bottom:10px;display:inline-flex}
#trading-ai-output{font-size:12px;color:var(--soft);line-height:1.75;min-height:60px}
.trading-ai-skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:4px;height:12px;margin-bottom:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.market-spark{display:flex;align-items:flex-end;gap:1px;height:24px;margin-top:6px}
.spark-bar{width:4px;border-radius:1px;min-height:2px;transition:height .3s}

/* ═══ ADMIN: Announcement Settings ═══ */
.adminx-color-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.adminx-ann-color{width:24px;height:24px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s}
.adminx-ann-color.active{border-color:#fff;transform:scale(1.15)}
.adminx-preview-banner{border-radius:8px;padding:10px 16px;text-align:center;font-size:12px;font-weight:600;margin-top:10px;transition:all .3s}

/* ═══ UPTIME MONITOR ═══ */
.uptime-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.uptime-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px}
.uptime-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.uptime-val{font-size:16px;font-weight:700;font-family:var(--mono)}
.uptime-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden}
.uptime-bar{height:100%;border-radius:2px;transition:width .5s ease}
.uptime-services{display:flex;flex-direction:column;gap:7px}
.uptime-svc{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:9px}
.uptime-svc-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.uptime-svc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.uptime-svc-ping{font-size:10px;font-family:var(--mono);color:var(--muted)}
.uptime-svc-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}
.svc-online{background:rgba(16,185,129,.12);color:var(--green)}.svc-offline{background:rgba(239,68,68,.12);color:var(--red)}.svc-degraded{background:rgba(245,158,11,.12);color:var(--yellow)}

/* WATERMARK */
.wm-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}
.wm-style-btn{padding:6px;border-radius:6px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-family:var(--sans);font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;line-height:1.4}
.wm-style-btn.active{background:rgba(91,110,245,.1);border-color:var(--accent);color:var(--text)}
.wm-style-preview{font-size:9px;opacity:.65;margin-top:1px}
.watermark-preview{width:100%;height:72px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;position:relative;overflow:hidden}
.wm-canvas-preview{position:absolute;top:0;left:0;width:100%;height:100%}
.color-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.color-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0}
.color-dot.active{border-color:var(--accent);transform:scale(1.2)}

/* PRESET */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.preset-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;cursor:pointer;transition:all .2s}
.preset-card:hover,.preset-card.active{border-color:var(--accent);background:rgba(91,110,245,.05)}
.preset-name{font-size:12px;font-weight:600;margin-bottom:2px}.preset-desc{font-size:10px;color:var(--muted)}

/* FEATURES */
.features-section{max-width:1200px;margin:0 auto 50px;padding:0 14px}
.section-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:default}
.feat-card:hover{transform:translateY(-2px);border-color:rgba(91,110,245,.35);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.feat-card:hover{border-color:rgba(91,110,245,.4);transform:translateY(-2px)}
.feat-num{font-size:9px;font-family:var(--mono);color:var(--accent);font-weight:600;margin-bottom:6px}
.feat-icon{font-size:18px;margin-bottom:6px}
.feat-title{font-size:12px;font-weight:600;margin-bottom:2px}
.feat-desc{font-size:10px;color:var(--muted);line-height:1.5}

/* HISTORY */
.history-table{width:100%;border-collapse:collapse;font-size:11px}
.history-table th{text-align:left;padding:7px 9px;color:var(--muted);font-weight:600;font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border)}
.history-table td{padding:8px 9px;border-bottom:1px solid rgba(31,36,51,.5);font-family:var(--mono);font-size:10px}
.history-table tr:hover td{background:var(--surface2)}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:26px;width:460px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;margin-bottom:7px}
.modal p{color:var(--muted);font-size:12px;margin-bottom:18px;line-height:1.65}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}

/* CONFIRM SETTINGS MODAL */
.settings-confirm{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:14px;margin-bottom:16px;max-height:340px;overflow-y:auto}
.settings-confirm-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(31,36,51,.5);font-size:12px}
.settings-confirm-row:last-child{border-bottom:none}
.sc-key{color:var(--muted);font-size:11px}
.sc-val{font-family:var(--mono);font-size:11px;color:var(--text)}
.sc-val.changed{color:var(--accent)}

/* VIDEO PREVIEW MODAL */
.modal-wide{width:580px}
.video-preview-wrap{width:100%;background:#000;border-radius:9px;overflow:hidden;margin-bottom:12px;position:relative}
.video-preview-wrap video{width:100%;display:block;max-height:280px}
.video-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.vinfo-box{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:9px 11px}
.vinfo-label{font-size:10px;color:var(--muted);margin-bottom:3px}
.vinfo-val{font-size:13px;font-weight:600;font-family:var(--mono)}

/* TOAST */
.toast-wrap{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:7px;z-index:300}
.toast{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 14px;font-size:12px;display:flex;align-items:center;gap:9px;animation:slideIn .3s ease;max-width:300px}
.toast.success{border-left:3px solid var(--green)}.toast.error{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--accent)}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* BADGES */
.hdr-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.5px;vertical-align:middle;margin-left:3px}
.mp4-badge{display:inline-block;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.5px;vertical-align:middle;margin-left:3px}

/* old media query replaced above */

/* ═══ AUTH OVERLAY ═══ */
#auth-overlay{position:fixed;inset:0;background:rgba(9,11,16,.97);backdrop-filter:blur(20px);z-index:1000;display:flex;align-items:center;justify-content:center}
#auth-overlay.hidden{display:none}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:36px 32px;width:380px;max-width:95vw;position:relative;animation:authBoxIn .35s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 20px 60px rgba(0,0,0,.4),0 0 90px -20px rgba(91,110,245,.35);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 20px 60px rgba(0,0,0,.4),0 0 90px -20px color-mix(in srgb, var(--accent) 45%, transparent)}
@keyframes authBoxIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.auth-box{animation:none}}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center}
.auth-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 14px rgba(91,110,245,.35);box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent)}
.auth-logo-text{font-size:20px;font-weight:700;letter-spacing:-.3px}.auth-logo-text span{color:var(--accent)}
.auth-tabs{display:flex;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:22px}
.auth-tab{flex:1;padding:7px;border-radius:6px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.auth-tab.active{background:var(--surface2);color:var(--text)}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:500}
.auth-field input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 13px;border-radius:8px;font-family:var(--sans);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,110,245,.12);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
/* Tombol submit disamain sama gradient aksen yang dipakai di seluruh app
   (bubble chat, tombol kirim, dll) — sebelumnya warna solid var(--accent)
   polos, beda sendiri dari elemen lain. Hover-nya SENGAJA gak hardcode
   warna biru (#4a5de0 lama) karena itu gak ikut kalau aksennya di-custom
   (fitur premium) — sekarang pakai filter brightness, otomatis ngikutin
   warna aksen apa pun. */
.auth-btn{width:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:11px;border-radius:9px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:filter .2s,transform .15s;margin-top:4px}
.auth-btn:hover{filter:brightness(1.1)}
.auth-btn:active{transform:scale(.98)}
.auth-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.auth-divider{text-align:center;color:var(--muted);font-size:11px;margin:14px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:calc(50% - 20px);height:1px;background:var(--border)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.auth-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:7px;padding:8px 11px;font-size:11px;color:var(--red);margin-bottom:12px;display:none}
.auth-ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:7px;padding:8px 11px;font-size:11px;color:var(--green);margin-bottom:12px;display:none}
.auth-footer{font-size:10px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.6}
.auth-link{color:var(--accent);cursor:pointer;text-decoration:underline}

/* user badge in header */
.user-badge{display:flex;align-items:center;gap:8px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.user-name{font-size:12px;font-weight:500;color:var(--soft);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2);padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.verified-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:rgba(29,155,240,.14);color:#1d9bf0;border:1px solid rgba(29,155,240,.35);padding:3px 9px;border-radius:20px;font-weight:600;margin-left:4px;box-shadow:0 2px 8px rgba(29,155,240,.2)}
.verified-badge svg{width:13px;height:13px;flex-shrink:0}
.unverified-badge{font-size:10px;background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.25);padding:2px 7px;border-radius:4px;margin-left:4px;cursor:pointer;transition:background .2s,transform .15s}
.unverified-badge:hover{background:rgba(245,158,11,.2);transform:translateY(-1px)}
.premium-status-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.premium-status-badge.active{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.premium-status-badge.inactive{background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.3)}

/* verif modal */
.verif-info{background:rgba(91,110,245,.07);border:1px solid rgba(91,110,245,.2);border-radius:9px;padding:13px;font-size:12px;color:#a5b0ff;line-height:1.7;margin-bottom:16px}
.verif-code-input{width:100%;background:var(--bg);border:2px solid var(--border);color:var(--text);padding:12px;border-radius:9px;font-family:var(--mono);font-size:22px;text-align:center;letter-spacing:8px;outline:none;transition:border-color .2s;margin-bottom:14px}
.verif-code-input:focus{border-color:var(--accent)}

/* ═══ GIF / AUDIO TOOL STYLES ═══ */
.tool-section{max-width:1200px;margin:0 auto 32px;padding:0 14px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.tool-card:hover{transform:translateY(-2px);border-color:rgba(91,110,245,.3);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.tool-card-title{font-size:13px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.tool-card-desc{font-size:11px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.dl-activity-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.dl-activity-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.dl-activity-body{flex:1;min-width:0}
.dl-activity-name{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dl-activity-email{font-size:10.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-activity-platform{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;background:rgba(91,110,245,.12);color:var(--accent);white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.dl-activity-time{font-size:9.5px;color:var(--muted);flex-shrink:0;white-space:nowrap}
.tool-dropzone{border:2px dashed var(--border);border-radius:10px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px}
.tool-dropzone:hover,.tool-dropzone.dragover{border-color:var(--accent);background:rgba(91,110,245,.04)}
.tool-dropzone p{font-size:12px;color:var(--muted);margin-top:6px}
.tool-dropzone .icon{font-size:26px}
.tool-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tool-row label{font-size:11px;color:var(--muted);flex-shrink:0}
.tool-row select,.tool-row input{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 9px;border-radius:7px;font-family:var(--sans);font-size:11px;outline:none;flex:1;min-width:80px}
.tool-result{margin-top:12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:12px;display:none}
.tool-result img,.tool-result video{max-width:100%;border-radius:7px;display:block;margin-bottom:8px}
.tool-result-info{font-size:11px;color:var(--muted);font-family:var(--mono)}
.gif-preview-wrap{display:flex;gap:12px;margin-top:10px;display:none}
.gif-before,.gif-after{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:10px;text-align:center}
.gif-before label,.gif-after label{font-size:10px;color:var(--muted);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.gif-before img,.gif-after img{max-width:100%;max-height:120px;border-radius:5px;display:block;margin:0 auto}

/* convert format section */
.convert-format-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fmt-chip{padding:5px 11px;border-radius:6px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--mono);transition:all .2s}
.fmt-chip.active{background:rgba(91,110,245,.15);border-color:var(--accent);color:var(--text)}

/* PREMIUM STYLES */
:root{--gold:#f59e0b;--gold2:#fbbf24}
.premium-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.5px;vertical-align:middle;margin-left:4px;box-shadow:0 2px 8px rgba(245,158,11,.25)}
.premium-lock{display:inline-block;font-size:9px;margin-left:3px;vertical-align:middle}
.feature-locked{position:relative;pointer-events:none;opacity:.5}
.feature-locked::after{content:'🔒 Premium';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,11,16,.75);border-radius:inherit;font-size:11px;font-weight:700;color:var(--gold);pointer-events:auto;cursor:pointer}
.btn-premium{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.btn-premium:hover{opacity:.88}
.premium-card{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(217,119,6,.04));border:1px solid rgba(245,158,11,.3);border-radius:13px;padding:20px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.plan-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.plan-card:hover,.plan-card.selected{border-color:var(--gold);background:rgba(245,158,11,.05)}
.plan-card.popular::before{content:'TERLARIS';position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:8px;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap}
.plan-dur{font-size:11px;color:var(--muted);margin-bottom:4px}
.plan-price{font-size:18px;font-weight:700;color:var(--gold);font-family:var(--mono)}
.plan-price-sub{font-size:9px;color:var(--muted);margin-top:2px}
.premium-user-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(217,119,6,.1));border:1px solid rgba(245,158,11,.4);color:var(--gold);font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;margin-left:5px}
.payment-info{background:rgba(91,110,245,.07);border:1px solid rgba(91,110,245,.2);border-radius:9px;padding:13px;font-size:12px;color:#a5b0ff;line-height:1.8;margin:14px 0}
.payment-info b{color:var(--text)}
.payment-info a{color:var(--accent);word-break:break-all}
.payment-steps{counter-reset:step;margin:10px 0}
.payment-steps li{counter-increment:step;list-style:none;padding:6px 0 6px 28px;position:relative;font-size:12px;color:var(--soft);border-bottom:1px solid rgba(31,36,51,.5)}
.payment-steps li:last-child{border-bottom:none}
.payment-steps li::before{content:counter(step);position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:18px;background:rgba(91,110,245,.15);color:var(--accent);font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ss-upload-area{border:2px dashed rgba(245,158,11,.3);border-radius:9px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;margin:10px 0}
.ss-upload-area:hover{border-color:var(--gold);background:rgba(245,158,11,.03)}
.premium-features-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0}
.pf-item{font-size:11px;color:var(--soft);display:flex;align-items:center;gap:5px}
.pf-item::before{content:'✦';color:var(--gold);font-size:9px;flex-shrink:0}

/* DASHBOARD PANEL */
.dashboard-section{max-width:1200px;margin:0 auto 32px;padding:0 14px}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.dash-card{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:11px;padding:16px;transition:transform .2s,box-shadow .2s}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dash-card-title{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.dash-stat{font-size:26px;font-weight:700;font-family:var(--mono);margin-bottom:3px;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dash-sub{font-size:10px;color:var(--muted)}

/* NOTIFICATION */
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--red);position:absolute;top:-2px;right:-2px}
.notif-panel{position:absolute;top:45px;right:0;background:var(--surface);border:1px solid var(--border);border-radius:11px;width:280px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:200;display:none}
.notif-panel.show{display:block}
.notif-item{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background .2s}
.notif-item:hover{background:var(--surface2)}
.notif-item:last-child{border-bottom:none}
.notif-time{font-size:10px;color:var(--muted);margin-top:2px}

/* AI TOOLS SECTION */
.ai-section{max-width:1200px;margin:0 auto 32px;padding:0 14px}
.ai-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(139,92,246,.14));background-size:200% 200%;animation:gchatAvatarShift 5s ease infinite;border:1px solid rgba(6,182,212,.35);color:var(--accent3);font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.5px}
@media (prefers-reduced-motion:reduce){.ai-badge{animation:none}}

/* STREAMING ANIME SECTION (tab bottom-nav ke-8, Fase 1 MVP) */
.streaming-subnav{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.streaming-subnav .btn{white-space:nowrap;flex-shrink:0}
.streaming-search-row{display:flex;gap:8px;margin-bottom:14px}
.streaming-search-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:var(--sans);font-size:13px;min-width:0}
.streaming-search-row input:focus{outline:none;border-color:var(--accent)}
.streaming-filter-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px}
.streaming-chip{flex-shrink:0;background:var(--bg);border:1px solid var(--border);color:var(--soft);font-size:11px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all .15s}
.streaming-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.streaming-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:480px){.streaming-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.streaming-grid{grid-template-columns:repeat(4,1fr)}}
.streaming-card{cursor:pointer}
.streaming-card:active .streaming-card-poster{transform:scale(.96)}
.streaming-card-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:transform .15s}
.streaming-card-poster img{width:100%;height:100%;object-fit:cover;display:block}
.streaming-card-score{position:absolute;top:5px;right:5px;background:rgba(9,11,16,.82);backdrop-filter:blur(4px);color:var(--yellow);font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:6px}
.streaming-card-title{font-size:11px;font-weight:600;margin-top:6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.streaming-continue-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:18px}
.streaming-continue-card{flex-shrink:0;width:112px;cursor:pointer}
.streaming-list-status-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px}
.streaming-empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:12px;line-height:1.7}
.streaming-player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin-bottom:12px}
.streaming-player-wrap video{width:100%;height:100%;object-fit:contain;display:block}
.streaming-ep-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.streaming-ep-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer;transition:border-color .15s}
.streaming-ep-item:active{border-color:var(--accent)}
.streaming-ep-item.watched{opacity:.55}
.streaming-ep-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--soft)}
.streaming-detail-tabs{display:flex;gap:6px;margin-bottom:14px}
.streaming-similar-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.streaming-similar-row .streaming-card{flex-shrink:0;width:100px}
.streaming-comment-item{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--border)}
.streaming-comment-item:last-child{border-bottom:none}
.streaming-comment-body{flex:1;min-width:0}
.streaming-comment-name{font-size:11.5px;font-weight:700;color:var(--text)}
.streaming-comment-text{font-size:12px;color:var(--soft);line-height:1.5;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.streaming-comment-meta{font-size:9.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;align-items:center}
.streaming-comment-del{cursor:pointer;color:var(--red)}
.streaming-comment-input-row{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.streaming-comment-input-row textarea{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-family:var(--sans);font-size:12.5px;resize:none;min-height:38px;max-height:90px}
.streaming-comment-input-row textarea:focus{outline:none;border-color:var(--accent)}
.streaming-stats-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.streaming-stats-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center}
.streaming-stats-num{font-size:17px;font-weight:800;color:var(--accent);font-family:var(--mono)}
.streaming-stats-label{font-size:9px;color:var(--muted);margin-top:2px}
.streaming-season-row{display:flex;gap:8px;margin-bottom:14px}
.streaming-season-row select{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 10px;color:var(--text);font-family:var(--sans);font-size:12.5px;min-width:0}

@media(max-width:860px){
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .premium-features-list{grid-template-columns:1fr}
  .workspace{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .toast-wrap{left:10px;right:10px;bottom:10px}
  .toast{max-width:100%}
  .modal-wide{width:95vw}
}

/* ════════════════════════════════════════════════
   ADMIN PANEL — namespaced "adminx-" supaya tidak
   bertabrakan dengan style NinzyCompress yang sudah ada
   ════════════════════════════════════════════════ */
.adminx-overlay{position:fixed;inset:0;background:rgba(5,6,10,.88);backdrop-filter:blur(6px);z-index:100000;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 14px}
.adminx-overlay.show{display:flex}
.adminx-wrap{max-width:640px;width:100%;margin:0 auto}
.adminx-close{position:fixed;top:18px;right:18px;width:34px;height:34px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9001}
.adminx-close:hover{border-color:var(--red);color:var(--red)}
.adminx-logo{text-align:center;margin-bottom:24px;padding-top:8px}
.adminx-logo-icon{font-size:32px;margin-bottom:6px}
.adminx-logo-title{font-size:21px;font-weight:700}.adminx-logo-title span{color:var(--accent)}
.adminx-logo-sub{font-size:11px;color:#fca5a5;margin-top:8px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);display:inline-block;padding:3px 10px;border-radius:4px}
.adminx-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:14px;transition:border-color .2s}
.adminx-card-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.adminx-card-title::before{content:'';width:3px;height:13px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;flex-shrink:0}
.adminx-field{margin-bottom:12px}
.adminx-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:500}
.adminx-field input,.adminx-field select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 13px;border-radius:8px;font-family:var(--sans);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.adminx-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,110,245,.12)}
.adminx-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px}
.adminx-plan-btn{padding:11px 8px;border-radius:9px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.adminx-plan-btn:hover,.adminx-plan-btn.active{border-color:var(--yellow);background:rgba(245,158,11,.08);color:var(--text)}
.adminx-plan-btn .days{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--yellow);display:block;margin-bottom:2px}
.adminx-plan-btn .price{font-size:10px;color:var(--muted)}
.adminx-row{display:flex;gap:10px}
.adminx-row .adminx-field{flex:1}
.adminx-btn{width:100%;padding:12px;border-radius:9px;border:none;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}
.adminx-btn-generate{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.adminx-btn-generate:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(91,110,245,.3)}
.adminx-btn-wa{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:11px;border-radius:9px;border:none;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,box-shadow .15s}
.adminx-btn-wa:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(91,110,245,.3)}
.adminx-result-box{background:var(--bg);border:1px solid rgba(16,185,129,.25);border-radius:12px;padding:18px;margin-top:16px;display:none}
.adminx-result-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.adminx-code-display{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--green);letter-spacing:3px;word-break:break-all;padding:14px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2);border-radius:9px;text-align:center;margin-bottom:12px;user-select:all;cursor:pointer}
.adminx-code-display:active{background:rgba(16,185,129,.12)}
.adminx-code-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:12px}
.adminx-meta-box{background:var(--surface2);border-radius:8px;padding:10px;text-align:center}
.adminx-meta-label{font-size:10px;color:var(--muted);margin-bottom:3px}
.adminx-meta-val{font-size:13px;font-weight:600;font-family:var(--mono)}
.adminx-btn-copy{width:100%;padding:10px;border-radius:8px;background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.25);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:8px}
.adminx-btn-copy:hover{background:rgba(16,185,129,.2)}
.adminx-history-list{max-height:300px;overflow-y:auto}
.adminx-history-item{padding:10px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:7px;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color .15s}
.adminx-history-item:hover{border-color:rgba(91,110,245,.3)}
/* ═══ Admin Panel — Main Tabs (Tahap 2) ═══ */
.adminx-maintabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px;scrollbar-width:thin}
.adminx-maintabs::-webkit-scrollbar{height:4px}
.adminx-maintab{flex-shrink:0;padding:8px 14px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-family:var(--sans);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.adminx-maintab:hover{border-color:var(--accent);color:var(--text)}
.adminx-maintab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(91,110,245,.3)}
.adminx-tabpanel{display:none}
.adminx-tabpanel.active{display:block}
.adminx-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
.adminx-stat-box{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:14px;transition:transform .2s,border-color .2s}
.adminx-stat-box:hover{transform:translateY(-2px);border-color:rgba(91,110,245,.3)}
.adminx-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.adminx-stat-val{font-size:19px;font-weight:700;font-family:var(--mono);background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.adminx-switch-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.adminx-switch-row:last-child{border-bottom:none}
.adminx-switch-label{font-size:13px;font-weight:600}
.adminx-switch-desc{font-size:10.5px;color:var(--muted);margin-top:2px}
.adminx-switch{position:relative;width:42px;height:24px;flex-shrink:0;cursor:pointer}
.adminx-switch input{opacity:0;width:0;height:0}
.adminx-switch-track{position:absolute;inset:0;background:var(--border);border-radius:14px;transition:all .2s}
.adminx-switch-track::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.adminx-switch input:checked + .adminx-switch-track{background:linear-gradient(135deg,var(--green),#0ea56f)}
.adminx-switch input:checked + .adminx-switch-track::before{transform:translateX(18px)}
.adminx-list-item{padding:11px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:8px;transition:border-color .15s}
.adminx-list-item:hover{border-color:rgba(91,110,245,.3)}
.adminx-list-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.adminx-list-name{font-size:12.5px;font-weight:700}
.adminx-list-sub{font-size:10.5px;color:var(--muted)}
.adminx-badge-sm{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.adminx-badge-pending{background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.3)}
.adminx-badge-approved{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.adminx-badge-rejected{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.adminx-mini-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 10px;font-size:10.5px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s}
.adminx-mini-btn:hover{border-color:var(--accent)}
.adminx-mini-btn.danger{color:var(--red);border-color:rgba(239,68,68,.3)}
.adminx-mini-btn.success{color:var(--green);border-color:rgba(16,185,129,.3)}
.adminx-maint-banner{position:fixed;inset:0;background:var(--bg);z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:hidden}
.adminx-maint-banner.show{display:flex}
.maint-code-runner{width:100%;max-width:520px;margin-top:28px;background:#0d1117;border:1px solid rgba(255,255,255,.08);border-radius:12px;text-align:left;font-family:var(--mono);font-size:11px;line-height:1.7;color:#58a6ff;overflow-y:scroll;overflow-x:hidden;position:relative;height:340px;max-height:42vh;display:flex;flex-direction:column}.maint-code-topbar{padding:8px 12px 6px;font-size:10px;color:#555;letter-spacing:4px;background:#0d1117;flex-shrink:0;border-radius:12px 12px 0 0}.maint-code-lines{flex:1;padding:0 12px 12px 12px;display:flex;flex-direction:column;gap:2px}
.maint-code-runner::before{content:'● ● ●';position:absolute;top:8px;left:12px;font-size:10px;color:#555;letter-spacing:4px}

.maint-code-line{display:flex;gap:10px;opacity:0;animation:maint-line-in .3s forwards}
.maint-code-line .ln{color:#555;min-width:18px;text-align:right;user-select:none}
.maint-code-line .code-ok{color:#3fb950}
.maint-code-line .code-warn{color:#d29922}
.maint-code-line .code-info{color:#58a6ff}
.maint-code-line .code-dim{color:#484f58}
.maint-cursor{display:inline-block;width:7px;height:13px;background:#58a6ff;margin-left:2px;vertical-align:middle;animation:maint-blink .7s steps(1) infinite}
.maint-progress-bar{width:100%;max-width:520px;height:3px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:14px;overflow:hidden}
.maint-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#58a6ff,#3fb950);border-radius:99px;animation:maint-prog 8s linear infinite}
@keyframes maint-line-in{to{opacity:1}}
@keyframes maint-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes maint-prog{0%{width:0%}80%{width:90%}100%{width:90%}}
.maint-cd-box{display:flex;flex-direction:column;align-items:center;gap:3px;background:#0d1117;border:1px solid rgba(88,166,255,.25);border-radius:10px;padding:10px 14px;min-width:54px}
.maint-cd-box span:first-child{font-size:26px;font-weight:700;font-family:var(--mono);color:#58a6ff;line-height:1;letter-spacing:2px}
.maint-cd-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-family:var(--sans)}
.maint-cd-sep{font-size:22px;font-weight:700;color:rgba(88,166,255,.4);padding-bottom:14px;font-family:var(--mono)}
.adminx-h-code{font-family:var(--mono);font-weight:600;color:var(--green);font-size:12px;margin-bottom:2px;cursor:pointer}
.adminx-h-meta{color:var(--muted);font-size:10px}
.adminx-h-badge{background:rgba(245,158,11,.1);color:var(--yellow);border:1px solid rgba(245,158,11,.2);padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;white-space:nowrap}
.adminx-h-expired{background:rgba(107,115,133,.1);color:var(--muted);border:1px solid var(--border)}
.adminx-h-copy{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px;border-radius:5px;transition:color .2s;flex-shrink:0}
.adminx-h-copy:hover{color:var(--green)}
.adminx-empty{text-align:center;color:var(--muted);font-size:12px;padding:24px}
.adminx-warn-box{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:9px;padding:11px 14px;font-size:11px;color:#fca5a5;line-height:1.7;margin-top:12px}
.adminx-info-box{background:rgba(91,110,245,.07);border:1px solid rgba(91,110,245,.2);border-radius:9px;padding:11px 14px;font-size:11px;color:#a5b0ff;line-height:1.7;margin-bottom:14px}
.faq-item{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:var(--surface2)}
.faq-item summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:16px;color:var(--muted);transition:transform .2s}
.faq-item[open] summary::after{content:'–'}
.faq-answer{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
/* Web Settings */
.ws-panel{display:none}.ws-panel.active{display:block}
.ws-subtab{transition:all .2s}.ws-subtab.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.adminx-btn-save{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:9px 22px;border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;width:100%;margin-top:4px;transition:opacity .2s}
.adminx-btn-save:hover{opacity:.85}
.adminx-input{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:9px 13px;border-radius:8px;font-family:var(--sans);font-size:12px;outline:none;width:100%;resize:vertical}
.adminx-input:focus{border-color:var(--accent)}
.adminx-label{font-size:11px;color:var(--muted);margin-bottom:5px;display:block;font-weight:600}
.adminx-form-group{margin-bottom:14px}
.adminx-section-title{font-size:13px;font-weight:700;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.adminx-toggle{position:relative;display:inline-block;width:44px;height:24px}
.adminx-toggle input{opacity:0;width:0;height:0}
.adminx-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:.3s}
.adminx-toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.adminx-toggle input:checked+.adminx-toggle-slider{background:var(--green)}
.adminx-toggle input:checked+.adminx-toggle-slider:before{transform:translateX(20px)}
.adminx-search-box{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:9px 13px;border-radius:8px;font-family:var(--sans);font-size:12px;outline:none;width:100%;margin-bottom:12px}
.adminx-search-box:focus{border-color:var(--accent)}
.adminx-clear-btn{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2);border-radius:7px;padding:6px 12px;font-family:var(--sans);font-size:11px;cursor:pointer;font-weight:600;transition:all .2s}
.adminx-clear-btn:hover{background:rgba(239,68,68,.2)}
/* ── Market Detail Page ── */
#market-detail-page{position:fixed;inset:0;z-index:9600;background:var(--bg);display:none;flex-direction:column;overflow:hidden}
#market-detail-page.show{display:flex}
.mdetail-header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;flex-shrink:0}
.mdetail-back{background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 12px;font-family:var(--sans);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.mdetail-back:hover{border-color:var(--accent);color:var(--accent)}
.mdetail-info{flex:1;min-width:0}
.mdetail-name{font-size:15px;font-weight:700}
.mdetail-ticker{font-size:11px;color:var(--muted);font-family:var(--mono)}
.mdetail-price-row{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.mdetail-price{font-size:26px;font-weight:700;font-family:var(--mono)}
.mdetail-change{font-size:13px;font-weight:600;padding:4px 10px;border-radius:20px}
.mdetail-change.up{background:rgba(16,185,129,.15);color:var(--green)}
.mdetail-change.down{background:rgba(239,68,68,.15);color:var(--red)}
.mdetail-change.neutral{background:var(--surface2);color:var(--muted)}
.mdetail-chart-wrap{flex:1;overflow:hidden;background:#131722;min-height:0}
#mdetail-tv-widget{width:100%;height:100%;display:block}
#chat-page{position:fixed;inset:0;z-index:9500;background:
    radial-gradient(ellipse 80% 50% at 20% 0%,rgba(91,110,245,.08),transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 100%,rgba(236,72,153,.06),transparent 60%),
    var(--bg);
  display:none;flex-direction:column;overflow:hidden;height:100%;width:100%}
#chat-page.show{display:flex}
#dm-thread-page{position:fixed;inset:0;z-index:9700;background:
    radial-gradient(ellipse 80% 50% at 20% 0%,rgba(16,185,129,.08),transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 100%,rgba(91,110,245,.06),transparent 60%),
    var(--bg);
  display:none;flex-direction:column;overflow:hidden;height:100%;width:100%}
#dm-thread-page.show{display:flex}
.dm-thread-item{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:11px;transition:background .15s;cursor:pointer}
.dm-thread-item:hover{background:var(--surface2)}
.dm-thread-item .gchat-avatar{width:44px;height:44px;font-size:17px;flex-shrink:0}
.dm-thread-preview{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dm-thread-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.dm-thread-time{font-size:9.5px;color:var(--muted)}
.dm-thread-unread{background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-page-header{background:linear-gradient(180deg,var(--surface),var(--surface) 70%);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
.chat-back-btn{background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 12px;font-family:var(--sans);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.chat-back-btn:hover{border-color:var(--accent);color:var(--accent)}
.chat-wa-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2),#ec4899);background-size:200% 200%;animation:gchatAvatarShift 6s ease infinite;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 0 0 2px var(--bg),0 0 16px rgba(167,139,250,.35)}
@keyframes gchatAvatarShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.chat-wa-name{font-size:14.5px;font-weight:800;letter-spacing:.1px}
.chat-wa-status{font-size:11px;color:#34d399;display:flex;align-items:center;gap:5px;font-weight:500}
.chat-wa-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#34d399;flex-shrink:0;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:gchatPulseDot 2s ease-out infinite}
@keyframes gchatPulseDot{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.chat-bubbles{flex:1;padding:20px 16px;display:flex;flex-direction:column;gap:10px;max-width:640px;width:100%;margin:0 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chat-bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.chat-bubble.bot::before{content:'';position:absolute;bottom:0;left:-6px;width:12px;height:12px;background:inherit;border-left:inherit;border-bottom:inherit;clip-path:polygon(100% 0,100% 100%,0 100%);border-bottom-left-radius:2px}
.chat-bubble.user::before{content:'';position:absolute;bottom:0;right:-6px;width:12px;height:12px;background:var(--accent2);clip-path:polygon(0 0,100% 100%,0 100%);border-bottom-right-radius:2px}
@keyframes gchatBubbleIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Animasi masuk cuma buat baris pesan yang BENERAN baru (lihat gchatSeenIds/
   dmSeenIds di JS) — bukan tiap kali render ulang. Sebelumnya animation
   nempel langsung di .chat-bubble, jadi tiap ada 1 reaksi/edit di mana pun
   di daftar, SEMUA bubble ikut nge-flash ulang karena listener render ulang
   semuanya dari nol. Sekarang animation cuma nyala kalau parent row punya
   class .chat-row-enter. */
.chat-row-enter .chat-bubble{animation:gchatBubbleIn .3s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.chat-wa-avatar,.chat-wa-status::before,.chat-row-enter .chat-bubble{animation:none}}
.chat-bubble.bot{background:rgba(255,255,255,.05);backdrop-filter:blur(8px);border:1px solid var(--border);border-left:2px solid var(--accent);border-bottom-left-radius:4px;align-self:flex-start;box-shadow:0 2px 10px rgba(0,0,0,.15)}
/* Shadow bubble sendiri SENGAJA didefinisikan 2x: baris pertama fallback
   warna biru default buat browser lama yang gak ngerti color-mix(), baris
   kedua nimpa pakai warna aksen yang LAGI AKTIF (termasuk kalau di-custom
   lewat fitur premium) — biar shadow-nya selalu senada sama gradient
   bubble-nya sendiri, bukan biru default yang gak nyambung. */
.chat-bubble.user{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-bottom-right-radius:4px;align-self:flex-end;box-shadow:0 4px 14px rgba(91,110,245,.25);box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent)}
.chat-bubble-time{font-size:9px;color:var(--muted);margin-top:4px;text-align:right}
/* .chat-bubble.bot tetap pakai abu-abu (var(--muted)) di atas — itu memang
   kebaca jelas karena background bubble user lain gelap. Tapi bubble milik
   sendiri (.user) latarnya gradient var(--accent), yang bisa terang kalau
   warna aksennya di-custom (fitur premium) — abu-abu jadi nyaris gak
   kebaca di situ, makanya jam pesan MASIH ada tapi hampir gak kelihatan
   ("gak keliatan tulisannya"). Di-override jadi putih transparan khusus
   di dalam .user biar tetap kebaca di warna aksen apa pun. */
.chat-bubble.user .chat-bubble-time{color:rgba(255,255,255,.75)}
.chat-input-area{background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:0;max-width:640px;width:100%;margin:0 auto}
.chat-input-box{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:10px 16px;font-family:var(--sans);font-size:13px;color:var(--text);outline:none;resize:none;max-height:100px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.chat-input-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,110,245,.12)}
.chat-send-btn{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .2s,transform .15s}
.chat-send-btn:active{transform:scale(.92)}
.chat-send-btn:hover{opacity:.85}
.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
.chat-quick-btns{display:flex;gap:7px;flex-wrap:wrap;padding:10px 16px 0;max-width:640px;width:100%;margin:0 auto}
.chat-quick-btn{background:rgba(37,211,102,.1);color:#25d366;border:1px solid rgba(37,211,102,.3);border-radius:16px;padding:6px 13px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s;white-space:nowrap}
.chat-quick-btn:hover{background:rgba(37,211,102,.2)}
/* Chat Global tambahan */
.chat-bubble{ padding-bottom:18px; }
/* Balas pesan (reply/quote) — dipakai bareng Chat Global & Chat Pribadi.
   Warnanya SENGAJA gak pakai var(--muted)/var(--accent): kotak kutipan ini
   bisa muncul di atas bubble gelap (punya user lain) ATAU bubble gradient
   terang (punya sendiri, apalagi kalau warna aksennya di-custom lewat fitur
   premium) — jadi dibikin "chip" gelap + teks putih yang tetap kebaca di
   background apa pun, gak gantung sama warna bubble di baliknya. */
.chat-reply-quote{font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.85);background:rgba(0,0,0,.22);border-left:2px solid rgba(255,255,255,.55);border-radius:6px;padding:4px 8px;margin-bottom:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:background .15s}
.chat-reply-quote:hover{background:rgba(0,0,0,.32)}
.chat-reply-quote b{color:#fff}
.gchat-row-highlight .chat-bubble{animation:gchatRowFlash 1.4s ease}
@keyframes gchatRowFlash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 2px var(--accent)}}
@media (prefers-reduced-motion:reduce){.gchat-row-highlight .chat-bubble{animation:none}}
/* Pemisah tanggal ("Hari ini"/"Kemarin"/tanggal) di antara pesan —
   dipakai bareng Chat Global & Chat Pribadi */
.chat-date-sep{display:flex;justify-content:center;margin:6px 0 2px;max-width:640px;width:100%;margin-left:auto;margin-right:auto}
.chat-date-sep span{background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:600;padding:4px 12px;border-radius:20px}
/* Titik animasi "sedang mengetik..." di status bar thread DM */
.typing-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block;animation:typingBounce 1.2s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.typing-dots span{animation:none;opacity:.85}}
.chat-bubble img.chat-img{max-width:100%;border-radius:10px;margin-top:4px;display:block;cursor:pointer}
.chat-bubble .chat-edited-tag{font-size:9px;opacity:.65;font-style:italic;margin-left:4px}
.chat-actions{position:absolute;bottom:2px;right:10px;display:flex;gap:6px}
.chat-bubble.user .chat-actions{right:auto;left:10px}
.mode-btn-active{background:var(--accent)!important;color:#fff!important;box-shadow:0 2px 8px rgba(91,110,245,.4)!important}
.mode-btn-boost-active{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;box-shadow:0 2px 8px rgba(245,158,11,.4)!important}
.chat-action-btn{background:none;border:none;cursor:pointer;font-size:10px;opacity:.6;color:inherit;padding:0}
.chat-action-btn:hover{opacity:1}
.chat-upload-btn{width:38px;height:38px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text);transition:all .2s}
.chat-upload-btn:hover{border-color:var(--accent);color:var(--accent)}
.chat-bubble-name{font-size:10px;font-weight:700;opacity:.75;margin-bottom:3px}
.chat-edit-input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:8px;color:inherit;font-family:var(--sans);font-size:13px;padding:6px 8px;outline:none}
.chat-wa-cta{margin:16px;background:linear-gradient(135deg,rgba(37,211,102,.1),rgba(18,140,126,.1));border:1px solid rgba(37,211,102,.3);border-radius:14px;padding:16px;text-align:center;max-width:608px;width:calc(100% - 32px);margin:0 auto 16px}
.chat-hdr-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:8px;padding:7px 13px;font-family:var(--sans);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:transform .15s,box-shadow .15s}
.chat-hdr-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(91,110,245,.3)}
.chat-hdr-btn:hover{opacity:.85}

/* ── Chat Global v2: Avatar, User Online, Reaction ── */
.gchat-row{display:flex;gap:8px;align-items:flex-end;max-width:88%;align-self:flex-start}
.gchat-row.mine{flex-direction:row-reverse;align-self:flex-end}
.gchat-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#ec4899);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 0 0 2px var(--bg)}
.gchat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.gchat-avatar-online::after{content:'';position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#34d399;border:2px solid var(--bg);box-shadow:0 0 6px rgba(52,211,153,.7)}
.gchat-bubble-wrap{display:flex;flex-direction:column;max-width:100%;min-width:0}
.gchat-row.mine .gchat-bubble-wrap{align-items:flex-end}
.gchat-bubble-wrap .chat-bubble{max-width:100%}

.gchat-userlist-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:7px 11px;font-family:var(--sans);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;color:var(--text);transition:all .2s;flex-shrink:0}
.gchat-userlist-btn:hover{border-color:var(--accent);background:rgba(91,110,245,.1);transform:translateY(-1px)}
.gchat-donate-btn{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none;border-radius:10px;padding:7px 12px;font-size:11px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:4px;flex-shrink:0;box-shadow:0 2px 10px rgba(239,68,68,.3);transition:transform .15s,box-shadow .15s}
.gchat-donate-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(239,68,68,.4)}
.gchat-donate-btn:active{transform:translateY(0) scale(.97)}
.gchat-userlist-btn:hover{border-color:var(--accent);color:var(--accent)}
.gchat-userlist-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:9600;display:none;align-items:flex-end;justify-content:center}
.gchat-userlist-overlay.show{display:flex}
.gchat-userlist-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:78vh;display:flex;flex-direction:column;animation:gchatSheetUp .25s ease;box-shadow:0 -8px 32px rgba(0,0,0,.35)}
@keyframes gchatSheetUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.gchat-userlist-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.gchat-userlist-hdr h3{font-size:15px;margin:0}
.gchat-userlist-close{background:var(--surface2);border:none;width:30px;height:30px;border-radius:50%;color:var(--muted);cursor:pointer;font-size:14px;transition:background .15s,color .15s}
.gchat-userlist-close:hover{background:rgba(239,68,68,.15);color:#ef4444}
.gchat-userlist-body{overflow-y:auto;padding:8px 10px 18px}
.gchat-userlist-item{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:11px;transition:background .15s}
.gchat-userlist-item:hover{background:var(--surface2)}
.gchat-userlist-item .gchat-avatar{width:40px;height:40px;font-size:16px}
.gchat-userlist-info{flex:1;min-width:0}
.gchat-userlist-name{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gchat-userlist-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.gchat-userlist-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:12px}

.gchat-reactions{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.gchat-reaction-chip{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:1px 7px;font-size:11px;display:flex;align-items:center;gap:3px;cursor:pointer;transition:all .15s;line-height:1.6}
.gchat-reaction-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.gchat-reaction-chip.mine{background:linear-gradient(135deg,rgba(91,110,245,.18),rgba(236,72,153,.14));border-color:var(--accent)}
.gchat-reaction-count{font-size:9.5px;font-weight:700;opacity:.8}
.gchat-react-trigger{background:none;border:none;cursor:pointer;font-size:12px;opacity:.5;padding:0;line-height:1;transition:opacity .15s,transform .15s}
.gchat-react-trigger:hover{opacity:1;transform:scale(1.15)}
.gchat-react-picker{position:absolute;bottom:100%;margin-bottom:4px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 8px;display:none;gap:4px;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:10}
.gchat-react-picker.show{display:flex}
.gchat-react-picker button{background:none;border:none;font-size:17px;cursor:pointer;padding:2px;transition:transform .12s}
.gchat-react-picker button:hover{transform:scale(1.3)}

/* Kurumi typing dots */
.furina-dots span{animation:kurumiDot 1.2s infinite;display:inline-block;font-size:16px;line-height:1}
.furina-dots span:nth-child(2){animation-delay:.2s}
.furina-dots span:nth-child(3){animation-delay:.4s}
@keyframes kurumiDot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.adminx-cmd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;transition:all .2s}
.adminx-cmd-item:hover{border-color:var(--accent);background:rgba(91,110,245,.04)}
.adminx-cmd-badge{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:700;white-space:nowrap;flex-shrink:0;margin-top:1px}
.badge-verified{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.badge-pin{background:rgba(91,110,245,.12);color:var(--accent);border:1px solid rgba(91,110,245,.25)}
.badge-system{background:rgba(139,92,246,.12);color:var(--accent2);border:1px solid rgba(139,92,246,.25)}
.badge-data{background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.25)}
.adminx-cmd-code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
.adminx-cmd-desc{font-size:10px;color:var(--muted);line-height:1.5}
.adminx-cmd-copy{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px;border-radius:4px;transition:color .2s;flex-shrink:0;margin-left:auto}
.adminx-cmd-copy:hover{color:var(--green)}
/* ── Verified User Card ── */
.adminx-vuser-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:8px}
.adminx-vuser-card.is-verified{border-color:rgba(16,185,129,.4)}
.adminx-vuser-card.is-unverif{border-color:rgba(245,158,11,.3)}
.adminx-vuser-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adminx-vuser-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
.adminx-vuser-name{font-size:13px;font-weight:600}
.adminx-vuser-email{font-size:11px;color:var(--muted);font-family:var(--mono)}
.adminx-vuser-badge{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:700;margin-top:3px;display:inline-block}
.adminx-vuser-actions{display:flex;gap:7px;margin-top:10px}
.adminx-vbtn-give{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3);border-radius:7px;padding:7px 14px;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;flex:1}
.adminx-vbtn-give:hover{background:rgba(16,185,129,.25)}
.adminx-vbtn-revoke{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25);border-radius:7px;padding:7px 14px;font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;flex:1}
.adminx-vbtn-revoke:hover{background:rgba(239,68,68,.22)}
.adminx-vlist-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(16,185,129,.2);border-radius:8px;margin-bottom:5px;font-size:11px}
.adminx-vlist-name{font-weight:600;flex:1}
.adminx-vlist-email{color:var(--muted);font-family:var(--mono);font-size:10px}
/* ── Redeem Code (Profile) ── */
.redeem-section{background:linear-gradient(135deg,rgba(16,185,129,.07),rgba(16,185,129,.03));border:1px solid rgba(16,185,129,.25);border-radius:12px;padding:16px;margin-top:12px}
.redeem-section-title{font-size:11px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.redeem-input-row{display:flex;gap:8px}
.redeem-input-row input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:8px;font-family:var(--mono);font-size:13px;outline:none;text-transform:uppercase;letter-spacing:1px;transition:border-color .2s}
.redeem-input-row input:focus{border-color:var(--green)}
.redeem-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.redeem-btn:hover{opacity:.88}
.redeem-msg{font-size:11px;margin-top:7px;display:none}
/* ── Dukung / Support QRIS ── */
.support-section{background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(245,158,11,.03));border:1px solid rgba(245,158,11,.25);border-radius:12px;padding:16px;margin-top:12px;text-align:center}
.support-section-title{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.support-desc{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.support-toggle-btn{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.3);border-radius:999px;padding:9px 18px;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
.support-toggle-btn:hover{background:rgba(245,158,11,.22)}
.support-qr-wrap{display:none;margin-top:14px}
.support-qr-wrap.show{display:block}
.support-qr-img{width:100%;max-width:220px;border-radius:10px;background:#fff;padding:8px}
.support-hint{font-size:10px;color:var(--muted);margin-top:9px}
/* ── Premium realtime countdown ── */
.premium-countdown-box{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:12px 14px;margin-top:10px;text-align:center}
.premium-countdown-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.premium-countdown-timer{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--yellow);letter-spacing:2px}
.premium-countdown-sub{font-size:10px;color:var(--muted);margin-top:4px}
/* ── Admin max-uses field ── */
.adminx-uses-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(91,110,245,.1);color:var(--accent);border:1px solid rgba(91,110,245,.2);padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700}
.adminx-h-uses{font-size:10px;color:var(--muted);margin-top:2px}
.adminx-pin-box{max-width:320px;margin:80px auto;text-align:center}
.adminx-pin-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:14px;border-radius:10px;font-family:var(--mono);font-size:20px;letter-spacing:6px;text-align:center;outline:none;margin-bottom:12px}
.adminx-pin-input:focus{border-color:var(--accent)}
@media(max-width:500px){
  .adminx-plan-grid{grid-template-columns:repeat(2,1fr)}
  .adminx-row{flex-direction:column}
  .adminx-code-display{font-size:15px;letter-spacing:1px}
}
/* ═══ HEADER MOBILE — rapikan deretan tombol di layar sempit ═══ */
@media(max-width:600px){
  header{padding:10px 12px;gap:6px 8px;flex-wrap:wrap;row-gap:8px}
  header .logo-text{font-size:14px}
  header .logo-ver{display:none}
  header > div[style*="display:flex"]{gap:6px;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .btn-hdr{padding:6px 9px;font-size:0}
  .btn-hdr#theme-toggle-btn,.btn-hdr#notif-btn{font-size:13px;padding:6px 8px}
  #user-header-area .btn-hdr{font-size:11px;padding:6px 10px}
  .btn-premium{padding:6px 9px;font-size:0;min-width:auto!important}
  .btn-premium::before{content:"⭐";font-size:13px}
  .chat-hdr-btn{padding:6px 9px;font-size:0;gap:0}
  .chat-hdr-btn svg{width:13px;height:13px}
  #btn-dm-hdr::before{content:"✉️";font-size:13px}
}
/* ═══ PROFILE MODAL ═══ */
.profile-avatar-big{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2),#ec4899);background-size:200% 200%;animation:gchatAvatarShift 6s ease infinite;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 0 0 3px var(--bg),0 0 24px rgba(167,139,250,.4)}
.profile-avatar-big img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-avatar-wrap{position:relative;width:72px;height:72px;margin:0 auto 12px;cursor:pointer;border-radius:50%;transition:transform .2s}
.profile-avatar-wrap:hover{transform:scale(1.04)}
.profile-avatar-wrap:hover .profile-avatar-overlay{opacity:1}
.profile-avatar-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;flex-direction:column;gap:2px;z-index:2}
.profile-avatar-overlay svg{width:18px;height:18px;fill:#fff}
.profile-avatar-change-input{display:none}
@media (prefers-reduced-motion:reduce){.profile-avatar-big{animation:none}}
/* header avatar with photo */
.hdr-avatar-btn img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-name{font-size:19px;font-weight:800;text-align:center;margin-bottom:4px;letter-spacing:-.2px}
.profile-email{font-size:12px;color:var(--muted);text-align:center;margin-bottom:14px}
.profile-badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.profile-badges>*{box-shadow:0 2px 8px rgba(0,0,0,.2)}
.profile-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.profile-info-box{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:11px 13px;transition:transform .2s,border-color .2s}
.profile-info-box:hover{transform:translateY(-2px);border-color:rgba(91,110,245,.35)}
.profile-info-label{font-size:10px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.profile-info-val{font-size:13px;font-weight:700;font-family:var(--mono)}
.profile-actions{display:flex;flex-direction:column;gap:7px}
.profile-action-btn{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 14px;cursor:pointer;transition:transform .15s,border-color .2s,background .2s;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text);width:100%;text-align:left}
.profile-action-btn:hover{border-color:var(--accent);background:rgba(91,110,245,.06);transform:translateX(2px)}
.profile-action-btn:active{transform:translateX(2px) scale(.98)}
.profile-action-btn .icon{font-size:18px;width:26px;text-align:center;transition:transform .2s}
.profile-action-btn:hover .icon{transform:scale(1.15)}
.profile-action-btn .arrow{margin-left:auto;color:var(--muted);font-size:10px;transition:transform .2s}
.profile-action-btn:hover .arrow{transform:translateX(2px);color:var(--accent)}
/* Google btn */
/* ═══ RANK GLOBAL ═══ */
.rank-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:18px}
.rank-podium-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.rank-podium-avatar{border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;position:relative;flex-shrink:0;overflow:hidden;transform:translateZ(0)}
.rank-podium-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.rank-podium-crown{font-size:16px;text-align:center}
.rank-podium-name{font-size:11px;font-weight:600;text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-podium-score{font-size:10px;color:var(--accent);font-family:var(--mono);font-weight:700}
.rank-podium-bar{width:60px;border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.rank-list-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border);margin-bottom:5px;transition:border-color .2s}
.rank-list-item.is-me{border-color:var(--accent);background:rgba(91,110,245,.07)}
.rank-list-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;position:relative;overflow:hidden;transform:translateZ(0)}
.rank-list-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.rank-user-detail-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;position:relative;overflow:hidden;margin:0 auto 10px;transform:translateZ(0)}
.rank-user-detail-avatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.rank-list-info{flex:1;min-width:0}
.rank-list-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list-sub{font-size:10px;color:var(--muted)}
.rank-badge{font-size:16px;flex-shrink:0;width:24px;text-align:center}
.rank-score{font-size:12px;font-weight:700;color:var(--accent);font-family:var(--mono);flex-shrink:0}
.rank-my-pos{background:rgba(91,110,245,.1);border:1px solid rgba(91,110,245,.3);border-radius:8px;padding:10px 14px;text-align:center;margin-bottom:12px;font-size:12px}
.rank-btn{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:7px 14px;border-radius:8px;font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;transition:opacity .2s}
.rank-btn:hover{opacity:.85}
.btn-google{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;color:#333;border:1px solid #ddd;padding:10px;border-radius:9px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s;margin-bottom:10px}
.btn-google:hover{background:#f8f8f8;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.btn-google:active{transform:scale(.98)}
.btn-google:disabled{opacity:.75;cursor:not-allowed;transform:none}
.btn-google img{width:18px;height:18px}
/* Spinner buat status loading tombol Google (lihat _setGoogleBtnLoading di
   JS) — dikasih warna biru khas Google (#4285F4) biar tetap senada sama
   logo "G" multi-warna di tombolnya. */
.btn-google-spinner{display:inline-block;width:14px;height:14px;border:2px solid #ddd;border-top-color:#4285F4;border-radius:50%;animation:btnGoogleSpin .7s linear infinite;vertical-align:middle}
@keyframes btnGoogleSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-google-spinner{animation:none;border-top-color:#4285F4;opacity:.8}}
/* header user area improved */
.hdr-user-wrap{display:flex;align-items:center;gap:6px}
.hdr-avatar-btn{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;border:2px solid rgba(91,110,245,.4);transition:all .2s;flex-shrink:0;overflow:hidden;padding:0;position:relative}
.hdr-avatar-btn:hover{border-color:var(--accent);transform:scale(1.05)}
.hdr-user-info{display:flex;flex-direction:column;max-width:110px}
.hdr-user-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-user-sub{font-size:9px;color:var(--muted)}
/* ═══ ACTIVITY TOAST NOTIF ═══ */
.activity-notif{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(17,19,24,.95);border:1px solid rgba(91,110,245,.35);border-radius:12px;padding:10px 18px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text);z-index:999;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;transform:translateX(-50%) translateY(10px);white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5);max-width:90vw}
.activity-notif.show{opacity:1;transform:translateX(-50%) translateY(0)}
.activity-notif .an-icon{font-size:18px;flex-shrink:0}
.activity-notif .an-text b{display:block;font-size:12px;font-weight:700}
.activity-notif .an-text span{font-size:10px;color:var(--muted)}
/* ═══ MUSIC UI ═══ */
.music-genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.music-genre-btn{padding:7px 5px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;font-family:var(--sans)}
.music-genre-btn:hover,.music-genre-btn.active{background:rgba(91,110,245,.15);border-color:var(--accent);color:var(--text)}
.music-player{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:14px;margin-top:10px;display:none}
.music-player-title{font-size:12px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.music-visualizer{display:flex;align-items:flex-end;gap:3px;height:40px;margin-bottom:10px}
.music-bar{width:6px;border-radius:3px;background:var(--accent);animation:musicBar 0.8s ease-in-out infinite alternate}
.music-bar:nth-child(2){animation-delay:.1s;background:var(--accent2)}
.music-bar:nth-child(3){animation-delay:.2s}
.music-bar:nth-child(4){animation-delay:.3s;background:var(--accent2)}
.music-bar:nth-child(5){animation-delay:.4s}
.music-bar:nth-child(6){animation-delay:.5s;background:var(--accent2)}
.music-bar:nth-child(7){animation-delay:.6s}
.music-bar:nth-child(8){animation-delay:.15s;background:var(--accent2)}
@keyframes musicBar{from{height:4px}to{height:36px}}

/* NINZY REACTION WIDGET */
.ninzy-reaction-widget{background:var(--panel,#111B21);border-radius:18px;padding:18px;max-width:380px;margin:0 auto 16px;border:1px solid var(--border,rgba(255,255,255,.06));font-family:var(--sans),-apple-system,Segoe UI,Roboto,sans-serif;text-align:left}
.nr-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nr-logo{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#0B141A;flex-shrink:0}
.nr-title{font-size:14px;font-weight:600;color:var(--text,#E9EDEF)}
.nr-subtitle{font-size:11px;color:var(--muted)}
.nr-reactions{display:flex;flex-wrap:wrap;gap:8px}
.nr-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:7px 12px;cursor:pointer;color:var(--text,#E9EDEF);font-size:14px;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.nr-btn:active{transform:scale(.92)}
.nr-btn.picked{background:#0B3D24;border-color:#25D366}
.nr-btn.picked .nr-count{color:#25D366}
.nr-count{font-size:12px;color:var(--muted)}
.nr-btn.bump .nr-emoji{animation:nrPop .35s ease}
@keyframes nrPop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.nr-btn,.nr-btn .nr-emoji,.nr-btn.bump .nr-emoji{transition:none;animation:none}}

/* ── STEPPER ── */
.prem-step-dot{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default;min-width:52px}
.prem-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--surface2);border:2px solid var(--border);color:var(--muted);transition:all .3s}
.prem-step-lbl{font-size:10px;color:var(--muted);font-weight:500;transition:color .3s}
.prem-step-line{flex:1;height:2px;background:var(--border);border-radius:2px;margin:0 4px;margin-bottom:16px;transition:background .3s;min-width:20px}
.prem-step-dot.active .prem-step-num{background:linear-gradient(135deg,#5b6ef5,#a78bfa);border-color:#5b6ef5;color:#fff;box-shadow:0 0 12px rgba(91,110,245,.4)}
.prem-step-dot.active .prem-step-lbl{color:var(--text);font-weight:700}
.prem-step-dot.done .prem-step-num{background:var(--green);border-color:var(--green);color:#fff}
.prem-step-dot.done .prem-step-lbl{color:var(--green)}
.prem-step-dot.done .prem-step-num::after{content:'✓';font-size:14px}
.prem-step-dot.done .prem-step-num span{display:none}
.prem-step-line.done{background:var(--green)}

/* ── Bottom Navigation (6 kategori: Kompresi/Downloader/Convert/AI Tools/Market/Bantuan) ── */
.main-section{display:none}
.main-section.active{display:block}
#bottom-nav{
  position:fixed;bottom:10px;left:8px;right:8px;z-index:500;
  display:flex;gap:2px;background:rgba(20,22,30,.92);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;
  padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.05) inset;
  max-width:520px;margin:0 auto
}
.bottom-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;color:var(--muted);padding:8px 1px 7px;
  border-radius:14px;cursor:pointer;font-family:inherit;
  transition:transform .15s,background .25s,color .2s;
  -webkit-tap-highlight-color:transparent;position:relative;min-width:0
}
.bottom-nav-btn:active{transform:scale(.92)}
.bottom-nav-btn .bn-icon{font-size:17px;line-height:1;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.bottom-nav-btn .bn-label{font-size:8.8px;font-weight:700;letter-spacing:0;transition:opacity .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bottom-nav-btn.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 16px rgba(91,110,245,.4)}
.bottom-nav-btn.active .bn-icon{transform:translateY(-1px) scale(1.08)}
.bottom-nav-btn:not(.active):hover{color:var(--text);background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){.bottom-nav-btn,.bottom-nav-btn .bn-icon{transition:none}}
/* Dipakai buat tombol/menu manapun yang dimatikan admin lewat panel Feature Toggles */
.ft-disabled{opacity:.4!important;pointer-events:none!important;filter:grayscale(.4)}
/* Kasih ruang di bawah biar konten paling bawah gak ketutup bottom nav */
body{padding-bottom:78px}