/* ============================================================
   定制书单 · 多风格皮肤系统
   —— 功能 / DOM 完全不变，仅换「背景 + 配色」，一键切风格
   —— 目的：同一产品出多套外观，避开小红书同模板风控
   —— 全部颜色走 CSS 变量；新增一套风格 = 复制一个 [data-theme] 块
   ============================================================ */

/* ---------- 公共（不随主题变；深色主题会按需覆盖） ---------- */
:root{
  --radius:13px;
  --shadow:0 2px 14px rgba(40,55,80,.08);
  --on-brand:#ffffff;        /* 强调色按钮 / 选中 chip 上的文字 */
  --chip-bg:#ffffff;         /* chip、输入框、幽灵按钮底色 */
  --star-grad:linear-gradient(180deg,#fffdf6,#ffffff);
  --callout-line:#c9d6e3;
  --switcher-bg:rgba(255,255,255,.82);
  --bg-tex:none;             /* 背景叠加纹理层（国风等用） */
  --err:#d8504c;
}

/* 1) 📘 青墨学院（默认 / 原版观感） */
:root, [data-theme="ink"]{
  --bg:#f3f6fb; --card:#fff; --ink:#26303c; --soft:#7c8896; --line:#e4e9ef;
  --brand:#2f6fa6; --brand-deep:#215585; --brand-soft:#e9f1f9;
  --gold:#bf8a2e; --gold-bg:#fbf3df; --gold-line:#ecd9a6;
  --src:#3a7ca5; --src-bg:#e8f1f7; --tag-bg:#eef2f7;
  --wm:rgba(47,111,166,.20); --export-bg:#f3f6fb;
}

/* 2) 🧡 暖阳橙 */
[data-theme="warm"]{
  --bg:radial-gradient(circle at 50% -8%, #fff3ea, #f7f5f2 58%);
  --card:#fff; --ink:#2e2a25; --soft:#9b938a; --line:#ece9e4;
  --brand:#ec7a45; --brand-deep:#d8642f; --brand-soft:#fff0e8;
  --gold:#c08a2c; --gold-bg:#fbf3df; --gold-line:#ecdcae;
  --src:#4f9e76; --src-bg:#edf6f1; --tag-bg:#f1efeb;
  --wm:rgba(236,122,69,.20); --export-bg:#f7f5f2;
}

/* 3) 🌲 森林书屋 */
[data-theme="forest"]{
  --bg:#f2f8f3; --card:#fff; --ink:#283328; --soft:#7a8878; --line:#e1ebe3;
  --brand:#4a8c63; --brand-deep:#3a7050; --brand-soft:#e9f4ed;
  --gold:#a8841f; --gold-bg:#f6f0d8; --gold-line:#e4d6a0;
  --src:#4f9e76; --src-bg:#ebf5ee; --tag-bg:#ecf2ed;
  --wm:rgba(74,140,99,.20); --export-bg:#f2f8f3; --radius:16px;
}

/* 4) 🎨 莫兰迪雾 */
[data-theme="morandi"]{
  --bg:#f4f3f6; --card:#fff; --ink:#403a3f; --soft:#988f96; --line:#e7e3ea;
  --brand:#a8788a; --brand-deep:#8f6072; --brand-soft:#f3ecf0;
  --gold:#a8965a; --gold-bg:#f3eee1; --gold-line:#e1d7bf;
  --src:#7d9088; --src-bg:#edf1ef; --tag-bg:#efedf1;
  --wm:rgba(168,120,138,.20); --export-bg:#f4f3f6;
}

/* 5) 🌸 樱花少女 */
[data-theme="sakura"]{
  --bg:linear-gradient(180deg,#fff0f4,#fbf4f8);
  --card:#fff; --ink:#4a3540; --soft:#b394a2; --line:#f3e3ea;
  --brand:#e87fa3; --brand-deep:#d56489; --brand-soft:#fdeef3;
  --gold:#cf9a4e; --gold-bg:#fbf2df; --gold-line:#eedcb4;
  --src:#c98aa8; --src-bg:#fbeef3; --tag-bg:#f7eef2;
  --wm:rgba(232,127,163,.20); --export-bg:#fbf4f8; --radius:16px;
}

/* 6) 🧋 奶茶拿铁 */
[data-theme="milktea"]{
  --bg:#f7f2ea; --card:#fffdf9; --ink:#473d31; --soft:#a8998a; --line:#ece3d6;
  --brand:#b07a4e; --brand-deep:#96623a; --brand-soft:#f3e9dd;
  --gold:#bb8e3a; --gold-bg:#f7eed6; --gold-line:#e6d3a3;
  --src:#9c8358; --src-bg:#f1ebde; --tag-bg:#f0e9dc;
  --wm:rgba(176,122,78,.20); --export-bg:#f7f2ea;
}

/* 7) 🌿 薄荷晴空 */
[data-theme="mint"]{
  --bg:linear-gradient(180deg,#ebf9f4,#f2f9f7);
  --card:#fff; --ink:#26403a; --soft:#7fa399; --line:#dcefe8;
  --brand:#2fa98a; --brand-deep:#1f8a6f; --brand-soft:#e4f5ef;
  --gold:#b89540; --gold-bg:#f6f0da; --gold-line:#e6d9a8;
  --src:#3f9e9e; --src-bg:#e6f4f3; --tag-bg:#e9f3f0;
  --wm:rgba(47,169,138,.20); --export-bg:#f2f9f7;
}

/* 8) 💜 暮山紫 */
[data-theme="grape"]{
  --bg:linear-gradient(180deg,#f4f1fa,#f5f3f8);
  --card:#fff; --ink:#372f44; --soft:#8f86a3; --line:#e7e2f0;
  --brand:#7a5bc0; --brand-deep:#6346a8; --brand-soft:#efeafa;
  --gold:#b08a3a; --gold-bg:#f5eed9; --gold-line:#e6d6a4;
  --src:#7d75b8; --src-bg:#eeebf7; --tag-bg:#efecf5;
  --wm:rgba(122,91,192,.20); --export-bg:#f5f3f8;
}

/* 9) 🏮 国风朱墨（宣纸纹 + 朱红） */
[data-theme="guofeng"]{
  --bg:#f6efe0;
  --bg-tex:repeating-linear-gradient(45deg, rgba(160,120,70,.045) 0 2px, transparent 2px 7px);
  --card:#fffdf6; --ink:#3a2e26; --soft:#9c8a76; --line:#e8ddc8;
  --brand:#b13c34; --brand-deep:#942e28; --brand-soft:#f8e7e2;
  --gold:#b8923a; --gold-bg:#f6eccf; --gold-line:#e3cf94;
  --src:#9c6f4a; --src-bg:#f2e6d6; --tag-bg:#f0e8d8;
  --wm:rgba(177,60,52,.18); --export-bg:#f6efe0; --radius:10px;
}

/* 10) 🌊 雾霾蓝 */
[data-theme="hazeblue"]{
  --bg:#eef1f5; --card:#fff; --ink:#2c3540; --soft:#8593a3; --line:#dfe5ec;
  --brand:#5b7a99; --brand-deep:#46627e; --brand-soft:#e9eff5;
  --gold:#a98f4a; --gold-bg:#f3eed9; --gold-line:#ddd1a8;
  --src:#6987a0; --src-bg:#e9eff4; --tag-bg:#ebeff3;
  --wm:rgba(91,122,153,.20); --export-bg:#eef1f5;
}

/* 11) 🌙 深空夜读（深色） */
[data-theme="night"]{
  --bg:linear-gradient(180deg,#10151f,#171e2b);
  --card:#1b2333; --ink:#e7ecf4; --soft:#8a96aa; --line:#2a3447;
  --brand:#d9a441; --brand-deep:#ecbf63; --brand-soft:#272318;
  --gold:#e0b65a; --gold-bg:#2a2417; --gold-line:#4a3f22;
  --src:#6fa8d0; --src-bg:#1d2a38; --tag-bg:#222c3c;
  --chip-bg:#222c3c; --on-brand:#17120a;
  --star-grad:linear-gradient(180deg,#241e12,#1b2333);
  --callout-line:#3a4d2e; --switcher-bg:rgba(18,23,34,.82);
  --wm:rgba(224,182,90,.22); --export-bg:#141a25;
  --shadow:0 2px 16px rgba(0,0,0,.35);
}

/* 12) 🍊 珊瑚蜜瓜 */
[data-theme="coral"]{
  --bg:linear-gradient(180deg,#fff0eb,#fbf4f1);
  --card:#fff; --ink:#46342f; --soft:#b39086; --line:#f4e2db;
  --brand:#f06a4e; --brand-deep:#dd5238; --brand-soft:#ffeae3;
  --gold:#cf9a4e; --gold-bg:#fbf2df; --gold-line:#eedcb4;
  --src:#e0896a; --src-bg:#fdeee7; --tag-bg:#f8ede9;
  --wm:rgba(240,106,78,.20); --export-bg:#fbf4f1;
}

/* ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg-tex), var(--bg); background-attachment:fixed;
  color:var(--ink); line-height:1.6; min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .25s ease;
}
#app{max-width:680px; margin:0 auto; padding:20px 16px 60px}
.view{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hidden{display:none}

/* ---- 🎨 风格切换条（玻璃拟态，sticky 顶部；导出区在 #result-view 内，不含本条） ---- */
.switcher{position:sticky; top:0; z-index:50; background:var(--switcher-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:10px 14px;
  transition:background .3s ease}
.switcher .row{max-width:680px; margin:0 auto; display:flex; gap:7px;
  flex-wrap:wrap; align-items:center}
.switcher .label{font-size:12.5px; color:var(--soft); font-weight:600;
  margin-right:2px; white-space:nowrap}
.tbtn{border:1.5px solid var(--line); background:var(--chip-bg); color:var(--ink);
  cursor:pointer; border-radius:999px; padding:6px 12px; font-size:13px;
  transition:all .15s; white-space:nowrap}
.tbtn:hover{border-color:var(--brand)}
.tbtn.active{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600}

/* ---- 表单 ---- */
.hero{text-align:center; padding:24px 0 8px}
.hero h1{font-size:24px; letter-spacing:.5px}
.hero .sub{color:var(--soft); font-size:14px; margin-top:6px}
#quiz{margin-top:18px}
.field{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px; box-shadow:var(--shadow)}
.q{display:block; font-weight:600; font-size:15px; margin-bottom:12px}
.q .opt{font-weight:400; color:var(--soft); font-size:12.5px}
#nickname{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:16px; background:var(--chip-bg); color:var(--ink)}
#nickname:focus{outline:none; border-color:var(--brand)}
.opts{display:flex; gap:8px}
.opts.wrap{flex-wrap:wrap}
.chip{flex:1; min-width:fit-content; text-align:center; cursor:pointer; user-select:none;
  border:1.5px solid var(--line); border-radius:999px; padding:10px 14px; font-size:14px;
  background:var(--chip-bg); color:var(--ink); transition:all .15s; white-space:nowrap}
.opts.wrap .chip{flex:0 0 auto}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600}
.chip.muted{opacity:.4; pointer-events:none}
.cta{display:block; width:100%; margin-top:8px; border:none; cursor:pointer;
  background:var(--brand); color:var(--on-brand); font-size:16px; font-weight:600;
  padding:14px; border-radius:12px; box-shadow:var(--shadow); transition:background .15s}
.cta:hover{background:var(--brand-deep)}

/* ---- 结果 ---- */
.result-head{text-align:center; padding:14px 0 18px}
.result-head h2{font-size:22px}
.result-head .echo{display:inline-block; margin-top:10px; color:var(--brand-deep);
  background:var(--brand-soft); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600}
.result-head .note{color:var(--soft); font-size:12.5px; margin-top:10px}
.watermark-wrap{position:relative}
.booklist{display:flex; flex-direction:column; gap:12px}
.book{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; box-shadow:var(--shadow); position:relative}
.book.star{border-color:var(--gold-line); background:var(--star-grad)}
.book .top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.book .name{font-size:17px; font-weight:700}
.book .author{font-size:12.5px; color:var(--soft)}
.book .badges{margin:8px 0; display:flex; gap:6px; flex-wrap:wrap}
.badge{font-size:11.5px; padding:3px 9px; border-radius:6px; font-weight:600}
.badge.gold{background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold-line)}
.badge.src{background:var(--src-bg); color:var(--src)}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.tag{font-size:11.5px; color:var(--soft); background:var(--tag-bg); border-radius:6px; padding:3px 8px}
.book .intro{font-size:13.5px; color:var(--ink); opacity:.82}
.rank{position:absolute; top:14px; right:14px; font-size:12px; color:var(--soft); opacity:.55; font-weight:700}

.callout{background:var(--brand-soft); border:1px dashed var(--callout-line); border-radius:12px;
  padding:12px 14px; font-size:13px; color:var(--brand-deep); margin-bottom:12px}

/* 预览水印（解锁后由 JS 清除背景）—— SVG 斜向平铺文字，铺满且盖在卡片之上 */
.watermark{position:absolute; inset:0; pointer-events:none; z-index:5;
  background-repeat:repeat; border-radius:var(--radius)}

.actions{display:flex; gap:10px; margin-top:20px}
.actions .cta{margin-top:0; flex:2}
.ghost{flex:1; border:1.5px solid var(--line); background:var(--chip-bg); color:var(--soft);
  border-radius:12px; cursor:pointer; font-size:15px; padding:14px}
.ghost:hover{border-color:var(--brand); color:var(--brand)}

/* ---- 导出选项（解锁后显示） ---- */
.export-opts{display:flex; gap:10px; margin-top:10px}
.export-opts.hidden{display:none}
.export-opt-btn{flex:1; border:1.5px solid var(--line); border-radius:12px; background:var(--chip-bg);
  color:var(--ink); font-size:15px; padding:13px; cursor:pointer; transition:all .15s}
.export-opt-btn:hover{border-color:var(--brand); color:var(--brand)}

/* ---- 解锁弹窗 ---- */
.modal{position:fixed; inset:0; background:rgba(20,30,45,.55); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:20px}
.modal.hidden{display:none}
.modal-card{background:var(--card); border-radius:16px; padding:24px; max-width:340px; width:100%;
  box-shadow:0 12px 44px rgba(20,40,70,.28); animation:fade .25s ease}
.modal-card h3{font-size:18px; margin-bottom:8px}
.modal-sub{font-size:13px; color:var(--soft); margin-bottom:16px; line-height:1.55}
#code-input{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px;
  font-size:16px; text-align:center; letter-spacing:1px; text-transform:uppercase;
  background:var(--chip-bg); color:var(--ink)}
#code-input:focus{outline:none; border-color:var(--brand)}
.code-msg{min-height:18px; color:var(--err); font-size:12.5px; margin:8px 2px}
.modal-actions{display:flex; gap:10px; margin-top:4px}
.modal-actions .cta,.modal-actions .ghost{margin-top:0; flex:1; padding:12px}

/* ================= 移动端优化 ================= */
@media (max-width: 480px){
  #app{padding:14px 12px 48px}
  .switcher{padding:8px 12px}
  .switcher .row{gap:6px}
  .tbtn{padding:5px 10px; font-size:12.5px}
  .hero{padding:16px 0 6px}
  .hero h1{font-size:20px}
  .hero .sub{font-size:13px}
  #quiz{margin-top:14px}
  .field{padding:14px; margin-bottom:12px}
  .q{font-size:14.5px; margin-bottom:10px}
  /* 单选项（年级6个等）小屏自动换行，避免挤成一坨 */
  .opts{flex-wrap:wrap; gap:7px}
  .chip{flex:0 0 auto; padding:9px 15px; font-size:14px}
  .cta{padding:14px; font-size:16px}
  .result-head h2{font-size:20px}
  .result-head .echo{font-size:12.5px; padding:6px 12px}
  .book{padding:14px}
  .book .name{font-size:16px}
  .book .intro{font-size:13px}
  .rank{top:12px; right:12px}
  /* 解锁后两个导出按钮在窄屏竖排，点着更稳 */
  .export-opts{flex-direction:column}
  .actions{flex-wrap:wrap}
  .actions .cta{flex:1 1 100%; order:-1}
  .ghost{flex:1 1 100%}
}