/* =========================================================
   NINZY CORE — "Violet Night" theme
   Dark navy + neon violet, rounded cards, mobile bottom nav.
   Loaded AFTER style.css; overrides tokens and key components.
   ========================================================= */
:root,
[data-theme="dark"]{
  --ink:        #090722;
  --ink-2:      #12103a;
  --ink-3:      #1b1850;
  --paper:      #f1efff;
  --paper-dim:  #9d99cf;
  --seal:       #7c3aed;
  --seal-hi:    #9455ff;
  --brass:      #a78bfa;
  --teal:       #5b8cff;
  --line-soft:  rgba(139,108,255,0.22);
  --shadow:     0 12px 34px rgba(4,2,30,0.6);
  --radius:     12px;
  --radius-lg:  20px;
  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;
  --glow:       0 0 0 1px rgba(139,108,255,.35), 0 8px 28px rgba(var(--accent-rgb),.35);
  --grad:       linear-gradient(135deg,#7c3aed 0%,#9b5cff 100%);
  --bottomnav-h: 68px;
  --ink-rgb: 9,7,34; --ink2-rgb: 18,16,58; --accent-rgb: 124,58,237;
  --body-bg:
    radial-gradient(900px 520px at 10% -8%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(700px 480px at 100% 10%, rgba(59,89,255,.14) 0%, transparent 55%),
    #090722;
}
[data-theme] body, body{background:var(--body-bg); font-family:var(--font-body);}
::selection{background:var(--seal);color:#fff;}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

/* ---------- Topbar ---------- */
[data-theme] .topbar, .topbar{background:rgba(var(--ink-rgb),.86); border-bottom:1px solid var(--line-soft);}
.brand__seal{border-radius:12px; box-shadow:0 0 0 1px var(--line-soft), 0 4px 16px rgba(var(--accent-rgb),.55);}
.brand__word{font-family:var(--font-display); font-weight:800; letter-spacing:.4px; font-size:18px; line-height:1;}
.brand__word em{color:var(--brass);}
.search{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px;}
.search:focus-within{border-color:var(--seal-hi); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);}
.topnav a{border-radius:999px; padding:7px 14px; border:0; color:var(--paper-dim); font-weight:600;}
.topnav a:hover{color:var(--paper);}
.topnav a.active{color:#fff; background:var(--grad); box-shadow:var(--glow);}
.chip{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:999px; color:var(--paper);}
.chip:hover{border-color:var(--seal-hi);}
.chip-row .chip.active,
.chip.active{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow);}

/* ---------- Buttons ---------- */
.btn{border-radius:14px; font-weight:700;}
.btn--primary{background:var(--grad); color:#fff; box-shadow:var(--glow);}
.btn--primary:hover{background:var(--grad); filter:brightness(1.12);}
.btn--ghost{background:rgba(var(--accent-rgb),.08); border:1px solid var(--line-soft);}
.btn--ghost:hover{border-color:var(--seal-hi);}

/* ---------- Sections ---------- */
.section__title{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:0; text-transform:none;}
.section__more{color:var(--brass); font-weight:600;}

/* ---------- Hero ---------- */
.hero{border-radius:var(--radius-lg); border:1px solid var(--line-soft); box-shadow:var(--shadow); overflow:hidden;}
.hero__bg{filter:saturate(1.1) brightness(.7);}
.hero__scrim{background:linear-gradient(0deg, rgba(var(--ink-rgb),.98) 6%, rgba(24,14,70,.45) 58%, rgba(var(--ink-rgb),.1) 100%);}
.hero__eyebrow{display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(var(--accent-rgb),.35); border:1px solid var(--line-soft); color:var(--paper); font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:none;}
.hero__eyebrow::before{display:none;}
.hero__title{font-family:var(--font-display); font-weight:800;}

/* ---------- Cards / grid ---------- */
.card{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px; box-shadow:0 6px 20px rgba(4,2,30,.45);}
.card:hover{border-color:var(--seal-hi); box-shadow:var(--glow);}
.card__cover{border-radius:0;}
.card__badge,.card__source{border-radius:8px; background:rgba(var(--ink-rgb),.78); border:1px solid var(--line-soft); color:var(--paper);}
.card__title{font-weight:700;}
.card__share{background:rgba(var(--ink-rgb),.78);}
.continue-card,.lib-item,.chapter-row,.notif-row,.schedule-row,.profile-card,.profile-block,.req-row,.rating-item{
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px;
}
.lib-item__progress-bar,.lib-progress,.reader__progress{border-radius:999px;}
.lib-item__progress-bar>*, .lib-progress>*{background:var(--grad);}

/* ---------- Detail ---------- */
.detail__cover{border-radius:18px; border:1px solid var(--line-soft); box-shadow:var(--glow);}
.detail__title{font-family:var(--font-display); font-weight:800;}
.detail__stats div b{color:var(--brass);}

/* ---------- Modals & inputs ---------- */
.modal-backdrop{background:rgba(var(--ink-rgb),.72); backdrop-filter:blur(6px);}
.modal{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:22px; box-shadow:var(--glow);}
.modal__seal{background:var(--grad); color:#fff; border-radius:16px; box-shadow:var(--glow);}
input,select,textarea,.filter-select{background:var(--ink) !important; border-color:var(--line-soft) !important; color:var(--paper);}
/* Popup daftar <option> sering di-render browser (terutama Android) pakai
   background putih bawaan, ngabaikan warna <select>-nya sendiri — jadi teks
   terang (var(--paper), dipakai hampir semua tema gelap) nyaris gak keliatan.
   Diatur eksplisit di sini biar kebaca di semua tema. */
select option{background:var(--ink) !important; color:var(--paper) !important;}
input:focus,select:focus,textarea:focus{border-color:var(--seal-hi) !important; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);}
input[type="checkbox"]{accent-color:var(--seal-hi);}
.source-item{background:var(--ink); border:1px solid var(--line-soft); border-radius:16px;}
.source-item:hover{border-color:var(--seal-hi);}
.source-item__status.ok{color:#4ade80;}

/* ---------- Reader ---------- */
.reader__topbar,.reader-menu-panel{background:rgba(var(--ink-rgb),.92); border-color:var(--line-soft); backdrop-filter:blur(10px);}
.reader-menu-fab{background:var(--grad); box-shadow:var(--glow);}

/* ---------- Bottom navigation (mobile) ---------- */
.bottomnav{display:none;}
@media (max-width:860px){
  #app{padding-bottom:calc(var(--bottomnav-h) + 28px + env(safe-area-inset-bottom,0px));}
  .search{margin-top:8px;}
  .bottomnav{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:10px; right:10px; z-index:60;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    height:var(--bottomnav-h); padding:8px 6px;
    background:rgba(var(--ink2-rgb),.92); backdrop-filter:blur(14px);
    border:1px solid var(--line-soft); border-radius:24px;
    box-shadow:0 14px 40px rgba(2,1,20,.7), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .bottomnav a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border-radius:18px; color:var(--paper-dim); font-size:10.5px; font-weight:600;
    transition:background .2s,color .2s;
  }
  .bottomnav a svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
  .bottomnav a.active{color:#fff; background:var(--grad); box-shadow:var(--glow);}
  .toast{bottom:calc(var(--bottomnav-h) + 24px) !important;}
  .global-back-to-top{bottom:calc(var(--bottomnav-h) + 24px) !important;}
}
body:has(.reader) .bottomnav{display:none;}

/* =========================================================
   DETAIL MANGA — cover banner, pills, synopsis card
   ========================================================= */
.detail__read{width:100%; text-align:center; order:-1; padding:14px 18px; font-size:15px;}
.detail__actions > #libBtn{background:rgba(var(--accent-rgb),.1); color:var(--paper); border:1px solid var(--line-soft); box-shadow:none;}
.detail__actions > #libBtn:hover{border-color:var(--seal-hi); filter:none;}
.detail__desc{
  max-width:none; padding:16px 18px; margin-top:18px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px;
}
.detail__desc::before{content:"Sinopsis"; display:block; margin-bottom:8px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--brass);}
.detail__stats{gap:12px; font-family:var(--font-body);}
.detail__stats div{flex:1; padding:10px 12px; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px;}
.detail__stats div span{text-transform:none; letter-spacing:0; font-size:11.5px;}
.tag{background:rgba(var(--accent-rgb),.14); border-color:var(--line-soft); color:var(--paper); font-weight:600;}
.tag.status-ongoing,.tag.status-Ongoing{color:#4ade80; border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.08);}
.chapter-row:hover{border-color:var(--seal-hi);}
.chapter-row__num{color:var(--brass);}
.detail-back-btn{border-radius:999px;}

@media (max-width:860px){
  .detail{gap:0;}
  .detail__side{margin:0 -12px; position:relative;}
  .detail__cover{max-width:none; width:100%; border:0; border-radius:0; box-shadow:none; position:relative;}
  .detail__cover img{aspect-ratio:16/11; object-position:center 18%;}
  .detail__cover::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--ink) 2%,rgba(var(--ink-rgb),.35) 55%,rgba(var(--ink-rgb),.1) 100%);}
  .detail__main{position:relative; margin-top:-56px; z-index:1;}
  .detail__title{font-size:26px;}
}

/* =========================================================
   READER — glass bars, gradient progress, dark-navy canvas
   ========================================================= */
.reader{background:var(--ink);}
.reader__progress{height:4px; background:var(--grad); box-shadow:0 0 12px rgba(var(--accent-rgb),.8); border-radius:0 4px 4px 0;}
.reader__topbar,.reader__nav{background:rgba(var(--ink-rgb),.88); border-color:var(--line-soft);}
.reader__topbar .btn--ghost{border-radius:999px; background:var(--ink-2);}
.reader__title{font-family:var(--font-display); font-weight:600;}
#pageCounter{padding:4px 10px; border-radius:999px; background:var(--ink-2); border:1px solid var(--line-soft); color:var(--brass) !important;}
.reader__nav{justify-content:space-between; align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));}
.reader__nav .btn{border-radius:999px; padding:11px 18px;}
.reader__nav .btn--primary{flex:1; max-width:220px; text-align:center;}
.reader__pages img{border-radius:0;}
.reader-menu-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px));}
.reader-menu-panel{border-radius:20px; box-shadow:var(--glow);}
.reader-menu-panel__label{color:var(--brass);}

