:root {
  color-scheme: light;
  --ink: #17211c;
  --muted: #68736d;
  --line: #dce3df;
  --canvas: #f3f6f4;
  --surface: #ffffff;
  --green: #176b4d;
  --green-2: #278461;
  --green-soft: #e6f2ec;
  --coral: #d9634c;
  --coral-soft: #faece8;
  --yellow: #c99526;
  --yellow-soft: #faf2dd;
  --blue: #4276a8;
  --blue-soft: #e8f0f8;
  --shadow: 0 12px 30px rgba(25, 42, 34, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
body.auth-pending { overflow: hidden; }
body.auth-pending > .sidebar, body.auth-pending > .app-shell, body.auth-pending > .modal-backdrop, body.auth-pending > .toast { visibility: hidden; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eef3f0; }
.auth-screen[hidden] { display: none; }
.auth-card { width: min(390px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #18372c; font-size: 13px; font-weight: 800; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 18px; }
.auth-brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.auth-copy { padding: 25px 0 18px; }
.auth-copy h1 { font-size: 23px; }
.auth-copy p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.auth-card label { display: grid; gap: 6px; margin-bottom: 14px; color: #455149; font-size: 11px; font-weight: 700; }
.auth-card input { height: 42px; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 5px; }
.auth-submit:disabled { cursor: wait; opacity: .7; }
.auth-error { margin: 0 0 12px; padding: 9px 10px; border-left: 3px solid var(--coral); color: #9d3d2d; background: var(--coral-soft); font-size: 11px; line-height: 1.5; }
.auth-security { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; text-align: center; }
.caps-lock-warning { display: block; margin-top: 2px; color: #9d3d2d; font-size: 10px; font-weight: 700; }
.caps-lock-warning[hidden] { display: none; }
.account-summary { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #f7faf8; }
.account-summary .avatar { flex: 0 0 auto; }
.account-summary strong { display: block; font-size: 14px; }
.account-summary p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 236px; display: flex; flex-direction: column; padding: 20px 14px 16px; color: #e8f3ed; background: #18372c; transition: transform .24s ease; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #18372c; background: #d7e9df; border-radius: 6px; font-size: 13px; font-weight: 800; }
.brand strong, .brand span, .sidebar-foot strong, .sidebar-foot span { display: block; }
.brand strong { font-size: 16px; }
.brand span { margin-top: 2px; color: #9fb7ac; font-size: 11px; }
nav { flex: 1; overflow-y: auto; padding: 18px 0; }
.nav-group { margin-bottom: 18px; }
.nav-group-label { display: block; padding: 0 12px 7px; color: #78978a; font-size: 10px; font-weight: 700; }
.nav-item { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 11px; margin: 3px 0; padding: 8px 11px; border: 0; border-radius: 6px; color: #c7d8d0; background: transparent; cursor: pointer; text-align: left; transition: .16s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { color: #18372c; background: #e2f0e8; font-weight: 700; }
.nav-item svg { width: 18px; height: 18px; }
.sidebar-foot { min-height: 58px; display: grid; grid-template-columns: 36px 1fr 34px; align-items: center; gap: 9px; padding: 11px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #18372c; background: #c6ddcf; font-size: 13px; font-weight: 700; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot span { color: #8fa99d; font-size: 10px; }
.app-shell { min-height: 100vh; margin-left: 236px; }
.topbar { height: 64px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.breadcrumbs, .topbar-actions { display: flex; align-items: center; gap: 9px; }
.breadcrumbs { color: var(--muted); font-size: 12px; }
.breadcrumbs svg { width: 14px; }
.breadcrumbs strong { color: var(--ink); }
.topbar-actions time { padding-left: 5px; color: var(--muted); font-size: 11px; }
.sync-status { min-width: 48px; color: var(--muted); font-size: 10px; text-align: right; }
.sync-status[data-state="saving"] { color: var(--blue); }
.sync-status[data-state="ok"] { color: var(--green); }
.sync-status[data-state="error"] { color: var(--coral); font-weight: 700; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: inherit; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(23,107,77,.09); }
.icon-button svg { width: 18px; height: 18px; }
.notification { position: relative; }
.notification span { position: absolute; right: 1px; top: 0; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border: 2px solid var(--surface); border-radius: 10px; color: #fff; background: var(--coral); font-size: 8px; }
.mobile-menu { display: none; }
.page { width: 100%; max-width: none; margin: 0; padding: 26px 30px 42px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--green); font-size: 10px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 25px; line-height: 1.3; }
h2 { margin-bottom: 0; font-size: 18px; }
h3 { margin-bottom: 3px; font-size: 14px; }
.page-heading p, .section-heading p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600; }
.button svg { width: 16px; height: 16px; }
.button.primary { color: #fff; background: var(--green); }
.button.primary:hover { background: #105d42; }
.button.secondary { border-color: var(--line); background: var(--surface); }
.button.secondary:hover { border-color: #afbbb4; }
.button.danger { color: #a33f2f; background: var(--coral-soft); }
.button.compact { min-height: 28px; padding: 4px 9px; font-size: 10px; white-space: nowrap; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { min-height: 130px; position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.metric::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--accent, var(--green)); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.metric-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 5px; color: var(--accent, var(--green)); background: var(--accent-soft, var(--green-soft)); }
.metric-icon svg { width: 17px; }
.metric strong { display: block; margin: 13px 0 2px; font-size: 25px; line-height: 1; }
.metric small { color: var(--muted); font-size: 10px; }
.metric small b { color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 18px; margin-bottom: 18px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.panel-head, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2, .section-heading h2 { font-size: 14px; }
.panel-head span { color: var(--muted); font-size: 10px; }
.chart-area { height: 240px; position: relative; padding: 22px 20px 30px; }
.chart-grid { position: absolute; inset: 20px 20px 33px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid i { display: block; border-top: 1px dashed #e5eae7; }
.bar-chart { height: 100%; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 12px; }
.bar-column { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.bars { width: min(42px, 90%); height: calc(100% - 22px); display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bar { width: 42%; min-height: 3px; border-radius: 2px 2px 0 0; background: var(--green); }
.bar:last-child { background: #abcbbc; }
.bar-column label { color: var(--muted); font-size: 9px; }
.work-list { padding: 4px 18px; }
.work-item { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #edf0ee; }
.work-item:last-child { border-bottom: 0; }
.work-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: var(--green-soft); color: var(--green); }
.work-icon svg { width: 15px; }
.work-item strong, .work-item span { display: block; }
.work-item strong { font-size: 11px; }
.work-item span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.work-item b { min-width: 24px; height: 22px; display: grid; place-items: center; padding: 0 6px; border-radius: 11px; color: #a14d3c; background: var(--coral-soft); font-size: 10px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search { min-width: 240px; position: relative; }
.search svg { width: 15px; position: absolute; left: 10px; top: 10px; color: #7e8a83; }
input, select, textarea { width: 100%; border: 1px solid #ccd5d0; border-radius: 5px; color: var(--ink); background: #fff; outline: none; }
input, select { height: 36px; padding: 0 10px; }
textarea { padding: 9px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(39,132,97,.12); }
.search input { padding-left: 32px; }
.filters select { width: auto; min-width: 112px; }
.order-status-summary { display: flex; gap: 1px; overflow-x: auto; padding: 12px 16px 0; background: var(--line); border-bottom: 1px solid var(--line); }
.order-status-summary button { flex: 0 0 auto; min-width: 88px; padding: 9px 12px; border: 0; color: var(--muted); background: #fff; cursor: pointer; text-align: left; }
.order-status-summary button span, .order-status-summary button strong { display: block; }
.order-status-summary button span { font-size: 9px; }
.order-status-summary button strong { margin-top: 3px; color: var(--ink); font-size: 15px; }
.order-status-summary button.active { color: var(--green); box-shadow: inset 0 -2px var(--green); }
.order-status-summary button.urgent strong { color: var(--coral); }
.order-filter-toolbar { align-items: flex-start; }
.order-filter-toolbar .filters { align-items: center; }
.order-filter-toolbar input[type="date"] { width: 132px; }
.filter-result-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 12px; color: var(--muted); font-size: 10px; }
.table-wrap { width: 100%; overflow-x: auto; }
.wide-table { min-width: 1900px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { color: #66726b; background: #fafbfa; font-size: 9px; font-weight: 700; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid #e8ece9; white-space: nowrap; }
tbody tr:hover { background: #fbfdfc; }
tbody tr:last-child td { border-bottom: 0; }
.cell-title { max-width: 240px; }
.cell-title strong, .cell-title span { display: block; }
.cell-title strong { overflow: hidden; text-overflow: ellipsis; }
.cell-title span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 3px; font-size: 9px; font-weight: 700; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.green { color: #176b4d; background: var(--green-soft); }
.status.yellow { color: #956b12; background: var(--yellow-soft); }
.status.blue { color: #356b9d; background: var(--blue-soft); }
.status.coral { color: #aa4938; background: var(--coral-soft); }
.status.gray { color: #6c746f; background: #edf0ee; }
.status-stack { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.order-paused { border-color: #e5a091 !important; background: #fff8f6 !important; }
tr.order-paused td { background: #fff8f6; }
.pause-control { color: #aa4938; }
.resume-control { color: #176b4d; }
.pause-notice { border-color: #efb2a6 !important; background: #fff1ee !important; }
.access-notice { display:flex; align-items:center; gap:10px; min-height:76px; padding:20px 22px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); }
.access-notice svg { width:20px; color:var(--yellow); flex:0 0 auto; }
.access-notice strong { color:var(--ink); }
.access-notice span { margin-left:auto; }
@media (max-width: 720px) { .access-notice { align-items:flex-start; flex-wrap:wrap; } .access-notice span { flex-basis:100%; margin-left:30px; } }
.row-actions { display: flex; align-items: center; gap: 2px; }
.row-actions .icon-button { width: 28px; height: 28px; }
.image-thumb-button { display: inline-flex; width: 104px; height: 82px; padding: 3px; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; cursor: zoom-in; }
.image-thumb-button:hover, .image-thumb-button:focus-visible { background: var(--blue-soft); outline: 2px solid var(--blue); outline-offset: 1px; }
.table-thumb { width: 96px; height: 74px; display: block; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #f7faf8; }
.image-empty { width: 52px; height: 42px; display: grid; place-items: center; color: #9aa7a0; border: 1px dashed #cbd5cf; border-radius: 4px; background: #f7faf8; }
.image-empty svg { width: 17px; }
.wrap-cell { min-width: 150px; max-width: 230px; white-space: normal; line-height: 1.5; }
.date-stack { line-height: 1.7; }
.countdown { display: inline-flex; min-width: 42px; justify-content: center; padding: 4px 6px; border-radius: 3px; color: #356b9d; background: var(--blue-soft); font-weight: 700; }
.countdown.urgent { color: #aa4938; background: var(--coral-soft); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 28px; margin-bottom: 8px; }
.production-board { display: grid; grid-template-columns: repeat(3, minmax(250px,1fr)); gap: 12px; overflow-x: auto; }
.stage { min-height: 510px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #edf1ef; }
.stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; padding: 2px 2px 8px; }
.stage-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; }
.stage-head h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stage-color); }
.stage-head span { min-width: 22px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: #fff; font-size: 9px; }
.job-card { margin-bottom: 9px; padding: 13px; border: 1px solid #d7ded9; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(31,49,40,.04); }
.job-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.job-card header span { color: var(--muted); font-size: 9px; }
.job-card h3 { margin: 7px 0 3px; }
.job-card p { min-height: 30px; margin-bottom: 10px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.progress-track { height: 5px; overflow: hidden; border-radius: 3px; background: #e7ece9; }
.progress-track i { height: 100%; display: block; border-radius: inherit; background: var(--stage-color); }
.job-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 9px; }
.process-route { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0; }
.process-route span { padding: 3px 6px; border: 1px solid #d8dfdb; border-radius: 3px; color: #6c746f; background: #f3f5f4; font-size: 9px; font-weight: 700; }
.process-route span.green { color: #176b4d; border-color: #b8dacd; background: var(--green-soft); }
.process-route span.yellow { color: #956b12; border-color: #ead49c; background: var(--yellow-soft); }
.stage .button { width: 100%; margin-top: 4px; min-height: 30px; font-size: 10px; }
.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.stock-meter { padding: 17px; }
.stock-meter header { display: flex; justify-content: space-between; gap: 12px; }
.stock-meter h3 { font-size: 13px; }
.stock-meter small { color: var(--muted); font-size: 9px; }
.stock-meter .progress-track { height: 7px; margin: 14px 0 7px; }
.stock-meter footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.chart-legend { display: flex; gap: 12px; color: var(--muted); font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; border-radius: 2px; }
.donut-layout { display: grid; grid-template-columns: 190px 1fr; align-items: center; padding: 24px; }
.donut { width: 148px; aspect-ratio: 1; display: grid; place-items: center; margin: auto; border-radius: 50%; background: conic-gradient(var(--green) 0 46%, var(--blue) 46% 71%, var(--coral) 71% 87%, var(--yellow) 87% 100%); }
.donut::before { content: "本月\A收入构成"; width: 86px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; white-space: pre; text-align: center; background: #fff; color: var(--muted); font-size: 10px; line-height: 1.7; }
.legend-list { display: grid; gap: 11px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; font-size: 10px; }
.legend-row i { width: 8px; height: 8px; border-radius: 2px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(15,28,22,.52); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(680px,100%); max-height: calc(100vh - 36px); overflow-y: auto; border-radius: 8px; background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.modal.order-modal { width: min(920px,100%); }
.modal.wide { width: min(1180px,100%); }
.modal > header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal form { padding: 20px 22px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { color: #4e5b54; font-size: 10px; font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea { margin-top: 6px; font-weight: 400; }
.picker-field { min-width: 0; }
.picker-select { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 11px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); background: #fff; cursor: pointer; font-size: 10px; font-weight: 500; text-align: left; }
.picker-select span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-select svg { width: 15px; height: 15px; flex: 0 0 auto; }
.picker-select:hover:not(:disabled), .picker-select:focus-visible { border-color: var(--green-2); outline: 0; box-shadow: 0 0 0 2px rgba(19,110,78,.1); }
.picker-select.has-value { color: var(--ink); border-color: #9db6aa; background: #fbfdfc; }
.picker-select:disabled { cursor: not-allowed; color: #9ba49f; background: #f4f6f5; }
.span-2 { grid-column: span 2; }
.form-section-title { margin: 5px 0 -2px; padding: 10px 0 8px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.check-line { min-height: 36px; display: flex; align-items: center; gap: 8px; margin-top: 17px; }
.check-line input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; }
.image-preview { width: 120px; height: 84px; display: block; margin-top: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #f5f8f6 center / cover no-repeat; }
.process-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.process-fieldset legend { padding: 0; color: #4e5b54; font-size: 10px; font-weight: 700; }
.checkbox-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.checkbox-grid label { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fafcfb; font-size: 10px; font-weight: 500; cursor: pointer; }
.checkbox-grid label:has(input:checked) { border-color: var(--green-2); color: var(--green); background: var(--green-soft); }
.checkbox-grid input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }
.form-table-wrap { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 5px; }
.form-table { min-width: 940px; }
.material-table { min-width: 1280px; }
.form-table th, .form-table td { padding: 8px; }
.form-table th { background: #f6f9f7; }
.form-table tbody th { width: 82px; color: var(--ink); font-size: 10px; white-space: nowrap; }
.form-table input, .form-table select { min-width: 100px; width: 100%; margin: 0; }
.material-table td:nth-child(2), .material-table td:nth-child(3), .material-table td:last-child { min-width: 150px; }
.material-table td:nth-child(4), .material-table td:nth-child(5), .material-table td:nth-child(6), .material-table td:nth-child(7) { min-width: 92px; }
.material-table td:nth-child(8) { min-width: 80px; }
.process-detail-empty { min-height: 54px; display: grid; place-items: center; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 5px; color: var(--muted); background: #fafcfb; font-size: 10px; }
.process-detail-table td { min-width: 150px; }
.process-detail-table td:nth-child(4) { min-width: 132px; }
.detail-table-wrap { border: 1px solid var(--line); border-radius: 5px; }
.detail-table-wrap table { min-width: 760px; }
.entity-form { padding: 20px 22px 0; }
.entity-form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.entity-detail { padding: 20px 22px 0; }
.subnav { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav-button { min-width: 88px; min-height: 38px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.subnav-button.active { color: var(--green); border-bottom-color: var(--green); }
@media (min-width: 1500px) {
  .subnav { overflow-x: hidden; }
  .subnav-button { flex: 1 1 0; min-width: 0; padding-inline: 6px; }
}
.engineering-toolbar { align-items: flex-start; }
.engineering-toolbar .filters { align-items: center; }
.engineering-toolbar input[type="date"] { width: 132px; }
.engineering-toolbar select { min-width: 108px; }
.engineering-plan-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 14px; color: var(--muted); font-size: 11px; }
.status-tabs { display: flex; align-items: stretch; gap: 1px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.status-tab { min-width: 92px; min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); color: var(--muted); background: #fafbfa; cursor: pointer; font-size: 10px; font-weight: 700; }
.status-tab:first-child { border-radius: 5px 0 0 5px; }
.status-tab:last-child { border-radius: 0 5px 5px 0; }
.status-tab.active { position: relative; z-index: 1; color: var(--green); border-color: var(--green-2); background: var(--green-soft); }
.status-tab strong { color: var(--coral); }
.engineering-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 18px; border: 1px solid var(--line); background: var(--line); }
.engineering-summary > div { min-width: 0; padding: 11px 12px; background: #fafcfb; }
.engineering-summary span, .engineering-summary strong { display: block; }
.engineering-summary span { margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.engineering-summary strong { overflow-wrap: anywhere; font-size: 11px; }
.image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.image-pair > div, .image-pair > label { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #fafcfb; }
.image-pair > div > span, .image-pair > label { color: #4e5b54; font-size: 10px; font-weight: 700; }
.image-pair img, .large-image-empty { width: 100%; height: 150px; display: grid; place-items: center; margin-top: 8px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: #fff; font-size: 10px; }
.image-pair .image-preview { width: 100%; height: 150px; background-size: contain; background-repeat: no-repeat; background-color: #fff; }
.engineering-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-top: -5px; }
.engineering-form-actions .field-hint { margin: 0; }
.engineering-import { padding: 20px 22px 0; }
.import-intro { margin-bottom: 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.import-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.import-toolbar .search { flex: 1; min-width: 0; }
.import-toolbar .field-hint { flex: 0 0 auto; margin: 0; }
.import-results { max-height: 430px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; }
.import-results table { min-width: 920px; }
.import-results th, .import-results td { padding: 9px 10px; }
.import-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; }
.import-empty svg { width: 28px; }
.engineering-import footer { display: flex; justify-content: flex-end; margin-top: 16px; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.record-picker { padding: 20px 22px 0; }
.picker-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.picker-summary strong { font-size: 13px; }
.picker-summary span { color: var(--muted); font-size: 10px; }
.picker-results { max-height: min(520px, 58vh); overflow: auto; border: 1px solid var(--line); border-radius: 5px; }
.picker-results table { min-width: 880px; }
.order-picker-results table { min-width: 1080px; }
.picker-results th, .picker-results td { padding: 10px; vertical-align: middle; }
.picker-processes { max-width: 230px; white-space: normal; line-height: 1.6; }
.record-picker footer { display: flex; justify-content: flex-end; margin-top: 16px; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.detail-grid > div { min-width: 0; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.detail-grid strong { overflow-wrap: anywhere; font-size: 12px; }
.detail-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.detail-section h3 { margin-bottom: 10px; }
.detail-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.detail-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf0ee; font-size: 10px; }
.detail-list li:last-child { border-bottom: 0; }
.muted-copy { color: var(--muted); font-size: 10px; }
.detail-image { width: 100%; max-height: 520px; min-height: 220px; object-fit: contain; border: 1px solid var(--line); border-radius: 5px; background: #f5f8f6; image-rendering: auto; }
.image-preview-dialog { display: grid; place-items: center; min-height: 300px; padding: 10px; background: #f5f8f6; }
.full-image { display: block; width: 100%; max-height: min(70vh, 720px); object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.negative { color: var(--coral); }
.positive { color: var(--green); }
.function-directory { margin-bottom: 18px; overflow: hidden; }
.function-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.function-group { min-width: 0; padding: 17px 18px 19px; border-bottom: 1px solid var(--line); }
.function-group:nth-child(odd) { border-right: 1px solid var(--line); }
.function-group:nth-last-child(-n + 2) { border-bottom: 0; }
.function-group > header { display: flex; align-items: center; gap: 10px; }
.function-group > header .metric-icon { width: 30px; height: 30px; }
.function-group > header h3 { margin: 0; font-size: 13px; }
.function-group > header small { color: var(--muted); font-size: 9px; }
.function-group > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; margin-top: 14px; }
.function-group > div button { min-height: 34px; overflow: hidden; padding: 7px 9px; border: 1px solid #d9e2dc; border-radius: 5px; color: #3f5147; background: #fbfdfc; cursor: pointer; font-size: 10px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.function-group > div button:hover { border-color: var(--green-2); color: var(--green); background: var(--green-soft); transform: translateY(-1px); }
.function-group > div button:active { transform: translateY(0); }
.extension-workspace { margin-bottom: 18px; overflow: hidden; }
.extension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.extension-card { min-height: 148px; padding: 18px; border-right: 1px solid var(--line); }
.extension-card:last-child { border-right: 0; }
.extension-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.extension-card h3 { margin: 0; font-size: 13px; }
.extension-card p { min-height: 34px; margin: 12px 0 15px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.extension-card ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.extension-card li { padding: 4px 6px; border-radius: 3px; color: #587267; background: #f1f6f3; font-size: 9px; }
.extension-card .status { flex: 0 0 auto; }
.migration-workspace { padding: 20px 22px 22px; }
.migration-hero { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #dce9e1; border-radius: 6px; background: #f5faf7; }
.migration-hero h2 { margin-bottom: 4px; font-size: 16px; }
.migration-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.migration-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.migration-steps article { min-height: 126px; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.migration-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; }
.migration-steps h3 { margin: 10px 0 4px; font-size: 12px; }
.migration-steps p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.migration-actions { display: flex; gap: 8px; margin-top: 18px; }
.permission-matrix { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.permission-head, .permission-row { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center; gap: 8px; padding: 8px 11px; font-size: 10px; }
.permission-head { color: var(--muted); background: #f6f9f7; font-size: 9px; font-weight: 700; }
.permission-row { border-top: 1px solid #edf0ee; color: var(--ink); }
.permission-row input { width: 15px; height: 15px; margin: 0 auto; accent-color: var(--green); }
.migration-upload p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.upload-drop { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #a9c2b4; border-radius: 6px; color: var(--green); background: #f5faf7; font-size: 11px; cursor: pointer; }
.upload-drop svg { width: 28px; height: 28px; }
.upload-drop input { width: auto; height: auto; padding: 0; border: 0; background: transparent; }
.modal form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.toast { min-width: 240px; position: fixed; z-index: 110; right: 24px; bottom: 24px; padding: 12px 16px; border-radius: 6px; color: #fff; background: #163b2d; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translateY(0); }
.drawer-scrim { display: none; }

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .production-board { grid-template-columns: repeat(3, 270px); }
  .inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .migration-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,.18); }
  .app-shell { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { padding: 0 14px; }
  .breadcrumbs > span, .breadcrumbs > svg, .topbar-actions time { display: none; }
  .page { padding: 20px 14px 34px; }
  .page-heading { align-items: flex-start; }
  .page-heading p { max-width: 220px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric { min-height: 116px; padding: 14px; }
  .metric strong { font-size: 21px; }
  .inventory-grid { grid-template-columns: 1fr; }
  .function-groups, .extension-grid { grid-template-columns: 1fr; }
  .migration-steps { grid-template-columns: 1fr; }
  .migration-actions { flex-direction: column; }
  .migration-actions .button { width: 100%; }
  .function-group, .function-group:nth-child(odd), .extension-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .function-group:last-child, .extension-card:last-child { border-bottom: 0; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .search { grid-column: span 2; min-width: 0; }
  .filters select { width: 100%; }
  .toolbar > .button { width: 100%; }
  .donut-layout { grid-template-columns: 1fr; gap: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .engineering-summary { grid-template-columns: 1fr 1fr; }
  .image-pair { grid-template-columns: 1fr; }
  .engineering-toolbar .filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .engineering-toolbar .search { grid-column: span 2; }
  .engineering-toolbar input[type="date"], .engineering-toolbar select { width: 100%; min-width: 0; }
  .order-filter-toolbar .filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .order-filter-toolbar .search { grid-column: span 2; }
  .order-filter-toolbar input[type="date"], .order-filter-toolbar select { width: 100%; min-width: 0; }
  .engineering-form-actions, .import-toolbar { align-items: stretch; flex-direction: column; }
  .engineering-form-actions .button { width: 100%; }
  .import-toolbar .field-hint { align-self: flex-start; }
  .picker-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .modal { max-height: calc(100vh - 20px); }
  .toast { left: 14px; right: 14px; bottom: 14px; min-width: 0; }
  .image-thumb-button { width: 82px; height: 68px; }
  .table-thumb { width: 74px; height: 58px; }
}

@media (max-width: 430px) {
  h1 { font-size: 22px; }
  .page-heading { display: block; }
  .page-heading .button { width: 100%; margin-top: 14px; }
  .summary-grid { grid-template-columns: 1fr; }
  .bar-chart { gap: 5px; }
}