/* ============================================================
   居家上门随访系统 · 设计系统 v1.0
   ------------------------------------------------------------
   设计取向：专业、克制、有温度
   - 主色用「深青绿」而非医疗蓝：有照护感，避开政务系统的冰冷
   - 大量留白 + 极轻阴影 + 大圆角，减少"后台系统"的压迫感
   - 数字统一 tabular-nums，体征表格对齐才好看
   - 所有尺寸走 CSS 变量，改一处全站生效
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 品牌 */
  --brand:        #0E7268;
  --brand-deep:   #0B5D55;
  --brand-press:  #094A44;
  --brand-50:     #EAF6F4;
  --brand-100:    #D3EBE7;
  --brand-ink:    #064039;

  /* 强调（待办 / 首次 / 提醒） */
  --accent:       #C2710C;
  --accent-50:    #FDF3E3;
  --accent-100:   #F8E3BE;

  /* 中性 */
  --ink:          #16211F;
  --ink-2:        #46564F;
  --ink-3:        #71827C;
  --ink-4:        #9AA9A4;
  --line:         #E3EAE7;
  --line-2:       #CFDAD6;
  --bg:           #F4F7F6;
  --surface:      #FFFFFF;
  --surface-2:    #FAFCFB;

  /* 语义 */
  --danger:       #B3382C;
  --danger-50:    #FBEDEA;
  --danger-100:   #F5D2CC;
  --warn:         #9A6206;
  --warn-50:      #FDF4E4;
  --ok:           #0E7268;
  --ok-50:        #EAF6F4;
  --info:         #2C5F8A;
  --info-50:      #EBF2F8;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 阴影（多层极轻，避免"浮起来"的廉价感） */
  --sh-xs: 0 1px 2px rgba(22,33,31,.05);
  --sh-sm: 0 1px 3px rgba(22,33,31,.06), 0 1px 2px rgba(22,33,31,.04);
  --sh:    0 4px 14px rgba(22,33,31,.07), 0 1px 3px rgba(22,33,31,.04);
  --sh-lg: 0 12px 32px rgba(22,33,31,.10), 0 2px 8px rgba(22,33,31,.04);
  --sh-press: inset 0 1px 2px rgba(22,33,31,.08);

  /* 字号 */
  --fs-xs:  11.5px;
  --fs-sm:  13px;
  --fs-md:  14.5px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* 动效 */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .22s;

  /* 布局 */
  --page-max: 520px;
  --sidebar-w: 226px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC",
              "HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  font-size:var(--fs-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--brand); text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
table{ border-collapse:collapse; width:100%; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--brand-100); color:var(--brand-ink); }

/* 数字等宽 —— 体征、日期、编号对齐全靠它 */
.num, .mono{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:.01em;
}

/* ---------- 3. 排版 ---------- */
.t-xs{ font-size:var(--fs-xs); }
.t-sm{ font-size:var(--fs-sm); }
.t-lg{ font-size:var(--fs-lg); }
.t-xl{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em; }
.t-2xl{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; }
.muted{ color:var(--ink-3); }
.dim{ color:var(--ink-4); }
.strong{ font-weight:700; color:var(--ink); }
.nowrap{ white-space:nowrap; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.center{ text-align:center; }
.right{ text-align:right; }

/* ---------- 4. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:46px; padding:0 20px;
  border-radius:var(--r);
  font-size:var(--fs-md); font-weight:600; letter-spacing:.01em;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-xs);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:active{ transform:scale(.976); box-shadow:var(--sh-press); }
.btn:disabled{ opacity:.45; pointer-events:none; }

.btn-primary{
  background:linear-gradient(180deg,#128075 0%,var(--brand) 55%,var(--brand-deep) 100%);
  color:#fff; border-color:transparent;
  box-shadow:0 1px 2px rgba(11,93,85,.24), 0 6px 16px rgba(14,114,104,.22);
}
.btn-primary:active{ box-shadow:0 1px 2px rgba(11,93,85,.3); }

.btn-danger{
  background:var(--danger); color:#fff; border-color:transparent;
  box-shadow:0 1px 2px rgba(179,56,44,.2), 0 6px 16px rgba(179,56,44,.18);
}
.btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink-2); box-shadow:none; }
.btn-quiet{ background:transparent; border-color:transparent; color:var(--brand); box-shadow:none; padding:0 10px; font-weight:600; }
.btn-block{ width:100%; }
.btn-lg{ height:52px; font-size:var(--fs-lg); border-radius:var(--r-lg); }
.btn-sm{ height:36px; padding:0 14px; font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-icon{ width:46px; padding:0; }

/* ---------- 5. 卡片 ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.card-pad{ padding:var(--sp-4); }
.card + .card{ margin-top:var(--sp-3); }

/* 卡片区块标题 */
.sec-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-3);
}
.sec-title{ font-size:var(--fs-md); font-weight:700; letter-spacing:-.005em; }
.sec-sub{ font-size:var(--fs-xs); color:var(--ink-3); }

