:root {
  --bg: #f4f7fb;
  --ink: #1d2433;
  --muted: #6b7280;
  --line: #e1e7f0;
  --panel: #fff;
  --accent: #4f46e5;
  --accent-dark: #4338ca;
  --accent-soft: #eef0ff;
  --danger: #c0362c;
  --shadow: 0 12px 34px rgba(31,42,68,.07);
  --soft-shadow: 0 6px 18px rgba(31,42,68,.05);
  --radius: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", Arial, sans-serif; background:
  radial-gradient(circle at 20% 0%, rgba(79,70,229,.08), transparent 26%),
  linear-gradient(135deg, #fbfcff 0%, var(--bg) 62%, #eef3fb 100%); color: var(--ink); line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; background: var(--accent); color: #fff; padding: 9px 13px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button:hover:not(:disabled) { background: var(--accent-dark); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.danger { background: #fff1f0; color: var(--danger); border: 1px solid #f1c3bd; }
button.danger:hover:not(:disabled) { background: #ffe7e4; }
button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
button.ghost:hover:not(:disabled) { background: #f7f8ff; border-color: #c6ccf8; color: var(--accent); }
button, input, select, textarea { min-height: 40px; }
input, select, textarea { width: 100%; border: 1px solid #cfd7e6; border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
input:hover, select:hover, textarea:hover { border-color: #aeb8cb; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
input:disabled, select:disabled, textarea:disabled { background: #f1f3f8; color: #8c94a5; cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.5; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.required { color: var(--danger); font-weight: 700; }
.field-invalid input, .field-invalid select, .field-invalid textarea, .field-invalid .search-choice input { border-color: #d92d20; background: #fff8f7; box-shadow: 0 0 0 3px rgba(217,45,32,.1); }
.field-invalid::after { content: attr(data-error); color: #d92d20; font-size: 12px; font-weight: 700; }
.hidden { display: none !important; }
.search-choice { display: grid; }
.search-choice input { width: 100%; }
.search-choice input:invalid { border-color: #d92d20; box-shadow: 0 0 0 2px rgba(217,45,32,.08); }
.long-select { display: grid; gap: 6px; }
.long-select-search { position: relative; }
.long-select-search input { padding-right: 72px; background: #f7f8fc; }
.long-select-search span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0; font-size: 24px; }
.login-card p, .hint { margin: 0; color: var(--muted); font-size: 13px; }

.app { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.app.sidebar-collapsed { grid-template-columns: 116px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background:
  radial-gradient(circle at 10% 0%, rgba(99,102,241,.28), transparent 30%),
  linear-gradient(180deg, #172033 0%, #111827 100%); color: #fff; padding: 22px 16px; display: grid; align-content: start; gap: 18px; scrollbar-width: thin; }
.brand { display: grid; gap: 4px; }
.brand strong { font-size: 20px; letter-spacing: .02em; }
.brand span { color: #aab5cc; font-size: 13px; }
.logout-btn { margin-top: 8px; background: rgba(255,255,255,.96); color: #27324a; border: 1px solid rgba(255,255,255,.28); width: max-content; }
.side-toggle-btn { width: 38px; min-height: 34px; padding: 0; justify-self: end; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #e5e7eb; border-radius: 999px; font-size: 22px; line-height: 1; }
.side-toggle-btn:hover:not(:disabled) { background: rgba(129,140,248,.24); color: #fff; }
.company-picker { color: #c7d0e3; }
.company-picker select { width: 100%; margin-top: 6px; }
nav { display: grid; gap: 5px; }
nav button { position: relative; background: transparent; text-align: left; color: #cbd3e5; font-weight: 600; border-radius: 12px; }
nav button:not(.nav-toggle).active, nav button:not(.nav-toggle):hover { background: rgba(129,140,248,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
nav button:not(.nav-toggle).active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #a5b4fc; }
.nav-group { display: grid; gap: 6px; margin: 10px 0 4px; }
.nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; padding: 8px 12px 8px 22px; border-radius: 12px; color: rgba(226,232,240,.9); background: transparent; box-shadow: none; font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.nav-toggle::before { content: ""; position: absolute; left: 5px; top: 11px; bottom: 11px; width: 4px; border-radius: 999px; background: rgba(165,180,252,.72); }
.nav-toggle:hover:not(:disabled) { background: rgba(255,255,255,.045); color: #eef2ff; box-shadow: none; }
.nav-toggle .chevron { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; color: rgba(203,213,229,.9); background: rgba(255,255,255,.06); font-size: 13px; line-height: 1; transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.nav-toggle:hover .chevron { background: rgba(165,180,252,.16); color: #fff; }
.nav-group:not(.open) .nav-toggle .chevron { transform: rotate(-90deg); }
.nav-submenu { display: none; gap: 5px; padding-left: 12px; border-left: 1px solid rgba(165,180,252,.16); }
.nav-group.open .nav-submenu { display: grid; }
.nav-group .nav-submenu button { min-height: 38px; padding: 8px 12px 8px 18px; border-radius: 12px; font-size: 14px; color: rgba(226,232,240,.86); }
.nav-group .nav-submenu button:hover { background: rgba(129,140,248,.12); }
.nav-group .nav-submenu button.active { background: linear-gradient(135deg, rgba(99,102,241,.92), rgba(79,70,229,.78)); color: #fff; box-shadow: 0 10px 24px rgba(17,24,39,.18), inset 0 0 0 1px rgba(255,255,255,.08); }
.app.sidebar-collapsed .side { padding: 18px 12px; gap: 12px; overflow-x: hidden; }
.app.sidebar-collapsed .brand strong,
.app.sidebar-collapsed .brand span,
.app.sidebar-collapsed .logout-btn,
.app.sidebar-collapsed .company-picker,
.app.sidebar-collapsed .nav-toggle .chevron,
.app.sidebar-collapsed nav button span:not(.chevron) { display: none; }
.app.sidebar-collapsed .side-toggle-btn { justify-self: center; transform: rotate(180deg); }
.app.sidebar-collapsed nav { gap: 9px; }
.app.sidebar-collapsed nav button,
.app.sidebar-collapsed .nav-toggle { width: 92px; min-height: 44px; padding: 0; display: grid; place-items: center; text-align: center; border-radius: 15px; font-size: 0; line-height: 1; }
.app.sidebar-collapsed nav button[data-view]::after,
.app.sidebar-collapsed .nav-toggle::after { content: attr(data-short); font-size: 15px; font-weight: 900; color: inherit; white-space: nowrap; letter-spacing: .02em; }
.app.sidebar-collapsed nav button:not(.active):not(.nav-toggle) { background: rgba(255,255,255,.035); color: rgba(226,232,240,.82); }
.app.sidebar-collapsed nav button:not(.nav-toggle).active { background: linear-gradient(135deg, rgba(99,102,241,.84), rgba(79,70,229,.68)); box-shadow: inset 3px 0 0 rgba(165,180,252,.9), 0 10px 28px rgba(0,0,0,.16); }
.app.sidebar-collapsed .nav-toggle { min-height: 24px; margin-top: 2px; border-radius: 8px; background: transparent; color: rgba(203,213,225,.66); box-shadow: none; }
.app.sidebar-collapsed .nav-toggle::after { font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.app.sidebar-collapsed .nav-toggle:hover { background: rgba(129,140,248,.12); color: #eef2ff; }
.app.sidebar-collapsed .nav-toggle::before { display: none; }
.app.sidebar-collapsed .nav-group { margin: 2px 0 4px; gap: 4px; }
.app.sidebar-collapsed .nav-group.open .nav-submenu { display: grid; gap: 4px; padding-left: 0; border-left: 0; }
.app.sidebar-collapsed .nav-group:not(.open) .nav-submenu { display: none; }
.app.sidebar-collapsed .nav-group .nav-submenu button { width: 92px; min-height: 31px; padding: 0; display: grid; place-items: center; border-radius: 10px; font-size: 0; background: rgba(255,255,255,.028); color: rgba(226,232,240,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.app.sidebar-collapsed .nav-group .nav-submenu button::after { content: attr(data-short); font-size: 12px; font-weight: 850; line-height: 1; letter-spacing: .02em; }
.app.sidebar-collapsed .nav-group .nav-submenu button:hover { background: rgba(129,140,248,.13); color: #fff; }
.app.sidebar-collapsed .nav-group .nav-submenu button.active { background: linear-gradient(135deg, rgba(99,102,241,.92), rgba(79,70,229,.72)); color: #fff; box-shadow: inset 3px 0 0 rgba(199,210,254,.9), 0 8px 20px rgba(0,0,0,.14); }

main { min-width: 0; padding: 28px; }
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -28px -28px 20px; padding: 22px 28px 16px; background: rgba(244,247,251,.86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(225,231,240,.7); }
.top span { color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); font-size: 12px; }
.top h2 { margin: 4px 0 0; font-size: 27px; letter-spacing: -.03em; }
.export-link { color: var(--accent); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.export-link:hover { background: var(--accent-soft); border-color: #c5c9fb; }
.view { display: none; gap: 18px; min-width: 0; }
.view.active { display: grid; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.metrics article, .panel { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.metrics article { padding: 16px 18px; border-top: 3px solid #c7ccff; }
.metrics span { color: var(--muted); font-size: 13px; }
.metrics strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.02em; }
.task-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px; border: 1px solid #dfe5f6; border-radius: 22px; background:
  radial-gradient(circle at 10% 20%, rgba(79,70,229,.13), transparent 26%),
  linear-gradient(135deg, #fff 0%, #f6f7ff 58%, #eef7ff 100%); box-shadow: var(--soft-shadow); }
.task-hero h3 { margin: 6px 0; font-size: 24px; letter-spacing: -.03em; }
.task-hero p { margin: 0; color: var(--muted); max-width: 780px; }
.task-metrics { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; }
.task-metrics article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--soft-shadow); }
.task-metrics span { color: var(--muted); font-size: 13px; }
.task-metrics strong { display: block; margin-top: 8px; font-size: 28px; color: var(--accent); }
.task-board-panel { padding: 0; overflow: hidden; }
.task-board-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 18px; border-bottom: 1px solid var(--line); background: rgba(248,250,255,.75); }
.task-board-head h3 { margin-bottom: 4px; }
.task-board-head p { margin: 0; color: var(--muted); font-size: 13px; }
.task-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 720px; }
.task-filter button { min-height: 34px; padding: 7px 11px; background: #fff; color: #35405a; border: 1px solid #dfe3f2; box-shadow: none; }
.task-filter button.active, .task-filter button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px); gap: 0; min-height: 500px; }
.task-list { display: grid; align-content: start; gap: 10px; padding: 18px; max-height: 680px; overflow: auto; background: #fbfcff; }
.task-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.task-card:hover, .task-card.active { border-color: #bfc5ff; box-shadow: 0 10px 24px rgba(79,70,229,.1); transform: translateY(-1px); }
.task-card h4 { margin: 8px 0 4px; font-size: 17px; }
.task-card p { margin: 0; color: var(--muted); font-size: 13px; }
.task-card-meta { display: grid; gap: 6px; justify-items: end; align-content: center; white-space: nowrap; }
.task-card-meta strong { font-size: 17px; }
.task-card-meta span { color: var(--muted); font-size: 12px; }
.task-tag { display: inline-flex; width: max-content; align-items: center; border-radius: 999px; padding: 4px 9px; background: #eef2ff; color: var(--accent); font-size: 12px; font-weight: 800; }
.task-tag.approval { background: #fff7ed; color: #c2410c; }
.task-tag.execution { background: #eff6ff; color: #1d4ed8; }
.task-tag.acceptance, .task-tag.confirm { background: #ecfdf5; color: #047857; }
.task-tag.payment, .task-tag.invoice { background: #f5f3ff; color: #6d28d9; }
.task-tag.inspection { background: #fef2f2; color: #b91c1c; }
.task-detail { display: grid; align-content: start; gap: 12px; padding: 20px; border-left: 1px solid var(--line); background: #fff; }
.task-detail > strong { font-size: 21px; }
.task-detail p { margin: 0; color: var(--muted); }
.task-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.task-detail-grid span { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f8faff; word-break: break-word; }
.task-detail-grid b { color: var(--muted); font-size: 12px; }
.task-detail-note { padding: 13px; border-radius: 14px; background: #f7f8fc; color: #35405a; line-height: 1.65; white-space: pre-wrap; }
.panel { padding: 18px; overflow: hidden; min-width: 0; }
.panel h3 { position: relative; margin: 0 0 15px; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.panel > h3::before { content: ""; display: inline-block; width: 4px; height: 16px; margin-right: 8px; border-radius: 999px; background: var(--accent); vertical-align: -2px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; align-items: end; }
.grid-form label { align-self: stretch; display: block; }
.grid-form label > input, .grid-form label > select, .grid-form label > textarea, .grid-form label > .search-choice, .grid-form label > .long-select, .grid-form label > .date-range { margin-top: 6px; }
.grid-form button { align-self: end; }
.inline-form { display: flex; gap: 12px; align-items: end; margin-bottom: 14px; }
.filter-row { margin: 0 0 12px; display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #f8faff; }
.filter-row input, .filter-row select { width: min(220px, 100%); }
.choice-filter { flex-wrap: wrap; align-items: center; }
.allocation-help { align-self: center; color: var(--muted); background: #f7f8fc; border: 1px solid var(--line); border-radius: 6px; min-height: 38px; padding: 9px 10px; font-size: 13px; }
.filter-period { display: none; }
.filter-period.active { display: grid; }
.filter-row .date-range { width: min(300px, 100%); }
.recon-period { display: none; }
.recon-period.active { display: grid; }
.date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wide { grid-column: span 2; }
.items { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #f8faff; }
.items-head, .total-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.bulk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #f8faff; }
.bulk-toolbar span { color: var(--muted); font-weight: 700; margin-right: auto; }
.bulk-toolbar .bulk-delete-primary { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 700; }
.bulk-payment-card { width: min(1800px, 98vw); max-height: 94vh; overflow: auto; }
.bulk-payment-card .modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.bulk-payment-lines { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; overflow: auto; background: #fff; }
.bulk-payment-lines table { min-width: 1320px; }
.bulk-payment-lines input,
.bulk-payment-lines select { min-width: 150px; }
.bulk-payment-lines td:first-child { min-width: 160px; }
.bulk-payment-lines td:nth-child(4),
.bulk-payment-lines td:nth-child(5),
.bulk-payment-lines td:nth-child(6) { min-width: 170px; }
.bulk-payment-lines td:nth-child(7) { min-width: 260px; }
.bulk-payment-summary { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8faff; color: var(--muted); font-weight: 700; }
.bulk-payment-summary b { color: var(--text); font-size: 18px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.inspection-print-actions { justify-content: flex-start; }
.inspection-print-actions .muted { margin-right: auto; font-weight: 700; }
.master-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.master-head h3 { margin-bottom: 4px; }
.master-head p { margin: 0; }
.master-head input { max-width: 360px; }
.master-layout { display: grid; grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); gap: 14px; align-items: start; }
.master-list { display: grid; gap: 8px; max-height: 640px; overflow: auto; padding-right: 4px; }
.master-customer-item { display: grid; gap: 4px; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; box-shadow: none; }
.master-customer-item:hover, .master-customer-item.active { background: var(--accent-soft); border-color: #c5c9fb; color: var(--ink); }
.master-customer-item strong { font-size: 14px; }
.master-customer-item span, .master-customer-item small { color: var(--muted); font-size: 12px; }
.master-detail { display: grid; gap: 14px; min-width: 0; }
.master-detail-card, .empty-card { border: 1px solid var(--line); border-radius: 9px; background: #f7f8fc; padding: 14px; }
.master-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.master-detail-head > div:first-child { display: grid; gap: 4px; }
.master-detail-head strong { font-size: 18px; }
.master-detail-head span { color: var(--muted); font-size: 13px; }
.master-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.master-info-grid span { display: grid; gap: 3px; color: var(--ink); word-break: break-word; }
.master-info-grid b { color: var(--muted); font-size: 12px; }
.toolbar.compact { margin: 0; gap: 8px; }
.toolbar.compact button { min-height: 34px; padding: 7px 10px; }
.module-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid #dfe5f6; border-radius: 20px; background:
  radial-gradient(circle at 12% 20%, rgba(79,70,229,.12), transparent 30%),
  linear-gradient(135deg, #fff 0%, #f7f8ff 58%, #eef5ff 100%); box-shadow: var(--soft-shadow); }
.module-hero h3 { margin: 4px 0 6px; font-size: 22px; letter-spacing: -.03em; }
.module-hero p { margin: 0; color: var(--muted); font-size: 13px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; width: max-content; border: 1px solid #d8dcff; border-radius: 999px; background: #fff; color: var(--accent); padding: 4px 9px; font-size: 12px; font-weight: 800; }
.module-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 520px; }
.module-tabs button { background: #fff; color: #35405a; border: 1px solid #dfe3f2; min-height: 36px; padding: 8px 12px; box-shadow: none; }
.module-tabs button:hover:not(:disabled), .module-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.compact-tabs { max-width: 620px; }
.compact-tabs button { padding-inline: 10px; }
.part-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.part-page-head h3 { margin-bottom: 4px; }
.part-page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.part-flow-steps { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); gap: 8px; margin: 0 0 14px; }
.part-flow-steps span { border: 1px solid var(--line); border-radius: 6px; background: #f7f8fc; color: var(--muted); text-align: center; padding: 8px 10px; font-size: 13px; }
.part-flow-steps span.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.part-process-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; padding: 14px; background: linear-gradient(135deg, #fff, #f7f8ff); }
.part-process-card { position: relative; display: grid; gap: 5px; min-height: 92px; padding: 13px; border: 1px solid #dfe3f2; border-radius: 14px; background: #fff; box-shadow: var(--soft-shadow); color: inherit; text-align: left; cursor: pointer; }
.part-process-card b { color: var(--ink); font-size: 14px; }
.part-process-card em { position: absolute; right: 12px; top: 12px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #eef2ff; color: var(--accent); font-style: normal; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.part-process-card span { color: var(--muted); font-size: 12px; }
.part-process-card.active { border-color: #b9bfff; background: var(--accent-soft); box-shadow: 0 10px 24px rgba(79,70,229,.12); }
.part-process-card.active em { background: var(--accent); color: #fff; }
.part-workbench-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border: 1px solid #e1e6f4; border-radius: 14px; background: #fff; color: var(--muted); }
.part-workbench-summary strong { color: var(--ink); font-size: 17px; }
.part-request-form { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.part-request-form label.wide { grid-column: span 2; }
.part-request-form .part-items-block { grid-column: 1 / -1; }
.part-request-form > button[type="submit"] { grid-column: 1 / -1; justify-self: end; min-width: 260px; }
.part-match-panel, .part-quick-panel { background: linear-gradient(135deg, #fff, #f8faff); }
.part-quick-panel { padding: 16px 18px; }
.part-quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.part-quick-actions button { min-width: 132px; }
.part-match-controls { grid-template-columns: repeat(4, minmax(180px, 1fr)); align-items: end; }
.part-match-controls .wide { grid-column: span 2; }
.part-match-table { min-width: 1320px; }
.part-match-table th:first-child, .part-match-table td:first-child { width: 42px; text-align: center; }
.part-match-table input[type="checkbox"] { min-height: 18px; width: 18px; }
.badge.soft { background: #f1f5f9; color: #475569; }
.yard-layout { display: grid; grid-template-columns: minmax(420px, 1.35fr) minmax(300px, .75fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.yard-map-card, .yard-detail-card { border: 1px solid var(--line); border-radius: 16px; background: #f8faff; padding: 14px; min-width: 0; box-shadow: var(--soft-shadow); }
.yard-map-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.yard-map-head strong { font-size: 16px; }
.yard-map-head span { color: var(--muted); font-size: 12px; }
.yard-map-head button { min-height: 34px; padding: 7px 12px; white-space: nowrap; }
.yard-map { position: relative; min-height: 360px; overflow: hidden; border: 1px solid #dfe3ec; border-radius: 16px; background:
  radial-gradient(circle at 18% 22%, rgba(79,70,229,.12), transparent 20%),
  radial-gradient(circle at 78% 70%, rgba(14,165,233,.12), transparent 24%),
  linear-gradient(135deg, #eef2ff 0%, #f8fafc 58%, #eff6ff 100%);
}
.yard-map-card.map-expanded { position: fixed; inset: 20px; z-index: 80; display: grid; grid-template-rows: auto 1fr; background: #fff; padding: 18px; }
.yard-map-card.map-expanded .yard-map { min-height: 0; height: calc(100vh - 102px); }
.yard-map-card.map-expanded .yard-map-head strong { font-size: 20px; }
.yard-map-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(#d8ddec 1px, transparent 1px), linear-gradient(90deg, #d8ddec 1px, transparent 1px); background-size: 48px 48px; }
.yard-map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.yard-map-status { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 10px 12px; border: 1px solid #fed7aa; border-radius: 12px; background: rgba(255,247,237,.95); color: #9a3412; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px rgba(31,42,68,.10); }
.yard-map.amap-ready { background: #eef2ff; }
.yard-map.amap-ready .amap-logo, .yard-map.amap-ready .amap-copyright { z-index: 2; }
.yard-map-info { display: grid; gap: 4px; min-width: 190px; color: var(--ink); }
.yard-map-info strong { font-size: 14px; }
.yard-map-info span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.yard-pin { position: absolute; z-index: 1; transform: translate(-16px, -16px); display: inline-flex; align-items: center; gap: 7px; max-width: 190px; min-height: 34px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid rgba(79,70,229,.22); background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 24px rgba(31,42,68,.13); }
.yard-pin:hover, .yard-pin.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.yard-pin.disabled { opacity: .58; filter: grayscale(.35); }
.yard-pin span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.yard-pin:hover span, .yard-pin.active span { background: #fff; color: var(--accent); }
.yard-pin strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.yard-side { display: grid; align-content: start; gap: 10px; min-width: 0; }
.yard-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.yard-list-item { display: grid; gap: 4px; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; box-shadow: none; }
.yard-list-item:hover, .yard-list-item.active { background: var(--accent-soft); border-color: #c5c9fb; color: var(--ink); }
.yard-list-item span, .yard-list-item small { color: var(--muted); font-size: 12px; }
.yard-detail-grid { display: grid; grid-template-columns: minmax(640px, 1fr) minmax(360px, 420px); gap: 14px; align-items: start; }
.yard-detail-grid > form { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px; box-shadow: var(--soft-shadow); }
.yard-detail-grid .part-request-form { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.yard-detail-grid .part-request-form label.wide { grid-column: span 2; }
.part-items-block { padding: 0; overflow: hidden; background: #fff; }
.part-items-block .items-head, .part-items-block .total-line { padding: 12px; margin: 0; background: #f7f8fc; }
.part-edit-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.part-edit-table { min-width: 0; width: 100%; table-layout: fixed; }
.part-edit-table th:nth-child(1) { width: 28%; }
.part-edit-table th:nth-child(2) { width: 9%; }
.part-edit-table th:nth-child(3) { width: 8%; }
.part-edit-table th:nth-child(4) { width: 11%; }
.part-edit-table th:nth-child(5) { width: 11%; }
.part-edit-table th:nth-child(6) { width: 27%; }
.part-edit-table-wide { min-width: 1180px; table-layout: fixed; }
.part-edit-table-wide th:nth-child(1) { width: 22%; }
.part-edit-table-wide th:nth-child(2), .part-edit-table-wide th:nth-child(3), .part-edit-table-wide th:nth-child(4), .part-edit-table-wide th:nth-child(5), .part-edit-table-wide th:nth-child(6), .part-edit-table-wide th:nth-child(7) { width: 10%; }
.part-edit-table-wide th:nth-child(8) { width: 20%; }
.part-row td { vertical-align: top; background: #fff; }
.part-row textarea { min-height: 96px; }
.part-row input, .part-row textarea { font-size: 15px; }
.part-row button { background: #fff1f0; color: var(--danger); border: 1px solid #f1c3bd; white-space: nowrap; }
.part-card-list { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcff; }
.part-card-list .part-row { display: grid; grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 1fr)); gap: 12px; align-items: end; padding: 14px; border: 1px solid #dfe5f3; border-radius: 14px; background: #fff; box-shadow: var(--soft-shadow); }
.part-card-list label { min-width: 0; color: #536075; font-weight: 700; }
.part-card-list textarea { min-height: 92px; }
.part-card-name textarea, .part-card-note textarea { height: 92px; }
.part-card-name { grid-row: span 2; }
.part-card-note { grid-column: span 2; }
.part-card-delete { align-self: end; justify-self: end; min-width: 92px; }
.part-record-table { min-width: 1100px; }
.part-summary { display: grid; gap: 5px; min-width: 260px; }
.part-summary-line { display: grid; gap: 2px; }
.part-summary-line span { color: var(--muted); }
.part-summary-all { max-height: 180px; overflow: auto; padding-right: 4px; }
.part-summary-all .part-summary-line { padding: 2px 0; border-bottom: 1px dashed rgba(148, 163, 184, 0.28); }
.part-summary-all .part-summary-line:last-child { border-bottom: 0; }
.part-edit-modal { width: min(1680px, 99vw); max-height: 96vh; padding: 22px; }
.part-edit-modal #editFields { grid-template-columns: repeat(4, minmax(210px, 1fr)); align-items: start; gap: 12px 14px; }
.part-edit-modal .wide, .part-edit-modal .part-items-block { grid-column: 1 / -1; }
.part-edit-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #dfe5f3; border-radius: 14px; background: #f8faff; }
.part-edit-section strong { color: var(--ink); font-size: 15px; }
.part-edit-section span { color: var(--muted); font-size: 12px; }
.part-edit-summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; padding: 12px; border: 1px solid #dfe3f2; border-radius: 14px; background: linear-gradient(135deg, #f8faff, #eef2ff); }
.part-edit-summary span { display: grid; gap: 4px; min-width: 0; color: var(--ink); font-weight: 800; }
.part-edit-summary b { color: var(--muted); font-size: 12px; font-weight: 700; }
.qj-project-row td { background: #f7f8ff; font-weight: 700; }
.qj-project-row:hover td { background: #eef1ff; }
.qj-toggle { min-height: 30px; padding: 5px 10px; margin-right: 8px; }
.qj-detail-row td { background: #fff; color: #334155; }
.qj-detail-row td:first-child { padding-left: 28px; }
.permission-group { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f7f8fc; }
.permission-group strong { font-size: 13px; }
.import-failures { margin-top: 14px; border: 1px solid #f1c3bd; border-radius: 8px; padding: 12px; background: #fff8f7; }
.import-failures .items-head { margin-bottom: 10px; }
.import-failures table { min-width: 980px; }
.import-error-reason { color: var(--danger); font-weight: 700; min-width: 240px; }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px 12px; }
.check-grid label { display: flex; align-items: center; gap: 8px; color: var(--ink); min-height: 30px; }
.check-grid input { min-height: auto; width: auto; }
.check-option { display: flex; align-items: center; gap: 8px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff8e8; }
.check-option input { width: auto; min-height: auto; }
.table-wrap { max-width: 100%; min-width: 0; max-height: calc(100vh - 260px); overflow: auto; border: 1px solid #e4eaf3; border-radius: 14px; background: #fff; scrollbar-gutter: stable; }
.table-wrap table { width: max-content; min-width: 100%; }
table { width: 100%; min-width: 860px; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 13px; }
th { position: sticky; top: 0; z-index: 12; background: #f6f8fc; color: #374151; white-space: nowrap; font-weight: 800; }
.table-wrap th:last-child, .table-wrap td:last-child { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -8px 0 14px rgba(31,42,68,.08); }
.table-wrap th:last-child { z-index: 18; background: #f6f8fc; }
tbody tr:hover td:last-child { background: #f5f6ff; }
.green-trade-table { min-width: 1680px; }
.green-trade-table th, .green-trade-table td { vertical-align: middle; }
.green-trade-table th:first-child,
.green-trade-table td:first-child { position: sticky; left: 0; z-index: 10; width: 48px; min-width: 48px; background: #fff; box-shadow: 8px 0 14px rgba(31,42,68,.06); }
.green-trade-table th:first-child { z-index: 24; background: #f6f8fc; }
.green-trade-table .green-sticky { position: sticky; z-index: 9; background: #fff; box-shadow: 8px 0 14px rgba(31,42,68,.06); }
.green-trade-table th.green-sticky { z-index: 22; background: #f6f8fc; }
.green-trade-table .green-date { left: 48px; width: 108px; min-width: 108px; }
.green-trade-table .green-vessel { left: 156px; width: 130px; min-width: 130px; }
.green-trade-table .green-supplier { left: 286px; width: 180px; min-width: 180px; }
.green-trade-table .badge { min-width: 62px; justify-content: center; }
tbody tr:hover .green-trade-table .green-sticky,
.green-trade-table tbody tr:hover .green-sticky { background: #f5f6ff; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #f5f6ff; }
tbody tr:last-child td { border-bottom: 0; }
.purchase-table { min-width: 1680px; }
.purchase-table th:last-child, .purchase-table td:last-child { width: 150px; min-width: 150px; }
.recon-detail-wrap table { min-width: 1320px; }
.status-stack { display: grid; gap: 5px; min-width: 112px; }
.status-stack small { color: var(--muted); font-size: 12px; line-height: 1.15; white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.row-actions button, .action-more summary { min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 13px; }
.action-more { position: relative; }
.action-more summary { list-style: none; cursor: pointer; color: var(--accent); background: #fff; border: 1px solid #d8def0; font-weight: 800; }
.action-more summary::-webkit-details-marker { display: none; }
.action-more[open] summary { background: #f7f8ff; border-color: #c6ccf8; }
.action-more div { display: grid; gap: 6px; min-width: 108px; margin-top: 6px; padding: 8px; border: 1px solid #e1e6f2; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(31,42,68,.12); }
.action-more div button { width: 100%; }
.table-summary { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid #dfe3ec; border-radius: 8px; background: #f7f8fc; color: var(--muted); font-size: 13px; }
.table-summary span { white-space: nowrap; }
.table-summary .summary-title { color: var(--ink); font-weight: 700; }
.table-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-cell { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.metrics strong { font-variant-numeric: tabular-nums; }
.toast { position: fixed; top: 18px; right: 22px; bottom: auto; z-index: 2147483000; max-width: min(520px, calc(100vw - 32px)); background: #17211f; color: #fff; border-radius: 8px; padding: 12px 14px; opacity: 0; transform: translateY(-14px); transition: .16s; pointer-events: none; box-shadow: 0 16px 40px rgba(15, 23, 42, .24); }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) {
  .toast { left: 14px; right: 14px; top: 14px; max-width: none; text-align: center; }
}
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(10,18,16,.45); }
.modal-card { width: min(820px, 100%); max-height: min(86vh, 760px); overflow: auto; background: #fff; border-radius: 18px; border: 1px solid var(--line); padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.18); display: grid; gap: 14px; }
.modal-card.bulk-payment-card { width: min(1880px, 99vw); max-height: 96vh; padding: 22px; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.modal-card.bulk-payment-card .modal-head { position: sticky; top: -22px; z-index: 6; margin: -22px -22px 0; padding: 18px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.bulk-payment-card form { min-height: 0; overflow: auto; padding-right: 4px; }
.modal-card.bulk-payment-card .grid-form { grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: start; }
.modal-card.bulk-payment-card .grid-form .wide { grid-column: span 2; }
.modal-card.bulk-payment-card .bulk-payment-lines { max-height: 48vh; }
.modal-card.bulk-payment-card .bulk-payment-lines table { min-width: 1460px; }
.modal-card.bulk-payment-card .bulk-payment-summary { position: sticky; bottom: 74px; z-index: 4; margin-left: -4px; margin-right: -4px; background: rgba(248,250,255,.96); backdrop-filter: blur(8px); }
.modal-card.bulk-payment-card .modal-actions { position: sticky; bottom: -1px; z-index: 5; margin: 14px -22px -22px; padding: 14px 22px; background: rgba(255,255,255,.97); border-top: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.green-bulk-allocate-card { width: min(1780px, 99vw); max-height: 96vh; padding: 22px; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.modal-card.green-bulk-allocate-card .modal-head { position: sticky; top: -22px; z-index: 6; margin: -22px -22px 0; padding: 18px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.green-bulk-allocate-card .modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.modal-card.green-bulk-allocate-card form { min-height: 0; overflow: auto; padding-right: 4px; }
.modal-card.green-bulk-allocate-card .grid-form { grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: start; }
.modal-card.green-bulk-allocate-card .grid-form .wide { grid-column: span 2; }
.modal-card.material-acceptance-card { width: min(980px, 96vw); max-height: 92vh; }
.material-acceptance-card .modal-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.material-acceptance-card .check-line { min-height: 46px; display: flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 800; }
.material-acceptance-card .check-line input { width: auto; }
.material-acceptance-card .modal-actions { position: sticky; bottom: -18px; margin: 4px -18px -18px; padding: 14px 18px; background: rgba(255,255,255,.97); border-top: 1px solid #e5e9f5; }
.green-bulk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.green-bulk-toolbar span { margin-left: auto; color: var(--muted); font-weight: 700; }
.green-bulk-table { max-height: 48vh; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.green-bulk-table table { min-width: 1250px; }
.green-bulk-table input,
.green-bulk-table select { min-height: 38px; min-width: 130px; padding: 8px 10px; }
.green-bulk-ship { display: grid; gap: 4px; }
.green-bulk-ship span { color: var(--muted); font-size: 12px; }
.green-bulk-summary { position: sticky; bottom: 74px; z-index: 4; display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(248,250,255,.96); color: var(--muted); font-weight: 700; backdrop-filter: blur(8px); }
.green-bulk-summary b { color: var(--text); font-size: 18px; }
.green-bulk-allocate-card .modal-actions { position: sticky; bottom: -1px; z-index: 5; margin: 14px -22px -22px; padding: 14px 22px; background: rgba(255,255,255,.97); border-top: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.part-edit-modal { width: min(1680px, 99vw); max-height: 96vh; padding: 22px; }
.modal-card.part-edit-modal .modal-head { position: sticky; top: -22px; z-index: 5; margin: -22px -22px 12px; padding: 18px 22px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.part-edit-modal .modal-actions { position: sticky; bottom: -22px; z-index: 5; margin: 16px -22px -22px; padding: 14px 22px; background: rgba(255,255,255,.96); border-top: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.modal-card.part-match-modal-card { width: min(1500px, 96vw); max-height: 92vh; padding: 20px; }
.part-match-modal-card .modal-head { position: sticky; top: -20px; z-index: 5; margin: -20px -20px 12px; padding: 16px 20px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e9f5; backdrop-filter: blur(8px); }
.part-match-modal-card .modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.part-match-modal-card .table-wrap { max-height: 48vh; }
.part-record-table { min-width: 1280px; }
.part-edit-wrap table { min-width: 1120px; }
.ledger-modal-card { width: min(980px, 100%); }
.modal-head, .modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-actions { justify-content: flex-end; }
.ledger-summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ledger-summary span { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: #f7f8fc; padding: 12px; }
.ledger-summary b { color: var(--muted); font-size: 12px; }
.ledger-unassigned { display: grid; gap: 10px; margin-top: 14px; }
.ledger-unassigned h4 { margin: 0; font-size: 15px; }
.payment-desk { display: grid; gap: 12px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8faff; }
.payment-desk .panel-headline { margin-bottom: 0; align-items: end; }
.payment-desk .panel-headline label { min-width: 260px; }
.payment-desk-wrap { max-height: 360px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.pager select { width: auto; min-height: 34px; padding: 5px 8px; }
.pager button { min-height: 34px; padding: 6px 10px; }
.pager button:disabled { opacity: .45; cursor: not-allowed; }
a.file { color: var(--accent); }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 12px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.badge.warn { background: #fff7ed; color: #b45309; }
.badge.done { background: #edf0ff; color: #4338ca; }
.badge.goods { background: #eef2ff; color: #4338ca; }
.badge.freight { background: #fff1f2; color: #be123c; }
.badge.refund { background: #ecfdf5; color: #047857; }
.payment-source-note { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; max-width: 260px; }

.mobile-inspection { min-height: 100vh; padding: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%); }
.mobile-card { width: min(520px, 100%); display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.mobile-card h1 { margin: 0; font-size: 24px; }
.mobile-card p { margin: 0; color: var(--muted); }
.mobile-card textarea { min-height: 110px; }
.mobile-card small { display: block; margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.mobile-point { display: grid; gap: 5px; padding: 12px; border: 1px solid #dfe3ec; border-radius: 10px; background: #f7f8fc; }
.mobile-point strong { font-size: 18px; color: var(--ink); }
.mobile-point span { color: var(--muted); font-size: 13px; }
.mobile-point p { margin-top: 5px; color: var(--ink); }
.mobile-point-picker { display: grid; gap: 6px; padding: 12px; border: 1px solid #dfe3ec; border-radius: 12px; background: #f8fafc; }
.mobile-point-picker label { margin: 0; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; overflow: visible; }
  .top { position: static; margin: 0 0 18px; padding: 0; border-bottom: 0; background: transparent; backdrop-filter: none; }
  .module-hero { grid-template-columns: 1fr; }
  .task-hero, .task-board-head { display: grid; }
  .task-filter { justify-content: flex-start; max-width: none; }
  .task-layout { grid-template-columns: 1fr; }
  .task-detail { border-left: 0; border-top: 1px solid var(--line); }
  .task-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-tabs { justify-content: flex-start; max-width: none; }
  nav, .metrics, .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-layout { grid-template-columns: 1fr; }
  .master-head { display: grid; }
  .master-head input { max-width: none; }
  .ledger-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yard-layout, .yard-detail-grid { grid-template-columns: 1fr; }
  .yard-detail-grid .part-request-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-card-list .part-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-card-list .part-card-name, .part-card-list .part-card-note { grid-column: 1 / -1; }
  .yard-map { min-height: 300px; }
}

@media (max-width: 1280px) {
  .yard-detail-grid { grid-template-columns: 1fr; }
  .yard-detail-card { max-width: none; }
}

@media (max-width: 680px) {
  main { padding: 14px; }
  .side { padding: 16px 14px; }
  .top { align-items: flex-start; }
  .module-hero { padding: 14px; border-radius: 16px; }
  .task-hero { display: grid; padding: 14px; border-radius: 16px; }
  .task-hero h3 { font-size: 20px; }
  .task-metrics { grid-template-columns: 1fr; }
  .task-board-head { display: grid; padding: 14px; }
  .task-list, .task-detail { padding: 14px; }
  .task-card { grid-template-columns: 1fr; }
  .task-card-meta { justify-items: start; }
  .task-detail-grid { grid-template-columns: 1fr; }
  .module-hero h3 { font-size: 19px; }
  .module-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-tabs button { width: 100%; }
  .compact-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top h2 { font-size: 23px; }
  .panel { padding: 14px; }
  nav, .metrics, .grid-form, .check-grid, .part-request-form { grid-template-columns: 1fr; }
  .yard-detail-grid .part-request-form { grid-template-columns: 1fr; }
  .master-info-grid { grid-template-columns: 1fr; }
  .master-detail-head { display: grid; }
  .ledger-summary { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .part-request-form label.wide { grid-column: auto; }
  .part-request-form .part-items-block, .part-request-form > button[type="submit"] { grid-column: auto; justify-self: stretch; }
  .part-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-card-list .part-row { grid-template-columns: 1fr; }
  .part-card-list .part-card-name, .part-card-list .part-card-note { grid-column: auto; }
  .yard-map { min-height: 240px; }
  .yard-map-head { display: grid; }
  .yard-pin strong { max-width: 105px; }
}

.mobile-page {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 44%, #ffffff 100%);
  color: #152033;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mobile-shell {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.mobile-hero {
  padding: 22px 4px 12px;
}

.mobile-eyebrow {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, .1);
  color: #4f46e5;
  font-size: 13px;
  font-weight: 800;
}

.mobile-hero h1 {
  margin: 12px 0 8px;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.08;
}

.mobile-hero p,
.mobile-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

.mobile-card {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #dbe4f0;
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.mobile-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.mobile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mobile-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.mobile-form label {
  display: grid;
  gap: 7px;
  color: #475569;
  font-weight: 800;
}

.mobile-form input,
.mobile-form select,
.mobile-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  padding: 13px 14px;
  color: #0f172a;
  font: inherit;
  font-weight: 650;
  outline: none;
}

.mobile-form textarea {
  resize: vertical;
}

.mobile-form input:focus,
.mobile-form select:focus,
.mobile-form textarea:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}

.mobile-form button,
.mobile-ghost {
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #5b55f0, #4338ca);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.mobile-ghost {
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #4f46e5;
  box-shadow: none;
}

.mobile-two {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
}

.mobile-total {
  padding: 13px 14px;
  border-radius: 16px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 800;
}

.mobile-total strong {
  color: #111827;
  font-size: 20px;
}

.mobile-links a {
  display: block;
  margin: 12px 0 6px;
  color: #4f46e5;
  font-weight: 900;
  text-decoration: none;
}

.mobile-links small {
  color: #64748b;
}

.mobile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mobile-action-grid button,
.mobile-action-grid a {
  display: grid;
  gap: 6px;
  min-height: 96px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #0f172a;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.mobile-action-grid strong {
  font-size: 17px;
  font-weight: 950;
}

.mobile-action-grid span,
.mobile-flow-list span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.mobile-company-row {
  margin: 0 0 14px;
}

.mobile-part-items {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: #f8fafc;
}

.mobile-part-items h3 {
  margin: 0;
  font-size: 18px;
}

.mobile-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 900;
  font-size: 13px;
}

.mobile-part-draft {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
}

.mobile-part-draft-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;
}

.mobile-empty-list {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  background: #fff;
}

.mobile-part-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
}

.mobile-part-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mobile-part-summary strong,
.mobile-part-summary span,
.mobile-part-summary small {
  overflow-wrap: anywhere;
}

.mobile-part-summary span,
.mobile-part-summary small {
  color: #64748b;
  font-size: 12px;
}

.mobile-part-summary b {
  white-space: nowrap;
}

.mobile-part-summary .danger {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff7f7;
}

.mobile-task-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mobile-task-tabs button {
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fff;
  color: #475569;
  font-weight: 900;
}

.mobile-task-tabs button.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}

.mobile-task-list {
  display: grid;
  gap: 12px;
}

.mobile-task-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.mobile-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-task-head strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.mobile-task-head span {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 900;
}

.mobile-task-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.mobile-task-items {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}

.mobile-flow-list {
  display: grid;
  gap: 12px;
}

.mobile-flow-list div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #f8fafc;
}

.mobile-flow-list b {
  color: #0f172a;
}

.mobile-toast {
  position: fixed;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 2147483000;
  width: calc(100% - 32px);
  max-width: 520px;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: 16px;
  background: #0f172a;
  color: #fff;
  text-align: center;
  font-weight: 850;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .24);
}

.mobile-toast.error {
  background: #b91c1c;
}

@media (max-width: 420px) {
  .mobile-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mobile-card {
    border-radius: 20px;
    padding: 15px;
  }
  .mobile-two {
    grid-template-columns: 1fr;
  }
  .mobile-action-grid {
    grid-template-columns: 1fr;
  }
  .mobile-part-summary {
    grid-template-columns: 1fr 1fr;
  }
  .mobile-part-summary div {
    grid-column: 1 / -1;
  }
}