/* ══════════════════════════════════════════════════════════════════
   医驿 · 入口页共享样式
   ──────────────────────────────────────────────────────────────────
   三个入口（患者 / 服务人员 / 平台工作台）共用这一份样式。
   ⚠ 为什么抽出来：三个入口的登录表单是**同一套逻辑**，只是身份与版式不同。
     抄三份的代价不是多打几个字，而是「改了校验规则只改一处」——
     下次修 OTP 重发倒计时就会漏掉一个入口，而那个入口没人会点开验收。

   视觉依据：千里江山图色系（赭绢 #EFE8D8 底 / 石绿 #2E6B4F 主 / 石青 #2B5A82 辅），
   **禁大面积纯白** —— 所有面板底色用蛤白 #F7F3E9。
   ══════════════════════════════════════════════════════════════════ */
:root{
  --zhejuan:#EFE8D8; --geba:#F7F3E9; --fb:#F7F4EC; --juanshen:#E4DAC6; --juanxian:#D6CAB0;
  --lv1:#1D4A38; --lv2:#2E6B4F; --lv3:#5C9478; --lv4:#A8C7B4; --lvr:#E3EDE4;
  --mo:#26251F; --moh:#6A665C; --mod:#9A958A; --canmo:#93A79C;
  --q1:#1B3A5C; --q2:#2B5A82; --q3:#7BA0C0; --qr:#E2EAF1;
  --th:#C08A28; --zhu:#B23A2E; --zhuq:#F9E2DD; --zs:#A3603F; --zsq:#F6E3D6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  background:var(--zhejuan); color:var(--mo);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── 手机端壳（患者 / 服务人员）────────────────────────────────── */
.mwrap{
  min-height:100%; display:flex; flex-direction:column;
  max-width:520px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 0px) 0 calc(env(safe-area-inset-bottom) + 0px);
}

/* ── 顶部：品牌 ── */
.brand{flex:0 0 auto; padding:52px 28px 24px; text-align:center; position:relative}
.seal{
  width:64px; height:64px; margin:0 auto 18px; border-radius:16px;
  background:linear-gradient(155deg,var(--lv2),var(--lv1));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(29,74,56,.24), inset 0 1px 0 rgba(255,255,255,.16);
  position:relative; overflow:hidden;
}
.seal::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.16), transparent 58%);
}
.seal span{
  color:#F2EFE4; font-size:26px; font-weight:600; letter-spacing:1px;
  font-family:"Noto Serif SC",serif; position:relative; z-index:1;
}
/* 服务人员入口：印章走石青，与患者入口形成一眼可辨的区分 */
body[data-entry="staff"] .seal{background:linear-gradient(155deg,var(--q2),var(--q1))}
body[data-entry="staff"] .name{color:var(--q1)}
body[data-entry="staff"] .btn{background:linear-gradient(150deg,var(--q2),var(--q1)); box-shadow:0 6px 18px rgba(27,58,92,.22)}
body[data-entry="staff"] .tab-brand{border-color:var(--q3); background:var(--qr); color:var(--q1)}

.name{font-size:24px; font-weight:600; letter-spacing:5px; color:var(--lv1); margin:0 0 8px}
.slogan{font-size:12.5px; color:var(--moh); letter-spacing:1.4px; margin:0}
.rule{
  width:52px; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--juanxian),transparent);
}

/* ── 身份标识（替代原来的三 Tab）──────────────────────────────
   ⚠ 独立入口页**不再出现身份 Tab** —— 进来是什么身份，页面本身就是答案。
     再给一排 Tab 让人切到别的身份，等于把「独立入口」又做回了合一的。 */
.whoami{
  flex:0 0 auto; margin:22px 24px 0; padding:13px 16px;
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--juanxian); border-radius:12px; background:var(--geba);
}
.whoami .ic{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--lvr); color:var(--lv1);
}
.whoami .ic svg{width:17px; height:17px; display:block}
.whoami .tx{flex:1; min-width:0}
.whoami .t1{font-size:13.5px; color:var(--mo); letter-spacing:.5px}
.whoami .t2{font-size:11.5px; color:var(--mod); letter-spacing:.4px; margin-top:1px}
.whoami .tag{
  flex:0 0 auto; font-size:11px; padding:3px 9px; border-radius:20px;
  background:var(--lvr); color:var(--lv1); letter-spacing:.4px;
}
body[data-entry="staff"] .whoami .ic{background:var(--qr); color:var(--q1)}
body[data-entry="staff"] .whoami .tag{background:var(--qr); color:var(--q1)}

