/* ================================================================
   小印计数 · 禅意视觉系统
   宣纸白 / 墨灰 / 淡金 / 朱砂
   ================================================================ */
:root {
  --paper: #F7F3EA;
  --paper-deep: #EFE9DC;
  --card: #FCFAF3;
  --card-warm: #F4EEE0;
  --gold: #C2A25B;
  --gold-deep: #A8853C;
  --gold-pale: #E6D5A8;
  --gold-wash: #F5EEDC;
  --ink: #3A342C;
  --ink-strong: #292520;
  --ink-muted: #857C6D;
  --ink-faint: #AFA693;
  --line: #E7DFCD;
  --line-strong: #D8CFB8;
  --cinnabar: #B5442E;
  --cinnabar-pale: #F1DED6;
  --jade: #6E8B72;
  --jade-pale: #E3EBE0;

  --serif: "LXGW WenKai", "KaiTi", "STKaiti", "Kaiti SC", "楷体", "Noto Serif SC", "Source Han Serif CN", "STSong", "SimSun", "Songti SC", serif;
  --sans: "Noto Sans SC", "Source Han Sans CN", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(41, 37, 32, 0.04), 0 4px 14px rgba(41, 37, 32, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-deep); text-decoration: none; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--sans); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink-strong); }
.icon { width: 20px; height: 20px; flex: none; display: inline-block; }

/* ----------------------------------------------------------------
   通用组件
   ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.section-head {
  display: flex; align-items: center; gap: 8px;
}
.section-head::before {
  content: ""; width: 3px; height: 16px;
  background: var(--gold); border-radius: 2px; flex: none;
}
.section-head .t { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-strong); }
.section-head .more { margin-left: auto; font-size: 12px; color: var(--gold-deep); cursor: pointer; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; transition: all .18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); opacity: .9; }
.btn-gold {
  background: linear-gradient(135deg, #CFB267 0%, var(--gold) 48%, var(--gold-deep) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(194, 162, 91, 0.32);
}
.btn-gold:hover { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); box-shadow: 0 4px 14px rgba(168, 133, 60, 0.38); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--cinnabar); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 输入 */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.input {
  width: 100%; height: 42px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--gold); }
textarea.input { height: auto; padding: 10px 14px; resize: vertical; min-height: 72px; }

/* 下拉选择：贴合纸感风格的自定义箭头 */
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8853C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}
select.input::-ms-expand { display: none; }
select.input option { background: var(--card); color: var(--ink); }

/* 筛选行：小标题 + 整行下拉，移动端更清爽 */
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field > label { font-size: 12px; color: var(--ink-muted); letter-spacing: 1px; }

/* 标签 / 徽章 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500;
}
.tag-gold { background: var(--gold-wash); color: var(--gold-deep); }
.tag-jade { background: var(--jade-pale); color: var(--jade); }
.tag-red { background: var(--cinnabar-pale); color: var(--cinnabar); }
.tag-muted { background: var(--paper-deep); color: var(--ink-muted); }
.tag-gold-solid { background: var(--gold); color: #fff; }

/* 头像 */
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-wash); color: var(--gold-deep);
  font-family: var(--serif); font-weight: 600; flex: none;
}

/* 个人卡片 */
.profile-card {
  position: relative; overflow: hidden; padding: 32px 24px;
  background: linear-gradient(160deg, var(--gold-wash) 0%, var(--card) 58%);
  border: none;
}
.profile-card::after {
  content: ""; position: absolute; top: -50px; right: -32px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,162,91,0.30), rgba(194,162,91,0) 70%);
  pointer-events: none;
}
.profile-card::before {
  content: ""; position: absolute; bottom: -64px; left: -32px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,162,91,0.20), rgba(194,162,91,0) 70%);
  pointer-events: none;
}
.profile-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.profile-name { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink-strong); margin-top: 14px; }
.profile-badge {
  margin-top: 8px; padding: 5px 16px; border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: 1px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-badge.done { background: var(--jade-pale); color: var(--jade); }
.profile-badge.done::before { content: "✓"; font-size: 12px; font-weight: 700; }
.profile-badge.undone {
  background: var(--cinnabar-pale); color: var(--cinnabar);
  animation: badgePulse 2.4s ease-out infinite;
}
.profile-badge.undone::before { content: "●"; font-size: 7px; color: var(--cinnabar); }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 68, 46, 0.38); }
  60% { box-shadow: 0 0 0 7px rgba(181, 68, 46, 0); }
}
.avatar-ring {
  display: inline-flex; padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-pale), var(--gold));
}
.avatar-ring img, .avatar-ring .avatar { border: 2px solid var(--card); }

