/* 智慧庙务 · 融合设计系统
   暗：夜灯佛龛（信众端 / 手办 / 分身）  亮：白天客堂（庙务中台）
*/
:root{
  --ink:#0e0c0a; --panel:#17130f; --panel2:#1e1913; --line:#2e2720;
  --gold:#c9a253; --gold-l:#e8c87e; --gold-d:#7d6330;
  --red:#a8342a; --red-l:#c9503f;
  --jade:#4a857a;
  --tx:#ece4d4; --tx2:#b3a790; --tx3:#7a6f5c;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,Menlo,"SF Mono",monospace;
  --r:14px;
  --sh:0 10px 30px rgba(0,0,0,.45);
}
/* 亮色：庙务中台 */
.light{
  --ink:#f7f2e7; --panel:#fffdf8; --panel2:#f2ebdc; --line:#e3dac7;
  --gold:#a8813a; --gold-l:#c9a253; --gold-d:#8a6b2e;
  --tx:#2a231a; --tx2:#6b5f4d; --tx3:#9a8d78;
  --sh:0 8px 24px rgba(120,95,50,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--ink); color:var(--tx);
  font-family:var(--sans); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:.02em; margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;font-size:15px}
img{max-width:100%;display:block}

/* ── 顶栏 ── */
.top{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:0 20px; height:56px;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.top .brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:16px;letter-spacing:.08em;white-space:nowrap}
.top .brand em{font-style:normal;color:var(--gold);font-size:13px;letter-spacing:.3em;opacity:.85}
.top nav{display:flex;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top nav::-webkit-scrollbar{display:none}
.top nav a{
  padding:7px 13px;border-radius:9px;font-size:13.5px;color:var(--tx2);
  white-space:nowrap;transition:.16s;
}
.top nav a:hover{color:var(--tx);background:var(--panel2)}
.top nav a.on{color:var(--gold-l);background:color-mix(in srgb,var(--gold) 13%,transparent);font-weight:600}

/* ── 通用件 ── */
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card h3{font-size:15px;display:flex;align-items:center;gap:7px}
.card h3 .ic{color:var(--gold);font-size:13px}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;padding:3px 9px;border-radius:20px;
  border:1px solid var(--line);color:var(--tx2);white-space:nowrap;
}
.pill.gold{color:var(--gold-l);border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.pill.jade{color:#7fc0b2;border-color:rgba(74,133,122,.45);background:rgba(74,133,122,.12)}
.pill.red{color:#e08a7c;border-color:rgba(168,52,42,.45);background:rgba(168,52,42,.12)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 18px;border-radius:11px;font-weight:600;font-size:14px;
  background:var(--panel2);border:1px solid var(--line);color:var(--tx);
  transition:.16s;
}
.btn:active{transform:scale(.985)}
.btn.pri{background:linear-gradient(135deg,var(--gold-d),var(--gold));border-color:transparent;color:#1a1408}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.hr{height:1px;background:var(--line);margin:14px 0;border:0}
.mut{color:var(--tx2)} .dim{color:var(--tx3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.kicker{font-size:11px;letter-spacing:.34em;color:var(--gold);font-weight:700;text-transform:uppercase}

/* 滚动条 */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* toast */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px);
  background:rgba(24,19,14,.96);color:#f4ecdc;font-size:13.5px;
  padding:11px 20px;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.26s;z-index:999;max-width:82vw;text-align:center;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 手机壳（用于信众端在桌面展示） */
.phone{
  width:392px;max-width:100%;height:812px;max-height:calc(100vh - 40px);
  background:var(--ink);border-radius:38px;overflow:hidden;
  border:10px solid #221c15;box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 1px #3a3126 inset;
  display:flex;flex-direction:column;position:relative;
}
.phone .statusbar{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:9px 22px 3px;font-size:11.5px;color:var(--tx2);font-weight:600;
}
.phone .body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}
.phone .tabbar{
  flex:0 0 auto;display:flex;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(10px);
}
.phone .tabbar button{
  flex:1;padding:9px 0 13px;font-size:10.5px;color:var(--tx3);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.phone .tabbar button.on{color:var(--gold-l)}
.phone .tabbar .ic{font-size:17px;line-height:1}

@media(max-width:760px){
  .top{height:52px;padding:0 12px;gap:8px}
  .top .brand{font-size:14px}
  .top .brand em{display:none}
  .top nav a{padding:6px 10px;font-size:12.5px}
  .wrap{padding:0 14px}
  .phone{width:100%;height:auto;max-height:none;border-radius:0;border:0;box-shadow:none}
  .phone .statusbar{display:none}
}