:root {
  --ink: #202a26;
  --muted: #69756f;
  --line: #d8dfdb;
  --surface: #ffffff;
  --page: #f5f7f6;
  --green: #176b4d;
  --green-dark: #10543c;
  --green-soft: #e6f3ed;
  --red: #b42318;
  --red-soft: #fee4e2;
  --amber: #8a6116;
  --amber-soft: #fff3d6;
  --shadow: 0 8px 24px rgba(31, 41, 36, 0.08);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { display: flex; flex-direction: column; margin: 0; min-height: 100vh; background: var(--page); }
main { flex: 1 0 auto; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 19px; height: 19px; flex: 0 0 auto; }

.topbar {
  position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center;
  gap: 24px; padding: 0 max(20px, calc((100vw - 1280px) / 2)); color: #fff; background: #1f2b26;
  border-bottom: 3px solid var(--green);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 132px; font-weight: 700; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--green); border-radius: 4px; }
.brand-mark-large { width: 48px; height: 48px; font-size: 22px; }
.nav { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 0 12px; color: #cbd5d0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.active { color: #fff; background: #293630; border-bottom-color: #57b68c; }
.account { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.account form { display: flex; }
.account-name { color: #dce4e0; font-size: 14px; }
.nav-toggle { display: none !important; }

.page-shell { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.login-shell { min-height: 0; display: grid; place-items: center; padding: 24px; background: #edf1ef; }
.login-panel { width: min(420px, 100%); padding: 36px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); box-shadow: var(--shadow); border-radius: 6px; }
.login-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.login-heading h1 { margin: 0; font-size: 25px; letter-spacing: 0; }
.login-heading p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 0; font-size: 28px; line-height: 1.25; letter-spacing: 0; }
.compact-heading { max-width: 600px; margin-inline: auto; }
.page-heading p { margin: 0; }
.eyebrow { color: var(--green); font-size: 13px; font-weight: 700; }
.date-chip, .live-timer { display: flex; align-items: center; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-timer { color: var(--green); font-size: 20px; font-weight: 700; }

.stats-band { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 34px; background: #25332d; color: #fff; border-radius: 6px; overflow: hidden; }
.stats-band div { padding: 22px 26px; border-right: 1px solid #405048; }
.stats-band div:last-child { border-right: 0; }
.stats-band span { display: block; margin-bottom: 6px; color: #cbd6d0; font-size: 13px; }
.stats-band strong { font-size: 29px; font-variant-numeric: tabular-nums; }
.danger-text { color: #ffb4ae; }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.section-heading h2, .tool-panel h2, .backup-band h2 { margin: 0; font-size: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 14px; font-weight: 600; }
.text-link svg { width: 16px; }
.count-label { color: var(--muted); font-size: 14px; }

.equipment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.equipment-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.equipment-card:hover { border-color: #9eb9ad; box-shadow: 0 5px 16px rgba(31, 41, 36, 0.06); }
.equipment-card-head { display: flex; justify-content: space-between; align-items: center; }
.equipment-code { color: var(--green); font-size: 12px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #31a36f; }
.equipment-card h3 { margin: 9px 0 18px; font-size: 20px; }
.meta-list { margin: 0 0 20px; }
.meta-list div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 6px 0; font-size: 13px; }
.meta-list dt { color: var(--muted); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; }

.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.button { min-height: 42px; padding: 9px 16px; border-radius: 4px; font-weight: 650; }
.button-primary { color: #fff; background: var(--green); border-color: var(--green); }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { color: var(--ink); background: #fff; border-color: #b9c3be; }
.button-secondary:hover { background: #f2f5f3; border-color: #84938c; }
.button-wide { width: 100%; }
.icon-button { width: 38px; height: 38px; padding: 0; color: currentColor; background: transparent; border-radius: 4px; }
.icon-button:hover { background: rgba(127, 148, 138, 0.16); }

.form-stack { display: grid; gap: 18px; }
label { display: grid; gap: 7px; min-width: 0; }
label > span { color: #46524c; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; min-width: 0; padding: 10px 11px; color: var(--ink); background: #fff; border: 1px solid #b8c2bd; border-radius: 4px; outline: none; }
input, select { height: 42px; }
textarea { resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 107, 77, .12); }
.tool-panel { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.tool-panel h2 { margin-bottom: 18px; }
.narrow-panel { max-width: 600px; margin-inline: auto; }
.inline-form { display: grid; align-items: end; gap: 14px; }
.inline-form .button { align-self: end; }
.four-columns { grid-template-columns: 1fr 1fr 1fr 1.2fr auto; }
.three-columns { grid-template-columns: 1fr 1.2fr 1.6fr auto; }
.two-columns { grid-template-columns: 1.5fr 1fr auto; }
.add-item-form { grid-template-columns: 1fr auto; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.flash-stack { position: fixed; top: 76px; right: 18px; z-index: 50; display: grid; gap: 8px; width: min(390px, calc(100vw - 36px)); }
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 4px; box-shadow: var(--shadow); }
.flash-success { border-left-color: var(--green); }
.flash-error { border-left-color: var(--red); }
.flash-error svg { color: var(--red); }
.flash-success svg { color: var(--green); }

.inspection-list { display: grid; gap: 12px; }
.inspection-item { margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.inspection-item legend { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 0; font-size: 15px; line-height: 1.65; }
.inspection-item legend > span { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; margin-top: 1px; color: var(--green); background: var(--green-soft); border-radius: 4px; font-size: 12px; font-weight: 700; }
.result-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(480px, 100%); margin: 14px 0 0 37px; }
.choice { display: block; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px; color: #59665f; background: #f6f8f7; border: 1px solid #ccd4d0; border-radius: 4px; cursor: pointer; }
.choice input:focus-visible + span { outline: 3px solid rgba(23, 107, 77, .18); }
.choice-normal input:checked + span { color: var(--green-dark); background: var(--green-soft); border-color: #5da989; }
.choice-abnormal input:checked + span { color: var(--red); background: var(--red-soft); border-color: #e78a83; }
.choice-skipped input:checked + span { color: var(--amber); background: var(--amber-soft); border-color: #dfbd67; }
.remark-field { margin: 12px 0 0 37px; }
.remark-field[hidden] { display: none; }
.submission-panel { display: grid; gap: 18px; margin-top: 18px; padding: 22px; background: #25332d; color: #fff; border-radius: 6px; }
.submission-panel label > span { color: #e4ebe7; }
.form-actions { display: flex; gap: 10px; }

.filter-bar { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
.filter-bar label { width: 190px; }
.table-shell { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 12px 14px; color: #4c5852; background: #eef2f0; text-align: left; white-space: nowrap; }
td { padding: 13px 14px; border-top: 1px solid #e2e7e4; vertical-align: top; }
td small { display: block; margin-top: 3px; color: var(--muted); }
.empty-cell { padding: 48px; color: var(--muted); text-align: center; }
.detail-table td:nth-child(2) { min-width: 360px; line-height: 1.55; }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border-radius: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge-success { color: var(--green-dark); background: var(--green-soft); }
.badge-danger { color: var(--red); background: var(--red-soft); }
.badge-muted { color: #5d6561; background: #e8ecea; }
.record-summary, .notes-band, .backup-band { margin-bottom: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.horizontal-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.horizontal-meta div { display: block; padding: 3px 18px; border-right: 1px solid var(--line); }
.horizontal-meta div:first-child { padding-left: 0; }
.horizontal-meta div:last-child { border-right: 0; }
.horizontal-meta dt { margin-bottom: 5px; }
.notes-band { margin-top: 16px; }
.notes-band p { margin: 8px 0 0; color: var(--muted); }

.editable-list { display: grid; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.editable-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr auto auto; align-items: end; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); }
.editable-row:last-child { border-bottom: 0; }
.row-identity { align-self: center; }
.row-identity strong, .row-identity span { display: block; }
.row-identity span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.equipment-edit-row { grid-template-columns: 1fr 1.2fr 2fr auto auto; }
.toggle-label { display: flex; align-items: center; align-self: center; gap: 7px; white-space: nowrap; }
.toggle-label input { width: 18px; height: 18px; accent-color: var(--green); }
.toggle-label span { color: var(--ink); }
.template-list { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.template-row { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.template-row:last-child { border-bottom: 0; }
.template-row:hover { background: #f4f8f6; }
.template-row strong, .template-row span { display: block; }
.template-row span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.item-edit-row { grid-template-columns: auto 1fr auto auto; align-items: center; }
.item-number { display: grid; place-items: center; width: 28px; height: 28px; color: var(--green); background: var(--green-soft); border-radius: 4px; font-size: 12px; font-weight: 700; }
.export-panel { max-width: 900px; }
.backup-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 900px; margin-top: 18px; }
.backup-band p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.empty-state { padding: 64px 20px; color: var(--muted); text-align: center; }
.empty-state svg { width: 36px; height: 36px; }
.empty-state h2 { font-size: 17px; }

.site-footer { flex: 0 0 auto; padding: 14px 20px 18px; color: var(--muted); border-top: 1px solid var(--line); background: var(--page); font-size: 12px; text-align: center; }
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--green); }

@media (max-width: 980px) {
  .topbar { padding: 0 18px; gap: 12px; }
  .nav-toggle { display: inline-flex !important; }
  .nav { position: absolute; top: 64px; left: 0; right: 0; display: none; height: auto; padding: 8px; background: #1f2b26; border-bottom: 1px solid #405048; }
  .nav.open { display: grid; grid-template-columns: repeat(3, 1fr); }
  .nav a { min-height: 44px; justify-content: center; border: 0; border-radius: 4px; }
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four-columns, .three-columns, .two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editable-row, .equipment-edit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editable-row .icon-button { justify-self: end; }
  .horizontal-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .horizontal-meta div { padding: 0; border: 0; }
}

@media (max-width: 640px) {
  .topbar { height: 58px; }
  .brand { min-width: auto; }
  .brand > span:last-child, .account-name { display: none; }
  .nav { top: 58px; }
  .nav.open { grid-template-columns: repeat(2, 1fr); }
  .page-shell { padding: 23px 14px 48px; }
  .page-heading { align-items: flex-start; margin-bottom: 18px; }
  .page-heading h1 { font-size: 23px; }
  .inspection-heading { align-items: center; }
  .date-chip { display: none; }
  .stats-band div { padding: 16px 12px; text-align: center; }
  .stats-band strong { font-size: 24px; }
  .equipment-grid { grid-template-columns: 1fr; }
  .tool-panel { padding: 17px; }
  .four-columns, .three-columns, .two-columns, .form-grid, .editable-row, .equipment-edit-row { grid-template-columns: 1fr; }
  .inline-form .button { width: 100%; }
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-bar label { width: auto; }
  .filter-bar .button { grid-column: 1 / -1; }
  .inspection-item { padding: 15px 12px; }
  .result-control, .remark-field { width: 100%; margin-left: 0; }
  .result-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice span { padding: 8px 4px; font-size: 12px; }
  .choice svg { width: 15px; height: 15px; }
  .submission-panel { padding: 16px; }
  .form-actions { display: grid; }
  .horizontal-meta { grid-template-columns: 1fr 1fr; }
  .backup-band { align-items: stretch; flex-direction: column; }
  .backup-band .button { width: 100%; }
  .login-panel { padding: 28px 22px; }
  .flash-stack { top: 68px; }
}