/* ----------------------------------------------------------------
   认证页（登录 / 注册）· 深色禅境
   ---------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(130% 60% at 50% -8%, rgba(96,132,120,0.28) 0%, rgba(96,132,120,0) 60%),
    radial-gradient(90% 55% at 88% 108%, rgba(120,110,80,0.18) 0%, rgba(120,110,80,0) 60%),
    linear-gradient(180deg, #0E211E 0%, #122530 44%, #0A141B 100%);
}
/* 朦胧圆月（明月光晕） */
.auth-moon {
  position: absolute; top: 7%; right: 7%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,213,160,0.42) 0%, rgba(232,213,160,0.13) 46%, rgba(232,213,160,0) 70%);
  pointer-events: none;
}
/* 写意远山（深色剪影层次） */
.auth-mountains {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%;
  pointer-events: none; color: #2C3F43;
}
/* 底部薄雾 */
.auth-mist {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, rgba(10,20,27,0) 0%, rgba(10,20,27,0.55) 52%, rgba(10,20,27,0.92) 100%);
  pointer-events: none;
}
/* 飘落的莲花瓣（深色上如萤火） */
.petal {
  position: absolute; top: -30px; left: 50%;
  width: 12px; height: 18px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(circle at 50% 24%, rgba(232,213,160,0.6), rgba(232,213,160,0.08) 76%);
  pointer-events: none;
  animation: petal-fall linear infinite;
}
.p1 { left: 7%; animation-duration: 15s; animation-delay: 0s; }
.p2 { left: 22%; width: 9px; height: 14px; animation-duration: 19s; animation-delay: 3s; }
.p3 { left: 50%; animation-duration: 17s; animation-delay: 6s; }
.p4 { left: 71%; width: 10px; height: 16px; animation-duration: 21s; animation-delay: 1s; background: radial-gradient(circle at 50% 24%, rgba(214,122,92,0.5), rgba(214,122,92,0.06) 76%); }
.p5 { left: 87%; width: 8px; height: 12px; animation-duration: 16s; animation-delay: 8s; }
.p6 { left: 39%; width: 11px; height: 17px; animation-duration: 23s; animation-delay: 11s; background: radial-gradient(circle at 50% 24%, rgba(214,122,92,0.4), rgba(214,122,92,0.05) 76%); }
@keyframes petal-fall {
  0% { transform: translateY(-8vh) translateX(0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(108vh) translateX(52px) rotate(320deg); opacity: 0.45; }
}

/* 半透明深色卡片（毛玻璃） */
.auth-card {
  position: relative; width: 100%; max-width: 384px;
  background: rgba(18,30,36,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(232,213,160,0.16);
  border-radius: 22px; padding: 44px 32px 36px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.45);
  overflow: hidden;
}
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,213,160,0.75) 42%, rgba(232,213,160,0.75) 58%, transparent);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-brand-txt .name {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  color: #F2EEDC; letter-spacing: 3px;
}
.auth-verse {
  text-align: center; font-family: var(--serif);
  color: rgba(232,213,160,0.62); font-size: 13px;
  letter-spacing: 2px; margin: 0 0 20px;
}
.auth-tabs { display: flex; margin-bottom: 24px; border-bottom: 1px solid rgba(232,213,160,0.16); }
.auth-tabs button {
  flex: 1; padding: 10px; font-size: 15px; color: rgba(240,235,216,0.5);
  font-family: var(--serif); font-weight: 600; border-bottom: 2px solid transparent;
  background: none; transition: color .2s, border-color .2s;
}
.auth-tabs button.active { color: #E8D5A0; border-bottom-color: #C2A25B; }
.auth-err { color: #E08A7A; font-size: 13px; margin-bottom: 12px; display: none; }
.auth-err.show { display: block; }

/* 深色登录页表单适配 */
.auth-card .field label { color: rgba(240,235,216,0.6); }
.auth-card .input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(232,213,160,0.2);
  color: #F2EEDC;
}
.auth-card .input:focus { border-color: #C2A25B; }
.auth-card .input::placeholder { color: rgba(240,235,216,0.32); }
/* 登录页按钮固定深色禅境金色，不随主题变化 */
.auth-card .btn-gold { background: linear-gradient(135deg, #CFB267 0%, #C2A25B 48%, #A8853C 100%); }
.auth-card .btn-gold:hover { background: linear-gradient(135deg, #C2A25B 0%, #A8853C 100%); }

/* ----------------------------------------------------------------
   用户端 App 壳（移动优先）
   ---------------------------------------------------------------- */
.app-shell {
  min-height: 100vh; display: flex; justify-content: center;
  background: var(--paper-deep);
  /* 桌面时居中显示为手机式界面，移动端自动全屏 */
}
.app-phone {
  width: 100%; max-width: 414px; min-height: 100vh;
  background: var(--paper); position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(41,37,32,.10);
}
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(247,243,234,.92);
  backdrop-filter: blur(8px);
}
.app-header .brand { display: flex; align-items: center; gap: 8px; }
.app-header .brand .icon { width: 22px; height: 22px; color: var(--gold); }
.app-header .brand .brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.app-header .brand .name { font-family: "Ma Shan Zheng", var(--serif); font-size: 20px; font-weight: 400; color: var(--ink-strong); }
.app-header .brand .tibetan { font-size: 10px; color: var(--gold-deep); letter-spacing: 1px; }
.app-header .title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink-strong); }
.app-header .right { display: flex; align-items: center; gap: 12px; }

.app-main { flex: 1; padding: 16px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 16px; }

.app-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 414px; height: 68px;
  display: flex; background: var(--card);
  border-top: 1px solid var(--line); z-index: 30;
}
.app-nav .item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-muted); font-size: 11px; transition: color .2s ease;
}
.app-nav .item .icon { width: 22px; height: 22px; transition: transform .2s ease; }
.app-nav .item.active { color: var(--gold-deep); font-weight: 600; }
.app-nav .item.active .icon { transform: translateY(-1px); }

