:root {
  --bg: #f5f6f8; --panel: #fff; --ink: #202b36; --text: #202b36;
  --muted: #596775; --line: #dce2e8; --brand: #245ac2; --blue: #245ac2;
  --soft: #edf4ff; --ok: #14764b; --warn: #946000; --bad: #b3262e;
}
body { font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font-family: inherit; font-size: 14px; letter-spacing: 0; }
button { min-height: 36px; border-radius: 5px; font-weight: 500; }
button.secondary { background: #f1f4f7; color: #344353; border: 1px solid #d9e1e8; }
button:hover:not(:disabled) { filter: brightness(.97); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #245ac2; outline-offset: 2px;
}
input, select, textarea { min-height: 36px; padding: 7px 10px; border-radius: 5px; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 16px; padding: 0; accent-color: var(--brand); flex-shrink: 0; }
input[readonly] { background: #f4f6f8; color: #455565; border-color: transparent; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
textarea { min-height: 80px; line-height: 1.55; }
label { font-size: 13px; font-weight: 500; color: #435363; min-width: 0; }
h2 { font-size: 16px; line-height: 1.4; }
h3, .panel-head h3 { font-size: 14px; line-height: 1.4; margin: 0; }
.hint { color: var(--muted); font-size: 12px; }
.app { grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { background: #fff; color: var(--ink); border-right: 1px solid var(--line); padding: 12px 10px; }
.brand { grid-template-columns: 44px minmax(0, 1fr); padding: 4px 4px 14px; border-color: var(--line); }
.brand-logo-wrap { width: 44px; height: 44px; border-color: var(--line); }
.brand strong { font-size: 14px; }
.brand span, .sidebar .hint { color: var(--muted); font-size: 11px; }
.nav { gap: 9px; }
.nav-group { border-color: #edf0f3; gap: 4px; }
.nav-title, .nav-title::after { color: #677583; font-weight: 600; }
.nav button { color: #364654; min-height: 34px; padding-left: 12px; font-size: 13px; }
.nav button.active { color: #194d9f; background: #eaf2ff; border-color: #d3e2fa; font-weight: 600; }
.nav button:hover { color: #194d9f; background: #f0f5fc; }
.userbox { background: #f4f6f8; border-radius: 6px; }
.topbar { min-height: 60px; padding: 10px 20px; gap: 12px; grid-template-columns: minmax(150px, .6fr) minmax(280px, 1.4fr) auto; }
.topbar h1 { font-size: 20px; line-height: 1.4; }
.global-search { max-width: 560px; }
.global-search input, .global-search button { min-height: 36px; }
.content { padding: 18px 20px 32px; min-width: 0; }
.view { gap: 16px; min-width: 0; }
.view > * { min-width: 0; }
#departmentReportPanels { display: grid; gap: 16px; min-width: 0; }
.panel { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; min-width: 0; }
.panel .panel { background: transparent; border-top: 1px solid var(--line); }
.panel-head { min-height: 50px; padding: 12px 16px; flex-wrap: wrap; align-items: center; }
.panel-head > div { min-width: 0; }
.panel-head > div:first-child { flex: 1 1 220px; }
.panel-head > .toolbar { flex: 0 1 auto; }
.panel-body { padding: 16px; }
.toolbar { gap: 8px; }
.toolbar > input, .toolbar > select { max-width: 100%; width: 240px; }
.toolbar > input.ui-search { width: 300px; }
.toolbar label.compact input[type="date"] { width: 170px; }
.form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid input, .form-grid select { max-width: 320px; }
.form-grid .full input, .form-grid .full textarea { max-width: 100%; }
input.ui-number { max-width: 160px; font-variant-numeric: tabular-nums; text-align: right; }
input[type="date"], input[type="datetime-local"] { max-width: 220px; font-variant-numeric: tabular-nums; }
input.ui-person { max-width: 240px; }
input.ui-code { font-variant-numeric: tabular-nums; }
.ui-binary-label, .form-grid label.ui-binary-label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.ui-binary-label input[type="checkbox"], .ui-binary-label input[type="radio"] { flex: 0 0 16px; }
.ui-required > .ui-label-caption::after { content: " *"; color: var(--bad); }
.ui-field-error { display: block; color: var(--bad); font-size: 12px; line-height: 1.4; }
.ui-details { border: 0; border-top: 1px solid var(--line); margin: 8px 0; padding-top: 8px; }
.ui-details > summary { color: #40566d; cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
.ui-details[open] > summary { margin-bottom: 10px; }
.scan-zone { background: #f5f9ff; border: 1px solid #c9dbf3; padding: 16px; border-radius: 6px; gap: 12px; }
.scan-zone h3 { font-size: 15px; color: #243f60; }
.scan-zone .scan-main input { min-height: 50px; padding: 10px 12px; font-size: 20px; font-weight: 600; border-width: 2px; }
.scan-zone .scan-line { grid-template-columns: minmax(220px, 1fr) 120px auto; gap: 12px; }
.scan-zone .internal-code-line { grid-template-columns: minmax(220px, 1fr) auto; background: #fffaf0; border: 1px solid #ead2a3; }
.scan-zone .internal-code-main input { min-height: 52px; font-size: 20px; }
.scan-zone .internal-code-line button { min-height: 44px; font-size: 14px; }
.scan-zone .scan-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scan-zone .scan-extra input { font-size: 14px; }
.scan-zone button[type="submit"] { min-height: 40px; }
.scan-zone input[readonly] { background: #eef3f8; }
.sales-price-head { position: sticky; top: 0; z-index: 4; background: #fff; }
.sales-price-head .toolbar { justify-content: flex-end; }
#salesOutForm > .panel { overflow: visible; margin-top: 12px !important; }
#salesOutPendingBody td { vertical-align: middle; }
#salesOutPendingBody input { width: 144px !important; min-width: 144px !important; }
#salesOutPendingBody [data-sales-zero-reason] { width: 180px !important; min-width: 180px !important; }
.workspace-nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
.workspace-nav button { background: transparent; color: #526171; border-radius: 4px; border: 1px solid transparent; padding: 0 14px; }
.workspace-nav button[aria-selected="true"] { color: #194d9f; background: #eaf2ff; border-color: #c9dbf3; font-weight: 600; }
.workspace-nav button.ui-danger-tab { color: var(--bad); }
.workspace-pane { display: grid; gap: 16px; min-width: 0; }
.workspace-pane[hidden], .workspace-nav button[hidden], .ui-table-tools[hidden], .ui-page-hidden, .ui-column-hidden { display: none !important; }
.ui-list-first { display: flex; flex-direction: column; }
.ui-list-first > .panel-head { order: 0; }
.ui-list-first > .table-wrap { order: 1; }
.ui-list-first > form { order: 2; border-top: 1px solid var(--line); }
.table-wrap { max-height: 64vh; overflow: auto; min-width: 0; scrollbar-gutter: stable; }
th, td { padding: 10px 12px; font-size: 13px; line-height: 1.55; vertical-align: middle; border-color: #e8edf1; }
th { background: #f1f4f7; color: #455565; font-weight: 600; white-space: nowrap; }
td { overflow-wrap: anywhere; }
tbody tr:hover td { background: #f6f9fd; }
table[data-ui-wide] { min-width: 1040px; }
table[data-ui-wide] th:first-child, table[data-ui-wide] td:first-child { position: sticky; left: 0; z-index: 2; min-width: 145px; max-width: 220px; background: #fff; box-shadow: 1px 0 0 var(--line); }
table[data-ui-wide] th:first-child { z-index: 3; background: #f1f4f7; }
.ui-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.ui-cell-detail { max-width: 300px; min-width: 160px; }
.ui-cell-detail summary { cursor: pointer; color: #40566d; }
.ui-cell-detail > div { white-space: pre-wrap; margin-top: 8px; }
.ui-table-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 12px; }
.ui-table-tools button { min-width: 32px; min-height: 30px; padding: 0 8px; font-size: 13px; }
.ui-table-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.ui-table-tools select { width: 74px; min-height: 30px; padding: 3px 5px; font-size: 12px; }
.ui-table-tools .ui-page-summary { margin-right: auto; }
.ui-columns { position: relative; }
.ui-columns > summary { cursor: pointer; list-style: none; color: #40566d; padding: 6px; }
.ui-columns-list { position: absolute; top: 36px; right: 0; min-width: 210px; max-height: 320px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 4px 18px #18243022; z-index: 8; display: grid; gap: 10px; }
.ui-columns-list label { white-space: nowrap; }
.ui-columns-list input { width: 16px; min-height: 16px; }
.stat, .task-entry { box-shadow: none; border-color: #e1e7ed; border-radius: 6px; }
.stat strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.role-home, .scan-shortcuts, .type-banner { background: #f4f8fc; border-color: #d7e2ee; }
.role-home-copy h2 { font-size: 18px; }
.status, .pill { min-height: 23px; font-size: 12px; font-weight: 500; }
.status.done { color: #116740; background: #e9f5ee; }
.status.warn { color: #855600; background: #fff4da; }
.status.bad { color: #a3222b; background: #fcecee; }
.dialog-head h2, .modal-card h2 { font-size: 16px; }
.modal-card { max-height: 90vh; overflow: auto; }
.dialog-actions { position: sticky; bottom: 0; z-index: 4; }
.toast { font-size: 13px; line-height: 1.6; max-width: min(440px, calc(100vw - 28px)); }
.ui-permission-group { border: 0; border-top: 1px solid var(--line); padding: 12px 0; margin: 8px 0; }
.ui-permission-group legend { font-size: 13px; font-weight: 600; color: #40566d; }
.ui-permission-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ui-permission-items label { display: flex !important; align-items: flex-start !important; gap: 8px !important; line-height: 1.5; font-size: 13px !important; }
.ui-password-line { display: flex; gap: 8px; }
.ui-password-line input { min-width: 0; flex: 1; }
.ui-password-line button { flex-shrink: 0; width: 40px; padding: 0; }
@media (max-width: 1150px) {
  .topbar { grid-template-columns: 1fr auto; }
  .global-search { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; max-width: none; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-zone .scan-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-permission-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 10px 12px; }
  .brand { grid-template-columns: 40px minmax(0, 1fr) 40px; padding-bottom: 8px; }
  .brand-logo-wrap { width: 40px; height: 40px; }
  .mobile-nav-toggle { color: #245ac2; border-color: #cfdae8; background: #edf4ff; }
  .topbar { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .global-search { grid-row: auto; grid-column: auto; width: 100%; }
  .content { padding: 12px; }
  .panel-head { align-items: flex-start; gap: 10px; padding: 12px; }
  .panel-head > div:first-child, .panel-head > .toolbar { flex: 1 1 100%; }
  .panel-body { padding: 12px; }
  button { min-height: 42px; }
  .workspace-nav button { min-height: 42px; }
  .toolbar > input, .toolbar > input.ui-search, .toolbar > select { width: 100%; }
  .form-grid, .form-grid.two, .scan-zone .scan-extra, .scan-zone .scan-line, .scan-zone .internal-code-line { grid-template-columns: minmax(0, 1fr); }
  .form-grid input, .form-grid select, input.ui-number, input.ui-person, input[type="date"], input[type="datetime-local"] { max-width: 100%; }
  .scan-zone .scan-main input { font-size: 18px; min-height: 48px; }
  .scan-zone .scan-line button { justify-self: start; }
  .table-wrap { max-height: 60vh; }
  .ui-permission-items { grid-template-columns: minmax(0, 1fr); }
  .stats, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-tables, .detail { grid-template-columns: minmax(0, 1fr); }
  #stats .panel-body.grid { grid-template-columns: minmax(0, 1fr) !important; }
}