@charset "utf-8";
/* =====================================================================
   设计令牌 —— 改 :root 即全站换色（机构可以自己换皮肤，不动业务代码）
   移动端优先：基础样式就是 414px 以内的形态，>=720px 只是把它摆得更宽。
   不引外部字体、不引 CDN：私有化部署与弱网环境要能离线跑。

   视觉取向：暖纸底 + 深松绿主色 + 陶土色点缀（只用于价格与求助）。
   层级靠"发丝描边 + 双层投影"拉开，不靠重色块堆。
   ===================================================================== */
:root {
  --c-primary:      #2f6f62;
  --c-primary-deep: #1f5348;
  --c-primary-ink:  #235047;
  --c-primary-soft: #e7f0ed;
  --c-primary-mist: #f1f7f5;
  --c-accent:       #c16a52;
  --c-accent-soft:  #fbe9e2;
  --c-accent-ink:   #7d3a2c;
  --c-bg:           #f6f4ef;
  --c-bg-tint:      #f2efe8;
  --c-surface:      #ffffff;
  --c-surface-2:    #faf9f6;
  --c-ink:          #1e2529;
  --c-ink-2:        #48545b;
  --c-muted:        #7c878e;
  --c-line:         #e3ded3;
  --c-line-2:       #eeeae1;
  --c-hair:         rgba(30, 37, 41, .06);
  --c-danger:       #b04238;
  --c-warn:         #9d6a0d;
  --c-ok:           #2a7a4c;
  --c-ring:         rgba(47, 111, 98, .18);

  --grad-brand:  linear-gradient(150deg, #3a7d6e 0%, #24584d 62%, #1c4a41 100%);

  /* 水晶按钮：一层玻璃面 + 顶部高光弧 + 内上亮线/内下暗沿 + 同色外发光。
     换肤只改这 6 个变量，按钮/徽标/导航条会一起变。 */
  --glass-face:    linear-gradient(180deg, #4d9082 0%, #2f6f62 54%, #205348 100%);
  --glass-face-wx: linear-gradient(180deg, #2ecb7a 0%, #07a758 54%, #048a49 100%);
  --glass-sheen:   linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 44%, rgba(255,255,255,0) 47%);
  --glass-arc:     radial-gradient(130% 68% at 50% -22%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%);
  --glass-edge:    inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.14), inset 0 -12px 16px rgba(0,0,0,.10);
  --glass-glow:    0 1px 1px rgba(28,38,44,.10), 0 8px 18px -6px rgba(31,83,72,.58);
  --glass-press:   inset 0 1px 0 rgba(255,255,255,.20), inset 0 3px 8px rgba(0,0,0,.22), 0 1px 1px rgba(28,38,44,.10);
  --grad-soft:   linear-gradient(160deg, var(--c-primary-mist) 0%, #ffffff 100%);
  --grad-chip:   linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));

  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-pill: 999px;
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 28px;  --sp-7: 40px;  --sp-8: 56px;

  /* 双层投影：一层贴地、一层散开，卡片才不会像贴纸 */
  --sh-1: 0 1px 1px rgba(28,38,44,.04), 0 2px 6px rgba(28,38,44,.05);
  --sh-2: 0 1px 1px rgba(28,38,44,.04), 0 6px 18px rgba(28,38,44,.07);
  --sh-3: 0 2px 3px rgba(28,38,44,.05), 0 14px 34px rgba(28,38,44,.11);
  --sh-inset-hi: inset 0 1px 0 rgba(255,255,255,.55);

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 25px; --fs-3xl: 30px;
  --lh-tight: 1.28;

  --h-nav: 58px;
  --maxw: 720px;
  --t-fast: .16s cubic-bezier(.4, 0, .2, 1);
  --t-med: .28s cubic-bezier(.4, 0, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--c-ink);
  font: var(--fs-md)/1.75 var(--font);
  background:
    radial-gradient(120% 55% at 50% 0%, var(--c-bg-tint) 0%, rgba(242,239,232,0) 70%),
    var(--c-bg);
  background-attachment: fixed;
  padding-bottom: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--c-primary-ink); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary-deep); }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0 0 var(--sp-2); font-weight: 650; line-height: var(--lh-tight); letter-spacing: -.2px; }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
