:root {
  --canvas: #f3f5f2;
  --surface: #ffffff;
  --surface-soft: #f7f9f7;
  --ink: #172a28;
  --muted: #6b7b78;
  --muted-2: #98a7a3;
  --line: #dce5e1;
  --line-strong: #c8d5d0;
  --sidebar: #142c2a;
  --sidebar-soft: #1c3a35;
  --sidebar-text: #e7f1ed;
  --sidebar-muted: #9fb6ad;
  --green: #168a61;
  --green-soft: #e4f4ec;
  --blue: #2f78a8;
  --blue-soft: #e8f2f8;
  --orange: #c86a32;
  --orange-soft: #fff0e6;
  --red: #c34f49;
  --red-soft: #fff0ef;
  --shadow: 0 12px 30px rgba(25, 49, 44, 0.06);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); overflow-anchor: none; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(22, 138, 97, 0.28); outline-offset: 2px; }
i[data-lucide] { width: 18px; height: 18px; stroke-width: 2; }

.workspace-app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns 180ms ease; }
.workspace-app.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
.workspace-sidebar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 100vh; height: 100vh; flex-direction: column; padding: 26px 16px 18px; color: var(--sidebar-text); background: var(--sidebar); }
.workspace-brand { display: flex; min-height: 36px; align-items: center; gap: 11px; padding: 0 9px; }
.workspace-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: #102b25; background: #72d0a4; border-radius: 8px; }
.workspace-brand-mark svg { width: 20px; height: 20px; }
.workspace-brand-copy { display: grid; gap: 2px; }
.workspace-brand-copy strong { font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 18px; line-height: 1.1; letter-spacing: 0; }
.workspace-brand-copy small { color: var(--sidebar-muted); font-size: 11px; }
.sidebar-collapse { display: grid; width: 100%; min-height: 35px; height: 35px; flex: 0 0 auto; place-items: center; margin: 0; color: var(--sidebar-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; }
.sidebar-collapse:hover { color: var(--sidebar-text); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
.sidebar-collapse svg { width: 17px; height: 17px; }
.sidebar-label { margin: 46px 10px 9px; color: #78988b; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.workspace-nav { display: grid; gap: 5px; }
.workspace-nav-item { display: flex; min-height: 45px; align-items: center; gap: 12px; padding: 0 12px; color: var(--sidebar-muted); text-align: left; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 600; transition: background 140ms ease, color 140ms ease; }
.workspace-nav-item:hover { color: var(--sidebar-text); background: rgba(255, 255, 255, 0.06); }
.workspace-nav-item.active { color: #ffffff; background: var(--sidebar-soft); box-shadow: inset 3px 0 0 #71d1a4; }
.workspace-nav-item svg { width: 18px; height: 18px; }
.sidebar-bottom { display: grid; gap: 12px; margin-top: auto; padding: 17px 8px 0; border-top: 1px solid rgba(226, 244, 236, 0.13); }
.sidebar-data-status { display: flex; align-items: center; gap: 9px; }
.status-icon { display: grid; width: 29px; height: 29px; place-items: center; color: #8dd8b1; background: rgba(113, 209, 164, 0.12); border-radius: 6px; }
.status-icon svg { width: 15px; height: 15px; }
.sidebar-data-status > span:last-child { display: grid; gap: 3px; min-width: 0; }
.sidebar-data-status strong { overflow: hidden; color: var(--sidebar-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-data-status small { color: var(--sidebar-muted); font-size: 10px; }
.sidebar-data-actions { display: grid; gap: 8px; }
.sidebar-data-action { display: inline-flex; min-height: 35px; align-items: center; justify-content: center; gap: 8px; color: var(--sidebar-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; font-size: 12px; font-weight: 600; }
.sidebar-data-action:hover { background: rgba(113, 209, 164, 0.16); border-color: rgba(113, 209, 164, 0.45); }
.sidebar-data-action svg { width: 15px; height: 15px; }
.workspace-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sidebar-refresh { display: inline-flex; min-height: 35px; align-items: center; justify-content: center; gap: 8px; color: var(--sidebar-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; font-size: 12px; font-weight: 600; }
.sidebar-refresh:hover { background: rgba(113, 209, 164, 0.16); border-color: rgba(113, 209, 164, 0.45); }
.sidebar-refresh svg { width: 15px; height: 15px; }
.workspace-backdrop, .mobile-menu { display: none; }

.workspace-app.sidebar-collapsed .workspace-sidebar { padding-left: 10px; padding-right: 10px; }
.workspace-app.sidebar-collapsed .workspace-brand { display: grid; justify-items: center; gap: 10px; padding: 0; }
.workspace-app.sidebar-collapsed .workspace-brand-copy, .workspace-app.sidebar-collapsed .sidebar-label, .workspace-app.sidebar-collapsed .sidebar-data-status > span:last-child, .workspace-app.sidebar-collapsed .sidebar-data-action span, .workspace-app.sidebar-collapsed .sidebar-refresh span, .workspace-app.sidebar-collapsed .workspace-nav-item span { display: none; }
.workspace-app.sidebar-collapsed .workspace-nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.workspace-app.sidebar-collapsed .sidebar-data-status { justify-content: center; }
.workspace-app.sidebar-collapsed .sidebar-bottom { padding-left: 0; padding-right: 0; }
.workspace-app.sidebar-collapsed .sidebar-data-action { width: 100%; padding-left: 0; padding-right: 0; }
.workspace-app.sidebar-collapsed .sidebar-refresh, .workspace-app.sidebar-collapsed .sidebar-collapse { width: 100%; }

.workspace-main { min-width: 0; min-height: 100vh; }
.workspace-topbar { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 36px; background: rgba(243, 245, 242, 0.94); border-bottom: 1px solid var(--line); }
.topbar-leading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-context { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.topbar-context svg { width: 14px; height: 14px; color: var(--muted-2); }
.topbar-context strong { color: var(--ink); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.local-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 700; }
.local-status i { width: 7px; height: 7px; background: #42b980; border-radius: 50%; box-shadow: 0 0 0 3px var(--green-soft); }
.local-status.server { color: var(--blue); }
.local-status.server i { background: #3d8fc4; box-shadow: 0 0 0 3px var(--blue-soft); }
.local-status.offline { color: var(--orange); }
.local-status.offline i { background: #e08a4c; box-shadow: 0 0 0 3px var(--orange-soft); }
.topbar-date { color: var(--muted); font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 12px; }
.topbar-refresh { display: grid; width: 34px; height: 34px; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.topbar-refresh:hover { color: var(--ink); background: var(--surface-soft); }
.topbar-refresh svg { width: 16px; height: 16px; }

.workspace-content { width: min(1420px, calc(100% - 84px)); margin: 0 auto; padding: 24px 0 18px; }
.workspace-view[hidden] { display: none; }
.overview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }
h1 { margin-bottom: 0; color: var(--ink); font-size: 28px; line-height: 1.2; }
h2 { margin-bottom: 0; font-size: 18px; line-height: 1.3; }
.overview-subtitle { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.date-stamp { display: grid; min-width: 132px; gap: 4px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.date-stamp span { color: var(--muted); font-size: 11px; }
.date-stamp strong { color: var(--ink); font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 17px; }
.overview-period-row { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 18px; margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.overview-period-heading { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.overview-period-heading .section-kicker { flex: 0 0 auto; margin: 0; }
.overview-period-heading strong { flex: 0 0 auto; font-size: 17px; }
.overview-period-meta { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-period-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.overview-period-option { min-height: 29px; padding: 0 11px; color: var(--muted); background: transparent; border-radius: 5px; font-size: 11px; font-weight: 700; }
.overview-period-option:hover { color: var(--ink); background: var(--surface-soft); }
.overview-period-option.active { color: var(--ink); background: var(--green-soft); }

.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.overview-metric { position: relative; min-height: 118px; padding: 15px 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.overview-metric::after { position: absolute; top: 0; right: 0; bottom: 0; width: 4px; content: ""; }
.profit-metric::after { background: var(--blue); }.income-metric::after { background: var(--green); }.expense-metric::after { background: var(--orange); }.hours-metric::after { background: #806fae; }
.metric-topline { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-topline svg { width: 18px; height: 18px; }
.profit-metric .metric-topline svg { color: var(--blue); }.income-metric .metric-topline svg { color: var(--green); }.expense-metric .metric-topline svg { color: var(--orange); }.hours-metric .metric-topline svg { color: #806fae; }
.overview-metric > strong { display: block; margin-top: 15px; color: var(--ink); font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 26px; line-height: 1; }
.overview-metric > small { display: block; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profit-metric.negative > strong { color: var(--red); }

.workspace-panel { min-width: 0; padding: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.panel-heading { display: flex; min-height: 34px; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-caption { padding-top: 8px; color: var(--muted-2); font-size: 11px; white-space: nowrap; }

.panel-heading-actions { display: flex; align-items: center; gap: 12px; }
.panel-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 700; }
.panel-link:hover { color: #0f6e4d; }
.panel-link svg { width: 14px; height: 14px; }
.recent-list { display: grid; margin-top: 17px; }
.recent-item { display: grid; grid-template-columns: 65px minmax(0, 1fr) auto; min-height: 54px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.recent-item:first-child { border-top: 0; }
.recent-date { color: var(--muted); font-size: 11px; }
.recent-item-copy { display: grid; min-width: 0; gap: 4px; }
.recent-item-copy strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recent-item-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-amount { font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
.recent-amount.income { color: var(--green); }.recent-amount.expense { color: var(--orange); }
.recent-empty { display: grid; min-height: 190px; place-items: center; color: var(--muted); font-size: 12px; text-align: center; border-top: 1px solid var(--line); }
.recent-empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 13px; }

.workorder-todo-panel { margin-top: 16px; padding: 24px; }
.workorder-todo-list { display: grid; gap: 14px; margin-top: 20px; }
.workorder-todo-item { min-width: 0; padding: 20px 22px 22px 19px; background: linear-gradient(135deg, #ffffff 0%, #fbfdfb 100%); border: 1px solid var(--line); border-left: 4px solid #806fae; border-radius: 10px; box-shadow: 0 7px 18px rgba(25, 49, 44, 0.045); }
.workorder-todo-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.workorder-todo-title { display: grid; min-width: 0; gap: 5px; }
.workorder-todo-id { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 9px; }
.workorder-status-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #806fae; border-radius: 50%; box-shadow: 0 0 0 4px #f0ebfb; }
.workorder-todo-id strong { color: #5f4f87; font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 15px; letter-spacing: 0.02em; }
.workorder-service-badge { padding: 4px 8px; color: #66558e; background: #f0ebfb; border-radius: 999px; font-size: 11px; font-weight: 700; }
.workorder-todo-subtitle { color: var(--muted); font-size: 11px; }
.workorder-todo-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.todo-action { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; padding: 0 10px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 700; }
.todo-action:hover { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.todo-action.complete:hover { color: var(--green); border-color: #9bcdb8; }.todo-action.delete:hover { color: var(--red); border-color: #e2aaa6; }
.todo-action svg { width: 14px; height: 14px; }
.workorder-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.workorder-detail { display: grid; min-width: 0; gap: 6px; padding: 12px 14px; background: var(--surface-soft); border: 1px solid #e5ece8; border-radius: 7px; }
.workorder-detail span, .workorder-content-block > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.workorder-detail strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; line-height: 1.5; }
.workorder-detail-amount { color: var(--green) !important; font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 15px !important; }
.workorder-content-block { margin-top: 12px; padding: 14px 16px; background: #f8fbf9; border: 1px solid #e5ece8; border-radius: 7px; }
.workorder-content-block p { margin: 7px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.workorder-optional-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.workorder-empty { display: flex; min-height: 220px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: 8px; }
.workorder-empty > svg { width: 23px; height: 23px; color: var(--green); }
.workorder-empty strong, .workorder-empty span { display: block; }.workorder-empty strong { margin-bottom: 4px; color: var(--ink); font-size: 13px; }.workorder-empty span { font-size: 10px; }

.overview-footer-row { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 0 4px; }
.data-note { display: flex; align-items: center; gap: 10px; }
.data-note-icon { display: grid; width: 31px; height: 31px; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 6px; }
.data-note-icon svg { width: 16px; height: 16px; }
.data-note > span:last-child { display: grid; gap: 3px; }
.data-note strong { color: var(--ink); font-size: 11px; }.data-note small { color: var(--muted); font-size: 10px; }
.overview-counts { display: flex; align-items: center; gap: 17px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.overview-counts span + span { padding-left: 17px; border-left: 1px solid var(--line); }
.overview-counts strong { color: var(--ink); font-family: "Space Grotesk", "Noto Sans SC", sans-serif; font-size: 14px; }

.module-view { animation: workspaceAppear 180ms ease; }
@keyframes workspaceAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.module-view-heading { display: flex; min-height: 42px; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.module-view-heading h1 { font-size: 24px; }
.module-heading-actions { display: flex; align-items: center; gap: 10px; }
.module-subnav { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.module-subnav:empty { display: none; }
.module-subnav button { min-height: 31px; padding: 0 10px; color: var(--muted); background: transparent; border-radius: 5px; font-size: 11px; font-weight: 700; }
.module-subnav button:hover { color: var(--ink); background: var(--surface-soft); }
.module-subnav .module-view-badge { display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px; color: var(--green); background: var(--green-soft); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; line-height: 17px; text-align: center; vertical-align: 1px; }
.module-subnav button.active .module-view-badge { color: #ffffff; background: var(--green); }
.module-subnav button.active { color: var(--ink); background: var(--green-soft); }
.back-button { display: inline-flex; min-height: 37px; align-items: center; gap: 7px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 700; }
.back-button:hover { background: var(--surface-soft); border-color: var(--line-strong); }
.back-button svg { width: 16px; height: 16px; }
.module-frame-wrap { position: relative; min-height: calc(100vh - 210px); overflow: hidden; overflow-anchor: none; background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.module-frame-wrap iframe { display: block; width: 100%; height: max(720px, calc(100vh - 210px)); min-height: 720px; border: 0; background: var(--canvas); }
.module-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); background: var(--canvas); font-size: 12px; transition: opacity 160ms ease; }
.module-loading.is-hidden { opacity: 0; pointer-events: none; }
.loading-spinner { width: 15px; height: 15px; border: 2px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.workspace-footer { width: min(1420px, calc(100% - 84px)); margin: 0 auto; padding: 0 0 22px; color: var(--muted-2); font-size: 10px; }.workspace-footer span { padding: 0 5px; }
.workspace-toast { position: fixed; right: 24px; bottom: 22px; z-index: 50; padding: 10px 13px; color: #ffffff; background: var(--sidebar); border-radius: 6px; box-shadow: 0 12px 24px rgba(20, 44, 42, 0.2); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 150ms ease, transform 150ms ease; }.workspace-toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .workspace-content, .workspace-footer { width: min(100% - 56px, 960px); }
  .workspace-topbar { padding: 0 24px; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workorder-detail-grid, .workorder-optional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .workspace-app { display: block; }
  .workspace-sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; min-height: 100vh; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 14px 0 30px rgba(20, 44, 42, 0.18); }
  .workspace-app.sidebar-open .workspace-sidebar { transform: translateX(0); }
  .workspace-backdrop { position: fixed; inset: 0; z-index: 19; display: block; width: 100%; height: 100%; background: rgba(20, 44, 42, 0.35); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .workspace-app.sidebar-open .workspace-backdrop { opacity: 1; pointer-events: auto; }
  .workspace-topbar { min-height: 60px; padding: 0 17px; }
  .mobile-menu { display: grid; width: 34px; height: 34px; place-items: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
  .mobile-menu svg { width: 17px; height: 17px; }
  .topbar-context > span, .topbar-context > i { display: none; }
  .topbar-context strong { font-size: 13px; }
  .topbar-actions { gap: 9px; }.local-status { display: none; }.topbar-date { font-size: 11px; }
  .workspace-content, .workspace-footer { width: calc(100% - 34px); }
  .workspace-content { padding-top: 20px; }
  .overview-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  h1 { font-size: 24px; }.overview-subtitle { margin-top: 8px; font-size: 12px; }
  .date-stamp { width: 100%; min-height: 56px; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 10px 13px; }.date-stamp strong { text-align: right; }
  .overview-period-row { min-height: 38px; align-items: flex-start; flex-direction: column; gap: 10px; }.overview-period-heading { width: 100%; }.overview-period-meta { font-size: 10px; }.overview-period-controls { width: 100%; }.overview-period-option { flex: 1; padding: 0 7px; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.overview-metric { min-height: 112px; padding: 14px; }.overview-metric > strong { margin-top: 14px; font-size: 22px; }.overview-metric > small { font-size: 10px; }
  .workspace-panel { padding: 17px; }.workorder-todo-panel { margin-top: 10px; padding: 17px; }
  .recent-item { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; }.recent-date { font-size: 10px; }.recent-amount { font-size: 12px; }
  .workorder-todo-list { gap: 10px; margin-top: 15px; }.workorder-todo-item { padding: 16px 14px 16px 16px; }.workorder-todo-header { flex-direction: column; gap: 12px; }.workorder-todo-actions { width: 100%; }.todo-action { flex: 1; justify-content: center; }.workorder-detail-grid, .workorder-optional-grid { grid-template-columns: 1fr; gap: 8px; }
  .overview-footer-row { align-items: flex-start; flex-direction: column; gap: 13px; padding-top: 5px; }.overview-counts { width: 100%; justify-content: space-between; }.overview-counts span + span { padding-left: 0; border-left: 0; }
  .module-view-heading { min-height: 40px; align-items: flex-start; margin-bottom: 11px; }.module-view-heading h1 { font-size: 21px; }.module-heading-actions { align-items: flex-start; flex-direction: column; gap: 7px; }.module-subnav { order: 2; max-width: calc(100vw - 180px); overflow-x: auto; }.module-subnav button { white-space: nowrap; }.back-button { min-height: 34px; padding: 0 9px; }.back-button span { display: none; }
  .module-frame-wrap { min-height: calc(100vh - 180px); }.module-frame-wrap iframe { height: max(780px, calc(100vh - 180px)); min-height: 780px; }
  .workspace-footer { padding-bottom: 16px; }
}

@media (max-width: 760px) {
  .workspace-app.sidebar-collapsed .workspace-sidebar { width: 244px; padding: 26px 16px 18px; }
  .workspace-app.sidebar-collapsed .workspace-brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; }
  .workspace-app.sidebar-collapsed .workspace-brand-copy, .workspace-app.sidebar-collapsed .sidebar-label, .workspace-app.sidebar-collapsed .sidebar-data-status > span:last-child, .workspace-app.sidebar-collapsed .sidebar-data-action span, .workspace-app.sidebar-collapsed .sidebar-refresh span { display: grid; }
  .workspace-app.sidebar-collapsed .sidebar-label { display: block; }
  .workspace-app.sidebar-collapsed .sidebar-collapse { margin-left: auto; }
  .workspace-app.sidebar-collapsed .workspace-nav-item { justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; }
  .workspace-app.sidebar-collapsed .sidebar-data-status { justify-content: flex-start; }
  .workspace-app.sidebar-collapsed .sidebar-bottom { padding-left: 8px; padding-right: 8px; }
  .workspace-app.sidebar-collapsed .sidebar-data-action { width: auto; padding-left: initial; padding-right: initial; }
  .workspace-app.sidebar-collapsed .sidebar-refresh { width: auto; }
}

@media (max-width: 420px) {
  .overview-metric > strong { font-size: 19px; }.metric-topline { font-size: 11px; }.overview-counts { font-size: 10px; }.workspace-content { width: calc(100% - 26px); }.workspace-footer { width: calc(100% - 26px); }
}

/* 统一保证 hidden 属性一定生效：CSS 里的 display 不能把 [hidden] 顶掉。 */
[hidden] { display: none !important; }