/* 页内模块 */
.home-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--gold-wash), transparent);
  border-radius: var(--r-lg); padding: 18px 16px;
}
/* 首页 Hero · 今日概览（视觉重心） */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--gold-wash) 0%, var(--card) 62%);
  border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.hero::after {
  content: ""; position: absolute; top: -46px; right: -34px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,162,91,0.28), rgba(194,162,91,0) 70%);
  pointer-events: none;
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.hero .greeting { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink-strong); }
.hero .sub { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.hero-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-wash); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  border: 1px solid var(--gold-pale);
}
.hero-progress { position: relative; z-index: 1; }
.hero-progress .plabel { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-bottom: 8px; }
.hero-progress .plabel b { color: var(--gold-deep); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.board-checkin .progress { margin-top: 2px; }
.stat-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.stat-top { display: flex; align-items: center; gap: 9px; }
.stat-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold-wash);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.stat-icon .icon { width: 18px; height: 18px; color: var(--gold); }
.stat-name { font-size: 12px; color: var(--ink-muted); }
.stat-num { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink-strong); line-height: 1.1; }

.checkin-row { display: flex; align-items: center; gap: 12px; }
.checkin-cell { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.checkin-cell .num { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.checkin-cell .lbl { font-size: 12px; color: var(--ink-muted); }
.checkin-divider { width: 1px; height: 38px; background: var(--line); }
.checkin-names { display: flex; flex-wrap: wrap; gap: 8px; }

.period-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.period-card { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.period-card.gold { background: var(--gold-wash); border: none; }

.feed-item, .rank-item { display: flex; align-items: center; gap: 12px; padding: 12px; }
.feed-item + .feed-item, .rank-item + .rank-item { border-top: 1px solid var(--paper-deep); }
.feed-user { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-strong); flex: none; min-width: 84px; max-width: 40%; }
.feed-user > img, .feed-user > .avatar { flex: none; }
.feed-mid { flex: 1; min-width: 0; padding-left: 6px; }
.feed-mid .gk { font-size: 13px; color: var(--ink); }
.feed-mid .tm { font-size: 10px; color: var(--ink-faint); margin-top: 1px; }
.feed-qty { flex: none; font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink-strong); white-space: nowrap; }
.feed-unit { font-size: 11px; color: var(--ink-faint); font-weight: 400; margin-left: 2px; }

/* 动态循环滚动 */
.feed-scroll { height: 232px; overflow: hidden; }
.feed-scroll-inner { animation: feed-roll 20s linear infinite; }
.feed-scroll-inner:hover { animation-play-state: paused; }
@keyframes feed-roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.feed-body { flex: 1; min-width: 0; }
.feed-body .t { font-size: 13px; color: var(--ink); }
.feed-body .s { font-size: 11px; color: var(--ink-faint); }
.rank-num { width: 22px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink-faint); }
.rank-num.top1 { color: var(--gold); }
.rank-name { flex: 1; font-size: 13px; font-weight: 500; }
.rank-total { font-family: var(--serif); font-weight: 600; font-size: 15px; }

