/* ============================================================
   符箓阁 · 道教符咒文化站  —  古朴典雅视觉系统
   ============================================================ */
:root{
  --paper:#f3e9d2;          /* 宣纸米黄 */
  --paper-2:#ece0c4;        /* 略深宣纸 */
  --paper-3:#e3d5b4;        /* 卡片底 */
  --ink:#2a211a;            /* 墨色正文 */
  --ink-strong:#1a130d;     /* 浓墨标题 */
  --ink-soft:#5b4d3c;       /* 浅墨注释 */
  --cinnabar:#9e2b25;       /* 朱砂红 */
  --cinnabar-2:#b8413a;     /* 亮朱砂 */
  --gold:#a8772e;           /* 印泥金 */
  --gold-2:#c39a4b;
  --line:#c9b48a;           /* 边框线 */
  --shadow:rgba(40,28,15,.18);
  --maxw:1180px;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --brush:"Ma Shan Zheng","STKaiti","KaiTi","楷体",cursive;
  --kai:"ZCOOL XiaoWei","STKaiti","KaiTi","楷体",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(168,119,46,.05), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(158,43,37,.05), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23c9b48a' stroke-opacity='0.12' stroke-width='1.2'%3E%3Cpath d='M10 60 q20 -25 40 0 t40 0'/%3E%3Cpath d='M60 10 q25 20 0 40 t0 40'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment:fixed;
  line-height:1.85;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--cinnabar);text-decoration:none}
a:hover{color:var(--cinnabar-2)}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(243,233,210,.97), rgba(236,224,196,.94));
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 12px rgba(40,28,15,.12);
  backdrop-filter:blur(4px);
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:.5rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.brand .seal{
  width:46px;height:46px;flex:0 0 auto;
  border-radius:8px;background:var(--cinnabar);
  color:#f7e9c8;display:flex;align-items:center;justify-content:center;
  font-family:var(--brush);font-size:1.5rem;line-height:1;
  box-shadow:inset 0 0 0 2px rgba(247,233,200,.55), 0 2px 6px var(--shadow);
  transform:rotate(-3deg);
}
.brand .titles{display:flex;flex-direction:column;line-height:1.1}
.brand .t-cn{font-family:var(--brush);font-size:1.45rem;color:var(--ink-strong);letter-spacing:.12em}
.brand .t-en{font-size:.62rem;letter-spacing:.32em;color:var(--ink-soft);text-transform:uppercase}

.nav{display:flex;flex-wrap:wrap;gap:.2rem;margin-left:auto}
.nav a{
  padding:.42rem .85rem;color:var(--ink-soft);font-size:.95rem;
  border-radius:6px;position:relative;transition:.18s;letter-spacing:.05em;
}
.nav a:hover{color:var(--cinnabar);background:rgba(158,43,37,.07)}
.nav a.active{color:var(--cinnabar);font-weight:600}
.nav a.active::after{
  content:"";position:absolute;left:18%;right:18%;bottom:2px;height:2px;
  background:var(--cinnabar);border-radius:2px;
}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--gold);
  color:var(--ink);border-radius:6px;padding:.35rem .7rem;font-size:1.1rem;cursor:pointer}

/* ---------- 通用区块 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:1.4rem 1.2rem 3rem}
.section-title{
  font-family:var(--brush);font-size:1.9rem;color:var(--ink-strong);
  letter-spacing:.14em;display:flex;align-items:center;gap:.8rem;margin:1.4rem 0 1rem;
}
.section-title::before{content:"";width:30px;height:30px;flex:0 0 auto;
  background:var(--cinnabar);border-radius:50% 50% 50% 0;transform:rotate(-12deg);
  box-shadow:inset 0 0 0 2px rgba(247,233,200,.6)}
.section-sub{color:var(--ink-soft);margin-bottom:1.2rem;font-size:.95rem}

/* 回纹分隔线 */
.divider{height:14px;margin:1.4rem 0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px);
  opacity:.5;border-radius:2px}

