/* =========================================================
   NINZY CORE — "Hanko Ink" design system
   Palette: warm ink black, aged paper, seal red, brass gold
   ========================================================= */
:root{
  --ink:        #14120f;
  --ink-2:      #1c1914;
  --ink-3:      #26221b;
  --paper:      #ece5d6;
  --paper-dim:  #b8ae98;
  /* seal = the ONE action color: buttons, active/selected states, links-as-action.
     brass = data & emphasis only: numbers, ranks, stats, highlighted values — never a button. */
  --seal:       #b23a2e;
  --seal-hi:    #d4523f;
  --brass:      #c9a24b;
  --teal:       #3e6259;
  --line:       #33301f22;
  --line-soft:  rgba(236,229,214,0.08);
  --shadow:     0 10px 30px rgba(0,0,0,0.45);
  --radius:     10px;
  --radius-lg:  16px;
  --font-display: 'Anton', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Spacing scale — reach for these instead of ad-hoc px in inline styles. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, #221c15 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1c231f 0%, transparent 55%),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
::selection{background:var(--seal); color:#fff;}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(20,18,15,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__inner{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; gap:20px;
  padding:12px 20px;
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand__seal{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; display:block;
  box-shadow:0 0 0 2px var(--ink-3), 0 2px 8px rgba(178,58,46,.5);
}
.brand__word{
  font-family:var(--font-display);
  letter-spacing:0.5px;
  font-size:19px;
}
.brand__word em{color:var(--brass); font-style:normal;}

.search{
  flex:1; max-width:420px;
  display:flex; align-items:center;
  background: var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius: 999px;
  padding:6px 8px 6px 16px;
  position:relative;
}
.search input{
  flex:1; background:transparent; border:none; color:var(--paper);
  font-size:14px; padding:6px 0;
}
.search input::placeholder{color:var(--paper-dim);}
.search input:focus{outline:none;}
.search button{
  background: var(--seal); border:none; color:#fff;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.search__suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  z-index:55; overflow:hidden; display:none;
}
.search__suggest.show{display:block;}
.search__suggest__row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; cursor:pointer; text-decoration:none; color:var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.search__suggest__row:last-child{border-bottom:none;}
.search__suggest__row:hover, .search__suggest__row.active{background:var(--ink-3);}
.search__suggest__row img{
  width:32px; height:44px; object-fit:cover; border-radius:4px; flex-shrink:0; background:var(--ink-3);
}
.search__suggest__row .ss-title{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.search__suggest__row .ss-src{font-size:11px; color:var(--paper-dim);}
.search__suggest__empty{padding:12px; font-size:13px; color:var(--paper-dim); text-align:center;}

.topnav{display:flex; gap:22px;}
.topnav a{
  font-size:14px; font-weight:600; color:var(--paper-dim);
  padding:6px 2px; border-bottom:2px solid transparent;
}
.topnav a:hover, .topnav a.active{color:var(--paper); border-color:var(--seal);}
.topnav--mobile{display:none; flex-direction:column; padding:10px 20px 16px; gap:14px; border-top:1px solid var(--line-soft);}
.topnav--mobile.open{display:flex;}

.topbar__actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.chip{
  background:var(--ink-2); border:1px solid var(--line-soft); color:var(--paper);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.chip:hover{border-color:var(--brass);}

.leaderboard-list{display:flex;flex-direction:column;margin-top:var(--sp-4);}
.leaderboard-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--paper)}
.leaderboard-row:last-child{border-bottom:none}
.leaderboard-row:hover .leaderboard-name{color:var(--brass);}
.leaderboard-rank{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--brass);width:24px;text-align:center;flex-shrink:0}
.leaderboard-avatar{width:36px;height:36px;border-radius:50%;background:var(--seal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;overflow:hidden;font-size:14px}
.leaderboard-avatar img{width:100%;height:100%;object-fit:cover}
.leaderboard-name{flex:1;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
.leaderboard-val{font-size:12.5px;color:var(--paper-dim);flex-shrink:0}

.rating-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.rating-summary__avg{font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--brass)}
.rating-summary__stars{color:var(--brass);font-size:18px;letter-spacing:1px}
.rating-form,.comment-form{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:12px;padding:14px;margin-bottom:16px}
.rating-form__stars{display:flex;gap:4px;margin-bottom:10px}
.rating-form__stars .star-btn{background:none;border:none;font-size:24px;color:var(--brass);cursor:pointer;padding:0;line-height:1}
.rating-form textarea,.comment-form textarea{width:100%;background:var(--ink-3);border:1px solid var(--line-soft);border-radius:8px;color:var(--paper);padding:10px 12px;font-family:inherit;font-size:13.5px;resize:vertical;margin-bottom:10px;box-sizing:border-box}
.rating-item,.comment-item{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.rating-item:last-child,.comment-item:last-child{border-bottom:none}
.rating-item__head,.comment-item__head{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:13px}
.rating-item__stars{color:var(--brass);font-size:12px}
.rating-item__text,.comment-item__text{font-size:13.5px;color:var(--paper-dim);line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}
.comment-item__del{background:none;border:none;color:var(--seal-hi);font-size:11.5px;padding:4px 0 0;cursor:pointer}

.bulk-dl-range{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
.bulk-dl-range__field{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.bulk-dl-range__field label{font-size:11.5px;color:var(--paper-dim);text-transform:uppercase;letter-spacing:0.04em}
.bulk-dl-range__field select{width:100%;box-sizing:border-box}
.bulk-dl-range__arrow{color:var(--brass);font-size:16px;padding-bottom:9px;flex-shrink:0}
.bulk-dl-progress{min-height:18px;margin:4px 0 14px;color:var(--brass)}
.bulk-dl-actions{display:flex;gap:10px}
.bulk-dl-actions .btn{flex:1;width:auto}
.comment-item__actions{display:flex;gap:14px;margin-top:4px}
.comment-item__actions button{background:none;border:none;color:var(--paper-dim);font-size:11.5px;padding:4px 0 0;cursor:pointer}
.comment-item__actions button:hover{color:var(--brass)}
.comment-item__actions .comment-item__del{color:var(--seal-hi)}
.comment-item__edit-box{width:100%;background:var(--ink-3);border:1px solid var(--line-soft);border-radius:8px;color:var(--paper);padding:8px 10px;font-family:inherit;font-size:13.5px;resize:vertical;margin:4px 0;box-sizing:border-box}

.health-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.health-row:last-child{border-bottom:none}
.health-row__name{font-weight:600}
.health-row__status{font-size:12px}
.health-row__status--pending{color:var(--paper-dim)}
.health-row__status--ok{color:#6fbf73}
.health-row__status--warn{color:var(--brass)}
.health-row__status--down{color:var(--seal-hi)}

.mention-suggest{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:10px;margin:0 0 8px;overflow:hidden;}
.mention-suggest__row{padding:8px 12px;font-size:13px;cursor:pointer;}
.mention-suggest__row:hover{background:var(--ink-3);}

.req-row{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line-soft)}
.req-row:last-child{border-bottom:none}
.req-vote{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--ink-3);border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px;color:var(--paper-dim);cursor:pointer;flex-shrink:0;min-width:44px}
.req-vote:hover{border-color:var(--brass)}
.req-vote--on{background:var(--seal);border-color:var(--seal);color:#fff}
.req-vote__arrow{font-size:12px;line-height:1}
.req-vote__count{font-size:13px;font-weight:700}
.req-row__body{flex:1;min-width:0}
.req-row__title{font-weight:600;font-size:14px}
.req-row__note{font-size:12.5px;color:var(--paper-dim);margin-top:2px}
.req-row__del{background:none;border:none;color:var(--seal-hi);font-size:14px;cursor:pointer;flex-shrink:0;padding:4px}

.notif-row{text-decoration:none;color:var(--paper);align-items:center}
.notif-row__dot{width:8px;height:8px;border-radius:50%;background:transparent;flex-shrink:0}
.notif-row--unread{background:linear-gradient(90deg, rgba(178,58,46,0.08), transparent 60%); margin:0 calc(-1 * var(--sp-3)); padding-left:var(--sp-3); padding-right:var(--sp-3); border-radius:8px;}
.notif-row--unread .notif-row__dot{background:var(--seal)}
.notif-row--unread .req-row__title{font-weight:700}

.dm-msg{display:flex;flex-direction:column;max-width:75%;margin-bottom:10px}
.dm-msg__bubble{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:13.5px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.dm-msg__time{font-size:10.5px;color:var(--paper-dim);margin-top:3px;padding:0 4px}
.dm-msg--me{margin-left:auto;align-items:flex-end}
.dm-msg--me .dm-msg__bubble{background:var(--seal);border-color:var(--seal);color:#fff;border-radius:14px 14px 4px 14px}
.burger{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px;}
.burger span{width:20px; height:2px; background:var(--paper);}

#authArea .avatar-btn{
  width:34px;height:34px;border-radius:50%;
  background:var(--teal); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; overflow:hidden;
}
#authArea .avatar-btn img{width:100%;height:100%;object-fit:cover;}
#authArea .btn--primary{padding:9px 16px; font-size:13px;}

/* ============ BUTTONS ============ */
.btn{
  border:none; border-radius:8px; padding:12px 18px; font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
}
.btn--primary{background:var(--seal); color:#fff;}
.btn--primary:hover{background:var(--seal-hi);}
.btn--google{background:#fff; color:#1f1f1f; margin-bottom:14px;}
.btn--ghost{background:transparent; border:1px solid var(--line-soft); color:var(--paper);}
.btn--ghost:hover{border-color:var(--brass);}
.btn--sm{padding:8px 14px; font-size:13px; width:auto;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

/* ============ LAYOUT / SECTIONS ============ */
#app{max-width:1320px; margin:0 auto; padding:26px 20px 80px;}
.section{margin-bottom:44px;}
.section__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.section__title{
  font-family:var(--font-display); font-size:26px; letter-spacing:0.3px;
  display:flex; align-items:center; gap:10px;
}
.section__title small{font-family:var(--font-mono); font-size:12px; color:var(--brass); font-weight:600;}
.section__more{font-size:13px; color:var(--brass); font-weight:600;}

/* ============ HERO ============ */
.hero{
  position:relative; border-radius:16px; overflow:hidden; margin-bottom:40px;
  min-height:340px; display:flex; align-items:flex-end;
  border:1px solid var(--line-soft);
}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center top; filter:saturate(0.85) brightness(0.55);}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,15,0.97) 5%, rgba(20,18,15,0.35) 55%, rgba(20,18,15,0.15) 100%);}
.hero__content{position:relative; padding:28px 30px; max-width:640px;}
.hero__eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--brass); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.hero__eyebrow::before{content:''; width:22px; height:1px; background:var(--brass);}
.hero__title{font-family:var(--font-display); font-size:clamp(28px,5vw,46px); line-height:1.02; margin:0 0 10px;}
.hero__desc{color:var(--paper-dim); font-size:14.5px; line-height:1.6; margin-bottom:18px; max-width:520px;}
.hero__actions{display:flex; gap:12px;}
.hero__actions .btn{width:auto; padding:12px 22px;}

/* ============ CARD GRID ============ */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:18px;}
.grid--wide{grid-template-columns:repeat(auto-fill, minmax(210px,1fr));}
.card{position:relative; border-radius:10px; overflow:hidden; background:var(--ink-2); border:1px solid var(--line-soft); transition:transform .15s;}
.card:hover{transform:translateY(-3px); border-color:var(--brass);}
.card__cover{aspect-ratio:2/3; width:100%; object-fit:cover; background:var(--ink-3);}
.card__body{padding:10px 11px 12px;}
.card__title{font-size:13.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.card__meta{margin-top:6px; font-size:11px; color:var(--paper-dim); display:flex; align-items:center; justify-content:space-between; gap:6px;}
.card__source{
  position:absolute; top:8px; left:8px; font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  padding:3px 7px; border-radius:999px; background:rgba(20,18,15,0.8); border:1px solid var(--line-soft);
}
.card__source.mangadex{color:#ff6740;}
.card__source.komiku{color:#7fd1c1;}
.card__source.shinigami{color:#c9a24b;}
.card__badge{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:var(--seal); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:10px; box-shadow:var(--shadow);
}
.card__rank{
  position:absolute; bottom:0; left:0; right:0; padding:20px 10px 8px 10px;
  background:linear-gradient(0deg, rgba(20,18,15,0.85) 0%, rgba(20,18,15,0) 100%);
  z-index:2;
}
.card__rank span{
  font-family:var(--font-display); font-size:32px; line-height:1; color:var(--brass);
}

/* ============ SKELETON / EMPTY / ERROR ============ */
.skeleton{background:linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 37%, var(--ink-2) 63%); background-size:400% 100%; animation:shine 1.4s infinite;}
@keyframes shine{0%{background-position:100% 0;}100%{background-position:0 0;}}
.skel-card{aspect-ratio:2/3; border-radius:10px;}
.state-box{text-align:center; padding:60px 20px; color:var(--paper-dim);}
.state-box .seal-lg{width:64px;height:64px;border-radius:50%;background:var(--ink-2);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;}
.state-box h3{color:var(--paper); font-family:var(--font-display); font-size:20px; margin:0 0 8px;}
.state-box .btn{width:auto; margin:16px auto 0; padding:10px 20px;}

/* ============ GENRE CHIPS ============ */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.chip-row .chip{background:var(--ink-2);}
.chip-row .chip.active{background:var(--seal); border-color:var(--seal); color:#fff;}

/* ============ MANGA DETAIL ============ */
.detail{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:28px 32px;
  align-items:start;
}
.detail__side{position:sticky; top:80px;}
.detail__cover{
  border-radius:14px; overflow:hidden;
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
  background:var(--ink-2);
}
.detail__cover img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.detail__main{min-width:0;}
.detail__title{font-family:var(--font-display); font-size:clamp(24px,4vw,36px); line-height:1.1; margin:0 0 8px;}
.detail__alt{color:var(--paper-dim); font-size:13.5px; margin-bottom:12px;}
.detail__tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.tag{font-size:11.5px; padding:5px 11px; border-radius:999px; background:var(--ink-2); border:1px solid var(--line-soft); color:var(--paper-dim);}
.tag.status-ongoing,.tag.status-Ongoing{color:var(--teal); border-color:var(--teal);}
.tag.status-completed,.tag.status-Completed{color:var(--brass); border-color:var(--brass);}
.tag.status-tamat,.tag.status-Tamat{color:var(--brass); border-color:var(--brass);}
.tag.status-hiatus,.tag.status-Hiatus{color:#d4a13a; border-color:#d4a13a;}
.tag.status-cancelled,.tag.status-Cancelled{color:var(--seal-hi); border-color:var(--seal-hi);}
.detail__desc{line-height:1.75; color:var(--paper-dim); font-size:14.5px; max-width:70ch; white-space:pre-line; margin:18px 0 0;}
.detail__stats{display:flex; gap:22px; margin:6px 0 16px; font-family:var(--font-mono);}
.detail__stats div b{display:block; font-size:20px; color:var(--brass); font-family:var(--font-body); font-weight:800;}
.detail__stats div span{font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:1px;}

.detail__actions{
  display:flex; flex-direction:column; gap:10px;
  margin:0 0 14px;
}
.detail__actions > .btn--primary{width:100%;}
.detail__actions-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.detail__actions-row .btn{width:100%; margin:0;}
.detail__continue{width:100%; text-align:center;}

.detail__meta-controls{
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:14px;
}
.detail__meta-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.detail__meta-row label,
.detail__note-label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; color:var(--paper-dim);
}
.detail__meta-controls .filter-select{
  width:100%; max-width:none; min-width:0;
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:8px; color:var(--paper); padding:10px 12px; font-size:13px;
}
.detail__meta-controls textarea{
  width:100%; background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:8px; color:var(--paper); padding:10px 12px; font-size:13px;
  resize:vertical; min-height:64px;
}
.detail__meta-controls #saveNoteBtn{width:auto; align-self:flex-start; padding:8px 14px;}
.cross-source{margin:4px 0 8px;}

/* ============ CHAPTER LIST ============ */
.chapter-list{margin-top:34px;}
.chapter-search{margin-bottom:14px;}
.chapter-search input{width:100%; max-width:280px; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:8px; padding:9px 12px; color:var(--paper); font-size:13px;}
.chapter-row{
  display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:8px;
  border:1px solid var(--line-soft); margin-bottom:8px; background:var(--ink-2);
}
.chapter-row:hover{border-color:var(--brass);}
.chapter-row.read{opacity:0.55;}
.chapter-row__num{
  width:38px; height:38px; border-radius:50%; background:var(--ink-3); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--brass); text-align:center;
}
.chapter-row__info{flex:1; min-width:0;}
.chapter-row__title{font-weight:600; font-size:14px;}
.chapter-row__meta{font-size:11.5px; color:var(--paper-dim); margin-top:2px;}

/* ============ READER ============ */
.reader{background:#000; margin:-26px -20px -80px; min-height:100vh; position:relative;}
.reader__topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  background:rgba(20,18,15,0.94); backdrop-filter:blur(10px); padding:12px 18px; border-bottom:1px solid var(--line-soft);
}
.reader__topbar .btn--ghost{width:auto; padding:8px 14px; font-size:13px;}
.reader__title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:13.5px;}
.reader__pages{display:flex; flex-direction:column; align-items:center; padding:0 0 40px;}
.reader__pages img{width:100%; max-width:880px; margin:0 auto; display:block; background:var(--ink-2);}
.reader__pages.wide img{max-width:1180px;}
.reader__page-loading{aspect-ratio:2/3; width:100%; max-width:880px; margin:0 auto;}
.reader__nav{
  position:sticky; bottom:0; z-index:40; display:flex; gap:10px; justify-content:center;
  background:rgba(20,18,15,0.94); backdrop-filter:blur(10px); padding:12px 18px; border-top:1px solid var(--line-soft);
}
.reader__nav .btn{width:auto; padding:10px 18px; font-size:13px;}
.reader__progress{position:fixed; top:0; left:0; height:3px; background:var(--seal); z-index:60; transition:width .1s;}

/* ============ LIBRARY / HISTORY ============ */
.lib-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.lib-head .section__title{margin:0;}
.lib-head__tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.lib-head__tools .filter-select{min-width:110px; padding:8px 10px; font-size:13px;}
.lib-head__tools .btn--sm,
.lib-import-btn{width:auto; padding:8px 12px; font-size:12.5px; cursor:pointer;}

.lib-item{
  display:flex; gap:12px; padding:12px;
  border-radius:14px; border:1px solid var(--line-soft);
  background:var(--ink-2); margin-bottom:10px; align-items:center;
}
.lib-item--pinned{border-color:rgba(201,162,39,.45); background:linear-gradient(90deg, rgba(201,162,39,.06), var(--ink-2) 40%);}
.lib-item--new{border-color:var(--brass);}
.lib-item__cover{
  position:relative; flex-shrink:0; width:54px; height:72px;
  border-radius:8px; overflow:hidden; display:block;
  border:1px solid var(--line-soft);
}
.lib-item__cover img{width:100%; height:100%; object-fit:cover; display:block;}
.lib-item__pin-badge{
  position:absolute; top:2px; left:2px; font-size:11px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.lib-item__info{flex:1; min-width:0;}
.lib-item__title{
  font-weight:700; font-size:14px; color:var(--paper); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.3;
}
.lib-item__title:hover{color:var(--brass);}
.lib-item__meta{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:11.5px; color:var(--paper-dim); margin-top:5px;
}
.lib-item__source{
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:999px; padding:2px 8px; font-size:11px;
}
.lib-item__status{opacity:.9;}
.lib-item__progress{margin-top:8px;}
.lib-item__progress-bar{
  height:4px; border-radius:99px; background:var(--ink-3);
  overflow:hidden; margin-bottom:4px;
}
.lib-item__progress-bar i{
  display:block; height:100%; background:var(--brass);
  border-radius:99px;
}
.lib-item__progress-text{font-size:11.5px; color:var(--brass); font-weight:600;}
.lib-item__actions{display:flex; flex-direction:column; gap:4px; flex-shrink:0;}
.lib-item__pin, .lib-item__remove{
  background:var(--ink-3); border:1px solid var(--line-soft);
  color:var(--paper-dim); width:34px; height:34px; border-radius:10px;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lib-item__pin:hover{border-color:var(--brass); color:var(--brass);}
.lib-item__remove:hover{border-color:var(--seal); color:var(--seal-hi);}

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,9,7,0.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-backdrop.hidden{display:none !important;}
.modal-backdrop:not(.hidden){display:flex !important;}
#settingsModal:not(.hidden){display:flex !important; z-index:200;}
.modal{
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px; padding:32px;
  max-width:400px; width:100%; position:relative; box-shadow:var(--shadow);
}
.modal__close{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--paper-dim); font-size:22px;}
.modal__seal{width:52px; height:52px; border-radius:50%; background:var(--seal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px;}
.modal h2{font-family:var(--font-display); font-size:22px; margin:0 0 6px;}
.modal__sub{color:var(--paper-dim); font-size:13.5px; margin:0 0 20px;}
.modal .divider{display:flex; align-items:center; gap:12px; color:var(--paper-dim); font-size:12px; margin:16px 0;}
.modal .divider::before, .modal .divider::after{content:''; flex:1; height:1px; background:var(--line-soft);}
#emailAuthForm{display:flex; flex-direction:column; gap:10px;}
#emailAuthForm input{background:var(--ink-3); border:1px solid var(--line-soft); border-radius:8px; padding:11px 13px; color:var(--paper); font-size:14px;}
.modal__switch{text-align:center; font-size:13px; color:var(--paper-dim); margin-top:16px;}
.modal__switch button{background:none; border:none; color:var(--brass); font-weight:700;}
.modal__error{color:var(--seal-hi); font-size:12.5px; margin-top:10px; text-align:center;}

.shortcut-help__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px;
}
.shortcut-help__row:last-of-type{border-bottom:none;}
.shortcut-help__row kbd{
  background:var(--ink-3); border:1px solid var(--line-soft); border-bottom-width:2px;
  border-radius:6px; padding:3px 8px; font-family:var(--font-mono); font-size:12px; color:var(--brass);
}

/* Source picker — compact + scrollable on mobile */
.modal--source{
  max-width:420px;
  max-height:min(92vh, 720px);
  padding:20px 18px 16px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal--source__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-shrink:0;
}
.modal--source__head .modal__seal{margin:0; width:40px; height:40px; font-size:18px; flex-shrink:0;}
.modal--source__head h2{font-size:18px; margin:0 0 2px;}
.modal--source__head .modal__sub{margin:0; font-size:12.5px;}

.source-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:0;
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
  padding-right:2px;
  -webkit-overflow-scrolling:touch;
}
.source-item{
  text-align:left;
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:11px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.source-item:active{background:var(--ink-2);}
.source-item.active{border-color:var(--brass); background:rgba(201,162,39,.06);}
.source-item__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.source-item__name{font-weight:800; font-size:14px;}
.source-item__desc{font-size:11.5px; color:var(--paper-dim); line-height:1.4;}
.source-item__status{
  font-size:10px;
  font-weight:700;
  color:var(--paper-dim);
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
  flex-shrink:0;
}
.source-item__status.ok{color:var(--teal);}

.komiku-setup{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.komiku-setup label{font-size:12px; color:var(--paper-dim);}
.komiku-setup input{background:var(--ink-3); border:1px solid var(--line-soft); border-radius:8px; padding:10px 12px; color:var(--paper); font-size:13px;}
.komiku-setup .hint{font-size:11.5px; color:var(--paper-dim); line-height:1.5;}
.komiku-setup .hint code{color:var(--brass);}

/* Sticky proxy panel — always visible under the list */
.proxy-panel{
  flex-shrink:0;
  margin:0 0 12px;
  padding:0 0 12px;
  border-bottom:1px solid var(--line-soft);
  gap:8px;
}
.proxy-panel__title{
  font-size:12px;
  font-weight:700;
  color:var(--paper-dim);
  letter-spacing:0.2px;
}
.proxy-panel input{
  width:100%;
  box-sizing:border-box;
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:11px 12px;
  color:var(--paper);
  font-size:13px;
}
.proxy-panel__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.proxy-panel__actions .btn{flex:1 1 auto; min-width:0;}
.proxy-panel .hint{font-size:11px; margin:0; line-height:1.45;}
.proxy-panel .hint code{color:var(--brass); word-break:break-all;}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink-2); border:1px solid var(--brass); color:var(--paper);
  padding:12px 20px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:200;
  box-shadow:var(--shadow);
}
.toast.hidden{display:none;}

.hidden{display:none !important;}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .topnav{display:none;}
  .burger{display:flex;}
  .search{order:3; max-width:none; width:100%; margin-top:10px;}
  .topbar__inner{flex-wrap:wrap;}
  .detail{grid-template-columns:1fr; gap:18px;}
  .detail__side{position:static; display:flex; justify-content:center;}
  .detail__cover{max-width:180px; width:100%;}
  .detail__title{text-align:left;}
  .detail__meta-row{grid-template-columns:1fr;}
}

@media (max-width: 480px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:12px;}
  .hero__content{padding:20px;}
  #app{padding:18px 12px 60px;}
}


/* ============ LIGHT THEME ============ */
[data-theme="light"]{
  --ink:        #ece5d6;
  --ink-2:      #f5f0e4;
  --ink-3:      #fffdf8;
  --paper:      #1c1914;
  --paper-dim:  #5c5648;
  --line-soft:  rgba(20,18,15,0.08);
  --shadow:     0 10px 30px rgba(0,0,0,0.12);
}
[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 15% -10%, #f0e8d4 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #e8efe9 0%, transparent 55%),
    var(--ink);
}
[data-theme="light"] .topbar{background:rgba(236,229,214,0.92);}
[data-theme="light"] .card,
[data-theme="light"] .lib-item,
[data-theme="light"] .chapter-row,
[data-theme="light"] .modal{background:var(--ink-3);}

/* ============ CONTINUE READING ============ */
.continue-row{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.continue-card{
  flex:0 0 200px; scroll-snap-align:start;
  display:flex; gap:10px; background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:12px; padding:10px;
}
.continue-card img{width:48px;height:68px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.continue-card__title{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.continue-card__meta{font-size:11.5px;color:var(--paper-dim);margin-top:4px;}

/* ============ CARD SHARE ============ */
.card{position:relative;}
.card__share{
  position:absolute; top:8px; right:8px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  background:rgba(20,18,15,0.72); border:1px solid var(--line-soft);
  color:var(--paper); font-size:13px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.card:hover .card__share, .card:focus-within .card__share{opacity:1;}
@media (max-width:860px){ .card__share{opacity:1;} }

/* ============ FILTER BAR ============ */
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.filter-select{
  background:var(--ink-2); border:1px solid var(--line-soft);
  color:var(--paper); border-radius:999px; padding:8px 14px; font-size:12.5px;
}
.settings-list{display:flex; flex-direction:column; gap:14px; text-align:left;}
.settings-row{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px;}

/* ============ LIBRARY NEW BADGE ============ */
.lib-item--new{border-color:var(--brass);}
.badge-new{color:var(--brass); font-weight:700;}
.hist-stats{display:flex; gap:18px; margin-bottom:14px; font-size:13px; color:var(--paper-dim);}
.hist-stats b{color:var(--paper); font-size:16px; margin-right:4px;}

/* ============ CROSS SOURCE ============ */
.cross-source{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.cross-source__label{width:100%; font-size:12px; color:var(--paper-dim); font-weight:600;}

/* ============ READER ZOOM / REACT ============ */
.reader__pages{gap: var(--reader-gap, 6px);}
.reader__pages img{
  width: calc(100% * var(--reader-zoom, 1));
  max-width: none;
  margin-inline: auto;
}
.reader__react{
  display:flex; gap:8px; align-items:center; justify-content:center;
  padding:8px 12px; flex-wrap:wrap;
}
.react-btn{
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:999px; padding:6px 10px; font-size:16px;
}
.react-btn:hover{border-color:var(--brass);}
.react-current{font-size:12.5px; color:var(--paper-dim); margin-left:6px;}

.btn--sm{padding:8px 14px; font-size:12.5px; width:auto;}


/* ============ PROFILE ============ */
.profile{max-width:720px; margin:0 auto;}
.profile__hero{
  display:flex; align-items:center; gap:18px;
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:16px; padding:22px;
}
.profile .profile__hero{
  border-radius:0 0 16px 16px;
  border-top:none;
}
.profile__avatar{
  width:72px; height:72px; border-radius:50%; overflow:hidden;
  background:var(--seal); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800;
  box-shadow:0 0 0 3px var(--ink-3), 0 4px 14px rgba(178,58,46,.35);
}
.profile__avatar img{width:100%; height:100%; object-fit:cover;}
.profile__name{font-family:var(--font-display); font-size:26px; margin:0 0 4px; letter-spacing:0.3px;}
.profile__email{margin:0; color:var(--paper-dim); font-size:13.5px;}
.profile__uid{margin:6px 0 0; font-size:11.5px; color:var(--paper-dim); font-family:var(--font-mono);}
.profile__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:16px 0;
}
.profile__stat{
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:12px; padding:16px 12px; text-align:center;
}
.profile__stat b{display:block; font-size:22px; font-weight:800; color:var(--brass);}
.profile__stat span{font-size:12px; color:var(--paper-dim);}
.profile__actions{
  display:flex; flex-wrap:wrap; gap:10px;
}
.profile__actions .btn{width:auto; padding:10px 16px; font-size:13.5px;}
.profile__logout{border-color:var(--seal) !important; color:var(--seal-hi) !important;}
@media (max-width:480px){
  .profile__hero{flex-direction:column; text-align:center;}
  .profile__actions{flex-direction:column;}
  .profile__actions .btn{width:100%;}
}

.card__source.novel{background:#5b4b8a;}
.novel-read-card{
  max-width:680px; margin:24px auto; padding:28px 22px;
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px;
  line-height:1.7;
}
.novel-read-card h2{font-family:var(--font-display); font-size:26px; margin:0 0 8px;}
.novel-read-card__meta{color:var(--paper-dim); font-size:13px; margin:0 0 16px;}
.novel-read-card__desc{font-size:15px; white-space:pre-wrap; margin:0 0 18px;}
.novel-read-card__note{font-size:12.5px; color:var(--paper-dim); margin:0 0 16px;}
.novel-read-card .btn{width:auto; display:inline-flex;}

.settings-hint{font-size:12px;color:var(--paper-dim);margin:0;}
.settings-divider{
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--paper-dim); margin:8px 0 0; padding-top:10px;
  border-top:1px solid var(--line-soft);
}
#settingsModal .modal{max-width:420px; max-height:90vh; overflow-y:auto;}
#settingsModal .filter-select{min-width:140px; max-width:55%;}

body.reader-night,
body.reader-night #app {
  background: #0a0908 !important;
}
body.reader-night .reader__pages {
  background: #0a0908;
}
body.reader-night .reader__bar,
body.reader-night .reader__nav {
  background: rgba(10,9,8,0.92);
}
.lib-item__note {
  font-size: 12px;
  color: var(--paper-dim);
  margin-top: 4px;
  line-height: 1.4;
}
.detail__meta-controls .filter-select {
  min-width: 140px;
}

.reader__topbar, .reader__nav {
  transition: transform .25s ease, opacity .25s ease;
}
.reader__topbar.reader-ui-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.reader__nav.reader-ui-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.reader__page { position: relative; }
.reader__page img { display: block; }

.reader__pages.page-mode{
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: auto;
}
.reader__pages.page-mode .reader__page{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader__pages.page-mode .reader__page img{
  max-height: 100vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.offline-dl-btn--on{color:#6fbf73;border-color:#6fbf73;}

.reader-menu-fab{
  position: fixed;
  left: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)); /* di atas .reader__nav yang sticky di bottom:0, samain sama nilai yang tema violet udah pernah pakai */
  z-index: 45;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--seal);
  color: #fff;
  border: none;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.reader-menu-panel{
  position: fixed;
  left: 16px;
  bottom: calc(146px + env(safe-area-inset-bottom, 0px)); /* fab (88) + tinggi fab (50) + jarak (8) */
  z-index: 45;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 12px;
  width: min(280px, calc(100vw - 32px));
}
.reader-menu-panel[hidden]{ display: none; }
.reader-menu-panel__row{ display: flex; gap: 8px; margin-bottom: 8px; }
.reader-menu-panel__row:last-child{ margin-bottom: 0; }
.reader-menu-panel__row .btn{
  flex: 1; width: auto; padding: 10px 8px; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-menu-panel__group{ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.reader-menu-panel__group--last{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.reader-menu-panel__label{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brass); font-weight: 700; margin-bottom: 8px;
}

.premium-tier{
  background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px;
  padding:16px 12px; text-align:center; cursor:pointer; color:var(--paper);
}
.premium-tier:hover{border-color:var(--brass);}
.premium-tier--active{border-color:var(--seal); background:rgba(178,58,46,0.1);}
.premium-tier__days{font-size:13px; color:var(--paper-dim); margin-bottom:6px;}
.premium-tier__old{font-size:11.5px; color:var(--paper-dim); text-decoration:line-through;}
.premium-tier__price{font-family:var(--font-display); font-size:20px; color:var(--brass);}
.premium-tier{position:relative;}
.premium-tier__save{
  position:absolute; top:-9px; right:8px; background:var(--seal); color:#fff;
  font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:0.03em;
}
.premium-tier__perday{font-size:10.5px; color:var(--paper-dim); margin-top:2px;}

.premium-status-banner{
  display:flex; align-items:flex-start; gap:12px; background:linear-gradient(135deg, rgba(201,162,39,0.14), rgba(201,162,39,0.04));
  border:1px solid var(--brass); border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.premium-status-banner__icon{font-size:26px; flex-shrink:0; line-height:1;}

.premium-pay-summary{
  display:flex; align-items:center; justify-content:space-between; background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:13.5px;
}
.premium-pay-summary__price{font-family:var(--font-display); font-size:20px; color:var(--brass);}

.premium-qr-frame{
  background:#fff; border-radius:16px; padding:16px; max-width:260px; margin:0 auto 14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.premium-qr-frame img{width:100%; display:block; border-radius:6px;}

.premium-expiry-preview{
  text-align:center; background:var(--ink-2); border:1px solid var(--brass); border-radius:12px;
  padding:14px; display:flex; flex-direction:column; gap:4px;
}
.premium-expiry-preview span:first-child{font-size:12px; color:var(--paper-dim);}
.premium-expiry-preview b{font-family:var(--font-display); font-size:20px; color:var(--brass);}

.premium-done{text-align:center; background:var(--ink-2); border:1px solid var(--brass); border-radius:16px; padding:28px 20px;}
.premium-done__icon{font-size:36px; margin-bottom:10px;}

.premium-steps{display:flex; align-items:center; margin-bottom:22px;}
.premium-step{display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0;}
.premium-step__num{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ink-2); border:1px solid var(--line-soft); color:var(--paper-dim); font-size:13px; font-weight:700;
}
.premium-step__label{font-size:10px; color:var(--paper-dim); white-space:nowrap;}
.premium-step__line{flex:1; height:1px; background:var(--line-soft); margin:0 4px 18px;}
.premium-step--active .premium-step__num{background:var(--seal); border-color:var(--seal); color:#fff;}
.premium-step--active .premium-step__label{color:var(--paper); font-weight:600;}
.premium-step--done .premium-step__num{background:var(--brass); border-color:var(--brass); color:var(--ink);}
.premium-step--done .premium-step__label{color:var(--brass);}
.reader-menu-panel__row--slider{ flex-direction: column; gap: 6px; align-items: stretch; }
.reader-menu-panel__row--slider label{ font-size: 12.5px; color: var(--paper-dim); }
.reader-menu-panel__row--slider label span{ color: var(--brass); font-weight: 700; }
.reader-menu-panel__row--slider input[type="range"]{
  width: 100%; height: 4px; border-radius: 2px; background: var(--ink-3);
  -webkit-appearance: none; appearance: none; margin: 4px 0;
}
.reader-menu-panel__row--slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--seal); cursor: pointer; border: 2px solid var(--paper);
}
.reader-menu-panel__row--slider input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--seal); cursor: pointer; border: 2px solid var(--paper);
}
.global-back-to-top{
  position: fixed; bottom: 24px; right: 20px; z-index: 44;
  align-items: center; justify-content: center;
}
.report-broken-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.55); color: #f2ebe0;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.reader__page:hover .report-broken-btn,
.report-broken-btn:focus { opacity: 1; }
@media (pointer: coarse) {
  .report-broken-btn { opacity: .55; }
}
.lib-item--pinned { border-color: var(--brass); }
.lib-item__pin {
  background: none; border: none; color: var(--paper-dim);
  font-size: 16px; padding: 6px; cursor: pointer;
}
.lib-item__pin:hover { color: var(--brass); }
.lib-progress { color: var(--brass); font-weight: 600; }

/* ===== Settings modal polish ===== */
.modal--settings{
  max-width: 440px;
  max-height: min(92vh, 720px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 12px;
}
.settings-head .modal__seal{ margin: 0; flex-shrink: 0; }
.settings-head h2{ margin: 0 0 4px; font-size: 22px; }
.settings-head .modal__sub{ margin: 0; }
.modal--settings .settings-list{
  padding: 8px 18px 12px;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.modal--settings .settings-row{
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
}
.modal--settings .settings-row span{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper);
}
.modal--settings .filter-select{
  min-width: 132px;
  max-width: 52%;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--paper);
  padding: 8px 10px;
  font-size: 13px;
}
.modal--settings input[type="checkbox"]{
  width: 20px;
  height: 20px;
  accent-color: var(--seal);
  cursor: pointer;
}
.modal--settings .settings-hint{
  padding: 0 6px 4px;
  font-size: 11.5px;
  line-height: 1.4;
}
.modal--settings .settings-divider{
  margin: 12px 4px 4px;
  padding-top: 0;
  border-top: none;
  color: var(--brass);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.settings-footer{
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--ink-2);
}
.settings-footer .btn{ width: 100%; }
.modal--settings .btn--ghost.btn--sm,
.modal--settings #settingNotifBtn{
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
}
#autoScrollBtn.active{
  background: var(--seal);
  border-color: var(--seal);
  color: #fff;
}

/* ===== Pagination ===== */
.pager{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:22px 0 8px; padding:4px 0;
}
.pager__btn{
  min-width:38px; height:38px; padding:0 12px;
  border-radius:10px; border:1px solid var(--line-soft);
  background:var(--ink-2); color:var(--paper);
  font-size:13.5px; font-weight:700; cursor:pointer;
}
.pager__btn:hover{border-color:var(--brass);}
.pager__btn.active{
  background:var(--seal); border-color:var(--seal); color:#fff;
}
.pager__btn:disabled{opacity:.35; cursor:default;}
.pager__info{font-size:12.5px; color:var(--paper-dim); margin-left:6px;}

.reader__pages.dbl-zoom img{
  max-width: none !important;
  width: 140% !important;
  margin-left: -20%;
}

/* ===== Profile banner & sections ===== */
.profile__banner{
  position:relative;
  height:140px;
  border-radius:16px 16px 0 0;
  background: linear-gradient(135deg, #2a1814, var(--ink-2) 45%, rgba(178,58,46,.35));
  border:1px solid var(--line-soft);
  border-bottom:none;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.profile__banner.has-img{background-color:var(--ink-3);}
.profile__banner-edit{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.6); color:var(--paper);
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:7px 14px; font-size:12px; cursor:pointer; z-index:2;
}
.profile__hero{
  position:relative; z-index:1;
  margin-top:0;
  border-radius:0 0 16px 16px;
  padding-top:16px;
}
.profile__bio{margin:8px 0 0; font-size:13.5px; color:var(--paper-dim); line-height:1.45; max-width:42ch;}
.profile__bio-empty{opacity:.55; font-style:italic;}
.profile__genres{margin:14px 0 4px;}
.profile__genre-label{font-size:12px; color:var(--paper-dim); margin-bottom:8px; font-weight:600;}
.profile__section{margin-top:22px;}
.profile__section .hint{font-size:13px; color:var(--paper-dim); padding:4px 2px;}
@media (max-width:480px){
  .profile__banner{height:100px; border-radius:14px;}
}

.banner-preview{
  width:100%; height:72px; border-radius:10px;
  background:var(--ink-3); border:1px dashed var(--line-soft);
  background-size:cover; background-position:center;
}
.banner-preview.has{border-style:solid;}

.card__time{font-size:11px; color:var(--brass); opacity:.9;}
.chapter-row__meta{font-size:12px; color:var(--paper-dim);}

/* ===== Profile card redesign ===== */
.profile{max-width:640px; margin:0 auto; padding-bottom:24px;}
.profile-card{
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:18px;
  overflow:hidden;
  margin-bottom:16px;
}
.profile-card__banner{
  height:112px;
  background:linear-gradient(120deg, #3a1c18 0%, #1c1914 50%, #4a2220 100%);
  background-size:cover;
  background-position:center;
  position:relative;
}
.profile-card__banner.has-img{background-color:#1c1914;}
.profile-card__banner-btn{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.55); color:#f2ebe0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px; padding:6px 12px;
  font-size:11.5px; cursor:pointer;
}
.profile-card__body{
  display:flex; gap:14px; align-items:flex-start;
  padding:0 16px 14px;
  margin-top:-28px;
  position:relative;
}
.profile-card__avatar{
  width:72px; height:72px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:var(--seal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800;
  border:3px solid var(--ink-2);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.profile-card__avatar img{width:100%; height:100%; object-fit:cover;}
.profile-card__text{flex:1; min-width:0; padding-top:32px;}
.profile-card__name{
  font-family:var(--font-display); font-size:22px;
  margin:0 0 2px; line-height:1.15;
}
.profile-card__email{margin:0; font-size:12.5px; color:var(--paper-dim);}
.profile-card__bio{margin:8px 0 0; font-size:13px; color:var(--paper-dim); line-height:1.45;}
.profile-card__bio .dim{opacity:.55; font-style:italic;}
.profile-card__edit{margin-top:10px; width:auto; padding:7px 12px;}
.profile-card__stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border-top:1px solid var(--line-soft);
}
.profile-card__stat{
  text-align:center; padding:12px 8px;
  border-right:1px solid var(--line-soft);
}
.profile-card__stat:last-child{border-right:none;}
.profile-card__stat b{display:block; font-size:20px; color:var(--brass); font-weight:800;}
.profile-card__stat span{font-size:11px; color:var(--paper-dim);}
.profile-card__genres{margin:0 0 14px;}
.profile-card__genre-label{font-size:12px; color:var(--paper-dim); margin-bottom:8px; font-weight:600;}
.profile-card__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:20px;
}
.profile-card__actions .btn{width:100%; padding:11px 10px; font-size:13px;}
.profile-block{margin-bottom:22px;}
.profile-block__title{
  font-family:var(--font-display); font-size:18px;
  margin:0 0 12px; color:var(--paper);
}
.profile-block__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.profile-block__head .profile-block__title{margin:0;}
.profile-block__empty{
  font-size:13px; color:var(--paper-dim);
  margin:0; padding:12px 14px;
  background:var(--ink-2); border:1px dashed var(--line-soft);
  border-radius:12px;
}
@media (max-width:480px){
  .profile-card__body{flex-direction:column; align-items:center; text-align:center; margin-top:-36px;}
  .profile-card__text{padding-top:8px;}
  .profile-card__actions{grid-template-columns:1fr 1fr;}
}

.detail-backbar{
  margin:0 0 14px;
  display:flex;
  align-items:center;
}
.detail-back-btn{
  width:auto !important;
  padding:8px 14px !important;
  font-size:13.5px;
  border-radius:999px;
}

/* ===== Global chat ===== */
.chat{max-width:720px; margin:0 auto; display:flex; flex-direction:column; min-height:calc(100vh - 160px);}
.chat__head{margin-bottom:10px;}
.chat__hint{font-size:12.5px; color:var(--paper-dim); margin:4px 0 0;}
.chat__messages{
  flex:1; overflow-y:auto; max-height:min(60vh, 520px);
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:12px;
}
.chat__msg{display:flex; gap:10px; align-items:flex-start;}
.chat__msg--mine{flex-direction:row-reverse;}
.chat__avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--seal); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; text-decoration:none;
}
.chat__avatar img{width:100%; height:100%; object-fit:cover;}
.chat__bubble{
  max-width:min(80%, 420px); background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:12px; padding:10px 12px;
}
.chat__msg--mine .chat__bubble{background:rgba(178,58,46,.15); border-color:rgba(178,58,46,.35);}
.chat__meta{display:flex; gap:8px; align-items:baseline; margin-bottom:4px;}
.chat__name{font-size:12.5px; font-weight:700; color:var(--brass); text-decoration:none;}
.chat__name:hover{text-decoration:underline;}
.chat__time{font-size:11px; color:var(--paper-dim);}
.chat__text{font-size:14px; line-height:1.45; color:var(--paper); word-break:break-word;}
.chat__msg-reply{
  font-size:12px; color:var(--paper-dim); border-left:2px solid var(--brass);
  padding-left:8px; margin-bottom:6px;
}
.chat__reply-btn{
  margin-top:6px; background:none; border:none; color:var(--paper-dim);
  font-size:11.5px; cursor:pointer; padding:0;
}
.chat__reply-btn:hover{color:var(--brass);}
.chat__reply{
  margin-top:8px; padding:8px 12px; background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:10px;
}
.chat__reply-info{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--paper-dim);}
.chat__reply-x{background:none; border:none; color:var(--paper-dim); font-size:18px; cursor:pointer;}
.chat__composer{
  display:flex; gap:8px; margin-top:10px; position:sticky; bottom:8px;
}
.chat__composer input{
  flex:1; background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:12px; padding:12px 14px; color:var(--paper); font-size:14px;
}
.chat__composer .btn{width:auto; padding:12px 18px;}

/* hist safety — cover size if old markup */
.lib-item > img{
  width:54px; height:72px; object-fit:cover; border-radius:8px; flex-shrink:0;
}
.hist-stats{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  margin-bottom:14px; font-size:13px; color:var(--paper-dim);
}
.hist-stats b{color:var(--brass); font-size:15px; margin-right:3px;}

.chat__head-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chat__pinned{
  margin-bottom:8px; padding:10px 12px;
  background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35);
  border-radius:12px; font-size:13px;
}
.chat__pinned-inner{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.chat__pinned-label{font-weight:800; color:var(--brass);}
.chat__pinned-text{flex:1; min-width:0; color:var(--paper-dim);}
.chat__unpin-btn,.chat__actions button{
  background:none; border:none; color:var(--paper-dim); font-size:11.5px; cursor:pointer; padding:0 4px;
}
.chat__actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.chat__actions button:hover{color:var(--brass);}
.chat__new-badge{
  text-align:center; margin:6px 0; padding:6px 12px;
  background:var(--seal); color:#fff; border-radius:999px;
  font-size:12.5px; font-weight:700; cursor:pointer;
}
.chat__mention{color:var(--brass); font-weight:700;}
.chat__inline-img{max-width:180px; max-height:120px; border-radius:8px; margin-top:6px; display:block; object-fit:cover;}
.chat__avatar.online{box-shadow:0 0 0 2px var(--ink-2), 0 0 0 4px #3d8b5a;}
.chat__status-line{font-size:11px; color:var(--paper-dim); font-style:italic; margin-bottom:4px;}
.chat__foot-hint{font-size:11px; color:var(--paper-dim); text-align:center; margin-top:6px;}
.profile-card__status{font-size:12.5px; color:var(--brass); margin:6px 0 0;}

/* chat layout polish */
.chat__msg{align-items:flex-start;}
.chat__msg--mine{flex-direction:row-reverse;}
.chat__msg--mine .chat__bubble{border-bottom-right-radius:4px;}
.chat__msg:not(.chat__msg--mine) .chat__bubble{border-bottom-left-radius:4px;}
.chat__avatar{
  width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--seal),#7a2a22);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;text-decoration:none;position:relative;
}
.chat__avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.chat__avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.chat__bubble{
  max-width:min(85%,440px);
  background:var(--ink-3);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:10px 12px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.chat__msg--mine .chat__bubble{
  background:rgba(178,58,46,.14);
  border-color:rgba(178,58,46,.3);
}
.chat__text{font-size:14px;line-height:1.45;color:var(--paper);}
.chat__manga-chip,.chat__ext-link{
  display:inline-flex;align-items:center;gap:4px;
  margin:4px 0;padding:5px 10px;
  background:var(--ink-2);border:1px solid var(--line-soft);
  border-radius:999px;font-size:12.5px;color:var(--brass);
  text-decoration:none;max-width:100%;
}
.chat__manga-chip:hover,.chat__ext-link:hover{border-color:var(--brass);}
.chat__msg-reply{
  font-size:12px;color:var(--paper-dim);
  border-left:3px solid var(--brass);
  padding:4px 0 4px 10px;margin-bottom:6px;
  background:rgba(0,0,0,.15);border-radius:0 8px 8px 0;
}
.chat__actions{opacity:.75;}
.chat__pinned-inner{align-items:flex-start;}
.chat__pinned-text{line-height:1.35;}

.user-badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.user-badge{
  font-size:10.5px; font-weight:800; letter-spacing:.4px;
  padding:3px 8px; border-radius:999px;
  background:var(--ink-3); border:1px solid var(--line-soft); color:var(--paper-dim);
}
.user-badge--admin{background:rgba(178,58,46,.2); border-color:rgba(178,58,46,.45); color:var(--seal-hi);}
.user-badge--online{background:rgba(61,139,90,.15); border-color:rgba(61,139,90,.4); color:#6dca8e;}
.user-meta-line{font-size:11.5px; color:var(--paper-dim); margin:6px 0 0;}
.user-about{
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:14px; overflow:hidden;
}
.user-about__row{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
.user-about__row:last-child{border-bottom:none;}
.user-about__row span{color:var(--paper-dim); flex-shrink:0;}
.user-about__row b{font-weight:600; text-align:right; word-break:break-word;}
.user-about__row b.mono{font-family:var(--font-mono); font-size:12px; color:var(--paper-dim);}
.user-msg{
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:12px; padding:12px; margin-bottom:8px;
}
.user-msg__top{display:flex; justify-content:space-between; gap:8px; margin-bottom:6px;}
.user-msg__ch{font-size:11.5px; font-weight:700; color:var(--brass);}
.user-msg__time{font-size:11px; color:var(--paper-dim);}
.user-msg__text{font-size:13.5px; line-height:1.4; word-break:break-word;}

.admin{max-width:720px;margin:0 auto;padding-bottom:32px;}
.admin-card{
  background:var(--ink-2); border:1px solid var(--line-soft);
  border-radius:14px; padding:16px; margin-bottom:14px;
}
.admin-card__title{margin:0 0 12px; font-size:16px; font-family:var(--font-display);}
.admin-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:13px;}
.admin-field span{color:var(--paper-dim);}
.admin-field textarea,.admin-field input[type="text"]{
  width:100%; background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:10px; color:var(--paper); padding:10px 12px; font-size:14px;
}
.admin-field--row{flex-direction:row; align-items:center; justify-content:space-between;}
.admin-row-btns{display:flex; flex-wrap:wrap; gap:8px;}
.admin-row-btns .btn{width:auto;}
.admin-report{
  padding:12px; border:1px solid var(--line-soft); border-radius:10px;
  margin-bottom:8px; background:var(--ink-3); font-size:13px;
}
.admin-report .btn{width:auto; margin-top:8px;}
.admin-stats{display:flex; flex-direction:column; gap:6px;}
.admin-stat-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; background:var(--ink-3); border-radius:8px;
  border:1px solid var(--line-soft); font-size:13px;
}
.admin-stat-row b{color:var(--brass); font-variant-numeric:tabular-nums;}
.chat__announce{
  margin:10px 0 0; padding:10px 12px;
  background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35);
  border-radius:10px; font-size:13px; color:var(--paper);
}

/* YouTube facade — rasio 16:9 normal + embed stabil */
.chat__yt{
  margin-top:8px;
  width:100%;
  max-width:min(100%, 320px);
}
.chat__yt-poster{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--line-soft);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:#0a0a0a;
}
.chat__yt-ratio{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  background:#111;
  position:relative;
}
.chat__yt-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  vertical-align:middle;
}
.chat__yt-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(178,58,46,.92);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  pointer-events:none;
  transition:transform .15s ease;
}
.chat__yt-poster:hover .chat__yt-play{transform:translate(-50%,-50%) scale(1.06);}
.chat__yt-label{
  position:absolute; left:8px; bottom:8px;
  background:rgba(0,0,0,.7); color:#fff;
  font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:6px;
  pointer-events:none;
}
.chat__yt-embed-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:#000;
  position:relative;
}
.chat__yt-embed,
.chat__yt-embed-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.chat__yt-open{
  display:inline-block; margin-top:6px; font-size:11.5px;
  color:var(--paper-dim); text-decoration:none;
}
.chat__yt-open:hover{color:var(--brass);}
.chat__yt-open--big{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; margin-top:8px; padding:10px 12px;
  font-size:13px; font-weight:600;
  color:#fff; background:rgba(178,58,46,.9);
  border-radius:10px; text-decoration:none;
  border:1px solid rgba(178,58,46,.5);
}
.chat__yt-open--big:hover{background:#b23a2e; color:#fff;}
.chat__video{
  margin-top:8px;
  width:100%;
  max-width:min(100%, 320px);
}
.chat__video-el{
  width:100%;
  max-height:240px;
  border-radius:12px;
  background:#000;
  border:1px solid var(--line-soft);
}
.chat__yt-controls{
  display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;
}
.chat__yt-ctrl{
  width:32px; height:32px; border-radius:8px;
  border:1px solid var(--line-soft); background:var(--ink-3);
  color:var(--paper); cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.chat__yt-ctrl:hover{border-color:var(--brass); color:var(--brass);}
.chat__yt-embed-wrap .chat__yt-embed,
.chat__yt-embed-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}


/* ===== Jadwal Rilis (multi-source realtime) ===== */
.schedule{max-width:880px;margin:0 auto;padding-bottom:40px;}
.schedule__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;}
.schedule__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.schedule__auto{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;}
.schedule__status{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;}
.schedule-pill{
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;
  border:1px solid var(--line-soft);background:var(--ink-3);color:var(--paper-dim);
}
.schedule-pill--ok{border-color:rgba(80,180,120,.4);color:#8fdbb0;}
.schedule-pill--err{border-color:rgba(178,58,46,.45);color:var(--seal-hi);}
.schedule-pill--skip{opacity:.65;}
.schedule__list{display:flex;flex-direction:column;gap:8px;}
.schedule-row{
  display:flex;gap:12px;align-items:center;
  padding:10px;border-radius:12px;
  background:var(--ink-2);border:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.schedule-row:hover{border-color:var(--brass);background:var(--ink-3);}
.schedule-row__cover{
  width:48px;height:64px;border-radius:8px;flex-shrink:0;
  background:#111 center/cover no-repeat;border:1px solid var(--line-soft);
}
.schedule-row__body{min-width:0;flex:1;}
.schedule-row__title{
  font-weight:700;font-size:14px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.schedule-row__meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:4px;font-size:12px;color:var(--paper-dim);
}
.schedule-row__src{
  font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;
  background:rgba(201,162,39,.12);color:var(--brass);
  border:1px solid rgba(201,162,39,.3);
}
.schedule-row__time{margin-left:auto;color:var(--paper-dim);}

/* ============ PREVIEW GAMBAR CHAPTER ============ */
.chapter-row__thumb{
  width:48px; height:64px; border-radius:6px; flex-shrink:0; overflow:hidden;
  background:var(--ink-3); display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--paper-dim); border:1px solid var(--line-soft);
}
.chapter-row__thumb:not(.chapter-row__thumb--ok):not(.chapter-row__thumb--empty){
  background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-2) 50%,var(--ink-3) 75%); background-size:200% 100%;
  animation:chPvShimmer 1.4s infinite linear;
}
.chapter-row__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.chapter-row__thumb--empty{opacity:.5;}
@keyframes chPvShimmer{to{background-position:-200% 0;}}
@media (max-width:480px){ .chapter-row__thumb{width:42px; height:56px;} }
.chapter-row__thumb{position:relative;}