.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 128px; padding-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar-num { font-size: 11px; color: var(--ink-muted); line-height: 1; }
.bar-col .bar { width: 100%; background: var(--gold); border-radius: 4px; min-height: 6px; }
.chart-labels { display: flex; gap: 10px; margin-top: 8px; }
.chart-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--ink-faint); }

.auspicious {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--gold-wash); border-radius: var(--r-lg);
}
.auspicious .icon { width: 26px; height: 26px; color: var(--gold-deep); }
.auspicious .t { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.auspicious .s { font-size: 12px; color: var(--ink-muted); }

/* 每日一签（书签） */
.qian {
  position: relative; width: 78%; max-width: 300px; margin: 0 auto;
  padding: 36px 26px 32px;
  background: linear-gradient(180deg, #FCF8EE 0%, #F6EDD6 100%);
  border: 1px solid rgba(194, 162, 91, 0.32);
  border-radius: 16px 16px 20px 20px;
  box-shadow: 0 12px 28px rgba(194, 162, 91, 0.16);
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease;
}
.qian:active { transform: scale(.97); }
.qian.has-bg { background-size: cover; background-position: center; }
.qian.has-bg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(252, 248, 238, 0.88) 0%, rgba(246, 237, 214, 0.80) 100%);
  pointer-events: none;
}
.qian.has-bg .qian-body { position: relative; }
.qian-rope {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 26px; background: var(--gold);
}
.qian-rope::after {
  content: ""; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--gold);
}
.qian-word {
  font-family: var(--serif); font-size: 46px; color: var(--gold);
  letter-spacing: 8px; line-height: 1.4;
}
.qian-text { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink-strong); line-height: 2.15; margin-top: 6px; letter-spacing: 1.5px; }
.qian-flip { animation: qian-flip .5s ease; }
@keyframes qian-flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg) scale(1.02); }
  100% { transform: rotateY(0); }
}

/* 每日格言（旧样式，保留兼容） */
.quote-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--gold-wash) 0%, var(--card) 55%);
  border: 1px solid var(--gold-pale);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.quote-card::before {
  content: ""; position: absolute; top: -30px; right: -20px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 162, 91, 0.18), rgba(194, 162, 91, 0) 70%);
  pointer-events: none;
}
.quote-mark { font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--gold); margin-bottom: 8px; }
.quote-text { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-strong); line-height: 1.9; letter-spacing: 1px; }
.quote-date { font-size: 11px; color: var(--ink-faint); margin-top: 12px; letter-spacing: 1px; }

/* 进度条 */
.progress { height: 6px; background: var(--paper-deep); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-pale), var(--gold) 55%, var(--gold-deep)); border-radius: 3px; transition: width .4s ease; }

