.reader-page { background: #fbfaff; color: var(--ink); }
.reader-header { background: rgba(255,255,255,.94); }
.reader-main { min-height: calc(100vh - 75px); padding: 75px 20px 110px; }
.reader-container { width: min(850px, 100%); margin: 0 auto; }
.reader-back { display:inline-flex; align-items:center; gap:8px; color:var(--violet-700); font-size:12px; font-weight:700; margin-bottom:45px; }
.reader-cover { min-height: 320px; border-radius: 26px; background-size: cover; background-position: center; padding: 45px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; position:relative; overflow:hidden; box-shadow:0 25px 65px rgba(38,22,74,.14); margin-bottom:48px; }
.reader-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,7,31,.72),rgba(13,7,31,.04) 70%); }
.reader-cover > * { position:relative; z-index:1; }
.reader-cover .reader-category { font-size:11px; text-transform:uppercase; letter-spacing:1.7px; opacity:.85; font-weight:700; }
.reader-cover h1 { font-family:var(--serif); font-size:clamp(40px,6vw,66px); line-height:1.02; letter-spacing:-2px; max-width:700px; margin-top:12px; }
.reader-cover .reader-summary { max-width:560px; font-size:14px; line-height:1.7; margin-top:14px; color:rgba(255,255,255,.82); }
.reader-byline { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid #e8e3ef; padding-bottom:25px; margin-bottom:45px; }
.reader-author { display:flex; align-items:center; gap:12px; }
.reader-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#eee7ff; color:#5524a7; font-family:var(--serif); font-size:14px; font-weight:700; }
.reader-author strong { display:block; font-size:13px; }
.reader-author small, .reader-date { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.reader-date { text-align:right; }
.reader-content { font-family:var(--serif); font-size:19px; line-height:1.95; color:#292635; }
.reader-content p { margin:0 0 24px; }
.reader-content h2, .reader-content h3 { font-family:var(--serif); color:#171325; line-height:1.2; margin:44px 0 18px; }
.reader-content h2 { font-size:31px; }
.reader-content h3 { font-size:25px; }
.reader-content ul, .reader-content ol { margin:0 0 25px 25px; }
.reader-content blockquote { border-left:3px solid #6b32c9; margin:35px 0; padding:5px 0 5px 22px; color:#5f586d; font-style:italic; }
.reader-content pre { background:#f8f6fc; border:1px solid #e8e4f0; border-radius:12px; padding:18px 20px; margin:0 0 25px; font-family:var(--sans); font-size:15px; line-height:1.7; white-space:pre-wrap; color:#3a3646; }
.reader-content hr { border:0; border-top:1px solid #e3ddec; margin:40px auto; width:120px; }
.reader-content a { color:var(--violet-700); text-decoration:underline; text-underline-offset:2px; }
.reader-content sup, .reader-content sub { font-size:70%; }
.reader-actions { border-top:1px solid #e8e3ef; margin-top:55px; padding-top:25px; display:flex; justify-content:space-between; gap:15px; }
.reader-actions a { color:var(--violet-700); font-size:12px; font-weight:700; }
.reader-error { background:#fff; border:1px solid #e7e1ef; border-radius:20px; padding:45px; text-align:center; }
.reader-error h1 { font-family:var(--serif); font-size:38px; }
.reader-error p { color:var(--muted); font-size:13px; margin:10px 0 25px; }
.reader-loading { color:var(--muted); text-align:center; padding:100px 0; font-size:13px; }
.cover-one { background: radial-gradient(circle at 25% 25%,#7662a8,transparent 25%), linear-gradient(145deg,#1a2047,#57428d); }
.cover-two { background: radial-gradient(circle at 75% 20%,#c27a9e,transparent 27%), linear-gradient(145deg,#54213d,#9a5a7b); }
.cover-three { background: radial-gradient(circle at 70% 20%,#9d8b4d,transparent 22%), linear-gradient(145deg,#172e37,#496b67); }
.cover-four { background: radial-gradient(circle at 30% 20%,#8d6ac4,transparent 25%), linear-gradient(145deg,#301452,#6f42a3); }
.cover-five { background: radial-gradient(circle at 70% 30%,#b18b68,transparent 25%), linear-gradient(145deg,#3c2a2a,#76534b); }
@media (max-width: 700px) {
  .reader-main { padding-top:45px; }
  .reader-cover { min-height:360px; padding:30px; border-radius:20px; }
  .reader-cover h1 { letter-spacing:-1.3px; }
  .reader-byline { align-items:flex-start; flex-direction:column; }
  .reader-date { text-align:left; }
  .reader-content { font-size:18px; line-height:1.85; }
  .reader-actions { flex-direction:column; }
}

/* Uploaded story covers stay 3:4 and show the complete uploaded artwork. */
.reader-cover-uploaded{min-height:0!important;aspect-ratio:3/4;background:#fff!important;padding:0!important;display:block!important;position:relative;overflow:hidden;}
.reader-cover-uploaded::after{display:none!important;}
.reader-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#fff;}
.reader-cover-label{position:absolute;left:18px;bottom:16px;z-index:2;padding:6px 9px;border-radius:999px;background:rgba(20,14,35,.72);backdrop-filter:blur(4px);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;}