/* =========================================================
   PROFIL — centered avatar, stat tiles, menu-list actions
   (prefixed with #app to beat the inline profileCriticalCss)
   ========================================================= */
#app .profile-card{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:22px; box-shadow:var(--shadow);}
#app .profile-card__banner{height:96px; background:radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb),.55), rgba(var(--ink2-rgb),.9) 70%);}
#app .profile-card__banner.has-img{background-color:var(--ink-3);}
#app .profile-card__banner-btn{background:rgba(var(--ink-rgb),.7); border-color:var(--line-soft);}
#app .profile-card__body{flex-direction:column; align-items:center; text-align:center; margin-top:-44px;}
#app .profile-card__text{padding-top:6px;}
#app .profile-card__avatar{
  width:88px; height:88px; background:var(--grad);
  border:3px solid var(--ink-2); box-shadow:0 0 0 2px var(--seal-hi), 0 0 28px rgba(var(--accent-rgb),.6);
}
#app .profile-card__name{font-family:var(--font-display); font-weight:700; font-size:22px;}
#app .profile-card__bio{margin-left:auto; margin-right:auto; max-width:38ch;}
#app .profile-card__stats{gap:8px; padding:0 14px 16px; border-top:0;}
#app .profile-card__stat{
  border:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  background:var(--ink); border-radius:14px; padding:12px 6px;
}
#app .profile-card__stat:last-child{border-right:1px solid var(--line-soft);}
#app .profile-card__stat b{color:#fff;}

