/* ============================================================
   ABC 观察小程序 · 演示站公共样式
   设计基线取自 export/login.html 与 export/home.html
   ============================================================ */

:root{
  --green:#1F9D63;   --green-d:#157A4C;  --green-l:#EAF6F0;
  --ink:#123A2A;     --ink2:#5B7A6C;     --ink3:#8AA398;   --ink4:#B6C6BC;
  --sub:#7C9488;     --tab:#93A79B;
  --line:#E6EDE9;    --line2:#DCE8E1;    --icon:#D8E3DC;
  --amber:#D18F1F;   --amber-t:#B4802A;  --amber-bg:#FFF6E6; --amber-line:#FBE7C9; --amber-card:#FFFCF5;
  --blue:#2E7FBF;    --blue-bg:#E8F1FA;
  --purple:#7C5CBF;  --purple-bg:#F0EBFA;
  --coral:#E06A5A;   --teal:#14A0A0;
  --page:#eef1ee;
}

/* ---------- 手机外壳（PC 端固定尺寸，内部滚动） ---------- */
html,body{margin:0;height:100%}
body{
  background:var(--page);
  font-family:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.phone{
  width:375px;height:812px;border-radius:26px;overflow:hidden;
  background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.10);
}
.screen{
  width:375px;height:812px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;background:#fff;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-d)}
*{box-sizing:border-box}

@media (max-width:420px){
  body{display:block}
  .phone{width:100%;height:100vh;border-radius:0;box-shadow:none}
  .screen{width:100%;height:100%}
}

/* ---------- 状态栏 / 导航栏 / 胶囊 ---------- */
.statusbar{
  height:44px;flex:none;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;color:var(--ink);
}
.statusbar .sb-r{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:400}

.navbar{
  height:44px;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.navbar .nav-t{font-size:16px;font-weight:500;color:var(--ink)}
.navbar .nav-sub{font-size:10.5px;color:var(--ink3);margin-left:6px;font-weight:400}
.nav-back{
  position:absolute;left:10px;top:0;height:44px;width:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--ink);cursor:pointer;line-height:1;
}
.nav-back:hover{color:var(--green)}
.capsule{
  position:absolute;right:14px;top:7px;width:87px;height:30px;border-radius:15px;
  background:rgba(18,58,42,.06);border:.5px solid rgba(18,58,42,.10);
  display:flex;align-items:center;justify-content:space-around;
  color:rgba(18,58,42,.45);font-size:13px;
}
.capsule i{width:.5px;height:16px;background:rgba(18,58,42,.14);display:block}

/* ---------- 可滚动主体 ---------- */
.body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{width:4px}
.body::-webkit-scrollbar-thumb{background:rgba(18,58,42,.16);border-radius:2px}
.body::-webkit-scrollbar-track{background:transparent}
.pad{padding:10px 16px 18px}

/* ---------- 底部 Tab / Home 指示条 ---------- */
.tabbar{flex:none;height:56px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center}
.tabbar .tb{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--tab);font-size:10.5px;text-decoration:none;cursor:pointer;
}
.tabbar .tb .ic{width:22px;height:22px;border-radius:7px;background:var(--icon)}
.tabbar .tb.rd .ic{border-radius:11px}
.tabbar .tb.on{color:var(--green);font-weight:500}
.tabbar .tb.on .ic{background:var(--green)}
.homebar{flex:none;height:22px;background:#fff;display:flex;align-items:center;justify-content:center}
.homebar i{display:block;width:134px;height:5px;border-radius:3px;background:rgba(18,58,42,.24)}

/* ---------- 通用块 ---------- */
.sec{display:flex;flex-direction:column;gap:10px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between}
.sec-t{font-size:14.5px;font-weight:600;color:var(--ink)}
.sec-a{font-size:12px;color:var(--green);cursor:pointer}
.sec-n{font-size:11.5px;color:var(--ink3)}
.hint{font-size:11.5px;color:var(--ink3);line-height:1.6}

.card{border:1px solid var(--line);border-radius:14px;background:#fff}
.card.pad14{padding:14px}

/* 列表行 */
.row{
  display:flex;align-items:center;gap:11px;padding:12px;
  border-radius:14px;border:1px solid var(--line);background:#fff;
  text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s;
}
.row:hover{border-color:#CFE3D7;background:#FCFEFD}
.row.flat{border-radius:0;border:0;border-bottom:1px solid var(--line);padding:13px 4px;background:transparent}
.row.flat:hover{background:#F7FBF8}
.row .rt{display:flex;flex-direction:column;gap:3px;min-width:0}
.row .rn{font-size:14px;color:var(--ink);font-weight:500}
.row .rs{font-size:11.5px;color:var(--ink3);line-height:1.5}
.row .rr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.row .go{font-size:12px;color:var(--green)}
.row .arw{font-size:14px;color:var(--ink4)}

/* 字母头像 */
.av{
  width:36px;height:36px;border-radius:12px;flex:none;
  background:var(--green-l);color:var(--green);
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.av.s{width:32px;height:32px;border-radius:10px;font-size:12.5px}
.av.amber{background:var(--amber-bg);color:#C4901F}
.av.blue{background:var(--blue-bg);color:var(--blue)}
.av.purple{background:var(--purple-bg);color:var(--purple)}
.av.coral{background:#FDEDEA;color:var(--coral)}
.av.teal{background:#E4F5F5;color:var(--teal)}

/* 徽标 / 等级 */
.bg{font-size:11px;padding:3px 8px;border-radius:9px;white-space:nowrap;line-height:1.5}
.lv-normal{background:var(--green-l);color:var(--green-d)}
.lv-temp{background:var(--blue-bg);color:var(--blue)}
.lv-post{background:var(--purple-bg);color:var(--purple)}
.lv-safe{background:var(--amber-bg);color:#B4802A;border:.5px solid var(--amber-line)}
.gender{font-size:12px;color:var(--ink2);min-width:22px;text-align:right}
.gender.f{color:#D06A96}
.gender.m{color:#3D82C4}

/* 芯片 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12.5px;padding:7px 13px;border-radius:16px;
  border:1px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer;
  transition:.15s;user-select:none;
}
.chip:hover{border-color:#BDD9C8}
.chip.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:500}
.chip.sm{font-size:11.5px;padding:5px 11px}

/* 分段控件 */
.seg{display:flex;gap:8px}
.seg .sg{
  flex:1;height:38px;border-radius:12px;border:1px solid var(--line2);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink2);cursor:pointer;transition:.15s;user-select:none;
}
.seg .sg.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:500}

/* 表单 */
.lab{font-size:12px;color:var(--sub);font-weight:500;margin-bottom:8px;display:block}
.lab .opt{color:var(--ink4);font-weight:400}
.inp,.sel{
  width:100%;height:44px;border-radius:12px;border:1px solid var(--line2);background:#fff;
  padding:0 14px;font-size:14px;color:var(--ink);font-family:inherit;outline:none;
}
.inp::placeholder{color:var(--ink4)}
.inp:focus,.sel:focus{border-color:var(--green)}
textarea.inp{height:74px;padding:11px 14px;line-height:1.6;resize:none}
.sel{
  cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238AA398' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
.search{
  height:40px;border-radius:20px;background:#F3F7F4;border:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:0 14px;
}
.search input{flex:1;border:0;background:transparent;outline:none;font-size:13.5px;color:var(--ink);font-family:inherit}
.search input::placeholder{color:var(--ink4)}
.search .mg{font-size:13px;color:var(--ink3)}

/* 颜色色板 */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{
  width:34px;height:34px;border-radius:11px;cursor:pointer;position:relative;
  box-shadow:0 0 0 0 rgba(0,0,0,0);transition:.15s;
}
.sw:after{
  content:"✓";position:absolute;inset:0;color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s;
}
.sw.on{box-shadow:0 0 0 3px #fff,0 0 0 4.5px currentColor}
.sw.on:after{opacity:1}

/* 按钮 */
.btn{
  height:46px;border-radius:23px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:15.5px;font-weight:500;cursor:pointer;border:0;width:100%;
  box-shadow:0 8px 18px rgba(31,157,99,.28);font-family:inherit;
  transition:opacity .15s;
}
.btn:hover{opacity:.92}
.btn:disabled{background:#C8DBD0;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--green);border:1px solid var(--green);box-shadow:none}
.footbar{flex:none;padding:8px 16px 10px;background:#fff}

/* 空状态 */
.empty{
  padding:56px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty .eic{
  width:56px;height:56px;border-radius:18px;background:#F3F7F4;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink4);
}
.empty .et{font-size:13.5px;color:var(--ink3)}

/* ---------- 底部弹出选项卡 ---------- */
.mask{
  position:absolute;inset:0;background:rgba(10,26,19,.42);z-index:20;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.mask.on{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:21;background:#fff;
  border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(10,26,19,.16);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;max-height:84%;
}
.sheet.on{transform:translateY(0)}
.sheet-h{
  flex:none;padding:14px 18px 10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.sheet-h .st{font-size:15.5px;font-weight:600;color:var(--ink)}
.sheet-h .sx{font-size:13px;color:var(--ink3);cursor:pointer}
.sheet-b{flex:1;overflow-y:auto;padding:14px 18px 4px;display:flex;flex-direction:column;gap:16px}
.sheet-b::-webkit-scrollbar{width:4px}
.sheet-b::-webkit-scrollbar-thumb{background:rgba(18,58,42,.16);border-radius:2px}
.sheet-f{flex:none;padding:12px 18px 16px}
.grab{width:36px;height:4px;border-radius:2px;background:#DCE8E1;margin:8px auto 0}

/* 提示条 */
.toast{
  position:absolute;left:50%;bottom:110px;transform:translate(-50%,10px);z-index:30;
  background:rgba(18,58,42,.90);color:#fff;font-size:13px;padding:10px 18px;border-radius:20px;
  opacity:0;pointer-events:none;transition:.22s;white-space:nowrap;max-width:88%;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   答卷控件（4 个记录表页公用）
   ============================================================ */

/* ---------- 小题标签 ---------- */
.qtag{font-size:10.5px;padding:2px 7px;border-radius:7px;background:#FDECEC;color:#C9553F;font-weight:500;white-space:nowrap;flex:none}
.qtag.opt{background:#F3F7F4;color:var(--ink3)}

/* ---------- 取值框（点击唤出弹窗） ---------- */
.vbox{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;
  border:1px solid var(--line2);border-radius:14px;background:#fff;cursor:pointer;transition:.15s;
}
.vbox:hover{border-color:#BDD9C8}
.vbox.set{border-color:#C9E4D5;background:#FAFDFB}
.vbox .vv{font-size:15px;color:var(--ink);font-weight:500;line-height:1.5}
.vbox .vv.ph{color:var(--ink4);font-weight:400}
.vbox .va{margin-left:auto;font-size:12px;color:var(--green);flex:none;font-weight:500}
.picked{display:flex;flex-wrap:wrap;gap:6px}
.picked span{font-size:11px;color:var(--ink2);background:#F3F7F4;border-radius:8px;padding:4px 8px;line-height:1.4}

/* ---------- 滚轮 ---------- */
.wheelbox{position:relative;overflow:hidden;border-radius:12px}
.wheel{height:96px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;position:relative;z-index:1}
.wheel::-webkit-scrollbar{width:0}
.wheel .wl{padding:32px 0}
.wheel .it{
  height:32px;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--ink4);cursor:pointer;transition:color .12s;
  font-variant-numeric:tabular-nums;
}
.wheel .it.on{color:var(--ink);font-weight:600}
.wl-band{
  position:absolute;left:0;right:0;top:32px;height:32px;z-index:2;pointer-events:none;
  border-top:1px solid #D9E8DF;border-bottom:1px solid #D9E8DF;background:rgba(31,157,99,.05);
}
.wl-fade{position:absolute;left:0;right:0;height:30px;pointer-events:none;z-index:3}
.wl-fade.t{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))}
.wl-fade.b{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)}

.clock{display:flex;align-items:center;justify-content:center;gap:2px}
.clock .wheelbox{width:78px}
.clock .cln{font-size:18px;font-weight:600;color:var(--ink);padding:0 2px}
.clockcard{border:1px solid var(--line);border-radius:14px;padding:10px 8px 8px;background:#fff}
.clockcard .ck{font-size:11.5px;color:var(--sub);font-weight:500;text-align:center;margin-bottom:2px}

/* ---------- 弹窗选项列表 ---------- */
.optlist{display:flex;flex-direction:column}
.opt-row{
  display:flex;align-items:center;gap:11px;padding:12px 2px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:14px;color:var(--ink2);line-height:1.5;transition:.12s;
}
.opt-row:last-child{border-bottom:0}
.opt-row:hover{background:#F7FBF8}
.opt-bx{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;transition:.15s;
}
.opt-bx.rd{border-radius:50%}
.opt-row.on{color:var(--ink);font-weight:500}
.opt-row.on .opt-bx{background:var(--green);border-color:var(--green)}

/* ---------- 量表滑块 ---------- */
.slider{display:flex;flex-direction:column;gap:8px}
.sl-val{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:2px 0 4px}
.sl-val b{font-size:36px;font-weight:700;color:var(--green);line-height:1}
.sl-val i{font-size:12px;color:var(--ink3);font-style:normal}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;outline:none;margin:0;cursor:pointer}
input[type=range].rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) 0 var(--p,50%),#E6EDE9 var(--p,50%) 100%)}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2.5px solid var(--green);box-shadow:0 2px 7px rgba(31,157,99,.3);margin-top:-9px}
input[type=range].rng::-moz-range-track{height:6px;border-radius:3px;background:#E6EDE9}
input[type=range].rng::-moz-range-progress{height:6px;border-radius:3px;background:var(--green)}
input[type=range].rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--green)}
.sl-ticks{display:flex;justify-content:space-between;padding:0 1px}
.sl-ticks span{font-size:11px;color:var(--ink4);width:22px;text-align:center;transition:.15s}
.sl-ticks span.on{color:var(--green);font-weight:600}

/* ---------- 底部按钮条 ---------- */
.btnbar{flex:none;padding:8px 16px 10px;display:flex;gap:10px;background:#fff}
.btnbar .btn{height:44px;font-size:15px}
.btn.prev{flex:0 0 92px;background:#fff;color:var(--ink2);border:1px solid var(--line2);box-shadow:none;font-size:14px}
.btn.prev:hover{border-color:#BDD9C8;opacity:1}
.btn.prev:disabled{background:#fff;color:var(--ink4);border-color:var(--line)}