/* 轻读 · 宗升科技 —— 暖纸阅读风格，三套阅读主题 */
:root{
  --paper:#f6f3ec; --card:#fffdf8; --ink:#2b2825; --ink-soft:#6f675c;
  --line:#e7e0d2; --accent:#8a3324; --accent-soft:#b15a48;
  --radius:16px; --maxw:760px;
  --font-scale:1;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
body.theme-sepia{ --paper:#f1e7d4; --card:#f8f0df; --ink:#3a3225; --ink-soft:#7c6f57; --line:#e3d6bd; }
body.theme-dark{ --paper:#171513; --card:#201d1a; --ink:#e9e2d6; --ink-soft:#a59c8d; --line:#332e29; --accent:#d98266; --accent-soft:#e0967e; }

body.font-1{ --font-scale:.9 } body.font-2{ --font-scale:1 }
body.font-3{ --font-scale:1.12 } body.font-4{ --font-scale:1.26 }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{ margin:0; padding:0 }
body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }

/* 顶栏 */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-top) + 12px) 18px 12px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px }
.brand .mark{
  font-family:"Noto Serif CJK SC",Georgia,"Songti SC",serif; font-weight:700;
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:#fdf6ec; font-size:18px;
  background:linear-gradient(145deg,#a23a27,#7a2a1d);
  box-shadow:0 2px 6px rgba(122,42,29,.35);
}
.brand .word{ font-weight:600; letter-spacing:.5px }
.tools{ display:flex; gap:6px }
.ghost{
  min-width:38px; height:34px; padding:0 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-size:14px; display:inline-flex; align-items:center; justify-content:center;
}
.ghost:active{ transform:scale(.96) }
#fontBtn sup{ font-size:.7em }

/* 视图容器 */
.view{ max-width:var(--maxw); margin:0 auto; padding:0 18px calc(var(--safe-bottom) + 40px) }
.hidden{ display:none !important }

/* 首页 */
.home{ min-height:calc(100vh - 60px); display:flex; flex-direction:column }
.hero{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:36px 2px }
.title{
  font-family:"Noto Serif CJK SC",Georgia,"Songti SC",serif;
  font-size:30px; line-height:1.25; margin:0 0 12px; font-weight:700;
}
.sub{ color:var(--ink-soft); margin:0 0 30px; font-size:15px; max-width:34em }

.drop{
  border:1.5px dashed var(--line); border-radius:var(--radius);
  background:var(--card); padding:34px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:border-color .2s,background .2s;
}
.drop.drag{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)) }
.drop-ico{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
}
.primary{
  background:linear-gradient(145deg,#a23a27,#7a2a1d); color:#fdf6ec;
  font-size:16px; font-weight:600; padding:13px 30px; border-radius:12px;
  box-shadow:0 4px 14px rgba(122,42,29,.3);
}
.primary:active{ transform:translateY(1px) }
.primary.wide{ width:100% }
.drop-hint{ color:var(--ink-soft); font-size:13px; margin:0 }

.row2{ display:flex; gap:12px; margin-top:18px }
.ghost-line{
  flex:1; border:1px solid var(--line); background:var(--card);
  border-radius:11px; padding:11px 0; color:var(--ink); font-size:14px;
}
.ghost-line:active{ transform:scale(.98) }

.colo{ color:var(--ink-soft); font-size:12px; text-align:center; line-height:1.7; padding:16px 0 0 }

/* 阅读 / 列表通用顶条 */
.rbar{
  position:sticky; top:60px; z-index:10;
  display:flex; align-items:center; gap:10px; padding:10px 0;
  background:var(--paper); border-bottom:1px solid var(--line); margin-bottom:18px;
}
.back{ flex:0 0 auto }
.docname{
  flex:1; text-align:center; font-size:14px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rbar-spacer{ width:64px }

/* 阅读内容 */
.content{
  font-size:calc(17px * var(--font-scale)); line-height:1.78;
  font-family:"Noto Serif CJK SC",Georgia,"Songti SC",serif;
  word-wrap:break-word; padding-bottom:30px;
}
.content h1,.content h2,.content h3,.content h4{
  font-weight:700; line-height:1.35; margin:1.5em 0 .6em;
}
.content h1{ font-size:1.5em } .content h2{ font-size:1.3em } .content h3{ font-size:1.12em }
.content p{ margin:.85em 0 }
.content a{ color:var(--accent); word-break:break-all }
.content code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88em;
  background:color-mix(in srgb,var(--ink) 7%,transparent); padding:.1em .35em; border-radius:5px;
}
.content pre{
  background:color-mix(in srgb,var(--ink) 6%,var(--card)); border:1px solid var(--line);
  border-radius:10px; padding:14px; overflow-x:auto; line-height:1.55;
}
.content pre code{ background:none; padding:0 }
.content blockquote{
  margin:1em 0; padding:.4em 1em; border-left:3px solid var(--accent-soft);
  color:var(--ink-soft); background:color-mix(in srgb,var(--accent) 5%,transparent); border-radius:0 8px 8px 0;
}
.content ul,.content ol{ padding-left:1.4em } .content li{ margin:.3em 0 }
.content img{ max-width:100%; border-radius:8px }
.content hr{ border:0; border-top:1px solid var(--line); margin:1.8em 0 }
.content table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; margin:1em 0 }
.content th,.content td{ border:1px solid var(--line); padding:7px 11px; text-align:left }
.content th{ background:color-mix(in srgb,var(--ink) 5%,transparent) }
.content :first-child{ margin-top:0 }

