:root {
  --ink: #17222d;
  --muted: #6c7a86;
  --line: #e5ebe8;
  --panel: #ffffff;
  --bg: #f4f7f5;
  --green: #0c8b68;
  --green-dark: #087457;
  --mint: #dff4eb;
  --amber: #f4a62a;
  --red: #d94b4b;
  --blue: #3978d4;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 1080px; }
html.pwa-standalone body { overscroll-behavior-y: contain; }
html.pwa-standalone main { padding-top: max(24px, env(safe-area-inset-top)); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 230px; padding: 22px 16px;
  background: linear-gradient(180deg, #fbfefc 0%, #eef8f3 58%, #e8f4ee 100%);
  color: var(--ink); display: flex; flex-direction: column;
  border-right: 1px solid rgba(59,133,104,.16); box-shadow: 8px 0 30px rgba(34,94,73,.055);
}
.brand { display: flex; gap: 10px; align-items: center; padding: 0 0 24px; }
.sidebar-collapse-toggle {
  position: absolute; top: 88px; right: -13px; z-index: 2; width: 28px; height: 28px;
  border: 1px solid rgba(12,139,104,.22); border-radius: 50%; background: #fff; color: var(--green-dark);
  display: grid; place-items: center; padding: 0 0 2px; font-size: 24px; line-height: 1;
  box-shadow: 0 5px 14px rgba(34,94,73,.14); transition: transform .2s ease, background .2s ease;
}
.sidebar-collapse-toggle:hover { color: #fff; background: var(--green); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(145deg, #31c99b, #0c8b68); font-size: 20px; font-weight: 700;
}
.brand-logo {
  width: 198px; height: 72px; object-fit: contain; object-position: left center;
  flex: 0 0 198px; filter: none;
}
.brand-title {
  color: #FFFFFF; font-size: 16px; line-height: 1; white-space: nowrap;
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 16px; }
.brand span { color: #9fc1b8; font-size: 11px; margin-top: 3px; }
nav { display: grid; gap: 7px; }
.nav-item {
  color: #40534c; border: 1px solid transparent; background: transparent; border-radius: 11px;
  padding: 12px 14px; text-align: left; transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.nav-item span { display: inline-block; width: 28px; color: #0c8b68; }
.nav-item:hover { color: #087457; background: rgba(12,139,104,.08); border-color: rgba(12,139,104,.09); }
.nav-item.active { color: white; background: linear-gradient(100deg, #087457, #10a177); box-shadow: 0 9px 22px rgba(8,116,87,.18); }
.nav-item.active span { color: #fff2dc; }
.nav-create { color: #087457; background: #dff4eb; border-color: rgba(12,139,104,.12); }
.nav-create:hover { color: white; background: linear-gradient(100deg, #087457, #10a177); }
.nav-create span { color: #0c8b68; }
.data-management-toggle { position: relative; }
.data-management-toggle::-webkit-details-marker { display: none; }
.data-management-toggle::marker { content: ""; }
.data-management-toggle i { position: absolute; right: 14px; font-style: normal; transition: transform .2s ease; }
.data-management[open] .data-management-toggle i { transform: rotate(180deg); }
.data-management-actions { display: grid; gap: 5px; padding: 2px 10px 5px 42px; }
.data-management-actions button {
  border: 0; border-radius: 8px; padding: 8px 10px; text-align: left;
  color: #356556; background: rgba(12,139,104,.08); font-size: 12px;
}
.data-management-actions button:hover { color: #fff; background: #0c8b68; }
.data-management-actions button:disabled { cursor: wait; opacity: .65; }
.data-management-link { text-align: left; font-weight: 600; }
.data-management-link span { display: inline-block; width: 22px; }
.data-management-tools { display: grid; gap: 5px; padding-top: 4px; border-top: 1px solid rgba(12,139,104,.12); }
.data-management-tools[hidden] { display: none; }
.sidebar-footer { margin-top: auto; }
.system-info-wrap { }
.system-info-toggle {
  width: 100%; border: 1px solid rgba(12,139,104,.18); border-radius: 10px; padding: 10px 12px;
  color: #527066; background: rgba(255,255,255,.46); text-align: left; font-size: 11px;
}
.system-info-toggle:hover { color: #087457; background: #fff; }
.system-info-toggle span { color: #0c8b68; margin-right: 5px; }
.calendar-note {
  margin-top: 8px; border: 1px solid rgba(12,139,104,.18); border-radius: 12px; padding: 12px;
  color: #527066; background: rgba(255,255,255,.55); font-size: 11px; line-height: 1.6;
}
.calendar-note[hidden] { display: none; }
.sidebar-session {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(12,139,104,.18); border-radius: 10px; background: rgba(255,255,255,.52);
}
.sidebar-session .logged-user { min-width: 0; text-align: left; }
.sidebar-session .logged-user strong { color: #193c31; font-size: 12px; }
.sidebar-session .logged-user span { color: #648178; font-size: 10px; }
.sidebar-logout {
  flex: 0 0 auto; border: 1px solid #477064; border-radius: 8px; padding: 6px 9px;
  color: #087457; background: #fff; font-size: 11px;
}
.sidebar-logout:hover { color: #fff; background: #087457; }

main { grid-column: 2; padding: 36px 42px 60px; width: 100%; min-width: 0; }
.shell, .sidebar, .brand-logo, .nav-item { transition: width .2s ease, grid-template-columns .2s ease, padding .2s ease; }
@media (min-width: 821px) {
  .shell.sidebar-collapsed { grid-template-columns: 78px 1fr; }
  .shell.sidebar-collapsed .sidebar { width: 78px; padding-right: 10px; padding-left: 10px; }
  .shell.sidebar-collapsed .brand { min-height: 72px; padding-bottom: 24px; }
  .shell.sidebar-collapsed .brand-logo { width: 0; flex-basis: 0; opacity: 0; overflow: hidden; }
  .shell.sidebar-collapsed .sidebar-collapse-toggle { top: 42px; transform: rotate(180deg); }
  .shell.sidebar-collapsed .nav-item { min-height: 45px; padding: 11px 8px; overflow: hidden; text-align: center; white-space: nowrap; font-size: 0; }
  .shell.sidebar-collapsed .nav-item span { width: auto; font-size: 18px; }
  .shell.sidebar-collapsed .data-management-toggle i,
  .shell.sidebar-collapsed .data-management-actions,
  .shell.sidebar-collapsed .sidebar-footer { display: none; }
}
header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.header-actions { display: flex; align-items: flex-end; gap: 12px; }
.logged-user { min-width: 150px; text-align: right; }
.logged-user strong, .logged-user span { display: block; }
.logged-user strong { font-size: 13px; }
.logged-user span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.eyebrow { margin: 0 0 5px; color: var(--green); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 30px; margin-bottom: 8px; }
.subheading, .panel-head p { color: var(--muted); margin-bottom: 0; font-size: 13px; }
.primary {
  border: 0; color: white; background: var(--green); border-radius: 10px;
  padding: 11px 18px; box-shadow: 0 6px 18px rgba(12,139,104,.18);
}
.primary:hover { background: var(--green-dark); }
.secondary { border: 1px solid var(--line); background: white; border-radius: 10px; padding: 10px 18px; }
.secondary:disabled { opacity: .55; cursor: not-allowed; }
.batch-sample-receive { color: var(--green-dark); border-color: #a9d6c8; font-weight: 700; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 20px; }
#metricCards, .metrics .due-shortcuts { display: contents; }
.metric {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 3px 14px rgba(23,34,45,.035);
}
.metric[data-scope] { cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.metric[data-scope]:hover { transform: translateY(-2px); border-color: #8bc4b2; box-shadow: 0 8px 22px rgba(23,34,45,.08); }
.metric.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(12,139,104,.12); }
.metric .label { color: var(--muted); font-size: 12px; }
.metric .value { font-size: 29px; font-weight: 700; margin: 9px 0 2px; }
.metric .hint { font-size: 11px; color: var(--muted); }
.metric.danger .value { color: var(--red); }
.metric.success .value { color: var(--green); }

.panel { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 21px 24px 17px; }
.panel-head h2 { font-size: 18px; margin-bottom: 5px; }
.due-shortcut {
  min-width: 0; border: 1px solid #dce4e0; border-radius: 14px; background: #fff; color: var(--ink);
  padding: 18px 20px; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.due-shortcut:hover { transform: translateY(-1px); border-color: #8bc4b2; box-shadow: 0 8px 18px rgba(23,34,45,.06); }
.due-shortcut.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(12,139,104,.12); }
.due-shortcut span { display: block; color: var(--red); font-weight: 700; font-size: 14px; }
.due-shortcut strong { display: block; margin-top: 3px; font-size: 18px; color: var(--ink); }
.scope-filter { width: 170px; background: #fbfcfb; }
.filter-row th { background: white; padding: 12px 10px; border-top: 1px solid var(--line); }
.filter-row input, .filter-row select {
  width: 100%; min-width: 0; border: 1px solid #dce4e0; border-radius: 9px;
  padding: 9px 10px; background: #fbfcfb; color: var(--ink); font-weight: 400;
}
.due-filter-group { display: grid; gap: 6px; }
.due-filter-group input[type="date"] { font-size: 12px; padding-inline: 7px; }
.filter-row th:first-child { padding-left: 17px; }
.filter-row th:last-child { padding-right: 17px; }
.export-top { color: var(--green-dark); border-color: #b9dacf; font-weight: 600; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1580px; table-layout: fixed; border-collapse: collapse; }
.project-table { min-width: 1760px; }
.project-table .col-order { width: 210px; }
.project-table .col-entity { width: 230px; }
.project-table .col-owner { width: 92px; }
.project-table .col-type { width: 90px; }
.project-table .col-cycle { width: 172px; }
.project-table .col-stage { width: 142px; }
.project-table .col-due { width: 126px; }
.project-table .col-node { width: 128px; }
.stage-assignee { display: block; margin-top: 5px; color: #087457; font-weight: 700; white-space: nowrap; }
.entity-edit-link { border: 0; padding: 0; color: var(--text); background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.entity-edit-link:hover { color: var(--green); text-decoration: underline; }
.row-check {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  color: var(--green-dark); font-size: 12px; font-weight: 700;
}
.row-check input { width: auto; accent-color: var(--green); }
.card-check { margin-top: 6px; margin-bottom: 0; }
.project-table .col-risk { width: 92px; }
.project-table .col-action { width: 132px; }
.project-table th:nth-child(n+8):nth-child(-n+10),
.project-table td:nth-child(n+8):nth-child(-n+10) { text-align: center; }
.project-table th:nth-child(11),
.project-table td:nth-child(11) { text-align: center; }
.project-table td:last-child { white-space: nowrap; }
th {
  background: #f8faf9; color: #738077; font-size: 11px; text-align: left;
  padding: 11px 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
td { padding: 15px 17px; border-bottom: 1px solid #eef2f0; font-size: 12px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.project-name { font-weight: 600; margin-bottom: 4px; max-width: 330px; }
.project-meta { color: var(--muted); font-size: 11px; }
.quote-meta { color: var(--green-dark); font-size: 11px; margin: -1px 0 3px; font-weight: 600; }
.cycle { max-width: 170px; line-height: 1.45; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge.stage { background: #e8f1ff; color: #3569b2; }
.badge.done { background: var(--mint); color: var(--green-dark); }
.badge.cancelled { background: #eef0f1; color: #707b80; }
.scheduled-date { display: block; margin-top: 7px; color: var(--green-dark); font-size: 11px; white-space: nowrap; }
.node-done {
  display: inline-block; color: var(--green-dark); font-weight: 700;
  line-height: 1.35; white-space: normal; word-break: keep-all;
}
.quality-flag { display: inline-block; margin-left: 7px; color: var(--amber); font-size: 10px; }
.risk { color: var(--green); }
.risk.overdue { color: var(--red); font-weight: 600; }
.risk.missing { color: var(--amber); font-weight: 600; }
.link-btn { border: 0; background: transparent; color: var(--green); padding: 6px; }
.delete-btn { border: 0; background: transparent; color: var(--red); padding: 6px; margin-left: 4px; }
.drawer-actions .delete-project-btn { margin-right: auto; border: 1px solid #f2b9b9; border-radius: 8px; background: #fff7f7; padding: 10px 14px; font-weight: 600; }
.drawer-actions .delete-account-btn { margin-right: auto; border: 1px solid #f2b9b9; border-radius: 8px; background: #fff7f7; padding: 10px 14px; font-weight: 600; }
.cleanup-content { padding: 22px 26px 28px; }
.cleanup-controls { display: flex; align-items: end; gap: 18px; margin: 18px 0; flex-wrap: wrap; }
.cleanup-controls label:not(.checkbox-line) { display: grid; gap: 6px; min-width: 180px; }
.cleanup-controls select { border: 1px solid #dce4e0; border-radius: 8px; padding: 10px 12px; background: #fff; }
.cleanup-summary, .cleanup-result { padding: 12px 14px; border-radius: 9px; background: #f3f8f6; color: var(--green-dark); margin-bottom: 14px; }
.cleanup-table-wrap { max-height: 360px; border: 1px solid var(--line); border-radius: 10px; }
.cleanup-table-wrap table { min-width: 760px; }
.danger-action { background: #c94747; }
.danger-action:hover { background: #ad3535; }
.sampling-schedule-panel { display: grid; gap: 18px; }
.instrument-panel { display: grid; gap: 18px; }
.instrument-panel .statistics-head { flex-wrap: wrap; }
.instrument-filters { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(180px, 240px) minmax(160px, 200px); gap: 12px; margin-bottom: 14px; align-items: center; }
.instrument-table td { vertical-align: middle; }
.instrument-status { display: inline-flex; padding: 5px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.instrument-status.danger { color: #c83e3e; background: #fff0f0; }
.instrument-status.warning { color: #a56100; background: #fff6dd; }
.instrument-status.success { color: #087457; background: #e7f8f1; }
.instrument-status.muted { color: #64748b; background: #eef2f6; }
.instrument-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px 24px 24px; }
.instrument-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.instrument-wide { grid-column: 1 / -1; }
.instrument-modal-card { max-height: 90vh; overflow: auto; }
.sample-panel { display: grid; gap: 18px; }
.sample-table { min-width: 1180px; }
.sample-table td { vertical-align: middle; }
.sample-form .sample-project-field { grid-column: span 2; }
.sample-analysis-section { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfa; }
.sample-analysis-section .section-title-row { margin-bottom: 12px; }
.sample-analysis-rows { display: grid; gap: 9px; }
.sample-analysis-row { display: grid; grid-template-columns: 1.1fr 1.5fr .65fr 36px; gap: 9px; align-items: center; }
.sample-analysis-row input { min-width: 0; }
.sample-analysis-remove { color: #b63b3b; }
.sample-audit-section { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.sample-audit-section summary { cursor: pointer; font-weight: 700; color: var(--green-dark); }
.sampling-schedule-panel .statistics-head { flex-direction: column; align-items: flex-start; }
.sampling-schedule-panel .schedule-actions { margin-top: 16px; flex-wrap: wrap; width: 100%; }
.sampling-schedule-panel .schedule-header-tabs { margin-left: 4px; align-self: flex-end; }
.schedule-date-control { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.schedule-date-control input { min-width: 156px; }
.sampling-schedule-panel .performance-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schedule-workbench-tabs { display: flex; gap: 8px; padding: 8px; border: 1px solid #dce9e3; border-radius: 12px; background: #edf5f1; width: fit-content; max-width: 100%; }
.schedule-workbench-tabs button { border: 0; border-radius: 9px; padding: 10px 15px; background: transparent; color: #4b6159; font: inherit; font-weight: 700; cursor: pointer; }
.schedule-workbench-tabs button.active { background: #fff; color: var(--green-dark); box-shadow: 0 2px 8px rgba(23, 71, 55, .12); }
.schedule-workbench-tabs b { display: inline-flex; min-width: 20px; justify-content: center; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #e1f4ec; font-size: 12px; }
.schedule-workbench-filters { display: flex; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid #e1ece7; border-radius: 10px; background: #fbfdfc; }
.schedule-workbench-filters label { display: flex; align-items: center; gap: 8px; color: #456057; font-size: 13px; font-weight: 700; }
.schedule-workbench-filters select { min-width: 190px; }
.schedule-region-filter { display: grid; gap: 6px; min-width: 230px; }
.schedule-region-filter input { min-width: 0; }
.schedule-region-dropdown { position: relative; min-width: 230px; }
.schedule-region-dropdown summary { min-height: 34px; box-sizing: border-box; padding: 8px 30px 8px 10px; border: 1px solid #d7e2de; border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; list-style: none; position: relative; }
.schedule-region-dropdown summary::-webkit-details-marker { display: none; }
.schedule-region-dropdown summary::after { content: "⌄"; position: absolute; right: 10px; color: var(--muted); }
.schedule-region-dropdown[open] summary { border-color: #79bea9; border-radius: 8px 8px 0 0; }
.schedule-region-dropdown[open] summary::after { content: "⌃"; }
.schedule-region-dropdown > div { position: absolute; z-index: 20; left: 0; width: 420px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 5px; padding: 7px; border: 1px solid #79bea9; border-top: 0; border-radius: 0 0 8px 8px; background: #fff; box-shadow: 0 8px 20px rgba(23, 71, 55, .16); }
.schedule-region-dropdown label { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 4px; border-radius: 6px; color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; }
.schedule-region-dropdown label:hover { background: #eef8f3; }
.schedule-region-dropdown label input { min-width: auto; }
.schedule-region-dropdown label:not(.schedule-region-all) { white-space: nowrap; }
.schedule-region-dropdown .schedule-region-all { grid-column: 1 / -1; border-bottom: 1px solid #e3eee9; margin-bottom: 3px; font-weight: 700; }
@media (max-width: 700px) { .schedule-region-dropdown > div { width: min(420px, calc(100vw - 42px)); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schedule-workbench-filters p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.schedule-workbench-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(520px, 1.5fr) minmax(300px, .82fr); gap: 16px; align-items: start; }
.schedule-workbench-layout > * { min-width: 0; }
.schedule-workbench-layout .dispatch-pool, .schedule-workbench-layout .schedule-board, .schedule-resource-panel { height: min(680px, calc(100vh - 260px)); overflow: auto; }
.schedule-workbench-layout .dispatch-pool { height: auto; max-height: min(680px, calc(100vh - 260px)); }
.schedule-workbench-layout .dispatch-pool { padding: 11px; }
.schedule-workbench-layout .dispatch-priority-grid { grid-template-columns: 1fr; margin-bottom: 12px; }
.schedule-workbench-layout .dispatch-pool-grid { grid-template-columns: 1fr; }
.schedule-workbench-layout .dispatch-pool-card header { padding: 10px; }
.schedule-workbench-layout .dispatch-pool-items { padding: 8px; }
.schedule-board { border: 1px solid #d9e7e1; border-radius: 12px; padding: 16px; background: #fbfdfc; }
.schedule-workbench-layout .schedule-board { padding: 14px; }
.schedule-workbench-layout .scheduled-board-grid { grid-template-columns: 1fr; }
.schedule-resource-panel { border: 1px solid #d9e7e1; border-radius: 12px; padding: 16px; background: #fbfdfc; }
.schedule-resource-panel h3 { margin: 4px 0 14px; color: var(--ink); }
.resource-empty, .resource-selected { display: grid; gap: 7px; padding: 13px; border: 1px solid #d8e8e1; border-radius: 10px; background: #f3faf6; color: #4d625a; font-size: 13px; line-height: 1.55; }
.resource-selected { margin-bottom: 13px; background: #eaf8f1; }
.schedule-resource-panel dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 14px; border-top: 1px solid #e0ebe6; }
.schedule-resource-panel dt, .schedule-resource-panel dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #e0ebe6; font-size: 13px; }
.schedule-resource-panel dt { color: var(--muted); font-weight: 700; }
.schedule-resource-panel dd { color: var(--ink); overflow-wrap: anywhere; }
.schedule-resource-panel .full { width: 100%; }
.schedule-resource-form { display: grid; gap: 11px; }
.schedule-resource-form label { display: grid; gap: 6px; color: #4f655c; font-size: 12px; font-weight: 700; }
.schedule-resource-form input, .schedule-resource-form textarea { min-width: 0; box-sizing: border-box; }
.schedule-resource-form textarea { resize: vertical; }
.schedule-resource-form .resource-wide { grid-column: 1 / -1; }
.resource-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 1260px) { .schedule-workbench-layout { grid-template-columns: minmax(260px, .8fr) minmax(390px, 1.2fr); } .schedule-resource-panel { grid-column: 1 / -1; height: auto; } .schedule-resource-panel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }
@media (max-width: 820px) { .schedule-workbench-layout { grid-template-columns: 1fr; } .schedule-workbench-layout .dispatch-pool, .schedule-workbench-layout .schedule-board, .schedule-resource-panel { height: auto; max-height: none; } .schedule-resource-panel dl { grid-template-columns: 1fr; } }
.schedule-board { border: 1px solid #d9e7e1; border-radius: 12px; padding: 16px; background: #fbfdfc; }
.scheduled-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.scheduled-day-card { border: 1px solid #d8e7e1; border-radius: 10px; overflow: hidden; background: #fff; }
.scheduled-day-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #eef8f3; color: var(--green-dark); }
.scheduled-day-card header small { display: block; margin-top: 4px; color: #547066; }
.compact-modal-card { width: min(620px, calc(100vw - 36px)); }
.scheduled-resource-summary { margin: 0; padding: 10px 14px; border-bottom: 1px solid #e5eeea; color: #597066; font-size: 12px; line-height: 1.6; }
.scheduled-day-items { display: grid; gap: 7px; padding: 10px; }
.scheduled-day-items button { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #e0ebe6; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.scheduled-day-items button:hover { border-color: #79bea9; background: #f5fbf8; }
.scheduled-day-items span, .scheduled-day-items small { font-size: 12px; color: var(--muted); }
.scheduled-day-card.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(12, 145, 106, .12); }
.scheduled-task-list, .draft-schedule-list { display: grid; gap: 7px; margin: 0; padding: 10px; list-style: none; }
.scheduled-task-list li, .draft-schedule-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid #e0ebe6; border-radius: 8px; background: #fff; }
.scheduled-task-list li > span, .draft-order { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #edf7f2; color: var(--green-dark); font-size: 12px; font-weight: 800; }
.scheduled-task-list li b, .draft-schedule-list li b { color: var(--ink); font-size: 13px; }
.scheduled-task-list li strong, .draft-schedule-list li strong { white-space: nowrap; color: var(--green-dark); font-size: 13px; }
.scheduled-groups { display: grid; gap: 14px; }
.scheduled-group-card { overflow: hidden; border: 1px solid #d8e7e1; border-radius: 12px; background: #fff; }
.scheduled-group-card.selected { border-color: #15956e; box-shadow: 0 0 0 2px rgba(21, 149, 110, .12); }
.scheduled-group-header { display: grid; gap: 9px; padding: 14px 16px; background: #f2faf6; cursor: pointer; }
.scheduled-group-header:hover { background: #eaf7f1; }
.scheduled-group-title { display: flex; align-items: center; gap: 9px; color: var(--green-dark); }
.scheduled-group-title strong { font-size: 16px; }
.group-chevron { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 20px; line-height: 1; }
.scheduled-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-left: 31px; color: #526b61; font-size: 12px; }
.scheduled-group-meta b { margin-left: auto; color: var(--green-dark); font-size: 13px; }
.scheduled-group-table-wrap { padding: 12px 16px 16px; overflow-x: auto; }
.scheduled-group-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.scheduled-group-table th, .scheduled-group-table td { padding: 11px 10px; border: 1px solid #e0ebe6; text-align: left; vertical-align: middle; font-size: 12px; }
.scheduled-group-table th { background: #fafdfb; color: #536c62; font-weight: 800; }
.scheduled-group-table td:first-child, .scheduled-group-table th:first-child { width: 48px; text-align: center; }
.scheduled-group-table td:nth-child(2) { white-space: nowrap; color: var(--green-dark); }
.scheduled-group-table td:nth-child(3) { min-width: 220px; }
.scheduled-group-table td:nth-child(3) small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; white-space: pre-wrap; }
.scheduled-group-table td:nth-child(4), .scheduled-group-table td:nth-child(5), .scheduled-group-table td:nth-child(6) { white-space: nowrap; }
.schedule-status { display: inline-flex; padding: 4px 9px; border: 1px solid #d7e6df; border-radius: 6px; color: #98631b; background: #fff8e9; }
.schedule-status.done { color: #087457; border-color: #9ad2bb; background: #f0fbf5; }
.schedule-attachment-link { border: 0; padding: 3px 5px; background: transparent; color: #57756a; font-size: 17px; cursor: pointer; }
.schedule-attachment-link:hover { color: var(--green-dark); }
.scheduled-view-head { align-items: center; }
.schedule-workbench-layout:has(#dispatchPool[hidden]) { grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); }
.sampling-schedule-panel.scheduled-focus .statistics-head > div:first-child { display: none; }
.sampling-schedule-panel.scheduled-focus .statistics-head { justify-content: flex-end; }
.sampling-schedule-panel .performance-cards { display: none; }
.schedule-actions { align-items: center; }
.schedule-mode-bar { display: flex; align-items: center; min-height: 58px; padding: 10px 14px; border: 1px solid #dbe9e3; border-radius: 12px; background: #fbfdfc; }
.schedule-mode-bar .schedule-workbench-tabs { display: flex !important; visibility: visible !important; }
.schedule-workbench-tabs button { white-space: nowrap; }
.schedule-top-controls { margin-top: 0; }
.sampling-schedule-panel.scheduled-focus .schedule-workbench-filters { justify-content: flex-end; }
.sampling-schedule-panel.scheduled-focus .schedule-workbench-filters p { margin-right: auto; }
.schedule-top-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #dbe9e3; border-radius: 12px; background: #fbfdfc; }
.schedule-top-controls .schedule-workbench-tabs { margin: 0; flex: 0 0 auto; }
.schedule-top-controls .schedule-workbench-filters { margin: 0; flex: 1 1 520px; }
.schedule-top-controls #scheduleViewHint { flex: 1 1 100%; margin: 0; }
.schedule-region-dropdown > div label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.schedule-region-dropdown > div label b { color: var(--green-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
.flat-scheduled-table-wrap { padding: 0; overflow: auto; }
.flat-scheduled-table { min-width: 980px; }
.flat-scheduled-table td:nth-child(2) { min-width: 220px; }
.flat-scheduled-table td:nth-child(4) { min-width: 170px; }
.flat-scheduled-table td:nth-child(6) { min-width: 165px; }
@media (max-width: 980px) { .schedule-top-controls { align-items: stretch; } .schedule-top-controls .schedule-workbench-tabs { flex-basis: 100%; } }
.sampling-schedule-panel.scheduled-focus .schedule-workbench-layout { grid-template-columns: minmax(0, 1fr); }
.sampling-schedule-panel.scheduled-focus .schedule-board { height: auto; max-height: min(720px, calc(100vh - 230px)); }
.sampling-schedule-panel[data-schedule-mode="scheduled"] #dispatchPool,
.sampling-schedule-panel[data-schedule-mode="history"] #dispatchPool,
.sampling-schedule-panel[data-schedule-mode="scheduled"] .schedule-legacy-detail,
.sampling-schedule-panel[data-schedule-mode="history"] .schedule-legacy-detail,
.sampling-schedule-panel[data-schedule-mode="scheduled"] #scheduleResourcePanel,
.sampling-schedule-panel[data-schedule-mode="history"] #scheduleResourcePanel { display: none !important; }
.sampling-schedule-panel.scheduled-focus .statistics-head > div:first-child { display: block; }
.sampling-schedule-panel.scheduled-focus .statistics-head { justify-content: space-between; }
.scheduled-group-card.compact .scheduled-group-header { cursor: default; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 11px 14px; }
.scheduled-group-card.compact .scheduled-group-title { display: grid; gap: 2px; }
.scheduled-group-card.compact .scheduled-group-title small { color: var(--muted); font-size: 12px; }
.scheduled-group-card.compact .scheduled-group-meta { padding-left: 0; }
.scheduled-group-table.compact { min-width: 930px; }
.scheduled-group-table.compact td:nth-child(2) { min-width: 190px; white-space: normal; }
.scheduled-group-table.compact td:nth-child(3) { min-width: 86px; }
.scheduled-group-table.compact td:nth-child(4) { min-width: 160px; white-space: normal; }
.scheduled-group-table.compact td:nth-child(6) { min-width: 150px; white-space: normal; }
.scheduled-group-table.compact small { display: block; margin-top: 3px; color: var(--muted); }
.monitoring-summary summary { color: var(--green-dark); cursor: pointer; white-space: nowrap; }
.monitoring-summary p { margin: 7px 0 0; color: #536c62; line-height: 1.55; white-space: normal; }
.is-resource-selected td { background: #f1fbf6; }
.inline-resource-row td { padding: 0 !important; background: #f8fcfa; }
.inline-schedule-resource-form { display: grid; gap: 12px; padding: 14px; border-top: 1px dashed #b9d8ca; }
.inline-resource-head, .inline-resource-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inline-resource-head span { color: var(--muted); font-size: 12px; }
.inline-resource-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.inline-resource-fields label, .inline-resource-note { display: grid; gap: 5px; color: #526b61; font-size: 12px; font-weight: 700; }
.inline-return-area { display: grid; gap: 7px; padding: 10px; border-radius: 8px; background: #eef8f3; }
.inline-return-area > div { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.inline-return-area label { color: #496258; font-size: 12px; }
@media (max-width: 1050px) { .inline-resource-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.draft-schedule-list li > div { display: grid; gap: 2px; min-width: 0; }
.draft-schedule-list li > div span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-order-actions { display: inline-flex; gap: 4px; }
.draft-order-actions button { width: 26px; height: 26px; padding: 0; border: 1px solid #cfe2da; border-radius: 6px; background: #fff; color: var(--green-dark); cursor: pointer; }
.draft-order-actions .draft-remove-btn { color: #b63b3b; border-color: #e7caca; }
.board-total { align-self: center; padding: 7px 10px; border-radius: 999px; background: #e8f7ef; color: var(--green-dark); font-size: 13px; }
.dispatch-pool { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fbfdfc; }
.dispatch-priority { margin: 14px 0; padding: 14px; border: 1px solid #d6e8e0; border-radius: 10px; background: #f6fbf8; }
.dispatch-priority-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dispatch-priority-head h4 { margin: 0; color: var(--green-dark); }
.dispatch-priority-head span { color: var(--muted); font-size: 12px; text-align: right; }
.dispatch-priority-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.dispatch-priority-task { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid #dce9e3; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.dispatch-priority-task:hover { border-color: #79bea9; background: #f7fcf9; }
.dispatch-priority-task span { color: #a65b18; font-size: 12px; }
.dispatch-priority-task small { color: var(--muted); font-size: 12px; }
.dispatch-pool-details { border-top: 1px solid #dfe9e5; padding-top: 12px; }
.dispatch-pool-details summary { cursor: pointer; color: var(--green-dark); font-weight: 700; }
.dispatch-pool-details[open] summary { margin-bottom: 12px; }
.dispatch-pool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dispatch-pool-card { border: 1px solid #d9e7e1; border-radius: 10px; background: #fff; overflow: hidden; }
.dispatch-pool-card header { display: flex; justify-content: space-between; gap: 10px; padding: 12px; background: #f1f8f5; color: var(--green-dark); }
.dispatch-pool-card header small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.dispatch-pool-card header b { white-space: nowrap; }
.dispatch-recommend { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e3ece8; background: #fffdf3; color: #7a5700; font-size: 12px; line-height: 1.5; }
.dispatch-pool-items { display: grid; gap: 7px; padding: 10px; }
.dispatch-task { display: grid; gap: 3px; width: 100%; padding: 9px 10px; border: 1px solid #e3ece8; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.dispatch-task:hover { border-color: #79bea9; background: #f7fcf9; }
.dispatch-task small, .dispatch-more { color: var(--muted); font-size: 12px; }
.dispatch-task-select { grid-template-columns: 1fr; align-items: stretch; cursor: default; }
.dispatch-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dispatch-task-check { display: flex; align-items: flex-start; width: 18px; flex: 0 0 18px; min-width: 18px; cursor: pointer; }
.dispatch-task-check input { margin: 3px 0 0; accent-color: var(--green); }
.dispatch-project-name { display: grid; gap: 3px; min-width: 0; flex: 1; text-align: left; }
.dispatch-project-name b, .dispatch-project-name span { display: block; min-width: 0; overflow-wrap: anywhere; }
.dispatch-task-toggle { flex: 0 0 auto; border: 1px solid #b9dfd1; border-radius: 6px; padding: 3px 7px; background: #fff; color: var(--green-dark); font-size: 12px; cursor: pointer; }
.dispatch-task-toggle:hover { border-color: var(--green); background: #effaf5; }
.dispatch-task-detail { display: grid; gap: 7px; margin-top: 5px; padding-top: 8px; border-top: 1px dashed #cfe4db; font-size: 12px; line-height: 1.55; }
.dispatch-task-detail > div { display: grid; gap: 2px; }
.dispatch-task-detail span { color: var(--muted); }
.dispatch-task-detail p { margin: 0; color: #384c45; white-space: pre-wrap; word-break: break-word; }
.dispatch-task-detail strong { color: var(--green-dark); font-size: 14px; }
.dispatch-task-hours { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding-top: 2px; }
.dispatch-task-hours label { display: grid; gap: 3px; color: var(--muted); }
.dispatch-task-hours input { width: 100px; border: 1px solid #cfe4db; border-radius: 6px; padding: 5px 7px; color: var(--ink); }
.dispatch-confirmation-warning { color: #a65d10 !important; font-weight: 700; }
.dispatch-confirmation-ok { color: var(--green-dark) !important; }
.dispatch-task-attachments { display: grid; gap: 4px; }
.dispatch-task-attachments > div { display: flex; flex-wrap: wrap; gap: 5px; }
.dispatch-attachment-link { max-width: 100%; overflow: hidden; border: 1px solid #b9dfd1; border-radius: 6px; padding: 4px 6px; background: #f7fcf9; color: var(--green-dark); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dispatch-attachment-link:hover { border-color: var(--green); background: #ebf8f1; }
.dispatch-task-select.selected { border-color: var(--green); background: #f0fbf5; box-shadow: inset 3px 0 0 var(--green); }
.schedule-legacy-detail { margin-top: 16px; }
.schedule-legacy-detail > summary { cursor: pointer; padding: 10px 12px; color: var(--green-dark); font-weight: 700; }
.dispatch-task-summary { display: block; width: 100%; margin-top: 7px; color: #51655e; line-height: 1.6; }
.schedule-actions input { border: 1px solid #dce4e0; border-radius: 9px; padding: 10px 12px; background: #fff; }
.schedule-filter-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.schedule-filter-card:hover { border-color: #79bea9; transform: translateY(-1px); }
.schedule-table { min-width: 1650px; table-layout: auto; }
.schedule-table th:nth-child(1) { min-width: 110px; }
.schedule-table th:nth-child(2), .schedule-table th:nth-child(3) { min-width: 120px; }
.schedule-table th:nth-child(4) { min-width: 150px; }
.schedule-table th:nth-child(5) { min-width: 120px; }
.schedule-table th:nth-child(6) { min-width: 240px; }
.schedule-table th:nth-child(7) { min-width: 180px; }
.schedule-table th:nth-child(8) { min-width: 120px; }
.schedule-table th:nth-child(9) { min-width: 170px; }
.schedule-table th:nth-child(10) { min-width: 150px; }
.schedule-table th:nth-child(12) { min-width: 220px; }
.schedule-table th { vertical-align: top; }
.schedule-column-filter { display: block; width: 100%; min-width: 84px; margin-top: 8px; padding: 6px 8px; border: 1px solid #d7e2de; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-weight: 400; }
.schedule-column-filter:focus { outline: 2px solid rgba(18, 139, 104, .18); border-color: #79bea9; }
.schedule-project-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; line-height: inherit; cursor: pointer; }
.schedule-project-link:hover { color: var(--green-dark); text-decoration: underline; }
.schedule-long-text { white-space: pre-wrap; line-height: 1.5; }
.monitoring-cell { text-align: center; }
.monitoring-view-btn { border: 1px solid #9bcdbd; background: #f3faf7; color: var(--green-dark); border-radius: 8px; padding: 8px 10px; white-space: nowrap; }
.monitoring-view-btn:hover { background: #e5f5ef; border-color: var(--green); }
.monitoring-content-card { width: min(860px, 92vw); }
.monitoring-content-body { padding: 22px 28px 28px; }
.monitoring-content-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.8; color: var(--ink); }
.schedule-form { padding: 22px 26px 28px; }
.schedule-project-summary { display: flex; gap: 16px; align-items: center; padding: 13px 15px; margin-bottom: 18px; background: #f3f8f6; border-radius: 10px; }
.schedule-project-summary span { color: var(--muted); }
.schedule-attachments { margin: -4px 0 20px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; }
.schedule-attachments .field-label-row small { color: var(--muted); }
.schedule-attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.schedule-attachment-link { max-width: 100%; border: 1px solid #b8dcd1; border-radius: 8px; padding: 8px 11px; background: #f0faf6; color: var(--green-dark); text-align: left; overflow-wrap: anywhere; }
.schedule-attachment-link:hover { border-color: var(--green); background: #e5f5ef; }
.schedule-attachment-link span { margin-right: 5px; }
.schedule-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schedule-monitoring { grid-column: 1 / span 2; }
.schedule-instruments { grid-column: 3 / span 2; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label-row .compact { padding: 6px 10px; font-size: 12px; line-height: 1.2; }
.extraction-hint { min-height: 18px; color: var(--muted); line-height: 1.45; }
td:last-child { white-space: nowrap; }
.empty { padding: 45px; text-align: center; color: var(--muted); }
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.pagination div { display: flex; gap: 8px; }
.pagination button { padding: 7px 12px; font-size: 11px; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }

.overlay { position: fixed; inset: 0; background: rgba(10,24,21,.35); z-index: 10; }
.drawer {
  position: fixed; z-index: 11; top: 4vh; left: 50%; width: min(1280px, calc(100vw - 72px)); height: 92vh;
  background: white; border-radius: 16px; transform: translate(-50%, -26px); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
  box-shadow: 0 16px 48px rgba(12,31,26,.2); overflow-y: auto;
}
.drawer.open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; padding: 25px 28px 15px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin-bottom: 0; }
.icon-btn { border: 0; background: #f3f6f4; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; }
form { padding: 0 28px 30px; }
.form-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.form-section h3 { font-size: 14px; margin-bottom: 16px; }

.collapse-panel {
  border: 1px solid #dfeee8;
  border-radius: 12px;
  background: #f8fcfa;
  overflow: hidden;
}

.collapse-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  user-select: none;
}

.collapse-panel > summary::-webkit-details-marker { display: none; }

.collapse-panel > summary::after {
  content: "点击显示";
  color: #087457;
  background: #e8f6ef;
  border: 1px solid #bfe6d6;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

.collapse-panel[open] > summary::after { content: "收起"; }

.collapse-panel > .operation-logs,
.collapse-panel > .calc-grid {
  padding: 0 14px 14px;
}
.drawer .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.drawer .form-grid.dates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drawer .project-basic-grid { grid-template-columns: 1.2fr 1.2fr 1.2fr .78fr .78fr .78fr .78fr; }
.project-basic-grid .field-order-date { grid-column: 1 / span 2; }
.project-basic-grid .field-quote { grid-column: 3; }
.project-basic-grid .field-order-no { grid-column: 4; }
.project-basic-grid .field-project-type { grid-column: 5; }
.project-basic-grid .field-owner { grid-column: 6; }
.project-basic-grid .field-customer-service { grid-column: 7; }
.project-basic-grid .field-client { grid-column: 1; }
.project-basic-grid .field-tested { grid-column: 2; }
.project-basic-grid .field-project-address { grid-column: 3 / span 2; }
.project-basic-grid .field-amount { grid-column: 5; }
.project-basic-grid .field-business-fee { grid-column: 6; }
.project-basic-grid .field-subcontract-fee { grid-column: 1; }
.project-basic-grid .field-amount input,
.project-basic-grid .field-business-fee input,
.project-basic-grid .field-subcontract-fee input { min-width: 0; }
.project-basic-grid .subcontract-section { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #f8fbf9; }
.subcontract-section .section-title-row > div { display: grid; gap: 3px; }
.subcontract-section .section-title-row small { color: var(--muted); font-size: 11px; }
.subcontract-items { display: grid; gap: 8px; margin-top: 10px; }
.subcontract-item { display: grid; grid-template-columns: 1.1fr 2fr .75fr auto; gap: 8px; align-items: end; }
.subcontract-item label { margin: 0; }
.subcontract-item .remove-subcontract { padding: 10px 12px; color: var(--red); }
.subcontract-empty { color: var(--muted); font-size: 12px; padding: 4px 0; }
.project-basic-grid .field-material { grid-column: 1 / span 2; }
.project-basic-grid .field-contract { grid-column: 3; }
.project-basic-grid .field-review-bypass { grid-column: 4; }
.review-bypass-option { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 500; }
.review-bypass-option input { width: auto; margin: 0; }
.notification-node-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-basic-grid .field-contact-name { grid-column: 5; }
.project-basic-grid .field-contact-method { grid-column: 6; }
.project-basic-grid .field-cycle { grid-column: 1 / span 3; }
.project-basic-grid .field-negotiated { grid-column: 4 / span 4; }
.attachment-controls { display: flex; gap: 8px; align-items: center; }
.attachment-controls input { min-width: 0; }
.attachment-controls button { white-space: nowrap; padding: 9px 12px; font-size: 12px; }
.contract-upload { min-height: 42px; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.attachment-chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px;
  color: #27735f; background: #e8f6ef; font-size: 11px;
}
.attachment-chip button { border: 0; color: #4c6c63; background: transparent; padding: 0; font-size: 14px; line-height: 1; }
.attachment-chip button:hover { color: var(--red); }
.section-title-row { display: flex; justify-content: space-between; align-items: center; }
.section-title-row .secondary { padding: 7px 11px; font-size: 12px; }
.project-attachment-links { display: flex; flex-wrap: wrap; gap: 8px; }
.project-attachment-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.project-attachment-item .project-attachment-link { min-width: 0; }
.project-attachment-item .delete-btn { padding: 7px 9px; font-size: 12px; }
.project-attachment-link {
  border: 1px solid #bfe6d6; border-radius: 8px; padding: 8px 10px; color: #087457;
  background: #f3fbf7; font-size: 12px; text-decoration: none;
}
.project-attachment-link:hover { background: #e3f6ed; }
.audit-status { border-radius: 999px; padding: 5px 10px; color: #3978d4; background: #e8f1ff; font-size: 12px; }
.audit-status.approved { color: #087457; background: #e5f7ef; }
.audit-status.returned { color: #c13b3b; background: #ffeded; }
.audit-meta { color: var(--muted); font-size: 12px; }
.discount-approval-info { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 10px 0 14px; padding: 12px; border: 1px solid #cfe4da; border-radius: 12px; background: #f4faf7; }
.discount-approval-info div { display: grid; gap: 4px; }
.discount-approval-info span { color: var(--muted); font-size: 12px; }
.discount-approval-info strong { color: var(--text); font-size: 14px; }
.audit-controls { display: grid; gap: 10px; }
.audit-controls div { display: flex; justify-content: flex-end; gap: 10px; }
.operation-logs { display: grid; gap: 8px; }
.operation-log {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
  border: 1px solid #e5eee9; border-radius: 9px; padding: 10px 12px; background: #fbfdfc; font-size: 12px;
}
.operation-log time { color: var(--muted); font-size: 11px; }
.operation-log strong { color: var(--ink); }
.operation-log span { color: var(--muted); }
label { display: grid; gap: 7px; color: #58645e; font-size: 11px; }
label.wide { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%; border: 1px solid #dce4e0; border-radius: 8px; padding: 10px 11px;
  color: var(--ink); background: white; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #55ad91; box-shadow: 0 0 0 3px #e6f5f0; }
input:disabled, select:disabled, textarea:disabled {
  background: #f1f3f2; color: #8a938f; cursor: not-allowed;
}
.permission-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #fff8e9; color: #946915; font-size: 11px;
}
.calculation { background: transparent; margin: 18px -10px 0; padding: 0; border: 0; border-radius: 0; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-item { padding: 10px; background: white; border-radius: 8px; border: 1px solid #e8efec; }
.calc-item span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.calc-item strong { font-size: 12px; }
.remark { margin-top: 20px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.flow-completion-action { margin-top: 6px; align-self: flex-start; padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.confirm-order-action { border: 1px solid rgba(5, 150, 105, .32); background: #ecfdf5; color: var(--green-dark); border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.confirm-order-action:hover { background: #dff8ec; }

.modal {
  position: fixed; inset: 0; z-index: 20; background: rgba(10,24,21,.42);
  display: grid; place-items: center; padding: 30px;
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(720px, 92vw); max-height: 90vh; overflow: auto;
  background: white; border-radius: 16px; box-shadow: 0 22px 70px rgba(10,30,24,.24);
}
.modal-card.large { width: min(1050px, 94vw); }
.sampling-project-detail-modal-card { width: min(900px, 94vw); max-height: 88vh; overflow: auto; }
.sampling-detail-modal-content { padding: 0 24px 24px; }
.sampling-project-detail-modal-card .sampling-project-detail-card { margin: 0; border: 0; box-shadow: none; }
.sampling-project-detail-card { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sampling-project-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sampling-project-detail-head h4 { margin: 0 0 4px; color: var(--green-dark); font-size: 18px; }
.sampling-project-detail-head strong { color: var(--ink); font-size: 15px; }
.sampling-detail-hours { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: #e8f7ef; color: var(--green-dark); }
.sampling-project-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.sampling-project-detail-grid > div { padding: 10px 12px; border: 1px solid #e3ece8; border-radius: 8px; background: #f8fcfa; }
.sampling-project-detail-grid .sampling-detail-wide { grid-column: 1 / -1; }
.sampling-project-detail-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.sampling-project-detail-grid dd { margin: 0; color: var(--ink); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sampling-project-detail-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sampling-project-detail-files > span { color: var(--muted); font-size: 12px; }
.sampling-project-detail-card .schedule-attachment-link { border: 1px solid #b9dfd1; border-radius: 7px; padding: 6px 9px; background: #f7fcf9; color: var(--green-dark); cursor: pointer; }
.sampling-project-detail-card .schedule-attachment-link:hover { border-color: var(--green); background: #ebf8f1; }
.sampling-detail-hours-form { display: flex; align-items: end; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sampling-detail-hours-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.sampling-detail-hours-form input { width: 150px; }
.sampling-detail-edit-panel { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sampling-detail-edit-title { color: var(--green-dark); font-weight: 700; }
.sampling-detail-edit-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.sampling-detail-edit-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.sampling-detail-edit-grid input, .sampling-detail-edit-grid textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.sampling-detail-edit-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sampling-project-detail-empty { padding: 26px; color: var(--muted); text-align: center; }

@media (max-width: 760px) {
  .sampling-project-detail-modal-card { width: calc(100vw - 20px); }
  .sampling-detail-modal-content { padding: 0 14px 14px; }
  .sampling-project-detail-grid { grid-template-columns: 1fr; }
  .sampling-project-detail-grid .sampling-detail-wide { grid-column: auto; }
  .sampling-detail-hours-form { flex-direction: column; align-items: stretch; }
  .sampling-detail-hours-form input { width: 100%; }
  .sampling-detail-edit-grid { grid-template-columns: 1fr; }
  .sampling-detail-edit-actions { flex-direction: column; }
}
.admin-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.account-list { padding: 20px; border-right: 1px solid var(--line); overflow-y: auto; max-height: 68vh; }
.account-item {
  width: 100%; display: block; text-align: left; border: 1px solid var(--line); background: white;
  border-radius: 10px; padding: 12px; margin-bottom: 9px;
}
.account-item:hover { border-color: #7bbca8; background: #f6fbf9; }
.account-item strong, .account-item span { display: block; }
.account-item span { color: var(--muted); font-size: 10px; margin-top: 4px; }
.account-item em { color: var(--red); font-style: normal; font-size: 10px; }
.admin-form { padding: 24px; }
.admin-form > label { margin-bottom: 13px; }
.backup-card { width: min(680px, calc(100vw - 32px)); }
.backup-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 24px; }
.backup-status-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }
.backup-status-grid span, .backup-path span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.backup-status-grid strong { font-size: 18px; }
.backup-path { margin: 0 24px; padding: 15px 17px; border-radius: 10px; background: #f3f6f5; }
.backup-path code { overflow-wrap: anywhere; }
.backup-settings { display: grid; grid-template-columns: 120px 1fr 150px auto; gap: 12px; align-items: end; margin: 18px 24px 0; }
.backup-settings label { margin: 0; }
.backup-settings button { min-height: 42px; }
.backup-card > .help { margin: 16px 24px 0; }
@media (max-width: 760px) { .backup-status-grid, .backup-settings { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; }
legend { color: var(--muted); font-size: 11px; padding: 0 7px; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 4px; }
.checkbox-line { display: flex; align-items: center; gap: 7px; }
.checkbox-line input { width: auto; }
.rule-form { padding: 24px 28px 28px; }
.rule-columns { display: grid; grid-template-columns: 1.35fr .8fr; gap: 28px; }
.discount-approval-settings { grid-column: 1 / -1; }
.discount-threshold-field { max-width: 240px; }
.approval-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.approval-route-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }
.approval-route-card h4 { margin: 0 0 5px; font-size: 14px; }
.approval-route-card p { min-height: 32px; margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.approval-route-card textarea { min-height: 138px; }
@media (max-width: 760px) { .approval-route-grid { grid-template-columns: 1fr; } }
.help { color: var(--muted); font-size: 11px; }
.cycle-rule { display: grid; grid-template-columns: 2fr 80px 120px 34px; gap: 8px; margin-bottom: 8px; }

.login-page {
  min-width: 0; min-height: 100vh; display: grid; place-items: center start;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 48px clamp(34px, 8vw, 150px);
  background:
    linear-gradient(90deg, rgba(249,252,250,.14) 0%, rgba(249,252,250,.04) 44%, rgba(236,248,243,.02) 100%),
    url("/assets/login-tech-background.png") center center / cover no-repeat fixed;
}
.login-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.68), transparent 34%),
    radial-gradient(circle at 76% 76%, rgba(24,151,103,.08), transparent 32%);
}
.login-card {
  grid-column: auto; width: min(460px, calc(100vw - 40px)); padding: 40px 42px 38px;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(248,253,250,.66));
  border: 1px solid rgba(255,255,255,.92); border-radius: 26px;
  backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%);
  box-shadow: 0 30px 90px rgba(17,71,54,.18), inset 0 1px 0 rgba(255,255,255,.9); z-index: 4;
}
.login-card::before {
  content: ""; position: absolute; left: 34px; right: 34px; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), #70c994 68%, #f2a558);
  border-radius: 0 0 6px 6px; opacity: .9;
}
.login-brand { color: var(--ink); padding: 0 0 16px; justify-content: center; position: relative; overflow: hidden; }
.login-brand::after {
  content: ""; position: absolute; top: 2px; bottom: 15px; left: -48%; width: 34%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,.96) 52%, rgba(255,246,214,.55) 68%, transparent 100%);
  transform: skewX(-18deg); mix-blend-mode: screen; filter: blur(1px);
  animation: logoShine 5.8s cubic-bezier(.2,.7,.25,1) .8s infinite;
}
.login-welcome { margin: 0 0 27px; text-align: center; color: var(--green-dark); font-weight: 600; font-size: 14px; letter-spacing: .03em; }
.login-brand span { color: var(--muted); }
.login-logo { width: 285px; max-width: 100%; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(24,117,74,.08)); }
.login-card .eyebrow { color: var(--green); }
.login-card h1 { margin-bottom: 9px; font-size: 32px; letter-spacing: -.03em; }
.login-card .subheading { color: #65766f; }
.login-card form { padding: 26px 0 0; display: grid; gap: 17px; }
.login-card form label { color: #40534c; font-weight: 600; }
.login-card form input {
  margin-top: 8px; min-height: 50px; background: rgba(255,255,255,.72);
  border: 1px solid rgba(120,165,149,.35); border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(22,74,56,.035);
}
.login-card form input:focus { outline: 2px solid rgba(12,139,104,.16); border-color: rgba(12,139,104,.52); }
.login-card form .primary {
  width: 100%; margin-top: 3px; min-height: 52px; font-size: 16px;
  background: linear-gradient(100deg, #087457, #10a177);
  box-shadow: 0 14px 28px rgba(8,116,87,.22);
}
.login-card form .primary:hover { background: linear-gradient(100deg, #075f49, #0c8b68); }
.login-error { min-height: 18px; color: var(--red); font-size: 12px; margin: 0; }
.login-tip { color: var(--muted); font-size: 11px; text-align: center; margin: 22px 0 0; }
.login-tip code { color: var(--green-dark); }

.login-data-stage {
  position: fixed; z-index: 3; right: 23vw; top: 13.5vh;
  width: min(15vw, 320px); height: min(24vh, 270px); padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  overflow: hidden; pointer-events: none;
  transform: perspective(1100px) rotateY(-13deg) rotateX(5deg) rotateZ(-.6deg);
  transform-origin: right center;
  animation: dataStageFloat 8s ease-in-out infinite;
}
.login-data-stage::before,
.login-data-stage .live-board-head,
.login-data-stage .live-widgets,
.login-data-stage .data-scan-line { display: none !important; }
.live-board-head { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 2; color: #0b795d; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.live-board-head small { color: rgba(49,100,83,.7); font-size: 10px; letter-spacing: .08em; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #13a87d; box-shadow: 0 0 0 5px rgba(19,168,125,.12); animation: liveDot 2s ease-out infinite; }
.dongguan-map-wrap { position: relative; height: 100%; min-height: 0; z-index: 1; }
.dongguan-map { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 16px 24px rgba(10,96,68,.08)); }
.map-shadow { fill: rgba(225,247,237,.82); stroke: rgba(255,255,255,.78); stroke-width: 14; }
.map-outline { fill: rgba(229,248,239,.20); stroke: url(#mapGlow); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1400; animation: mapDraw 3.2s ease-out both; }
.map-grid-fill { fill: url(#mapGrid); stroke: none; opacity: .72; }
.town-boundaries path { fill: none; stroke: rgba(28,113,84,.20); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.map-routes path { fill: none; stroke: rgba(12,139,104,.25); stroke-width: 1.2; stroke-dasharray: 7 8; animation: routeMove 8s linear infinite; }
.map-title { fill: #126d55; font-size: 25px; font-weight: 700; letter-spacing: .14em; }
.map-subtitle { fill: rgba(28,91,71,.62); font-size: 9px; letter-spacing: .18em; }
.marker-wave { fill: none; stroke: #0c9a70; stroke-width: 1.5; transform-origin: center; animation: markerPulse 2.5s ease-out infinite; }
.marker-wave.wave-two { animation-delay: 1.2s; }
.marker-core { fill: #ef9f43; stroke: rgba(255,255,255,.96); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(239,159,67,.72)); }
.marker-line { fill: none; stroke: #d88932; stroke-width: 1.2; stroke-dasharray: 44; animation: mapDraw 1.4s ease-out 1.2s both; }
.songshan-marker text { fill: #ad6525; font-size: 15px; font-weight: 700; }
.songshan-marker .marker-sub { fill: rgba(140,89,41,.68); font-size: 7px; letter-spacing: .13em; font-weight: 500; }
.live-widgets { position: absolute; z-index: 3; left: 25px; right: 25px; bottom: 22px; display: grid; grid-template-columns: 1.25fr .85fr; gap: 13px; }
.live-widget { min-height: 112px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.72); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(238,252,245,.22)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.live-widget > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.live-widget small { color: rgba(51,92,79,.72); font-size: 9px; }
.live-widget strong { color: #087457; font-size: 15px; }
.trend-widget svg { width: 100%; height: 62px; margin-top: 5px; overflow: visible; }
.trend-area { fill: rgba(12,139,104,.09); }
.trend-line { fill: none; stroke: #0c9871; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 320; animation: trendDraw 3.4s ease-out .5s both; }
.live-bars { height: 62px; margin-top: 8px; display: flex !important; align-items: end !important; justify-content: flex-start !important; gap: 7px; }
.live-bars i { display: block; width: 8px; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, #0c8b68, #5cc7a5); transform-origin: bottom; animation: barRise 1.2s ease-out var(--d) both, barBreathe 4s ease-in-out calc(var(--d) + 1.5s) infinite; }
.live-bars i.orange { background: linear-gradient(to top, #d98430, #f5bd72); }
.data-scan-line { position: absolute; z-index: 3; top: -20%; left: 0; right: 0; height: 90px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.30), rgba(83,205,164,.08), transparent); transform: skewY(-4deg); animation: dataScan 7s linear infinite; }

.dashboard-motion { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.motion-chart { position: absolute; overflow: visible; opacity: .48; filter: drop-shadow(0 8px 15px rgba(10,112,78,.08)); }
.motion-bars-chart { left: 52.5vw; top: 42vh; width: min(12vw, 225px); transform: perspective(900px) rotateY(-14deg) rotateX(4deg); }
.chart-axis { fill: none; stroke: rgba(31,126,94,.13); stroke-width: 1; }
.animated-columns rect { fill: url(#barMotionGlow); transform-box: fill-box; transform-origin: center bottom; animation: overlayBarRise 1.7s ease-out var(--delay) both, overlayBarGlow 4.8s ease-in-out calc(var(--delay) + 2s) infinite; }
.animated-columns .orange-column { fill: #efa34e; }
.motion-donut-chart { right: 16.5vw; top: 14.2vh; width: min(12vw, 210px); transform: perspective(900px) rotateY(-13deg) rotateX(4deg); }
.donut-track, .donut-value { fill: none; stroke-width: 18; transform: rotate(-90deg); transform-origin: 50% 50%; }
.donut-track { stroke: rgba(255,255,255,.24); }
.donut-value { stroke-linecap: round; stroke-dasharray: 390; animation: donutSweep 2.6s cubic-bezier(.22,.7,.25,1) both, donutDrift 12s linear 2.6s infinite; }
.donut-green { stroke: rgba(18,157,113,.72); stroke-dashoffset: 118; }
.donut-orange { stroke: rgba(239,159,67,.66); stroke-dashoffset: 318; animation-delay: .35s, 2.95s; }
.donut-center-glow { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.32); stroke-width: 2; animation: centerGlow 3s ease-in-out infinite; }
.motion-trend-chart { left: 45.2vw; top: 66vh; width: min(14vw, 270px); height: 115px; transform: perspective(900px) rotateY(-14deg) rotateX(4deg); }
.motion-trend-area { fill: rgba(12,139,104,.08); }
.motion-trend-line { fill: none; stroke: rgba(16,149,105,.76); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 430; animation: overlayTrendDraw 3s ease-out .4s both; }
.trend-points circle { fill: #f0a24b; stroke: rgba(255,255,255,.9); stroke-width: 2; animation: trendPointPulse 2.4s ease-in-out infinite; }
.trend-points circle:nth-child(2) { animation-delay: .35s; }.trend-points circle:nth-child(3) { animation-delay: .7s; }.trend-points circle:nth-child(4) { animation-delay: 1.05s; }
.motion-small-ring { right: 24vw; top: 55.5vh; width: min(6.5vw, 112px); transform: perspective(900px) rotateY(-13deg) rotateX(4deg); }
.small-ring-track, .small-ring-value { fill: none; stroke-width: 9; transform: rotate(-90deg); transform-origin: 50% 50%; }
.small-ring-track { stroke: rgba(255,255,255,.28); }
.small-ring-value { stroke: rgba(17,151,108,.72); stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 62; animation: smallRingSweep 2.2s ease-out .8s both, ringPulse 4s ease-in-out 3s infinite; }
.dashboard-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f0a34d; box-shadow: 0 0 10px rgba(240,163,77,.75); animation: sparkFloat 5s ease-in-out infinite; }
.spark-one { left: 66vw; top: 58vh; }.spark-two { left: 79vw; top: 48vh; animation-delay: 1.4s; }.spark-three { left: 72vw; top: 76vh; animation-delay: 2.7s; }

@keyframes logoShine { 0%, 68% { left: -48%; opacity: 0; } 72% { opacity: 1; } 88% { left: 118%; opacity: .9; } 100% { left: 118%; opacity: 0; } }
@keyframes dataStageFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(19,168,125,.28); } 100% { box-shadow: 0 0 0 10px rgba(19,168,125,0); } }
@keyframes mapDraw { from { stroke-dashoffset: 1400; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes routeMove { to { stroke-dashoffset: -120; } }
@keyframes markerPulse { 0% { scale: .35; opacity: .9; } 100% { scale: 1.35; opacity: 0; } }
@keyframes trendDraw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes barRise { from { scale: 1 0; opacity: .2; } to { scale: 1 1; opacity: 1; } }
@keyframes barBreathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@keyframes dataScan { 0% { top: -24%; opacity: 0; } 12% { opacity: 1; } 78% { opacity: .65; } 100% { top: 112%; opacity: 0; } }
@keyframes overlayBarRise { from { scale: 1 0; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes overlayBarGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
@keyframes donutSweep { from { stroke-dashoffset: 390; opacity: .15; } }
@keyframes donutDrift { to { rotate: 270deg; } }
@keyframes centerGlow { 0%,100% { opacity: .35; scale: .94; } 50% { opacity: .8; scale: 1.05; } }
@keyframes overlayTrendDraw { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
@keyframes trendPointPulse { 0%,100% { opacity: .45; scale: .75; } 50% { opacity: 1; scale: 1.3; } }
@keyframes smallRingSweep { from { stroke-dashoffset: 214; } }
@keyframes ringPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes sparkFloat { 0%,100% { translate: 0 0; opacity: .25; } 50% { translate: 8px -15px; opacity: .9; } }

@media (max-width: 820px) {
  .login-page { place-items: center; padding: 24px 20px; background-position: 62% center; }
  .login-card { padding: 32px 28px; }
  .login-logo { height: 82px; }
  .login-data-stage, .dashboard-motion { display: none; }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .login-data-stage { right: 22vw; width: 17vw; opacity: .82; }
  .dashboard-motion { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .login-brand::after, .login-data-stage, .live-dot, .map-outline, .map-routes path,
  .marker-wave, .marker-line, .trend-line, .live-bars i, .data-scan-line,
  .dashboard-motion * { animation: none !important; }
}

/* 登录页：清新 B 端科技场景，地图和图表统一放入倾斜的数据舞台 */
.login-page {
  place-items: center start;
  padding: 48px clamp(42px, 7.5vw, 150px);
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.98) 0 16%, transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(106,211,170,.18), transparent 29%),
    radial-gradient(circle at 72% 82%, rgba(245,174,86,.13), transparent 27%),
    linear-gradient(135deg, #fbfefc 0%, #f0faf5 44%, #e8f5ef 72%, #fdf8ef 100%);
}
.login-page::before {
  background:
    linear-gradient(rgba(12,139,104,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,139,104,.032) 1px, transparent 1px),
    radial-gradient(circle at 71% 42%, rgba(255,255,255,.94), transparent 31%);
  background-size: 54px 54px, 54px 54px, auto;
  mask-image: linear-gradient(90deg, transparent 10%, rgba(0,0,0,.45) 44%, #000 100%);
}
.login-page::after {
  content: ""; position: fixed; z-index: 0; left: 31vw; right: -12vw; bottom: -7vh; height: 31vh;
  pointer-events: none; transform: perspective(900px) rotateX(62deg) rotateZ(-8deg); transform-origin: right bottom;
  background:
    linear-gradient(176deg, transparent 0 27%, rgba(12,139,104,.20) 28% 30%, rgba(255,255,255,.38) 31% 35%, rgba(57,189,146,.15) 36% 46%, transparent 47%),
    linear-gradient(176deg, transparent 0 54%, rgba(244,166,42,.34) 55% 57%, rgba(255,255,255,.5) 58% 61%, rgba(244,166,42,.10) 62% 68%, transparent 69%);
  filter: blur(.2px) drop-shadow(0 -12px 30px rgba(12,139,104,.10));
  animation: ribbonDrift 12s ease-in-out infinite;
}
.login-card {
  width: min(448px, calc(100vw - 40px)); padding: 38px 40px 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(246,253,249,.68));
  border-color: rgba(255,255,255,.96); border-radius: 28px;
  box-shadow: 0 34px 90px rgba(26,91,69,.16), 0 8px 26px rgba(23,86,63,.08), inset 0 1px 0 #fff;
  animation: loginCardEnter .9s cubic-bezier(.2,.75,.24,1) both;
}
.login-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 32% 70%, rgba(99,208,167,.06));
}
.login-brand { isolation: isolate; }
.login-brand::after {
  top: 0; bottom: 12px; width: 28%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.12) 25%, #fff 48%, rgba(255,238,188,.78) 61%, transparent 100%);
  animation: logoShine 4.9s cubic-bezier(.18,.72,.22,1) .45s infinite;
}
.login-logo { filter: drop-shadow(0 8px 20px rgba(39,135,75,.11)); animation: logoAwake 1.15s ease-out both; }
.login-welcome { position: relative; z-index: 1; }
.login-card form, .login-card > .eyebrow, .login-card > h1, .login-card > .subheading { position: relative; z-index: 1; }
.login-card form input { background: rgba(251,255,253,.76); box-shadow: inset 0 1px 2px rgba(22,74,56,.03), 0 8px 22px rgba(32,94,72,.035); }

.login-data-stage {
  position: fixed; z-index: 2; left: auto; right: clamp(38px, 5vw, 96px); top: 13vh;
  width: min(53vw, 1040px); height: 67vh; padding: 25px 28px 24px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(224,247,237,.18) 55%, rgba(255,246,230,.16));
  box-shadow: 0 38px 90px rgba(31,103,79,.13), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(83,164,135,.12);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  transform: perspective(1500px) rotateY(-9deg) rotateX(4.5deg) rotateZ(-.35deg);
  transform-origin: right center; animation: dataStageEnter 1.2s cubic-bezier(.2,.72,.22,1) both, dataStageFloat 9s ease-in-out 1.2s infinite;
}
.login-data-stage::before {
  display: block !important; content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.26), transparent 26% 67%, rgba(255,255,255,.16));
}
.login-data-stage .live-board-head { display: flex !important; }
.login-data-stage .live-widgets { display: grid !important; }
.login-data-stage .data-scan-line { display: block !important; }
.live-board-head { height: 34px; padding: 0 4px; }
.dongguan-map-wrap { height: calc(100% - 164px); min-height: 320px; }
.dongguan-map { transform: scale(.94); transform-origin: center; }
.map-shadow { fill: rgba(226,248,238,.48); stroke: rgba(255,255,255,.55); stroke-width: 10; }
.map-outline { fill: rgba(223,247,236,.22); stroke-width: 2.7; }
.map-grid-fill { opacity: .58; }
.map-title { font-size: 22px; }
.songshan-marker { filter: drop-shadow(0 6px 12px rgba(222,139,47,.20)); }
.live-widgets { left: 28px; right: 28px; bottom: 22px; grid-template-columns: 1.35fr .8fr; gap: 14px; }
.live-widget { min-height: 108px; background: linear-gradient(145deg, rgba(255,255,255,.60), rgba(239,252,246,.28)); backdrop-filter: blur(12px); }

.dashboard-motion { left: auto; right: clamp(38px, 5vw, 96px); top: 13vh; bottom: auto; width: min(53vw, 1040px); height: 67vh; z-index: 3; }
.motion-bars-chart { left: 7%; top: auto; bottom: 16%; width: min(12vw, 210px); opacity: .32; }
.motion-donut-chart { right: 4%; top: 7%; width: min(10vw, 180px); opacity: .44; }
.motion-trend-chart { left: 34%; top: auto; bottom: 2%; width: min(14vw, 250px); opacity: .34; }
.motion-small-ring { right: 20%; top: auto; bottom: 18%; width: min(5.5vw, 96px); opacity: .40; }
.dashboard-spark { opacity: .72; }
.spark-one { left: 35%; top: 28%; }.spark-two { left: 76%; top: 45%; }.spark-three { left: 58%; top: 78%; }

@keyframes loginCardEnter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes logoAwake { 0% { opacity: 0; transform: translateY(5px) scale(.97); filter: brightness(1) drop-shadow(0 0 0 transparent); } 65% { opacity: 1; filter: brightness(1.16) drop-shadow(0 0 18px rgba(112,202,96,.24)); } 100% { transform: none; } }
@keyframes dataStageEnter { from { opacity: 0; transform: perspective(1500px) rotateY(-14deg) rotateX(7deg) translateX(45px) scale(.97); } to { opacity: 1; } }
@keyframes ribbonDrift { 0%,100% { translate: 0 0; opacity: .82; } 50% { translate: 12px -5px; opacity: 1; } }

@media (min-width: 821px) and (max-width: 1280px) {
  .login-page { padding-left: 4vw; }
  .login-card { width: 390px; padding: 30px 32px; }
  .login-data-stage, .dashboard-motion { right: 3vw; width: 56vw; }
  .login-data-stage { opacity: .88; }
}

@media (max-width: 820px) {
  .login-page { place-items: center; padding: 24px 20px; }
  .login-page::after { left: -30vw; right: -35vw; opacity: .55; }
}

.statistics-panel { display: grid; gap: 18px; }
.performance-panel { display: grid; gap: 18px; }
.system-status-panel { display: grid; gap: 18px; }
.performance-panel .statistics-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.system-status-panel .statistics-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.performance-panel .statistics-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.system-status-panel .statistics-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.performance-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.system-status-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.collection-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; }
.performance-card.danger-card { border-color: #f3b5b5; background: #fff8f8; }
.performance-card.danger-card strong { color: var(--red); }
.collection-table { min-width: 1180px; }
.collection-status { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.collection-status.overdue { color: #b83434; background: #fdecec; }
.collection-status.today { color: #8a5a00; background: #fff1c7; }
.collection-status.soon { color: #3569b2; background: #e8f1ff; }
.collection-status.normal { color: var(--green-dark); background: var(--mint); }
.finance-rule-note { padding: 12px 16px; border: 1px solid #cbe8dc; border-radius: 12px; background: #f1faf6; color: #315f52; font-size: 12px; }
.finance-table { min-width: 1320px; }
.finance-table th, .finance-table td { white-space: nowrap; }
.finance-table td:first-child { white-space: normal; min-width: 190px; }
.cell-note { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.finance-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.finance-profile-fields legend, .finance-profile-fields .help { grid-column: 1 / -1; }
.finance-profile-fields label { margin: 0; }
.finance-profile-fields.target-highlight {
  border-color: #0c8b68; box-shadow: 0 0 0 3px rgba(12,139,104,.14);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.monthly-target-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbf9; }
.monthly-target-grid > strong { grid-column: 1 / -1; font-size: 12px; }
.monthly-target-grid label { font-size: 10px; }
.monthly-target-grid label span { display: grid; grid-template-columns: minmax(88px, 1fr) 64px; gap: 6px; margin-top: 4px; }
.monthly-target-grid label input { min-width: 0; }
.finance-rules-card { max-width: 1100px; }
.finance-rule-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-height: 76vh; overflow-y: auto; padding-top: 20px; }
.finance-rule-form section { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; }
.finance-rule-form section h3 { margin-bottom: 12px; }
.finance-rule-form #companyTargetSettings { grid-column: 1 / -1; }
.finance-rule-form > .drawer-actions { grid-column: 1 / -1; }
.compact-field { max-width: 220px; }
.rule-table { display: grid; gap: 6px; margin-top: 12px; }
.rule-table > div { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; }
.rule-table > div:first-child { padding: 7px 10px; background: #edf6f2; border-radius: 8px; }
.rule-table input { padding: 8px 10px; }
.company-target-head { display: grid; grid-template-columns: 180px 1fr; gap: 12px; }
.company-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.company-month-grid label { margin: 0; }
.company-target-card { max-width: 900px; }
.company-target-form { padding-top: 20px; }
.export-fields-card { max-width: 920px; }
.export-fields-content { padding: 20px 28px 28px; }
.export-fields-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.export-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.export-field-grid label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbf9; }
.export-field-grid input { width: auto; }
.performance-card {
  border: 1px solid var(--line); background: white; border-radius: 14px; padding: 17px 19px;
}
.performance-card span { display: block; color: var(--muted); font-size: 11px; }
.performance-card strong { display: block; font-size: 24px; margin: 7px 0 2px; color: var(--green-dark); }
.performance-card small { color: var(--muted); font-size: 11px; }
.system-status-banner {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: #f8fbf9; color: #315f52; font-weight: 700;
}
.system-status-banner.ok { border-color: #b9dacf; background: #eef9f4; color: var(--green-dark); }
.system-status-banner.bad { border-color: #f3b5b5; background: #fff6f6; color: #b83434; }
.system-status-table { min-width: 980px; }
.system-status-table code { color: #315f52; white-space: normal; word-break: break-all; }
.system-status-pill {
  display: inline-flex; align-items: center; min-width: 52px; justify-content: center;
  padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.system-status-pill.ok { color: var(--green-dark); background: var(--mint); }
.system-status-pill.bad { color: #b83434; background: #fdecec; }
.receipt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.statistics-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  background: white; border: 1px solid var(--line); border-radius: 15px; padding: 22px 25px;
}
.statistics-head h2 { margin-bottom: 6px; }
.statistics-head p { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.statistics-actions { display: flex; gap: 10px; }
.statistics-actions select { width: 120px; }
.statistics-actions select:nth-child(2) { width: 110px; }
.statistics-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.timeliness-summary { grid-column: 1 / -1; cursor: pointer; }
.timeliness-summary tbody tr:hover { background: #f3fbf8; }
.stat-card {
  border: 1px solid var(--line); background: white; border-radius: 14px;
  padding: 17px 19px; cursor: pointer; text-align: left;
}
.stat-card:hover { border-color: #89c3b1; transform: translateY(-1px); }
.stat-card span { display: block; color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; font-size: 27px; margin: 7px 0 2px; }
.stat-card small { color: var(--muted); }
.stat-card.sampling strong { color: #3978d4; }
.stat-card.analysis strong { color: #d97624; }
.stat-card.drafting strong { color: #8259c8; }
.stat-card.review strong { color: #d94b4b; }
.statistics-detail {
  background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px 24px;
}
.detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.detail-head h3 { margin-bottom: 4px; }
.detail-head p { color: var(--muted); font-size: 11px; margin: 0; }
.overdue-number { color: var(--red); font-weight: 700; }
.normal-status { color: var(--green); font-weight: 700; }
.upstream-status { color: #b7791f; font-weight: 700; }
.statistics-pagination { padding: 15px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }

/* 登录页恢复上一版背景；动态元素覆盖在背景仪表盘的原位置 */
.login-page {
  min-width: 0; min-height: 100vh; display: grid; place-items: center start;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 48px clamp(34px, 8vw, 150px);
  background:
    linear-gradient(90deg, rgba(249,252,250,.14) 0%, rgba(249,252,250,.04) 44%, rgba(236,248,243,.02) 100%),
    url("/assets/login-tech-background.png") center center / cover no-repeat fixed;
}
.login-page::before {
  display: block; mask-image: none; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.68), transparent 34%),
    radial-gradient(circle at 76% 76%, rgba(24,151,103,.08), transparent 32%);
}
.login-page::after { display: none; }
.login-card {
  grid-column: auto; width: min(460px, calc(100vw - 40px)); padding: 40px 42px 38px;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(248,253,250,.66));
  border: 1px solid rgba(255,255,255,.92); border-radius: 26px;
  backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%);
  box-shadow: 0 30px 90px rgba(17,71,54,.18), inset 0 1px 0 rgba(255,255,255,.9); z-index: 4;
  animation: none;
}
.login-card::after { display: none; }
.login-logo { animation: none; filter: drop-shadow(0 8px 18px rgba(24,117,74,.08)); }
.login-brand::after {
  top: 2px; bottom: 15px; left: -48%; width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,.96) 52%, rgba(255,246,214,.55) 68%, transparent 100%);
  animation: logoShine 5.8s cubic-bezier(.2,.7,.25,1) .55s infinite;
}
.login-data-stage {
  position: fixed; z-index: 3; left: auto; right: 23vw; top: 13.5vh;
  width: min(15vw, 320px); height: min(24vh, 270px); padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  overflow: hidden; pointer-events: none;
  transform: perspective(1100px) rotateY(-13deg) rotateX(5deg) rotateZ(-.6deg);
  transform-origin: right center; opacity: .86;
  animation: dataStageFloat 8s ease-in-out infinite;
}
.login-data-stage::before,
.login-data-stage .live-board-head,
.login-data-stage .live-widgets,
.login-data-stage .data-scan-line { display: none !important; }
.dongguan-map-wrap { position: relative; height: 100%; min-height: 0; }
.dongguan-map { width: 100%; height: 100%; transform: none; filter: drop-shadow(0 12px 18px rgba(10,96,68,.10)); }
.map-shadow { fill: rgba(225,247,237,.72); stroke: rgba(255,255,255,.76); stroke-width: 12; }
.map-outline { fill: rgba(229,248,239,.16); stroke-width: 2.4; }
.map-grid-fill { opacity: .66; }
.map-title { font-size: 25px; }

.dashboard-motion { position: fixed; inset: 0; width: auto; height: auto; z-index: 2; pointer-events: none; overflow: hidden; }
.motion-bars-chart { left: 52.5vw; top: 42vh; bottom: auto; width: min(12vw, 225px); opacity: .48; transform: perspective(900px) rotateY(-14deg) rotateX(4deg); }
.motion-donut-chart { left: auto; right: 16.5vw; top: 14.2vh; bottom: auto; width: min(12vw, 210px); opacity: .48; transform: perspective(900px) rotateY(-13deg) rotateX(4deg); }
.motion-trend-chart { left: 45.2vw; top: 66vh; bottom: auto; width: min(14vw, 270px); height: 115px; opacity: .48; transform: perspective(900px) rotateY(-14deg) rotateX(4deg); }
.motion-small-ring { left: auto; right: 24vw; top: 55.5vh; bottom: auto; width: min(6.5vw, 112px); opacity: .48; transform: perspective(900px) rotateY(-13deg) rotateX(4deg); }
.spark-one { left: 66vw; top: 58vh; }.spark-two { left: 79vw; top: 48vh; }.spark-three { left: 72vw; top: 76vh; }
.ribbon-particles { position: absolute; inset: 0; overflow: hidden; }
.ribbon-particles i {
  position: absolute; left: 48vw; bottom: 3vh; width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #61d6ac 42%, rgba(12,139,104,0) 72%);
  box-shadow: 0 0 11px rgba(39,196,143,.82), 0 0 20px rgba(255,255,255,.55);
  opacity: 0; animation: ribbonParticle 6.4s linear var(--delay) infinite;
}
.ribbon-particles i:nth-child(3n+2) {
  background: radial-gradient(circle, #fff 0 18%, #f2b15f 43%, rgba(244,166,42,0) 73%);
  box-shadow: 0 0 11px rgba(244,166,42,.78), 0 0 20px rgba(255,255,255,.5);
}
@keyframes ribbonParticle {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.5); }
  12% { opacity: .9; }
  72% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(48vw,-38vh,0) scale(1.35); }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .login-page { padding: 48px 4vw; }
  .login-card { width: 390px; padding: 32px 34px; }
  .login-data-stage { right: 22vw; width: 17vw; opacity: .82; }
  .dashboard-motion { opacity: .78; }
}
@media (max-width: 820px) {
  .login-page { place-items: center; padding: 24px 20px; background-position: 62% center; }
  .login-card { padding: 32px 28px; }
  .login-logo { height: 82px; }
  .login-data-stage, .dashboard-motion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-particles i { animation: none !important; }
}
.statistics-filter-row th { padding: 9px 7px; }
.statistics-filter-row th:nth-child(1) { width: 38%; }
.statistics-filter-row th:nth-child(2) { width: 10%; }
.statistics-filter-row th:nth-child(3) { width: 12%; }
.statistics-filter-row th:nth-child(4) { width: 18%; }
.statistics-filter-row th:nth-child(5) { width: 10%; }
.statistics-filter-row th:nth-child(6) { width: 12%; }
.date-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.date-filter input { font-size: 10px; padding: 8px 5px; }

@media (max-width: 1200px) {
  main { padding-left: 28px; padding-right: 28px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .finance-cards { grid-template-columns: repeat(3, 1fr); }
}

/* 登录页最终版：保留 logo、欢迎语、粒子和 logo 闪光；移除东莞地图轮廓、绿色橙色光带 */
.login-page.login-page-cosmic {
  min-width: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.92) 0 16%, transparent 42%),
    radial-gradient(circle at 72% 35%, rgba(94,206,165,.18), transparent 34%),
    linear-gradient(135deg, #f9fffc 0%, #edf9f4 45%, #e6f5f0 100%);
}
.login-page.login-page-cosmic::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,131,92,.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15,131,92,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 66% 46%, #000 0 38%, transparent 72%);
  opacity: .75;
  animation: loginGridDrift 18s linear infinite;
}
.login-page.login-page-cosmic::after {
  content: "";
  position: fixed;
  inset: -18% -10% -22% 42%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 45%, rgba(255,255,255,.72), transparent 70%),
    linear-gradient(120deg, rgba(255,255,255,.58), rgba(95,210,168,.16), rgba(255,255,255,.2));
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 70px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 34px 120px rgba(21,102,79,.12);
  transform: perspective(1200px) rotateY(-22deg) rotateX(8deg) rotateZ(-5deg);
  filter: blur(.1px);
}
.login-page.login-page-cosmic .login-data-stage,
.login-page.login-page-cosmic .dongguan-map-wrap,
.login-page.login-page-cosmic .dongguan-map,
.login-page.login-page-cosmic .dashboard-motion,
.login-page.login-page-cosmic .ribbon-particles {
  display: none !important;
}
.login-page.login-page-cosmic .login-shell {
  width: min(1380px, 100%);
  min-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(340px, 450px) minmax(520px, 1fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: center;
}
.login-page.login-page-cosmic .login-card {
  width: min(450px, 100%);
  padding: 42px 44px 40px;
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.88), rgba(247,253,250,.68));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 90px rgba(19,88,68,.16), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
}
.login-page.login-page-cosmic .login-card::after {
  display: none;
}
.login-page.login-page-cosmic .login-brand {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.login-page.login-page-cosmic .login-brand::after {
  content: "";
  position: absolute;
  inset: 4px auto 12px -54%;
  width: 38%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.98) 52%, rgba(218,255,236,.58) 68%, transparent 100%);
  transform: skewX(-18deg);
  animation: loginLogoShine 5.2s cubic-bezier(.2,.7,.24,1) .45s infinite;
  pointer-events: none;
}
.login-page.login-page-cosmic .login-logo {
  height: 116px;
  width: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 18px rgba(38,133,73,.1));
}
.login-page.login-page-cosmic .login-welcome {
  margin-top: 4px;
  color: #087b54;
  font-weight: 700;
  text-align: center;
}
.login-page.login-page-cosmic .login-card input {
  background: rgba(235,246,255,.72);
  border-color: rgba(33,128,96,.16);
}
.login-page.login-page-cosmic .login-card button.primary {
  background: linear-gradient(135deg, #058b63, #09a373);
  box-shadow: 0 16px 34px rgba(7,143,99,.24);
}
.login-page.login-page-cosmic .login-visual-stage {
  position: relative;
  min-height: 600px;
  border-radius: 48px;
  overflow: hidden;
  transform: perspective(1100px) rotateY(-13deg) rotateX(5deg);
  transform-origin: left center;
  background:
    radial-gradient(circle at 26% 32%, rgba(255,255,255,.92), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.44), rgba(217,247,236,.18));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 36px 110px rgba(21,102,79,.12);
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
  animation: loginFloatPanel 8s ease-in-out infinite;
}
.login-page.login-page-cosmic .orbit-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,122,86,.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10,122,86,.08) 1px, transparent 1px),
    radial-gradient(circle at 37% 48%, rgba(40,183,132,.22), transparent 32%);
  background-size: 68px 68px, 68px 68px, 100% 100%;
  opacity: .58;
}
.login-page.login-page-cosmic .robot-orbit {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
}
.login-page.login-page-cosmic .robot-core {
  width: 142px;
  height: 118px;
  border-radius: 42px;
  background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(219,250,239,.78));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 55px rgba(21,108,78,.18), inset 0 1px 0 rgba(255,255,255,.95);
  display: grid;
  place-items: center;
  animation: loginRobotBob 4.8s ease-in-out infinite;
}
.login-page.login-page-cosmic .robot-face {
  width: 86px;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0b6f54, #093b36);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.login-page.login-page-cosmic .robot-face span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #9cffd4;
  box-shadow: 0 0 16px rgba(156,255,212,.85);
  animation: loginEyeBlink 4.2s ease-in-out infinite;
}
.login-page.login-page-cosmic .orbit-ring {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(12,142,100,.26);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(54,211,151,.13);
  animation: loginSpinRing 14s linear infinite;
}
.login-page.login-page-cosmic .ring-two {
  inset: 0;
  transform: rotateX(66deg);
  animation-duration: 18s;
}
.login-page.login-page-cosmic .ring-three {
  inset: 46px;
  border-color: rgba(242,177,95,.28);
  animation-direction: reverse;
  animation-duration: 11s;
}
.login-page.login-page-cosmic .scene-card {
  position: absolute;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 18px 48px rgba(20,94,72,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.login-page.login-page-cosmic .scene-card span {
  display: block;
  margin-bottom: 12px;
  color: rgba(7,108,76,.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}
.login-page.login-page-cosmic .bar-card {
  left: 10%;
  bottom: 17%;
  width: 250px;
}
.login-page.login-page-cosmic .trend-card {
  right: 12%;
  bottom: 18%;
  width: 310px;
}
.login-page.login-page-cosmic .donut-card {
  right: 15%;
  top: 16%;
  width: 158px;
  height: 158px;
  padding: 16px;
}
.login-page.login-page-cosmic .animated-bar-list {
  height: 118px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.login-page.login-page-cosmic .animated-bar-list i {
  flex: 1;
  height: var(--h);
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, rgba(92,221,169,.9), rgba(8,139,98,.62));
  box-shadow: 0 10px 22px rgba(20,150,104,.16);
  animation: loginBarGrow 2.8s ease-in-out var(--delay) infinite alternate;
}
.login-page.login-page-cosmic .trend-card svg {
  width: 100%;
  height: 112px;
}
.login-page.login-page-cosmic .trend-fill {
  fill: rgba(72,203,151,.14);
}
.login-page.login-page-cosmic .trend-stroke {
  fill: none;
  stroke: #0b9b70;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 370;
  animation: loginTrendFlow 3.8s ease-in-out infinite;
}
.login-page.login-page-cosmic .donut-track {
  fill: none;
  stroke: rgba(9,130,92,.12);
  stroke-width: 18;
}
.login-page.login-page-cosmic .donut-main,
.login-page.login-page-cosmic .donut-accent {
  fill: none;
  stroke-width: 18;
  stroke-linecap: round;
  transform-origin: center;
}
.login-page.login-page-cosmic .donut-main {
  stroke: #0aa274;
  stroke-dasharray: 230 330;
  animation: loginDonutSpin 7s linear infinite;
}
.login-page.login-page-cosmic .donut-accent {
  stroke: rgba(92,221,169,.58);
  stroke-dasharray: 72 330;
  animation: loginDonutSpin 5.2s linear reverse infinite;
}
.login-page.login-page-cosmic .login-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.login-page.login-page-cosmic .login-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #65d9ad 45%, rgba(101,217,173,0) 78%);
  box-shadow: 0 0 16px rgba(67,204,150,.7);
  opacity: 0;
  animation: loginParticleFloat 6.5s ease-in-out var(--delay) infinite;
}
@keyframes loginLogoShine {
  0%, 18% { left: -54%; opacity: 0; }
  30% { opacity: .95; }
  46% { left: 118%; opacity: 0; }
  100% { left: 118%; opacity: 0; }
}
@keyframes loginGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 112px 56px, 56px 112px; }
}
@keyframes loginFloatPanel {
  0%, 100% { transform: perspective(1100px) rotateY(-13deg) rotateX(5deg) translateY(0); }
  50% { transform: perspective(1100px) rotateY(-12deg) rotateX(6deg) translateY(-12px); }
}
@keyframes loginRobotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes loginEyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.15); }
}
@keyframes loginSpinRing {
  from { transform: rotate(0deg) rotateX(64deg); }
  to { transform: rotate(360deg) rotateX(64deg); }
}
@keyframes loginBarGrow {
  from { height: calc(var(--h) * .64); opacity: .72; }
  to { height: var(--h); opacity: 1; }
}
@keyframes loginTrendFlow {
  0% { stroke-dashoffset: 370; opacity: .6; }
  45%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes loginDonutSpin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
@keyframes loginParticleFloat {
  0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(.6); }
  22% { opacity: .9; }
  72% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(34px, -54px, 0) scale(1.3); }
}
@media (max-width: 1500px) {
  .instrument-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument-filters #instrumentSearch { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .instrument-filters, .instrument-form { grid-template-columns: 1fr; }
  .instrument-filters #instrumentSearch { grid-column: auto; }
  .instrument-wide { grid-column: auto; }
  .sample-form .sample-project-field { grid-column: auto; }
  .sample-analysis-row { grid-template-columns: 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
  .login-page.login-page-cosmic .login-shell {
    grid-template-columns: 1fr;
    place-items: center;
  }
  .login-page.login-page-cosmic .login-visual-stage {
    display: none;
  }
}

/* ========================================================================== 
   HB-LIMS login — 独立命名空间，避免历史页面样式互相覆盖
   ========================================================================== */
.hb-login-page {
  --hb-green: #14986f;
  --hb-green-dark: #087552;
  --hb-lime: #78bd27;
  --hb-cyan: #54d9f1;
  --hb-blue: #3979df;
  --hb-orange: #efa850;
  --hb-ink: #10233d;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  color: var(--hb-ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.98), transparent 33%),
    radial-gradient(circle at 76% 28%, rgba(91,218,237,.22), transparent 35%),
    linear-gradient(135deg, #f7fbf6 0%, #e7f4ee 42%, #e7effa 72%, #efe9fb 100%);
}
.hb-login-page *, .hb-login-page *::before, .hb-login-page *::after { box-sizing: border-box; }
.hb-login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(620px, 1.45fr) minmax(400px, .8fr);
  width: min(1540px, calc(100vw - 64px));
  min-height: min(800px, calc(100vh - 64px));
  margin: 32px auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 36px;
  background:
    radial-gradient(circle at 37% 48%, rgba(86,225,239,.34), transparent 25%),
    radial-gradient(circle at 21% 78%, rgba(20,152,111,.16), transparent 34%),
    radial-gradient(circle at 78% 34%, rgba(94,110,230,.13), transparent 39%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(211,241,239,.62) 46%, rgba(224,231,251,.72));
  box-shadow: 0 32px 90px rgba(34,74,94,.18), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px);
}
.hb-visual-panel {
  position: relative;
  min-height: 730px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.hb-visual-panel::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background: conic-gradient(from 210deg at 58% 50%, transparent 0 20%, rgba(84,217,241,.16) 25%, transparent 31% 52%, rgba(239,168,80,.12) 57%, transparent 64%);
  animation: hbAuraRotate 24s linear infinite;
}
.hb-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 150%;
  background: linear-gradient(110deg, rgba(255,255,255,.42), transparent 44% 76%, rgba(94,110,230,.07));
}
.hb-circuit-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(55,121,169,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,121,169,.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(57,121,223,.38) 1.5px, transparent 2px);
  background-size: 56px 56px, 56px 56px, 112px 112px;
  transform: perspective(700px) rotateX(58deg) scale(1.4) translateY(18%);
  transform-origin: 50% 75%;
  animation: hbGridFlow 18s linear infinite;
}
.hb-scene-heading { position: absolute; top: 52px; left: 58px; z-index: 4; }
.hb-scene-heading span { color: var(--hb-green-dark); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.hb-scene-heading h2 { margin: 12px 0 8px; font-size: clamp(28px, 2.5vw, 44px); line-height: 1.2; letter-spacing: -.04em; }
.hb-scene-heading p { margin: 0; color: #60809a; font-size: 11px; letter-spacing: .13em; }
.hb-robot-stage { position: absolute; left: 50%; top: 52%; width: 500px; height: 500px; transform: translate(-50%, -48%); }
.hb-platform {
  position: absolute;
  left: 50%; top: 68%; width: 360px; height: 118px;
  transform: translate(-50%, -50%) perspective(500px) rotateX(62deg);
  border: 2px solid rgba(78,192,227,.52); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.95) 0 25%, rgba(65,200,230,.26) 28% 47%, rgba(46,120,218,.16) 49% 61%, transparent 64%);
  box-shadow: 0 0 42px rgba(72,200,237,.34), inset 0 0 25px rgba(255,255,255,.88);
  animation: hbPlatformPulse 3.8s ease-in-out infinite;
}
.hb-platform span { position: absolute; inset: 12%; border: 1px solid rgba(50,130,223,.35); border-radius: 50%; }
.hb-platform span:nth-child(2) { inset: 25%; border-color: rgba(19,156,111,.5); }
.hb-platform span:nth-child(3) { inset: 38%; border-color: rgba(239,168,80,.58); }
.hb-robot { position: absolute; left: 50%; top: 47%; width: 210px; height: 260px; transform: translate(-50%, -50%); animation: hbRobotFloat 4.5s ease-in-out infinite; }
.hb-head {
  position: absolute; left: 50%; top: 50px; width: 188px; height: 132px; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.94); border-radius: 48% 48% 42% 42%;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(187,229,242,.9) 55%, rgba(119,175,226,.72));
  box-shadow: inset 12px 12px 24px rgba(255,255,255,.85), inset -12px -12px 24px rgba(57,121,223,.14), 0 28px 46px rgba(46,108,145,.22);
}
.hb-head::after { content: ""; position: absolute; inset: 6px 18px auto; height: 28px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.8), transparent); }
.hb-face {
  position: absolute; inset: 29px 24px 24px; overflow: hidden; border-radius: 34px;
  background: radial-gradient(circle at 50% 85%, rgba(25,174,194,.22), transparent 43%), linear-gradient(145deg, #163d66, #102a55 68%, #1b5d83);
  border: 2px solid rgba(98,224,240,.5); box-shadow: inset 0 0 24px rgba(54,211,239,.24), 0 0 14px rgba(74,207,241,.38);
}
.hb-eye {
  position: absolute; top: 27px; width: 25px; height: 31px; border-radius: 50%;
  opacity: 1; transform-origin: center; background: #84f6ff;
  box-shadow: 0 0 10px #5beaff, 0 0 24px #5beaff, inset 0 0 6px #fff;
  animation: hbBlink var(--hb-blink-duration, 9s) linear infinite;
}
.hb-eye::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(104,239,255,.32); animation: hbEyeBreath 2.7s ease-in-out infinite; }
.hb-eye-left { left: 34px; } .hb-eye-right { right: 34px; animation-delay: .035s; }
.hb-mouth { position: absolute; left: 50%; bottom: 18px; width: 30px; height: 10px; transform: translateX(-50%); border-bottom: 3px solid #70edff; border-radius: 50%; filter: drop-shadow(0 0 5px #54d9f1); }
.hb-antenna { position: absolute; left: 50%; top: 9px; width: 4px; height: 44px; transform: translateX(-50%); border-radius: 5px; background: linear-gradient(#fff, #75cae8); }
.hb-antenna i { position: absolute; left: 50%; top: -7px; width: 15px; height: 15px; transform: translateX(-50%); border-radius: 50%; background: #65e1eb; box-shadow: 0 0 18px #39cfe6; animation: hbBeacon 2s ease-in-out infinite; }
.hb-ear { position: absolute; top: 88px; width: 30px; height: 54px; border: 2px solid rgba(255,255,255,.9); border-radius: 14px; background: linear-gradient(145deg,#eafaff,#72b8dd); box-shadow: 0 8px 18px rgba(44,109,151,.16); }
.hb-ear-left { left: -2px; } .hb-ear-right { right: -2px; }
.hb-neck { position: absolute; left: 50%; top: 174px; width: 48px; height: 35px; transform: translateX(-50%); border-radius: 12px; background: linear-gradient(90deg,#7ebada,#eefcff,#7ebada); }
.hb-body { position: absolute; left: 50%; top: 194px; width: 100px; height: 68px; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.8); border-radius: 42px 42px 24px 24px; background: linear-gradient(145deg,#f9ffff,#94d2e6 70%,#4c8fd0); box-shadow: 0 18px 26px rgba(49,102,148,.2); }
.hb-body i { position: absolute; left: 50%; top: 20px; width: 22px; height: 22px; transform: translateX(-50%); border-radius: 50%; border: 4px solid #57dce7; box-shadow: 0 0 14px #57dce7; }
.hb-orbit { position: absolute; left: 50%; top: 56%; border: 1px solid rgba(65,154,222,.36); border-radius: 50%; transform: translate(-50%,-50%) rotateX(64deg); }
.hb-orbit-one { width: 430px; height: 300px; animation: hbOrbit 14s linear infinite; }
.hb-orbit-two { width: 330px; height: 220px; border-color: rgba(20,152,111,.4); animation: hbOrbitReverse 10s linear infinite; }
.hb-orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #62e5f2; box-shadow: 0 0 15px #3dcde9; }
.hb-orbit i:first-child { top: 18%; left: 5%; } .hb-orbit i:nth-child(2) { right: 7%; bottom: 16%; background: var(--hb-orange); box-shadow: 0 0 15px var(--hb-orange); }
.hb-orbit-two i { top: 2%; left: 48%; background: var(--hb-lime); box-shadow: 0 0 14px var(--hb-lime); }
.hb-bars { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 8px; height: 122px; padding: 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(9px); }
.hb-bars-left { left: 54px; bottom: 72px; width: 170px; } .hb-bars-right { right: 44px; top: 92px; width: 142px; height: 104px; }
.hb-bars i { flex: 1; height: var(--bar-height); min-width: 9px; border-radius: 8px 8px 3px 3px; transform-origin: bottom; background: linear-gradient(180deg,var(--hb-cyan),var(--hb-blue)); box-shadow: 0 0 14px rgba(84,217,241,.25); animation: hbBarRise 3.4s ease-in-out var(--bar-delay) infinite alternate; }
.hb-bars i:nth-child(3n) { background: linear-gradient(180deg,#f7c26f,var(--hb-orange)); }
.hb-data-card { position: absolute; z-index: 3; width: 145px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.74); border-radius: 18px; background: rgba(255,255,255,.35); box-shadow: 0 14px 30px rgba(43,91,118,.11); backdrop-filter: blur(11px); animation: hbCardDrift 5s ease-in-out infinite; }
.hb-data-card-a { right: 38px; bottom: 92px; } .hb-data-card-b { left: 38px; top: 220px; animation-delay: -2.4s; }
.hb-data-card b { display: block; color:#668095; font-size: 10px; letter-spacing:.12em; } .hb-data-card strong { display:block; margin:5px 0 8px; color:var(--hb-green-dark); font-size:22px; }
.hb-data-card span { display:block; height:4px; overflow:hidden; border-radius:4px; background:rgba(49,121,166,.13); }
.hb-data-card span::after { content:""; display:block; width:70%; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--hb-green),var(--hb-cyan)); animation:hbProgress 3s ease-in-out infinite alternate; }
.hb-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hb-particles i { position:absolute; left:var(--x); bottom:-16px; width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:0 0 10px #57ddeb,0 0 20px rgba(57,121,223,.55); animation:hbParticleUp var(--duration) linear var(--delay) infinite; }
.hb-login-side { position: relative; display:flex; align-items:center; justify-content:center; padding:54px 46px; background:transparent; }
.hb-login-side::before { content:""; position:absolute; inset:9% -16% 9% -28%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.34),rgba(76,155,225,.09) 45%,transparent 70%); filter:blur(28px); }
.hb-login-card { position:relative; z-index:2; width:min(100%,460px); padding:40px 42px 34px; border:1px solid rgba(255,255,255,.82); border-radius:28px; opacity:0; transform:translateY(28px) scale(.97); background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(245,251,255,.55)); box-shadow:0 26px 64px rgba(43,69,112,.17),inset 0 1px 0 #fff; backdrop-filter:blur(22px) saturate(125%); }
.hb-ready .hb-login-card { animation:hbCardIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hb-brand-shine { position:relative; display:flex; justify-content:center; height:92px; overflow:hidden; }
.hb-brand-shine img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(28,114,61,.11)); }
.hb-brand-shine::after { content:""; position:absolute; top:-40%; bottom:-40%; left:-45%; width:30%; transform:rotate(16deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.98),transparent); filter:blur(1px); animation:hbLogoShine 4.8s ease-in-out infinite; }
.hb-welcome { margin:6px 0 25px; text-align:center; color:var(--hb-green-dark); font-size:13px; font-weight:800; }
.hb-eyebrow { margin:14px 0 7px; color:var(--hb-green-dark); font-size:11px; font-weight:900; letter-spacing:.2em; }
.hb-login-card h1 { margin:0; color:var(--hb-ink); font-size:32px; line-height:1.22; }
.hb-subtitle { margin:9px 0 26px; color:#6b7b8f; font-size:14px; }
.hb-login-form { display:grid; gap:17px; }
.hb-login-form label { display:grid; gap:8px; color:#405269; font-size:13px; font-weight:700; }
.hb-input-wrap { position:relative; display:block; }
.hb-input-wrap::before { content:""; position:absolute; left:17px; top:50%; z-index:2; width:16px; height:16px; transform:translateY(-50%); opacity:.58; border:2px solid #487193; border-radius:50%; pointer-events:none; }
.hb-lock-icon::before { height:13px; border-radius:3px; }
.hb-lock-icon::after { content:""; position:absolute; left:20px; top:14px; width:10px; height:10px; border:2px solid #487193; border-bottom:0; border-radius:7px 7px 0 0; opacity:.58; }
.hb-login-form input { width:100%; height:54px; padding:0 18px 0 48px; color:var(--hb-ink); font:inherit; outline:0; border:1px solid rgba(56,111,159,.18); border-radius:15px; background:rgba(246,251,255,.83); box-shadow:inset 0 1px 0 rgba(255,255,255,.95); transition:border-color .2s,box-shadow .2s,transform .2s; }
.hb-login-form input:focus { border-color:rgba(46,156,196,.75); box-shadow:0 0 0 4px rgba(78,202,226,.14),0 8px 22px rgba(52,137,187,.1); transform:translateY(-1px); }
.hb-login-form .hb-remember-login { display:flex; grid-template-columns:none; align-items:center; gap:9px; margin-top:-5px; cursor:pointer; font-weight:600; color:#607187; }
.hb-login-form .hb-remember-login input { width:auto; height:auto; margin:0; padding:0; accent-color:var(--hb-green-dark); box-shadow:none; transform:none; }
.hb-login-error { min-height:18px; margin:-6px 0 -4px; color:#d94c4c; font-size:13px; }
.hb-login-button { position:relative; width:100%; height:56px; overflow:hidden; border:0; border-radius:16px; color:#fff; font-size:17px; font-weight:800; cursor:pointer; background:linear-gradient(110deg,var(--hb-green-dark),var(--hb-green) 45%,var(--hb-blue)); box-shadow:0 15px 30px rgba(17,139,105,.23); transition:transform .18s,filter .18s,box-shadow .18s; }
.hb-login-button::after { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent); transition:transform .55s; }
.hb-login-button:hover { transform:translateY(-2px) scale(1.012); filter:brightness(1.07); box-shadow:0 19px 38px rgba(17,139,105,.3); }
.hb-login-button:hover::after { transform:translateX(120%); }
.hb-login-button:active { transform:translateY(1px) scale(.992); }
.hb-login-button:disabled { cursor:wait; opacity:.72; }
.hb-card-footer { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; color:#8290a0; font-size:11px; }
.hb-card-footer i { width:7px; height:7px; border-radius:50%; background:#3fc68d; box-shadow:0 0 10px #3fc68d; animation:hbBeacon 2s ease-in-out infinite; }
@keyframes hbBlink { 0%,87.8%{opacity:1;transform:scaleY(1)} 90%{opacity:0;transform:scaleY(.06)} 95.6%{opacity:0;transform:scaleY(.06)} 97.8%,100%{opacity:1;transform:scaleY(1)} }
@keyframes hbEyeBreath { 0%,100%{opacity:.35;transform:scale(.86)} 50%{opacity:1;transform:scale(1.18)} }
@keyframes hbRobotFloat { 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,calc(-50% - 12px)) rotate(.7deg)} }
@keyframes hbPlatformPulse { 0%,100%{filter:brightness(.9);transform:translate(-50%,-50%) perspective(500px) rotateX(62deg) scale(.96)} 50%{filter:brightness(1.14);transform:translate(-50%,-50%) perspective(500px) rotateX(62deg) scale(1.03)} }
@keyframes hbOrbit { to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(360deg)} }
@keyframes hbOrbitReverse { to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-360deg)} }
@keyframes hbBeacon { 0%,100%{opacity:.45;transform:translateX(-50%) scale(.82)} 50%{opacity:1;transform:translateX(-50%) scale(1.12)} }
@keyframes hbBarRise { 0%{transform:scaleY(.62);filter:saturate(.85)} 100%{transform:scaleY(1);filter:saturate(1.2) brightness(1.08)} }
@keyframes hbParticleUp { 0%{opacity:0;transform:translate(0,0) scale(.5)} 15%{opacity:.75} 100%{opacity:0;transform:translate(24px,-740px) scale(1.4)} }
@keyframes hbGridFlow { to{background-position:56px 56px,56px 56px,112px -112px} }
@keyframes hbAuraRotate { to{transform:rotate(360deg)} }
@keyframes hbCardDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes hbProgress { from{width:38%} to{width:88%} }
@keyframes hbCardIn { to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes hbLogoShine { 0%,65%{left:-45%;opacity:0} 72%{opacity:1} 88%,100%{left:115%;opacity:0} }
@media (max-width:1100px) {
  .hb-login-shell { grid-template-columns:1fr minmax(390px,.8fr); width:calc(100vw - 30px); margin:15px auto; min-height:calc(100vh - 30px); }
  .hb-scene-heading { left:34px; } .hb-bars-left,.hb-data-card-b{display:none} .hb-robot-stage{transform:translate(-50%,-48%) scale(.86)}
}
@media (max-width:820px) {
  .hb-login-page { overflow:auto; }
  .hb-login-shell { display:block; width:min(540px,calc(100vw - 24px)); min-height:auto; margin:12px auto; }
  .hb-visual-panel { display:none; }
  .hb-login-side { min-height:calc(100vh - 24px); padding:24px; }
  .hb-login-card { padding:32px 26px; }
}
@media (prefers-reduced-motion:reduce) {
  .hb-login-page *, .hb-login-page *::before, .hb-login-page *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }
}

/* 登录页 · 视频同款科技大屏版 */
.login-page.login-page-cosmic {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 54px);
  overflow: hidden;
  color: #112237;
  background:
    radial-gradient(circle at 18% 92%, rgba(70, 178, 223, .28), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(102, 235, 196, .16), transparent 30%),
    radial-gradient(circle at 56% 62%, rgba(255,255,255,.12), transparent 18%),
    #071019;
}
.login-page.login-page-cosmic::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(118,216,255,.72) 0 1px, transparent 1.7px),
    linear-gradient(115deg, transparent 0 46%, rgba(123,215,255,.16) 47%, transparent 48% 100%);
  background-size: 118px 118px, 173px 173px, 100% 100%;
  opacity: .62;
  animation: loginStarDrift 18s linear infinite;
}
.login-page.login-page-cosmic::after {
  content: "";
  position: fixed;
  left: 0;
  bottom: -18vh;
  width: 58vw;
  height: 44vh;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(68, 188, 229, .34), transparent 68%);
  filter: blur(18px);
  opacity: .85;
}
.login-page.login-page-cosmic .login-shell {
  position: relative;
  z-index: 1;
  width: min(1240px, 92vw);
  min-height: min(680px, 78vh);
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(330px, .82fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
  padding: clamp(34px, 5vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 28%, rgba(255,255,255,.94), transparent 23%),
    radial-gradient(circle at 82% 22%, rgba(219,231,255,.78), transparent 25%),
    linear-gradient(125deg, #f7fcff 0%, #ecfbff 43%, #e6fff5 72%, #eef2ff 100%);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255,255,255,.96);
  animation: loginSceneIn .9s cubic-bezier(.2,.82,.22,1) both;
}
.login-page.login-page-cosmic .login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(54, 141, 255, .11) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 152, 190, .1) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(900px) rotateX(58deg) translateY(170px) scale(1.3);
  transform-origin: bottom center;
  opacity: .5;
  animation: loginCircuitFlow 16s linear infinite;
}
.login-page.login-page-cosmic .login-shell::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(50,174,236,.1), rgba(7,153,112,.42), rgba(78,162,245,.16), transparent);
  box-shadow: 0 0 28px rgba(59, 202, 224, .34);
  transform: rotate(-8deg);
  opacity: .7;
}
.login-page.login-page-cosmic .login-visual-stage {
  position: relative;
  min-height: 520px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  animation: none;
}
.login-page.login-page-cosmic .orbit-grid {
  position: absolute;
  inset: 5% -5% 0 0;
  border-radius: 40px;
  background:
    radial-gradient(circle at 38% 50%, rgba(68, 160, 245, .18), transparent 30%),
    radial-gradient(circle at 54% 42%, rgba(13, 160, 112, .14), transparent 35%);
  opacity: 1;
}
.login-page.login-page-cosmic .orbit-grid::before,
.login-page.login-page-cosmic .orbit-grid::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(62, 158, 247, .32), transparent);
  height: 2px;
  width: 58%;
  left: 9%;
  top: 38%;
  transform: rotate(18deg);
  filter: drop-shadow(0 0 12px rgba(74, 183, 255, .42));
  animation: loginLightSweep 4.8s ease-in-out infinite;
}
.login-page.login-page-cosmic .orbit-grid::after {
  width: 46%;
  left: 24%;
  top: 68%;
  transform: rotate(-12deg);
  animation-delay: 1.3s;
}
.login-page.login-page-cosmic .robot-orbit {
  left: 44%;
  top: 47%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 34px 48px rgba(34, 91, 173, .2));
}
.login-page.login-page-cosmic .robot-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 66%;
  width: 310px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(55, 151, 242, .28), rgba(22, 170, 133, .18) 42%, transparent 68%);
  animation: loginPulseHalo 3.2s ease-in-out infinite;
}
.login-page.login-page-cosmic .robot-core {
  width: 168px;
  height: 136px;
  border-radius: 56px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(150deg, rgba(255,255,255,.98), rgba(221, 244, 255, .86) 58%, rgba(216,255,241,.82));
  border: 1px solid rgba(255,255,255,.96);
  box-shadow:
    0 28px 64px rgba(39, 121, 210, .24),
    inset 0 1px 0 rgba(255,255,255,.98);
}
.login-page.login-page-cosmic .robot-face {
  width: 102px;
  height: 58px;
  border-radius: 30px;
  background: linear-gradient(135deg, #0f396c, #082d42 62%, #064935);
}
.login-page.login-page-cosmic .robot-face span {
  width: 15px;
  height: 15px;
  background: #78fff2;
  box-shadow: 0 0 18px rgba(120,255,242,.95), 0 0 34px rgba(34,164,255,.5);
}
.login-page.login-page-cosmic .orbit-ring {
  inset: 24px;
  border-color: rgba(74, 160, 255, .35);
  box-shadow: inset 0 0 26px rgba(69,164,255,.18), 0 0 24px rgba(37,158,217,.12);
}
.login-page.login-page-cosmic .ring-two {
  border-color: rgba(27, 175, 132, .28);
}
.login-page.login-page-cosmic .ring-three {
  border-color: rgba(92, 214, 188, .28);
}
.login-page.login-page-cosmic .scene-card {
  border-radius: 24px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 22px 50px rgba(40, 103, 172, .13);
}
.login-page.login-page-cosmic .bar-card {
  left: 6%;
  bottom: 16%;
  width: 235px;
}
.login-page.login-page-cosmic .trend-card {
  right: 5%;
  top: 13%;
  width: 285px;
}
.login-page.login-page-cosmic .donut-card {
  right: 8%;
  bottom: 14%;
  width: 136px;
  height: 136px;
}
.login-page.login-page-cosmic .login-card {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(385px, 100%);
  padding: 34px 32px 32px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 24px 58px rgba(28, 80, 139, .14),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  animation: loginCardFloat 5.8s ease-in-out infinite;
}
.login-page.login-page-cosmic .login-brand {
  position: relative;
  overflow: hidden;
  justify-content: center;
}
.login-page.login-page-cosmic .login-brand::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  width: 44%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.92), transparent);
  transform: rotate(18deg);
  filter: blur(1px);
  animation: loginLogoShine 3.8s ease-in-out infinite;
}
.login-page.login-page-cosmic .login-logo {
  height: 92px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(34, 116, 69, .12));
}
.login-page.login-page-cosmic .login-welcome {
  margin: 8px 0 22px;
  color: #078359;
  font-weight: 800;
  text-align: center;
  font-size: 14px;
}
.login-page.login-page-cosmic .eyebrow {
  color: #068960;
}
.login-page.login-page-cosmic h1 {
  margin-top: 4px;
  font-size: 34px;
}
.login-page.login-page-cosmic .subheading {
  margin-bottom: 24px;
  color: #68788b;
}
.login-page.login-page-cosmic .login-card label {
  color: #405064;
}
.login-page.login-page-cosmic .login-card input {
  height: 52px;
  border-radius: 15px;
  background: rgba(245, 251, 255, .9);
  border-color: rgba(45, 125, 203, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
.login-page.login-page-cosmic .login-card button.primary {
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(135deg, #078d67, #09aa7c);
  box-shadow: 0 16px 32px rgba(7, 150, 105, .25);
}
.login-page.login-page-cosmic .login-particles i {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #fff 0 25%, #78dcff 44%, rgba(120,220,255,0) 76%);
  box-shadow: 0 0 18px rgba(131, 224, 255, .86);
}
@keyframes loginSceneIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loginCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes loginStarDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 118px 78px, -173px 96px, 0 0; }
}
@keyframes loginCircuitFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 108px 54px, 54px 108px; }
}
@keyframes loginLightSweep {
  0%, 100% { opacity: .16; transform: translateX(-18px) rotate(18deg); }
  45% { opacity: .78; transform: translateX(36px) rotate(18deg); }
}
@keyframes loginPulseHalo {
  0%, 100% { opacity: .45; transform: translateX(-50%) scale(.92); }
  50% { opacity: .95; transform: translateX(-50%) scale(1.07); }
}
@media (max-width: 980px) {
  .login-page.login-page-cosmic .login-shell {
    width: min(520px, 94vw);
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px;
  }
  .login-page.login-page-cosmic .login-visual-stage {
    display: none;
  }
  .login-page.login-page-cosmic .login-card {
    justify-self: center;
  }
}

@media (max-width: 820px) {
  body { min-width: 0; background: #f4f7f5; }
  .shell { display: block; min-height: 100vh; }
  .sidebar {
    position: sticky; top: 0; z-index: 8; width: 100%; height: auto; max-height: 48vh;
    padding: 10px 12px; overflow: auto; border-right: 0; border-bottom: 1px solid rgba(59,133,104,.16);
    box-shadow: 0 10px 28px rgba(34,94,73,.08);
  }
  .brand { padding: 0 0 8px; }
  .sidebar-collapse-toggle { display: none; }
  .brand-logo { width: 132px; height: 44px; flex-basis: 132px; }
  nav {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 0 0 auto; min-width: 96px; padding: 10px 12px; border-radius: 10px;
    text-align: center; white-space: nowrap; font-size: 13px;
  }
  .nav-item span { width: auto; margin-right: 5px; }
  .data-management { flex: 0 0 auto; }
  .data-management-actions {
    position: absolute; left: 12px; right: 12px; top: 106px; z-index: 9;
    grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px;
    border: 1px solid rgba(12,139,104,.14); border-radius: 12px; background: #fff;
    box-shadow: 0 16px 38px rgba(12,31,26,.14);
  }
  .sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .system-info-wrap { flex: 1 1 auto; min-width: 0; }
  .system-info-toggle { padding: 8px 10px; }
  .calendar-note { position: absolute; left: 12px; right: 12px; top: 106px; z-index: 9; background: #fff; }
  .sidebar-session { flex: 0 0 auto; margin-top: 0; padding: 8px 9px; }
  .sidebar-session .logged-user { min-width: 74px; }

  main { padding: 18px 12px 32px; }
  header { margin-bottom: 14px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  h1 { font-size: 23px; margin-bottom: 0; }
  .metrics {
    display: flex; gap: 10px; margin: 0 -12px 14px; padding: 0 12px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory;
  }
  #metricCards, .metrics .due-shortcuts { display: contents; }
  .metric, .due-shortcut {
    flex: 0 0 148px; min-height: 96px; padding: 14px; border-radius: 10px; scroll-snap-align: start;
  }
  .metric .value { font-size: 24px; margin-top: 7px; }
  .metric .hint { line-height: 1.35; }

  .panel { border-radius: 12px; overflow: visible; }
  .panel-head {
    align-items: stretch; gap: 10px; padding: 16px 14px 12px; flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .panel-head h2 { font-size: 17px; margin-bottom: 0; }
  .scope-filter { width: 100%; min-height: 44px; }
  .table-wrap { overflow: visible; border-bottom: 1px solid var(--line); }
  .project-table {
    display: block; min-width: 0; width: 100%; table-layout: auto;
  }
  .project-table colgroup,
  .project-table tbody,
  .project-table thead tr:not(.filter-row) { display: none; }
  .project-table thead,
  .project-table .filter-row { display: block; }
  .project-table .filter-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px;
    background: #fff;
  }
  .project-table .filter-row th {
    display: block; width: auto !important; padding: 0; border: 0; background: transparent;
  }
  .project-table .filter-row th:first-child,
  .project-table .filter-row th:last-child { padding: 0; }
  .project-table .filter-row th:first-child { grid-column: 1 / -1; }
  .project-table .filter-row th:empty { display: none; }
  .filter-row input, .filter-row select {
    min-height: 42px; padding: 10px 11px; border-radius: 10px; font-size: 13px;
  }

  .project-card-list { display: grid; gap: 12px; padding: 12px 14px 86px; background: #fbfcfb; }
  .project-card {
    display: grid; gap: 10px; padding: 14px; border: 1px solid #e0e9e5; border-radius: 12px;
    background: #fff; box-shadow: 0 5px 18px rgba(23,34,45,.045);
  }
  .project-card-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  }
  .project-card-head strong { display: block; font-size: 14px; line-height: 1.35; }
  .project-card-head small { display: block; margin-top: 3px; color: var(--green-dark); font-size: 11px; font-weight: 700; }
  .project-card-title {
    border: 0; padding: 0; background: transparent; color: var(--ink);
    text-align: left; font-size: 15px; font-weight: 800; line-height: 1.45;
  }
  .project-card-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0;
  }
  .project-card-grid div { min-width: 0; }
  .project-card-grid dt { color: var(--muted); font-size: 11px; }
  .project-card-grid dd { margin: 3px 0 0; color: var(--ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .project-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 12px; line-height: 1.45;
  }
  .project-card-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
  .project-card-actions .primary { min-height: 40px; padding: 9px 14px; box-shadow: none; }
  .project-card-actions .delete-btn {
    min-height: 40px; padding: 9px 12px; border: 1px solid #f1c4c4; border-radius: 9px; background: #fff7f7;
  }
  .pagination {
    position: sticky; bottom: 0; z-index: 6; margin: 0; padding: 12px 14px;
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }
  .pagination > div { display: flex; gap: 8px; }
  .pagination button { min-height: 38px; padding: 8px 12px; }

  .drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 94vh; border-radius: 18px 18px 0 0;
    transform: translateY(22px); box-shadow: 0 -18px 48px rgba(12,31,26,.22);
  }
  .drawer.open { transform: translateY(0); }
  .drawer-head { position: sticky; top: 0; z-index: 2; padding: 16px 18px 12px; background: #fff; }
  .icon-btn { width: 40px; height: 40px; }
  form { padding: 0 16px 22px; }
  .form-section { padding: 18px 0; }
  .drawer .form-grid,
  .drawer .form-grid.dates,
  .drawer .project-basic-grid,
  .receipt-grid,
  .schedule-form-grid,
  .instrument-form,
  .calc-grid,
  .admin-layout,
  .notification-node-options {
    grid-template-columns: 1fr;
  }
  .project-basic-grid > *,
  .project-basic-grid .field-order-date,
  .project-basic-grid .field-quote,
  .project-basic-grid .field-order-no,
  .project-basic-grid .field-project-type,
  .project-basic-grid .field-owner,
  .project-basic-grid .field-customer-service,
  .project-basic-grid .field-client,
  .project-basic-grid .field-tested,
  .project-basic-grid .field-project-address,
  .project-basic-grid .field-amount,
  .project-basic-grid .field-business-fee,
  .project-basic-grid .field-subcontract-fee,
  .project-basic-grid .subcontract-section,
  .project-basic-grid .field-material,
  .project-basic-grid .field-contract,
  .project-basic-grid .field-review-bypass,
  .project-basic-grid .field-contact-name,
  .project-basic-grid .field-contact-method,
  .project-basic-grid .field-cycle,
  .project-basic-grid .field-negotiated,
  label.wide { grid-column: auto; }
  label { font-size: 12px; }
  input, select, textarea { min-height: 42px; font-size: 14px; }
  .attachment-controls,
  .section-title-row,
  .audit-controls div,
  .drawer-actions {
    align-items: stretch; flex-direction: column;
  }
  .discount-approval-info { grid-template-columns: 1fr 1fr; }
  .drawer-actions {
    position: sticky; bottom: 0; z-index: 2; margin: 18px -16px -22px; padding: 12px 16px;
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  }
  .drawer-actions button,
  .attachment-controls button,
  .section-title-row .secondary { min-height: 42px; }
  .subcontract-item { grid-template-columns: 1fr; }
  .operation-log { grid-template-columns: 1fr; gap: 4px; }
  .modal { padding: 12px; place-items: end center; }
  .modal-card,
  .modal-card.large,
  .batch-entrust-card,
  .monitoring-content-card,
  .company-target-card,
  .export-fields-card {
    width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0;
  }
}

@media (min-width: 821px) {
  .project-card-list { display: none; }
  .mobile-filter-toggle { display: none; }
}

/* Mobile app shell overrides. */
@media (max-width: 820px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body:has(.drawer.open), body:has(.modal:not([hidden])) { overflow: hidden; }
  .sidebar {
    position: fixed; inset: auto 0 0; z-index: 50; height: calc(68px + env(safe-area-inset-bottom));
    max-height: none; padding: 0 8px env(safe-area-inset-bottom); overflow: hidden;
    border: 0; border-top: 1px solid #dce8e3; background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 24px rgba(20,58,46,.09); backdrop-filter: blur(14px);
  }
  .brand, .sidebar-footer { display: none; }
  .sidebar nav { height: 68px; gap: 2px; padding: 0; overflow-x: auto; align-items: stretch; }
  .sidebar .nav-item {
    min-width: 68px; min-height: 68px; padding: 8px 5px 6px; border-radius: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; line-height: 1.1; color: #60776f;
  }
  .sidebar .nav-item span { height: 22px; margin: 0; font-size: 20px; line-height: 22px; }
  .sidebar .nav-item.active { background: transparent; color: var(--green-dark); box-shadow: inset 0 3px 0 var(--green); }
  .sidebar .data-management { display: contents; }
  .data-management-actions { position: fixed; inset: auto 10px calc(76px + env(safe-area-inset-bottom)); top: auto; }
  main { width: 100%; padding: 14px 10px 24px; }
  main > header { display: flex; min-height: 44px; align-items: center; margin: 0 2px 12px; }
  main > header .eyebrow { display: none; }
  main > header h1 { font-size: 20px; line-height: 1.2; }
  .metrics { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; }
  .metric, .due-shortcut { flex-basis: 136px; min-height: 86px; padding: 12px; }
  .panel { border-radius: 8px; }
  .panel-head { padding: 13px 12px; }
  .project-list-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; width: 100%; }
  .mobile-filter-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; }
  .scope-filter { min-width: 0; }
  .project-table .filter-row { display: none; grid-template-columns: 1fr; padding: 12px; }
  .mobile-filters-open .project-table .filter-row { display: grid; }
  .project-table .filter-row th:first-child { grid-column: auto; }
  .project-card-list { gap: 10px; padding: 10px 10px 76px; }
  .project-card { gap: 9px; padding: 13px; border-radius: 8px; box-shadow: none; }
  .project-card-head .badge { flex: 0 0 auto; max-width: 42%; text-align: center; }
  .project-card-title { min-height: 36px; font-size: 16px; }
  .project-card-grid { gap: 7px 10px; }
  .project-card-actions { display: grid; grid-template-columns: 1fr auto; }
  .project-card-actions .primary { width: 100%; }
  .pagination { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .drawer { height: 100dvh; border-radius: 0; }
  .drawer-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .drawer-head h2 { font-size: 19px; }
  .drawer form { padding-right: 14px; padding-left: 14px; }
  .drawer .form-section > h3 { font-size: 16px; }
  .drawer-actions { margin-right: -14px; margin-left: -14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .attachment-controls input { width: 100%; }
  .project-attachment-item { width: 100%; align-items: stretch; }
  .project-attachment-link { flex: 1 1 auto; overflow-wrap: anywhere; }
  .modal { padding: 0; }
  .modal-card, .modal-card.large, .batch-entrust-card, .monitoring-content-card,
  .company-target-card, .export-fields-card { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal-card > .drawer-head, .modal-card > .modal-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .statistics-head, .detail-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .statistics-actions, .schedule-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .statistics-actions > *, .schedule-actions > * { min-width: 0; width: 100%; }
  .schedule-actions .schedule-header-tabs { grid-column: 1 / -1; margin-left: 0; }
  .sampling-schedule-panel .table-wrap, .statistics-detail .table-wrap,
  .finance-panel .table-wrap, .performance-panel .table-wrap, .instrument-panel .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .sampling-schedule-panel table, .statistics-detail table,
  .finance-panel table, .performance-panel table, .instrument-panel table { min-width: 860px; }
  .app-toast { top: auto; bottom: calc(82px + env(safe-area-inset-bottom)); width: calc(100% - 24px); grid-template-columns: 36px 1fr; }
  .app-confirm { align-items: flex-end; padding: 12px 12px calc(80px + env(safe-area-inset-bottom)); }
  .app-confirm-card { width: 100%; }
}

@media (max-width: 390px) {
  .project-card-grid { grid-template-columns: 1fr; }
  .statistics-actions, .schedule-actions { grid-template-columns: 1fr; }
}


.app-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3000;
  display: grid;
  grid-template-columns: 44px minmax(220px, 420px);
  gap: 14px;
  align-items: center;
  max-width: min(520px, calc(100vw - 40px));
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 80px rgba(18, 36, 50, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transform: translate(-50%, -44%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .9, .25, 1.2);
}
.app-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 800;
  font-size: 22px;
  animation: toastPop .42s ease;
}
.app-toast.success .toast-icon { background: linear-gradient(135deg, #18a46f, #0f8fcb); }
.app-toast.error .toast-icon { background: linear-gradient(135deg, #e35b5b, #d23b74); }
.app-toast.info .toast-icon { background: linear-gradient(135deg, #4e8df5, #7b61ff); }
.toast-body strong { display: block; margin-bottom: 4px; font-size: 16px; color: #18332d; }
.toast-body p { margin: 0; color: #52645f; line-height: 1.5; white-space: pre-wrap; }
.inline-error {
  margin: -4px 0 8px;
  color: #d64545;
  font-size: 14px;
  font-weight: 700;
}
@keyframes toastPop {
  0% { transform: scale(.6) rotate(-12deg); }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}


.app-confirm {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 31, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.app-confirm.show { opacity: 1; pointer-events: auto; }
.app-confirm-card {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 90px rgba(18, 36, 50, 0.32);
  transform: translateY(12px) scale(.96);
  transition: transform .2s cubic-bezier(.2, .9, .25, 1.2);
}
.app-confirm.show .app-confirm-card { transform: translateY(0) scale(1); }
.confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #1fae82, #4e8df5);
}
.confirm-copy strong { display: block; margin-bottom: 8px; font-size: 18px; color: #18332d; }
.confirm-copy p { margin: 0; color: #52645f; line-height: 1.7; white-space: pre-wrap; }
.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 820px) {
  .app-toast {
    top: 50%; bottom: auto;
    width: calc(100% - 24px); grid-template-columns: 36px 1fr;
    transform: translate(-50%, -44%) scale(.96);
  }
  .app-toast.show { transform: translate(-50%, -50%) scale(1); }
  .app-confirm { place-items: end center; padding: 12px 12px calc(80px + env(safe-area-inset-bottom)); }
  .app-confirm-card { width: 100%; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px; border-radius: 12px; }
  .confirm-icon { width: 40px; height: 40px; }
}

.contract-quote-panel {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-rows: auto minmax(720px, 1fr);
  gap: 14px;
}

.contract-quote-panel[hidden] { display: none; }

.contract-quote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.contract-quote-head h2 { margin: 2px 0 4px; }
.contract-quote-head p { margin: 0; }

#contractQuoteFrame {
  width: 100%;
  min-height: calc(100vh - 170px);
  border: 1px solid var(--line, #dfe8e5);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(21, 58, 49, .08);
}
.drawer-head-actions { display: flex; align-items: center; gap: 10px; }
.contract-order-import-card { width: min(1180px, calc(100vw - 40px)); }
.contract-order-import-card .batch-toolbar { margin: 14px 0; }
.contract-order-import-card .batch-toolbar input { min-width: min(520px, 70vw); }
.contract-order-project-link { display: block; width: 100%; min-width: 180px; border: 0; padding: 6px 4px; color: inherit; text-align: left; background: transparent; border-radius: 6px; cursor: pointer; }
.contract-order-project-link:hover, .contract-order-project-link:focus-visible { color: var(--green); background: #edf9f4; outline: none; }
.contract-order-project-link:hover small, .contract-order-project-link:focus-visible small { color: inherit; }
.annual-review-summary {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #bfe2d7;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbf8, #fff);
}
.annual-review-summary[hidden] { display: none; }
.annual-review-summary-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.annual-review-summary-head strong { font-size: 16px; }
.annual-review-summary-head span { color: #087c61; font-weight: 700; }
.annual-review-batches { display: grid; gap: 8px; }
.annual-review-batch { display: grid; grid-template-columns: 90px 90px minmax(220px, 1fr) 120px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid #e2ece9; }
.annual-review-batch small { color: #65746f; }
@media (max-width: 760px) { .annual-review-batch { grid-template-columns: 1fr 1fr; } }

@media (min-width: 821px) {
  main { padding-top: 22px; }
  header { margin-bottom: 14px; }
  .panel-head { padding-top: 14px; padding-bottom: 11px; }
  .filter-row th { padding-top: 8px; padding-bottom: 8px; }
  .stage-multi-filter { min-width: 240px; }
  .stage-multi-menu { width: 300px !important; max-width: min(360px, calc(100vw - 24px)); overflow-x: hidden !important; }
  .stage-multi-menu label { display: flex !important; align-items: center; gap: 7px; width: 100%; color: var(--ink) !important; font-size: 12px; }
  .stage-multi-menu input[type="checkbox"] { width: auto !important; min-width: auto !important; flex: 0 0 auto; margin: 0 !important; }
}

/* Monthly report statistics v2 */
#statisticsCards { display: block; }
.statistics-period-label {
  margin: 0 0 10px;
  color: #123b52;
  font-size: 1.02rem;
  font-weight: 700;
}
.statistics-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.compact-stat-card {
  min-height: 112px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.compact-stat-card:hover,
.compact-stat-card:focus-visible {
  transform: translateY(-2px);
  border-color: #129b7a;
  box-shadow: 0 8px 20px rgba(18, 155, 122, .14);
  outline: none;
}
#statisticsCards .timeliness-summary {
  margin-top: 14px;
  cursor: default;
}
.statistics-metric-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #087f68;
  font: inherit;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.statistics-metric-link:hover,
.statistics-metric-link:focus-visible {
  color: #075f50;
  background: #e8f7f2;
  outline: none;
}
.statistics-detail table td small {
  line-height: 1.55;
  color: #527080;
}
.statistics-filter-row .date-filter {
  min-width: 230px;
}
@media (max-width: 1100px) {
  .statistics-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .statistics-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#statisticsPanel {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
#statisticsCards,
.statistics-summary-grid,
#statisticsPanel .statistics-detail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#statisticsPanel .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}