/* ==================== Base / Typography ==================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --ink:#0d2449;
  --muted:#7c879d;
  --line:#cfd6e6;
  --brand:#4a88ff;
  --brand-weak:#e7f0ff;
  --card:#ffffffef;
  --radius:16px;
  --shadow:0 12px 30px rgba(13, 36, 73, .12);
  --shadow-strong:0 24px 60px rgba(74, 136, 255, .3);
}

body{
  font: 16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 480px at 50% -20%, rgba(74,136,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,252,255,1) 60%, rgba(245,248,255,1) 100%);
  background-attachment: fixed, fixed;
  background-size: cover, cover;
}

/* ==================== Topbar ==================== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  gap:12px;
  padding:8px 12px;
  background:var(--card);
  backdrop-filter:saturate(1.8) blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-weight:600;
  color:#9a5b6c;
  letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
  font-size:14px;
}

/* ==================== Hero / Common ==================== */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.hero-container{min-height:calc(100vh - 56px); display:grid; place-items:center}
.hero-main{
  text-align:center;
  padding:64px 32px;
  border-radius:28px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.8) blur(24px);
  max-width: 600px;
  width: 100%;
}
.hero-title{
  font-size:52px;
  line-height:1.12; margin:0 0 10px; letter-spacing:-.03em;
  font-weight:900;
}
.hero-sub{ margin:0 0 32px; color:var(--muted); font-size:18px; }
.hero-search{ margin-top:8px }
.hero-tip{ margin:20px 0 0; color:var(--muted) }

/* ==================== Inputs & Buttons ==================== */
.input{
  width:280px; max-width:70vw;
  border:1px solid #d8e2ee; border-radius:12px;
  padding:14px 16px;
  outline:none; transition:border .3s, box-shadow .3s, background .3s;
  background:#fff; color:var(--ink); font-size:16px;
}
.input:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(74,136,255,.25)}
.input.xl{width:100%; max-width: 320px; padding:18px 22px; font-size:19px; text-align: center;}

.btn{
  border:0; padding:14px 18px; border-radius:12px;
  cursor:pointer;
  background:#f3f6fa; color:var(--ink); font-weight:600;
  transition: all .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover{
  background:#e7f0ff;
  box-shadow: 0 4px 10px rgba(13, 36, 73, .08);
  transform: translateY(-1px);
}
.btn:active{
  transform: scale(0.96);
  background: #cce0ff;
}
.btn.primary{
  background:var(--brand);
  color:#fff;
  box-shadow: 0 6px 16px rgba(74,136,255,.35);
}
.btn.primary:hover{
  background:#3b6fd9;
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
}
.btn.xl{padding:18px 24px; font-size:19px; width: 100%; max-width: 320px;}

/* 新增：大纲风格按钮（用于阅读模式入口） */
.btn.outline {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
  box-shadow: none;
}
.btn.outline:hover {
  background: var(--brand-weak);
  border-color: #3b6fd9;
  color: #3b6fd9;
}

/* 新增：首页按钮组布局 */
.action-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.mode-links {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.mode-links .btn {
  flex: 1;
  font-size: 15px;
  white-space: nowrap;
}

/* ==================== Player Page Specifics ==================== */
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.figure{margin:0}
.img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow)}
.cap{font-size:14px; color:var(--ink); margin-top:8px; font-weight:500;}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.title{margin:0; font-weight:800; letter-spacing:-.01em;}

.nav-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.audios{display:grid; grid-template-columns:1fr; gap:16px; margin-top:20px}
.audio-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 20px;
  background:var(--card);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.8) blur(24px);
}
.audio-head{ margin-bottom:8px; }

.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:999px; font-size:0.9em;
  color:#fff; font-weight:600; margin-bottom:4px;
}
.tag.explain{ background:#2f80ff; }
.tag.follow{  background:#27ae60; }
.tag.read{    background:#9b51e0; }

.speed-box {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; margin-bottom: 8px;
  font-size: 0.95em; color: #333; flex-wrap: wrap;
}
.speed-icon { font-size: 1.2em; }
.speed-label { font-weight: 500; }
.rate {
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid #ccc; background: #fff; cursor: pointer;
}

/* ==================== Reader Page Specifics (Flipbook) ==================== */
/* 隐藏滚动条但允许滚动 */
body.reader-mode {
  background: #333; /* 阅读模式深色背景 */
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reader-header {
  height: 50px;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.reader-back {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}
.reader-title { font-size: 16px; font-weight: normal; opacity: 0.8; }

.flip-book-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

/* 翻书核心容器 */
.flip-book {
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  background-color: #fff; /* 纸张背景 */
}

/* 书页 */
.page {
  background-color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 封面和封底 */
.page.cover { background-color: #e3e8ee; color: #333; }
.page canvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持比例 */
}

/* 加载动画 */
.loader {
  position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  color: #fff; text-align: center;
}
.spinner {
  width: 40px; height: 40px; border: 4px solid #fff;
  border-top-color: transparent; border-radius: 50%;
  animation: spin 1s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== Immersive ==================== */
body.immersive{
  background:
    radial-gradient(1400px 520px at 50% -25%, rgba(74,136,255,.20), transparent 65%),
    linear-gradient(180deg, #f0f4ff 0%, #f3f6ff 50%, #f6f9ff 100%);
  background-attachment: fixed, fixed;
  background-size: cover, cover;
}
body.immersive .hero-main, body.immersive .audio-card{ box-shadow:var(--shadow-strong) }
body.immersive .topbar{
  background:rgba(255, 255, 255, 0.6);
  backdrop-filter:saturate(1.8) blur(20px);
  border-bottom-color:rgba(74,136,255,.2);
}

/* Responsive */
@media (max-width: 840px){
  .grid.two{grid-template-columns:1fr}
  .brand{font-size:13px}
  .hero-title{font-size:38px}
  .input{width:100%}
  .input.xl{width:100%}
}
@media (max-width: 500px){
  .hero-title{font-size:32px}
  .hero-main{padding:40px 16px}
  .mode-links { flex-direction: column; } /* 手机上按钮竖排 */
}