/* 功课填报项 */
.gongke-item {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
}
.gongke-item + .gongke-item { border-top: 1px solid var(--paper-deep); }
.gk-top { display: flex; align-items: center; gap: 10px; }
.gk-top .icon { width: 22px; height: 22px; color: var(--gold); flex: none; }
.gk-top .name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.gk-top .name small { display: block; font-size: 11px; color: var(--ink-faint); font-weight: 400; margin-top: 2px; }
.gk-bottom { display: flex; align-items: center; gap: 8px; }
.gk-stats { flex: 1; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.gk-stats b { color: var(--gold-deep); font-weight: 600; }
.gk-unit { font-size: 13px; color: var(--ink-muted); flex: none; }
.qty-input {
  width: 64px; height: 34px; text-align: center;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 14px; color: var(--ink); outline: none;
}
.qty-input:focus { border-color: var(--gold); }

/* 分类 chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips .tag { flex: none; }
.chip {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer;
  transition: all .18s ease;
}
.chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.chip.active { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; border-color: var(--gold); }

/* 热力图 */
.heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.heatmap i { aspect-ratio: 1; border-radius: 4px; background: var(--gold); }
.heatmap i.off { background: var(--paper-deep); }

/* 明细列表 */
.record-item { display: flex; align-items: center; gap: 12px; padding: 12px; }
.record-item + .record-item { border-top: 1px solid var(--paper-deep); }
.record-item .date { width: 42px; font-size: 12px; color: var(--ink-faint); }
.record-item .body { flex: 1; min-width: 0; font-size: 13px; }
.record-item .st { font-size: 11px; }

/* 功课明细 */
.detail-item { display: flex; align-items: center; gap: 12px; padding: 12px; }
.detail-item + .detail-item { border-top: 1px solid var(--paper-deep); }
.detail-item .info { flex: 1; min-width: 0; }
.detail-item .info .t { font-size: 14px; font-weight: 500; color: var(--ink); }
.detail-item .info .s { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.detail-item .ops { display: flex; gap: 16px; flex: none; }
.detail-item .ops a { font-size: 13px; cursor: pointer; }
.detail-item .ops a.edit { color: var(--gold-deep); }
.detail-item .ops a.del { color: var(--cinnabar); }

/* 首页明细矩阵表格 */
.detail-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold-pale) var(--paper-deep); }
.detail-table-wrap::-webkit-scrollbar { height: 8px; }
.detail-table-wrap::-webkit-scrollbar-track { background: var(--paper-deep); border-radius: 4px; }
.detail-table-wrap::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 4px; }
.detail-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.detail-table { border-collapse: collapse; width: max-content; min-width: 100%; }
.detail-table th, .detail-table td { padding: 12px 16px; text-align: center; font-size: 13px; white-space: nowrap; }
.detail-table thead th {
  font-family: var(--serif); font-weight: 600; color: var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-wash) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--gold-pale);
}
.detail-table tbody td { border-bottom: 1px solid var(--paper-deep); color: var(--ink); }
.detail-table tbody tr:last-child td { border-bottom: none; }
.detail-table tbody tr:hover td { background: var(--gold-wash); }
.detail-table .sticky-col { position: sticky; left: 0; z-index: 2; text-align: left; box-shadow: 2px 0 6px rgba(41, 37, 32, 0.06); }
.detail-table thead th.sticky-col { background: linear-gradient(180deg, var(--gold-wash) 0%, var(--paper) 100%); }
.detail-table tbody td.sticky-col { background: var(--card); }
.detail-table .uname { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.detail-table .col-total { font-family: var(--serif); font-weight: 700; color: var(--gold-deep); }

/* 实用工具导航 */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.tool-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; transition: all .2s ease; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(41, 37, 32, 0.09); border-color: var(--gold-pale); }
.tool-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--gold-wash); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; overflow: hidden; }
.tool-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-info { flex: 1; min-width: 0; }
.tool-name { font-size: 14px; font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
.tool-desc { font-size: 11px; color: var(--ink-faint); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }

/* 明细日期筛选 + 分页 */
.detail-dates, .ana-dates { display: flex; gap: 8px; align-items: center; }
.detail-dates input[type="date"], .ana-dates input[type="date"] {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; color: var(--ink); outline: none;
}
.detail-dates input[type="date"]:focus, .ana-dates input[type="date"]:focus { border-color: var(--gold); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 4px; }
.pager button {
  padding: 8px 18px; font-size: 13px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .info { font-size: 13px; color: var(--ink-muted); }

/* 设置列表 */
.setting-list .row { display: flex; align-items: center; gap: 12px; padding: 14px; }
.setting-list .row + .row { border-top: 1px solid var(--paper-deep); }
.setting-list .row .icon { width: 18px; height: 18px; color: var(--ink-muted); }
.setting-list .row .lbl { flex: 1; font-size: 14px; font-weight: 500; }
.setting-list .row .hint { font-size: 12px; color: var(--ink-faint); }
.setting-list .row.danger .lbl { color: var(--cinnabar); }

/* Toast */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: var(--ink-strong); color: #fff; padding: 10px 20px; border-radius: var(--r-pill);
  font-size: 13px; z-index: 999; transition: transform .3s; opacity: 0;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(41,37,32,.35);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  width: 100%; max-width: 400px; max-height: 86vh; overflow: auto;
  background: var(--card); border-radius: 16px; padding: 24px;
}
.modal h3 { font-size: 17px; margin-bottom: 18px; }
.modal .modal-actions { display: flex; gap: 10px; margin-top: 8px; }
.modal .modal-actions .btn { flex: 1; }

/* ----------------------------------------------------------------
   管理后台（桌面）
   ---------------------------------------------------------------- */
.admin-shell { display: flex; height: 100vh; background: var(--paper); }
.admin-sidebar {
  width: 240px; flex: none; display: flex; flex-direction: column;
  background: var(--card); border-right: 1px solid var(--line); padding: 20px;
}
.admin-sidebar .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.admin-sidebar .brand .icon { width: 26px; height: 26px; color: var(--gold); }
.admin-sidebar .brand .name { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-strong); }
.admin-sidebar .brand .sub { font-size: 11px; color: var(--ink-muted); }
.admin-menu { display: flex; flex-direction: column; gap: 4px; }
.admin-menu .mi {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px;
  color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer;
}
.admin-menu .mi .icon { width: 18px; height: 18px; color: var(--ink-muted); }
.admin-menu .mi:hover { background: var(--paper); }
.admin-menu .mi.active { background: var(--gold-wash); color: var(--gold-deep); }
.admin-menu .mi.active .icon { color: var(--gold-deep); }
.admin-sidebar .foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-sidebar .foot .info { flex: 1; min-width: 0; }
.admin-sidebar .foot .info .n { font-size: 13px; font-weight: 500; }
.admin-sidebar .foot .info .r { font-size: 11px; color: var(--ink-muted); }

