/* ═══ NinzyCompress — Premium Dark (override tampilan saja; tidak mengubah fitur/JS) ═══
   Dimuat paling akhir. Hanya memakai variabel & selector yang sudah ada. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{
  --bg:#07060b;--surface:#0e0c15;--surface2:#151222;--border:#241d36;
  --accent:#a855f7;--accent2:#8b5cf6;--accent3:#c9a0ff;
  --text:#f4f2fa;--muted:#8a849c;--soft:#b4aec6;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --glow:0 0 0 1px rgba(168,85,247,.28),0 0 26px -6px rgba(168,85,247,.5);
}
body,button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,.logo-text,.hero-stat .num,.dropzone h2,.tool-card-title{font-family:'Sora',var(--sans);letter-spacing:-.02em}
/* Header & logo */
header{background:rgba(7,6,11,.9);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px 14px}
header>div{flex-wrap:wrap}
.logo-icon{background:var(--accent);animation:none;box-shadow:var(--glow)}
.logo-text span{color:var(--accent3)}
.logo-ver{background:rgba(168,85,247,.14);color:var(--accent3)}
.btn-hdr{background:var(--accent);box-shadow:none}
.btn-hdr:hover{box-shadow:var(--glow)}
.chat-hdr-btn{background:var(--surface2)!important;border:1px solid var(--border);color:var(--text)}
.chat-hdr-btn:hover{border-color:rgba(168,85,247,.6)}
#engine-banner{background:var(--surface);color:var(--soft);border-bottom:1px solid var(--border)}
/* Hero */
.hero-glow{background:radial-gradient(ellipse 50% 60% at 50% 30%,rgba(168,85,247,.16),transparent 70%);animation:none}
.badge{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.3);color:var(--accent3)}
.badge .dot{background:var(--accent)}
h1 .g{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.hero-stat .num{background:none;-webkit-text-fill-color:currentColor;color:var(--accent3);font-family:'Sora',var(--sans)}
.hero-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 26px;position:relative}
.hero-cta button{font:600 14px var(--sans);border-radius:12px;padding:12px 22px;cursor:pointer;transition:.2s}
.hero-cta .cta-main{background:var(--accent);color:#fff;border:0;box-shadow:var(--glow)}
.hero-cta .cta-main:hover{background:var(--accent3);color:#07060b}
.hero-cta .cta-alt{background:transparent;color:var(--text);border:1px solid var(--border)}
.hero-cta .cta-alt:hover{border-color:rgba(168,85,247,.6)}
/* Kartu, panel, dropzone */
.panel,.tool-card,.dropzone{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:none}
.tool-card:hover,.dropzone:hover,.dropzone.dragover{border-color:rgba(168,85,247,.6);box-shadow:var(--glow);background:var(--surface)}
.dropzone{border-style:dashed}
.dropzone-icon{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35)}
.panel-title::before{background:var(--accent)}
.section-title::after{background:linear-gradient(90deg,var(--border),transparent)}
/* Tombol & kontrol */
.btn-primary{background:var(--accent);color:#fff;border:0}
.btn-primary:hover{background:var(--accent3);color:#07060b;box-shadow:var(--glow)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{border-color:rgba(168,85,247,.6)}
.btn-premium{background:transparent!important;border:1px solid rgba(168,85,247,.5)!important;color:var(--accent3)!important}
input[type=range]{accent-color:var(--accent)}
input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{background:var(--bg);border-color:var(--border);border-radius:10px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;outline:none;box-shadow:0 0 0 3px rgba(168,85,247,.18)}
.tab-bar{background:var(--bg);border-color:var(--border)}
.tab.active{background:var(--surface2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
:focus-visible{outline:2px solid var(--accent3);outline-offset:2px}
/* Navigasi bawah */
#bottom-nav{background:rgba(14,12,21,.94);border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.bottom-nav-btn.active{background:var(--accent);color:#fff;box-shadow:var(--glow)}
/* Anti terpotong di layar kecil */
img,video,canvas,svg{max-width:100%}
.main-section{padding-bottom:110px}
@media(max-width:640px){
  header{padding:10px 14px}
  .hero{padding:28px 16px 24px}
  .hero-cta button{flex:1 1 100%}
}
@media(max-width:640px){
  .history-table{display:block;overflow-x:auto;max-width:100%}
  .tab-bar{overflow-x:auto;max-width:100%}
}
/* Tools baru (47-new-tools.js) */
.nt-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.nt-file,.nt-res{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.nt-res{flex-wrap:wrap;margin-top:8px}
.nt-file-in{flex:1;min-width:0;display:flex;flex-direction:column}
.nt-file-in b{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-file-in span{font-size:11px;color:var(--muted)}
.nt-file button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.nt-file button:hover:not(:disabled){border-color:rgba(168,85,247,.6)}.nt-file button:disabled{opacity:.3;cursor:default}
.nt-opts input,.nt-opts select{min-width:0;max-width:100%}.nt-opts input[type=number]{width:84px}
.nt-note{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.nt-go{width:100%}.nt-res a.btn{flex:none;padding:7px 14px;font-size:12px;text-decoration:none}
.nt-err{margin-top:10px;font-size:12px;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:8px 11px}
.nt-hash{flex-basis:100%;font:11px var(--mono);color:var(--accent3);word-break:break-all;order:3}