/* ===========================================================
   心晴 · 大学生心理健康网站
   设计系统 / 全局样式
   =========================================================== */

/* ---------- 1. 变量 ---------- */
:root {
  --brand:       #2f9e8f;
  --brand-dark:  #247d71;
  --brand-light: #e6f4f1;
  --blue:        #4a86c8;
  --blue-light:  #e8f0fa;
  --warm:        #e8964a;
  --warm-light:  #fdf0e2;
  --danger:      #d9534f;
  --danger-light:#fdeaea;
  --purple:      #8b7bc8;
  --purple-light:#f0edfa;

  --bg:          #f5f9f8;
  --bg-alt:      #ffffff;
  --card:        #ffffff;
  --text:        #1f2d2b;
  --text-2:      #55635f;
  --text-3:      #8b9793;
  --border:      #e2ebe8;
  --shadow:      0 2px 12px rgba(31, 45, 43, .06);
  --shadow-lg:   0 10px 32px rgba(31, 45, 43, .12);

  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   22px;

  --maxw:        1120px;
  --header-h:    60px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Helvetica Neue",
          Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --brand:       #4fbfae;
  --brand-dark:  #6fd3c2;
  --brand-light: #1c2f2c;
  --blue:        #6aa6e0;
  --blue-light:  #1b2734;
  --warm:        #f0a862;
  --warm-light:  #2f2619;
  --danger:      #e57373;
  --danger-light:#331f1f;
  --purple:      #a596dd;
  --purple-light:#241f36;

  --bg:          #101615;
  --bg-alt:      #161e1d;
  --card:        #182120;
  --text:        #e8f0ee;
  --text-2:      #a9b8b5;
  --text-3:      #74827f;
  --border:      #263130;
  --shadow:      0 2px 12px rgba(0, 0, 0, .3);
  --shadow-lg:   0 10px 32px rgba(0, 0, 0, .45);
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

h1, h2, h3, h4 { line-height: 1.35; color: var(--text); font-weight: 700; }
h1 { font-size: 1.75rem; margin: 0 0 .6em; }
h2 { font-size: 1.4rem;  margin: 1.8em 0 .6em; }
h3 { font-size: 1.12rem; margin: 1.4em 0 .5em; }
h4 { font-size: 1rem;     margin: 1.2em 0 .4em; }
p  { margin: 0 0 1em; }

hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

::selection { background: var(--brand); color: #fff; }

/* ---------- 3. 布局 ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;
}
.wrap-narrow { max-width: 780px; }

.section { padding: 44px 0; }
.section-alt { background: var(--bg-alt); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 4. 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 249, 248, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .site-header { background: rgba(16, 22, 21, .88); }
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--text);
  letter-spacing: .5px;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--blue));
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.logo small {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 1.5px;
  margin-top: -4px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 7px 13px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { background: var(--brand-light); color: var(--brand); text-decoration: none; }
.nav a.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.nav a.nav-crisis { color: var(--danger); font-weight: 700; }
.nav a.nav-crisis:hover { background: var(--danger-light); color: var(--danger); }

.icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  padding: 0;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }

.menu-btn { display: none; }

@media (max-width: 860px) {
  .header-inner { gap: 8px; }
  .menu-btn { display: grid; }
  .theme-btn { margin-left: auto; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px 18px;
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
}

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.5;
  text-decoration: none;
  transition: transform .12s, box-shadow .15s, background .15s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #c9302c; }
.btn-lg { padding: 13px 28px; font-size: 1rem; border-radius: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 6. 卡片 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-pad-lg { padding: 26px; }

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card-link:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}

.card h3 { margin-top: 0; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(47,158,143,.18), transparent 65%),
    radial-gradient(700px 400px at 92% 0%,  rgba(74,134,200,.16), transparent 62%);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(1.7rem, 5.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -.5px;
  margin-bottom: .5em;
}
.hero h1 .hl {
  background: linear-gradient(180deg, transparent 62%, rgba(47,158,143,.32) 62%);
  padding: 0 2px;
}
.hero p.lead {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.85;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-note { font-size: .82rem; color: var(--text-3); margin-top: 14px; }

/* ---------- 8. 图标块 ---------- */
.ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 21px;
  margin-bottom: 12px;
  background: var(--brand-light);
}
.ico.blue   { background: var(--blue-light); }
.ico.warm   { background: var(--warm-light); }
.ico.purple { background: var(--purple-light); }
.ico.danger { background: var(--danger-light); }

/* ---------- 9. 统计数字 ---------- */
.stat { text-align: center; padding: 18px 10px; }
.stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.2;
  letter-spacing: -.5px;
}
.stat-label { font-size: .86rem; color: var(--text-2); margin-top: 4px; }

