:root { --paper:#fffaf4; --ink:#30251f; --accent:#9a4161; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#eadfd4; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 15% 5%,rgba(255,255,255,.72),transparent 28rem),#eadfd4; font-family:ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
.reader-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:10px max(16px,env(safe-area-inset-left)); background:rgba(255,250,244,.92); border-bottom:1px solid rgba(92,61,42,.12); backdrop-filter:blur(14px); }
.reader-header p,.reader-header h1 { margin:0; }
.reader-header p { font-size:11px; color:#8a6c5d; letter-spacing:.08em; }
.reader-header h1 { margin-top:2px; font-size:16px; line-height:1.2; }
.reader-header span { min-width:58px; padding:7px 10px; border-radius:999px; color:#fff; background:var(--accent); text-align:center; font-size:12px; font-weight:700; box-shadow:0 5px 18px rgba(99,42,64,.18); }
.header-actions { display:flex; align-items:center; gap:9px; }
.download-button,.submit-button { border:0; border-radius:999px; color:#fff; background:var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.download-button { display:flex; align-items:center; gap:6px; min-height:44px; padding:10px 16px; font-size:14px; white-space:nowrap; box-shadow:0 6px 20px rgba(99,42,64,.22); }
.download-button b { font-size:20px; line-height:1; }
.support-link { display:grid; gap:1px; min-height:44px; padding:7px 13px; border:1px solid rgba(154,65,97,.22); border-radius:14px; color:#63304a; background:#fff7f2; text-decoration:none; white-space:nowrap; }
.support-link strong { font-size:13px; line-height:1.25; }
.support-link small { color:#846b61; font-size:10px; line-height:1.25; }
.download-dialog { width:min(calc(100% - 28px),480px); padding:0; border:0; border-radius:20px; color:var(--ink); background:var(--paper); box-shadow:0 24px 80px rgba(44,27,20,.35); }
.download-dialog::backdrop { background:rgba(40,28,23,.58); backdrop-filter:blur(3px); }
.download-dialog form { display:grid; gap:16px; padding:22px; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dialog-heading p,.dialog-heading h2 { margin:0; }
.dialog-heading p { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; }
.dialog-heading h2 { margin-top:3px; font-size:22px; }
.close-button { width:34px; height:34px; border:0; border-radius:50%; background:#efe4dc; color:#765e52; font-size:24px; line-height:1; cursor:pointer; }
.download-dialog label:not(.consent-row) { display:grid; gap:7px; font-size:14px; font-weight:700; }
.download-dialog b { color:var(--accent); font-size:11px; }
.download-dialog em { color:#8b7568; font-size:11px; font-style:normal; font-weight:400; }
.download-dialog input:not([type="checkbox"]),.download-dialog select { width:100%; min-height:46px; padding:10px 12px; border:1px solid #d9c9bd; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.download-dialog input:focus,.download-dialog select:focus { outline:2px solid rgba(154,65,97,.24); border-color:var(--accent); }
.location-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.location-fields label { min-width:0; }
.consent-row { display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.6; }
.consent-row input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); flex:0 0 auto; }
.privacy-note,.form-status { margin:0; color:#806b60; font-size:12px; line-height:1.6; }
.form-status { min-height:19px; color:var(--accent); font-weight:700; }
.pdf-fallback { display:none; padding:10px 12px; border-radius:10px; color:var(--accent); background:#f5e8ee; text-align:center; font-size:13px; font-weight:700; text-decoration:none; }
.pdf-fallback.is-visible { display:block; }
.submit-button { min-height:48px; font-size:15px; }
.submit-button:disabled { opacity:.6; cursor:wait; }
.book { width:min(100%,768px); margin:0 auto; padding:12px 10px 40px; }
.page { margin:0 0 12px; overflow:hidden; border-radius:8px; background:var(--paper); box-shadow:0 8px 28px rgba(66,42,29,.14); }
.page img { display:block; width:100%; height:auto; }
footer { padding:8px 20px calc(34px + env(safe-area-inset-bottom)); text-align:center; color:#7d6155; font-size:13px; }
@media (max-width:680px) { .reader-header{align-items:flex-start;gap:8px;padding-block:8px}.reader-header>div:first-child{display:none}.reader-header span{display:none}.header-actions{width:100%;justify-content:space-between}.support-link{min-width:0;flex:1;padding-inline:10px}.support-link strong{font-size:12px}.support-link small{overflow:hidden;text-overflow:ellipsis}.download-button{min-height:48px;padding-inline:15px;font-size:14px}.download-dialog form{padding:19px}.location-fields{grid-template-columns:1fr} }
@media (min-width:820px) { .reader-header{padding-inline:28px}.book{padding-top:22px}.page{margin-bottom:22px;border-radius:12px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }