:root{
  --bg:#fbfaf7; --ink:#21262e; --muted:#6b7280; --line:#e7e3da;
  --card:#ffffff; --accent:#b23a2e; --accent2:#2f7d6b; --accent-soft:#fbeee9;
  --shadow:0 1px 2px rgba(33,38,46,.06),0 8px 24px rgba(33,38,46,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:18px;color:var(--ink);display:flex;align-items:center;gap:6px}
.brand span{color:var(--accent)}
.nav{display:flex;gap:18px;font-size:14px}
.nav a{color:var(--muted);font-weight:600}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav-active{color:var(--accent)!important}

/* hero */
.hero{padding:56px 0 28px;text-align:center}
.hero h1{font-size:34px;line-height:1.25;margin:0 0 12px;letter-spacing:-.5px}
.hero-sub{max-width:680px;margin:0 auto 22px;color:var(--muted);font-size:16px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:14px;color:var(--muted)}
.btn{display:inline-block;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px}
.btn:hover{text-decoration:none;border-color:#cfc9bd}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:#9c3025}

/* sections */
.section{padding:34px 0}
.section h2{font-size:24px;margin:0 0 6px;letter-spacing:-.3px}
.section-sub{color:var(--muted);margin:0 0 20px}
.crumb{color:var(--muted);font-size:13px;margin:0 0 10px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}

/* genre grid */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.genre-card{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease}
.genre-card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.genre-icon{font-size:26px}
.genre-name{font-weight:800;font-size:16px;color:var(--ink)}
.genre-cn{color:var(--accent);font-weight:700;font-size:13px}
.genre-count{color:var(--muted);font-size:12px;margin-top:2px}
.genre-desc{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}

/* book cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent2);text-decoration:none}
.card-top{display:flex;align-items:center;gap:8px}
.card-icon{font-size:20px}
.card-cn{color:var(--accent);font-weight:700;font-size:13px}

/* shelf tabs */
.shelf{padding-top:30px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.tab{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:all .15s ease}
.tab:hover{border-color:var(--accent);text-decoration:none}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab.tab-new.active{background:#b23a2e;border-color:#b23a2e}
.tab.tab-beginner.active{background:#2e8b57;border-color:#2e8b57}
.tab-panel{display:none;margin-top:18px}
.tab-panel.active{display:block;animation:tabfade .2s ease}
@keyframes tabfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* "still updating" badge on cards */
.badge-new{margin-left:auto;font-size:11px;font-weight:800;color:#b23a2e;background:#fbeee9;border:1px solid #f3d9d2;padding:2px 9px;border-radius:999px;white-space:nowrap}
.card-title{font-size:17px;margin:2px 0 0;color:var(--ink);line-height:1.3}
.card-author{font-size:13px;color:var(--muted);margin:0}
.card-hook{font-size:14px;color:var(--ink);margin:6px 0 0;flex:1}
.card-meta{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.stat{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink)}
.stat-l{color:var(--muted);margin-right:2px}
.stat .dots{gap:3px}
.stat .dot{width:9px;height:9px}
.stat-time{font-weight:600;color:var(--accent2)}
.stat-readers{font-size:11.5px;color:var(--muted);opacity:.8}
.book-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 4px}
.book-stats .stat{font-size:13px}
.book-stats .stat-readers{font-size:12px;opacity:.85}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

/* meters */
.meters{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.meter{display:flex;align-items:center;gap:10px;font-size:13px}
.meter-l{width:150px;color:var(--muted)}
.dots{display:flex;gap:4px}
.dot{width:11px;height:11px;border-radius:50%;background:#e3ded3;display:inline-block}
.dot.on{background:var(--accent2)}

/* chips / tags */
.chip{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);background:#fff}
.chip:hover{border-color:var(--accent);text-decoration:none}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}

/* filter */
.filterbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.search{flex:1;max-width:360px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fff}
.search:focus{outline:none;border-color:var(--accent)}
.count{color:var(--muted);font-size:13px}

/* book page */
.book-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.book-head h1{font-size:30px;margin:0;letter-spacing:-.5px}
.cn{color:var(--accent);font-weight:700;font-size:15px}
.book-cn{color:var(--muted);margin:4px 0 0;font-size:14px}
.book-author{color:var(--muted);margin:2px 0 0;font-size:14px}
.book-badges{display:flex;gap:8px}
.badge{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;background:#fff;color:var(--muted)}
.badge-ok{color:var(--accent2);border-color:var(--accent2)}
.book-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.book-hook{font-size:18px;font-weight:600;margin:14px 0}
.book-summary{font-size:16px;color:#374151}
.official-row{margin:18px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.official-label{font-weight:700;font-size:14px}
.official{display:inline-block;padding:8px 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-weight:700;font-size:13px}
.official:hover{background:var(--accent);color:#fff;text-decoration:none}

/* glossary */
.gl-group{margin-top:26px;font-size:19px}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:12px}
.gl-item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.gl-item h4{margin:0 0 6px;font-size:15px}
.gl-item .cn{font-size:13px;margin-left:6px}
.gl-item p{margin:0;font-size:14px;color:#374151}

/* premium */
.premium{margin-top:28px;border:1px dashed var(--accent);border-radius:var(--radius);padding:20px;background:var(--accent-soft)}
.premium h2{margin-top:0;font-size:20px}
.premium-tag{font-size:11px;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.premium-gate{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:10px}
.premium-content{background:#fff;border:1px solid var(--accent2);border-radius:12px;padding:16px;margin-top:10px}
body.is-member .premium-gate{display:none}
body.is-member .premium-content{display:block!important}

/* membership */
.plan{max-width:460px;border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--card);box-shadow:var(--shadow);margin-bottom:22px}
.plan-head h2{margin:0 0 4px}
.price{font-size:22px;font-weight:800;margin:0 0 14px}
.price span{font-size:14px;color:var(--muted);font-weight:600}
.plan-list{margin:0 0 18px;padding-left:18px;font-size:15px;color:#374151}
.plan-list li{margin:6px 0}
#subscribe{cursor:pointer}
#member-state{margin-top:12px;font-size:13px}

/* auth (login) block — Supabase magic-link in production */
.auth{margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;box-shadow:var(--shadow)}
.auth h2{margin-top:0;font-size:19px}
.auth-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:center}
.auth #email{flex:1;min-width:220px;max-width:360px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fff}
.auth #email:focus{outline:none;border-color:var(--accent)}
#logout{margin-top:10px}
#welcome{border:1px solid var(--accent2);background:#eaf6f1;color:#0f6e56;border-radius:12px;padding:12px;margin-bottom:18px;font-size:14px;font-weight:600}

/* footer */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0;font-size:13px;color:var(--muted);background:#fff}
.site-footer p{margin:0 0 8px;max-width:760px}

/* language switcher */
.lang-switcher{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.lang-btn:hover{border-color:#cfc9bd;color:var(--ink)}
.lang-btn .caret{font-size:10px}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none;z-index:30}
.lang-menu.open{display:block}
.lang-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:600}
.lang-menu a:hover{background:var(--accent-soft);text-decoration:none}
.lang-menu a.cur{color:var(--accent);background:var(--accent-soft)}

@media (max-width:640px){
  .hero h1{font-size:26px}
  .nav{gap:12px;font-size:13px}
  .book-head h1{font-size:24px}
  .meter-l{width:120px}
  .header-inner{flex-wrap:wrap;height:auto;padding:8px 0;gap:8px}
  .lang-switcher{margin-left:auto}
}