/* ---------- 10. 危机提示 ---------- */
.crisis-bar {
  background: linear-gradient(90deg, var(--danger-light), var(--warm-light));
  border: 1px solid rgba(217,83,79,.3);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.crisis-bar .ico { margin: 0; flex-shrink: 0; }
.crisis-bar .txt { flex: 1; min-width: 200px; }
.crisis-bar strong { display: block; font-size: 1rem; }
.crisis-bar span { font-size: .86rem; color: var(--text-2); }

.crisis-float {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: .86rem;
  padding: 11px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(217,83,79,.42);
  text-decoration: none;
}
.crisis-float:hover { color: #fff; text-decoration: none; background: #c9302c; }

/* ---------- 11. 折叠面板 ---------- */
details.acc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
details.acc > summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--text-3);
  font-weight: 400;
  font-size: 1.1rem;
}
details.acc[open] > summary::after { content: "－"; }
details.acc[open] > summary { color: var(--brand); border-bottom: 1px solid var(--border); }
details.acc .acc-body { padding: 16px 18px; font-size: .95rem; }
details.acc .acc-body > :last-child { margin-bottom: 0; }

/* ---------- 12. 标签 ---------- */
.tag {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  margin: 0 6px 6px 0;
}
.tag.blue   { background: var(--blue-light);   color: var(--blue); }
.tag.warm   { background: var(--warm-light);   color: #b9702b; }
.tag.danger { background: var(--danger-light); color: var(--danger); }
.tag.purple { background: var(--purple-light); color: var(--purple); }

/* ---------- 13. 量表 ---------- */
.scale-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.scale-head h3 { margin: 0; }
.scale-desc { font-size: .88rem; color: var(--text-2); margin: 6px 0 0; }

.q-item { padding: 15px 0; border-bottom: 1px solid var(--border); }
.q-item:last-of-type { border-bottom: none; }
.q-text { font-weight: 600; font-size: .97rem; margin-bottom: 11px; }
.q-text .q-no { color: var(--text-3); font-weight: 500; margin-right: 6px; }

.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opts label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .86rem;
  cursor: pointer;
  background: var(--bg-alt);
  color: var(--text-2);
  transition: all .13s;
  user-select: none;
}
.opts label:hover { border-color: var(--brand); color: var(--brand); }
.opts input { position: absolute; opacity: 0; width: 0; height: 0; }
.opts label.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.opts label.on.opt-danger { background: var(--danger); border-color: var(--danger); }

.progress-track {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand), var(--blue));
  border-radius: 99px;
  transition: width .3s ease;
}
.progress-txt { font-size: .82rem; color: var(--text-2); text-align: right; }