#app .profile-card__actions{grid-template-columns:1fr !important; gap:8px;}
#app .profile-card__actions .btn{
  display:flex; align-items:center; justify-content:space-between; text-align:left;
  padding:14px 16px; font-size:14px; font-weight:600;
  background:var(--ink-2); color:var(--paper); border:1px solid var(--line-soft); box-shadow:none; border-radius:16px;
}
#app .profile-card__actions .btn::after{content:"›"; font-size:20px; line-height:1; color:var(--paper-dim);}
#app .profile-card__actions .btn:hover{border-color:var(--seal-hi); filter:none;}
#app .profile-card__actions .btn--primary{background:var(--grad); border-color:transparent; box-shadow:var(--glow);}
#app .profile-card__actions .btn--primary::after{color:#fff;}
#app .profile-card__actions .profile__logout,
#app .profile-card__actions #profileDeleteAcctBtn{color:#ff7b95 !important; border-color:rgba(255,123,149,.35) !important; background:rgba(255,123,149,.06);}
#app .profile-card__actions .profile__logout::after,
#app .profile-card__actions #profileDeleteAcctBtn::after{content:none;}
#app .profile-block__title{font-family:var(--font-display); font-weight:700;}
#app .profile-block__empty{background:var(--ink-2); border-color:var(--line-soft); border-radius:14px;}

/* =========================================================
   PENGATURAN — grouped rows, violet headings, toggle switches
   ========================================================= */
#settingsModal .modal{max-width:440px; border-radius:24px;}
#settingsModal .settings-list{gap:8px;}
#settingsModal .settings-row{
  padding:12px 14px; background:var(--ink); border:1px solid var(--line-soft); border-radius:14px; font-weight:600;
}
#settingsModal .settings-hint{padding:0 4px 4px;}
#settingsModal .settings-divider{
  border-top:0; margin:14px 0 2px; padding:0 4px; text-transform:none; letter-spacing:0;
  font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--paper);
}
#settingsModal .filter-select{border-radius:10px; background:var(--ink-3) !important; font-weight:500;}

.settings-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex-shrink:0; cursor:pointer;
  width:46px; height:26px; border-radius:999px; position:relative; margin:0;
  background:var(--ink-3) !important; border:1px solid var(--line-soft) !important; transition:background .2s;
}
.settings-row input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--paper-dim); transition:transform .2s, background .2s;
}
.settings-row input[type="checkbox"]:checked{background:var(--grad) !important; border-color:transparent !important;}
.settings-row input[type="checkbox"]:checked::after{transform:translateX(20px); background:#fff;}

@media (max-width:520px){
  #settingsModal.modal-backdrop{align-items:flex-end; padding:0;}
  #settingsModal .modal{max-width:none; width:100%; max-height:88vh; border-radius:24px 24px 0 0;}
}

/* ---------- Profil: badge tier + ikon menu ---------- */
#app .profile-card__tier{
  display:inline-block; margin:0 0 6px; padding:3px 12px; border-radius:999px;
  font-size:12px; font-weight:700; color:var(--paper-dim);
  background:rgba(157,153,207,.12); border:1px solid var(--line-soft);
}
#app .profile-card__tier.is-premium{color:#fff; background:var(--grad); border-color:transparent; box-shadow:var(--glow);}
#app .profile-card__actions .menu-item{display:inline-flex; align-items:center; gap:12px;}
.menu-ico{width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--brass); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
#app .profile-card__actions .btn--primary .menu-ico{stroke:#fff;}
#app .profile-card__actions .profile__logout .menu-ico,
#app .profile-card__actions #profileDeleteAcctBtn .menu-ico{stroke:#ff7b95;}

/* =========================================================
   PENGATURAN PEMBACA — segmented controls, brightness slider
   ========================================================= */