/* ---------- 首页 Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(158,43,37,.10), transparent 55%),
    linear-gradient(160deg, var(--paper-3), var(--paper-2));
  padding:2.6rem 2rem;margin-top:1.2rem;
  box-shadow:0 6px 22px var(--shadow);
}
.hero::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%239e2b25' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M20 80 q15 -40 40 -20 t40 0'/%3E%3Cpath d='M30 50 q20 -30 40 0'/%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity:.6}
.hero h1{font-family:var(--brush);font-size:3.4rem;color:var(--ink-strong);letter-spacing:.18em;line-height:1.15}
.hero .tag{font-family:var(--kai);color:var(--cinnabar);font-size:1.15rem;letter-spacing:.3em;margin:.4rem 0 1rem}
.hero p{max-width:620px;color:var(--ink-soft);font-size:1.02rem}
.hero .stamp{
  position:absolute;top:1.6rem;right:2rem;width:96px;height:96px;transform:rotate(8deg);opacity:.92;
}
.hero-actions{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  font-family:var(--kai);font-size:1rem;letter-spacing:.08em;
  padding:.6rem 1.4rem;border-radius:8px;border:1.5px solid var(--cinnabar);
  background:var(--cinnabar);color:#f7e9c8;transition:.18s;
  box-shadow:0 3px 10px rgba(158,43,37,.25);
}
.btn:hover{background:var(--cinnabar-2);color:#fff}
.btn.ghost{background:transparent;color:var(--cinnabar)}
.btn.ghost:hover{background:rgba(158,43,37,.08);color:var(--cinnabar)}
.btn.gold{border-color:var(--gold);background:var(--gold);box-shadow:0 3px 10px rgba(168,119,46,.3)}
.btn.gold:hover{background:var(--gold-2)}

/* 首页快捷卡 */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.quick-card{
  background:linear-gradient(160deg,var(--paper-3),var(--paper-2));
  border:1px solid var(--line);border-radius:12px;padding:1.2rem;cursor:pointer;
  transition:.2s;position:relative;overflow:hidden;
}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px var(--shadow);border-color:var(--gold)}
.quick-card .qc-icon{font-family:var(--brush);font-size:2.1rem;color:var(--cinnabar)}
.quick-card h3{font-family:var(--kai);font-size:1.2rem;color:var(--ink-strong);margin:.4rem 0 .3rem;letter-spacing:.06em}
.quick-card p{font-size:.86rem;color:var(--ink-soft)}