/* 结果卡片 */
.result {
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 20px;
  border: 1px solid var(--border);
  background: var(--card);
}
.result .r-score { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.result .r-level { font-size: 1.15rem; font-weight: 700; margin: 8px 0 4px; }
.result .r-sub { font-size: .85rem; color: var(--text-2); }

.result.lv-none { border-left: 5px solid var(--brand); }
.result.lv-mild { border-left: 5px solid var(--warm); }
.result.lv-mid  { border-left: 5px solid var(--danger); }
.result.lv-high { border-left: 5px solid #a02020; background: var(--danger-light); }
.result.lv-none .r-score { color: var(--brand); }
.result.lv-mild .r-score { color: var(--warm); }
.result.lv-mid  .r-score { color: var(--danger); }
.result.lv-high .r-score { color: #a02020; }

.r-bars { margin-top: 16px; font-size: .85rem; color: var(--text-2); }
.r-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.r-bar .b-name { width: 90px; flex-shrink: 0; }
.r-bar .b-track { flex: 1; height: 7px; background: var(--border); border-radius: 99px; overflow: hidden; }
.r-bar .b-fill { height: 100%; background: var(--warm); border-radius: 99px; }

/* ---------- 14. 呼吸放松 ---------- */
.breath-stage { display: grid; place-items: center; padding: 26px 0 30px; }
.breath-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 60%),
              linear-gradient(135deg, var(--brand), var(--blue));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  transition: transform 4s cubic-bezier(.4,0,.4,1);
  box-shadow: 0 0 0 12px rgba(47,158,143,.14);
  will-change: transform;
}
.breath-circle.in   { transform: scale(1.32); }
.breath-circle.hold { transform: scale(1.32); }
.breath-circle.out  { transform: scale(1); transition-duration: 8s; }
.breath-count { font-size: .9rem; font-weight: 500; opacity: .9; display: block; margin-top: 2px; }

/* ---------- 15. 情绪日记 ---------- */
.mood-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.mood-picker button {
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  font-size: 24px;
  line-height: 1;
  display: grid; place-items: center;
  transition: all .14s;
  padding: 0;
}
.mood-picker button:hover { transform: translateY(-2px); border-color: var(--brand); }
.mood-picker button.sel {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 2px rgba(47,158,143,.3);
}

.journal-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.journal-item:last-child { border-bottom: none; }
.journal-item .j-emo { font-size: 22px; line-height: 1.4; flex-shrink: 0; }
.journal-item .j-main { flex: 1; min-width: 0; }
.journal-item .j-date { font-size: .76rem; color: var(--text-3); }
.journal-item .j-text { font-size: .92rem; white-space: pre-wrap; }
.journal-item .j-del {
  background: none; border: none; color: var(--text-3);
  font-size: 17px; padding: 2px 6px; border-radius: 8px; flex-shrink: 0; line-height: 1;
}
.journal-item .j-del:hover { color: var(--danger); background: var(--danger-light); }

textarea, input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  resize: vertical;
}
textarea:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47,158,143,.16);
}
label.fld { display: block; font-size: .87rem; font-weight: 600; margin: 14px 0 6px; }
label.fld span { font-weight: 400; color: var(--text-3); }