.htmlframe{ width:100%; min-height:70vh; border:1px solid var(--line); border-radius:10px; background:#fff }
.htmlnote{ color:var(--ink-soft); font-size:12px; text-align:center; margin:10px 0 0 }

/* 压缩包列表 */
.zipsub{ color:var(--ink-soft); font-size:13px; margin:0 0 12px }
.ziprows{ list-style:none; margin:0; padding:0 }
.ziprow{
  display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:9px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.ziprow:active{ transform:scale(.99) }
.ziprow.disabled{ opacity:.5; cursor:default }
.zbadge{
  flex:0 0 auto; width:42px; height:42px; border-radius:9px; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.5px; color:#fff;
}
.zbadge.doc{ background:#6a7f8a } .zbadge.image{ background:#7f9a6a }
.zbadge.office{ background:#b08a4a } .zbadge.other{ background:#9a948c }
.zmeta{ min-width:0 } .zname{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.zpath{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* 粘贴面板 */
.overlay{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.35); display:flex; align-items:flex-end; justify-content:center }
.sheet{
  width:100%; max-width:var(--maxw); background:var(--card);
  border-radius:18px 18px 0 0; padding:18px 18px calc(var(--safe-bottom) + 22px);
  box-shadow:0 -8px 30px rgba(0,0,0,.18); animation:rise .22s ease;
}
@keyframes rise{ from{ transform:translateY(18px); opacity:.6 } to{ transform:none; opacity:1 } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.sheet-title{ font-weight:600 }
.sheet-close{ font-size:18px; color:var(--ink-soft); width:30px; height:30px }
.seg{ display:flex; gap:6px; background:color-mix(in srgb,var(--ink) 5%,transparent); border-radius:10px; padding:4px; margin-bottom:14px }
.seg-btn{ flex:1; padding:8px 0; border-radius:8px; font-size:13px; color:var(--ink-soft) }
.seg-btn.on{ background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08) }
.paste-area{
  width:100%; min-height:180px; resize:vertical; border:1px solid var(--line); border-radius:12px;
  padding:12px; font-size:14px; font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--paper); color:var(--ink); margin-bottom:14px;
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--safe-bottom) + 30px); transform:translateX(-50%);
  background:rgba(20,18,16,.92); color:#fdf6ec; padding:10px 18px; border-radius:22px;
  font-size:13px; z-index:60; max-width:80vw; text-align:center;
}

@media (min-width:900px){
  .title{ font-size:36px } .view{ padding-top:6px }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }