:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #302736;
  background: #f7f5f9;
  font-size: 16px;
  line-height: 1.55;
  --accent: #660874;
  --deep: #4c1458;
  --tint: #f4edf7;
  --money: #146047;
  --muted: #6c5c72;
  --border: #ded5e3;
  --paper: #fff;
}
* { box-sizing: border-box }
body { margin: 0 }
button, input, select, textarea { font: inherit }
button, a, input, select, summary { outline-offset: 3px }
button, summary, select { cursor: pointer }
button:disabled { cursor: wait; opacity: .6 }
a { color: var(--accent); text-underline-offset: 3px }
:focus-visible { outline: 3px solid #8953a0 }
[hidden] { display: none !important }
h1,h2,h3,p { margin: 0 }
h1 { font-size: clamp(32px,4.6vw,50px); line-height: 1.2; letter-spacing: -.045em }
h2 { font-size: 23px; line-height: 1.38 }
h3 { font-size: 18px }
.topbar { background: var(--paper); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--border) }
.bar-inner,main,.footer { max-width: 1120px; margin-inline: auto; padding-inline: 32px }
.bar-inner,.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.bar-inner { min-height: 76px; padding-block: 10px }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 20px; text-decoration: none }
.department-logo { display: block; width: 244px; max-width: 100%; height: auto }
.brand-title { padding-left: 20px; border-left: 1px solid var(--border); color: var(--deep); font-weight: 650; white-space: nowrap }
#sync-status { flex: 0 0 auto; font-size: 13px; color: var(--muted) }
#sync-status.offline { color: #865315 }
main { min-height: calc(100vh - 141px); padding-top: 30px; padding-bottom: 40px }
.footer { min-height: 76px; color: var(--muted); font-size: 13px }
.back { display: inline-block; padding: 6px 0; margin-bottom: 12px; font-weight: 650; color: var(--accent); font-size: 14px; text-decoration: none }
.back:hover { text-decoration: underline }
.hero { margin: 24px 0 30px }
.hero.compact { margin: 0 0 20px }
.eyebrow { margin-bottom: 6px; color: var(--accent); font-size: 14px; font-weight: bold; letter-spacing: .04em }
.subtext { margin-top: 8px; color: var(--muted) }
.small,.form-meta,.approval,.evidence { color: var(--muted); font-size: 14px }
.num { white-space: nowrap; font-variant-numeric: tabular-nums }
.doors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px }
.door { display: block; padding: 25px; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 12px; background: var(--paper); text-decoration: none; color: inherit }
.door.team { border-top-color: #92629c }
.door:hover { background: #fcf9fd; border-color: #ba98c4 }
.door h2 { font-size: 27px; margin-bottom: 14px }
.door-label { color: var(--muted); font-size: 15px }
.door .bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); margin-top: 22px; padding-top: 14px; font-size: 14px }
.cta { color: var(--accent); font-weight: bold }
.unit-picker { display: flex; align-items: center; gap: 16px; margin: 0 0 16px }
.unit-picker label { font-weight: 700 }
.unit-picker select { width: min(340px,100%); padding: 9px 12px; min-height: 44px; border: 1px solid #b69ebc; border-radius: 7px; color: var(--deep); background: white }
.unit-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px }
.unit { border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px 8px; background: var(--paper); min-width: 0 }
.unit.featured { grid-column: 1/-1; border-top: 4px solid var(--accent); padding: 22px 24px 10px }
.unit-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 14px }
.unit-heading h2 { font-size: 19px; color: var(--deep) }
.unit-balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px }
.balance-label { font-size: 13px; color: var(--muted) }
.unit-balance strong { font-size: 22px; letter-spacing: -.035em; line-height: 1.25 }
.money-value { color: var(--state, var(--money)); font-variant-numeric: tabular-nums }
.featured .unit-heading { display: block }
.featured .unit-balance { margin: 6px 0 8px; flex-direction: column; gap: 1px }
.featured .unit-balance strong { font-size: clamp(34px,4vw,46px) }
.unit-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; margin: 8px 0 10px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums }
.badge { display: inline-block; border-radius: 5px; padding: 3px 7px; font-size: 13px; font-weight: 650; background: var(--wash); color: var(--state) }
.safe { --state: var(--money); --wash: #e6f3ec }
.watch { --state: #805e07; --wash: #fcf1cb }
.low { --state: #944003; --wash: #ffebd8 }
.critical { --state: #a42a3b; --wash: #fce7e8 }
.ledger-row { display: flex; width: 100%; justify-content: space-between; align-items: center; color: var(--accent); background: transparent; border: 0; border-top: 1px solid var(--border); padding: 8px 0; min-height: 44px; font-size: 14px; font-weight: bold }
.ledger-row::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 5px }
.ledger-row[aria-expanded=true]::after { transform: rotate(225deg) }
.detail { padding-block: 10px 6px; border-top: 1px solid var(--border) }
.detail-title { font-size: 16px; margin-bottom: 5px }
.records { margin: 8px 0 0; padding: 0; list-style: none }
.record { padding: 12px 0 8px; border-top: 1px solid var(--border) }
.record-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; overflow-wrap: anywhere; font-size: 16px }
.record-title .num { color: var(--money) }
.record-meta,.record-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere }
.record-meta { margin-top: 5px }
.record-ref { column-gap: 7px }
.reference-id { user-select: all; font-variant-numeric: tabular-nums }
.copy-code { min-height: 38px; padding: 4px 8px; color: var(--accent); font-size: 13px; background: none; border: none; text-decoration: underline; text-underline-offset: 3px }
.copy-feedback { font-size: 13px }
.no-rows { color: var(--muted); padding: 8px 0 }
.group-totals { margin-top: 18px; font-size: 14px; color: var(--muted) }
.group-totals summary { display: list-item; padding: 10px 0; font-weight: bold }
.group-totals p { margin-bottom: 5px }
.form-card { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 18px 0 }
.form-card h2 { margin-bottom: 8px }
.fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 18px 0 }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; font-weight: 650 }
.field.full { grid-column: 1/-1 }
.field input,.field select,.field textarea { width: 100%; min-width: 0; color: #392d3e; background: white; border: 1px solid #b2a4b8; border-radius: 6px; padding: 9px 10px; min-height: 44px; font-weight: 400 }
.field input[type=file] { padding: 7px }
.field input[type=file]::file-selector-button { border: 0; border-radius: 4px; background: var(--tint); color: var(--deep); padding: 5px 10px; margin-right: 8px; cursor: pointer }
.primary,.secondary { min-height: 44px; border: 1px solid transparent; border-radius: 6px; padding: 9px 16px; font-weight: 650 }
.primary { color: white; background: var(--accent) }
.primary:hover { background: var(--deep) }
.secondary { background: white; color: var(--deep); border-color: var(--border) }
.approval { display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 }
.approval input { height: 19px; width: 19px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent) }
.alert,.success,.warning { padding: 11px 13px; border-radius: 6px; margin: 12px 0; overflow-wrap: anywhere }
.alert { background: #fff0f0; color: #983133 }
.success,.projection { background: var(--tint); color: var(--deep) }
.warning { background: #f9efd9; color: #755211 }
.evidence { margin: 12px 0 }
.evidence ul,.warning ul { padding-left: 22px; margin: 6px 0 }
.projection { border-radius: 5px; padding: 10px 14px; font-size: 15px }
.loading { padding-block: 40px }
@media (max-width: 780px) {
  .bar-inner,main,.footer { padding-inline: 18px }
  .unit-list { grid-template-columns: minmax(0,1fr); gap: 10px }
  .unit { padding: 15px 16px 4px }
  .unit.featured { padding: 17px 16px 6px }
}
@media (max-width: 540px) {
  .bar-inner { min-height: 60px; gap: 8px }
  .department-logo { width: min(56vw, 207px) }
  .brand-title { display: none }
  #sync-status { flex: 0 1 auto; font-size: 12px; text-align: right }
  main { padding-top: 16px }
  .back { margin-bottom: 8px }
  .hero { margin: 12px 0 22px }
  .hero.compact { margin-bottom: 14px }
  .subtext { font-size: 14px }
  .doors,.fields { grid-template-columns: minmax(0,1fr) }
  .doors { gap: 12px }
  .door { padding: 17px }
  .door h2 { font-size: 23px; margin-bottom: 8px }
  .door .bottom { margin-top: 12px; padding-top: 9px }
  .unit-picker { display: block }
  .unit-picker label { display: block; margin-bottom: 5px; font-size: 14px }
  .unit-picker select { width: 100% }
  .unit-heading h2 { font-size: 17px }
  .unit-balance { gap: 4px }
  .unit-balance strong { font-size: 19px }
  .form-card { padding: 16px }
  .form-card h2 { font-size: 20px }
  .footer { font-size: 12px }
}