/* ============ 基础：变量 / 重置 / 字体 / 视图 ============ */
:root {
  --paper: #F4EBD9;
  --paper-2: #FBF6EA;
  --paper-3: #E9DCC2;
  --ink: #241F1C;
  --ink-2: #5A5148;
  --ink-3: #8C8073;
  --cinnabar: #B4362C;
  --cinnabar-2: #C9463A;
  --gold: #C9A227;
  --bamboo: #4E6E5D;
  --danger: #A33A2E;

  --gap: 8px;
  --radius: 4px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --font-song: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", "Noto Sans SC", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  /* 微信字体缩放四层防护 · L2 */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  position: fixed; inset: 0;
  background-image:
    radial-gradient(120% 80% at 20% 0%, #FBF5E7 0%, #F4EBD9 45%, #EDE1C9 100%);
}

button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
p { margin: 0; }

.app { position: relative; width: 100%; height: 100%; overflow: hidden; }

.view {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(12px + var(--safe-t)) 16px calc(12px + var(--safe-b));
}
.view.is-active { display: flex; }

.muted { color: var(--ink-3); font-size: 12px; }

/* ---- 按钮 ---- */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px;
  border-radius: var(--radius);
  font-size: 16px; letter-spacing: .06em;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); opacity: .9; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--cinnabar-2), var(--cinnabar));
  color: #FDF6E8;
  box-shadow: 0 2px 0 #8E2A22, 0 4px 12px rgba(140, 42, 34, .28);
  font-size: 17px; letter-spacing: .18em;
}
.btn-ghost {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(36, 31, 28, .16);
  color: var(--ink-2);
  font-size: 14px; letter-spacing: .08em;
  height: 42px;
}
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.link-btn { color: var(--ink-3); font-size: 12px; padding: 8px; }

.icon-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink-2); border-radius: 50%;
}
.icon-btn:active { background: rgba(0, 0, 0, .05); }

/* ---- 启动页 ---- */
.boot {
  margin: auto; text-align: center; color: var(--ink-2);
}
.boot-seal {
  width: 64px; height: 64px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-song); font-size: 34px; color: #FDF6E8;
  background: var(--cinnabar); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(180, 54, 44, .3);
}
.boot-text { font-size: 14px; letter-spacing: .1em; }
.boot-error {
  margin-top: 14px; font-size: 13px; line-height: 1.7;
  color: var(--danger); max-width: 280px;
}

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 10px 18px; border-radius: 20px;
  background: rgba(36, 31, 28, .86); color: #F7EEDD;
  font-size: 13px; line-height: 1.5; text-align: center;
  z-index: 90;
  pointer-events: none;   /* 提示层绝不能吃掉下面的点击，否则"再点一次"永远点不到 */
  animation: toastIn .22s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }