/* ============ 通用组件（页面模块直接复用这些类） ============ */

/* 玻璃蒙版 */
.glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }

/* 顶部条 */
.navbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-4);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.navbar .nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; }
.nav-back, .nav-action { font-size: 18px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.nav-back:active, .nav-action:active { background: rgba(0,0,0,.05); }

/* 卡片 */
.card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.card + .card { margin-top: var(--sp-3); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-btn); padding: 10px 18px; font-size: 15px; font-weight: 500;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--c-aurora-deep);
  color: var(--c-ink-on-brand);
  box-shadow: inset 0 -2px 0 rgba(95,117,0,.25), 0 2px 8px rgba(140,171,0,.30);
}
.btn-soft { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.btn-ghost { border: 1px solid var(--c-line); color: var(--c-ink-2); background: var(--c-surface); }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }

/* 标签 pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 12px; background: var(--c-primary-soft); color: var(--c-primary-deep);
}
.pill-heart  { background: var(--c-heart-soft);  color: #B26A6A; }
.pill-object { background: var(--c-object-soft); color: #5B87AC; }
.pill-lang   { background: var(--c-lang-soft);   color: #7E68A6; }
.pill-line { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink-2); }

/* 徽章（等级） */
.lv { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); color: #fff; }
.lv-1 { background: var(--lv1); } .lv-2 { background: var(--lv2); } .lv-3 { background: var(--lv3); }
.lv-4 { background: var(--lv4); } .lv-5 { background: var(--lv5); }

/* 底部导航 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: var(--tabbar-h);
  display: flex; align-items: stretch; z-index: 40;
  border-top: 1px solid rgba(0,0,0,.04);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--c-ink-3); }
.tab .tab-ico { font-size: 20px; filter: grayscale(1) opacity(.55); transition: .15s; }
.tab.active { color: var(--c-primary-deep); font-weight: 600; }
.tab.active .tab-ico { filter: none; transform: scale(1.12); }
.tab-plus .plus {
  width: 44px; height: 44px; margin-top: -18px;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;  /* 水粉颜料团的有机圆 */
  background: var(--c-aurora-deep); color: var(--c-ink-on-brand); font-size: 26px; font-weight: 400;
  display: grid; place-items: center; box-shadow: var(--shadow-float);
}

/* 左上角头像悬浮 */
.avatar-fab {
  position: fixed; top: 12px; left: max(12px, calc(50% - 240px + 12px)); z-index: 50;
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.9); box-shadow: var(--shadow-card);
}
.avatar-fab img { width: 100%; height: 100%; object-fit: cover; }

/* 头像通用 */
.avatar { border-radius: 50%; object-fit: cover; background: var(--c-primary-soft); }

/* 输入 */
.input, .textarea {
  width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-btn);
  padding: 10px 12px; background: var(--c-surface);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--c-primary); }
.textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: var(--sp-4); }
.field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }
.char-count { text-align: right; font-size: 12px; color: var(--c-ink-3); }

/* 选择块（问卷/筛选用） */
.opt {
  display: block; width: 100%; text-align: left;
  border: 1.5px solid var(--c-line); border-radius: var(--r-card);
  padding: 12px 14px; margin-bottom: var(--sp-3); background: var(--c-surface);
  transition: .15s;
}
.opt .opt-title { font-weight: 600; font-size: 15px; }
.opt .opt-desc { font-size: 12.5px; color: var(--c-ink-2); margin-top: 2px; }
.opt.selected { border-color: var(--c-primary); background: var(--c-primary-soft); }

/* chip 选择组 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px;
  border: 1.5px solid var(--c-line); background: var(--c-surface); color: var(--c-ink-2);
}
.chip.selected { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-deep); font-weight: 600; }

/* 底部固定操作栏（方案详情四按钮） */
.action-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 40;
  display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,0,0,.04);
}
.action-bar .btn { flex: 1; padding: 10px 4px; font-size: 13.5px; }

/* 半屏弹层 sheet */
.sheet-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(30,45,38,.35);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.sheet {
  width: 100%; max-width: 480px; max-height: 82dvh; overflow-y: auto;
  background: var(--c-surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  animation: sheetUp .26s cubic-bezier(.32,.72,.32,1);
}
.sheet-center { align-items: center; }
.sheet-center .sheet { border-radius: var(--r-sheet); width: calc(100% - 48px); animation: pageIn .22s ease; }
@keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  z-index: 80; background: rgba(47,58,10,.92); color: #FDFFEF;
  padding: 10px 18px; border-radius: var(--r-pill); font-size: 13.5px;
  max-width: 80%; text-align: center; animation: fadeIn .2s ease;
}

/* 红点 */
.dot { position: relative; }
.dot::after {
  content: ""; position: absolute; top: -2px; right: -6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger);
}

/* 空状态 */
.empty { text-align: center; padding: 48px 24px; color: var(--c-ink-3); }
.empty .empty-ico { font-size: 40px; margin-bottom: 8px; }

/* 分隔小标题 */
.sec-title { font-size: 15px; font-weight: 700; margin: var(--sp-5) 0 var(--sp-3); display: flex; align-items: center; gap: 8px; }
.sec-title::before {
  content: ""; width: 16px; height: 11px;
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;  /* 笔触色块 */
  background: var(--c-aurora-deep);
  transform: rotate(-8deg);
}

/* 列表行 */
.row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.row:last-child { border-bottom: none; }
.row .row-main { flex: 1; min-width: 0; }
.row .row-arrow { color: var(--c-ink-3); }

/* 浮层引导 */
.guide-mask { position: fixed; inset: 0; z-index: 70; background: rgba(30,45,38,.5); }
.guide-tip { position: absolute; color: #fff; font-size: 14px; line-height: 1.7; }
.guide-ok {
  position: absolute; right: 20px; bottom: 100px;
  padding: 8px 20px; border-radius: var(--r-pill);
  border: 1.5px solid #fff; color: #fff; font-size: 14px;
}