.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.admin-topbar {
  height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--line);
}
.admin-topbar .title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.admin-topbar .right { display: flex; align-items: center; gap: 16px; }
.searchbox {
  display: flex; align-items: center; gap: 8px; width: 240px; height: 36px;
  padding: 0 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.searchbox .icon { width: 16px; height: 16px; color: var(--ink-faint); }
.searchbox input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--ink); }

.admin-content { flex: 1; overflow: auto; padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.admin-stat { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.admin-stat .lbl { font-size: 12px; color: var(--ink-muted); }
.admin-stat .num { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-strong); }
.admin-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.admin-panel .head { display: flex; align-items: center; justify-content: space-between; }
.admin-panel .head .t { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-strong); }
.admin-panel .head .s { font-size: 12px; color: var(--ink-muted); }

/* 设置页分区 */
.settings-section { display: flex; flex-direction: column; gap: 12px; }
.settings-section + .settings-section { margin-top: 26px; }
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-head .icon { width: 18px; height: 18px; color: var(--gold); flex: none; }
.sec-head h2 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink-strong); margin: 0; line-height: 1.3; }
.sec-head p { font-size: 12px; color: var(--ink-muted); margin: 2px 0 0; }
.setting-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--paper-deep); }
.setting-row--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.setting-row:first-child { padding-top: 0; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-row__info { flex: 1; min-width: 0; }
.setting-row__info .t { font-size: 14px; font-weight: 500; color: var(--ink-strong); }
.setting-row__info .s { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.panel-foot { display: flex; justify-content: flex-end; padding-top: 4px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px; font-size: 13px; }
.table th { font-size: 12px; color: var(--ink-muted); font-weight: 500; border-bottom: 1px solid var(--line); }
.table td { border-bottom: 1px solid var(--paper-deep); }
.table tr:last-child td { border-bottom: none; }
.table .op a { margin-right: 12px; font-size: 13px; cursor: pointer; }
.table .op a.edit { color: var(--gold-deep); }
.table .op a.del { color: var(--cinnabar); }

/* 表单行 / 开关 */
.switch { position: relative; width: 44px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; border-radius: 24px; background: var(--line-strong); transition: .2s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: .2s;
}
.switch input:checked + i { background: var(--gold); }
.switch input:checked + i::after { transform: translateX(20px); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }

.empty { text-align: center; color: var(--ink-faint); padding: 40px 0; font-size: 13px; }

/* 骨架屏 */
.sk-wrap { display: flex; flex-direction: column; gap: 12px; animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-soft); }
.sk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sk-row:last-child { margin-bottom: 0; }
.sk-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--paper-deep); flex: none; }
.sk-line { height: 12px; border-radius: 6px; background: var(--paper-deep); }
.sk-line.full { width: 100%; }
.sk-line.w70 { width: 70%; }
.sk-line.w40 { width: 40%; }
@keyframes sk-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 提交功课仪式感动画 */
@keyframes gk-celebrate {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 162, 91, 0); }
  35% { transform: scale(1.08); box-shadow: 0 0 22px 4px rgba(194, 162, 91, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 162, 91, 0); }
}
.btn-celebrate { background: var(--jade) !important; animation: gk-celebrate .7s ease; }