#settingsModal select.seg-source{display:none;}
.seg{display:flex; gap:6px; flex:1; max-width:100%; justify-content:flex-end;}
.seg button{
  flex:1; min-width:0; padding:9px 10px; border-radius:10px; font-size:13px; font-weight:600;
  background:var(--ink-3); color:var(--paper-dim); border:1px solid var(--line-soft); transition:background .15s,color .15s;
}
.seg button.active{background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow);}
#settingsModal .settings-row:has(.seg){flex-direction:column; align-items:stretch; gap:10px;} /* :has() gak didukung semua browser — dibackup class .settings-row--seg di bawah */
#settingsModal .settings-row.settings-row--seg{flex-direction:column; align-items:stretch; gap:10px;}
#settingsModal .settings-row--slider{flex-direction:column; align-items:stretch; gap:10px;}
.settings-row--slider b{float:right; color:var(--brass); font-weight:700;}
.settings-row--slider input[type="range"]{
  width:100%; padding:0; margin:0; height:24px; accent-color:var(--seal-hi);
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.reader__pages img{filter:brightness(var(--reader-brightness,1));}

/* =========================================================
   PENGATURAN — layar penuh dengan tombol kembali (HP)
   ========================================================= */
@media (max-width:860px){
  #settingsModal.modal-backdrop{align-items:stretch; padding:0;}
  #settingsModal .modal{
    max-width:none; width:100%; max-height:none; height:100%; border-radius:0; border:0;
    background:var(--ink); box-shadow:none; padding-bottom:0;
  }
  #settingsModalClose{
    font-size:0; top:calc(16px + env(safe-area-inset-top,0px)); left:14px; right:auto; z-index:2;
    width:40px; height:40px; border-radius:12px; background:var(--ink-3); border:1px solid var(--line-soft);
    color:var(--paper);
  }
  #settingsModalClose::before{content:"←"; font-size:20px; line-height:1;}
  #settingsModal .settings-head{padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px 66px;}
  #settingsModal .settings-head .modal__seal{display:none;}
  #settingsModal .settings-list{padding:0 16px;}
  #settingsModal .settings-footer{
    position:sticky; bottom:0; z-index:2; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(0deg,var(--ink) 70%,transparent);
  }
}

/* =========================================================
   SIDEBAR MOBILE (drawer)
   ========================================================= */
