/* ==========================================================================
   app.css — 通用组件 + 登录/选公司/改密/工作台页面
   依赖 app-tokens.css。全站禁用 700 字重（v3 规范）；中文最小 12px。
   ========================================================================== */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0; background:var(--bg); color:var(--ink-3);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",
              "Microsoft YaHei",sans-serif;
  font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

a{ color:var(--green-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ── 字阶 ───────────────────────────────────────────────────────────── */
.t-display{ font-size:var(--fs-display); font-weight:600; line-height:1.28; color:var(--ink); letter-spacing:-.012em; margin:0; }
.t-title  { font-size:var(--fs-title);   font-weight:600; line-height:1.4;  color:var(--ink); margin:0; }
.t-body   { font-size:var(--fs-body);    font-weight:400; line-height:1.6;  color:var(--ink-3); }
.t-meta   { font-size:var(--fs-meta);    font-weight:500; line-height:1.4;  color:var(--ink-4); letter-spacing:.06em; }
.t-money  { font-size:var(--fs-money);   font-weight:600;                   color:var(--ink); }

/* ── 表单 ───────────────────────────────────────────────────────────── */
.field{ margin-bottom:var(--sp-4); }

.field-label{
  display:block; margin-bottom:var(--sp-2);
  font-size:var(--fs-meta); font-weight:500; letter-spacing:.06em;
  color:var(--ink-4);
}

.input{
  width:100%; height:44px; padding:0 var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink);
  font-size:14px; font-family:inherit; line-height:44px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  outline:none;
}
.input::placeholder{ color:var(--ink-5); }
.input:hover{ border-color:var(--ink-5); }
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--green-soft);
}
.input.is-error{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.input:disabled{ background:var(--surface-3); color:var(--ink-4); cursor:not-allowed; }

.field-hint{
  margin-top:6px; font-size:12px; line-height:1.5; color:var(--ink-4);
}

/* 输入 + 行内按钮（验证码） */
.input-row{ display:flex; gap:var(--sp-2); }
.input-row .input{ flex:1 1 auto; min-width:0; }
.input-row .captcha-img{
  flex:0 0 108px; height:44px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2); cursor:pointer; overflow:hidden; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.input-row .captcha-img svg{ display:block; width:100%; height:100%; }
/* 验证码实际是 <img src="data:image/svg+xml;...">（见 auth.js setCaptchaImage），
   不给这条规则的话图片会按原始尺寸溢出按钮，字符被裁掉一半照样认不出 */
.input-row .captcha-img img{ display:block; width:100%; height:100%; object-fit:contain; }

/* ── 按钮 ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:40px; padding:0 var(--sp-4);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:14px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:disabled{ cursor:not-allowed; opacity:.55; }

.btn-primary{ background:var(--brand); color:#fff; border-radius:8px; }
.btn-primary:hover:not(:disabled){ background:var(--brand-hover); }
.btn-primary:active:not(:disabled){ background:var(--brand-active); }

.btn-ghost{ background:var(--surface); border-color:var(--line); color:var(--ink-2); }
.btn-ghost:hover:not(:disabled){ border-color:var(--ink-5); }

.btn-block{ display:flex; width:100%; height:44px; }

/* ── 提示条 ─────────────────────────────────────────────────────────── */
.alert{
  display:none; align-items:flex-start; gap:var(--sp-2);
  padding:10px var(--sp-3); margin-bottom:var(--sp-4);
  border-radius:var(--r-sm); font-size:13px; line-height:1.5;
  border:1px solid transparent;
}
.alert.is-on{ display:flex; }
.alert-danger{ background:var(--danger-bg); border-color:#F3D3D3; color:var(--danger-ink); }
.alert-warn  { background:var(--warn-bg);   border-color:#F3E1C4; color:var(--warn-ink); }
.alert-ok    { background:var(--ok-bg);     border-color:var(--green-line); color:var(--ok-ink); }
.alert-info  { background:var(--surface-2); border-color:var(--line); color:var(--ink-3); }

/* ── 登录页 ─────────────────────────────────────────────────────────── */
/*
   双栏网格：左侧品牌、右侧表单。
   本期不做扫码登录，所以右栏是单列；将来加扫码时只需把
   .auth-panel 的 grid-template-columns 改成 "1fr 1px 1fr"，
   不需要重排 DOM —— 这就是规范里「扫码区整块不渲染」的落地方式。
*/
.auth{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(340px,46%) 1fr;
  background:var(--surface);
}

.auth-brand{
  position:relative; overflow:hidden;
  background:var(--sidebar); color:#fff;
  padding:var(--sp-10) 48px;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* 一层极淡的斜向光，避免纯色块显得廉价；不用渐变按钮那套 */
.auth-brand::after{
  content:""; position:absolute; inset:-20% -30% auto auto;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(7,193,96,.22), rgba(7,193,96,0) 62%);
  pointer-events:none;
}

.auth-logo{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; letter-spacing:.02em; color:#fff;
}
.auth-logo .mark{
  width:28px; height:28px; border-radius:8px;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; letter-spacing:0;
}

.auth-pitch{ position:relative; z-index:1; max-width:380px; }
.auth-pitch h1{
  margin:0 0 var(--sp-4);
  font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-.012em; color:#fff;
}
.auth-pitch p{
  margin:0; font-size:14px; line-height:1.8; color:var(--sidebar-t);
}

.auth-points{ margin:var(--sp-6) 0 0; padding:0; list-style:none; }
.auth-points li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.6; color:var(--sidebar-t);
  padding:7px 0;
}
.auth-points li::before{
  content:""; flex:0 0 5px; height:5px; margin-top:8px; border-radius:50%;
  background:var(--brand);
}

.auth-foot{ position:relative; z-index:1; font-size:12px; color:var(--sidebar-t2); }

.auth-panel{
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-10) var(--sp-6);
  background:var(--surface);
}
.auth-form{ width:100%; max-width:368px; }
.auth-form .t-display{ margin-bottom:var(--sp-2); }
.auth-form .t-body{ margin:0 0 var(--sp-7); color:var(--ink-4); }

.auth-extra{
  display:flex; align-items:center; justify-content:space-between;
  margin:var(--sp-4) 0 var(--sp-5);
  font-size:12px; color:var(--ink-4);
}
.auth-extra label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.auth-extra input[type="checkbox"]{ accent-color:var(--brand); }

/* 提交按钮里的倒计时 */
.btn-primary[data-countdown]{
  background:var(--ink-5); color:#fff;
}

/* ── 通用卡片 / 居中页（选公司、改密、错误页）──────────────────────── */
.page-center{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-8) var(--sp-4); background:var(--bg);
}
.card{
  width:100%; max-width:560px;
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-7);
}
.card-sm{ max-width:420px; }