/* ---------- 16. 求助资源 ---------- */
.hotline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-bottom: 10px;
}
.hotline .h-num {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hotline .h-info { flex: 1; min-width: 0; }
.hotline .h-name { font-weight: 600; font-size: .95rem; }
.hotline .h-desc { font-size: .82rem; color: var(--text-2); }
.hotline .h-call {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .86rem;
  white-space: nowrap;
}
.hotline .h-call:hover { background: var(--brand); color: #fff; text-decoration: none; }
.hotline.critical { border-color: rgba(217,83,79,.4); }
.hotline.critical .h-num { color: var(--danger); }
.hotline.critical .h-call { background: var(--danger-light); color: var(--danger); }
.hotline.critical .h-call:hover { background: var(--danger); color: #fff; }

@media (max-width: 520px) {
  .hotline { flex-wrap: wrap; }
  .hotline .h-call { width: 100%; text-align: center; }
}

.step-list { list-style: none; padding: 0; counter-reset: s; }
.step-list li { position: relative; padding: 0 0 20px 44px; counter-increment: s; }
.step-list li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 1px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: .88rem;
  display: grid; place-items: center;
}
.step-list li::after {
  content: "";
  position: absolute;
  left: 14.5px; top: 34px; bottom: 4px;
  width: 1.5px;
  background: var(--border);
}
.step-list li:last-child { padding-bottom: 0; }
.step-list li:last-child::after { display: none; }
.step-list strong { display: block; }

/* ---------- 17. 页脚 ---------- */
.site-footer {
  margin-top: 40px;
  padding: 32px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: .86rem;
  color: var(--text-2);
}
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 26px; margin-bottom: 22px; }
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-cols { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .9rem; margin: 0 0 10px; color: var(--text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.9;
}

/* ---------- 18. 杂项 ---------- */
.breadcrumb { font-size: .82rem; color: var(--text-3); margin: 18px 0 0; }
.breadcrumb a { color: var(--text-2); }

.page-head { padding: 34px 0 6px; }
.page-head h1 { font-size: clamp(1.5rem, 4.4vw, 2.05rem); margin-bottom: .3em; }
.page-head p { color: var(--text-2); max-width: 700px; }

.note {
  background: var(--blue-light);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 13px 16px;
  font-size: .88rem;
  color: var(--text-2);
  margin: 16px 0;
}
.note.warn  { background: var(--warm-light);   border-color: var(--warm); }
.note.alert { background: var(--danger-light); border-color: var(--danger); }
.note strong { color: var(--text); }

.muted { color: var(--text-2); }
.small { font-size: .85rem; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: .85rem;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.hidden { display: none !important; }

.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.tbl th { color: var(--text-2); font-weight: 600; background: var(--bg-alt); }
.tbl tr:last-child td { border-bottom: none; }

blockquote {
  margin: 16px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--brand);
  color: var(--text-2);
  font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ===========================================================
   19. 移动端适配（重点）
   =========================================================== */

/* 全局防横向溢出 + 触摸体验 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  -webkit-tap-highlight-color: rgba(47, 158, 143, .15);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.wrap {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.site-header {
  padding-top: env(safe-area-inset-top);
}
.crisis-float {
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
}

/* 正文列表缩进收紧，避免小屏被挤扁 */
.card ul, .card ol, .acc-body ul, .acc-body ol, .note ul, .note ol {
  padding-left: 1.15em;
  margin-bottom: 1em;
}
.card li, .acc-body li { margin-bottom: .35em; }

/* 表格：小屏可横向滚动 */
.tbl { min-width: 420px; }
.card > .tbl, .table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 点击区域不小于 44px */
@media (pointer: coarse) {
  .nav a     { min-height: 44px; display: flex; align-items: center; }
  .opts label { padding: 9px 14px; }
  .chip      { padding: 9px 15px; }
  .hotline .h-call { padding: 11px 18px; }
  .icon-btn  { width: 40px; height: 40px; }
}

/* 移动端导航：改为贴在 header 下方的绝对定位面板（更可靠） */
@media (max-width: 860px) {
  .site-header { position: sticky; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    margin-left: 0;
    max-height: calc(100vh - var(--header-h) - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: none;
  }
  .nav.open { animation: navIn .16s ease; }
  @keyframes navIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* 平板 / 手机：间距与字号收敛 */
@media (max-width: 860px) {
  .hero { padding: 38px 0 34px; }
  .hero p.lead { font-size: 1rem; }
  .section { padding: 32px 0; }
  .card { padding: 17px; }
  .card-pad-lg { padding: 19px; }
  .page-head { padding: 24px 0 4px; }
  .result { padding: 18px; }
  .result .r-score { font-size: 2.1rem; }
  .footer-cols { gap: 20px; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .section { padding: 26px 0; }
  .card { padding: 15px; border-radius: 14px; }
  .card-pad-lg { padding: 16px; }

  h1 { font-size: 1.42rem; }
  h2 { font-size: 1.22rem; margin-top: 1.5em; }
  h3 { font-size: 1.06rem; }

  .hero { padding: 30px 0 26px; }
  .hero h1 { letter-spacing: -.3px; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: 12px 20px; }
  .btn-block-sm { width: 100%; }

  .stat-num { font-size: 1.6rem; }
  .stat { padding: 12px 6px; }
  .stat-label { font-size: .78rem; }

  /* 统计卡片保持两列，不要拉成长条 */
  .grid-stats { grid-template-columns: repeat(2, 1fr) !important; }

  .breath-circle { width: 152px; height: 152px; font-size: 1.05rem; }
  .breath-stage { padding: 18px 0 22px; }

  .mood-picker button { width: 46px; height: 46px; font-size: 21px; }

  .opts { gap: 6px; }
  .opts label { font-size: .82rem; padding: 8px 12px; }

  .r-bar .b-name { width: 62px; font-size: .78rem; }

  .crisis-float { font-size: .82rem; padding: 10px 14px; right: 12px; }

  .hotline { padding: 14px; gap: 10px; }
  .hotline .h-num { font-size: 1.1rem; }

  .tbl { font-size: .8rem; min-width: 380px; }
  .tbl th, .tbl td { padding: 8px 9px; }

  .breadcrumb { font-size: .78rem; }
  .chips { gap: 6px; margin: 10px 0; }
  .chip { font-size: .8rem; }
}

/* 超小屏（320px 级别） */
@media (max-width: 380px) {
  .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .card, .card-pad-lg { padding: 13px; }
  .hero h1 { font-size: 1.3rem; }
  .stat-num { font-size: 1.4rem; }
  .breath-circle { width: 132px; height: 132px; font-size: .95rem; }
  .opts label { font-size: .79rem; padding: 7px 10px; }
}

/* 横屏 / 矮屏时菜单不被裁切 */
@media (max-height: 480px) {
  .nav { max-height: calc(100vh - var(--header-h) - 8px); }
}

/* 表单控件触摸尺寸 */
input[type="range"] {
  height: 34px;
  margin: 4px 0 2px;
  touch-action: pan-y;
}

.opts label { position: relative; overflow: hidden; }

/* ===========================================================
   20. 睡眠记录 & 折线图
   =========================================================== */

/* 日期 / 时间输入框，与文本框统一外观 */
input[type="date"], input[type="time"] {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]:focus, input[type="time"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 158, 143, .16);
}
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] { color-scheme: dark; }

.sl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .sl-row { grid-template-columns: 1fr 1fr; } .sl-row > :first-child { grid-column: 1 / -1; } }

/* 质量选择 */
.q-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.q-picker button {
  flex: 1 1 0;
  min-width: 58px;
  min-height: 44px;
  border-radius: 11px;
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  transition: all .14s;
}
.q-picker button .q-emo { font-size: 17px; line-height: 1; }
.q-picker button:hover { border-color: var(--brand); color: var(--brand); }
.q-picker button.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.q-picker button.on .q-emo { filter: none; }

/* 时长预览 */
.sl-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--brand-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: .9rem;
}
.sl-preview b { font-size: 1.15rem; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.sl-preview .bad { color: var(--danger); }

/* ---- 图表 ---- */
.chart-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}
.chart-head h3 { margin: 0; font-size: 1.02rem; }
.chart-head .chip-group { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.chart-box {
  width: 100%;
  overflow: hidden;
  margin-top: 6px;
}
.chart-box svg { display: block; width: 100%; height: auto; }

.ch-grid  { stroke: var(--border); stroke-width: 1; }
.ch-axis  { stroke: var(--border); stroke-width: 1.5; }
.ch-txt   { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.ch-txt.last { fill: var(--text-2); font-weight: 700; }
.ch-area  { fill: var(--brand); opacity: .13; }
.ch-line  { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot   { fill: var(--card); stroke: var(--brand); stroke-width: 2.5; }
.ch-dot.last { fill: var(--brand); stroke: var(--card); stroke-width: 2.5; }
.ch-val   { fill: var(--text-2); font-size: 10.5px; font-family: var(--font); font-weight: 600; }
.ch-empty { fill: var(--text-3); font-size: 13px; font-family: var(--font); }

.sl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 420px) { .sl-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.sl-stat {
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
}
.sl-stat .n { font-size: 1.25rem; font-weight: 800; color: var(--brand); line-height: 1.25; font-variant-numeric: tabular-nums; }
.sl-stat .n.warn { color: var(--warm); }
.sl-stat .l { font-size: .74rem; color: var(--text-2); margin-top: 2px; }

.sl-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sl-item:last-child { border-bottom: none; }
.sl-item .sl-date {
  flex-shrink: 0;
  width: 62px;
  font-size: .78rem;
  color: var(--text-3);
  line-height: 1.35;
  padding-top: 2px;
}
.sl-item .sl-date b { display: block; font-size: .95rem; color: var(--text); }
.sl-item .sl-main { flex: 1; min-width: 0; }
.sl-item .sl-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sl-item .sl-dur { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.sl-item .sl-dur.short { color: var(--danger); }
.sl-item .sl-q { font-size: .8rem; color: var(--text-2); }
.sl-item .sl-time { font-size: .78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sl-item .sl-note { font-size: .85rem; color: var(--text-2); margin-top: 3px; overflow-wrap: break-word; }
.sl-item .j-del {
  background: none; border: none; color: var(--text-3);
  font-size: 17px; padding: 4px 8px; border-radius: 8px; flex-shrink: 0; line-height: 1;
}
.sl-item .j-del:hover, .sl-item .j-del:active { color: var(--danger); background: var(--danger-light); }