/* perfgate — 「明亮精密工作账本」(design-duo 2026-09-10,Claude+Codex 合成定稿)
   Apple 骨架 + 仪器级精密:九阶中性/唯一品牌蓝/语义三阶浅底深字/数字分声部/零外链。
   旧别名全部保留,模板 class 名零改动。 */
:root {
  color-scheme: light;

  /* 九阶中性色:1最浅 9最深 */
  --neutral-1: #FFFFFF;
  --neutral-2: #F2F2F7;
  --neutral-3: #E5E5EA;
  --neutral-4: #D1D1D6;
  --neutral-5: #C7C7CC;
  --neutral-6: #AEAEB2;
  --neutral-7: #8E8E93;
  --neutral-8: #636366;  /* 辅助文字/单位/表头(页面底上对比度5.37:1) */
  --neutral-9: #1C1C1E;  /* 正文/标题/数字 */

  /* 唯一品牌蓝(docgate 同族已验证,白字4.94:1) */
  --brand: #006EDB;
  --brand-bg: #EEF6FF;
  --brand-border: rgba(0,110,219,.24);

  /* 语义三阶:浅底/深字/细边 */
  --ok-bg: #EFFAF2;  --ok-fg: #1E6B34;  --ok-bd: rgba(52,199,89,.24);
  --wn-bg: #FFF7EA;  --wn-fg: #824B00;  --wn-bd: rgba(255,149,0,.26);
  --dg-bg: #FFF0EF;  --dg-fg: #A3211A;  --dg-bd: rgba(255,59,48,.24);

  /* 灯点实色(圆点承担识别,文字承担含义) */
  --lamp-green: #248A3D; --lamp-yellow: #A66B00; --lamp-red: #D92D20;

  /* 三声部字体:中文/数字/编号,零外部字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-num: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 字阶 T1-T5 窄幅流体 */
  --t1: clamp(.875rem, .85rem + .1vw, .9375rem);   /* 辅助/表头/状态 */
  --t2: clamp(1rem, .975rem + .1vw, 1.0625rem);    /* 正文/输入/按钮 */
  --t3: clamp(1.25rem, 1.2rem + .2vw, 1.375rem);   /* 卡片标题 */
  --t4: clamp(1.5rem, 1.4rem + .4vw, 1.75rem);     /* 页面标题 */
  --t5: clamp(2rem, 1.8rem + .8vw, 2.5rem);        /* 关键数值(少用最稀) */

  --line-soft: rgba(60,60,67,.12);
  --line-strong: rgba(60,60,67,.24);
  --ease: cubic-bezier(.2,.8,.2,1);

  /* 旧别名 → 新令牌(模板与旧类不失效) */
  --blue: var(--brand); --blue-dark: var(--brand);
  --bg: var(--neutral-2); --card: var(--neutral-1);
  --text: var(--neutral-9); --text2: var(--neutral-8);
  --line: var(--line-soft);
  --green: var(--lamp-green); --yellow: var(--lamp-yellow); --red: var(--lamp-red);
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui); font-synthesis: none;
  background: var(--neutral-2); color: var(--neutral-9);
  font-size: var(--t2); line-height: 1.55;
  -webkit-font-smoothing: antialiased; padding-bottom: 48px;
}
a { color: var(--brand); text-decoration: none; }

/* ── 导航:全站唯一毛玻璃,余下皆为实白 ── */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,242,247,.92);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-bottom: 1px solid var(--line-soft);
  padding: 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  min-height: 52px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav { background: var(--neutral-2); }
}
nav .brand {
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  margin-right: 14px; font-family: var(--font-num);  /* 品牌名用等宽=仪器铭牌 */
}
nav a.nl {
  color: var(--neutral-9); padding: 6px 12px; border-radius: 999px;
  font-size: var(--t1); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  nav a.nl:hover { background: var(--neutral-3); }
}
nav a.nl.active { background: var(--brand-bg); color: var(--brand); font-weight: 600; }
nav .me { margin-left: auto; color: var(--neutral-8); font-size: var(--t1); padding-left: 8px; }
nav a.logout { color: var(--dg-fg); }

.wrap { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
.wrap[data-page="login"], .wrap[data-page="change_pwd"] { max-width: 440px; }

/* ── 卡片:实白+hairline+零阴影 ── */
.card {
  background: var(--neutral-1);
  border-radius: var(--radius); border: 1px solid var(--line-soft);
  padding: 24px; margin-bottom: 16px;
}
.card h2 { font-size: var(--t3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 14px; }
.card h3 { font-size: var(--t2); font-weight: 600; margin: 12px 0 8px; color: var(--neutral-8); }
.muted { color: var(--neutral-8); font-size: var(--t1); }

/* ── 按钮:唯一品牌蓝实底,pressed 只变深浅 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border: 1px solid transparent; cursor: pointer;
  padding: 0 20px; min-height: 44px; border-radius: 999px;
  font-size: var(--t1); font-weight: 500; font-family: var(--font-ui);
  transition: background-color .12s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(.94); }
}
.btn:active { filter: brightness(.90); transition-duration: .08s; }
.btn.gray { background: var(--neutral-3); color: var(--neutral-9); }
.btn.gray:hover { filter: brightness(.96); }
.btn.green { background: var(--brand); }  /* 动作按钮收编品牌蓝,绿色只留语义 */
.btn.red { background: var(--lamp-red); }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: var(--t1); }
.btn.big { min-height: 52px; width: 100%; font-size: var(--t2); }
button.link { background: none; border: none; color: var(--brand); cursor: pointer; font-size: var(--t1); min-height: 44px; }

/* ── 表单 ── */
input[type=text], input[type=number], input[type=date], input[type=password], input[type=datetime-local], input[type=month],
select, textarea {
  font: inherit; font-size: var(--t2); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--neutral-7);
  background: var(--neutral-1); color: var(--neutral-9); outline: none; width: 100%;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--neutral-8); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-border);
}
textarea { min-height: 64px; resize: vertical; }
label { font-size: var(--t1); color: var(--neutral-8); display: block; margin: 12px 0 4px; }
.frow { display: flex; gap: 12px; flex-wrap: wrap; }
.frow > div { flex: 1; min-width: 140px; }
.inline-form { display: inline; }