.card-head{ margin-bottom:var(--sp-6); }
.card-head .t-display{ margin-bottom:6px; }
.card-head p{ margin:0; font-size:13px; color:var(--ink-4); }

/* 公司选择列表 */
.company-list{ display:flex; flex-direction:column; gap:10px; margin:var(--sp-5) 0 var(--sp-6); }

.company{
  position:relative; display:flex; align-items:center; gap:var(--sp-3);
  padding:14px var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.company:hover{ border-color:var(--ink-5); background:var(--surface-2); }
.company input{ position:absolute; opacity:0; pointer-events:none; }

.company .dot{
  flex:0 0 18px; height:18px; border-radius:50%;
  border:1.5px solid var(--ink-5); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-fast) var(--ease);
}
.company .dot::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--brand); transform:scale(0);
  transition:transform var(--dur-fast) var(--ease);
}
.company input:checked ~ .dot{ border-color:var(--brand); }
.company input:checked ~ .dot::after{ transform:scale(1); }
.company:has(input:checked){ border-color:var(--brand); background:var(--green-soft); }

.company .info{ flex:1 1 auto; min-width:0; }
.company .info .n{ display:block; font-size:14px; font-weight:600; color:var(--ink); }
.company .info .m{ display:block; margin-top:3px; font-size:12px; color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.company .tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tag{
  display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border-radius:var(--r-sm); font-size:11px; font-weight:500;
  background:var(--surface-3); color:var(--ink-3); letter-spacing:.02em;
}
.tag-green{ background:var(--green-soft); color:var(--green-ink); }
.tag-warn { background:var(--warn-bg);   color:var(--warn-ink); }

.company.is-off{ cursor:not-allowed; opacity:.72; }
.company.is-off:hover{ border-color:var(--line); background:var(--surface); }

/* ── 工作台 ─────────────────────────────────────────────────────────── */
.app{ min-height:100vh; display:flex; }

.sidebar{
  flex:0 0 232px; background:var(--sidebar); color:var(--sidebar-t);
  padding:var(--sp-5) var(--sp-3);
  display:flex; flex-direction:column;
}
.sidebar .brand{
  display:flex; align-items:center; gap:8px;
  padding:0 var(--sp-2) var(--sp-5);
  font-size:14px; font-weight:600; color:#fff;
}
.sidebar .brand .mark{
  width:24px; height:24px; border-radius:var(--r-sm); background:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
}
.nav-item{
  display:block; padding:9px var(--sp-3); border-radius:var(--r-sm);
  font-size:13px; color:var(--sidebar-t); text-decoration:none;
  position:relative;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nav-item.is-active{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item.is-active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--brand); border-radius:0 2px 2px 0;
}
.nav-item.is-off{ color:var(--sidebar-t2); cursor:not-allowed; }

/* 侧栏底部条：把"帮助与反馈"和版本号钉在同一行两端。
   margin-top:auto 是关键 —— 侧栏是 column flex，靠它把这条推到最底下，
   否则菜单项一多就把底部条挤到可视区外。 */
.sidebar-foot{
  margin-top:auto; padding:var(--sp-3) var(--sp-2) 0;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sidebar-foot-help{ font-size:12px; color:#66746D; cursor:default; }
.sidebar-foot-ver{ font-size:10.5px; color:#3F4C46; font-variant-numeric:tabular-nums; }

.main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; background:var(--bg); }

.topbar{
  height:56px; flex:0 0 56px;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding:0 var(--sp-6);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .who{ font-size:13px; color:var(--ink-3); }
.topbar .who b{ color:var(--ink); font-weight:600; }

.content{ padding:var(--sp-6); }

.grid-cards{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.stat{
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:var(--sp-5);
}
.stat .k{ font-size:var(--fs-meta); font-weight:500; letter-spacing:.06em; color:var(--ink-4); }
.stat .v{ margin-top:6px; font-size:24px; font-weight:600; color:var(--ink); }
.stat .d{ margin-top:var(--sp-2); font-size:12px; color:var(--ink-4); }

.panel{
  margin-top:var(--sp-5); background:var(--surface);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:var(--sp-5);
}

.empty{
  padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--ink-4); font-size:13px;
}
.empty b{ display:block; margin-bottom:6px; color:var(--ink-2); font-weight:600; }

/* ── 响应式 ─────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .auth{ grid-template-columns:1fr; }
  .auth-brand{ padding:var(--sp-6); }
  .auth-brand::after{ display:none; }
  .auth-pitch{ margin-top:var(--sp-5); }
  .auth-pitch h1{ font-size:22px; }
  .auth-pitch .auth-points{ display:none; }
  .auth-foot{ display:none; }
  .auth-panel{ padding:var(--sp-7) var(--sp-5) var(--sp-10); align-items:flex-start; }
  .app{ flex-direction:column; }
  .sidebar{ flex:0 0 auto; flex-direction:row; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); overflow-x:auto; }
  .sidebar .brand{ padding:0 var(--sp-2); }
  .nav-item{ white-space:nowrap; }
  .nav-item.is-active::before{ display:none; }
  .content{ padding:var(--sp-4); }
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  *{ transition-duration:1ms !important; animation-duration:1ms !important; }
}