.menu-btn { display: none; align-items: center; gap: 4px; color: var(--ink); }
@media (max-width: 768px) {
  .admin-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: .25s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-panel .head { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .admin-panel .head > div:first-child { flex: 0 0 100%; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .pager { gap: 8px; flex-wrap: wrap; }
  .pager button { padding: 6px 12px; }
  .admin-content { padding: 16px; gap: 16px; }
  .admin-topbar { padding: 0 16px; }
  .admin-topbar .right { gap: 8px; }
  .searchbox { width: 140px; }
  .admin-panel { overflow-x: auto; padding: 16px; }
  #quoteBgPreview { width: 120px !important; height: 72px !important; }
  .admin-panel .table { min-width: 560px; }
  .menu-btn { display: inline-flex; }
}

/* ================================================================
   主题系统（一键切换）
   ================================================================ */
/* 水墨 · 素雅黑白 */
[data-theme="shuimo"] {
  --paper: #F3F4F3; --paper-deep: #E6E8E6; --card: #FBFCFB; --card-warm: #EDEFED;
  --gold: #A89B70; --gold-deep: #877A52; --gold-pale: #D8CEB0; --gold-wash: #EFEBDD;
  --ink: #2E2E2E; --ink-strong: #1C1C1C; --ink-muted: #707070; --ink-faint: #9C9C9C;
  --line: #E0E2E0; --line-strong: #C6C8C6;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #5F7A66; --jade-pale: #E0E8E1;
}
/* 青瓷 · 天青雅致 */
[data-theme="qingci"] {
  --paper: #EDF3F2; --paper-deep: #DEE8E7; --card: #F7FBFA; --card-warm: #E6F0EF;
  --gold: #55877F; --gold-deep: #3E6A63; --gold-pale: #B5D2CD; --gold-wash: #E1EEEC;
  --ink: #2C3A38; --ink-strong: #1F2B29; --ink-muted: #64766F; --ink-faint: #95A5A1;
  --line: #D8E4E2; --line-strong: #BDCECC;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #4E7D74; --jade-pale: #DFECE9;
}
/* 朱砂 · 暖红庄重 */
[data-theme="zhusha"] {
  --paper: #F8F1E9; --paper-deep: #EFE3D6; --card: #FCF7F1; --card-warm: #F4E8DC;
  --gold: #C08A3E; --gold-deep: #9C6D2C; --gold-pale: #E3C99A; --gold-wash: #F3E7D2;
  --ink: #3B3329; --ink-strong: #2A2219; --ink-muted: #857664; --ink-faint: #AFA08D;
  --line: #E8D8C4; --line-strong: #D6C0A4;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #6E8B72; --jade-pale: #E3EBE0;
}
/* 绛霞 · 绛红如晚霞 */
[data-theme="jiangxia"] {
  --paper: #F7EFEA; --paper-deep: #EEE0D8; --card: #FCF6F2; --card-warm: #F4E7DF;
  --gold: #A84941; --gold-deep: #86332C; --gold-pale: #E0B3AC; --gold-wash: #F4E2DD;
  --ink: #3B322D; --ink-strong: #2A211D; --ink-muted: #87766E; --ink-faint: #B0A198;
  --line: #EAD9D1; --line-strong: #D9BFB4;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #6E8B72; --jade-pale: #E3EBE0;
}
/* 檀红 · 檀木深红 */
[data-theme="tanhong"] {
  --paper: #F5EDE8; --paper-deep: #EADCD2; --card: #FBF5F0; --card-warm: #F1E3DA;
  --gold: #96332E; --gold-deep: #73221E; --gold-pale: #D5A79E; --gold-wash: #F0DEDA;
  --ink: #3A302B; --ink-strong: #291F1B; --ink-muted: #86766D; --ink-faint: #AFA198;
  --line: #E8D8CF; --line-strong: #D6BCB0;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #6E8B72; --jade-pale: #E3EBE0;
}
/* 松绿 · 松涛苍翠 */
[data-theme="songlv"] {
  --paper: #EEF4EC; --paper-deep: #E0EAE0; --card: #F7FBF6; --card-warm: #E7F0E6;
  --gold: #4E7A5A; --gold-deep: #3A6247; --gold-pale: #B9CFBB; --gold-wash: #E3EEE4;
  --ink: #2F3A33; --ink-strong: #202922; --ink-muted: #68766C; --ink-faint: #98A49C;
  --line: #DDE7DE; --line-strong: #C4D2C6;
  --cinnabar: #C0563C; --cinnabar-pale: #F1E0D9; --jade: #4E7A5A; --jade-pale: #E3EEE4;
}
/* 藕荷 · 藕色温婉 */
[data-theme="ouhe"] {
  --paper: #F7F0F2; --paper-deep: #EFE3E8; --card: #FBF6F8; --card-warm: #F3E7ED;
  --gold: #A8627C; --gold-deep: #8A4A64; --gold-pale: #DDB9C8; --gold-wash: #F3E4EA;
  --ink: #3A2F35; --ink-strong: #292026; --ink-muted: #856F79; --ink-faint: #AF9BA3;
  --line: #EBDCE3; --line-strong: #D9C4CE;
  --cinnabar: #B5442E; --cinnabar-pale: #F1DED6; --jade: #6E8B72; --jade-pale: #E3EBE0;
}
/* 黛蓝 · 月夜星空（深色） */
[data-theme="dai-lan"] {
  --paper: #1B2536; --paper-deep: #131C2A; --card: #253248; --card-warm: #2C3A52;
  --gold: #D4B878; --gold-deep: #E6CE93; --gold-pale: #8A7648; --gold-wash: #32405A;
  --ink: #D4DCE8; --ink-strong: #F0F3F9; --ink-muted: #98A5BA; --ink-faint: #667488;
  --line: #36445E; --line-strong: #4A5A76;
  --cinnabar: #D9776A; --cinnabar-pale: #4A2E2A; --jade: #7FB08A; --jade-pale: #2A3A30;
}
/* 深色主题：toast 文字色适配 */
[data-theme="dai-lan"] .toast { color: #1B2536; }

/* 主题选择卡片 */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.theme-card {
  border: 2px solid var(--line); border-radius: 12px; overflow: hidden;
  cursor: pointer; background: var(--card); transition: border-color .15s, transform .15s;
}
.theme-card:active { transform: scale(.97); }
.theme-card.active { border-color: var(--gold); }
.theme-card .swatch { display: flex; height: 52px; }
.theme-card .swatch i { flex: 1; }
.theme-card .name { padding: 8px 6px; font-size: 12px; text-align: center; color: var(--ink); }
.theme-card.active .name { color: var(--gold-deep); font-weight: 600; }