.topnav--mobile{display:none !important;}
.drawer{display:none;}
@media (max-width:860px){
  .drawer{display:block; position:fixed; inset:0; z-index:150; pointer-events:none;}
  .drawer__backdrop{position:absolute; inset:0; background:rgba(var(--ink-rgb),.7); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s;}
  .drawer__panel{
    position:absolute; top:0; bottom:0; left:0; width:min(84vw,320px);
    display:flex; flex-direction:column; gap:14px; overflow-y:auto;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);
    border-right:1px solid var(--line-soft); border-radius:0 24px 24px 0;
    box-shadow:var(--glow); transform:translateX(-102%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .drawer.open{pointer-events:auto;}
  .drawer.open .drawer__backdrop{opacity:1;}
  .drawer.open .drawer__panel{transform:none;}
  body.drawer-open{overflow:hidden;}
}
.drawer__head{display:flex; align-items:center; justify-content:space-between;}
.drawer__close{width:38px; height:38px; border-radius:12px; font-size:24px; line-height:1; background:var(--ink-3); color:var(--paper); border:1px solid var(--line-soft);}
.drawer__user{display:flex; align-items:center; gap:12px; padding:12px; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:18px;}
.drawer__user b{display:block; font-family:var(--font-display); font-weight:700; font-size:15px;}
.drawer__user small{display:block; margin-top:2px; font-size:12px; color:var(--paper-dim);}
.drawer__user small.is-premium{color:var(--brass); font-weight:600;}
.drawer__avatar{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff;
  background:var(--grad); box-shadow:0 0 0 2px var(--seal-hi), 0 0 16px rgba(var(--accent-rgb),.5);
}
.drawer__avatar img{width:100%; height:100%; object-fit:cover;}
.drawer__nav{display:flex; flex-direction:column; gap:4px;}
.drawer__nav--sub{padding-top:12px; border-top:1px solid var(--line-soft);}
.drawer__nav a,.drawer__nav button{
  display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border-radius:14px;
  background:none; border:0; color:var(--paper-dim); font-size:14.5px; font-weight:600; text-align:left;
}
.drawer__nav svg{width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.drawer__nav a:hover,.drawer__nav button:hover{background:rgba(var(--accent-rgb),.12); color:var(--paper);}
.drawer__nav a.active{color:#fff; background:var(--grad); box-shadow:var(--glow);}
.drawer__foot{margin-top:auto; padding-top:8px;}
.drawer__foot .btn{width:100%; padding:14px;}

/* =========================================================
   JELAJAH — tab jenis + semua genre
   ========================================================= */
.type-tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; margin-bottom:14px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px;
}
.type-tabs button{
  padding:10px 6px; border-radius:12px; border:0; background:none;
  color:var(--paper-dim); font-size:13.5px; font-weight:700; transition:background .15s,color .15s;
}
.type-tabs button:hover{color:var(--paper);}
.type-tabs button.active{background:var(--grad); color:#fff; box-shadow:var(--glow);}
.genre-head{margin:2px 2px 8px; font-family:var(--font-display); font-weight:700; font-size:15px;}
.genre-head[hidden]{display:none;}
#genreChips{gap:8px; margin-bottom:18px;}
#genreChips .chip{padding:7px 14px; font-size:13px; font-weight:600;}
.filter-bar{margin-bottom:14px;}

/* =========================================================
   TEMA — 6 pilihan (dark = Modern Dark adalah bawaan di atas)
   ========================================================= */
[data-theme="light"]{
  --ink:#f3f1ff; --ink-2:#ffffff; --ink-3:#e9e5ff;
  --paper:#1b1745; --paper-dim:#6a65a3;
  --seal:#7c3aed; --seal-hi:#6d28d9; --brass:#6d28d9;
  --line-soft:rgba(109,40,217,.16);
  --shadow:0 10px 28px rgba(70,50,150,.14);
  --glow:0 0 0 1px rgba(124,58,237,.25), 0 8px 22px rgba(124,58,237,.22);
  --ink-rgb:243,241,255; --ink2-rgb:255,255,255; --accent-rgb:124,58,237;
  --body-bg:radial-gradient(800px 480px at 8% -6%, rgba(124,58,237,.14), transparent 60%), radial-gradient(700px 460px at 100% 6%, rgba(59,130,246,.10), transparent 55%), #f3f1ff;
}
[data-theme="classic"]{
  /* "Tinta Klasik" — warna asli identitas Ninzy Core: ink hitam hangat, kertas krem, merah segel, emas kuningan */
  --ink:#14120f; --ink-2:#1c1914; --ink-3:#26221b;
  --paper:#ece5d6; --paper-dim:#b8ae98;
  --seal:#b23a2e; --seal-hi:#d4523f; --brass:#c9a24b;
  --grad:linear-gradient(135deg,#b23a2e 0%,#c9a24b 100%);
  --line-soft:rgba(236,229,214,.1);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(178,58,46,.35), 0 8px 28px rgba(178,58,46,.3);
  --ink-rgb:20,18,15; --ink2-rgb:28,25,20; --accent-rgb:178,58,46;
  --body-bg:radial-gradient(900px 520px at 8% -8%, rgba(178,58,46,.22), transparent 60%), radial-gradient(700px 480px at 100% 10%, rgba(201,162,75,.16), transparent 55%), #14120f;
}
[data-theme="sakura"]{
  /* Rose lembut + krem hangat — versi tenang/elegan, beda mood dari Anime Vibes yang neon */
  --ink:#1a1016; --ink-2:#241620; --ink-3:#33202c;
  --paper:#fdf0f6; --paper-dim:#d8a9c0;
  --seal:#e8829f; --seal-hi:#f5a3ba; --brass:#f0b8cb;
  --grad:linear-gradient(135deg,#e8829f 0%,#f0c9a0 100%);
  --line-soft:rgba(232,130,159,.2);
  --glow:0 0 0 1px rgba(232,130,159,.35), 0 8px 26px rgba(232,130,159,.3);
  --ink-rgb:26,16,22; --ink2-rgb:36,22,32; --accent-rgb:232,130,159;
  --body-bg:radial-gradient(900px 520px at 8% -8%, rgba(232,130,159,.22), transparent 60%), radial-gradient(700px 480px at 100% 10%, rgba(240,201,160,.16), transparent 55%), #1a1016;
}
[data-theme="sepia"]{
  /* Coklat kopi hangat — buat baca lama, enak di mata, mirip mode sepia e-reader */
  --ink:#1c1610; --ink-2:#251d15; --ink-3:#32271b;
  --paper:#f0e4d0; --paper-dim:#b8a082;
  --seal:#a8703a; --seal-hi:#c68a4a; --brass:#d4a95e;
  --grad:linear-gradient(135deg,#a8703a 0%,#d4a95e 100%);
  --line-soft:rgba(212,169,94,.16);
  --glow:0 0 0 1px rgba(168,112,58,.35), 0 8px 26px rgba(168,112,58,.3);
  --ink-rgb:28,22,16; --ink2-rgb:37,29,21; --accent-rgb:168,112,58;
  --body-bg:radial-gradient(900px 520px at 8% -8%, rgba(168,112,58,.18), transparent 60%), radial-gradient(700px 480px at 100% 10%, rgba(212,169,94,.12), transparent 55%), #1c1610;
}
[data-theme="anime"]{
  --ink:#14061f; --ink-2:#231034; --ink-3:#321a4b;
  --paper:#fff0fb; --paper-dim:#cfa8de;
  --seal:#e6399b; --seal-hi:#ff5cb4; --brass:#ff9ad0;
  --grad:linear-gradient(135deg,#e6399b 0%,#9b5cf6 100%);
  --line-soft:rgba(255,120,200,.24);
  --glow:0 0 0 1px rgba(255,92,180,.4), 0 8px 28px rgba(230,57,155,.35);
  --ink-rgb:20,6,31; --ink2-rgb:35,16,52; --accent-rgb:230,57,155;
  --body-bg:radial-gradient(900px 520px at 6% -8%, rgba(230,57,155,.28), transparent 60%), radial-gradient(700px 480px at 100% 8%, rgba(139,92,246,.24), transparent 55%), #14061f;
}
[data-theme="glass"]{
  --ink:#06182b; --ink-2:rgba(255,255,255,.08); --ink-3:rgba(255,255,255,.14);
  --paper:#eaf6ff; --paper-dim:#9cc0dc;
  --seal:#2b8ff0; --seal-hi:#4aa3ff; --brass:#7dd3fc;
  --grad:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);
  --line-soft:rgba(255,255,255,.2);
  --glow:0 0 0 1px rgba(125,211,252,.35), 0 8px 30px rgba(14,165,233,.3);
  --ink-rgb:6,24,43; --ink2-rgb:16,44,76; --accent-rgb:14,165,233;
  --body-bg:radial-gradient(700px 500px at 0% 0%, rgba(14,165,233,.45), transparent 60%), radial-gradient(700px 520px at 100% 20%, rgba(139,92,246,.40), transparent 60%), radial-gradient(600px 500px at 40% 100%, rgba(20,184,166,.30), transparent 60%), #06182b;
}
[data-theme="glass"] .card,[data-theme="glass"] .continue-card,[data-theme="glass"] .lib-item,
[data-theme="glass"] .chapter-row,[data-theme="glass"] .detail__desc,[data-theme="glass"] .profile-card,
[data-theme="glass"] .notif-row,[data-theme="glass"] .settings-row,[data-theme="glass"] .type-tabs{
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
}
[data-theme="glass"] .modal,[data-theme="glass"] .drawer__panel{background:rgba(10,32,58,.92);}
[data-theme="glass"] input,[data-theme="glass"] select,[data-theme="glass"] textarea{background:rgba(255,255,255,.06) !important;}
[data-theme="minimal"]{
  --ink:#0d0d0f; --ink-2:#161618; --ink-3:#212124;
  --paper:#f1f1f2; --paper-dim:#96969c;
  --seal:#6b6b73; --seal-hi:#8a8a93; --brass:#c4c4ca;
  --grad:linear-gradient(135deg,#5a5a62 0%,#74747d 100%);
  --line-soft:rgba(255,255,255,.1);
  --shadow:0 8px 24px rgba(0,0,0,.5);
  --glow:0 0 0 1px rgba(255,255,255,.14);
  --ink-rgb:13,13,15; --ink2-rgb:22,22,24; --accent-rgb:116,116,125;
  --body-bg:#0d0d0f;
}
[data-theme="nature"]{
  --ink:#06150d; --ink-2:#0e2417; --ink-3:#16362a;
  --paper:#ecfdf3; --paper-dim:#8fbfa4;
  --seal:#1f9d55; --seal-hi:#34c26f; --brass:#86efac;
  --grad:linear-gradient(135deg,#15803d 0%,#4d9a1e 100%);
  --line-soft:rgba(110,231,160,.2);
  --glow:0 0 0 1px rgba(52,194,111,.4), 0 8px 26px rgba(21,128,61,.35);
  --ink-rgb:6,21,13; --ink2-rgb:14,36,23; --accent-rgb:31,157,85;
  --body-bg:radial-gradient(900px 520px at 8% -8%, rgba(31,157,85,.26), transparent 60%), radial-gradient(700px 480px at 100% 10%, rgba(132,204,22,.14), transparent 55%), #06150d;
}
[data-theme="minimal"] .hero,[data-theme="minimal"] .card{box-shadow:none;}
/* light theme: teks di atas gradien tetap putih */
[data-theme="light"] .hero__title,[data-theme="light"] .hero__desc,[data-theme="light"] .hero__eyebrow{color:#fff;}
[data-theme="light"] .hero__scrim{background:linear-gradient(0deg,rgba(20,12,60,.92) 6%,rgba(40,20,110,.4) 58%,rgba(20,12,60,.1) 100%);}

/* =========================================================
   HALAMAN PILIH TEMA
   ========================================================= */
.themes__bar{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.themes__bar h2{margin:0; font-family:var(--font-display); font-size:20px; font-weight:700;}
.themes__back{width:40px; height:40px; border-radius:12px; background:var(--ink-2); border:1px solid var(--line-soft); color:var(--paper); font-size:18px; display:flex; align-items:center; justify-content:center;}
.themes__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (min-width:700px){ .themes__grid{grid-template-columns:repeat(3,1fr);} }
.theme-card{
  position:relative; padding:0; overflow:hidden; text-align:left; cursor:pointer;
  border-radius:18px; border:2px solid var(--line-soft); background:var(--ink-2); color:var(--paper);
  transition:border-color .15s, box-shadow .15s;
}
.theme-card.selected{border-color:var(--seal-hi); box-shadow:var(--glow);}
.theme-card__prev{
  height:128px; padding:10px; background:var(--p-bg,#090722); display:flex; flex-direction:column; gap:7px;
}
.theme-card__prev i{display:block; border-radius:6px; background:var(--p-card,#1b1850);}
.theme-card__prev .p-top{height:10px; width:58%; background:var(--p-text,#f1efff); opacity:.85;}
.theme-card__prev .p-hero{flex:1; background:linear-gradient(135deg,var(--p-acc,#7c3aed),var(--p-card,#1b1850)); border-radius:9px;}
.theme-card__prev .p-row{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; height:26px;}
.theme-card__prev .p-nav{height:9px; width:100%; background:var(--p-acc,#7c3aed); opacity:.75; border-radius:99px;}
.theme-card__name{display:block; padding:10px 12px; font-size:13.5px; font-weight:700;}
.theme-card__check{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:var(--grad); color:#fff; display:none; align-items:center; justify-content:center; font-size:14px; font-weight:800;
}
.theme-card.selected .theme-card__check{display:flex;}
.themes__apply{margin-top:18px; width:100%; padding:15px; font-size:15px;}
[data-t="dark"]{--p-bg:#090722; --p-card:#1b1850; --p-acc:#7c3aed; --p-text:#f1efff;}
[data-t="light"]{--p-bg:#f3f1ff; --p-card:#ddd6ff; --p-acc:#7c3aed; --p-text:#1b1745;}
[data-t="anime"]{--p-bg:#14061f; --p-card:#321a4b; --p-acc:#e6399b; --p-text:#fff0fb;}
[data-t="glass"]{--p-bg:#0b2a4a; --p-card:rgba(255,255,255,.22); --p-acc:#0ea5e9; --p-text:#eaf6ff;}
[data-t="minimal"]{--p-bg:#0d0d0f; --p-card:#26262a; --p-acc:#74747d; --p-text:#f1f1f2;}
[data-t="nature"]{--p-bg:#06150d; --p-card:#16362a; --p-acc:#1f9d55; --p-text:#ecfdf3;}