/* 每日一符 */
.daily{
  display:grid;grid-template-columns:200px 1fr;gap:1.4rem;align-items:center;
  background:linear-gradient(160deg,var(--paper-3),var(--paper-2));
  border:1px solid var(--line);border-radius:14px;padding:1.4rem;margin-top:1.2rem;
  box-shadow:0 4px 16px var(--shadow);
}
.daily img{width:100%;border:6px solid #fff;box-shadow:0 4px 14px var(--shadow);background:#fff}
.daily .d-meta h3{font-family:var(--brush);font-size:1.8rem;color:var(--ink-strong);letter-spacing:.1em}
.daily .d-meta .badge{display:inline-block;margin:.4rem .4rem .4rem 0}
.daily .d-meta p{color:var(--ink-soft);font-size:.95rem}

/* ---------- 通用徽章 ---------- */
.badge{
  display:inline-block;font-size:.74rem;padding:.15rem .55rem;border-radius:20px;
  background:rgba(158,43,37,.1);color:var(--cinnabar);border:1px solid rgba(158,43,37,.3);
  font-family:var(--kai);letter-spacing:.04em;
}
.badge.gold{background:rgba(168,119,46,.12);color:var(--gold);border-color:rgba(168,119,46,.35)}

/* ---------- 图库 ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.2rem}
.search-box{
  flex:1 1 240px;display:flex;align-items:center;gap:.5rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:30px;padding:.4rem 1rem;
}
.search-box input{flex:1;border:none;background:none;outline:none;font-family:var(--serif);font-size:.95rem;color:var(--ink)}
.search-box .ico{color:var(--gold)}
.chip{
  cursor:pointer;font-family:var(--kai);font-size:.88rem;padding:.4rem .9rem;border-radius:30px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);transition:.16s;letter-spacing:.04em;
}
.chip:hover{border-color:var(--gold);color:var(--ink-strong)}
.chip.active{background:var(--cinnabar);color:#f7e9c8;border-color:var(--cinnabar)}
.chip .cnt{opacity:.7;font-size:.78rem;margin-left:.3rem}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.t-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  cursor:pointer;transition:.2s;display:flex;flex-direction:column;
}
.t-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px var(--shadow);border-color:var(--gold)}
.t-card .img-box{background:#fbf6e9;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.t-card .img-box img{width:100%;height:100%;object-fit:contain;transition:.3s}
.t-card:hover .img-box img{transform:scale(1.05)}
.t-card .info{padding:.55rem .6rem .7rem}
.t-card .info .nm{font-family:var(--kai);font-size:.98rem;color:var(--ink-strong);line-height:1.3}
.t-card .info .row{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem}
.t-card .fav{background:none;border:none;cursor:pointer;font-size:1.05rem;color:var(--line);transition:.15s}
.t-card .fav.on{color:var(--cinnabar)}

.empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem;font-family:var(--kai)}

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(20,12,6,.82);padding:1.4rem;backdrop-filter:blur(3px);
}
.lightbox.show{display:flex}
.lb-inner{
  background:var(--paper);max-width:760px;width:100%;border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,42%) 1fr;max-height:88vh;
  box-shadow:0 14px 50px rgba(0,0,0,.5);border:1px solid var(--gold);
}
.lb-img{background:#fbf6e9;display:flex;align-items:center;justify-content:center;padding:1rem}
.lb-img img{max-height:70vh;object-fit:contain}
.lb-body{padding:1.4rem 1.5rem;overflow-y:auto}
.lb-body h2{font-family:var(--brush);font-size:1.9rem;color:var(--ink-strong);letter-spacing:.08em}
.lb-body .meta{margin:.6rem 0}
.lb-body .kw{margin:.5rem 0}
.lb-body .kw .badge{margin:.15rem .25rem .15rem 0}
.lb-body .usage{background:var(--paper-2);border-left:4px solid var(--cinnabar);padding:.7rem .9rem;border-radius:6px;margin-top:.6rem;font-size:.95rem}
.lb-body .close{position:absolute;top:.8rem;right:1rem;font-size:1.6rem;color:var(--paper);cursor:pointer;background:none;border:none}
.lb-fav{margin-top:1rem}

/* ---------- 学堂 ---------- */
.learn{display:grid;grid-template-columns:240px 1fr;gap:1.6rem;align-items:start}
.learn-nav{position:sticky;top:80px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:.6rem;max-height:78vh;overflow-y:auto}
.learn-nav a{display:block;padding:.6rem .8rem;border-radius:8px;color:var(--ink-soft);font-family:var(--kai);cursor:pointer;transition:.15s;letter-spacing:.05em}
.learn-nav a:hover{background:rgba(158,43,37,.07);color:var(--cinnabar)}
.learn-nav a.active{background:var(--cinnabar);color:#f7e9c8}
.article{background:linear-gradient(170deg,var(--paper-3),var(--paper-2));border:1px solid var(--line);border-radius:14px;padding:1.8rem 2rem;box-shadow:0 4px 16px var(--shadow)}
.article h1{font-family:var(--brush);font-size:2.2rem;color:var(--ink-strong);letter-spacing:.1em;margin-bottom:.2rem}
.article .lead{color:var(--cinnabar);font-family:var(--kai);margin-bottom:1rem;font-size:1.05rem}
.article h2{font-family:var(--kai);font-size:1.3rem;color:var(--ink-strong);margin:1.4rem 0 .6rem;letter-spacing:.06em;padding-left:.7rem;border-left:4px solid var(--gold)}
.article p{margin:.5rem 0;color:var(--ink)}
.article ul{margin:.4rem 0 .8rem 1.3rem}
.article li{margin:.3rem 0}
.article blockquote{
  margin:1rem 0;padding:.8rem 1.1rem;background:rgba(158,43,37,.07);
  border-left:4px solid var(--cinnabar);border-radius:6px;font-family:var(--kai);
  color:var(--ink-strong);font-size:1.05rem;
}

/* 数据渲染卡（门派/结构/符头/用法/手印） */
.card-list{display:grid;gap:.9rem;margin:.6rem 0}
.data-card{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.data-card h3{font-family:var(--kai);font-size:1.15rem;color:var(--cinnabar);letter-spacing:.05em}
.data-card .sub{font-size:.82rem;color:var(--ink-soft);margin:.2rem 0 .5rem}
.data-card p{font-size:.92rem;color:var(--ink);margin:.25rem 0}
.data-card .kv{display:flex;gap:.4rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-soft)}
.data-card .kv b{color:var(--ink-strong);font-weight:600}
.struct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.struct-card{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:1rem;text-align:center}
.struct-card .ic{font-family:var(--brush);font-size:2.2rem;color:var(--cinnabar);width:56px;height:56px;line-height:56px;margin:0 auto .4rem;border:2px solid var(--gold);border-radius:50%}
.struct-card h3{font-family:var(--kai);color:var(--ink-strong)}
.struct-card p{font-size:.88rem;color:var(--ink-soft);text-align:left;margin-top:.4rem}
.struct-card .det{font-size:.82rem;color:var(--ink-soft);text-align:left;margin-top:.4rem}
.struct-card .det li{margin:.2rem 0}

/* ---------- 咒语库 ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.inc-card{background:linear-gradient(170deg,var(--paper-3),var(--paper-2));border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;position:relative;box-shadow:0 3px 12px var(--shadow)}
.inc-card h3{font-family:var(--brush);font-size:1.5rem;color:var(--ink-strong);letter-spacing:.08em}
.inc-card .cat{position:absolute;top:1rem;right:1rem}
.inc-card .text{margin-top:.6rem;font-family:var(--kai);font-size:1.02rem;color:var(--ink);line-height:2;letter-spacing:.02em}
.inc-card .copy{margin-top:.7rem}

/* ---------- 术语词典 ---------- */
.glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.gterm{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;border-left:4px solid var(--cinnabar)}
.gterm .t{font-family:var(--brush);font-size:1.6rem;color:var(--cinnabar);letter-spacing:.06em}
.gterm .e{font-size:.92rem;color:var(--ink);margin-top:.3rem}

/* ---------- 临摹画符 ---------- */
.draw-wrap{display:grid;grid-template-columns:1fr 260px 250px;gap:1.4rem;align-items:start}
.draw-stage{position:relative;background:#fbf6e9;border:2px solid var(--gold);border-radius:12px;padding:.5rem;box-shadow:0 6px 20px var(--shadow)}
.draw-stage canvas{width:100%;height:auto;display:block;border-radius:6px}
#bgCanvas{background:#fbf6e9}
#drawCanvas{position:absolute;top:.5rem;left:.5rem;width:calc(100% - 1rem);height:auto;cursor:crosshair;touch-action:none}
.draw-stage.editing #drawCanvas{cursor:grab}
.draw-stage.editing #drawCanvas:active{cursor:grabbing}
.draw-tools{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:1.1rem;display:flex;flex-direction:column;gap:.9rem}
.draw-tools .grp label{font-family:var(--kai);font-size:.9rem;color:var(--ink-soft);display:block;margin-bottom:.3rem}
.draw-tools input[type=range]{width:100%}
.swatches{display:flex;gap:.5rem}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.swatch.on{border-color:var(--ink-strong);transform:scale(1.1)}
.draw-tips{background:rgba(158,43,37,.06);border-left:4px solid var(--cinnabar);border-radius:6px;padding:.7rem .9rem;font-size:.86rem;color:var(--ink-soft)}
.btn-row{display:flex;gap:.5rem;align-items:center}
.btn-row .btn{flex:1;padding:.55rem .4rem}
.btn.on{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
.btn.ghost.on{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
.btn.burn{border-color:#c4622a;background:linear-gradient(135deg,#d9531e,#a83410);color:#fff;box-shadow:0 3px 10px rgba(168,52,16,.3)}
.btn.burn:hover{filter:brightness(1.06)}
#bgScale{accent-color:var(--cinnabar)}

/* 模式切换（画符 / 编辑底图） */
.mode-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mode-btn{flex:1;padding:.55rem .3rem;background:var(--paper-2);border:0;font-family:var(--kai);font-size:.92rem;color:var(--ink-soft);cursor:pointer;transition:.18s}
.mode-btn:first-child{border-right:1px solid var(--line)}
.mode-btn.on{background:var(--cinnabar);color:#fff}
.mode-hint{font-size:.78rem;color:var(--ink-soft);line-height:1.7;margin-top:.4rem}
/* 运笔咒语面板 */
.draw-chant{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:1.1rem;align-self:start;position:sticky;top:1rem}
.chant-head{font-family:var(--kai);font-size:1rem;letter-spacing:.18em;color:var(--cinnabar);text-align:center;border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.7rem}
.chant-name{font-family:var(--kai);font-size:1.05rem;color:var(--ink-strong);text-align:center;margin-bottom:.5rem}
.chant-text{font-family:var(--kai);font-size:1.02rem;line-height:2.1;color:var(--ink);writing-mode:vertical-rl;text-orientation:upright;max-height:360px;margin:0 auto;letter-spacing:.04em}
.chant-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:.7rem;border-top:1px dashed var(--line);padding-top:.5rem}
@media(max-width:920px){.draw-chant{position:static}}

/* 焚爇（声音燃烧符咒）弹层 */
.burn-overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#1a0800 0%,#000 85%);padding:1rem}
.burn-overlay.open{display:flex}
.burn-card{width:100%;max-width:560px;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.burn-top{width:100%}
.prog-track{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;width:0%;background:linear-gradient(to right,#ff3300,#ff8800,#ffcc00);border-radius:3px;transition:width .15s linear}
.prog-label{text-align:center;font-family:var(--kai);font-size:.8rem;color:#b98b50;margin-top:.4rem;letter-spacing:.05em}
.burn-canvas-wrap{position:relative;flex-shrink:0;border-radius:8px;overflow:hidden;box-shadow:0 0 40px rgba(200,80,0,.25);background:#0a0400}
#burnCanvas{display:block;border-radius:8px}
.mic-area{position:absolute;top:10px;left:0;right:0;text-align:center;pointer-events:none}
.mic-lbl{font-family:var(--kai);font-size:.8rem;color:#9a7040;letter-spacing:.04em;transition:color .3s}
.mic-lbl.on{color:#ffaa33}
.burn-chant{position:absolute;bottom:14px;left:10px;right:10px;text-align:center;font-family:var(--kai);font-size:.82rem;line-height:1.9;color:rgba(240,200,120,.5);pointer-events:none;letter-spacing:.02em}
#burnHold{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#dd3300,#880a00);border:3px solid #ff4400;color:#f0d080;font-family:var(--kai);font-size:.78rem;cursor:pointer;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 26px rgba(180,0,0,.5);user-select:none}
#burnHold.show{display:flex}
.burn-actions{width:100%;display:flex;justify-content:center}
.burn-actions .btn{max-width:240px}

/* ---------- 选底图弹窗 ---------- */
.bg-modal{position:fixed;inset:0;background:rgba(40,28,18,.55);display:none;align-items:center;justify-content:center;padding:1rem;z-index:200}
.bg-modal.open{display:flex}
.bg-modal-card{background:var(--paper);border:2px solid var(--gold);border-radius:14px;width:100%;max-width:680px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden}
.bg-modal-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);font-family:var(--kai);font-size:1.1rem;color:var(--ink-strong)}
.bg-close{border:none;background:none;font-size:1.3rem;color:var(--ink-soft);cursor:pointer;line-height:1}
.bg-close:hover{color:var(--cinnabar)}
.bg-tabs{display:flex;gap:.5rem;padding:.8rem 1.2rem 0}
.bg-tab{flex:1;padding:.6rem;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);font-family:var(--kai);border-radius:8px 8px 0 0;cursor:pointer}
.bg-tab.active{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
.bg-panel{padding:1rem 1.2rem 1.3rem;overflow-y:auto}
.bg-panel #bgSearch{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;font-family:var(--kai);font-size:.95rem;margin-bottom:.8rem;box-sizing:border-box}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.7rem;max-height:46vh;overflow-y:auto}
.bg-thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-2);cursor:pointer;transition:transform .12s,border-color .12s;text-align:center}
.bg-thumb:hover{transform:translateY(-2px);border-color:var(--cinnabar)}
.bg-thumb img{width:100%;height:96px;object-fit:cover;display:block;background:#eee}
.bg-thumb-name{display:block;font-size:.72rem;color:var(--ink-soft);padding:.25rem .2rem;font-family:var(--kai);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-up-hint{font-size:.86rem;color:var(--ink-soft);margin:.2rem 0 .8rem}
.bg-panel #bgFile{width:100%;padding:.4rem 0}
#bgUpPreview{margin-top:.8rem;text-align:center}
#bgUpPreview img{max-width:100%;max-height:260px;border-radius:8px;border:1px solid var(--line)}
.bg-modal-card .btn{margin-top:.9rem}

/* ---------- 收藏夹 ---------- */
.fav-empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft);font-family:var(--kai)}
.fav-empty .big{font-family:var(--brush);font-size:2.2rem;color:var(--gold);display:block;margin-bottom:.6rem}

/* ---------- 关于 ---------- */
.about{background:linear-gradient(170deg,var(--paper-3),var(--paper-2));border:1px solid var(--line);border-radius:14px;padding:1.8rem 2rem;box-shadow:0 4px 16px var(--shadow)}
.about h2{font-family:var(--kai);color:var(--ink-strong);margin:1rem 0 .5rem;font-size:1.25rem}
.about p{color:var(--ink);margin:.4rem 0}
.disclaimer{margin-top:1.2rem;background:rgba(158,43,37,.07);border:1px dashed var(--cinnabar);border-radius:10px;padding:1rem 1.2rem}
.disclaimer strong{color:var(--cinnabar)}

/* ---------- 页脚 ---------- */
.footer{margin-top:2rem;border-top:2px solid var(--gold);background:rgba(227,213,180,.5)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.2rem;text-align:center;color:var(--ink-soft);font-size:.85rem}
.footer-inner .seal-mini{font-family:var(--brush);color:var(--cinnabar);font-size:1.3rem;letter-spacing:.2em}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:2px solid var(--gold);padding:.6rem;gap:.1rem}
  .nav.show{display:flex}
  .nav-toggle{display:block}
  .hero h1{font-size:2.4rem}
  .daily{grid-template-columns:1fr}
  .daily img{max-width:200px;margin:0 auto}
  .learn{grid-template-columns:1fr}
  .learn-nav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:.3rem}
  .learn-nav a{flex:1 1 auto;text-align:center}
  .lb-inner{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}
  .draw-wrap{grid-template-columns:1fr;gap:1rem}
  .draw-chant .chant-text{max-height:none}
}
@media (max-width:480px){
  .hero h1{font-size:2rem}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}