/* ---------- 6. 表单 ---------- */
.field{ margin-bottom:var(--sp-5); }
.field:last-child{ margin-bottom:0; }
.field-label{
  display:flex; align-items:baseline; gap:6px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
  margin-bottom:var(--sp-2);
}
.field-label .req{ color:var(--danger); font-weight:700; }
.field-label .opt{ color:var(--ink-4); font-weight:500; font-size:11.5px; margin-left:4px; }
.field-hint{ font-size:var(--fs-xs); color:var(--ink-4); margin-top:6px; line-height:1.5; }
.field-err{ font-size:var(--fs-xs); color:var(--danger); margin-top:6px; }

.input, .textarea, .select{
  width:100%;
  height:48px;
  padding:0 14px;
  background:var(--surface-2);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  font-size:var(--fs-md);
  color:var(--ink);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.textarea{ height:auto; min-height:96px; padding:12px 14px; line-height:1.65; resize:vertical; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-4); }
.input:focus, .textarea:focus, .select:focus{
  background:var(--surface);
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-50);
}
.input:disabled{ background:#F1F4F3; color:var(--ink-3); }
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371827C' 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 14px center;
  padding-right:38px;
}

/* 输入 + 单位 */
.input-unit{ position:relative; }
.input-unit .input{ padding-right:56px; }
.input-unit .unit{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-sm); color:var(--ink-4); pointer-events:none;
}

/* 分段选择器（单选，最常用） */
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg-opt{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:0 16px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1.5px solid var(--line);
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-2);
  transition:all var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.seg-opt:active{ transform:scale(.97); }
.seg-opt.on{
  background:var(--brand-50);
  border-color:var(--brand);
  color:var(--brand-deep);
  font-weight:700;
  box-shadow:0 0 0 3px rgba(14,114,104,.08);
}
.seg-opt.on::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); margin-right:7px; flex:0 0 auto;
}
.seg-full{ display:grid; grid-template-columns:repeat(2,1fr); }
.seg-full .seg-opt{ width:100%; }
.seg-3{ display:grid; grid-template-columns:repeat(3,1fr); }
.seg-3 .seg-opt{ width:100%; padding:0 8px; }

/* 多选标签 */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 14px;
  border-radius:var(--r-full);
  background:var(--surface-2); border:1.5px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-2);
  transition:all .14s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.chip.on::after{ content:"✓"; font-size:12px; opacity:.9; }

/* 开关 */
.switch{ position:relative; width:48px; height:28px; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; }
.switch .track{
  position:absolute; inset:0; background:var(--line-2); border-radius:var(--r-full);
  transition:background var(--dur) var(--ease);
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease);
}
.switch input:checked + .track{ background:var(--brand); }
.switch input:checked + .track + .thumb{ transform:translateX(20px); }