/* ── 表单 ── */
.form{flex:0 0 auto; padding:20px 24px 0}
.label{font-size:12.5px; color:var(--moh); margin:0 0 8px; letter-spacing:.6px}
.field{
  display:flex; align-items:center;
  background:var(--geba); border:1px solid var(--juanxian); border-radius:12px;
  padding:0 14px; height:50px; transition:.18s;
}
.field:focus-within{border-color:var(--lv3); box-shadow:0 0 0 3px rgba(92,148,120,.13)}
body[data-entry="staff"] .field:focus-within{border-color:var(--q3); box-shadow:0 0 0 3px rgba(123,160,192,.14)}
.field input{
  flex:1; border:none; outline:none; background:transparent;
  font-size:16px; color:var(--mo); font-family:inherit; letter-spacing:.5px; min-width:0;
}
.field input::placeholder{color:var(--mod); font-size:14px; letter-spacing:0}
.code-box{display:flex; gap:10px; margin-top:14px}
.code-box .field{flex:1; min-width:0}
.send{
  flex:0 0 auto; width:104px; height:50px; border-radius:12px;
  border:1px solid var(--lv3); background:var(--lvr); color:var(--lv1);
  font-size:13px; font-family:inherit; letter-spacing:.5px; cursor:pointer; transition:.18s;
}
body[data-entry="staff"] .send{border-color:var(--q3); background:var(--qr); color:var(--q1)}
.send:active{transform:scale(.97)}
.send:disabled{opacity:.5; cursor:not-allowed; border-color:var(--juanxian); background:var(--fb); color:var(--mod)}
.err{font-size:12.5px; color:var(--zhu); margin:9px 2px 0; min-height:18px; letter-spacing:.4px}
.hint{
  font-size:12px; color:var(--moh); background:var(--zsq);
  border-left:3px solid var(--zs); border-radius:0 8px 8px 0;
  padding:9px 12px; margin-top:4px; line-height:1.5;
}
.btn{
  width:100%; height:52px; margin-top:20px; border-radius:12px; border:none;
  background:linear-gradient(150deg,var(--lv2),var(--lv1)); color:#F2EFE4;
  font-size:16px; font-family:inherit; letter-spacing:2px; font-weight:600;
  cursor:pointer; box-shadow:0 6px 18px rgba(29,74,56,.22); transition:.18s;
}
.btn:active{transform:scale(.985); box-shadow:0 3px 10px rgba(29,74,56,.2)}
.btn:disabled{opacity:.55; box-shadow:none; cursor:not-allowed}

/* ── 演示账号 ── */
.demo{flex:0 0 auto; padding:24px 24px 30px; margin-top:auto}
.demo-hd{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:12px; color:var(--moh); letter-spacing:.8px;
}
.demo-hd::before,.demo-hd::after{content:""; flex:1; height:1px; background:var(--juanxian)}
.demo-hd::before{flex:0 0 14px}
.acc{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--geba); border:1px solid var(--juanxian); border-radius:11px;
  margin-bottom:8px; cursor:pointer; transition:.16s;
}
.acc:active{background:var(--lvr); border-color:var(--lv4); transform:scale(.99)}
.acc .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--lv3)}
.acc .info{flex:1; min-width:0}
.acc .nm{font-size:14px; color:var(--mo); letter-spacing:.3px}
.acc .sub{font-size:11.5px; color:var(--mod); letter-spacing:.4px; margin-top:1px}
.acc .role{
  flex:0 0 auto; font-size:11px; padding:3px 9px; border-radius:20px;
  background:var(--lvr); color:var(--lv1); letter-spacing:.4px;
}
/* 占位（载入中 / 空 / 失败）—— 三态共用一种中性灰，不要给失败单独上红：
   演示时红字会被误读成「系统坏了」。 */
.ph{text-align:center; color:var(--mod); font-size:12.5px; padding:14px}

/* ── 已登录态 ── */
.done{padding:52px 28px; text-align:center}
.done .seal{margin-bottom:22px}
.done h2{font-size:19px; font-weight:600; color:var(--lv1); margin:0 0 10px; letter-spacing:2px}
body[data-entry="staff"] .done h2{color:var(--q1)}
.done p{font-size:13px; color:var(--moh); margin:0 0 26px; letter-spacing:.5px}
.scope{
  text-align:left; background:var(--geba); border:1px solid var(--juanxian);
  border-radius:12px; padding:16px 18px; margin-bottom:14px;
}
.scope h3{font-size:12px; color:var(--moh); margin:0 0 10px; letter-spacing:1px; font-weight:400}
.scope .row{
  display:flex; gap:10px; font-size:12.5px; padding:5px 0;
  border-bottom:1px dashed var(--juanshen); letter-spacing:.3px;
}
.scope .row:last-child{border-bottom:none}
.scope .k{flex:0 0 92px; color:var(--moh)}
.scope .v{flex:1; color:var(--mo)}
.link{color:var(--q2); font-size:13px; text-decoration:none; letter-spacing:.5px; cursor:pointer; background:none; border:none; font-family:inherit}

.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(14px);
  background:rgba(38,37,31,.94); color:#F2EFE4; font-size:13px;
  padding:11px 20px; border-radius:22px; letter-spacing:.5px;
  opacity:0; pointer-events:none; transition:.24s; z-index:99; max-width:84vw;
  text-align:center; font-family:inherit;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* 页脚：同域其他入口的横向指路（不是身份 Tab —— 它是跳转，不是切换）*/
.crosslink{
  flex:0 0 auto; padding:0 24px 34px; text-align:center;
  font-size:12px; color:var(--mod); letter-spacing:.5px;
}
.crosslink a{color:var(--q2); text-decoration:none; border-bottom:1px dashed var(--juanxian); padding-bottom:1px}
.crosslink .sp{margin:0 8px; color:var(--juanshen)}