small { color: var(--c-muted); font-size: var(--fs-sm); }
ul { margin: 0; padding-left: 1.1em; }
::selection { background: var(--c-primary-soft); color: var(--c-primary-deep); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.section { margin: var(--sp-6) 0; }
.section > h1:first-child, .section > h2:first-child { letter-spacing: -.3px; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.wrapflex { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.muted { color: var(--c-muted); }
.ink2 { color: var(--c-ink-2); }
.tiny { font-size: var(--fs-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .6px;
  color: var(--c-primary-ink); text-transform: none;
}
.eyebrow::before {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: var(--c-accent); flex: none;
}

/* ---------- 卡片 ---------- */
.card {
  display: block; /* 卡片常被当成 <a class="card"> 用：inline 的话背景只画文字那一小条 */
  background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); border: 1px solid var(--c-line-2);
  padding: var(--sp-4);
  transition: box-shadow var(--t-med), transform var(--t-fast), border-color var(--t-med);
}
a.card:hover { text-decoration: none; }
a.card:active { transform: scale(.992); }
a.card { box-shadow: var(--sh-1); }
a.card:hover { box-shadow: var(--sh-2); border-color: var(--c-line); }
.card-flat {
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.card-pad-0 { padding: 0; overflow: hidden; }
.card-tint { background: var(--grad-soft); border-color: #dfeae5; }

.hero {
  position: relative; overflow: hidden;
  background: var(--grad-brand); color: #fff;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* 水印：一支放大的羽毛压在右下，比纯色块更有"这是心理服务"的气质 */
.hero::after {
  content: ""; position: absolute; right: -34px; bottom: -46px; width: 230px; height: 230px;
  background: var(--grad-chip); opacity: .5; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 71%) no-repeat 50% 50% / 100% 100%;
          mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 71%) no-repeat 50% 50% / 100% 100%;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: var(--fs-3xl); letter-spacing: -.6px; line-height: 1.24; margin-bottom: var(--sp-3); }
.hero .muted { color: rgba(255,255,255,.8); font-size: var(--fs-md); }

/* hero 里的玻璃质感小标签与反白主按钮：深底上再放深绿按钮会糊成一片 */
.hero .pill { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff; }
.hero .pill:hover { background: rgba(255,255,255,.2); }
.hero .eyebrow { color: rgba(255,255,255,.82); }
.hero .btn {
  background-color: rgba(255,255,255,.96);
  background-image: var(--glass-sheen), linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  border-color: rgba(255,255,255,.9); color: var(--c-primary-ink); text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(31,83,72,.14),
              0 2px 3px rgba(16,32,28,.20), 0 14px 30px -10px rgba(10,26,22,.55);
}
.hero .btn:hover { color: var(--c-primary-deep); background-color: #fff; filter: none; }
.hero .btn:active { box-shadow: inset 0 2px 8px rgba(31,83,72,.26), 0 1px 2px rgba(16,32,28,.2); }
.hero .btn::after { content: "›"; font-size: 19px; line-height: 0; opacity: .55; margin-left: 2px; }

/* ---------- 品牌标识 ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--fs-lg); letter-spacing: .2px; color: var(--c-primary-ink); }
.brand:hover { color: var(--c-primary-deep); }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none; padding: 3px;
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-sub { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: var(--c-muted); align-self: flex-end; padding-bottom: 3px; }

/* ---------- 咨询师卡 ---------- */
.counselor-card { display: flex; gap: var(--sp-3); align-items: flex-start; }
.avatar {
  width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; flex: none;
  background: var(--c-primary-soft); border: 1px solid var(--c-line-2);
}
.avatar-lg { width: 88px; height: 88px; border-radius: var(--r-lg); }
.c-name { font-size: var(--fs-lg); font-weight: 650; }
.c-title { color: var(--c-muted); font-size: var(--fs-sm); margin-top: 2px; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary-ink);
  font-size: var(--fs-xs); line-height: 1.65; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
}
.pill-line { background: transparent; border-color: var(--c-line); color: var(--c-ink-2); }
.pill-warn { background: #fbf1de; color: var(--c-warn); border-color: #f0dfbd; }
.pill-ok   { background: #e6f2ea; color: var(--c-ok); border-color: #cfe5d8; }
.pill-bad  { background: #fae9e6; color: var(--c-danger); border-color: #f0d2cc; }
.pill-accent { background: var(--c-accent-soft); color: var(--c-accent); border-color: #f2d8cd; }

.price { color: var(--c-accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 按钮（水晶质感） ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.26);
  background-color: var(--c-primary);
  background-image: var(--glass-sheen), var(--glass-face);
  color: #fff; font-size: var(--fs-md); font-weight: 650; font-family: inherit;
  line-height: 1.4; letter-spacing: .2px; text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: var(--glass-edge), var(--glass-glow);
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
  transition: transform var(--t-fast), box-shadow var(--t-med), filter var(--t-med), opacity var(--t-med);
}
/* 顶部那道弧形高光：水晶感主要来自它，而不是渐变本身 */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--glass-arc); opacity: .95;
}
.btn:hover { color: #fff; text-decoration: none; filter: brightness(1.06) saturate(1.05); transform: translateY(-1px);
  box-shadow: var(--glass-edge), 0 2px 2px rgba(28,38,44,.10), 0 12px 24px -8px rgba(31,83,72,.62); }
.btn:active { transform: translateY(0) scale(.982); filter: brightness(.96);
  box-shadow: var(--glass-press), 0 1px 2px rgba(28,38,44,.12); }
.btn-block { display: flex; width: 100%; }

/* 微信一键登录：沿用同一套水晶层，只把玻璃面换成微信绿 —— 两个按钮要像同一家店做的 */
.btn-wechat {
  background-image: var(--glass-sheen), var(--glass-face-wx);
  box-shadow: var(--glass-edge), 0 1px 1px rgba(28,38,44,.10), 0 8px 18px -6px rgba(7,167,88,.58);
}
.btn-wechat:hover {
  box-shadow: var(--glass-edge), 0 2px 2px rgba(28,38,44,.10), 0 13px 25px -8px rgba(7,167,88,.66);
}

/* 手机号登录收起来：它只服务老师和管理员，不该跟一键登录抢位置 */
.alt-login { margin-top: var(--sp-5); }
.alt-login > summary {
  list-style: none; cursor: pointer; text-align: center;
  font-size: var(--fs-sm); color: var(--c-muted); padding: 11px var(--sp-4);
  border-radius: var(--r-pill); border: 1px dashed var(--c-line);
}
.alt-login > summary::-webkit-details-marker { display: none; }
.alt-login[open] > summary { color: var(--c-primary-ink); border-style: solid; background: var(--c-primary-mist); }

/* 浅色玻璃：半透 + 背后模糊，压在浅底上仍有厚度，但字色必须够深 */
.btn-ghost {
  background-color: rgba(255,255,255,.62);
  background-image: var(--glass-sheen), linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  border-color: rgba(255,255,255,.85); color: var(--c-primary-ink);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(31,83,72,.10),
              0 1px 1px rgba(28,38,44,.06), 0 6px 16px -8px rgba(31,83,72,.30);
  text-shadow: none;
}
.btn-ghost:hover { color: var(--c-primary-deep); filter: brightness(1.02); background-color: rgba(255,255,255,.8); }
.btn-ghost:active { box-shadow: inset 0 2px 7px rgba(31,83,72,.20), 0 1px 1px rgba(28,38,44,.06); }

/* 淡绿玻璃：次级主操作 */
.btn-soft {
  background-color: #dcece6;
  background-image: var(--glass-sheen), linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 48%);
  border-color: rgba(255,255,255,.9); color: var(--c-primary-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(31,83,72,.12),
              0 1px 1px rgba(28,38,44,.05), 0 6px 16px -8px rgba(31,83,72,.34);
  text-shadow: none;
}
.btn-soft:hover { color: var(--c-primary-deep); background-color: #cfe6df; }

/* 危险操作：同样有玻璃厚度，但用低饱和红，不抢主色 */
.btn-danger {
  background-color: #f6e6e2;
  background-image: var(--glass-sheen), linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 48%);
  border-color: rgba(255,255,255,.9); color: var(--c-danger);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(176,66,56,.14),
              0 1px 1px rgba(28,38,44,.05), 0 6px 16px -8px rgba(176,66,56,.32);
  text-shadow: none;
}
.btn-danger:hover { background-color: #f2dad4; color: var(--c-danger); }
.btn-sm { padding: 8px 15px; font-size: var(--fs-sm); }
.btn-lg { padding: 15px 26px; font-size: var(--fs-lg); }
.btn[disabled], .btn.is-off {
  background-image: none; background-color: var(--c-line-2); color: var(--c-muted);
  border-color: var(--c-line); box-shadow: none; text-shadow: none; pointer-events: none;
}

/* ---------- 表单 ---------- */
.field { margin-bottom: var(--sp-4); }
.field > label { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); margin-bottom: 6px; font-weight: 600; letter-spacing: .1px; }
.req::after { content: "＊"; color: var(--c-danger); margin-left: 2px; }
input[type=text], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=email], input[type=search], select, textarea {
  /* 16px 是硬要求：iOS Safari 对小于 16px 的输入框会在聚焦时把页面放大，
     用户填完还得手动缩回去 —— 移动端表单第一号体验事故 */
  width: 100%; padding: 12px 13px; font: inherit; font-size: 16px; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); box-shadow: var(--sh-inset-hi);
  -webkit-appearance: none; appearance: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: #a4aeb4; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-ring);
}
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: #d5cec0; }
.check { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; }
.check input { margin-top: 3px; flex: none; width: auto; accent-color: var(--c-primary); }
.err { color: var(--c-danger); font-size: var(--fs-sm); margin-top: 5px; }
.hint { color: var(--c-muted); font-size: var(--fs-xs); margin-top: 5px; line-height: 1.6; }
fieldset { border: none; margin: 0; padding: 0; }

/* ---------- 时段选择 ---------- */
.day-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 0 var(--sp-2); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.day-strip::-webkit-scrollbar { height: 3px; }
.day-cell {
  flex: none; min-width: 64px; padding: 9px 6px 8px; text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
a.day-cell:hover { text-decoration: none; border-color: var(--c-line); }
a.day-cell:active { transform: scale(.97); }
.day-cell.on {
  border-color: rgba(255,255,255,.26);
  background-color: var(--c-primary);
  background-image: var(--glass-sheen), var(--glass-face);
  color: #fff; box-shadow: var(--glass-edge), 0 8px 18px -8px rgba(31,83,72,.6);
}
.day-cell .dw { font-size: var(--fs-xs); color: var(--c-muted); }
.day-cell .dd { font-size: var(--fs-lg); font-weight: 650; line-height: 1.3; letter-spacing: -.3px; }
.day-cell .n  { font-size: 11px; color: var(--c-ok); font-weight: 600; }
.day-cell.off .n { color: var(--c-muted); font-weight: 400; }
.day-cell.on .dw { color: rgba(255,255,255,.8); }
.day-cell.on .n { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: var(--sp-2); }
.slot {
  padding: 10px 6px; text-align: center; border-radius: var(--r-sm);
  border: 1px solid var(--c-line-2); background: var(--c-surface); box-shadow: var(--sh-1);
  font-variant-numeric: tabular-nums; cursor: pointer; font-weight: 500;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
a.slot:hover { text-decoration: none; border-color: var(--c-primary); box-shadow: var(--sh-2); }
a.slot:active { transform: scale(.97); }
.slot.on {
  border-color: rgba(255,255,255,.9); background-color: #dcece6;
  background-image: var(--glass-sheen), linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 50%);
  color: var(--c-primary-ink); font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(31,83,72,.12), 0 6px 14px -8px rgba(31,83,72,.4);
}
.slot.gone {
  color: #b9c0c4; background: var(--c-surface-2); cursor: not-allowed;
  border-style: dashed; border-color: var(--c-line); box-shadow: none;
}
.slot.gone .tiny { color: #b9c0c4; }
.slot-empty {
  padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-muted);
  background: var(--c-surface-2); border: 1px dashed var(--c-line); border-radius: var(--r-sm);
}

/* ---------- 状态条 ---------- */
.steps { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--c-line); transition: background var(--t-med); }
.steps span.on { background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.status-bar {
  /* 正文态而非 flex：状态条里带链接时，flex 会把"去 [成员与角色] 推送链接"
     拆成三个 flex 项，链接在中间竖着换行（后台概览上真出现了） */
  display: block; padding: 11px 14px;
  border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-primary-ink);
  font-size: var(--fs-sm); line-height: 1.7; border: 1px solid #d7e7e1;
}
.status-bar.row { display: flex; align-items: center; gap: var(--sp-2); }
.status-bar a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.status-bar.warn { background: #fbf1de; color: var(--c-warn); border-color: #f0dfbd; }
.status-bar.bad  { background: #fae9e6; color: var(--c-danger); border-color: #f0d2cc; }
.status-bar.info { background: var(--c-surface-2); color: var(--c-ink-2); border-color: var(--c-line-2); }

/* ---------- 页头 / 底部导航 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246,244,239,.86); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-line-2);
}
.topbar-in { display: flex; align-items: center; gap: var(--sp-3); height: 56px; }
.topbar .spacer { flex: 1; }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: rgba(255,255,255,.9); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--c-line-2); box-shadow: 0 -6px 22px rgba(28,38,44,.06);
  padding: 4px 4px env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  flex: 1; text-align: center; padding: 6px 4px 5px; border-radius: var(--r-sm);
  color: var(--c-muted); font-size: 11px; letter-spacing: .2px;
  transition: color var(--t-fast), background var(--t-fast);
}
.bottom-nav a.on { color: var(--c-primary-ink); font-weight: 650; background: var(--c-primary-mist); }
.bottom-nav a:not(.on):active { background: var(--c-surface-2); }
.bottom-nav svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }

/* ---------- 紧急求助 ---------- */
.crisis-card {
  display: flex; gap: var(--sp-2); align-items: center; padding: 11px 13px;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
  border: 1px solid #f2d8cd; border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.crisis-bar {
  padding: var(--sp-4); background: linear-gradient(180deg, #fdf1ee, #fbe9e4);
  border: 1px solid #f3ddd6; border-radius: var(--r-md);
  color: var(--c-accent-ink); font-size: var(--fs-sm); text-align: center; line-height: 1.7;
}
.crisis-bar b { color: var(--c-danger); font-variant-numeric: tabular-nums; }
/* 流程页只留一行，不抢注意力 */
.crisis-bar.slim {
  padding: 10px var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-2);
  background: var(--c-surface-2); border-color: var(--c-line-2); border-radius: var(--r-sm);
}
.crisis-bar.slim b { color: var(--c-ink); }

/* ---------- 页脚 ---------- */
.footer {
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-4) var(--sp-7);
  color: var(--c-muted); font-size: var(--fs-xs); text-align: center;
  border-top: 1px solid var(--c-line-2);
  background: linear-gradient(180deg, rgba(242,239,232,.5), rgba(242,239,232,0));
}
.footer a { color: var(--c-ink-2); text-decoration: none; }
.footer a:hover { color: var(--c-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: var(--sp-2); }
.footer-brand .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
.footer-brand b { font-size: var(--fs-md); font-weight: 650; color: var(--c-ink-2); letter-spacing: .2px; }
.footer-tag { margin: 0 auto var(--sp-4); max-width: 30em; line-height: 1.7; }
.footer .links {
  display: flex; gap: var(--sp-2) var(--sp-4); justify-content: center; flex-wrap: wrap;
  margin: var(--sp-4) 0; padding-top: var(--sp-3); border-top: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}
.footer .legal { margin-top: var(--sp-3); line-height: 1.9; color: #9aa4aa; }
.footer .ver {
  display: inline-block; margin-top: var(--sp-3); padding: 3px 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink-2); font-size: 11px; letter-spacing: .3px;
}

/* ---------- 闪存 / 列表 / 表格 ---------- */
.flash {
  padding: 11px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm);
  margin-bottom: var(--sp-3); border: 1px solid transparent; line-height: 1.6;
}
.flash.ok   { background: #e6f2ea; color: var(--c-ok); border-color: #cfe5d8; }
.flash.err  { background: #fae9e6; color: var(--c-danger); border-color: #f0d2cc; }
.flash.info { background: var(--c-primary-soft); color: var(--c-primary-ink); border-color: #d7e7e1; }
.flash.warn { background: #fbf1de; color: var(--c-warn); border-color: #f0dfbd; }
.list-item {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line-2); transition: background var(--t-fast);
}
a.list-item:hover { text-decoration: none; background: var(--c-primary-mist); }
.list-item:last-child { border-bottom: none; }
.list-title { font-weight: 600; letter-spacing: -.1px; }
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px dashed var(--c-line-2); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: none; }
.kv b { font-weight: 600; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tbl th { text-align: left; color: var(--c-muted); font-weight: 600; padding: 9px 6px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); letter-spacing: .3px; }
table.tbl td { padding: 11px 6px; border-bottom: 1px solid var(--c-line-2); vertical-align: top; }
.badge-count {
  display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px;
  border-radius: 9px; background: var(--c-danger); color: #fff; font-size: 11px; text-align: center;
}

/* ---------- 排班段编辑 ---------- */
.seg-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.seg-row .seg-t { flex: 1 1 38%; min-width: 0; }
.seg-row .seg-mod { flex: 1 1 38%; min-width: 0; }
/* 地点单独占一整行：名字长的机构（"黄冈羽之源心理咨询中心"）也要看得全 */
.seg-row .seg-loc { flex: 1 1 100%; min-width: 0; }
.seg-row .seg-hint { flex: 0 0 auto; }
.seg-row:last-of-type { margin-bottom: 0; }

/* ---------- 留言对话 ---------- */
.im-flow { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.im-row { display: flex; }
.im-row.mine { justify-content: flex-end; }
.im-bubble {
  max-width: 82%; padding: 10px 13px; border-radius: var(--r-md);
  background: var(--c-surface); border: 1px solid var(--c-line-2); box-shadow: var(--sh-1);
}
.im-row.mine .im-bubble {
  background: var(--c-primary-soft); border-color: #d7e7e1;
}
.im-bubble.crisis { background: #fae9e6; border-color: #f0d2cc; }
.im-text { font-size: var(--fs-sm); line-height: 1.7; word-break: break-word; }
.im-meta { font-size: 11px; color: var(--c-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.im-form textarea { min-height: 76px; }

/* ---------- 空状态 ---------- */
.empty {
  text-align: center; color: var(--c-muted); padding: var(--sp-8) var(--sp-4);
  background: var(--c-surface-2); border: 1px dashed var(--c-line); border-radius: var(--r-md);
}
.empty svg { width: 46px; height: 46px; opacity: .3; margin: 0 auto var(--sp-3); display: block; }

/* ---------- 后台布局 ---------- */
.admin-nav { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) 0; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { flex: none; padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-surface);
  border: 1px solid var(--c-line-2); font-size: var(--fs-sm); box-shadow: var(--sh-1); color: var(--c-ink-2); }
.admin-nav a:hover { border-color: var(--c-line); color: var(--c-primary-ink); text-decoration: none; }
.admin-nav a.on {
  background-color: var(--c-primary);
  background-image: var(--glass-sheen), var(--glass-face);
  color: #fff; border-color: rgba(255,255,255,.26);
  box-shadow: var(--glass-edge), 0 6px 16px -6px rgba(31,83,72,.55); text-shadow: 0 1px 0 rgba(0,0,0,.16);
}
/* 还没上线的模块：标出来但不给链接 —— 挂一个 500 的入口比不挂更伤信任 */
.admin-nav-soon { flex: none; padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm);
  color: #bfc6ca; border: 1px dashed var(--c-line); background: transparent; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
/* grid 子项默认 min-width:auto，里面的输入框会把列撑破（预约表单在 414px 下真溢出过） */
.grid-2 > * { min-width: 0; }
.metric {
  background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  padding: var(--sp-4); box-shadow: var(--sh-1); transition: box-shadow var(--t-med), transform var(--t-fast);
}
a.metric:hover { text-decoration: none; box-shadow: var(--sh-2); transform: translateY(-1px); }
.metric .v { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.metric .tiny { margin-top: 2px; }
.tip {
  background: var(--c-primary-mist); border-left: 3px solid var(--c-primary);
  padding: var(--sp-3); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs); color: var(--c-ink-2); line-height: 1.75;
}

/* ---------- 心理健康测评 ---------- */
.qgroup { margin-bottom: var(--sp-2); }
.qitem { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line-2); }
.qstem { font-size: var(--fs-sm); line-height: 1.6; color: var(--c-ink); }
.qstem .qno { color: var(--c-muted); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: var(--fs-xs); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.opt { position: relative; flex: 1 1 auto; min-width: 54px; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.opt span { display: block; text-align: center; padding: 8px 6px; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--c-ink-2); background: var(--c-surface);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.opt:hover span { border-color: var(--c-primary); }
.opt input:checked + span {
  border-color: rgba(255,255,255,.26); background-color: var(--c-primary);
  background-image: var(--glass-sheen), var(--glass-face);
  color: #fff; font-weight: 650; text-shadow: 0 1px 0 rgba(0,0,0,.16);
  box-shadow: var(--glass-edge), 0 6px 14px -6px rgba(31,83,72,.55);
}
.opt input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.opt:active span { transform: scale(.97); }
.qpage { display: none; }
.qpage.on { display: block; }
/* 没 JS 也要能做完：全部平铺，按钮退化成提交 */
html:not(.has-js) .qpage { display: block; }
html:not(.has-js) .qpager { display: none; }
.qbar { height: 5px; background: var(--c-line-2); border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-2) 0; }
.qbar i { display: block; height: 100%; background: var(--grad-brand); border-radius: var(--r-pill); transition: width var(--t-med); }
.qsticky { position: sticky; top: 56px; z-index: 4; background: rgba(246,244,239,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-line-2); }
.meter { height: 7px; border-radius: var(--r-pill); background: var(--c-line-2); overflow: hidden; margin-top: 7px; }
.meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-primary); transition: width var(--t-med); }
.meter.watch i { background: var(--c-warn); }
.meter.severe i { background: var(--c-danger); }
.factor-row { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line-2); }
.factor-row:last-child { border-bottom: none; }
.crit-note { border-left: 3px solid var(--c-danger); background: #fae9e6; padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-xs); color: var(--c-danger); margin-top: 6px; }

/* ---------- 桌面档（同一套代码，PC 上只是更宽） ---------- */
@media (min-width: 720px) {
  body { padding-bottom: var(--sp-7); }
  .bottom-nav { position: static; justify-content: center; box-shadow: none; border-top: 1px solid var(--c-line-2); }
  .bottom-nav a { flex: none; min-width: 120px; }
  .grid-2 { grid-template-columns: repeat(4, 1fr); }
  .hero { padding: var(--sp-8) var(--sp-7); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .qsticky { top: 0; }
}

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