/* ── 表格:hairline 行线,数字列等宽 ── */
table { width: 100%; border-collapse: collapse; font-size: var(--t1); }
th {
  text-align: left; color: var(--neutral-8); font-size: var(--t1); font-weight: 500;
  letter-spacing: 0.02em; padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
}
td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 灯:实心静止圆点+深色文字;过程与核定同形,不呼吸 ── */
.light { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--t1); color: var(--neutral-9); }
.light::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.light.green { color: var(--neutral-9); } .light.green::before { background: var(--lamp-green); }
.light.yellow { color: var(--neutral-9); } .light.yellow::before { background: var(--lamp-yellow); }
.light.red { color: var(--neutral-9); } .light.red::before { background: var(--lamp-red); }

/* ── 药丸:语义三阶浅底深字 ── */
.pill {
  display: inline-flex; align-items: center; padding: 0 12px; min-height: 28px;
  border-radius: 999px; font-size: var(--t1); font-weight: 500;
  background: var(--brand-bg); color: var(--brand); border: 1px solid var(--brand-border);
  white-space: nowrap;
}
.pill.gray { background: var(--neutral-2); color: var(--neutral-8); border-color: var(--line-soft); }
.pill.green { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.pill.yellow { background: var(--wn-bg); color: var(--wn-fg); border-color: var(--wn-bd); }
.pill.red { background: var(--dg-bg); color: var(--dg-fg); border-color: var(--dg-bd); }

/* ── KPI:去外壳,数值是唯一主角,等宽声部 ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { padding: 4px 0; }
.kpi + .kpi { border-left: 1px solid var(--line-soft); padding-left: 16px; }
.kpis .kpi:first-child { border-left: none; padding-left: 0; }
.kpi .v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--t5); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.kpi .k { font-size: var(--t1); color: var(--neutral-8); margin-top: 4px; }

/* ── 时间线:中性节点,无状态钩子不猜进度 ── */
.tl { list-style: none; margin-top: 8px; }
.tl li { position: relative; padding: 8px 0 8px 26px; font-size: var(--t1); }
.tl li::before {
  content: ''; position: absolute; left: 5px; top: 14px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--neutral-1); border: 2px solid var(--neutral-4);
}
.tl li::after { content: ''; position: absolute; left: 11px; top: 28px; bottom: -8px; width: 1px; background: var(--line-soft); }
.tl li:last-child::after { display: none; }
.tl .who { color: var(--neutral-8); font-size: var(--t1); }

/* ── 快捷填报:同一浅蓝体系,取消四色(入口≠业务状态) ── */
.big-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.big-actions a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 12px 10px; border-radius: var(--radius);
  background: var(--brand-bg); color: var(--brand); border: 1px solid var(--brand-border);
  font-size: var(--t2); font-weight: 600;
  transition: background-color .12s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .big-actions a:hover { background: #DFEEFF; }
}
.big-actions a:active { background: #CFE6FF; transition-duration: .08s; }
.big-actions a.alt, .big-actions a.g2, .big-actions a.g3 { background: var(--brand-bg); color: var(--brand); }

.alert {
  padding: 12px 16px; border-radius: 10px; font-size: var(--t1); margin-bottom: 12px;
  background: var(--wn-bg); color: var(--wn-fg); border: 1px solid var(--wn-bd);
}
.alert.red { background: var(--dg-bg); color: var(--dg-fg); border-color: var(--dg-bd); }
.alert.green { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }

.hr { border: none; border-top: 1px solid var(--line-soft); margin: 16px 0; }
.score-input {
  width: 96px !important; min-height: 52px; text-align: right;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: 0.92em; }

/* ── 签名:逐日凭据带(每动作一根柱,零动作不画,无最低柱高) ── */
.sat-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 112px; margin: 16px 0 10px;
  border-bottom: 1px solid var(--neutral-4);  /* 基线只标零位 */
}
.sat-col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.sat-bar { width: 100%; background: var(--brand); border-radius: 2px 2px 0 0; }

/* ── 动效只许操作反馈;reduced-motion 全关且内容不依赖动效 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; margin: 16px auto; }
  .card { padding: 16px; }
  nav { padding: 0 10px; }
  nav a.nl { padding: 6px 10px; }
  .kpi + .kpi { border-left: none; padding-left: 0; }
  .sat-bars { height: 88px; }
  .score-input { width: 88px !important; }
  /* 表格字号不降,列多了交给 .tbl-wrap 横滚 */
}