/* ============================================================
   隅间书库 · 设计令牌 v2「年轻 · 清爽 · 内容 App」
   白/极浅灰中性底 + 蓝紫主色；UI 无衬线，正文衬线
   ============================================================ */

:root {
  /* —— 颜色 · 浅色模式 —— */
  --paper:        #F5F6FA;   /* 页面底 · 极浅灰 */
  --card:         #FFFFFF;   /* 卡片底 · 纯白 */
  --card-deep:    #F3F4F8;   /* 次级底 */
  --ink:          #1A1C22;   /* 主文字 */
  --ink-soft:     #5C6270;   /* 次级文字 */
  --ink-faint:    #A0A5B4;   /* 弱文字 / meta */
  --line:         #EEF0F4;   /* 分隔线 */
  --line-strong:  #E2E4EC;

  --brand:        #5B5CFF;   /* 蓝紫 · 主色 */
  --brand-deep:   #4546E8;
  --brand-wash:   #EFEFFF;   /* 主色浅底 */
  --brand-ink:    #3E3FD6;   /* 主色底上文字/深主色文字 */

  --accent:       #FF7A45;   /* 活力橙 · 连载中/新章节小标记 */
  --accent-wash:  #FFF1EA;

  --done:         #7C8494;   /* 已完结 · 中性灰 */
  --done-wash:    #F0F1F5;

  /* —— 阅读正文四主题 —— */
  --read-paper:  #FFFFFF;    /* 白 */
  --read-sepia:  #F5EFDC;    /* 护眼米 */
  --read-green:  #CBE6CD;    /* 护眼绿 */
  --read-night:  #16171B;    /* 夜间 */
  --read-ink:    #26282E;
  --read-ink-soft: #61666F;
  --read-line:   #EDEEF2;
  --read-card:   #FFFFFF;

  /* —— 字体 —— */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;

  /* —— 尺寸 —— */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --shadow-card: 0 1px 2px rgba(26,28,34,.03), 0 4px 16px rgba(26,28,34,.05);
  --shadow-float: 0 6px 24px rgba(26,28,34,.1);
  --shadow-drawer: -8px 0 40px rgba(15,16,20,.14);

  --topbar-h: 56px;
}

/* 深色模式 · 现代黑灰 */
html[data-theme="dark"] {
  --paper:        #0F1014;
  --card:         #17181E;
  --card-deep:    #1E1F26;
  --ink:          #E8EAF0;
  --ink-soft:     #9BA1AF;
  --ink-faint:    #666C7A;
  --line:         #23242C;
  --line-strong:  #2E3039;

  --brand:        #7C8CFF;
  --brand-deep:   #95A0FF;
  --brand-wash:   #21222E;
  --brand-ink:    #C3C8FF;

  --accent:       #FF8F5E;
  --accent-wash:  #2A211C;

  --done:         #7C8494;
  --done-wash:    #1F2027;

  --read-ink:     #D8DBE4;
  --read-ink-soft: #9BA1AF;
  --read-paper:   #16171B;
  --read-sepia:   #1D1B14;
  --read-green:   #151B16;
  --read-night:   #0E0F12;
  --read-line:    #2A2B33;
  --read-card:    #1B1C22;

  --shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.3);
  --shadow-float: 0 6px 24px rgba(0,0,0,.4);
  --shadow-drawer: -8px 0 40px rgba(0,0,0,.5);
}

/* ============================================================
   基础
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  transition: background .25s ease, color .25s ease;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; color: inherit; }
img, svg { display: block; }

::selection { background: var(--brand-wash); color: var(--brand-ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   通用组件
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px;
  font-size: 14px; font-weight: 500;
  padding: 10px 22px;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 14px rgba(91,92,255,.28);
}
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--card);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: 14px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn[disabled]:hover { transform: none; }

/* 标签 chip · 小圆角矩形，利落 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  background: var(--card-deep);
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip-tag { color: var(--ink-faint); }
.chip-ongoing { color: var(--accent); background: var(--accent-wash); }
.chip-ongoing::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.chip-done { color: var(--done); background: var(--done-wash); }

/* 进度条 */
.progress {
  height: 4px; border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.progress > i {
  display: block; height: 100%;
  background: var(--brand);
  border-radius: 2px;
  transition: width .3s ease;
}

/* 顶部导航 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(16px, 4vw, 40px);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17.5px; font-weight: 700; letter-spacing: .01em;
}
.brand svg { flex: none; }
.brand small {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; color: var(--ink-faint);
  margin-left: 2px; transform: translateY(2px);
}

/* 图标按钮 */
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: all .18s ease;
  flex: none;
}
.icon-btn:hover { background: var(--brand-wash); color: var(--brand); }
.icon-btn svg { width: 19px; height: 19px; }

/* 账号入口与登录窗口：与阅读产品共用同一套轻量卡片语言。 */
.account-slot { flex: none; }
.account-trigger { height: 36px; max-width: 160px; padding: 0 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; font-weight: 600; transition: background .18s ease, color .18s ease; overflow: hidden; }
.account-trigger svg { width: 17px; height: 17px; flex: none; }
.account-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger:hover, .account-trigger.signed-in { background: var(--brand-wash); color: var(--brand); }
.auth-mask { position: fixed; z-index: 90; inset: 0; opacity: 0; pointer-events: none; background: rgba(18,20,28,.38); backdrop-filter: blur(3px); transition: opacity .2s ease; }
.auth-mask.show { opacity: 1; pointer-events: auto; }
.auth-dialog { position: fixed; z-index: 91; left: 50%; top: 50%; width: min(400px, calc(100vw - 32px)); padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow-float); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.auth-dialog.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.auth-close { position: absolute; top: 13px; right: 15px; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-faint); font-size: 25px; line-height: 1; }
.auth-close:hover { background: var(--card-deep); color: var(--ink); }
.auth-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--brand); background: var(--brand-wash); }
.auth-symbol svg { width: 23px; height: 23px; }
.auth-dialog h2 { margin-top: 18px; font-size: 22px; letter-spacing: -.02em; }
.auth-lead { margin-top: 5px; color: var(--ink-soft); font-size: 13px; }
.auth-dialog form { margin-top: 22px; display: grid; gap: 14px; }
.auth-name-row { display: grid; gap: 6px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.auth-name-row input { height: 42px; width: 100%; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--card); color: var(--ink); font-size: 16px; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-name-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.auth-register-only { display: none; }
.auth-dialog.registering .auth-register-only { display: grid; }
.auth-error { min-height: 18px; color: #D64D45; font-size: 12.5px; line-height: 1.45; }
.auth-submit { width: 100%; min-height: 44px; }
.auth-switch { margin-top: 18px; color: var(--ink-soft); font-size: 13px; text-align: center; }
.auth-switch button { margin-left: 4px; color: var(--brand); font-weight: 700; }
body.auth-open { overflow: hidden; }

/* 布局工具 */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

@media (max-width: 720px) {
  .account-trigger { width: 34px; padding: 0; justify-content: center; }
  .account-trigger span { display: none; }
  .auth-dialog { padding: 26px 22px; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeUp .35s ease both; }