/* People OS · AX BRANDS VI v3.2：集团红 #9C2831，集团米 #F9E2BD，文字黑 #252321；Lato + Noto Sans SC；
   「以清楚的网格、稳定的间距和克制的集团红，建立共同秩序」。红只用在当前位置、主操作和标志上。 */
@font-face { font-family: Lato; font-weight: 400; font-display: swap; src: url(/static/fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: Lato; font-weight: 700; font-display: swap; src: url(/static/fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 400; font-display: swap; src: url(/static/fonts/noto-sc-400.woff2) format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 500; font-display: swap; src: url(/static/fonts/noto-sc-500.woff2) format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 700; font-display: swap; src: url(/static/fonts/noto-sc-700.woff2) format("woff2"); }

:root {
  --ink: #252321; --red: #9C2831; --red-deep: #7E1F27; --rice: #F9E2BD;
  --bg: #F6F2EA; --surface: #FFFFFF; --surface-2: #FBF7F0; --line: #E7DFD2; --line-strong: #D5CAB8;
  --text: #252321; --muted: #6E6355; --accent: #9C2831; --accent-soft: #F8EBE8;
  --block: #B3261E; --block-soft: #FBE9E7; --decide: #8A5A00; --decide-soft: #FBF0D9;
  --info: #55504A; --info-soft: #EFEAE1; --ok: #2B6E4F; --ok-soft: #E4F1EA;
  --rail: #252321; --rail-text: #CFC5B6; --rail-hover: #3A3632;
  --r: 8px; --shadow: 0 1px 2px rgba(37, 35, 33, .05), 0 6px 20px rgba(37, 35, 33, .05);
  --s1: #5A1C23; --s2: #9C2831; --s3: #DB9A8F; --s4: #A9701F; --s5: #F2DAAE;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191715; --surface: #231F1C; --surface-2: #2A2622; --line: #3A342E; --line-strong: #4A433B;
    --text: #F3EBDD; --muted: #B8AC9B; --accent: #E0878D; --accent-soft: #3A2224;
    --block: #F2968F; --block-soft: #3B201E; --decide: #E5BC6B; --decide-soft: #392C14;
    --info: #C8BEB0; --info-soft: #2E2A26; --ok: #7CCBA2; --ok-soft: #1B3127;
    --rail: #141210; --rail-hover: #2A2622; --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --s1: #6E2A32; --s2: #C4525B; --s3: #EFB6AC; --s4: #C48A32; --s5: #F5E2BC;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 Lato, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
select, input, button, textarea { font: inherit; color: inherit; }
select, input[type=text], input[type=tel], input[type=search], input[type=number], input[type=date], input[type=password], input[type=month], textarea {
  height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text); max-width: 100%; }
textarea { height: auto; padding: 8px 10px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
h1 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 0 0 4px; letter-spacing: 0; }
h2 { font-size: 15px; font-weight: 700; margin: 28px 0 10px; }
h3 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.h1-note { color: var(--muted); font-size: 15px; font-weight: 400; }
.sub { color: var(--muted); margin: 0 0 18px; max-width: 78ch; }
.note { color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
kbd { font: 11px Lato, sans-serif; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; color: var(--muted); }

/* ── 外壳：导轨 · 顶栏 · 工作区。外壳不动，只有工作区滚动 ─────────────────────── */
.app { display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.rail { background: var(--rail); display: flex; flex-direction: column; align-items: stretch; padding: 16px 8px 12px; gap: 12px; min-height: 0; }
.rail-logo { display: flex; justify-content: center; padding: 2px 0 10px; }
.rail-logo img { width: 40px; height: 40px; display: block; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; }
.rail-nav.foot { margin-top: auto; }
.rail-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 7px; border-radius: 8px; color: var(--rail-text); font-size: 12px; line-height: 1.2; }
.rail-nav a:hover { background: var(--rail-hover); color: #fff; text-decoration: none; }
.rail-nav a.on { background: var(--red); color: #fff; }
.rail-nav .ic { width: 22px; height: 22px; }
.rail-nav b, .tabbar b, .tabs b, .launch-grid b { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.rail-nav a.on b { background: #fff; color: var(--red); }
.rail-nav b { position: absolute; top: 4px; right: 8px; }
.col { display: flex; flex-direction: column; min-width: 0; height: 100dvh; }
.appbar { background: var(--surface); border-bottom: 1px solid var(--line); flex: none; z-index: 5; }
.appbar-top { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; }
.appbar-logo { display: none; }
.appbar-title { font-size: 17px; font-weight: 700; white-space: nowrap; }
.appbar-tag { font-size: 11px; color: var(--decide); background: var(--decide-soft); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.grow-space { flex: 1; }
.search-open { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; width: 260px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 13px; }
.search-open span { flex: 1; text-align: left; }
.search-open .ic { width: 16px; height: 16px; }
.period-chip { font-size: 12px; color: var(--muted); white-space: nowrap; }
.period-chip.done { color: var(--ok); }
.avatar .ic { width: 18px; height: 18px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--rice); color: var(--ink); font-size: 13px; font-weight: 700; }
details.me { position: relative; }
details.me summary { list-style: none; cursor: pointer; display: block; }
details.me summary::-webkit-details-marker { display: none; }
.me-menu { position: absolute; right: 0; top: 40px; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; z-index: 20; }
.me-card { display: flex; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.me-card strong { display: block; font-size: 14px; line-height: 1.3; } .me-card small { color: var(--muted); }
.me-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; color: var(--text); background: none; border: 0; border-radius: 6px; cursor: pointer; font-size: 14px; text-align: left; }
.me-link:hover { background: var(--surface-2); text-decoration: none; }
.me-link.danger { color: var(--block); } .me-link .ic { width: 18px; height: 18px; }
.lang { padding: 2px 8px; } .linkish { background: none; border: 0; padding: 6px 0; color: var(--accent); cursor: pointer; font-size: 14px; }
.me-switch { padding: 6px 8px; } .me-switch label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; } .me-switch select { width: 100%; }
.tabs { display: flex; gap: 22px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: flex; align-items: center; gap: 6px; padding: 8px 0 10px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); font-weight: 700; border-bottom-color: var(--red); }
.workspace { flex: 1; overflow: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.page { max-width: 1240px; margin: 0 auto; padding: 24px 24px 64px; }
.tabbar { display: none; }
.palette { position: fixed; inset: 0; background: rgba(37, 35, 33, .4); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 0; }
.palette[hidden] { display: none; }
.palette-box { width: 100%; max-width: 560px; background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.palette-box input { width: 100%; height: 52px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 18px; font-size: 16px; outline: none; }
.palette-r a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; color: var(--text); }
.palette-r a.on, .palette-r a:hover { background: var(--accent-soft); text-decoration: none; }
.palette-r small { color: var(--muted); }

/* ── 通用部件 ──────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: var(--text); }
a.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.card .k { color: var(--muted); font-size: 13px; }
.card .v { font-size: 23px; font-weight: 700; line-height: 1.3; margin-top: 2px; font-variant-numeric: tabular-nums; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.panel.inset { background: var(--surface-2); }
.empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 28px 16px; text-align: center; color: var(--muted); }
td.empty { background: transparent; border: 0; border-radius: 0; }
.record-form { display: grid; gap: 12px; max-width: 640px; }
.record-form label, .record-form legend { display: grid; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.record-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .record-form legend { padding: 0; margin-bottom: 4px; }
.record-form input[type=search], .record-form input[type=text], .record-form input[type=date], .record-form select { width: 100%; min-width: 0; font-size: 14px; color: var(--text); }
.record-form .seg label { display: inline-block; padding: 0; } .record-form .seg span { display: block; padding: 4px 12px; border-radius: 5px; }
.record-form .seg input { position: absolute; opacity: 0; } .record-form .seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(37, 35, 33, .12); }
.record-form .seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 1px; }
.record-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pay-card { display: grid; gap: 8px; max-width: 520px; }
.pay-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pay-line b { font-variant-numeric: tabular-nums; }
.pay-line.total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.pay-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.pay-bands div { display: grid; gap: 2px; padding: 6px 10px; background: var(--surface-2); border-radius: 6px; } .pay-bands b { font-variant-numeric: tabular-nums; }
.pay-card .note { margin: 0; }
.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: calc(100dvh - 170px); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; color: var(--muted); font-weight: 500; font-size: 12px; background: var(--surface-2); white-space: nowrap; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 20px; margin: 1px 2px 1px 0; white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.BLOCK { background: var(--block-soft); color: var(--block); } .tag.DECIDE { background: var(--decide-soft); color: var(--decide); }
.tag.INFO { background: var(--info-soft); color: var(--info); } .tag.OK { background: var(--ok-soft); color: var(--ok); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); text-decoration: none; }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; } .btn.wide { width: 100%; height: 44px; }
.status { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 8px 0 18px; }
.reasons { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
form.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.form { display: grid; gap: 14px; max-width: 560px; } .form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .form input, .form select { width: 100%; color: var(--text); font-size: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); min-width: 0; }
.row:last-child { border-bottom: 0; } a.row:hover { background: var(--surface-2); text-decoration: none; }
.row .grow, .grow { flex: 1; min-width: 0; color: var(--text); } .row a.grow:hover { text-decoration: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--info); }
.dot.BLOCK { background: var(--block); } .dot.DECIDE { background: var(--decide); } .dot.INFO { background: var(--line-strong); } .dot.OK { background: var(--ok); }
.ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.ptabs a { padding: 4px 12px; border-radius: 6px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.ptabs a:hover { text-decoration: none; color: var(--text); } .ptabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg { display: inline-flex; background: var(--info-soft); border-radius: 6px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg label { padding: 4px 12px; border-radius: 5px; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.seg a:hover { color: var(--text); text-decoration: none; } .seg a.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(37, 35, 33, .12); }
details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin: 10px 0; }
details.fold > summary { cursor: pointer; padding: 11px 14px; font-weight: 700; } details.fold > :not(summary) { margin: 0 14px 14px; }

/* ── 今天 ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; background: var(--ink); color: #fff; border-radius: var(--r); padding: 24px 28px; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; }
.hero::before { right: 22px; top: 18px; width: 120px; height: 120px; border-top: 2px solid rgba(249, 226, 189, .28); border-right: 2px solid rgba(249, 226, 189, .28); }
.hero::after { right: 12px; top: 8px; width: 120px; height: 120px; border-top: 2px solid rgba(249, 226, 189, .14); border-right: 2px solid rgba(249, 226, 189, .14); }
.hero h1 { font-size: 24px; color: #fff; margin: 0; } .hero .eyebrow { margin: 0 0 4px; color: var(--rice); font-size: 13px; }
.hero .quick { position: relative; z-index: 1; } .hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .hero .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
h2.scope { font-size: 13px; color: var(--muted); font-weight: 500; margin: 22px 0 8px; }

/* ── 假期 ─────────────────────────────────────────────────────────────────── */
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.meter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.meter .name { color: var(--muted); font-size: 13px; } .meter .big { font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .meter .big small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.meter .track { height: 6px; background: var(--info-soft); border-radius: 3px; margin: 10px 0 6px; overflow: hidden; } .meter .track i { display: block; height: 100%; background: var(--red); border-radius: 3px; }
.meter.first .track i { background: var(--red); } .meter:not(.first) .track i { background: var(--s4); }
.req-card { display: grid; gap: 8px; margin-bottom: 10px; } .req-h { display: flex; gap: 10px; align-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-head { background: var(--surface-2); color: var(--muted); font-size: 12px; padding: 6px 8px; }
.cal-day { background: var(--surface); min-height: 96px; padding: 6px 8px; font-size: 12px; display: grid; align-content: start; gap: 3px; min-width: 0; }
.cal-day.off { background: var(--surface-2); color: var(--muted); } .cal-day .n { font-weight: 700; font-size: 13px; }
.cal-day.today .n { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #fff; }
.cal-day .hol { color: var(--accent); font-size: 11px; line-height: 1.3; }
.cal-chip { display: block; padding: 1px 6px; border-radius: 3px; background: var(--accent-soft); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-chip.pending { background: var(--decide-soft); }
.cal-list { display: none; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

/* ── 晋升地图 ──────────────────────────────────────────────────────────────── */
.map { display: grid; grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.map-head { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.map-head small { font-weight: 400; color: var(--muted); }
.map-head.mgmt { background: var(--red); border-color: var(--red); color: #fff; } .map-head.mgmt small { color: var(--rice); }
.map-g { display: flex; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.node { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--text); min-height: 76px; }
a.node:hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.node.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.node.mgmt { background: var(--accent-soft); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.node.none { background: transparent; border-style: dashed; color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 12px; min-height: 76px; }
.node .t { font-weight: 700; font-size: 15px; line-height: 1.3; } .node .c { color: var(--muted); font-size: 12px; margin-top: 2px; }
.node .n { font-size: 12px; margin-top: 6px; color: var(--muted); } .node .n strong { color: var(--ok); }
.node .up { font-size: 12px; margin-top: 4px; color: var(--accent); }
.node:not(.top)::after { content: ""; position: absolute; left: 50%; top: -9px; height: 8px; border-left: 2px solid var(--line-strong); }
.gate { grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gate-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: var(--r); font-size: 13px; }
.gate-bar strong { color: var(--rice); }
.gate-spacer { grid-column: 1; }
.map-lines { display: none; }
.map-later { margin-top: 12px; }
.map-later summary { color: var(--muted); }
.ladder-lane { margin: 8px 0 18px; } .ladder-title { font-weight: 700; margin-bottom: 6px; }

/* ── 工资构成 ──────────────────────────────────────────────────────────────── */
.s1 { background: var(--s1); color: #fff; } .s2 { background: var(--s2); color: #fff; } .s3 { background: var(--s3); color: var(--ink); } .s4 { background: var(--s4); color: #fff; } .s5 { background: var(--s5); color: var(--ink); }
.anatomy { display: grid; gap: 14px; }
.anatomy-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: flex-end; }
.anatomy-h .name { font-size: 18px; font-weight: 700; line-height: 1.3; } .anatomy-h .meta { color: var(--muted); font-size: 13px; }
.anatomy-h .total { text-align: right; } .anatomy-h .total b { display: block; font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; } .anatomy-h .total small { color: var(--muted); }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; }
.part { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 8px; align-items: baseline; min-width: 0; }
.part i { width: 10px; height: 10px; border-radius: 2px; align-self: center; } .part .v { font-weight: 700; font-variant-numeric: tabular-nums; } .part .w { grid-column: 2 / -1; color: var(--muted); font-size: 12px; }
.formula { display: grid; grid-template-columns: 150px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: 0; font-size: 13px; }
.formula > div { padding: 12px; border-bottom: 1px solid var(--line); }
.formula .hd { color: var(--muted); font-size: 12px; background: var(--surface-2); padding: 8px 12px; }
.formula .who { font-weight: 700; } .formula .who small { display: block; font-weight: 400; color: var(--muted); }
.formula .last { border-bottom: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; white-space: nowrap; }
.pill i { width: 10px; height: 10px; border-radius: 2px; }
.pill.plus::before { content: "+"; color: var(--muted); margin-right: 2px; }
.bars { display: grid; gap: 4px; }
.bar-group { font-size: 13px; font-weight: 700; margin: 14px 0 4px; } .bar-group:first-child { margin-top: 0; }
.bar-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 72px; gap: 12px; align-items: center; padding: 3px 6px; border-radius: 4px; font-size: 13px; color: var(--text); }
a.bar-row:hover, .bar-row.on { background: var(--surface-2); text-decoration: none; } .bar-row.on { box-shadow: inset 2px 0 0 var(--red); }
.bar-track { display: flex; gap: 2px; height: 24px; min-width: 0; }
.bar-track span { display: flex; align-items: center; justify-content: center; min-width: 2px; overflow: hidden; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track span:last-child { border-radius: 0 4px 4px 0; }
.bar-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .bar-pending { color: var(--muted); font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
/* 薪酬结构：选择器在上，图随选择变。SVG 两套几何：宽屏横条，手机竖条；文字一律用文字色，色块只管身份 */
.pv-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 8px 0 14px; align-items: flex-end; }
.pv-filters label, .pv-filters .pv-f { display: grid; gap: 4px; flex: 1 1 96px; font-size: 12px; color: var(--muted); min-width: 0; }
.pv-filters label.long { flex: 2 1 150px; } .pv-filters .pv-f { flex: 0 0 auto; }
.pv-filters select { width: 100%; color: var(--text); font-size: 14px; } .pv-filters .seg { flex-wrap: nowrap; height: 36px; align-items: center; }
.pv-filters .seg a { padding: 4px 10px; }
.pv-moved { margin: -6px 0 14px; color: var(--decide); }
.pv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-svg.wide { max-width: 1060px; margin: 0 auto; } .pv-svg.narrow { display: none; max-width: 420px; margin: 0 auto; }
.pv-svg text { fill: var(--muted); font-size: 13px; }
.pv-svg .val { fill: var(--text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-svg .pct { fill: var(--muted); font-size: 12px; font-weight: 400; }
.pv-svg .tick { font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-svg .rule { stroke: var(--line-strong); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.pv-svg .lead { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.pv-svg .tie { stroke: var(--muted); stroke-width: 1; fill: none; }
.pv-svg .dot { fill: var(--surface); stroke: var(--muted); stroke-width: 1; }
.pv-svg .ref { stroke: var(--text); stroke-width: 1; shape-rendering: crispEdges; }
.pv-svg .s1 { fill: var(--s1); } .pv-svg .s2 { fill: var(--s2); } .pv-svg .s3 { fill: var(--s3); } .pv-svg .s4 { fill: var(--s4); } .pv-svg .s5 { fill: var(--s5); } .pv-svg .s6 { fill: var(--muted); }
.pv-seg { cursor: default; outline: none; } .pv-seg .hit { fill: transparent; }
.pv-seg:hover .m, .pv-seg:focus-visible .m { opacity: .82; } .pv-seg:focus-visible .m { stroke: var(--text); stroke-width: 1.5; }
.ledgers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-bottom: 16px; }
.ledger .hd { font-weight: 700; margin-bottom: 6px; }
.ledger .ln { display: grid; grid-template-columns: 14px 12px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.ledger .ln i { width: 10px; height: 10px; border-radius: 2px; align-self: center; } .ledger .ln .op { color: var(--muted); text-align: center; }
.ledger .ln b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ledger .ln.sum { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line-strong); font-weight: 700; } .ledger .ln.sum b { font-size: 19px; font-weight: 700; }
.pv-annual { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.pv-annual small { color: var(--muted); font-size: 12px; }
.pv-assume { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.viz-tip { position: fixed; display: none; pointer-events: none; background: var(--ink); border: 1px solid var(--line-strong); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: pre-line; z-index: 30; }

/* ── 登录 ─────────────────────────────────────────────────────────────────── */
.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; background: var(--surface); }
.login-brand { position: relative; background: var(--red); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.login-brand::before, .login-brand::after { content: ""; position: absolute; pointer-events: none; }
.login-brand::before { right: -70px; bottom: -70px; width: 380px; height: 380px; border: 2px solid rgba(249, 226, 189, .28); }
.login-brand::after { right: -110px; bottom: -110px; width: 380px; height: 380px; border: 2px solid rgba(249, 226, 189, .14); }
.login-brand img { width: 260px; max-width: 80%; height: auto; display: block; }
.login-brand .tag-line { letter-spacing: .14em; font-size: 12px; color: var(--rice); margin: 22px 0 0; }
.login-brand h1 { font-size: 34px; color: #fff; margin: 0 0 8px; } .login-brand p { color: var(--rice); margin: 0; max-width: 34ch; }
.login-brand .fam { display: flex; gap: 20px; font-size: 13px; color: var(--rice); position: relative; }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 88px); gap: 16px; }
.login-form h2 { font-size: 22px; margin: 0; } .login-form .form { max-width: 380px; width: 100%; }
.login-err { color: var(--block); background: var(--block-soft); padding: 8px 12px; border-radius: 6px; max-width: 380px; font-size: 13px; }
.login-links { display: flex; gap: 16px; font-size: 13px; align-items: center; max-width: 380px; justify-content: space-between; } .login-links .lang { padding: 0; } .login-links .linkish { font-size: 13px; padding: 0; }
.demo-pick { max-width: 380px; border-top: 1px solid var(--line); padding-top: 14px; } .demo-pick p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.demo-pick form { display: flex; flex-wrap: wrap; gap: 6px; } .demo-pick button { height: 30px; padding: 0 10px; font-size: 12px; font-weight: 400; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.code-box { font: 700 20px ui-monospace, Menlo, monospace; letter-spacing: .06em; }

/* ── 请假选人 · 员工附件 ───────────────────────────────────────────────────── */
.who-pick { margin-bottom: 12px; } .who-pick h2 { margin: 0 0 10px; font-size: 15px; } .who-pick .note { margin: 10px 0 0; }
.who-now { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .who-now .k { flex: none; font-size: 13px; color: var(--muted); } .who-now .btn { flex: none; }
.pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.status .pick-row { flex: 1 1 100%; }
.pick-row label, .form-steps label { display: block; font-size: 13px; color: var(--muted); }
.pick-row select, .pick-row input, .form-steps label > input, .form-steps label > select, .phone { display: block; width: 100%; margin-top: 4px; }
.form-steps { display: grid; gap: 20px; max-width: 720px; } .form-steps section { display: grid; gap: 12px; } .form-steps h2 { margin: 0; font-size: 15px; } .form-steps > .note { margin: 0; }
.phone { display: grid; grid-template-columns: 150px 1fr; gap: 8px; } .phone select, .phone input { margin: 0; }
.req::before { content: "* "; color: var(--accent); font-weight: 700; }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 10px; } .att-head h2 { margin: 0; }
.doc-list { margin-bottom: 12px; } .doc-list .btn { height: 30px; padding: 0 10px; font-size: 13px; }
.att-form { display: grid; gap: 10px; margin: 12px 0; }
.att-form p { margin: 0; }
.att-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.att-fields label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.att-fields select, .att-fields input { width: 100%; color: var(--text); font-size: 14px; }
.att-form .status { margin: 0; }
input[type=file] { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-size: 13px; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.att-card { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.att-thumb { display: flex; align-items: center; justify-content: center; height: 150px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-pdf { display: grid; justify-items: center; gap: 4px; font-size: 12px; } .att-pdf .ic { width: 38px; height: 38px; }
.att-body { display: grid; gap: 4px; padding: 12px 14px 14px; min-width: 0; }
.att-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.att-name { display: block; overflow-wrap: anywhere; }
.att-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att-more { flex: 1; min-width: 0; } .att-more[open] { flex-basis: 100%; }
.att-more > summary { list-style: none; width: max-content; } .att-more > summary::-webkit-details-marker { display: none; }
.att-mini { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.att-mini input[type=text], .att-mini input[type=date] { width: 100%; }

/* ── 全部模块 ─────────────────────────────────────────────────────────────── */
.launch { margin-top: 20px; }
.launch h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.launch h2 .ic { width: 22px; height: 22px; flex: none; color: var(--muted); }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.launch-grid a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); }
.launch-grid a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.row:has(.proof-add) { flex-wrap: wrap; }
.proof-add { order: 1; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.proof-add input[type=file] { max-width: 100%; }

/* ── 手机 ─────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .appbar-top { height: 52px; padding: 0 16px; gap: 10px; }
  .appbar-logo { display: block; line-height: 0; flex: none; } .appbar-logo img { width: 40px; height: 40px; } .appbar-tag, .period-chip { display: none; }
  .search-open { width: 36px; padding: 0 9px; } .search-open span, .search-open kbd { display: none; }
  .tabs { padding: 0 16px; gap: 18px; }
  .workspace { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .page { padding: 16px 16px 24px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; color: var(--muted); font-size: 11px; }
  .tabbar a:hover { text-decoration: none; } .tabbar a.on { color: var(--accent); } .tabbar .ic { width: 22px; height: 22px; }
  .tabbar b { position: absolute; top: 3px; left: 54%; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .card { padding: 12px; } .card .v { font-size: 19px; }
  .table-wrap { max-height: none; } th { position: static; }
  .h1-note { display: block; font-size: 14px; line-height: 1.45; margin-top: 2px; }
  .table-wrap td:not(.num):not(.tick):not(:has(> input[type=checkbox])) { min-width: 5.5em; }
  .status label { min-width: 0; max-width: 100%; } .status select { width: 100%; }
  select { overflow: hidden; text-overflow: ellipsis; }
  .tag { white-space: normal; max-width: 100%; } .table-wrap .tag { white-space: nowrap; }
  .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 18px; } .hero h1 { font-size: 20px; } .hero .btn { flex: 1; }
  .two { grid-template-columns: 1fr; }
  .att-fields { grid-template-columns: minmax(0, 1fr); }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .meter { padding: 12px; } .meter.first { grid-column: 1 / -1; }
  .cal-grid, .cal-head { display: none; } .cal-list { display: grid; }
  .map { display: none; } .map-lines { display: grid; gap: 8px; }
  .map-lines .map-head { margin-top: 8px; } .node::after { display: none; } .node.none { display: none; }
  .formula { grid-template-columns: minmax(0, 1fr); } .formula .hd { display: none; } .formula > div { border-bottom: 0; padding: 6px 12px; } .formula .who { padding-top: 12px; border-top: 1px solid var(--line); }
  .formula .who:first-of-type { border-top: 0; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 70px; } .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .pv-filters label, .pv-filters label.long { flex: 1 1 40%; } .pv-filters label.wide, .pv-filters .pv-f { flex: 1 1 100%; } .pv-filters .seg a { flex: 1; text-align: center; }
  .anatomy-h .total { text-align: left; }
  .login { grid-template-columns: minmax(0, 1fr); } .login-brand { padding: 28px 24px; } .login-brand img { width: 180px; } .login-brand h1 { display: none; } .login-brand p, .login-brand .fam { display: none; } .login-brand .tag-line { margin-top: 12px; font-size: 11px; }
  .login-form { justify-content: flex-start; padding: 24px; }
}
@media (max-width: 640px) {
  .hide-phone { display: none; }
}
@media (max-width: 768px) {
  .pv-svg.wide { display: none; } .pv-svg.narrow { display: block; }
  .ledgers { grid-template-columns: minmax(0, 1fr); }
}
@media print { .rail, .appbar, .tabbar, .palette { display: none !important; } .app, .col { display: block; height: auto; overflow: visible; } .workspace { overflow: visible; } }

/* 其他页面沿用的小部件 */
.pips { display: inline-flex; gap: 3px; vertical-align: -2px; } .pips i { width: 14px; height: 10px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--red); } .pips i.off-state { background: var(--muted); }
.cond { display: flex; gap: 8px; font-size: 13px; padding: 2px 0; } .cond b { min-width: 42px; flex: none; font-weight: 500; white-space: nowrap; }
.edit-table td { padding: 4px 6px; vertical-align: top; } .edit-table input[type=text], .edit-table select, .edit-table textarea { max-width: 100%; }
.cards.tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.row.cal .d { width: 96px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

/* 工资单：与 PDF 同一版式。这是一张纸，深色模式下也保持纸色，文字和集团红不随主题变 */
.nowrap { white-space: nowrap; }
.tags-wrap { min-width: 16em; } .tags-wrap .tag { white-space: normal; }
table.long-notes td.note { min-width: 11em; }
.slip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 794px; margin: 0 auto 14px; }
.slip-bar h1 { flex: 1; min-width: 0; margin: 0; font-size: 17px; }
.slip { --line: #E7DFD2; --muted: #6E6355; --surface-2: #FBF7F0; position: relative; overflow: hidden; max-width: 794px; margin: 0 auto; padding: 40px 48px 28px; background: #fff; color: var(--ink); border: 1px solid #E7DFD2; border-radius: var(--r); box-shadow: var(--shadow); }
.slip .zh { color: var(--muted); }
.slip-mark { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-38deg); font: 700 clamp(56px, 13vw, 104px)/1 Lato, "Noto Sans SC", sans-serif; color: var(--red); opacity: .08; white-space: nowrap; pointer-events: none; }
.slip-head { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 1.5px solid var(--red); }
.slip-head img { flex: none; width: 196px; height: auto; }
.slip-draft { font-weight: 700; font-size: 13px; color: var(--red); }
.slip-title { margin-left: auto; display: grid; justify-items: end; gap: 1px; text-align: right; font-size: 12.5px; }
.slip-title strong { font-size: 21px; line-height: 1.2; letter-spacing: .03em; }
.slip-title b { color: var(--red); }
.slip-employer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 0 12px; }
.slip-employer strong { display: block; font-size: 16px; line-height: 1.35; }
.slip .k { display: block; font-size: 11px; color: var(--muted); }
.slip .uen { white-space: nowrap; font-size: 13px; }
.slip-facts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin: 0 0 22px; padding: 4px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.slip-facts > div { min-width: 0; padding: 7px 0; }
.slip-facts dt { font-size: 11px; color: var(--muted); }
.slip-facts dd { margin: 1px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.slip-facts .who dd { font-weight: 700; }
.slip-table { margin-bottom: 18px; font-size: 13px; }
.slip-table th { position: static; padding: 0 0 5px; font-size: 14px; font-weight: 700; color: var(--ink); background: none; border-bottom: 1.5px solid var(--ink); white-space: normal; }
.slip-table th.num { font-size: 11px; font-weight: 400; color: var(--muted); vertical-align: bottom; }
.slip-table td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.slip-table tbody tr:hover td { background: none; }
.slip-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.slip-table .item { width: 38%; padding-right: 12px; }
.slip-table .detail { padding: 10px 12px 8px 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.slip-table td.num { padding-left: 8px; }
.slip-table td.nil { color: var(--muted); }
.slip-table tfoot td { position: static; padding: 8px 0 0; background: none; border: 0; font-size: 13.5px; }
.slip-table tfoot .zh { font-weight: 700; white-space: nowrap; }
.slip-memo { margin: -8px 0 18px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.slip-memo-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 700; }
.slip-memo-line b { font-variant-numeric: tabular-nums; white-space: nowrap; } .slip-memo-line .zh { font-weight: 400; }
.slip-memo p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.slip-net { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding: 12px 16px; background: var(--red); color: #fff; font-weight: 700; font-size: 16px; }
.slip-net .zh { color: inherit; }
.slip-net strong { font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip-foot { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.slip-after { max-width: 794px; margin: 12px auto 0; }
@media (max-width: 640px) {
  .slip { padding: 20px 16px 18px; }
  .slip-head { flex-wrap: wrap; gap: 10px 16px; }
  .slip-head img { width: 165px; }
  .slip-title { margin-left: 0; justify-items: start; text-align: left; width: 100%; }
  .slip-title strong { font-size: 18px; }
  .slip-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .slip-facts .who { grid-column: 1 / -1; }
  .slip-table, .slip-table thead, .slip-table tbody, .slip-table tfoot { display: block; }
  .slip-table thead tr, .slip-table tfoot tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .slip-table thead th:first-child { flex: 1; }
  .slip-table thead tr { border-bottom: 1.5px solid var(--ink); } .slip-table thead th { border: 0; }
  .slip-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .slip-table tbody td, .slip-table tbody tr:last-child td { padding: 0; border: 0; }
  .slip-table .item { width: auto; }
  .slip-table .detail { grid-column: 1 / -1; grid-row: 2; padding: 2px 0 0; }
  .slip-table .detail:empty { display: none; }
}
@media print { .slip-bar, .slip-after { display: none; } .slip { max-width: none; border: 0; box-shadow: none; padding: 0; } .slip-net { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.review-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.review-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; } .review-form input { width: 100%; }

/* ── 编辑模式 · 修改记录 ─────────────────────────────────────────────────── */
.edit-note { margin-bottom: 14px; border-color: var(--decide); } .edit-note.bad { border-color: var(--block); color: var(--block); } .edit-note.good { border-color: var(--ok); }
.edit-note .note { color: var(--muted); } .edit-warn { color: var(--decide); margin: 6px 0 0; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.edit-group { display: grid; gap: 12px; padding: 14px 16px 16px; min-width: 0; } .edit-group h2 { margin: 0; }
.edit-row { display: grid; gap: 4px; min-width: 0; } .edit-row > label { color: var(--muted); font-size: 13px; }
.edit-row input[type=text], .edit-row input[type=date], .edit-row select { width: 100%; }
.edit-checks { display: grid; gap: 4px; } .edit-checks label { color: var(--text); font-size: 14px; }
.edit-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.edit-bar label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; min-width: 0; } .edit-bar label.grow { flex: 1 1 200px; } .edit-bar input[type=text] { width: 100%; }
.edit-bar .edit-ack { flex-basis: 100%; display: block; color: var(--text); }
.edit-restore { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; max-width: 640px; } .edit-restore label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .edit-restore .edit-ack { display: block; flex-basis: 100%; color: var(--text); } .edit-restore p { flex-basis: 100%; margin: 0; }
.edit-raw { margin-top: 20px; } .edit-raw summary { cursor: pointer; }
.change-more { margin: 0 0 8px; } .change-more summary { cursor: pointer; }
.rev-list { display: grid; gap: 8px; }
.rev { display: grid; gap: 6px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; } .rev-head .btn { height: 30px; padding: 0 10px; font-size: 13px; }
.rev-lines { display: grid; gap: 2px; margin: 0; } .rev-lines > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; } .rev-lines dt { color: var(--muted); font-size: 13px; } .rev-lines dd { margin: 0; overflow-wrap: anywhere; }
.rev-old { color: var(--muted); } .rev-to { color: var(--muted); padding: 0 6px; }
.rev-foot { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .edit-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; padding: 8px 10px; margin-left: -4px; margin-right: -4px; }
  .edit-bar label { font-size: 12px; gap: 2px; } .edit-bar input[type=date] { width: 100%; }
  .edit-bar .edit-ack { grid-column: 1 / -1; } .edit-bar .btn { width: 100%; }
  .rev-lines > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}