/* ═══════════════════════════════════════════════════════════════
   NinzyCompress — EYE COMFORT LAYER (anti silau)
   Dimuat PALING AKHIR (setelah premium.css). Hanya CSS: tidak mengubah
   ID / class / JS / logika. Untuk membatalkan: hapus <link> comfort.css
   di index.html.

   Yang diredam:
   - Mode gelap : teks hampir-putih → abu lembut, ungu neon → ungu kalem,
                  glow/bayangan terang dikurangi, flash hover dihilangkan.
   - Mode terang: putih murni #fff → off-white hangat, kontras diturunkan,
                  bagian yang di-hardcode gelap (header/bottom-nav) ikut terang.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. MODE GELAP ── */
:root{
  color-scheme:dark;
  --bg:#0b0a10;--surface:#121019;--surface2:#191726;--border:#2a2540;
  --text:#d9d5e6;--muted:#8a859b;--soft:#a8a3ba;
  --accent:#8b5fd4;--accent2:#7b63cf;--accent3:#b59ae4;
  --glow:0 0 0 1px rgba(139,95,212,.22),0 0 14px -8px rgba(139,95,212,.35);
}
header{background:rgba(11,10,16,.92)}
#bottom-nav{background:rgba(18,16,25,.95);box-shadow:0 8px 28px rgba(0,0,0,.45)}
h1{color:var(--text)}
.hero-glow{background:radial-gradient(ellipse 50% 60% at 50% 30%,rgba(139,95,212,.09),transparent 70%)}
.logo-icon{box-shadow:0 0 0 1px rgba(139,95,212,.25)}

/* Tombol: tidak ada lagi "kilat" terang saat disentuh */
.btn-primary:hover,.hero-cta .cta-main:hover{
  background:color-mix(in srgb,var(--accent) 86%,#fff);color:#fff;
}
.btn-primary,.btn-upload{box-shadow:none}
.btn-primary:hover,.btn-upload:hover{box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 24%,transparent)}
.tool-card:hover,.dropzone:hover,.dropzone.dragover{box-shadow:var(--glow)}

/* Teks aksen kecil: kalem, bukan neon */
.badge,.logo-ver,.hero-stat .num{color:var(--accent3)!important}
#engine-banner{color:var(--soft)}

/* ── 2. MODE TERANG ── */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#e8e6ed;--surface:#f3f2f6;--surface2:#e2e0e9;--border:#cdcad8;
  --text:#25222e;--muted:#6a6577;--soft:#4c4759;
  --accent:#7650c0;--accent2:#6a55c0;--accent3:#5d3fa3;
  --shadow-sm:0 1px 2px rgba(30,26,45,.06);
  --shadow-md:0 6px 18px rgba(30,26,45,.08);
  --shadow-lg:0 16px 40px rgba(30,26,45,.14);
  --glow:0 0 0 1px rgba(118,80,192,.2),0 4px 14px -6px rgba(118,80,192,.28);
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] header{background:rgba(232,230,237,.9);border-bottom-color:var(--border)}
html[data-theme="light"] #bottom-nav{
  background:rgba(240,239,244,.95);border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(30,26,45,.12);
}
html[data-theme="light"] #engine-banner{background:var(--surface);color:var(--soft);border-bottom-color:var(--border)}
html[data-theme="light"] .hero-glow{background:radial-gradient(ellipse 50% 60% at 50% 30%,rgba(118,80,192,.08),transparent 70%)}
html[data-theme="light"] h1{color:var(--text)}
html[data-theme="light"] .badge,
html[data-theme="light"] .logo-ver,
html[data-theme="light"] .hero-stat .num{color:var(--accent3)!important}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .hero-cta .cta-main:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff}
html[data-theme="light"] .chat-hdr-btn{background:var(--surface2)!important;color:var(--text)}
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .hero-cta .cta-alt{color:var(--text);border-color:var(--border)}
html[data-theme="light"] input:not([type=range]):not([type=checkbox]):not([type=radio]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{background:var(--surface);color:var(--text)}
html[data-theme="light"] .tab-bar,
html[data-theme="light"] .nt-file,
html[data-theme="light"] .nt-res{background:var(--surface2)}
html[data-theme="light"] .tab.active{background:var(--surface)}
html[data-theme="light"] .nt-err{color:#a32626}

/* Dashboard publik kini hanya memuat kartu verifikasi email: jangan sisakan jarak saat kartu tersembunyi */
#dashboard-section{margin-bottom:0}
#verif-email-card{margin-bottom:32px}

/* ── Animasi Downloader tetap hidup walau HP memakai "Hapus animasi"/mode hemat daya ──
   Aslinya (style.css) empat animasi ini otomatis MATI bila perangkat meminta gerak dikurangi
   (prefers-reduced-motion). Blok ini menyalakannya lagi khusus untuk Downloader. Hapus blok ini bila
   ingin kembali mengikuti pengaturan sistem. Semuanya animasi halus (fade/geser/kilau), tanpa gerakan besar. */
@media (prefers-reduced-motion:reduce){
  .download-btn{animation:dlGridIn .3s cubic-bezier(.2,.8,.3,1) both}
  .dl-result-in{animation:dlResultIn .35s cubic-bezier(.2,.8,.3,1)}
  .dl-skeleton-thumb,.dl-skeleton-line{animation:dlSkeletonShimmer 1.4s ease-in-out infinite;opacity:1}
  .progress-bar{animation:progressShimmer 1.6s linear infinite}
}