/* 《拜堂》公共样式 —— 系统外壳 / 通用组件 */
:root{
  --ink:#0f0d0e; --ink2:#171416; --panel:#1c1719; --line:#2e2629;
  --paper:#e9e2d4; --paper2:#d8cfbc; --muted:#8a7f77;
  --zhu:#a3231f; --zhu-d:#7a1512; --zhu-l:#c8402c;
  --gold:#c8a86b; --jade:#5c7a6a;
  --txt:#d9d2c7; --txt-dim:#9c9086;
  --radius:10px;
  --sans:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Noto Serif CJK SC","Songti SC","SimSun",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--txt);
  background:var(--ink);
  line-height:1.7;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.serif{font-family:var(--serif)}

/* 背景纹理：暗色宣纸/噪点 */
.bg-ink{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #241d1f 0%, #120f10 55%, #0b090a 100%);
}
.bg-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ====== 通用容器 ====== */
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
.center{max-width:640px;margin:0 auto;padding:0 18px}

/* ====== 调查笔记 悬浮面板 ====== */
#note-fab{
  position:fixed;right:14px;bottom:14px;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:var(--zhu);color:#fff;border:2px solid #e9d9a8;
  font-family:var(--serif);font-size:20px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
}
#note-fab .dot{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:#e9d9a8;color:#7a1512;font-size:11px;font-family:var(--sans);display:flex;align-items:center;justify-content:center;font-weight:700}
#note-panel{
  position:fixed;right:14px;bottom:80px;z-index:901;
  width:min(340px,calc(100vw - 28px));max-height:70vh;overflow:auto;
  background:linear-gradient(#efe7d6,#e4dac6);color:#241d1f;
  border:1px solid #b7a07a;border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  transform:translateY(12px) scale(.98);opacity:0;pointer-events:none;
  transition:.18s ease;
}
#note-panel.open{transform:none;opacity:1;pointer-events:auto}
#note-panel h4{margin:0;padding:12px 16px;font-family:var(--serif);
  background:var(--zhu-d);color:#f0e6cf;border-radius:12px 12px 0 0;letter-spacing:2px}
#note-list{margin:0;padding:8px 6px 12px}
.note-item{display:flex;gap:10px;padding:9px 12px;border-bottom:1px dashed #cabfa6}
.note-item .ic{flex:0 0 auto;color:var(--zhu)}
.note-item.done{color:#8a7f77}
.note-item.done .tk{text-decoration:line-through;opacity:.7}
.note-item small{display:block;color:#8a7f77;font-size:12px;margin-top:2px}
.note-reset{display:block;width:calc(100% - 24px);margin:8px 12px 12px;padding:8px;
  background:none;border:1px solid #c3b28f;border-radius:8px;color:#7a1512;font-size:12px}

/* toast */
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  z-index:950;background:#241d1f;color:#f0e6cf;border:1px solid var(--gold);
  padding:11px 18px;border-radius:30px;font-size:14px;opacity:0;transition:.25s;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ====== 通用按钮/输入 ====== */
.btn{display:inline-block;padding:11px 22px;border-radius:8px;border:1px solid var(--zhu);
  background:var(--zhu);color:#fff;font-size:15px;text-decoration:none;text-align:center;
  transition:.15s;font-family:var(--serif);letter-spacing:1px}
.btn:hover{background:var(--zhu-l);border-color:var(--zhu-l)}
.btn.ghost{background:transparent;color:var(--txt)}
.btn.ghost:hover{background:rgba(163,35,31,.12)}
input,textarea{font-family:var(--sans);font-size:16px}

/* ====== 顶部返回条（伪浏览器外壳会覆盖） ====== */
.tinybar{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--txt-dim)}
.tinybar a{color:var(--gold);text-decoration:none}

/* 通用卡片 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}

/* 移动端 */
@media (max-width:560px){
  .wrap{padding:0 12px}
  #note-fab{width:50px;height:50px;font-size:18px}
}