/* ============================================================
   校园动物图鉴 · 设计令牌
   从 miniprogram/app.wxss 一比一搬过来
   换算：小程序 750rpx = 375px 逻辑宽 → 1rpx = 0.5px
   风格：奶油纸质底 + 手绘不规则描边 + 低饱和马卡龙色块
   ============================================================ */

:root {
  --bg: #FBF4E8;
  --bg-soft: #FDF8F0;
  --card: #FFFDF8;
  --ink: #4A3B2F;
  --ink-2: #8C7B6B;
  --ink-3: #B9A895;
  --line: #D8C7AE;

  --spirit: #F6E9C9;
  --mischief: #CFD8C3;
  --blue: #B3C9DA;
  --mint: #A9CCBD;
  --clay: #E3B7A4;
  --apricot: #E9C58F;
  --olive: #A8A96B;
  --leaf: #8FA06A;
  --danger: #C4705C;
  --good: #6E8C5A;

  /* 手绘不规则圆角（左右上下刻意不对称） */
  --r-card: 15px 17px 14px 16px / 16px 14px 17px 15px;
  --r-sm: 7px 9px 6px 8px / 8px 6px 9px 7px;
  --r-pill: 999px;

  --font-hand: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC",
             "Helvetica Neue", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-num: "DIN Alternate", "Bahnschrift", "Helvetica Neue", sans-serif;

  --shadow-card: 0 3px 0 rgba(74, 59, 47, 0.05);
  --bar-h: 59px;
  --top-h: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #EFE6D7;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  /* 桌面端：把奶油纸铺满，中间留一条手机宽的栏 */
  min-height: 100vh;
  background:
    radial-gradient(rgba(74, 59, 47, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, #F3EADA 0%, #EFE6D7 60%, #E9DFCD 100%);
}

img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: #7A5C2B; }

/* ---------- 外壳 ---------- */
.shell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  min-height: 100vh;
}

.app {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--bg);
  overflow-x: hidden;
  /* 纸质斑点纹理，纯 CSS，不占体积 */
  background-image: radial-gradient(rgba(74, 59, 47, 0.045) 1px, transparent 1px);
  background-size: 11px 11px;
  box-shadow: 0 0 40px rgba(74, 59, 47, 0.10);
}

@media (min-width: 900px) {
  .app {
    min-height: 100vh;
    border-left: 1px solid rgba(216, 199, 174, 0.6);
    border-right: 1px solid rgba(216, 199, 174, 0.6);
  }
}

/* 桌面右侧提示（窄屏隐藏） */
.desk-side {
  display: none;
  padding-top: 120px;
  max-width: 260px;
}
@media (min-width: 900px) {
  .desk-side { display: block; }
}
.desk-tip {
  font-family: var(--font-hand);
  font-size: 19px;
  line-height: 1.9;
  color: #7A6A57;
  letter-spacing: 1px;
  margin: 0;
}
.desk-tip span { font-family: var(--font-ui); font-size: 12.5px; color: #A08C75; letter-spacing: 0; }

.noscript {
  padding: 40px;
  text-align: center;
  font-size: 15px;
  color: #7A6A57;
}

/* ---------- 通用容器 ---------- */
.page {
  padding: 0 0 96px;
  min-height: calc(100vh - var(--top-h));
}
.page-pad { padding-left: 16px; padding-right: 16px; }

/* ---------- 手绘卡片 ---------- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.card-flat {
  background: var(--card);
  border: 1.5px solid rgba(216, 199, 174, 0.7);
  border-radius: var(--r-card);
}

/* ---------- 文字 ---------- */
.t-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: var(--font-hand);
}
.t-h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.t-body { font-size: 13.5px; }
.t-sub { font-size: 12px; color: var(--ink-2); }
.t-tiny { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.5px; }
.t-num { font-family: var(--font-num); font-weight: 700; }

/* ---------- 标签 / 胶囊 ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--ink-2);
  background: rgba(216, 199, 174, 0.35);
  border: 1px solid rgba(216, 199, 174, 0.6);
}
.pill-on { background: var(--spirit); color: #7A5C2B; border-color: #E4CE9A; }
.pill-sage { background: var(--mischief); color: #53614A; border-color: #B9C6AC; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  border: 1.5px solid rgba(74, 59, 47, 0.16);
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); opacity: 0.9; }
.btn-primary { background: var(--apricot); color: #5A4322; box-shadow: 0 3px 0 rgba(184, 140, 74, 0.35); }
.btn-sage { background: var(--mischief); color: #414E3A; box-shadow: 0 3px 0 rgba(120, 136, 106, 0.28); }
.btn-ghost { color: var(--ink-2); border-color: var(--line); height: 38px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.45; box-shadow: none; cursor: not-allowed; }

/* ---------- 分隔 / 空白状态 ---------- */
.hr { height: 1px; background: rgba(216, 199, 174, 0.7); margin: 12px 0; }
.empty { padding: 60px 0; text-align: center; }
.empty-ico {
  width: 60px; height: 60px;
  margin: 0 auto 12px;
  border-radius: var(--r-card);
  border: 1.5px dashed var(--line);
}

/* ---------- 安全区 ---------- */
.safe-bottom { height: env(safe-area-inset-bottom, 0px); }