/* ===== READER THEMES ===== */
.reader-page.theme-dark{--reader-bg:#0d0d0d;--reader-text:#ddd;--reader-meta:#666;--reader-border:#1e1e1e;--reader-card:#161616;--reader-toolbar:rgba(10,10,10,0.97);--reader-accent:#c0392b}
.reader-page.theme-light{--reader-bg:#f7f5f0;--reader-text:#1a1a1a;--reader-meta:#999;--reader-border:#e0ddd8;--reader-card:#fff;--reader-toolbar:rgba(247,245,240,0.97);--reader-accent:#c0392b}
.reader-page.theme-sepia{--reader-bg:#f4ead2;--reader-text:#3a2a12;--reader-meta:#9a8060;--reader-border:#dcc9a0;--reader-card:#fffaf0;--reader-toolbar:rgba(244,234,210,0.97);--reader-accent:#8b4513}
.reader-page.theme-midnight{--reader-bg:#0d1117;--reader-text:#c9d1d9;--reader-meta:#6e7681;--reader-border:#21262d;--reader-card:#161b22;--reader-toolbar:rgba(13,17,23,0.97);--reader-accent:#58a6ff}

.reader-page{background:var(--reader-bg);color:var(--reader-text);min-height:100vh;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}

/* ===== TOOLBAR ===== */
.reader-toolbar{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:52px;display:flex;align-items:center;
  padding:0 10px;background:var(--reader-toolbar);
  border-bottom:1px solid var(--reader-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform 0.3s,opacity 0.3s;
  gap:4px;
}
.reader-toolbar.hidden{transform:translateY(-100%);opacity:0}
.toolbar-left{display:flex;align-items:center;gap:3px;flex-shrink:0}
.toolbar-center{flex:1;text-align:center;padding:0 6px;min-width:0}
.toolbar-right{display:flex;align-items:center;gap:3px;flex-shrink:0}
.toolbar-title{font-size:0.78rem;color:var(--reader-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar-btn{
  background:none;border:1px solid var(--reader-border);border-radius:5px;
  color:var(--reader-text);cursor:pointer;
  padding:5px 8px;font-size:0.75rem;
  transition:all 0.15s;display:flex;align-items:center;gap:3px;
  white-space:nowrap;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  min-height:34px;
}
.toolbar-btn:hover,.toolbar-btn.active{background:rgba(192,57,43,0.12);border-color:rgba(192,57,43,0.35);color:#e74c3c}
.toolbar-btn svg{width:13px;height:13px;flex-shrink:0}
.mode-label{font-size:0.7rem}
/* On phones, hide mode labels */
@media(max-width:480px){
  .mode-label{display:none}
  .toolbar-btn{padding:5px 7px}
  .toolbar-title{font-size:0.72rem}
}
@media(max-width:380px){
  .reader-toolbar{padding:0 6px;gap:2px}
  .toolbar-btn{padding:5px 6px;font-size:0.7rem}
}

/* ===== PROGRESS BAR ===== */
.progress-bar{position:fixed;top:92px;left:0;height:2px;background:var(--reader-accent);z-index:499;transition:width 0.2s,top 0.3s;max-width:100%}

/* ===== SETTINGS PANEL ===== */
.settings-panel{
  position:fixed;z-index:400;
  background:var(--reader-toolbar);
  overflow-y:auto;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Desktop: right side panel */
@media(min-width:601px){
  .settings-panel{top:52px;right:0;width:270px;height:calc(100vh - 52px);border-left:1px solid var(--reader-border);transform:translateX(100%);padding:16px}
  .settings-panel.open{transform:translateX(0)}
}
/* Mobile: bottom sheet */
@media(max-width:600px){
  .settings-panel{bottom:0;left:0;right:0;top:auto;width:100%;max-height:75vh;border-top:1px solid var(--reader-border);transform:translateY(100%);padding:16px 16px 24px;border-radius:16px 16px 0 0}
  .settings-panel.open{transform:translateY(0)}
  .settings-panel::before{content:'';display:block;width:36px;height:4px;background:#333;border-radius:2px;margin:0 auto 16px}
}

.settings-section{margin-bottom:18px}
.settings-label{font-size:0.63rem;letter-spacing:2.5px;color:var(--reader-meta);text-transform:uppercase;margin-bottom:9px;font-weight:600}
.theme-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.theme-btn{padding:8px 6px;border:1px solid var(--reader-border);border-radius:5px;cursor:pointer;font-size:0.75rem;background:none;color:var(--reader-text);transition:all 0.15s;text-align:center;font-family:inherit;-webkit-tap-highlight-color:transparent}
.theme-btn:hover,.theme-btn.active{border-color:var(--reader-accent);color:var(--reader-accent);background:rgba(192,57,43,0.07)}
.slider-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.slider-row input[type=range]{flex:1;accent-color:var(--reader-accent);height:3px;cursor:pointer}
.slider-val{font-size:0.74rem;color:var(--reader-meta);min-width:38px;text-align:right}
.font-btns,.width-btns{display:flex;gap:5px}
.font-btn,.width-btn{flex:1;padding:7px 4px;border:1px solid var(--reader-border);border-radius:5px;cursor:pointer;font-size:0.74rem;background:none;color:var(--reader-text);transition:all 0.15s;text-align:center;font-family:inherit;-webkit-tap-highlight-color:transparent}
.font-btn:hover,.font-btn.active,.width-btn:hover,.width-btn.active{border-color:var(--reader-accent);color:var(--reader-accent);background:rgba(192,57,43,0.07)}

/* ===== MAIN CONTENT ===== */
.reader-main{padding-top:92px;min-height:100vh;transition:padding-right 0.3s,padding-top 0.3s}
@media(min-width:601px){.reader-main.panel-open{padding-right:270px}}

.reader-scroll-mode .reader-content-wrap,
.reader-immersive-mode .reader-content-wrap{
  max-width:var(--reader-width,680px);margin:0 auto;padding:32px 18px 100px
}
.reader-page-mode .reader-content-wrap{
  max-width:var(--reader-width,680px);margin:0 auto;padding:32px 18px 80px
}
@media(max-width:600px){
  .reader-scroll-mode .reader-content-wrap,
  .reader-immersive-mode .reader-content-wrap,
  .reader-page-mode .reader-content-wrap{padding:20px 14px 80px}
}

/* Page mode pages */
.reader-page-mode .page-content{display:none}
.reader-page-mode .page-content.active{display:block}

/* ===== PAGE NAV ===== */
.page-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--reader-toolbar);border-top:1px solid var(--reader-border);
  padding:10px 14px;display:none;align-items:center;justify-content:space-between;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}
@media(min-width:601px){.reader-main.panel-open ~ .page-nav{padding-right:284px}}
.page-nav-btn{
  background:none;border:1px solid var(--reader-border);border-radius:5px;
  color:var(--reader-text);cursor:pointer;padding:8px 16px;font-size:0.82rem;
  transition:all 0.15s;font-family:inherit;-webkit-tap-highlight-color:transparent;
  min-height:38px;
}
.page-nav-btn:hover:not(:disabled){border-color:var(--reader-accent);color:var(--reader-accent)}
.page-nav-btn:disabled{opacity:0.25;cursor:not-allowed}
.page-indicator{font-size:0.78rem;color:var(--reader-meta);text-align:center;flex:1;padding:0 8px}

/* ===== IMMERSIVE ===== */
.reader-immersive-mode .reader-toolbar{opacity:0;pointer-events:none}
.reader-immersive-mode:hover .reader-toolbar,
.reader-immersive-mode.toolbar-peek .reader-toolbar{opacity:1;pointer-events:all}

/* ===== STORY CONTENT ===== */
.story-header{text-align:center;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--reader-border)}
.story-header h1{font-size:clamp(1.4rem,5vw,2rem);font-weight:900;color:var(--reader-text);line-height:1.3;margin-bottom:14px}
.story-meta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:0.76rem;color:var(--reader-meta)}
.story-body{
  font-size:var(--reader-font-size,18px);
  line-height:var(--reader-line-height,2.0);
  font-family:var(--reader-font,'PingFang SC');
  text-align:var(--reader-align,left);
  color:var(--reader-text);
}
.story-body p{margin-bottom:var(--reader-para-spacing,1.5em)}

/* ===== READER NAV BAR (home+history) ===== */
.reader-nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;background:var(--reader-toolbar);border-bottom:1px solid var(--reader-border);
  font-size:0.76rem;transition:transform 0.3s ease;
  height:40px;
}
.reader-nav-bar a{color:var(--reader-meta);text-decoration:none;display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:4px;transition:all 0.15s;white-space:nowrap}
.reader-nav-bar a:hover{color:var(--reader-text);background:rgba(255,255,255,0.05)}
.reader-nav-bar .story-title-mini{color:var(--reader-meta);font-size:0.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;padding:0 8px}

/* ===== VIP GATE ===== */
.vip-blur-overlay{position:relative;margin-top:24px}
.vip-blur-content{filter:blur(5px);user-select:none;pointer-events:none;opacity:0.4}
.vip-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent,var(--reader-bg) 20%);z-index:10}
.vip-gate-box{background:var(--reader-card);border:1px solid rgba(192,57,43,0.3);border-radius:12px;padding:24px 20px;text-align:center;max-width:340px;width:90%;box-shadow:0 12px 50px rgba(0,0,0,0.5)}
.vip-gate-icon{font-size:1.8rem;margin-bottom:9px}
.vip-gate-title{font-size:0.98rem;font-weight:800;color:var(--reader-text);margin-bottom:6px}
.vip-gate-desc{font-size:0.8rem;color:var(--reader-meta);margin-bottom:16px;line-height:1.6}
.vip-gate-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.vip-gate-btn{padding:9px 18px;border-radius:5px;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-block;border:none;font-family:inherit;-webkit-tap-highlight-color:transparent}
.btn-become-vip{background:linear-gradient(135deg,#c0392b,#e74c3c);color:#fff;box-shadow:0 3px 12px rgba(192,57,43,0.35)}
.btn-become-vip:hover{opacity:0.9}
.btn-login-vip{background:rgba(192,57,43,0.1);border:1px solid rgba(192,57,43,0.3)!important;color:#e74c3c}

/* ===== INLINE MODAL (reader page) ===== */
.reader-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:0;opacity:0;pointer-events:none;transition:opacity 0.25s}
@media(min-width:600px){.reader-modal-overlay{align-items:center;padding:20px}}
.reader-modal-overlay.active{opacity:1;pointer-events:all}
.reader-modal-box{background:#161616;border:1px solid #2a2a2a;border-radius:16px 16px 0 0;width:100%;max-width:100%;overflow:hidden;transform:translateY(30px);transition:transform 0.3s;box-shadow:0 -8px 40px rgba(0,0,0,0.7);max-height:90vh;overflow-y:auto}
@media(min-width:600px){.reader-modal-box{border-radius:14px;max-width:460px;transform:scale(0.96)}}
.reader-modal-overlay.active .reader-modal-box{transform:translateY(0)}
@media(min-width:600px){.reader-modal-overlay.active .reader-modal-box{transform:scale(1)}}
.reader-modal-handle{width:34px;height:4px;background:#333;border-radius:2px;margin:9px auto 0}
.reader-modal-header{padding:14px 18px 12px;border-bottom:1px solid #252525;display:flex;justify-content:space-between;align-items:center}
.reader-modal-title{font-size:0.95rem;font-weight:800;color:#fff}
.reader-modal-close{background:none;border:none;color:#555;cursor:pointer;font-size:1.2rem;padding:0;line-height:1}
.reader-modal-close:hover{color:#fff}
.reader-modal-body{padding:18px}
.vip-plans-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}
@media(max-width:380px){.vip-plans-modal{grid-template-columns:repeat(2,1fr)}}
.vip-plan-card{border:1px solid #2a2a2a;border-radius:7px;padding:11px 7px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;-webkit-tap-highlight-color:transparent}
.vip-plan-card.selected{border-color:#c8a040;background:rgba(200,160,64,0.08)}
.pop-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#c0392b;color:#fff;font-size:0.56rem;font-weight:700;padding:2px 6px;border-radius:7px;white-space:nowrap}
.plan-card-name{font-size:0.65rem;color:#888;margin-bottom:4px}
.plan-card-price{font-size:1.2rem;font-weight:900;color:#c8a040;line-height:1}
.plan-card-price sup{font-size:0.62rem;font-weight:400;vertical-align:super}
.vip-payment-area{background:#0d0d0d;border:1px solid #1e1e1e;border-radius:8px;padding:18px 14px;text-align:center}
.vip-qr-img{max-width:150px;max-height:150px;border-radius:5px;margin:0 auto 10px;display:block;background:#fff;padding:5px}
.vip-pay-amount{font-size:1.4rem;font-weight:900;color:#c8a040;margin-bottom:3px}
.vip-pay-note{font-size:0.78rem;color:#888;margin-bottom:10px}
.vip-contact-info{background:rgba(192,57,43,0.06);border:1px solid rgba(192,57,43,0.14);border-radius:5px;padding:10px;font-size:0.78rem;color:#aaa;line-height:1.7;text-align:left}

/* ===== TTS (文字转语音) ===== */
.tts-voice-btns{display:flex;gap:6px}
.tts-voice-btn{
  flex:1;padding:8px 6px;border:1px solid var(--reader-border);border-radius:5px;
  cursor:pointer;font-size:0.78rem;background:none;color:var(--reader-text);
  transition:all 0.15s;text-align:center;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.tts-voice-btn:hover,.tts-voice-btn.active{
  border-color:var(--reader-accent);color:var(--reader-accent);
  background:rgba(192,57,43,0.08);
}
.tts-ctrl-btn{
  padding:5px 12px;border:1px solid var(--reader-border);border-radius:5px;
  cursor:pointer;font-size:0.75rem;background:none;color:var(--reader-text);
  transition:all 0.15s;font-family:inherit;-webkit-tap-highlight-color:transparent;
}
.tts-ctrl-btn:hover{border-color:var(--reader-accent);color:var(--reader-accent)}
/* Toolbar TTS button - glows red when reading */
#btnTTS.reading{
  background:rgba(192,57,43,0.2)!important;
  border-color:rgba(192,57,43,0.6)!important;
  color:#e74c3c!important;
  animation:ttsPulse 2s ease-in-out infinite;
}
#btnTTS.paused{
  background:rgba(200,160,64,0.15)!important;
  border-color:rgba(200,160,64,0.5)!important;
  color:#c8a040!important;
}
@keyframes ttsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0.4)}
  50%{box-shadow:0 0 0 4px rgba(192,57,43,0)}
}
/* Highlighted sentence during reading */
.tts-highlight{
  background:rgba(192,57,43,0.15);
  border-radius:3px;
  transition:background 0.3s;
}