/* ---------- 7. 标签 / 徽章 ---------- */
.tag{
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 9px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em;
  background:var(--brand-50); color:var(--brand-deep);
  white-space:nowrap;
}
.tag-accent{ background:var(--accent-50); color:var(--accent); }
.tag-danger{ background:var(--danger-50); color:var(--danger); }
.tag-gray{ background:#EFF3F2; color:var(--ink-3); }
.tag-info{ background:var(--info-50); color:var(--info); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }

/* ---------- 8. 列表项 ---------- */
.item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:14px var(--sp-4);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.item:last-child{ border-bottom:0; }
.item:active{ background:var(--brand-50); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:var(--fs-md); font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px; }
.item-meta{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:3px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.item-arrow{ color:var(--ink-4); flex:0 0 auto; }

/* 头像（姓名首字 + 按姓名生成的柔和底色） */
.avatar{
  width:44px; height:44px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; color:#fff; letter-spacing:0;
  background:linear-gradient(135deg,#0E7268,#12887B);
  box-shadow:0 2px 8px rgba(14,114,104,.22);
}
.avatar.sm{ width:34px; height:34px; border-radius:11px; font-size:14px; }
.avatar.a1{ background:linear-gradient(135deg,#0E7268,#159E8C); box-shadow:0 2px 8px rgba(14,114,104,.2); }
.avatar.a2{ background:linear-gradient(135deg,#2C5F8A,#3E7CA8); box-shadow:0 2px 8px rgba(44,95,138,.2); }
.avatar.a3{ background:linear-gradient(135deg,#8A5F2C,#AE7C3E); box-shadow:0 2px 8px rgba(138,95,44,.2); }
.avatar.a4{ background:linear-gradient(135deg,#4A5F66,#667E86); box-shadow:0 2px 8px rgba(74,95,102,.2); }
.avatar.a5{ background:linear-gradient(135deg,#3D6B4E,#578C68); box-shadow:0 2px 8px rgba(61,107,78,.2); }

/* ---------- 9. 空状态 ---------- */
.empty{
  text-align:center; padding:38px 24px;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.empty-ico{
  width:56px; height:56px; border-radius:19px;
  background:var(--brand-50); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--sp-1);
}
.empty-t{ font-size:var(--fs-md); font-weight:600; color:var(--ink-2); }
.empty-d{ font-size:var(--fs-sm); color:var(--ink-4); max-width:260px; line-height:1.6; }

/* ---------- 10. 提示条 ---------- */
.alert{
  display:flex; gap:10px; padding:12px 14px;
  border-radius:var(--r); font-size:var(--fs-sm); line-height:1.6;
  background:var(--brand-50); color:var(--brand-ink);
  border:1px solid var(--brand-100);
}
.alert-warn{ background:var(--warn-50); color:var(--warn); border-color:#F2DFBB; }
.alert-danger{ background:var(--danger-50); color:var(--danger); border-color:var(--danger-100); }
.alert .ico{ flex:0 0 auto; margin-top:1px; }

/* ---------- 11. Toast ---------- */
#toast-wrap{
  position:fixed; left:0; right:0; bottom:calc(24px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:9000; pointer-events:none; padding:0 20px;
}
.toast{
  max-width:420px; padding:11px 18px; border-radius:var(--r-full);
  background:rgba(22,33,31,.92); color:#fff;
  font-size:var(--fs-sm); font-weight:500;
  box-shadow:var(--sh-lg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:toastIn .26s var(--ease-out);
}
.toast.err{ background:rgba(179,56,44,.95); }
.toast.ok{ background:rgba(11,93,85,.95); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) scale(.97);} to{ opacity:1; transform:none;} }

/* ---------- 12. 骨架屏 ---------- */
.sk{ background:linear-gradient(90deg,#EEF2F1 25%,#F7FAF9 37%,#EEF2F1 63%);
     background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:8px; }
@keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---------- 13. 页面入场 ---------- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.rise{ animation:riseIn .32s var(--ease-out) both; }
.rise-1{ animation-delay:.04s; } .rise-2{ animation-delay:.08s; }
.rise-3{ animation-delay:.12s; } .rise-4{ animation-delay:.16s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- 14. 工具类 ---------- */
.row{ display:flex; align-items:center; gap:var(--sp-2); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; min-width:0; }
.gap-1{ gap:var(--sp-1);} .gap-2{ gap:var(--sp-2);} .gap-3{ gap:var(--sp-3);} .gap-4{ gap:var(--sp-4);}
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-6{margin-top:var(--sp-6);}
.mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.hide{ display:none !important; }
.divider{ height:1px; background:var(--line); margin:var(--sp-4) 0; }