/* ============================================================
   消化医声 · 专家简历库 — 共享设计系统
   统一设计 Token + 基础组件，三页（登录 / 列表 / 详情）共用。
   页面特有组件（搜索、字母栏、卡片网格、版本列表等）仍保留在各页 <style> 中，
   但一律引用本文件的 Token，杜绝数值漂移。
   ============================================================ */

/* ---------------- 设计 Token ---------------- */
:root{
  /* 品牌色阶 */
  --brand:        #1D9E75;
  --brand-600:    #188A66;
  --brand-700:    #0F6E56;
  --brand-50:     #E8F5EE;
  --brand-100:    #D4EFE1;
  --chip:         #E1F5EE;

  /* 语义色 */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* 中性色阶 */
  --txt:     #1F2933;
  --txt-2:   #374151;
  --muted:   #6B7280;
  --muted-2: #94A3B8;
  --line:    #E3E8EF;
  --line-2:  #EEF1F6;
  --bg:      #F5F7FA;
  --card:    #FFFFFF;

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:16px;
  --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px;

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

  /* 圆角 */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* 阴影层级 */
  --sh-sm:   0 1px 2px rgba(15,23,42,.06);
  --sh-md:   0 4px 14px rgba(15,23,42,.08);
  --sh-lg:   0 10px 30px rgba(15,23,42,.12);
  --sh-brand:0 6px 18px rgba(29,158,117,.18);

  /* 过渡 */
  --tr: 180ms cubic-bezier(.4,0,.2,1);
}

/* ---------------- Reset & Base ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }

/* 统一聚焦环（可访问性 / 键盘导航） */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* 内容容器 */
.container{ width:100%; max-width:1100px; margin:0 auto; padding:var(--sp-4) var(--sp-5) var(--sp-12); }
.container.narrow{ max-width:860px; }

/* ---------------- 应用头部 ---------------- */
.app-header{
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  color:#fff; padding:var(--sp-4) var(--sp-6);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-3);
  box-shadow:var(--sh-sm);
  position:sticky; top:0; z-index:20;
}
.app-header .brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.app-header .logo{
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.app-header .btext{ min-width:0; }
.app-header h1{ font-size:var(--fs-2xl); margin:0; font-weight:600; line-height:1.1;
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-header .sub{ font-size:var(--fs-xs); opacity:.85; margin-top:2px; letter-spacing:.3px; }
.app-header .toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* 头部用户区（登录态显示手机号 + 退出 / 后台入口） */
.app-header .userbox{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.16);
  padding:4px 4px 4px 6px; border-radius:var(--r-pill); }
.app-header .uavatar{ width:26px; height:26px; border-radius:50%; background:#fff; color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0;
  font-variant-numeric:tabular-nums; }
.app-header .uphone{ color:#fff; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.app-header .ulogout{ background:rgba(255,255,255,.22); color:#fff; border:none; border-radius:var(--r-pill);
  padding:5px 12px; font-size:var(--fs-sm); cursor:pointer; transition:var(--tr); }
.app-header .ulogout:hover{ background:rgba(255,255,255,.34); }
.app-header .adminlink{ color:#fff; font-size:var(--fs-sm); text-decoration:underline; opacity:.9;
  cursor:pointer; margin-right:2px; }
.app-header .htail{ display:flex; align-items:center; gap:10px; }

/* ---------------- 页脚 ---------------- */
.app-footer{
  text-align:center; padding:var(--sp-6) 0 var(--sp-5);
  color:var(--muted-2); font-size:var(--fs-xs);
  letter-spacing:.5px; border-top:1px solid var(--line); margin-top:var(--sp-10);
}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:var(--fs-base); font-weight:600; cursor:pointer; border:none;
  padding:10px 18px; border-radius:var(--r-md); transition:var(--tr);
  white-space:nowrap; line-height:1; user-select:none;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--brand-600); box-shadow:var(--sh-brand); transform:translateY(-1px); }
.btn-primary:active:not(:disabled){ transform:translateY(0); }
.btn-ghost{ background:#fff; color:var(--brand-700); border:1.5px solid var(--brand); }
.btn-ghost:hover:not(:disabled){ background:var(--brand-50); }
.btn-danger{ background:var(--error); color:#fff; }
.btn-danger:hover:not(:disabled){ background:#dc2626; }
.btn-sm{ padding:8px 14px; font-size:var(--fs-sm); }

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px);
  background:#111827; color:#fff; padding:12px 20px; border-radius:var(--r-md);
  font-size:var(--fs-base); opacity:0; transition:var(--tr); z-index:200;
  box-shadow:var(--sh-lg); max-width:90vw;
}
.toast.show{ opacity:.96; transform:translateX(-50%) translateY(0); }

/* ---------------- 加载指示器 ---------------- */
.spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0;
}
.spinner.dark{ border-color:rgba(29,158,117,.25); border-top-color:var(--brand); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- 骨架屏 ---------------- */
.sk{
  background:linear-gradient(90deg,var(--line-2) 25%,#f6f8fb 37%,var(--line-2) 63%);
  background-size:400% 100%;
  animation:sk 1.4s ease infinite; border-radius:var(--r-sm);
}
@keyframes sk{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ---------------- 空状态 ---------------- */
.empty-state{ text-align:center; padding:var(--sp-12) var(--sp-4); color:var(--muted); }
.empty-state .eic{ opacity:.55; margin-bottom:var(--sp-3); }
.empty-state .et{ font-size:var(--fs-lg); font-weight:600; color:var(--txt-2); margin-bottom:6px; }
.empty-state .es{ font-size:var(--fs-sm); margin-bottom:var(--sp-5); }

/* ---------------- 弹窗 ---------------- */
.modal-mask{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  display:none; align-items:center; justify-content:center; z-index:300;
  backdrop-filter:blur(2px);
}
.modal-mask.show{ display:flex; }
.modal{
  background:#fff; border-radius:var(--r-lg); padding:22px; width:min(360px,90vw);
  box-shadow:var(--sh-lg); animation:pop .18s ease;
}
@keyframes pop{ from{ transform:scale(.96); opacity:.6; } to{ transform:scale(1); opacity:1; } }
.modal h3{ margin:0 0 6px; font-size:var(--fs-xl); color:var(--txt); }
.modal p{ margin:0 0 16px; font-size:var(--fs-sm); color:var(--muted); line-height:1.5; }
.modal input{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--fs-base); box-sizing:border-box; transition:var(--tr);
}
.modal input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,158,117,.12); }
.modal .err{ color:var(--error); font-size:var(--fs-sm); margin-top:8px; min-height:16px; }
.modal .mrow{ display:flex; gap:10px; margin-top:16px; }
.modal .mrow button{ flex:1; padding:11px 0; border-radius:var(--r-md); font-size:var(--fs-base);
                     font-weight:600; cursor:pointer; border:none; transition:var(--tr); }
.modal .btn-cancel{ background:var(--line-2); color:var(--txt-2); }
.modal .btn-cancel:hover{ background:var(--line); }
.modal .btn-confirm{ background:var(--brand); color:#fff; }
.modal .btn-confirm:hover{ background:var(--brand-600); }

/* ---------------- 响应式（共享部分） ---------------- */
@media (max-width:760px){
  .app-header{ padding:var(--sp-3) var(--sp-4); }
  .app-header h1{ font-size:var(--fs-xl); }
  .container{ padding:var(--sp-3) var(--sp-4) var(--sp-10); }
}