/*
 * Pencerita — Premium Novel Detail
 * Theme contract: uses --ck-* tokens from theme.css so Light/Dark stay in sync.
 */
.story-page{
  --sp-accent:#2f80ed;
  --sp-accent-strong:#216fda;
  --sp-gold:#f5a623;
  --sp-bg:var(--ck-bg,#f4f7fb);
  --sp-surface:var(--ck-surface,#fff);
  --sp-surface-2:var(--ck-surface-2,#fbfdff);
  --sp-text:var(--ck-text,#182a42);
  --sp-muted:var(--ck-muted,#70839b);
  --sp-line:var(--ck-line,#dce7f1);
  --sp-line-strong:var(--ck-line-strong,#cddbea);
  --sp-hover:var(--ck-hover,#f5f8fc);
  --sp-elevated:var(--ck-elevated,#fff);
  --sp-shadow:0 18px 50px rgba(31,67,104,.07);
  --sp-shadow-lg:0 28px 80px rgba(31,67,104,.11);
  color:var(--sp-text);
  min-width:0;
}
.story-page,.story-page *{box-sizing:border-box}
.story-page a{text-decoration:none}
.story-page button,.story-page input,.story-page select,.story-page textarea{font:inherit}
.story-page .panel{
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:24px;
  box-shadow:var(--sp-shadow);
}

/* Hero */
.story-page .story-hero{
  position:relative;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:34px;
  padding:30px;
  margin:0 0 24px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--sp-surface) 96%,var(--sp-accent) 4%),var(--sp-surface));
}
.story-page .story-hero::before{
  content:"";
  position:absolute;
  inset:-25% -10% auto auto;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(72,146,242,.11),transparent 68%);
  pointer-events:none;
  z-index:-1;
}
.story-page .story-hero-media{min-width:0}
.story-page .story-cover-wrap{
  width:260px;
  max-width:100%;
  position:relative;
}
.story-page .story-cover-wrap::after{
  content:"";
  position:absolute;
  inset:8px 9px -10px;
  border-radius:22px;
  background:rgba(33,72,112,.16);
  filter:blur(16px);
  z-index:-1;
}
.story-page .story-cover{
  width:100%;
  aspect-ratio:2/3;
  display:block;
  object-fit:cover;
  border-radius:20px;
  background:linear-gradient(145deg,var(--sp-surface-2),var(--sp-hover));
  border:1px solid var(--sp-line-strong);
  box-shadow:0 22px 42px rgba(22,55,92,.16);
}
.story-page .story-cover-fallback{
  display:grid;
  place-items:center;
  color:var(--sp-accent);
  font-size:76px;
  font-weight:900;
}
.story-page .story-hero-copy{min-width:0;padding:3px 2px}
.story-page .story-kicker-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.story-page .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  color:var(--sp-muted);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.story-page .story-status{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--sp-line);
  background:var(--sp-surface-2);
  color:var(--sp-muted);
  font-size:10px;
  font-weight:850;
}
.story-page .story-status::before{content:"";width:6px;height:6px;border-radius:50%;margin-right:6px;background:#71a6da}
.story-page .story-status.status-completed::before{background:#50ad7b}
.story-page .story-status.status-hiatus::before{background:#e1a23a}
.story-page .story-hero-copy h1{
  margin:12px 0 12px;
  max-width:980px;
  color:var(--sp-text);
  font-size:clamp(32px,4vw,54px);
  line-height:1.04;
  letter-spacing:-.047em;
}
.story-page .story-author{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--sp-text);
  transition:transform .18s ease,color .18s ease;
}
.story-page .story-author:hover{transform:translateY(-1px);color:var(--sp-accent)}
.story-page .story-author-avatar{border:1px solid var(--sp-line)!important;background:var(--sp-surface-2)!important;color:var(--sp-accent)}
.story-page .story-author-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.story-page .story-author small,.story-page .story-author b{display:block}
.story-page .story-author small{color:var(--sp-muted);font-size:10px;line-height:1.25}
.story-page .story-author b{margin-top:2px;font-size:12px}
.story-page .story-rating{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:15px;
  color:var(--sp-muted);
  font-size:12px;
}
.story-page .story-rating strong{color:var(--sp-text);font-size:17px}
.story-page .rating-star{color:var(--sp-gold);font-size:15px;text-shadow:0 0 12px rgba(245,166,35,.28)}
.story-page .story-rating-dot{opacity:.45}
.story-page .story-synopsis{
  margin:18px 0 0;
  max-width:920px;
  color:var(--sp-muted);
  font-size:15px;
  line-height:1.85;
}
.story-page .story-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:23px;
}
.story-page .story-actions form{margin:0}
.story-page .story-actions .btn{min-height:44px}
.story-page .story-read-cta{padding-inline:18px;box-shadow:0 12px 26px rgba(47,128,237,.18)}
.story-page .story-action-icon{gap:7px}
.story-page .story-action-support{border-color:rgba(245,166,35,.28)!important;background:color-mix(in srgb,var(--sp-gold) 9%,var(--sp-surface))!important;color:color-mix(in srgb,var(--sp-gold) 75%,var(--sp-text))!important}
.story-page .story-action-support:hover{border-color:rgba(245,166,35,.45)!important;background:color-mix(in srgb,var(--sp-gold) 14%,var(--sp-surface))!important}
.story-page .story-report-link{padding-inline:6px!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:var(--sp-muted)!important}
.story-page .story-stats-inline{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:22px;
  max-width:860px;
}
.story-page .story-stats-inline div{
  padding:11px 12px;
  border:1px solid var(--sp-line);
  border-radius:15px;
  background:color-mix(in srgb,var(--sp-surface-2) 92%,transparent);
}
.story-page .story-stats-inline b{display:block;color:var(--sp-text);font-size:16px;line-height:1.15;letter-spacing:-.02em}
.story-page .story-stats-inline span{display:block;margin-top:3px;color:var(--sp-muted);font-size:10px}

/* Main layout */
.story-page .story-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start;
}
.story-page .story-main-column{min-width:0;display:grid;gap:20px}
.story-page .story-side{min-width:0;display:grid;gap:18px;position:sticky;top:86px}
.story-page .story-side .side-card{padding:21px}
.story-page .side-card h3{margin:7px 0 7px;color:var(--sp-text);font-size:20px;letter-spacing:-.025em}
.story-page .side-card p{margin:0;color:var(--sp-muted);font-size:13px;line-height:1.7}
.story-page .side-card .btn-block{margin-top:15px}
.story-page .side-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.story-page .side-metrics span{padding:12px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:10px}
.story-page .side-metrics b{display:block;margin-bottom:3px;color:var(--sp-text);font-size:17px;line-height:1.2}

.story-page .story-chapters,.story-page .reviews-panel,.story-page .comments-section{padding:23px}
/* Chapter daftar isi memakai stroke per bab; wrapper luar tidak memakai frame tambahan. */
.story-page .story-chapters{border:0;box-shadow:none}
.story-page .panel-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.story-page .panel-heading h2{margin:6px 0 0;color:var(--sp-text);font-size:25px;letter-spacing:-.035em}
.story-page .panel-heading p{color:var(--sp-muted);margin:5px 0 0;font-size:12px;line-height:1.6}
.story-page .count-pill{flex:none;min-width:38px;height:38px;padding:0 11px;display:grid;place-items:center;border:1px solid var(--sp-line);border-radius:999px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:12px;font-weight:850}

/* Chapter list */
.story-page .chapter-list{display:grid;gap:8px}
.story-page .chapter-list.is-scrollable{max-height:590px;overflow-y:auto;overflow-x:hidden;padding:2px 4px 4px 0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sp-line-strong) transparent}
.story-page .chapter-list.is-scrollable::-webkit-scrollbar{width:7px}
.story-page .chapter-list.is-scrollable::-webkit-scrollbar-track{background:transparent}
.story-page .chapter-list.is-scrollable::-webkit-scrollbar-thumb{background:var(--sp-line-strong);border-radius:999px}
.story-page .chapter-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:10px 12px;border:1px solid var(--sp-line);border-radius:16px;background:var(--sp-surface);color:inherit;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.story-page .chapter-list-row:hover{background:var(--sp-hover);transform:translateY(-1px);border-color:color-mix(in srgb,var(--sp-accent) 28%,var(--sp-line));box-shadow:0 8px 22px rgba(31,67,104,.06)}
.story-page .chapter-list-row .chapter-list-link{min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:center;color:inherit;text-decoration:none}
.story-page .chapter-list-link:hover{text-decoration:none}
.story-page .chapter-number{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:var(--sp-surface-2);border:1px solid var(--sp-line-strong);box-shadow:0 5px 13px rgba(31,67,104,.06);color:var(--sp-accent);font-size:12px;font-weight:900;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.story-page .chapter-list-row:hover .chapter-number{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sp-accent) 32%,var(--sp-line-strong));background:var(--sp-surface)}
.story-page .chapter-list-main{min-width:0}
.story-page .chapter-list-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-text);font-size:13px}
.story-page .chapter-list-main small{display:block;margin-top:4px;color:var(--sp-muted);font-size:10px}
.story-page .premium-badge,.story-page .free-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap}
.story-page .premium-badge{background:color-mix(in srgb,#f5c65c 12%,var(--sp-surface));border:1px solid color-mix(in srgb,#dca52a 28%,var(--sp-line));color:color-mix(in srgb,#b77b16 82%,var(--sp-text))}
.story-page .free-badge{background:color-mix(in srgb,#4caf7a 10%,var(--sp-surface));border:1px solid color-mix(in srgb,#4caf7a 22%,var(--sp-line));color:color-mix(in srgb,#30845d 84%,var(--sp-text))}

/* Reviews + comments */
.story-page .reviews-panel .panel-heading{align-items:flex-end}
.story-page .rating-summary{display:flex;align-items:center;gap:8px;color:var(--sp-muted)}
.story-page .rating-score{color:var(--sp-text);font-size:28px;font-weight:900;line-height:1}
.story-page .rating-summary small{margin-left:4px;color:var(--sp-muted);font-size:10px}
.story-page .review-gate{margin-bottom:14px;padding:12px 14px;border:1px solid var(--sp-line);border-radius:13px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:12px;line-height:1.55}
.story-page .review-gate.ready{border-color:color-mix(in srgb,var(--sp-accent) 22%,var(--sp-line));background:color-mix(in srgb,var(--sp-accent) 6%,var(--sp-surface));color:var(--sp-text)}
.story-page .review-form,.story-page .comment-compose-form{display:grid;gap:10px;margin-bottom:17px;padding:14px;border:1px solid var(--sp-line);border-radius:16px;background:var(--sp-surface-2)}
.story-page .review-form textarea,.story-page .comment-compose-form textarea,.story-page .support-dialog textarea,.story-page .report-dialog textarea,.story-page .report-dialog select{width:100%;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-surface);color:var(--sp-text);outline:0}
.story-page .review-form textarea,.story-page .comment-compose-form textarea,.story-page .support-dialog textarea,.story-page .report-dialog textarea{min-height:100px;padding:12px 13px;resize:vertical}
.story-page .review-form textarea:focus,.story-page .comment-compose-form textarea:focus,.story-page .support-dialog textarea:focus,.story-page .report-dialog textarea:focus,.story-page .report-dialog select:focus,.story-page .reply-box input:focus{border-color:color-mix(in srgb,var(--sp-accent) 50%,var(--sp-line));box-shadow:0 0 0 4px rgba(47,128,237,.09)}
.story-page .star-picker{display:flex;gap:7px;align-items:center}
.story-page .star-picker label{position:relative;cursor:pointer}
.story-page .star-picker input{position:absolute;opacity:0;pointer-events:none}
.story-page .star-picker span{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--sp-line);border-radius:11px;background:var(--sp-surface);color:var(--sp-muted);font-size:12px;font-weight:800;transition:.16s ease}
.story-page .star-picker input:checked+span{border-color:rgba(245,166,35,.38);background:color-mix(in srgb,var(--sp-gold) 10%,var(--sp-surface));color:var(--sp-gold)}
.story-page .review-list,.story-page .comment-thread{display:grid;gap:10px}
.story-page .review-card,.story-page .comment-card{padding:15px;border:1px solid var(--sp-line);border-radius:16px;background:var(--sp-surface)}
.story-page .review-card-head,.story-page .comment-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.story-page .review-author,.story-page .comment-author{display:flex;align-items:center;gap:9px;min-width:0}
.story-page .review-author .avatar,.story-page .comment-author .avatar{flex:none;border:1px solid var(--sp-line)}
.story-page .review-author strong,.story-page .comment-author strong{display:block;color:var(--sp-text);font-size:12px}
.story-page .review-author small,.story-page .comment-author small{display:block;margin-top:2px;color:var(--sp-muted);font-size:10px}
.story-page .review-rating{flex:none;color:var(--sp-gold);font-size:12px;letter-spacing:1px}
.story-page .review-rating span{color:color-mix(in srgb,var(--sp-muted) 30%,transparent)}
.story-page .review-card p,.story-page .comment-body{margin:11px 0 0;color:var(--sp-muted);font-size:13px;line-height:1.78}
.story-page .review-report-btn{margin-top:10px;padding:0;border:0;background:none;color:var(--sp-muted);font-size:10px;font-weight:800;cursor:pointer}
.story-page .review-report-btn:hover{color:var(--sp-accent)}
.story-page .empty-inline{padding:25px 15px;text-align:center;border:1px dashed var(--sp-line);border-radius:15px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:12px}
.story-page .comment-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-page .comment-compose-footer .muted,.story-page .muted{color:var(--sp-muted)!important;font-size:11px}
.story-page .ghost-more,.story-page .comment-like-btn,.story-page .comment-reply-toggle{border:0;background:transparent;color:var(--sp-muted);font-size:11px;font-weight:800;cursor:pointer;padding:4px}
.story-page .comment-like-btn.liked{color:var(--sp-accent)}
.story-page .comment-actions{display:flex;gap:8px;align-items:center;margin-top:9px}
.story-page .reply-stack{display:grid;gap:8px;margin-top:11px;padding-left:12px;border-left:2px solid var(--sp-line)}
.story-page .comment-card.reply{background:var(--sp-surface-2)}
.story-page .reply-box{display:none;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.story-page .reply-box.open{display:grid}
.story-page .reply-box input{width:100%;height:40px;border:1px solid var(--sp-line);border-radius:11px;outline:0;padding:0 11px;background:var(--sp-surface);color:var(--sp-text)}
.story-page .login-prompt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;margin-bottom:14px;border:1px solid var(--sp-line);border-radius:13px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:12px}

/* Dialogs */
.story-page .report-dialog,.story-page .support-dialog{width:min(520px,calc(100vw - 28px));max-width:520px;padding:0;border:1px solid var(--sp-line);border-radius:22px;background:var(--sp-surface);box-shadow:var(--sp-shadow-lg);color:var(--sp-text)}
.story-page .report-dialog::backdrop,.story-page .support-dialog::backdrop{background:rgba(8,18,31,.54);backdrop-filter:blur(5px)}
.story-page .report-dialog form,.story-page .support-dialog form{display:grid;gap:13px;padding:21px}
.story-page .report-dialog h3,.story-page .support-dialog h2{margin:0;color:var(--sp-text);letter-spacing:-.025em}
.story-page .report-dialog label,.story-page .support-dialog .field{display:grid;gap:6px;color:var(--sp-muted);font-size:12px;font-weight:700}
.story-page .report-dialog select{height:42px;padding:0 10px}
.story-page .form-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.story-page .support-dialog-head p{margin:5px 0 0;color:var(--sp-muted);font-size:12px;line-height:1.65}
.story-page .support-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.story-page .support-options label{position:relative;cursor:pointer}
.story-page .support-options input{position:absolute;opacity:0;pointer-events:none}
.story-page .support-options span{min-height:43px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-surface-2);color:var(--sp-muted);font-size:11px;font-weight:850;transition:.16s ease}
.story-page .support-options input:checked+span{border-color:rgba(47,128,237,.35);background:color-mix(in srgb,var(--sp-accent) 8%,var(--sp-surface));color:var(--sp-accent)}
.story-page .field-hint{color:var(--sp-muted);font-weight:600}
.story-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ensure the page remains correct under both explicit theme modes. */
html[data-theme="light"] .story-page .panel{background:var(--ck-surface);border-color:var(--ck-line)}
html[data-theme="dark"] .story-page{--sp-shadow:0 22px 70px rgba(0,0,0,.28);--sp-shadow-lg:0 30px 90px rgba(0,0,0,.45)}
html[data-theme="dark"] .story-page .story-hero{background:linear-gradient(135deg,#121f30,#14253a)}
html[data-theme="dark"] .story-page .story-hero::before{background:radial-gradient(circle,rgba(69,143,234,.14),transparent 68%)}
html[data-theme="dark"] .story-page .story-cover-wrap::after{background:rgba(0,0,0,.38)}
html[data-theme="dark"] .story-page .story-cover{box-shadow:0 22px 48px rgba(0,0,0,.38)}
html[data-theme="dark"] .story-page .story-rating-dot{color:#5f7187}
html[data-theme="dark"] .story-page .story-action-support{color:#f5c777!important}
html[data-theme="dark"] .story-page .story-stats-inline div{background:rgba(255,255,255,.025)}
html[data-theme="dark"] .story-page .chapter-list-row:hover{box-shadow:0 10px 26px rgba(0,0,0,.18)}
html[data-theme="dark"] .story-page .premium-badge{color:#f0c875}
html[data-theme="dark"] .story-page .free-badge{color:#8bd5b6}

@media(max-width:1080px){
  .story-page .story-hero{grid-template-columns:220px minmax(0,1fr);gap:26px}
  .story-page .story-cover-wrap{width:220px}
  .story-page .story-content-grid{grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-width:900px){
  .story-page .story-content-grid{grid-template-columns:1fr}
  .story-page .story-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .story-page .story-hero{grid-template-columns:140px minmax(0,1fr);gap:16px;padding:18px;border-radius:19px}
  .story-page .story-cover-wrap{width:140px}
  .story-page .story-cover{border-radius:16px}
  .story-page .story-hero-copy h1{font-size:28px}
  .story-page .story-synopsis{font-size:13px;line-height:1.7}
  .story-page .story-actions{gap:7px;margin-top:17px}
  .story-page .story-actions .btn{min-height:39px;padding:7px 10px;font-size:11px}
  .story-page .story-stats-inline{grid-template-columns:repeat(2,1fr);margin-top:16px}
  .story-page .story-side{grid-template-columns:1fr}
  .story-page .story-chapters,.story-page .reviews-panel,.story-page .comments-section{padding:17px}
  .story-page .panel-heading h2{font-size:21px}
}
@media(max-width:500px){
  .story-page .story-hero{grid-template-columns:1fr}
  .story-page .story-cover-wrap{width:160px;margin:0 auto}
  .story-page .story-actions{display:grid;grid-template-columns:1fr 1fr}
  .story-page .story-read-cta{grid-column:1/-1}
  .story-page .story-report-link{justify-self:start}
  .story-page .story-actions form{width:100%}
  .story-page .story-actions form .btn{width:100%}
  .story-page .story-actions > .btn{width:100%}
  .story-page .story-stats-inline{grid-template-columns:repeat(2,1fr)}
  .story-page .comment-compose-footer{align-items:flex-start;flex-direction:column}
  .story-page .comment-compose-footer .btn{width:100%}
  .story-page .support-options{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.story-page *{transition:none!important}}

/* Clean Daftar Isi: no outer frame, each chapter keeps its own stroke. */
.story-page .story-chapters.panel{border:0!important;box-shadow:none!important;background:transparent!important}
.story-page .story-chapters > .chapter-list{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
.story-page .chapter-list-row{border:1px solid var(--sp-line)!important}

/* V28 optional Story cast */
.story-characters{margin:18px 0}.story-character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.story-character-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid var(--border,#e7edf5);border-radius:14px}.story-character-avatar{width:44px;height:44px;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:rgba(91,141,239,.12);color:#4a78bf;font-weight:800}.story-character-avatar img{width:100%;height:100%;object-fit:cover}.story-character-card strong{display:block}.story-character-card small{color:var(--text-muted,#718096)}.story-character-card p{margin:5px 0 0;font-size:13px;color:var(--text-muted,#718096);line-height:1.5}@media(max-width:720px){.story-character-grid{grid-template-columns:1fr}}