:root {
    color-scheme: light;
    --bg: #f6f7f9;
    --panel: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --line: #d9dee7;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --success: #047857;
    --success-bg: #ecfdf5;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 16px;
    background: #ffffff;
    border-right: 1px solid var(--line);
}

.brand {
    font-size: 18px;
    font-weight: 700;
    padding: 0 8px 10px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav a {
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--muted);
}

.nav a:hover,
.nav a.active {
    background: #eef2ff;
    color: var(--primary);
}

.nav a.active {
    font-weight: 700;
}

.user-box {
    margin-top: auto;
    padding: 12px 8px 0;
    border-top: 1px solid var(--line);
}

.user-name {
    font-weight: 700;
}

.user-role {
    margin: 3px 0 10px;
    color: var(--muted);
    font-size: 13px;
}

.user-box button {
    width: 100%;
}

.main-area {
    min-width: 0;
}

.content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px clamp(16px, 1.4vw, 28px);
}

.wide-work-page {
    width: 100%;
}

.wide-work-body {
    overflow-x: hidden;
}

.wide-work-body .main-area,
.wide-work-body .content {
    max-width: 100%;
    overflow-x: hidden;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
}

h1 {
    margin: 0 0 6px;
    font-size: 26px;
}

h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.muted {
    color: var(--muted);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.metric,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metric {
    padding: 18px;
}

.metric strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
}

.panel {
    padding: 18px;
    margin-bottom: 18px;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #eef2f7;
}

.auth-card {
    width: min(420px, 100%);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.auth-brand {
    margin-bottom: 18px;
    color: var(--primary);
    font-weight: 800;
}

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

.user-table {
    overflow-x: auto;
}

.user-table table {
    width: 100%;
    min-width: 900px;
}

.user-table th,
.user-table td {
    padding: 8px;
    text-align: center;
}

.worker-code {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #eef2ff;
    color: #1d4ed8;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.user-table input[name="worker_code"] {
    min-width: 96px;
    max-width: 140px;
}

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

.role-permission-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.role-permission-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.role-permission-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
}

.production-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.production-create-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.production-list-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.production-list-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.production-setting-form {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
}

.production-setting-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.production-setting-form input {
    width: 140px;
}

.production-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px auto;
    gap: 8px;
    align-items: end;
}

.production-filter-wide {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    margin-bottom: 12px;
}

.production-filter-wide .field:first-child {
    grid-column: span 2;
}

.production-filter-wide button,
.production-filter-wide .button {
    align-self: end;
}

.production-filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    align-self: end;
    color: var(--muted);
    font-size: 13px;
}

.production-filter-check input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.production-overview-panel {
    overflow: hidden;
}

.production-overview-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.production-overview-table table {
    width: 100%;
    min-width: 1960px;
    table-layout: fixed;
}

.production-overview-table th,
.production-overview-table td {
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
}

.production-overview-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb;
}

.production-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}

.production-sort-link:hover,
.production-sort-link.is-active {
    color: var(--primary);
}

.production-sort-direction {
    font-size: 14px;
    line-height: 1;
}

.production-overview-table tr.is-late {
    background: #fff7f7;
}

.production-thumb {
    display: block;
    width: 58px;
    height: 72px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.production-thumb-link {
    display: inline-block;
    border-radius: 6px;
    cursor: zoom-in;
}

.production-thumb-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.production-order-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 7px;
    border-radius: 6px;
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

.production-order-link:hover,
.production-order-link:focus-visible {
    background: #eff6ff;
    color: #1e40af;
    text-decoration: underline;
}

.production-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
}

.overview-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

.overview-progress .production-progress-bar {
    height: 8px;
}

.overview-step-cell {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 72px;
    padding: 6px 4px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.overview-step-cell.is-registered {
    position: relative;
    background: #ecfdf5;
    border-color: #86efac;
    box-shadow: inset 3px 0 0 #16a34a;
}

.overview-step-cell.is-empty {
    color: #64748b;
}

.overview-step-quantity {
    font-size: 16px;
    line-height: 1.15;
    color: #0f172a;
    font-weight: 800;
}

.overview-step-cell.is-registered .overview-step-quantity {
    color: #166534;
    font-size: 18px;
}

.overview-step-owner {
    max-width: 100%;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.overview-step-cell.is-registered .overview-step-owner {
    color: #14532d;
}

.overview-step-cell .status-pill {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
}

.overview-step-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
}

.overview-step-details span {
    padding: 1px 5px;
    border-radius: 999px;
    background: #d1fae5;
    color: #065f46;
    font-weight: 700;
}

.overview-step-form {
    display: grid;
    width: 100%;
    max-width: 128px;
    gap: 4px;
    margin-top: 3px;
}

.overview-step-form input {
    min-height: 28px;
    padding: 4px 6px;
    text-align: center;
}

.overview-step-form button {
    min-height: 28px;
    padding: 4px 6px;
}

.status-muted {
    background: #f3f4f6;
    color: var(--muted);
}

.production-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.production-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.button.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.production-orders {
    display: grid;
    gap: 14px;
}

.production-order {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.production-order.is-late {
    border-color: #fca5a5;
}

.production-order-head,
.production-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
}

.production-title {
    font-size: 18px;
    font-weight: 800;
}

.production-status,
.production-actions,
.production-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 13px;
    font-weight: 700;
}

.status-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-success {
    background: var(--success-bg);
    color: var(--success);
}

.status-warning {
    background: #fff7ed;
    color: #c2410c;
}

.production-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid var(--line);
}

.production-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.production-progress-bar span {
    display: block;
    height: 100%;
    background: #16a34a;
}

.production-card-grid {
    display: grid;
    grid-template-columns: minmax(560px, 1.18fr) minmax(420px, .82fr);
    grid-template-areas:
        "order flow"
        "order control";
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--line);
    align-items: start;
}

.production-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 12px;
}

.production-column-order {
    grid-area: order;
}

.production-column-flow {
    grid-area: flow;
}

.production-column-control {
    grid-area: control;
}

.production-column-order .production-order-info {
    order: 1;
}

.production-column-order .production-steps {
    order: 2;
}

.production-column-order .production-guide-images {
    order: 3;
}

.production-panel {
    display: grid;
    min-width: 0;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.production-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.production-temporary-prices details {
    min-width: 0;
}

.production-temporary-price-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style-position: inside;
}

.production-temporary-price-summary > span:first-child {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.production-temporary-price-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.production-temporary-price-help {
    padding: 9px 10px;
    color: #7c4a03;
    border: 1px solid #f4d7a3;
    border-radius: 7px;
    background: #fff8e8;
}

.production-temporary-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 10px;
}

.production-temporary-price-item {
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fafb;
}

.production-temporary-price-factory {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.temporary-price-mark {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    color: #9a3412;
    border-radius: 999px;
    background: #ffedd5;
}

.production-temporary-price-actions {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.production-temporary-price-history {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.production-temporary-price-history > summary {
    cursor: pointer;
}

.production-temporary-price-history .table-wrap {
    margin-top: 8px;
}

@media (max-width: 720px) {
    .production-temporary-price-summary,
    .production-temporary-price-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .production-temporary-price-summary {
        display: grid;
    }
}

.production-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
    margin-bottom: 0;
}

.production-subhead-compact {
    min-height: auto;
}

.production-suggestions {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.production-suggestion-grid {
    display: grid;
    gap: 8px;
}

.production-suggestion-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.production-suggestion-row strong,
.production-suggestion-row span {
    display: block;
}

.production-material-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(90px, .5fr);
    gap: 10px;
    align-items: end;
}

.production-quality-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 1fr));
    gap: 10px;
    align-items: end;
}

.production-finished-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(90px, .5fr);
    gap: 10px;
    align-items: end;
}

.production-piecework-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.production-material-form .field:nth-child(3),
.production-quality-form .field:nth-child(5),
.production-finished-form .field:nth-child(3),
.production-piecework-form .field:nth-child(6) {
    grid-column: 1 / -1;
}

.production-material-form button,
.production-quality-form button,
.production-finished-form button,
.production-piecework-form button {
    grid-column: 1 / -1;
}

.production-material-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.production-material-table table {
    width: 100%;
    min-width: 520px;
}

.production-material-table th,
.production-material-table td {
    padding: 7px;
    text-align: center;
}

.production-materials .production-suggestions {
    max-height: 176px;
    overflow-y: auto;
}

.production-materials .production-material-table {
    max-height: 238px;
    overflow: auto;
}

.production-materials .production-material-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb;
}

.production-materials .production-material-table td {
    vertical-align: middle;
}

.production-material-empty {
    margin-top: 8px;
}

.production-step-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.production-timed-registers {
    display: grid;
    gap: 10px;
}

.production-sewing-register {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fafb;
}

.production-sewing-title,
.production-sewing-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.production-sewing-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.production-sewing-times div {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.production-sewing-times strong {
    font-size: 13px;
    word-break: break-all;
}

.production-sewing-actions form {
    flex: 1;
}

.production-sewing-actions button {
    width: 100%;
}

.production-step-table table {
    width: 100%;
    min-width: 680px;
}

.production-step-table th,
.production-step-table td {
    padding: 7px;
    text-align: center;
}

.production-step-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
}

.production-step-summary-item {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.production-steps {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.production-step-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.production-step-summary-actions {
    display: flex;
    justify-content: flex-end;
}

.production-step-summary-actions button {
    min-width: 76px;
    min-height: 30px;
}

.production-step-time-line {
    font-size: 12px;
    word-break: break-all;
}

.step-register-dialog {
    width: min(360px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.step-register-dialog::backdrop {
    background: rgba(15, 23, 42, .32);
}

.step-register-dialog form {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.step-register-dialog-head,
.production-step-register-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.step-register-dialog-head h3 {
    margin: 0;
    font-size: 18px;
}

.production-step-register-meta {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fafb;
}

.production-piecework-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.production-piecework-summary-grid div {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fafb;
}

.production-piecework-recent table {
    min-width: 420px;
}

.production-register-list {
    display: grid;
    gap: 16px;
}

.production-register-filter {
    grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(130px, 180px)) auto auto;
}

.production-register-grid {
    display: grid;
    grid-template-columns: minmax(340px, .7fr) minmax(620px, 1.3fr);
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--line);
    align-items: start;
}

.production-register-piecework {
    grid-column: 1 / -1;
}

.production-print-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--muted);
    font-size: 13px;
}

.production-print-select input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.production-print-factory {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.production-print-factory input {
    width: 110px;
    min-height: 34px;
}

.production-guide-image-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr);
    gap: 8px;
    align-items: end;
}

.production-guide-image-form button {
    grid-column: 1 / -1;
}

.production-guide-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.production-guide-image-item {
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fafb;
}

.production-guide-image-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 5px;
    object-fit: cover;
    background: #fff;
}

.production-guide-image-item button {
    width: 100%;
}

.production-print-body {
    margin: 0;
    background: #eef2f7;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.production-print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
}

.production-print-toolbar h1 {
    margin: 0 0 4px;
    font-size: 20px;
}

.production-print-pages {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.production-print-sheet {
    display: flex;
    flex-direction: column;
    gap: 7mm;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 8mm;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
}

.production-print-sheet-simple {
    gap: 6mm;
}

.production-print-title,
.production-print-top,
.production-print-summary,
.production-print-signatures {
    display: grid;
    gap: 8px;
}

.production-print-title {
    grid-template-columns: 1fr auto;
    align-items: end;
    padding-bottom: 4mm;
    border-bottom: 2px solid #111827;
}

.production-print-title h2 {
    margin: 0 0 3px;
    font-size: 22px;
}

.production-print-title strong {
    font-size: 20px;
}

.production-print-title-side {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.production-print-order-qr {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 0;
}

.production-print-order-qr img {
    width: 28mm;
    height: 28mm;
    object-fit: contain;
}

.production-print-order-qr figcaption {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.production-print-top {
    grid-template-columns: minmax(0, 1fr) 34mm;
    align-items: stretch;
}

.production-print-info,
.production-print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.production-print-info th,
.production-print-info td,
.production-print-table th,
.production-print-table td {
    padding: 5px 6px;
    border: 1px solid #111827;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}

.production-print-info th,
.production-print-table th {
    background: #f3f4f6;
    font-weight: 700;
}

.production-print-info th {
    width: 20mm;
}

.production-print-order-remark {
    color: #dc2626;
    font-weight: 700;
}

.production-print-image {
    display: grid;
    place-items: center;
    min-height: 48mm;
    border: 1px solid #111827;
    color: var(--muted);
}

.production-print-image img {
    width: 100%;
    height: 100%;
    max-height: 56mm;
    object-fit: contain;
}

.production-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
}

.production-print-grid h3 {
    margin: 0 0 5px;
    font-size: 15px;
}

.production-print-section h3,
.production-print-section-head h3 {
    margin: 0 0 5px;
    font-size: 15px;
}

.production-print-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.production-print-guide-section {
    min-height: 0;
}

.production-print-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5mm;
}

.production-print-guide-grid figure {
    display: grid;
    gap: 3px;
    margin: 0;
    break-inside: avoid;
}

.production-print-guide-grid img {
    width: 100%;
    height: 50mm;
    border: 1px solid #111827;
    object-fit: contain;
    background: #fff;
}

.production-print-guide-grid figcaption {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.production-print-no-image {
    display: grid;
    min-height: 44mm;
    place-items: center;
    border: 1px dashed #9ca3af;
    color: var(--muted);
}

.production-print-more {
    margin-top: 4px;
}

.production-image-print-sheet {
    gap: 4mm;
}

.production-image-print-title {
    padding-bottom: 2mm;
}

.production-image-print-info th,
.production-image-print-info td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.production-image-print-guide-section {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.production-image-print-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5mm;
}

.production-image-print-grid figure {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
    break-inside: avoid;
}

.production-image-print-grid img {
    width: 100%;
    height: 72mm;
    border: 1px solid #111827;
    background: #fff;
    object-fit: contain;
}

.production-image-print-grid figcaption {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.production-image-print-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

.production-image-print-grid-1 img {
    height: 150mm;
}

.production-image-print-grid-2 img {
    height: 145mm;
}

.production-image-print-sheet.is-continuation .production-image-print-grid-1 img {
    height: 205mm;
}

.production-image-print-sheet.is-continuation .production-image-print-grid-2 img {
    height: 190mm;
}

.production-image-print-sheet.is-continuation .production-image-print-grid-3 img,
.production-image-print-sheet.is-continuation .production-image-print-grid-4 img {
    height: 96mm;
}

.production-image-print-sheet.is-continuation .production-image-print-grid-5 img,
.production-image-print-sheet.is-continuation .production-image-print-grid-6 img {
    height: 65mm;
}

.production-image-print-empty {
    flex: 1;
}

.production-print-table {
    font-size: 12px;
}

.production-print-compact th,
.production-print-compact td {
    padding: 4px 5px;
}

.production-print-lower-grid {
    align-items: start;
}

.production-print-summary {
    grid-template-columns: repeat(4, 1fr);
    margin-top: auto;
}

.production-print-summary div {
    display: grid;
    gap: 3px;
    padding: 7px;
    border: 1px solid #111827;
    text-align: center;
}

.production-print-summary strong {
    font-size: 16px;
}

.production-print-signatures {
    grid-template-columns: repeat(4, 1fr);
    padding-top: 5mm;
    border-top: 1px solid #111827;
}

.production-print-signatures span {
    min-height: 22px;
    border-bottom: 1px solid #111827;
}

.production-print-empty {
    width: min(560px, calc(100vw - 32px));
    margin: 80px auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

@media (max-width: 1500px) {
    .production-card-grid {
        grid-template-columns: minmax(460px, 1fr) minmax(360px, .85fr);
    }

    .production-register-grid {
        grid-template-columns: 1fr;
    }

    .production-order-info,
    .production-steps,
    .production-guide-images,
    .production-materials,
    .production-piecework,
    .production-quality,
    .production-finished {
        grid-column: auto;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.dashboard-stock-filter {
    margin: 12px 0 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-wide {
    grid-column: span 2;
}

label {
    color: var(--muted);
    font-size: 13px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

textarea {
    resize: vertical;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.button-compact {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 13px;
}

.movement-remark-cell {
    min-width: 300px;
}

.movement-remark-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.movement-remark-form input {
    min-width: 220px;
    width: 100%;
    max-width: none;
}

button:hover,
.button:hover {
    background: var(--primary-dark);
}

.button-secondary {
    background: #fff;
    color: var(--text);
    border-color: var(--line);
}

.button-secondary:hover {
    background: #f3f4f6;
}

.button-danger {
    background: #fff;
    color: var(--danger);
    border-color: #fecaca;
}

.button-danger:hover {
    background: var(--danger-bg);
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.table-wrap {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.product-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.product-filter-form {
    grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) repeat(5, minmax(108px, .72fr)) auto auto;
    margin-bottom: 12px;
}

.product-filter-form button,
.product-filter-form .button {
    align-self: end;
}

.product-table table {
    min-width: 1220px;
}

.product-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.product-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-thumb-link {
    display: inline-block;
    cursor: zoom-in;
}

.product-thumb {
    display: block;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.product-thumb-small {
    width: 46px;
    height: 46px;
}

.product-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
}

.product-thumb-edit {
    margin-bottom: 6px;
}

.product-stock-total {
    font-weight: 800;
}

.product-stock-pending-total {
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
}

.product-production-pending {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed #e5e7eb;
}

.product-size-stock-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 260px;
    margin-top: 6px;
}

.product-size-stock-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.product-size-stock-chip-pending {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.product-size-stock-empty {
    margin-top: 4px;
    font-size: 12px;
}

.movement-product-preview {
    overflow: hidden;
}

.movement-product-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movement-product-search-status {
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
}

.movement-product-search-field {
    position: relative;
}

.movement-product-search-results {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.movement-product-search-result {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    color: #111827;
    background: #fff;
    text-align: left;
}

.movement-product-search-result:hover {
    background: #eff6ff;
}

.movement-product-search-group {
    padding: 7px 10px 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    background: #f8fafc;
}

.movement-order-search-result {
    color: #0f5132;
}

.movement-product-search-empty {
    padding: 8px 10px;
}

.movement-stock-head {
    margin-bottom: 12px;
}

.movement-stock-filter-form {
    grid-template-columns: minmax(180px, 1.5fr) minmax(120px, .8fr) minmax(120px, .8fr) auto auto;
    margin-bottom: 12px;
}

.movement-stock-filter-form button,
.movement-stock-filter-form .button {
    align-self: end;
}

.movement-batch-form {
    display: grid;
    gap: 14px;
}

.movement-batch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.movement-batch-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.movement-batch-card-head {
    font-weight: 800;
}

.movement-batch-card .field {
    min-width: 0;
}

.movement-batch-card input,
.movement-batch-card select {
    width: 100%;
}

.movement-batch-card .product-thumb {
    width: 58px;
    height: 58px;
}

.movement-batch-card .field-wide {
    grid-column: auto;
}

.selection-export-form {
    display: grid;
    gap: 12px;
}

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

.selection-export-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.selection-col {
    width: 48px;
    text-align: center;
}

.selection-col input {
    width: auto;
    min-height: 0;
}

.stock-split {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.stock-split-finished,
.stock-split-pending,
.stock-split-empty {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.stock-split-finished {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

.stock-split-pending {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.stock-split-link {
    text-decoration: none;
}

.stock-split-link:hover {
    border-color: #f59e0b;
    background: #fef3c7;
}

.stock-split-empty {
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: var(--muted);
}

.stock-adjust-panel {
    margin: 12px 0;
    border-color: #bfdbfe;
    background: #f8fbff;
}

.stock-adjust-row-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-top: 7px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    background: #ffffff;
}

.stock-adjust-field {
    display: inline-grid;
    grid-template-columns: auto 82px;
    gap: 6px;
    align-items: center;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

.stock-adjust-field input {
    width: 82px;
    min-height: 30px;
    padding: 4px 8px;
    font-size: 13px;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
}

.inline-check input {
    width: auto;
    min-height: 0;
}

.worker-process-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.product-image-remove {
    margin-bottom: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-weight: 600;
    background: #fbfcfe;
}

tr:last-child td {
    border-bottom: 0;
}

.badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--primary);
    font-size: 13px;
}

.badge-out {
    background: #fff7ed;
    color: #c2410c;
}

.alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecaca;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #bbf7d0;
}

.empty {
    padding: 28px;
    text-align: center;
    color: var(--muted);
}

.quote-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 12px;
    align-items: end;
}

.piecework-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}

.piecework-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.piecework-table table {
    min-width: 1320px;
}

.piecework-work-page .piecework-table,
.piecework-work-page .factory-outbound-wrap {
    overflow-x: visible;
}

.piecework-work-page .piecework-table table,
.piecework-work-page .piecework-batch-entry {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.piecework-work-page .piecework-table th,
.piecework-work-page .piecework-table td {
    padding: 7px 5px;
}

.piecework-work-page .piecework-table input,
.piecework-work-page .piecework-table select,
.piecework-work-page .factory-outbound-table input,
.piecework-work-page .factory-outbound-table select {
    min-width: 0;
    padding-right: 5px;
    padding-left: 5px;
}

.piecework-work-page .quote-image-cell {
    width: 96px;
}

.piecework-table td {
    text-align: center;
}

.piecework-table input,
.piecework-table select {
    min-height: 34px;
    padding: 6px 8px;
    text-align: center;
}

.piecework-table tbody tr:nth-child(odd) {
    background: #e9f4ff;
}

.factory-outbound-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.factory-outbound-head h2 {
    margin-bottom: 0;
}

.factory-outbound-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.factory-outbound-table {
    min-width: 960px;
}

.piecework-batch-entry {
    min-width: 840px;
}

.piecework-batch-controls,
.factory-batch-controls {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(180px, 260px) minmax(160px, 220px);
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.factory-batch-controls {
    grid-template-columns: minmax(160px, 220px) minmax(180px, 260px);
}

.factory-outbound-table th,
.factory-outbound-table td {
    padding: 8px;
    text-align: center;
}

.factory-outbound-table input,
.factory-outbound-table select {
    min-height: 34px;
    padding: 6px 8px;
    text-align: center;
}

.factory-outbound-table input[readonly] {
    background: #f9fafb;
    color: #111827;
    font-weight: 700;
}

.factory-outbound-table th:nth-child(1),
.factory-outbound-table td:nth-child(1) {
    width: 150px;
}

.factory-outbound-table th:nth-child(2),
.factory-outbound-table td:nth-child(2) {
    width: 130px;
}

.factory-outbound-table th:nth-child(3),
.factory-outbound-table td:nth-child(3),
.factory-outbound-table th:nth-child(4),
.factory-outbound-table td:nth-child(4),
.factory-outbound-table th:nth-child(5),
.factory-outbound-table td:nth-child(5),
.factory-outbound-table th:nth-child(7),
.factory-outbound-table td:nth-child(7) {
    width: 120px;
}

.factory-outbound-history form {
    display: inline-flex;
}

.factory-outbound-summary {
    min-width: 420px;
}

.factory-outbound-summary-wrap {
    max-width: 560px;
}

.factory-outbound-batches {
    min-width: 840px;
}

.factory-outbound-actions {
    margin-top: 12px;
}

.factory-outbound-entry-panel .factory-outbound-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
}

.factory-outbound-entry-panel .factory-outbound-entry {
    display: block;
    min-width: 0;
}

.factory-outbound-entry-panel .factory-outbound-entry thead {
    display: none;
}

.factory-outbound-entry-panel .factory-outbound-entry tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.factory-outbound-entry-panel .factory-outbound-entry tr {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr 1.15fr 0.85fr;
    gap: 6px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.factory-outbound-entry-panel .factory-outbound-entry.no-price-columns tr {
    grid-template-columns: 1.2fr 0.85fr 1.15fr;
}

.factory-outbound-entry-panel .factory-outbound-entry td {
    display: block;
    width: auto;
    padding: 0;
}

.factory-outbound-entry-panel .factory-outbound-entry input {
    width: 100%;
    min-height: 32px;
    padding: 5px 7px;
    text-align: center;
}

.factory-outbound-entry-panel .factory-outbound-entry td:nth-child(5) input {
    text-align: left;
}

.registration-filter-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr)) auto auto;
    gap: 12px;
    align-items: end;
}

.registration-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 18px;
}

.registration-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.registration-summary-table .factory-outbound-table {
    width: 100%;
    min-width: 0;
}

.filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.filter-chip-row .active {
    border-color: var(--primary);
    color: var(--primary);
    background: #eff6ff;
}

.finished-outbound-report-page .factory-outbound-wrap {
    overflow-x: auto;
}

.finished-outbound-report-page .registration-detail-table {
    width: 100%;
    min-width: 1120px;
}

.registration-overview-page .piecework-table,
.registration-overview-page .factory-outbound-wrap {
    overflow-x: auto;
}

.registration-overview-page .registration-detail-table {
    width: 100%;
    min-width: 1280px;
    table-layout: fixed;
}

.registration-overview-page .actions-cell {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.name-option-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.name-option-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.name-option-chip button {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 12px;
}

.barcode-option-table {
    overflow-x: auto;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.barcode-option-table table {
    width: 100%;
    min-width: 420px;
}

.barcode-option-table th,
.barcode-option-table td {
    padding: 8px;
    text-align: left;
}

.cost-grand-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.cost-grand-total span {
    color: var(--muted);
}

.cost-grand-total strong {
    font-size: 24px;
    color: #c2410c;
}

.cost-total-stack {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cost-linked-total {
    display: grid;
    grid-template-columns: auto auto;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.cost-linked-total strong {
    color: #1d4ed8;
}

.cost-linked-total small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.cost-selector-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.cost-selector-head h2 {
    margin-bottom: 0;
}

.cost-style-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.cost-style-image-box {
    width: 88px;
    min-width: 88px;
}

.cost-style-image-link {
    display: block;
    cursor: zoom-in;
}

.cost-style-image {
    display: block;
    width: 88px;
    height: 112px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.image-preview {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(17, 24, 39, 0.78);
}

.image-preview.is-open {
    display: flex;
}

.image-preview img {
    max-width: min(92vw, 980px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    cursor: grab;
    transform-origin: center center;
    transition: transform 0.08s ease-out;
    user-select: none;
    touch-action: none;
    will-change: transform;
}

.image-preview img.is-dragging {
    cursor: grabbing;
    transition: none;
}

.image-preview-tools {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.image-preview-tools button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    font-size: 13px;
}

.image-preview-tools button:hover {
    background: #f3f4f6;
}

.image-preview-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    font-size: 28px;
    line-height: 1;
    background: #fff;
    color: #111827;
}

.image-preview-close:hover {
    background: #f3f4f6;
}

body.image-preview-open {
    overflow: hidden;
}

.cost-style-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 112px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: #fafafa;
}

.cost-style-actions {
    display: flex;
    align-items: end;
    gap: 12px;
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
}

.cost-image-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 330px;
}

.cost-image-form .field {
    flex: 1;
    min-width: 0;
}

.cost-price-label-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.cost-price-label-note {
    margin-top: 8px;
    font-size: 13px;
}

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

.section-head h2,
.section-head h3 {
    margin-bottom: 4px;
}

.check-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
}

.check-line input {
    width: auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.factory-management-table input,
.factory-management-table select {
    min-width: 0;
    width: 100%;
}

.factory-inline-form {
    margin: 0;
}

.factory-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.factory-row-actions form {
    margin: 0;
}

.production-step-source {
    margin-top: 4px;
    font-size: 12px;
}

.production-step-source.source-linked {
    background: #0ea5e9;
    color: #fff;
}

.production-step-source.source-manual {
    background: #f59e0b;
    color: #fff;
}

.production-step-source.source-inbound {
    background: #16a34a;
    color: #fff;
}

.production-step-source.source-timed {
    background: #7c3aed;
    color: #fff;
}

.production-step-source.source-empty {
    background: #f3f4f6;
    color: #6b7280;
}

.factory-add-form {
    align-items: end;
    margin-bottom: 14px;
}

.cost-factory-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
}

.cost-factory-form .field {
    width: 120px;
}

.cost-factory-form .cost-image-field {
    width: 360px;
}

.cost-factory-form .cost-remark-field {
    flex: 1 1 260px;
    width: auto;
}

.cost-factory-form .cost-price-field {
    width: 120px;
}

.cost-factory-form input {
    min-width: 0;
}

.cost-factory-form .cost-price-field input {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.cost-factory-form select,
.cost-extra-price-select-field select {
    min-width: 150px;
}

.cost-extra-price-field input[readonly] {
    background: #f3f4f6;
    color: #374151;
}

.cost-factory-order-settings {
    margin: 16px 0 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fbfdff;
}

.factory-assignment-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: end;
}

.factory-assignment-toolbar {
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
}

.factory-assignment-table-wrap {
    grid-column: 1 / -1;
    max-height: 320px;
    overflow: auto;
}

.factory-assignment-table {
    min-width: 560px;
}

.factory-assignment-table th,
.factory-assignment-table td {
    padding: 8px 10px;
    vertical-align: middle;
}

.factory-assignment-table th:first-child,
.factory-assignment-table td:first-child {
    width: 62px;
    text-align: center;
}

.factory-assignment-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.factory-assignment-table input[type="number"] {
    max-width: 140px;
    min-width: 100px;
}

.cost-save-card {
    display: flex;
    align-items: end;
    flex: 0 0 auto;
}

.cost-save-card button {
    min-height: 42px;
    white-space: nowrap;
}

.cost-sheet-tools {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.cost-style-edit-form,
.cost-style-copy-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex: 0 0 auto;
}

.cost-style-edit-form input,
.cost-style-copy-form input {
    min-width: 140px;
}

.cost-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    align-items: end;
    gap: 12px;
    overflow-x: auto;
}

.cost-control-row .field {
    min-width: 0;
}

.cost-style-selector {
    display: flex;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.cost-style-selector .field {
    flex: 1;
}

.cost-style-selector .cost-style-manual-field {
    flex: 0 0 220px;
}

.cost-delete-style-form {
    display: flex;
    align-items: end;
    flex: 0 0 auto;
}

.cost-sheet-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.cost-sheet-wrap {
    overflow-x: auto;
    border: 1px solid #111827;
    border-radius: 4px;
    background: #fff;
}

.cost-sheet-table {
    min-width: 980px;
    table-layout: fixed;
}

.cost-sheet-table th,
.cost-sheet-table td {
    border: 1px solid #111827;
    padding: 6px;
    text-align: center;
}

.cost-sheet-table th {
    color: #111827;
    background: #fff;
}

.cost-section-row th {
    font-size: 18px;
    background: #fff;
}

.cost-section-row th:nth-child(1) {
    background: #fef9c3;
}

.cost-section-row th:nth-child(2) {
    background: #ecfccb;
}

.cost-section-row th:nth-child(3) {
    background: #fee2e2;
}

.cost-sheet-table input {
    min-height: 32px;
    padding: 5px 6px;
    border-color: #cbd5e1;
    text-align: center;
}

.cost-sheet-table tbody tr:nth-child(even) {
    background: #f8fbff;
}

.cost-total-row td {
    background: #ffff00;
    font-weight: 700;
}

.cost-final-row td {
    background: #f97316;
    color: #111827;
    font-weight: 700;
}

.mini-actions {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.mini-actions button {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 12px;
}

.craft-page-panel {
    overflow: visible;
}

.craft-center-page {
    --craft-ink: #14233b;
    --craft-soft: #f5f8fc;
    --craft-line: #dbe4ef;
    --craft-accent: #1769e0;
}

.craft-center-page .craft-page-panel {
    padding: 14px;
    border-color: #dbe4ef;
    box-shadow: 0 10px 28px rgba(15, 35, 65, 0.06);
}

.craft-center-page h1,
.craft-center-page h2,
.craft-center-page h3 {
    color: var(--craft-ink);
}

.craft-center-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.craft-center-editor {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.craft-center-section {
    overflow: hidden;
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: #fff;
}

.craft-center-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--craft-line);
}

.craft-center-section-head h2 {
    margin: 0;
    font-size: 18px;
}

.craft-center-section-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.craft-material-copy-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.craft-material-copy-tools input,
.craft-material-copy-tools select,
.craft-material-copy-tools button {
    min-height: 36px;
    font-size: 12px;
}

.craft-material-copy-tools input,
.craft-material-copy-tools select {
    min-width: 170px;
}

.craft-center-table-wrap {
    overflow-x: auto;
}

.craft-center-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.craft-material-table {
    min-width: 1120px;
}

.craft-center-table th,
.craft-center-table td {
    border-bottom: 1px solid #e8edf4;
    border-right: 1px solid #edf1f6;
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}

.craft-center-table th:last-child,
.craft-center-table td:last-child {
    border-right: 0;
}

.craft-center-table tbody tr:last-child td {
    border-bottom: 0;
}

.craft-center-table th {
    background: #f7f9fc;
    color: #435269;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.craft-center-table input:not([type="hidden"]):not([type="file"]) {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border-color: transparent;
    border-radius: 5px;
    background: transparent;
    font-size: 13px;
}

.craft-center-table input:not([type="hidden"]):not([type="file"]):hover {
    border-color: #cbd7e6;
    background: #fff;
}

.craft-center-table input:not([type="hidden"]):not([type="file"]):focus {
    border-color: var(--craft-accent);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(23, 105, 224, 0.12);
}

.craft-center-table select {
    width: 100%;
    min-height: 32px;
    border: 1px solid #d6e0ec;
    border-radius: 5px;
    background: #f7f9fc;
    color: #314158;
    font-size: 12px;
}

.craft-center-table input[readonly] {
    color: #42536a;
    cursor: default;
}

.craft-material-table th:nth-child(1) { width: 22%; }
.craft-material-table th:nth-child(2) { width: 14%; }
.craft-material-table th:nth-child(3) { width: 9%; }
.craft-material-table th:nth-child(4) { width: 8%; }
.craft-material-table th:nth-child(5) { width: 9%; }
.craft-material-table th:nth-child(6) { width: 18%; }
.craft-material-table th:nth-child(7) { width: 11%; }
.craft-material-table th:nth-child(8) { width: 9%; }

.craft-material-meta-inputs input + input,
.craft-material-table td:nth-child(6) input + input {
    margin-top: 3px;
}

.craft-material-image-cell {
    display: flex;
    align-items: center;
    gap: 7px;
}

.craft-material-image-cell img {
    width: 46px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--craft-line);
    border-radius: 4px;
    background: #fff;
    object-fit: cover;
}

.craft-material-upload {
    display: inline-flex;
    position: relative;
    min-width: 48px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #a9bad0;
    border-radius: 5px;
    color: var(--craft-accent);
    cursor: pointer;
    font-size: 12px;
}

.craft-material-upload:hover {
    border-color: var(--craft-accent);
    background: #f3f7ff;
}

.craft-material-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.craft-inline-drop-status {
    flex: 0 0 100%;
    color: #7b8da4;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
}

[data-image-drop-zone] {
    transition: background-color .16s ease, box-shadow .16s ease, outline-color .16s ease;
}

[data-image-drop-zone].is-drag-over {
    outline: 2px solid #1769df;
    outline-offset: -2px;
    background: #eaf3ff !important;
    box-shadow: inset 0 0 0 1px rgba(23, 105, 223, .2);
}

[data-image-drop-zone].is-drop-ready {
    box-shadow: inset 0 0 0 1px rgba(31, 157, 93, .3);
}

[data-image-drop-status].is-error {
    color: #c43838 !important;
}

.craft-cost-value {
    color: #18345d;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right !important;
}

.craft-sensitive-row td {
    border-color: #f2d7df;
    background: #fff6f8;
    color: #9b3452;
}

.craft-center-savebar {
    position: sticky;
    bottom: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid #cbd8ea;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(22, 50, 88, 0.14);
    color: var(--muted);
    font-size: 13px;
    backdrop-filter: blur(8px);
}

.craft-center-savebar button {
    flex: 0 0 auto;
}

.craft-center-rail {
    display: grid;
    position: sticky;
    top: 14px;
    gap: 12px;
}

.craft-center-rail > section {
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: #fff;
}

.craft-center-style-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
}

.craft-center-thumb {
    display: flex;
    min-height: 154px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--craft-line);
    border-radius: 6px;
    background: #f5f7fa;
    color: var(--muted);
    font-size: 12px;
}

.craft-center-thumb img {
    width: 100%;
    height: 100%;
    min-height: 154px;
    object-fit: contain;
}

.craft-center-label {
    color: var(--muted);
    font-size: 12px;
}

.craft-center-style-card h2 {
    margin: 5px 0 8px;
    font-size: 24px;
}

.craft-center-style-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.craft-center-checklist,
.craft-center-summary,
.craft-center-admin-summary {
    padding: 13px 14px;
}

.craft-center-rail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.craft-center-rail h3 {
    margin: 0;
    font-size: 15px;
}

.craft-center-checklist ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.craft-center-checklist li {
    position: relative;
    padding-left: 23px;
    color: #68768a;
    font-size: 13px;
}

.craft-center-checklist li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #b9c6d6;
    border-radius: 3px;
    background: #fff;
}

.craft-center-checklist li.is-done {
    color: #245b48;
}

.craft-center-checklist li.is-done::before {
    content: "✓";
    border-color: #1fa36a;
    background: #1fa36a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.craft-center-summary {
    background: #f7f9fc !important;
}

.craft-center-admin-summary {
    border-color: #f1ccd6 !important;
    background: #fff6f8 !important;
}

.craft-center-summary dl,
.craft-center-admin-summary dl {
    margin: 10px 0 0;
}

.craft-center-summary dl > div,
.craft-center-admin-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(137, 154, 177, 0.25);
}

.craft-center-summary dt,
.craft-center-admin-summary dt {
    color: #536278;
}

.craft-center-summary dd,
.craft-center-admin-summary dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.craft-center-summary-total {
    border-bottom: 0 !important;
    color: var(--craft-accent);
    font-weight: 800;
}

.craft-library-page {
    --craft-ink: #14233b;
    --craft-soft: #f5f8fc;
    --craft-line: #dbe4ef;
    --craft-accent: #1769e0;
}

.craft-library-head {
    align-items: flex-end;
}

.craft-library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 14px;
    align-items: start;
}

.craft-library-main,
.craft-library-editor {
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15, 35, 65, 0.05);
}

.craft-library-main {
    min-width: 0;
    overflow: hidden;
}

.craft-library-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(130px, 0.75fr)) auto auto;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--craft-line);
}

.craft-library-filters input,
.craft-library-filters select,
.craft-library-filters button,
.craft-library-filters .button {
    min-height: 38px;
    font-size: 13px;
}

.craft-library-table-wrap {
    overflow-x: auto;
}

.craft-library-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
    color: #25354c;
    font-size: 13px;
}

.craft-library-table th,
.craft-library-table td {
    padding: 8px 9px;
    border-right: 1px solid #edf1f6;
    border-bottom: 1px solid #e5ebf3;
    text-align: left;
    vertical-align: middle;
}

.craft-library-table th:last-child,
.craft-library-table td:last-child {
    border-right: 0;
}

.craft-library-table th {
    background: #f6f8fb;
    color: #41516a;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.craft-library-table tbody tr:hover td,
.craft-library-table tbody tr.is-selected td {
    background: #f4f8ff;
}

.craft-library-table th:nth-child(1) { width: 66px; }
.craft-library-table th:nth-child(2) { width: 94px; }
.craft-library-table th:nth-child(3) { width: 120px; }
.craft-library-table th:nth-child(4) { width: 52px; }
.craft-library-table th:nth-child(5) { width: 76px; }
.craft-library-table th:nth-child(6) { width: 128px; }
.craft-library-table th:nth-child(7) { width: 104px; }
.craft-library-table th:nth-child(8) { width: 82px; }
.craft-library-table th:nth-child(9) { width: 54px; }
.craft-library-table th:nth-child(10) { width: 84px; }

.craft-library-row-image,
.craft-library-no-image {
    display: block;
    width: 54px;
    height: 42px;
    border: 1px solid var(--craft-line);
    border-radius: 4px;
    background: #f4f6f9;
    object-fit: cover;
}

.craft-library-no-image {
    color: #8a97a8;
    font-size: 11px;
    line-height: 40px;
    text-align: center;
}

.craft-library-table td strong,
.craft-library-table td small {
    display: block;
}

.craft-library-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.craft-library-status {
    font-weight: 700;
}

.craft-library-status.is-active {
    color: #178351;
}

.craft-library-status.is-inactive {
    color: #cb3d4f;
}

.craft-library-actions {
    white-space: nowrap;
}

.craft-library-actions a,
.craft-library-actions .link-button {
    color: var(--craft-accent);
    font-size: 12px;
}

.craft-library-actions form {
    display: inline;
}

.craft-library-actions .link-button {
    min-height: 0;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.craft-library-count {
    padding: 11px 13px;
    color: var(--muted);
    font-size: 12px;
}

.craft-library-editor {
    position: sticky;
    top: 12px;
    overflow: hidden;
}

.craft-library-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--craft-line);
}

.craft-library-editor-head h2 {
    margin: 0;
    color: var(--craft-ink);
    font-size: 20px;
}

.craft-library-editor-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.craft-library-editor-head > a {
    color: #526279;
    font-size: 24px;
    line-height: 1;
}

.craft-library-form {
    padding: 14px;
}

.craft-library-image-field > span {
    display: block;
    margin-bottom: 7px;
    color: #3d4d64;
    font-size: 12px;
    font-weight: 700;
}

.craft-library-image-control {
    display: flex;
    gap: 10px;
    margin-bottom: 13px;
}

.craft-library-image-preview,
.craft-library-image-upload {
    display: flex;
    width: 116px;
    height: 92px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--craft-line);
    border-radius: 5px;
    background: #f4f6f9;
    color: var(--muted);
    font-size: 12px;
}

.craft-library-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.craft-library-image-upload {
    position: relative;
    border-style: dashed;
    border-color: #9eb2cc;
    background: #fff;
    color: var(--craft-accent);
    cursor: pointer;
}

.craft-library-image-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.craft-library-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.craft-library-span-2 {
    grid-column: span 2;
}

.craft-library-form .field {
    margin: 0;
}

.craft-library-form .field label {
    font-size: 12px;
}

.craft-library-form input,
.craft-library-form textarea {
    font-size: 13px;
}

.craft-library-active {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #42536a;
    font-size: 12px;
}

.craft-library-active input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.craft-library-public-note {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #d5e5fb;
    border-radius: 6px;
    background: #f2f7ff;
    color: #45617f;
    font-size: 12px;
    line-height: 1.5;
}

.craft-library-save {
    width: 100%;
    margin-top: 13px;
}

.craft-supplier-main-column {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.craft-supplier-filters {
    grid-template-columns: minmax(280px, 1fr) 150px auto auto;
}

.craft-supplier-table {
    min-width: 850px;
}

.craft-supplier-table th:nth-child(1) { width: 130px; }
.craft-supplier-table th:nth-child(2) { width: 72px; }
.craft-supplier-table th:nth-child(3) { width: 105px; }
.craft-supplier-table th:nth-child(4) { width: 160px; }
.craft-supplier-table th:nth-child(5) { width: 70px; }
.craft-supplier-table th:nth-child(6) { width: 85px; }
.craft-supplier-table th:nth-child(7) { width: 80px; }
.craft-supplier-table th:nth-child(8) { width: 56px; }
.craft-supplier-table th:nth-child(9) { width: 78px; }

.craft-supplier-address {
    color: #536278;
    line-height: 1.45;
}

.craft-supplier-quotes {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15, 35, 65, 0.05);
}

.craft-supplier-quotes-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--craft-line);
}

.craft-supplier-quotes-head h2 {
    margin: 0;
    color: var(--craft-ink);
    font-size: 18px;
}

.craft-supplier-quotes-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.craft-supplier-quote-form {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(135px, 0.8fr) 105px 135px auto;
    gap: 8px;
    align-items: end;
    padding: 12px;
    border-bottom: 1px solid var(--craft-line);
    background: #fbfcfe;
}

.craft-supplier-quote-form[hidden] {
    display: none;
}

.craft-supplier-quote-form .field {
    margin: 0;
}

.craft-supplier-quote-form label {
    font-size: 12px;
}

.craft-supplier-quote-form input,
.craft-supplier-quote-form select,
.craft-supplier-quote-form button {
    min-height: 38px;
    font-size: 13px;
}

.craft-price-history-table {
    min-width: 690px;
}

.craft-price-history-wrap {
    max-height: 300px;
    overflow: auto;
}

.craft-price-history-wrap .craft-price-history-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.craft-price-history-table th:nth-child(1) { width: 210px; }
.craft-price-history-table th:nth-child(2) { width: 130px; }
.craft-price-history-table th:nth-child(3) { width: 70px; }
.craft-price-history-table th:nth-child(4) { width: 90px; }
.craft-price-history-table th:nth-child(5) { width: 110px; }
.craft-price-history-table th:nth-child(6) { width: 90px; }

.craft-supplier-price-note {
    margin: 12px;
}

.craft-supplier-empty-guide {
    margin: 12px;
    padding: 12px;
    border: 1px dashed #b7c6d9;
    border-radius: 6px;
    color: #526279;
    font-size: 13px;
}

.craft-supplier-empty-guide a {
    margin-left: 4px;
    color: var(--craft-accent);
}

.craft-document-panel {
    margin-top: 18px;
    border: 1px solid var(--craft-line);
    border-radius: 8px;
    background: #fff;
}

.craft-document-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

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

.craft-document-panel > summary span:first-child {
    display: grid;
    gap: 3px;
}

.craft-document-panel > summary strong {
    color: var(--craft-ink);
    font-size: 17px;
}

.craft-document-panel > summary small,
.craft-document-toggle {
    color: var(--muted);
    font-size: 12px;
}

.craft-document-panel .craft-sheet-scroll {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 0 8px 8px;
}

.craft-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.craft-actions {
    display: flex;
    gap: 8px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

.checkbox-inline input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.craft-sheet-scroll {
    overflow-x: hidden;
    padding: 10px;
    background: #eef1f5;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.craft-a4 {
    width: 100%;
    max-width: 1600px;
    height: auto;
    aspect-ratio: 297 / 210;
    margin: 0 auto;
    padding: clamp(14px, 1.6vw, 28px);
    background: #fff;
    color: #000;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.craft-sheet {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: clamp(12px, 0.82vw, 15px);
    line-height: 1.25;
}

.craft-sheet th,
.craft-sheet td {
    border: 1px solid #000;
    padding: 3px 5px;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}

.craft-sheet th {
    height: 7.4mm;
    color: #000;
    font-weight: 700;
}

.craft-sheet tbody tr {
    height: calc((100% - 7.4mm) / 30);
}

.craft-col-style {
    width: 22.5%;
}

.craft-col-cut {
    width: 26%;
}

.craft-col-supplier,
.craft-col-material,
.craft-col-usage {
    width: 9.5%;
}

.craft-col-process {
    width: 23%;
}

.craft-image-cell {
    position: relative;
    overflow: hidden;
    padding: 2px;
}

.craft-image-cell img {
    display: block;
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: contain;
}

.craft-note-title-cell {
    font-weight: 400;
}

.craft-note-body-cell {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    white-space: pre-wrap;
}

.craft-note-body-cell {
    position: relative;
    padding: 0;
}

.craft-note-editor {
    position: absolute;
    inset: 6px 8px;
    width: calc(100% - 16px);
    height: calc(100% - 12px);
    border: 0;
    padding: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: #000;
    font: inherit;
    line-height: 1.35;
    outline: none;
    text-align: start;
    white-space: pre-wrap;
}

.craft-cut-cell {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.craft-cut-upload {
    position: absolute;
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.craft-cut-upload.has-image {
    cursor: default;
}

.craft-cut-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.craft-cut-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: #fff;
    cursor: zoom-in;
}

.craft-cut-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.craft-cut-empty {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border: 1px dashed #bfdbfe;
    background: #f8fafc;
    color: #2563eb;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
}

.craft-cut-empty:hover {
    background: #eff6ff;
}

.craft-cut-actions {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: flex;
    gap: 4px;
}

.craft-cut-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #2563eb;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}

.craft-cut-action:hover {
    background: #eff6ff;
}

.craft-cut-delete {
    border-color: #fecaca;
    color: #dc2626;
}

.craft-cut-delete:hover {
    background: #fef2f2;
}

.craft-cut-thumb {
    display: flex;
    position: absolute;
    inset: 2px;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.craft-cut-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--line);
}

.craft-cut-text {
    position: absolute;
    inset: 6px 8px;
    overflow: hidden;
    white-space: pre-wrap;
    text-align: left;
    line-height: 1.35;
}

.craft-process-cell {
    position: relative;
    text-align: start;
    vertical-align: top;
    padding: 6px 8px;
    font-size: clamp(13px, 0.9vw, 16px);
    line-height: 1.4;
}

.craft-sheet td.craft-process-cell {
    text-align: start;
    vertical-align: top;
}

.craft-process-title {
    min-height: 20px;
}

.craft-process-editor {
    position: absolute;
    top: 28px;
    right: 8px;
    bottom: 6px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 34px);
    border: 0;
    padding: 0;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: #000;
    font: inherit;
    line-height: 1.45;
    outline: none;
    text-align: start;
    white-space: pre-wrap;
}

.craft-edit-cell {
    padding: 0;
}

.craft-cell-input {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    padding: 2px 4px;
    background: transparent;
    color: #000;
    font: inherit;
    text-align: center;
    outline: none;
}

.craft-cell-input:focus,
.craft-note-editor:focus,
.craft-process-editor:focus {
    background: #fffde8;
    box-shadow: inset 0 0 0 1px #2563eb;
}

.craft-extra-pages {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.craft-extra-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.craft-extra-upload {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.craft-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.craft-extra-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.craft-extra-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
}

.craft-extra-edit {
    display: grid;
    gap: 8px;
}

.craft-extra-print-pages {
    display: none;
}

.craft-extra-a4 {
    width: 297mm;
    height: 210mm;
    padding: 8mm;
    background: #fff;
}

.craft-extra-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid #111827;
    font-size: 16px;
}

.craft-extra-a4 img {
    width: 100%;
    height: calc(100% - 14mm);
    object-fit: contain;
}

@media (max-width: 1280px) {
    .craft-center-workspace {
        grid-template-columns: 1fr;
    }

    .craft-library-layout {
        grid-template-columns: 1fr;
    }

    .craft-library-editor {
        position: static;
    }

    .craft-center-rail {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .craft-center-style-card {
        grid-row: span 2;
    }
}

@media (max-width: 760px) {
    .craft-center-page .craft-page-panel {
        padding: 10px;
    }

    .craft-center-rail {
        grid-template-columns: 1fr;
    }

    .craft-center-style-card {
        grid-row: auto;
    }

    .craft-center-savebar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .craft-center-savebar button {
        width: 100%;
    }

    .craft-center-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .craft-material-copy-tools {
        width: 100%;
    }

    .craft-material-copy-tools input,
    .craft-material-copy-tools select {
        min-width: 0;
        flex: 1;
    }

    .craft-document-panel > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .craft-extra-upload {
        grid-template-columns: 1fr;
    }

    .craft-library-filters {
        grid-template-columns: 1fr;
    }

    .craft-supplier-quote-form {
        grid-template-columns: 1fr;
    }

    .craft-supplier-quote-form button {
        width: 100%;
    }

    .craft-library-form-grid {
        grid-template-columns: 1fr;
    }

    .craft-library-span-2 {
        grid-column: auto;
    }

    .craft-library-image-control {
        align-items: stretch;
    }
}

/* Craft center compact workbench */
.craft-center-mode {
    --bg: #f3f6fa;
}

.craft-center-mode .shell {
    grid-template-columns: 160px minmax(0, 1fr);
}

.craft-center-mode .sidebar {
    gap: 14px;
    padding: 18px 12px;
    border-right: 0;
    background: #17324f;
    color: #fff;
}

.craft-center-mode .brand {
    padding: 0 7px 13px;
    color: #fff;
    font-size: 16px;
}

.craft-center-mode .nav {
    gap: 4px;
}

.craft-center-mode .nav a {
    padding: 10px 11px;
    border-radius: 5px;
    color: #c9d6e4;
    font-size: 13px;
}

.craft-center-mode .nav a:hover {
    background: #244563;
    color: #fff;
}

.craft-center-mode .nav a.active {
    background: #1769df;
    color: #fff;
}

.craft-center-mode .user-box {
    border-color: #36516c;
}

.craft-center-mode .user-role {
    color: #aebfd0;
}

.craft-center-mode .user-box .button-secondary {
    border-color: #49647e;
    background: #244563;
    color: #fff;
}

.craft-center-mode .content {
    padding: 14px 12px 28px;
}

.craft-center-page .craft-screen-head {
    align-items: center;
    margin-bottom: 10px;
}

.craft-center-page .craft-screen-head h1 {
    margin-bottom: 2px;
    font-size: 23px;
}

.craft-center-page .craft-screen-head .muted {
    font-size: 12px;
}

.craft-center-page .craft-page-panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.craft-center-page .craft-toolbar {
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid #dce4ef;
    border-radius: 6px;
    background: #fff;
}

.craft-center-page .cost-style-selector {
    align-items: end;
}

.craft-center-page .cost-style-selector .field {
    margin: 0;
}

.craft-center-page .cost-style-selector label {
    margin-bottom: 4px;
    font-size: 11px;
}

.craft-center-page .cost-style-selector select,
.craft-center-page .craft-toolbar .button,
.craft-center-page .craft-toolbar button {
    min-height: 34px;
    font-size: 12px;
}

.craft-center-page .craft-review-bar {
    margin-bottom: 10px;
    padding: 9px 11px;
}

.craft-center-page .craft-review-copy strong {
    margin-top: 3px;
    font-size: 13px;
}

.craft-center-page .craft-review-copy small {
    margin-top: 2px;
    font-size: 11px;
}

.craft-center-workspace {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 10px;
}

.craft-center-main-column {
    display: contents;
}

.craft-center-main-column > .craft-center-editor {
    grid-column: 1;
    grid-row: 1;
}

.craft-center-main-column > .craft-center-general-note {
    grid-column: 1 / -1;
    grid-row: 2;
}

.craft-center-main-column > .craft-department-stack {
    grid-column: 1 / -1;
    grid-row: 3;
}

.craft-center-main-column > .craft-unassigned-images {
    grid-column: 1 / -1;
    grid-row: 4;
}

.craft-center-editor {
    gap: 10px;
}

.craft-center-section {
    border-radius: 6px;
}

.craft-center-section-head {
    padding: 7px 9px 6px;
    flex-wrap: wrap;
}

.craft-center-section-head > div:first-child {
    flex: 1 1 280px;
}

.craft-center-section-head h2 {
    font-size: 17px;
}

.craft-center-section-head p {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
}

.craft-center-section-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.craft-center-section-actions .craft-material-copy-tools {
    flex: 0 0 auto;
}

.craft-material-copy-tools button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.craft-add-row-button {
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid #8db8f1;
    border-radius: 4px;
    background: #f4f8ff;
    color: #1769df;
    font-size: 11px;
    white-space: nowrap;
}

.craft-add-row-button:hover {
    border-color: #1769df;
    background: #eaf2ff;
}

.craft-center-table {
    min-width: 560px;
    font-size: 13px;
}

.craft-material-table {
    min-width: 760px;
}

.craft-center-table th,
.craft-center-table td {
    padding: 5px 4px;
}

.craft-center-table input:not([type="hidden"]):not([type="file"]),
.craft-center-table select {
    min-height: 30px;
    padding: 3px 5px;
    font-size: 12px;
}

.craft-center-mode .craft-material-name-inputs,
.craft-center-mode .craft-material-supplier-inputs,
.craft-center-mode .craft-material-usage-inputs {
    white-space: nowrap;
}

.craft-center-mode .craft-material-supplier-inputs input {
    display: inline-block;
    width: calc(50% - 2px);
    margin: 0;
    vertical-align: middle;
}

.craft-center-mode .craft-material-name-inputs input,
.craft-center-mode .craft-material-name-inputs select {
    display: block;
    width: 100%;
    margin: 0;
}

.craft-center-mode .craft-material-name-inputs select {
    font-weight: 600;
    color: #18324f;
}

.craft-center-mode .craft-material-usage-inputs input,
.craft-center-mode .craft-unit-select {
    width: 100%;
    margin: 0;
}

.craft-center-mode .craft-unit-cell small {
    display: block;
    min-height: 12px;
    margin-top: 1px;
    color: #277047;
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
}

.craft-center-mode .craft-unit-cell small.is-warning {
    color: #b45309;
}

.craft-center-mode .craft-material-image-cell img {
    width: 46px;
    height: 36px;
}

.craft-center-mode .craft-material-upload {
    min-width: 42px;
    min-height: 30px;
    font-size: 11px;
}

.craft-center-mode .craft-material-table th:nth-child(1) { width: 4%; }
.craft-center-mode .craft-material-table th:nth-child(2) { width: 15%; }
.craft-center-mode .craft-material-table th:nth-child(3) { width: 10%; }
.craft-center-mode .craft-material-table th:nth-child(4) { width: 7%; }
.craft-center-mode .craft-material-table th:nth-child(5) { width: 15%; }
.craft-center-mode .craft-material-table th:nth-child(6) { width: 9%; }
.craft-center-mode .craft-material-table th:nth-child(7) { width: 8%; }
.craft-center-mode .craft-material-table th:nth-child(8) { width: 8%; }
.craft-center-mode .craft-material-table th:nth-child(9) { width: 10%; }
.craft-center-mode .craft-material-table th:nth-child(10) { width: 8%; }
.craft-center-mode .craft-material-table th:nth-child(11) { width: 6%; }

.craft-center-mode .craft-material-table th,
.craft-center-mode .craft-process-table th,
.craft-center-mode .craft-accessory-table th {
    padding: 5px 2px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.craft-center-table tfoot td {
    border-top: 1px solid #d8e1ec;
    border-bottom: 0;
    background: #f7f9fc;
    font-weight: 800;
}

.craft-center-table tfoot td:first-child {
    color: #435269;
    text-align: right;
}

.craft-table-sequence {
    color: #5d6c80;
    font-weight: 700;
    text-align: center !important;
}

.craft-table-operation {
    text-align: center !important;
}

.craft-table-operation .link-button {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1769df;
    font-size: 10px;
    white-space: nowrap;
}

.craft-center-mode .craft-center-table input:not([type="hidden"]):not([type="file"]),
.craft-center-mode .craft-center-table select {
    border: 1px solid #d9e2ed;
    background: #fff;
}

.craft-process-table th:nth-child(1) {
    width: 7%;
}

.craft-process-table th:nth-child(2) { width: 19%; }
.craft-process-table th:nth-child(3) { width: 17%; }
.craft-process-table th:nth-child(4) { width: 15%; }
.craft-process-table th:nth-child(5) { width: 23%; }
.craft-process-table th:nth-child(6) { width: 12%; }
.craft-process-table th:nth-child(7) { width: 7%; }

.craft-center-admin-summary > p {
    margin: -3px 0 7px;
    color: #a35d67;
    font-size: 10px;
}

.craft-center-admin-summary dd input[type="number"] {
    width: 86px;
    min-height: 27px;
    padding: 3px 6px;
    border: 1px solid #e7c9cf;
    border-radius: 4px;
    background: #fff;
    text-align: right;
}

.craft-center-savebar {
    position: static;
    padding: 8px 10px;
    box-shadow: none;
}

.craft-center-rail {
    grid-template-columns: 1fr;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 10px;
    align-self: start;
    gap: 9px;
}

.craft-center-rail > section {
    border-radius: 6px;
}

.craft-center-style-card {
    display: block;
    grid-row: auto;
    padding: 10px 11px;
}

.craft-center-style-card > h3 {
    margin-bottom: 9px;
    padding-left: 8px;
    border-left: 3px solid var(--craft-accent);
}

.craft-center-style-card-body {
    display: block;
}

.craft-center-style-card dl {
    margin: 9px 0 0;
    padding: 0 8px;
}

.craft-center-style-card dl > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 15px;
    line-height: 1.45;
}

.craft-center-style-card dt {
    color: #708096;
}

.craft-center-style-card dd {
    margin: 0;
    color: #20334d;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.craft-center-thumb,
.craft-center-thumb img {
    min-height: 0;
    height: 420px;
}

.craft-center-thumb {
    border-radius: 9px;
    background: #f6f8fb;
}

.craft-center-thumb img {
    object-fit: contain;
}

.craft-center-thumb-preview {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
}

.craft-center-thumb-preview:hover img {
    transform: scale(1.025);
}

.craft-center-thumb-preview img {
    display: block;
    transition: transform .18s ease;
}

.craft-style-image-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    margin: 7px 8px 0;
}

.craft-style-image-form button,
.craft-style-image-picker {
    min-height: 26px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
}

.craft-style-image-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #9bb5d5;
    background: #f6f9fd;
    color: #1769df;
    cursor: pointer;
}

.craft-style-image-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.craft-style-image-hint {
    display: block;
    margin-top: 4px;
    color: #718096;
    font-size: 10px;
    text-align: center;
}

.craft-center-style-visual > .craft-style-image-hint {
    margin-right: 8px;
    margin-left: 8px;
}

.craft-department-drop-status,
.craft-process-drop-status,
.craft-library-image-status {
    display: block;
    margin-top: 5px;
    color: #6d7f96;
    font-size: 10px;
}

.craft-process-drop-status {
    grid-column: 1 / -1;
    margin-top: 0;
}

.craft-library-image-upload span {
    display: grid;
    gap: 3px;
    text-align: center;
}

.craft-library-image-upload small {
    color: #7589a3;
    font-size: 10px;
    font-weight: 400;
}

.craft-center-checklist,
.craft-center-summary,
.craft-center-admin-summary {
    padding: 11px 12px;
}

.craft-center-progress {
    height: 6px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5eaf0;
}

.craft-center-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #20ad62;
}

.craft-center-general-note,
.craft-department-panel,
.craft-unassigned-images {
    overflow: hidden;
    border: 1px solid var(--craft-line);
    border-radius: 6px;
    background: #fff;
}

.craft-center-general-note {
    padding: 11px;
}

.craft-center-compact-head,
.craft-department-head,
.craft-department-column-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.craft-center-compact-head h2,
.craft-department-head h2,
.craft-department-column-title h3,
.craft-unassigned-images h2 {
    margin: 0;
}

.craft-center-compact-head h2,
.craft-department-head h2,
.craft-unassigned-images h2 {
    font-size: 15px;
}

.craft-center-compact-head p,
.craft-department-head p,
.craft-unassigned-images p {
    margin: 3px 0 0;
    color: #66758a;
    font-size: 11px;
}

.craft-center-general-note form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin-top: 9px;
}

.craft-center-general-note textarea {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    border: 1px solid #d4deea;
    border-radius: 5px;
    padding: 8px 9px;
    color: #23364e;
    font: 12px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.craft-department-stack {
    display: grid;
    gap: 10px;
}

.craft-department-head {
    padding: 10px 11px;
    border-bottom: 1px solid #e1e8f1;
}

.craft-department-head h2 {
    padding-left: 8px;
    border-left: 3px solid #1c70e5;
}

.craft-department-head > span {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.craft-department-layout {
    display: grid;
    grid-template-columns: minmax(260px, 3fr) minmax(0, 7fr);
    align-items: stretch;
}

.craft-department-instructions,
.craft-department-media {
    min-width: 0;
    padding: 10px;
}

.craft-department-media {
    border-left: 1px solid #e1e8f1;
    background: #fbfcfe;
}

.craft-department-column-title {
    margin-bottom: 8px;
}

.craft-department-column-title h3 {
    font-size: 13px;
}

.craft-department-column-title span {
    color: #748399;
    font-size: 10px;
}

.craft-department-direct-form {
    display: grid;
    gap: 8px;
}

.craft-department-direct-form textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid #cfdbea;
    border-radius: 5px;
    background: #fff;
    padding: 9px 10px;
    color: #25384f;
    font: 12px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.craft-department-direct-form textarea:focus {
    outline: 2px solid rgba(23, 105, 223, .16);
    border-color: #1769df;
}

.craft-department-direct-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.craft-department-direct-actions small {
    color: #7a889b;
    font-size: 10px;
}

.craft-department-direct-actions button {
    min-width: 88px;
}

.craft-department-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    overflow: hidden;
    margin-bottom: 7px;
    border: 1px solid #dce4ee;
    border-radius: 5px;
}

.craft-department-step-no {
    display: grid;
    grid-row: 1 / span 2;
    place-items: start center;
    padding-top: 12px;
    border-right: 1px solid #dce4ee;
    background: #f1f6fd;
    color: #1769df;
    font-size: 12px;
    font-weight: 800;
}

.craft-department-step-form,
.craft-department-add form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px;
}

.craft-department-step-form label,
.craft-department-add form label,
.craft-department-upload label,
.craft-department-image-actions label {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: #657388;
    font-size: 10px;
    font-weight: 700;
}

.craft-department-step-form input,
.craft-department-step-form textarea,
.craft-department-add input,
.craft-department-add textarea,
.craft-department-upload input,
.craft-department-upload select,
.craft-department-image-actions input {
    width: 100%;
    min-width: 0;
    border: 1px solid #d3deea;
    border-radius: 4px;
    background: #fff;
    color: #25384f;
    font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.craft-department-step-form input,
.craft-department-add input,
.craft-department-upload input,
.craft-department-upload select,
.craft-department-image-actions input {
    min-height: 30px;
    padding: 4px 6px;
}

.craft-department-step-form textarea,
.craft-department-add textarea {
    padding: 6px;
    resize: vertical;
}

.craft-department-step-save {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.craft-department-step-save .checkbox-inline,
.craft-department-upload .checkbox-inline,
.craft-department-image-actions .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px;
}

.craft-department-step-save input[type="checkbox"],
.craft-department-upload input[type="checkbox"],
.craft-department-image-actions input[type="checkbox"] {
    width: 15px;
    min-height: 15px;
    height: 15px;
}

.craft-department-step-actions {
    display: flex;
    grid-column: 2;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 8px 7px;
}

.craft-department-step-actions form {
    display: flex;
    gap: 9px;
}

.craft-department-step-actions .link-button {
    min-height: auto;
    padding: 0;
    color: #58708e;
    font-size: 10px;
}

.craft-department-step-actions .craft-department-delete {
    color: #c2415d;
}

.craft-department-empty,
.craft-department-upload-hint {
    padding: 16px 10px;
    border: 1px dashed #cbd6e4;
    border-radius: 5px;
    color: #7a889b;
    font-size: 11px;
    text-align: center;
}

.craft-department-add {
    margin-top: 8px;
}

.craft-department-add > summary {
    width: fit-content;
    color: #1769df;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.craft-department-add form {
    margin-top: 7px;
    border: 1px solid #c9ddfb;
    border-radius: 5px;
    background: #f5f9ff;
}

.craft-department-add form > .checkbox-inline,
.craft-department-add form > button {
    align-self: end;
}

.craft-department-gallery {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.craft-department-image-card {
    min-width: 0;
    border: 1px solid #dce4ee;
    border-radius: 5px;
    background: #fff;
}

.craft-department-image-placeholder {
    display: flex;
    aspect-ratio: 4 / 3;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border: 1px dashed #9fb9db;
    border-radius: 5px;
    background: #f7faff;
    color: #1769df;
    cursor: pointer;
    text-align: center;
}

.craft-department-image-placeholder > span {
    font-size: 18px;
    line-height: 1;
}

.craft-department-image-placeholder > strong {
    font-size: 10px;
}

.craft-department-image-placeholder > small {
    color: #788aa2;
    font-size: 9px;
}

.craft-department-image-placeholder:hover {
    border-color: #1769df;
    background: #edf4ff;
}

.craft-department-image-placeholder.is-disabled {
    border-color: #d6dee9;
    background: #fafbfd;
    color: #9aa8ba;
    cursor: default;
}

.craft-department-image-placeholder.is-disabled:hover {
    border-color: #d6dee9;
    background: #fafbfd;
}

.craft-department-gallery-note {
    margin-top: 6px;
    color: #7a889b;
    font-size: 10px;
    text-align: center;
}

.craft-department-image-card > summary {
    cursor: pointer;
    list-style: none;
}

.craft-department-image-card > summary::-webkit-details-marker {
    display: none;
}

.craft-department-image-preview {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 4px 4px 0 0;
    background: transparent;
    cursor: zoom-in;
}

.craft-department-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid #e1e7ef;
    background: #f4f6f8;
    object-fit: cover;
}

.craft-department-image-card summary > span {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 5px 6px;
    color: #3b4f68;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-department-image-card summary > span > small {
    flex: 0 0 auto;
    color: #1769df;
    font-size: 9px;
}

.craft-department-image-actions {
    display: grid;
    gap: 6px;
    padding: 6px;
    border-top: 1px solid #e7ecf2;
}

.craft-department-image-actions form {
    display: grid;
    gap: 5px;
}

.craft-department-image-actions .button,
.craft-department-image-actions button {
    min-height: 28px;
    padding: 4px 6px;
    font-size: 10px;
    text-align: center;
}

.craft-department-upload {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) auto auto;
    gap: 7px;
    align-items: end;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #e2e8f0;
}

.craft-department-upload .checkbox-inline {
    grid-column: auto;
    align-self: center;
}

.craft-department-upload > button {
    min-height: 30px;
    white-space: nowrap;
}

.craft-unassigned-images {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 12px;
    padding: 11px;
}

.craft-unassigned-images > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.craft-unassigned-images img {
    width: 86px;
    height: 64px;
    border: 1px solid #dce4ee;
    object-fit: cover;
}

.craft-library-waste-note {
    align-content: center;
    color: #66758a;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 1150px) {
    .craft-center-workspace {
        grid-template-columns: 1fr;
    }

    .craft-center-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column: 1;
        grid-row: 2;
    }

    .craft-center-main-column > .craft-center-editor {
        grid-column: 1;
        grid-row: 1;
    }

    .craft-center-main-column > .craft-center-general-note {
        grid-column: 1;
        grid-row: 3;
    }

    .craft-center-main-column > .craft-department-stack {
        grid-column: 1;
        grid-row: 4;
    }

    .craft-center-main-column > .craft-unassigned-images {
        grid-column: 1;
        grid-row: 5;
    }

    .craft-center-style-card {
        grid-row: auto;
    }

    .craft-center-admin-summary {
        grid-column: auto;
    }
}

@media (max-width: 860px) {
    .craft-center-mode .shell {
        display: block;
    }

    .craft-center-mode .sidebar {
        position: static;
        min-height: 0;
    }

    .craft-center-mode .nav {
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .craft-center-mode .nav a {
        flex: 0 0 auto;
    }

    .craft-department-layout,
    .craft-unassigned-images {
        grid-template-columns: 1fr;
    }

    .craft-department-media {
        border-top: 1px solid #e1e8f1;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .craft-center-mode .content {
        padding: 10px 8px 24px;
    }

    .craft-center-page .craft-screen-head .actions,
    .craft-center-page .craft-toolbar,
    .craft-center-page .craft-actions,
    .craft-center-general-note form,
    .craft-department-step-form,
    .craft-department-add form,
    .craft-department-upload {
        grid-template-columns: 1fr;
    }

    .craft-center-page .craft-toolbar {
        display: grid;
    }

    .craft-center-page .cost-style-selector,
    .craft-center-page .craft-actions {
        width: 100%;
    }

    .craft-center-page .craft-actions > *,
    .craft-center-page .cost-style-selector button {
        flex: 1;
        text-align: center;
    }

    .craft-center-rail {
        grid-template-columns: 1fr;
    }

    .craft-center-general-note form button {
        width: 100%;
    }

    .craft-department-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .craft-department-step-form label,
    .craft-department-step-save {
        grid-column: auto;
    }

    .craft-department-step-save {
        align-items: stretch;
        flex-direction: column;
    }

    .craft-department-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .craft-department-upload .checkbox-inline {
        grid-column: auto;
    }
}

.quote-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.quote-table table {
    min-width: 2400px;
}

.quote-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    text-align: center;
}

.quote-table td {
    padding: 8px;
    text-align: center;
}

.quote-table input {
    min-height: 34px;
    min-width: 72px;
    padding: 6px 8px;
    text-align: center;
}

.quote-table tbody tr:nth-child(even) {
    background: #e9f4ff;
}

.quote-table tbody tr td:nth-child(n+16):nth-child(-n+18) {
    background: #fff5cf;
}

.quote-table tbody tr td:nth-child(n+19):nth-child(-n+21) {
    background: #dcefd1;
}

.quote-table tbody tr td:nth-child(n+22):nth-child(-n+23) {
    background: #fde3d5;
}

.quote-image-cell {
    min-width: 120px;
}

.quote-image {
    display: block;
    width: 88px;
    height: 112px;
    margin: 0 auto 6px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.quote-file {
    max-width: 120px;
    font-size: 12px;
}

.calc,
.total {
    color: #e60000;
    font-weight: 700;
}

.total {
    color: #111827;
    background: #fff;
}

.actions-cell {
    min-width: 132px;
}

.actions-cell form {
    display: inline-flex;
    margin-top: 6px;
}

.order-quote-table table {
    min-width: 1260px;
}

.order-quote-table th,
.order-quote-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.quote-print-body {
    margin: 0;
    padding: 16px;
    background: #eef2f6;
    color: #111827;
}

.quote-print-toolbar,
.quote-print-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quote-print-toolbar {
    max-width: 1280px;
    margin: 0 auto 16px;
}

.quote-print-toolbar h1,
.quote-print-title h2 {
    margin: 0;
}

.quote-print-sheet {
    width: 100%;
    max-width: 1280px;
    min-height: 190mm;
    margin: 0 auto;
    padding: 10mm;
    background: #fff;
    box-shadow: 0 2px 12px rgb(15 23 42 / 10%);
}

.quote-print-title {
    margin-bottom: 8px;
}

.quote-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.quote-print-table th,
.quote-print-table td {
    padding: 5px;
    border: 1px solid #9ca3af;
    text-align: center;
    vertical-align: middle;
}

.quote-print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
}

.quote-print-table tfoot th {
    background: #f3f4f6;
}

.quote-print-thumb {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    object-fit: cover;
}

.worker-register-body {
    min-height: 100vh;
    margin: 0;
    background: #eef2f7;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.worker-register-page {
    display: grid;
    min-height: 100vh;
    place-items: start center;
    padding: 18px 12px;
}

.worker-register-card {
    width: min(520px, 100%);
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
}

.worker-register-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.worker-register-head h1 {
    margin: 4px 0 0;
}

.worker-register-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.worker-register-form {
    display: grid;
    gap: 12px;
}

.worker-register-account,
.worker-register-login-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.worker-register-account > div,
.worker-register-login-panel > div {
    display: grid;
    gap: 4px;
}

.worker-register-account span,
.worker-register-login-panel span {
    color: var(--muted);
    font-size: 13px;
}

.worker-register-account strong,
.worker-register-login-panel strong {
    color: var(--text);
}

.worker-register-account em {
    color: var(--danger);
    font-size: 12px;
    font-style: normal;
}

.worker-register-login-button {
    white-space: nowrap;
}

.worker-register-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.worker-register-entry-button {
    justify-content: center;
    text-align: center;
}

.worker-register-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
}

.worker-register-identity div {
    display: grid;
    gap: 3px;
}

.worker-register-identity span {
    color: var(--muted);
    font-size: 13px;
}

.worker-register-identity strong {
    font-size: 20px;
}

.worker-register-identity-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.worker-register-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.worker-register-price strong {
    font-size: 24px;
    color: var(--primary);
}

.worker-register-order-preview {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.worker-register-order-preview[hidden] {
    display: none;
}

.worker-register-order-preview-title {
    color: #1e40af;
    font-weight: 800;
}

.worker-register-order-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.worker-register-order-preview-grid div {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid #dbeafe;
    border-radius: 7px;
    background: #fff;
}

.worker-register-order-preview-grid span {
    color: #64748b;
    font-size: 12px;
}

.worker-register-order-preview-grid strong {
    color: #0f172a;
    font-size: 18px;
}

.worker-register-order-preview-warning {
    color: #92400e;
    font-weight: 700;
    line-height: 1.45;
}

.worker-register-result {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.worker-register-result h2 {
    margin: 0;
}

.factory-order-card {
    width: min(720px, 100%);
}

.factory-query-card {
    width: min(860px, 100%);
}

.factory-query-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.factory-query-summary div,
.factory-query-order-info div,
.factory-query-steps div,
.factory-query-style-summary div,
.factory-query-outbound-row div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.factory-query-summary span,
.factory-query-order-info span,
.factory-query-steps span,
.factory-query-style-summary span,
.factory-query-outbound-row span {
    color: var(--muted);
    font-size: 12px;
}

.factory-query-summary strong {
    color: var(--primary);
    font-size: 22px;
}

.factory-query-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 160px) minmax(120px, 160px) auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.factory-query-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.factory-query-list {
    display: grid;
    gap: 12px;
}

.factory-query-section {
    display: grid;
    gap: 10px;
}

.factory-query-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.factory-query-section-head h2 {
    margin: 0;
    font-size: 17px;
}

.factory-query-section-head span {
    color: var(--muted);
    font-size: 13px;
}

.factory-query-order {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.factory-query-order.is-late {
    border-color: #fecaca;
    background: #fff7f7;
}

.factory-query-order-head,
.factory-query-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.factory-query-order-head div {
    display: grid;
    gap: 3px;
}

.factory-query-order-head span {
    color: var(--muted);
    font-size: 13px;
}

.factory-query-order-body {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.factory-query-order-body img,
.factory-query-thumb-empty {
    width: 84px;
    height: 104px;
    border: 1px solid var(--line);
    border-radius: 7px;
    object-fit: cover;
    background: #fff;
}

.factory-query-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
}

.factory-query-order-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.factory-query-progress .production-progress-bar {
    flex: 1;
}

.factory-query-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.factory-query-steps div.is-done {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.factory-query-remark {
    padding: 10px;
    border-radius: 7px;
    background: #f9fafb;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.factory-query-style-summary,
.factory-query-outbound-list {
    display: grid;
    gap: 8px;
}

.factory-query-style-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.factory-query-style-summary strong,
.factory-query-outbound-row strong {
    overflow-wrap: anywhere;
}

.factory-query-outbound-row {
    display: grid;
    grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) minmax(80px, 100px) minmax(0, 1.2fr);
    gap: 8px;
}

.factory-style-picker {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.factory-style-picker-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
    gap: 10px;
    align-items: end;
}

.factory-style-picker-head h2 {
    margin: 0 0 4px;
}

.factory-style-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.factory-style-card {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 112px auto auto;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    text-align: left;
}

.factory-style-card:hover,
.factory-style-card.is-selected {
    border-color: var(--primary);
    background: #eff6ff;
    color: var(--text);
}

.factory-style-card.is-selected {
    position: relative;
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.factory-style-card.is-selected::after {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    content: "已选";
    font-size: 12px;
    font-weight: 700;
}

.factory-style-card img {
    width: 100%;
    height: 112px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.factory-style-card span {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factory-style-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factory-style-empty {
    padding: 10px;
    color: var(--muted);
    text-align: center;
}

.factory-style-empty[hidden],
.factory-style-load[hidden] {
    display: none;
}

.factory-style-load {
    width: 100%;
}

.production-image-order-panel {
    display: grid;
    gap: 14px;
}

.production-style-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.production-image-order-panel .factory-style-card {
    grid-template-rows: 118px auto auto;
}

.production-image-order-panel .factory-style-card img {
    height: 118px;
}

.production-order-guide-upload {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}

.production-order-guide-upload-head,
.production-order-guide-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.production-order-guide-preview-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.production-order-guide-file {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.production-order-guide-file input {
    width: 100%;
    padding: 9px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #fff;
}

.production-order-guide-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.production-order-guide-preview-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}

.production-order-guide-preview-open {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: #eef2f7;
    cursor: zoom-in;
}

.production-order-guide-preview-open img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.production-order-guide-preview-meta span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-order-guide-preview-meta .button-danger {
    flex: 0 0 auto;
}

.factory-style-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.factory-style-pagination span {
    color: var(--muted);
    font-size: 13px;
}

.production-order-preview {
    grid-column: 1 / -1;
    align-self: end;
}

.style-alias-table {
    min-width: 1180px;
}

.style-alias-table th:first-child,
.style-alias-table td:first-child {
    width: 88px;
}

.style-alias-table input {
    min-width: 120px;
}

.style-alias-thumb-button {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: zoom-in;
}

.style-alias-thumb {
    width: 58px;
    height: 76px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: #f8fafc;
}

.style-alias-system {
    display: inline-block;
    min-width: 86px;
}

.style-alias-note {
    min-width: 220px;
    color: var(--muted);
    white-space: normal;
}

.finished-price-adjust-form {
    display: grid;
    grid-template-columns: 78px 130px auto;
    gap: 6px;
    align-items: center;
    min-width: 260px;
}

.finished-price-adjust-form input {
    min-width: 0;
    height: 32px;
    padding: 5px 8px;
}

.finished-price-adjust-form button {
    min-height: 32px;
    padding: 5px 10px;
    white-space: nowrap;
}

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

[data-factory-size-custom][type="text"] {
    margin-top: 6px;
}

.factory-order-preview-status {
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
}

.factory-order-preview {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.factory-order-preview[hidden] {
    display: none;
}

.factory-order-preview-image-wrap {
    overflow: hidden;
    width: 96px;
    height: 120px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.factory-order-preview-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.factory-order-preview-image-button {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: zoom-in;
}

.factory-order-preview-image-button:hover,
.factory-order-preview-image-button:focus-visible {
    background: transparent;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

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

.factory-qr-pair figure {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fafb;
}

.factory-qr-pair img {
    width: min(180px, 100%);
}

.factory-qr-pair figcaption {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.worker-register-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.worker-register-result-grid div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.worker-register-result-grid span,
.worker-register-help {
    color: var(--muted);
    font-size: 13px;
}

.production-stock-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.production-stock-summary div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f8fafc;
}

.production-stock-summary span {
    color: var(--muted);
    font-size: 13px;
}

.production-stock-register-page {
    max-width: 980px;
}

.production-stock-batch-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.production-stock-batch-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.production-stock-batch-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.production-stock-batch-table th,
.production-stock-batch-table td {
    padding: 7px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.production-stock-batch-table th {
    color: var(--muted);
    background: #f8fafc;
    font-size: 13px;
}

.production-stock-batch-table input {
    width: 100%;
    min-width: 0;
}

.production-stock-batch-table tr[hidden] {
    display: none !important;
}

.production-stock-batch-table select {
    width: 100%;
    min-width: 0;
    margin-top: 6px;
}

.production-stock-order-help {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
}

.production-stock-add-row {
    width: 100%;
    margin: 0 0 10px;
}

.production-stock-batch-result {
    display: grid;
    gap: 8px;
}

.production-stock-batch-result div {
    display: grid;
    gap: 3px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f0fdf4;
}

.production-stock-batch-result span {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 680px) {
    .production-stock-register-page {
        max-width: none;
        padding: 8px;
    }

    .production-stock-register-page .worker-register-card {
        padding: 16px;
    }

    .production-stock-batch-controls {
        grid-template-columns: 1fr;
    }

    .production-stock-batch-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .production-stock-batch-table,
    .production-stock-batch-table thead,
    .production-stock-batch-table tbody,
    .production-stock-batch-table tr,
    .production-stock-batch-table th,
    .production-stock-batch-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .production-stock-batch-table thead {
        display: none;
    }

    .production-stock-batch-table tbody {
        display: grid;
        gap: 14px;
    }

    .production-stock-batch-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 8px;
        position: relative;
        padding: 12px 10px 10px;
        border: 1px solid var(--line);
        border-top: 4px solid #3b82f6;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
    }

    .production-stock-batch-table tr + tr {
        border-top-color: #ef4444;
    }

    .production-stock-batch-table td {
        padding: 0;
        border-bottom: 0;
    }

    .production-stock-batch-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.2;
    }

    .production-stock-batch-table td[data-label="订单号/款号"],
    .production-stock-batch-table td[data-label="厂家"],
    .production-stock-batch-table td[data-label="备注"] {
        grid-column: 1 / -1;
    }

    .production-stock-batch-table input,
    .production-stock-batch-table select {
        min-height: 42px;
        font-size: 16px;
    }

    .production-stock-batch-table select {
        margin-top: 8px;
    }

    .production-stock-order-help {
        min-height: 18px;
        font-size: 12px;
    }
}

.worker-register-help {
    display: grid;
    gap: 4px;
}

.worker-register-help p {
    margin: 0;
}

.worker-register-history {
    overflow-x: auto;
}

.worker-register-history table {
    width: 100%;
    min-width: 520px;
}

.worker-register-history th,
.worker-register-history td {
    padding: 8px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    font-size: 13px;
}

.worker-register-history th {
    color: var(--muted);
    background: #f3f4f6;
}

.worker-register-qr-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.worker-register-qr-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.worker-register-qr-card img {
    width: min(260px, 100%);
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.worker-register-qr-url {
    max-width: 100%;
    word-break: break-all;
    font-size: 12px;
}

.factory-image-filter {
    grid-template-columns: minmax(160px, .7fr) minmax(220px, 1.3fr) auto auto;
}

.factory-image-toolbar,
.factory-image-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.factory-image-actions {
    justify-content: flex-end;
}

.factory-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

.factory-image-card {
    display: grid;
    grid-template-rows: auto 146px auto auto;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.factory-image-card.is-selected {
    border-color: var(--primary);
    background: #eff6ff;
}

.factory-image-card input {
    width: 18px;
    min-height: 18px;
}

.factory-image-card img {
    width: 100%;
    height: 146px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

.factory-image-card span {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factory-image-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .image-preview {
        padding: 70px 12px 18px;
    }

    .image-preview-tools {
        top: 14px;
        right: 60px;
        left: 12px;
        flex-wrap: wrap;
        transform: none;
    }

    .image-preview-tools button {
        min-height: 32px;
        padding: 0 9px;
    }

    .factory-image-filter,
    .factory-image-toolbar,
    .factory-image-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .factory-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .factory-style-picker-head {
        grid-template-columns: 1fr;
    }

    .factory-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .factory-style-card {
        grid-template-rows: 128px auto auto;
    }

    .factory-style-card img {
        height: 128px;
    }

    .factory-order-short-grid {
        grid-template-columns: 1fr 1fr;
    }

    .factory-order-preview {
        grid-template-columns: 88px 1fr;
    }

    .factory-order-preview-image-wrap {
        width: 88px;
        height: 110px;
    }

    .factory-query-summary,
    .factory-query-order-info,
    .factory-query-style-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .factory-query-filter {
        grid-template-columns: 1fr;
    }

    .factory-query-filter button,
    .factory-query-filter .button,
    .factory-query-actions .button {
        width: 100%;
    }

    .factory-query-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .factory-query-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .factory-query-section-head {
        align-items: start;
        flex-direction: column;
    }

    .factory-query-outbound-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .role-permission-grid,
    .role-permission-options {
        grid-template-columns: 1fr;
    }

    .role-permission-head {
        align-items: stretch;
        flex-direction: column;
    }

    .factory-qr-pair {
        grid-template-columns: 1fr;
    }

    .worker-register-account,
    .worker-register-login-panel,
    .worker-register-identity {
        align-items: stretch;
        flex-direction: column;
    }

    .worker-register-account form,
    .worker-register-account button,
    .worker-register-login-button,
    .worker-register-identity-actions,
    .worker-register-identity-actions form,
    .worker-register-identity-actions button,
    .worker-register-identity-actions .button {
        width: 100%;
    }

    .worker-register-identity-actions {
        justify-content: stretch;
    }
}

.inventory-register-form select {
    width: 100%;
}

.inventory-register-recent {
    display: grid;
    gap: 8px;
}

.inventory-register-recent div {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
}

.inventory-register-recent span {
    color: var(--muted);
    font-size: 13px;
}

.production-order-scan-card {
    width: min(760px, 100%);
    max-width: 760px;
}

.production-order-scan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.production-order-scan-head h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.production-order-scan-qr {
    width: 128px;
    height: 128px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 6px;
}

.production-order-scan-url {
    margin-top: 10px;
    word-break: break-all;
}

.production-continuous-scan {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    border-color: #86efac;
    background: #ecfdf5;
}

.production-continuous-scan h2 {
    margin: 8px 0 4px;
    font-size: 18px;
}

.production-continuous-scan strong {
    display: block;
    color: #14532d;
    font-size: 22px;
    line-height: 1.2;
}

.production-continuous-scan p {
    margin: 6px 0 0;
    color: #334155;
}

.production-scan-open-form {
    display: grid;
    grid-template-columns: minmax(220px, 320px) auto;
    gap: 10px;
    align-items: center;
}

.production-scan-open-form input {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 15px;
    background: #ffffff;
}

.production-scan-open-form button {
    min-height: 44px;
    white-space: nowrap;
}

.production-continuous-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.production-continuous-steps span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #bbf7d0;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

.production-order-scan-forms {
    display: grid;
    gap: 12px;
}

.production-order-scan-inline-form {
    grid-template-columns: 1fr auto;
    align-items: end;
}

.production-order-scan-inline-form button {
    min-height: 42px;
}

@media (max-width: 620px) {
    .worker-register-order-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-continuous-scan {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .production-continuous-scan .button,
    .production-scan-open-form button {
        width: 100%;
        min-height: 48px;
    }

    .production-scan-open-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .movement-batch-grid,
    .factory-outbound-entry-panel .factory-outbound-entry tbody {
        grid-template-columns: 1fr;
    }

    .factory-outbound-entry-panel .factory-outbound-entry tr,
    .factory-outbound-entry-panel .factory-outbound-entry.no-price-columns tr {
        grid-template-columns: 1fr;
    }

    .shell {
        display: block;
    }

    .sidebar {
        position: static;
        min-height: 0;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .brand {
        padding: 0;
    }

    .nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav a {
        padding: 8px 10px;
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .content {
        padding: 20px 14px;
    }

    .grid,
    .form-grid,
    .quote-form,
    .piecework-form,
    .production-metrics,
    .production-create-form,
    .production-edit-grid,
    .production-material-form,
    .production-quality-form,
    .production-finished-form,
    .production-piecework-form,
    .production-filter,
    .product-filter-form {
        grid-template-columns: 1fr;
    }

    .product-list-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .selection-export-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .selection-export-actions,
    .selection-export-actions button {
        width: 100%;
    }

    .product-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .production-card-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "order"
            "flow"
            "control";
    }

    .production-order-info,
    .production-steps,
    .production-guide-images,
    .production-materials,
    .production-piecework,
    .production-quality,
    .production-finished {
        grid-column: auto;
    }

    .production-filter-wide .field:first-child {
        grid-column: auto;
    }

    .piecework-batch-controls,
    .factory-batch-controls {
        grid-template-columns: 1fr;
    }

    .piecework-work-page .piecework-table,
    .piecework-work-page .factory-outbound-wrap {
        overflow-x: auto;
    }

    .piecework-work-page .piecework-table table {
        min-width: 1320px;
        table-layout: auto;
    }

    .piecework-work-page .piecework-batch-entry {
        min-width: 840px;
        table-layout: auto;
    }

    .field-wide {
        grid-column: span 1;
    }

    .actions {
        flex-wrap: wrap;
    }

    .cost-style-actions,
    .cost-sheet-tools,
    .cost-style-edit-form,
    .cost-style-copy-form,
    .cost-control-row,
    .cost-style-selector,
    .cost-price-label-form {
        width: 100%;
    }

    .cost-price-label-form {
        grid-template-columns: 1fr;
    }

    .cost-style-actions {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .cost-factory-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .cost-image-form {
        min-width: 100%;
    }

    .cost-control-row {
        grid-template-columns: 1fr;
        overflow-x: visible;
    }

    .cost-style-selector {
        min-width: 100%;
    }

    .cost-style-edit-form .field,
    .cost-style-copy-form .field {
        flex: 1;
    }

    .factory-outbound-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .cost-selector-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .production-list-head,
    .production-order-head,
    .production-actions,
    .production-subhead,
    .production-list-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .production-list-actions {
        width: 100%;
    }

    .production-progress {
        grid-template-columns: 1fr;
    }

    .production-suggestion-row {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 761px) {
    .piecework-work-page,
    .piecework-work-page .panel,
    .piecework-work-page .piecework-table,
    .piecework-work-page .factory-outbound-wrap,
    .craft-work-page,
    .craft-work-page .craft-page-panel,
    .craft-work-page .craft-sheet-scroll {
        max-width: 100%;
        overflow-x: hidden;
    }

    .piecework-work-page .piecework-table table,
    .piecework-work-page .factory-outbound-table,
    .piecework-work-page .piecework-batch-entry {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }

    .piecework-work-page .piecework-table th,
    .piecework-work-page .piecework-table td,
    .piecework-work-page .factory-outbound-table th,
    .piecework-work-page .factory-outbound-table td {
        padding: 6px 4px;
        width: auto !important;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
    }

    .piecework-work-page .piecework-table input,
    .piecework-work-page .piecework-table select,
    .piecework-work-page .factory-outbound-table input,
    .piecework-work-page .factory-outbound-table select {
        min-width: 0;
        padding: 4px;
        font-size: 13px;
    }

    .piecework-work-page .piecework-table th:nth-child(1),
    .piecework-work-page .piecework-table td:nth-child(1) {
        width: 8%;
    }

    .piecework-work-page .piecework-table th:nth-child(2),
    .piecework-work-page .piecework-table td:nth-child(2),
    .piecework-work-page .piecework-table th:nth-child(3),
    .piecework-work-page .piecework-table td:nth-child(3),
    .piecework-work-page .piecework-table th:nth-child(4),
    .piecework-work-page .piecework-table td:nth-child(4) {
        width: 8%;
    }

    .piecework-work-page .piecework-table th:nth-child(5),
    .piecework-work-page .piecework-table td:nth-child(5) {
        width: 7%;
    }

    .piecework-work-page .piecework-table th:nth-child(6),
    .piecework-work-page .piecework-table td:nth-child(6),
    .piecework-work-page .piecework-table th:nth-child(7),
    .piecework-work-page .piecework-table td:nth-child(7),
    .piecework-work-page .piecework-table th:nth-child(8),
    .piecework-work-page .piecework-table td:nth-child(8),
    .piecework-work-page .piecework-table th:nth-child(11),
    .piecework-work-page .piecework-table td:nth-child(11) {
        width: 7%;
    }

    .piecework-work-page .piecework-table th:nth-child(9),
    .piecework-work-page .piecework-table td:nth-child(9),
    .piecework-work-page .piecework-table th:nth-child(10),
    .piecework-work-page .piecework-table td:nth-child(10) {
        width: 11%;
    }

    .piecework-work-page .piecework-table th:nth-child(12),
    .piecework-work-page .piecework-table td:nth-child(12) {
        width: 8%;
    }

    .piecework-work-page .quote-image-cell {
        min-width: 0;
        width: auto;
    }

    .piecework-work-page .quote-file {
        max-width: 100%;
        font-size: 12px;
    }

    .piecework-work-page .actions-cell {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }

    .piecework-work-page .actions-cell button {
        width: 100%;
        min-height: 30px;
        padding: 4px;
    }

    .craft-work-page .craft-a4 {
        width: 100%;
        max-width: 100%;
    }

    .craft-work-page .craft-sheet,
    .craft-work-page .craft-cell-input,
    .craft-work-page .craft-note-editor,
    .craft-work-page .craft-process-editor {
        max-width: 100%;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    body {
        background: #fff;
    }

    .sidebar,
    .craft-screen-head,
    .craft-toolbar,
    .craft-center-workspace,
    .craft-process-workbench,
    .craft-document-panel > summary,
    .craft-extra-pages,
    .alert {
        display: none;
    }

    .shell,
    .main-area {
        display: block;
        min-height: 0;
    }

    .content {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .craft-page-panel {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .craft-document-panel {
        margin: 0;
        border: 0;
    }

    .craft-sheet-scroll {
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
    }

    .craft-a4 {
        width: 297mm;
        height: 210mm;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        padding: 5mm;
        box-shadow: none;
    }

    .craft-extra-print-pages {
        display: block;
    }

    .craft-extra-a4 {
        display: block;
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 8mm;
        page-break-before: always;
        box-shadow: none;
    }

    .craft-sheet {
        font-size: 12px;
    }

    .craft-process-cell {
        font-size: 14px;
    }

    .craft-cell-input,
    .craft-note-editor,
    .craft-process-editor {
        box-shadow: none;
    }

    .craft-cut-empty,
    .craft-cut-actions {
        display: none;
    }

}

/* Craft collection progress */
.craft-progress-page {
    max-width: 1500px;
    margin: 0 auto;
}

.craft-create-disclosure {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
    background: #f8fbff;
}

.craft-create-disclosure summary {
    width: fit-content;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.craft-create-form {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

.craft-create-form .field { margin: 0; }
.craft-create-form button { min-height: 40px; }
.craft-create-disclosure > .muted { margin: 10px 0 0; font-size: 12px; }

.craft-review-bar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 7px;
    background: #eff6ff;
}

.craft-review-bar.is-approved {
    border-color: #bbf7d0;
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.craft-review-bar.is-draft,
.craft-review-bar.is-changed {
    border-color: #fed7aa;
    border-left-color: #ea580c;
    background: #fff7ed;
}

.craft-review-copy {
    min-width: 0;
}

.craft-review-copy strong,
.craft-review-copy small {
    display: block;
}

.craft-review-copy strong {
    margin-top: 6px;
    color: #172033;
    font-size: 14px;
}

.craft-review-copy small {
    margin-top: 4px;
    color: #64748b;
    line-height: 1.5;
}

.craft-review-badge,
.craft-review-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.craft-review-status.is-approved,
.craft-review-bar.is-approved .craft-review-badge {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.craft-review-status.is-draft,
.craft-review-status.is-changed,
.craft-review-bar.is-draft .craft-review-badge,
.craft-review-bar.is-changed .craft-review-badge {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.craft-review-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
}

.craft-review-actions form { margin: 0; }

.craft-save-all-form {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.craft-save-all-status {
    max-width: 300px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.craft-save-all-status.is-saving { color: #1d4ed8; }
.craft-save-all-status.is-error { color: #b91c1c; }

.craft-progress-head {
    align-items: flex-end;
}

.craft-progress-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.craft-progress-summary > div {
    min-width: 0;
    padding: 18px 22px;
    border-right: 1px solid var(--line);
}

.craft-progress-summary > div:last-child { border-right: 0; }

.craft-progress-summary span,
.craft-progress-summary strong { display: block; }

.craft-progress-summary span {
    color: var(--muted);
    font-size: 13px;
}

.craft-progress-summary strong {
    margin-top: 6px;
    color: #172033;
    font-size: 26px;
    line-height: 1;
}

.craft-progress-summary strong.is-complete { color: #15803d; }
.craft-progress-summary strong.is-pending { color: #b45309; }

.craft-progress-panel { padding: 0; overflow: hidden; }

.craft-progress-filters {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) minmax(130px, .7fr) minmax(140px, .8fr) minmax(140px, .8fr) 100px auto;
    gap: 12px;
    align-items: end;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.craft-progress-filters label span {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.craft-progress-filter-actions { display: flex; gap: 8px; }
.craft-progress-filter-actions > * { white-space: nowrap; }

.craft-progress-result-meta {
    display: flex;
    justify-content: space-between;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.craft-progress-table-wrap { overflow-x: auto; }

.craft-progress-table {
    width: 100%;
    min-width: 1060px;
    border-collapse: collapse;
}

.craft-progress-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.craft-progress-table td {
    padding: 12px;
    border-bottom: 1px solid #e8edf3;
    color: #172033;
    vertical-align: middle;
}

.craft-progress-table tbody tr:hover { background: #f8fbff; }
.craft-progress-table tbody tr:last-child td { border-bottom: 0; }
.craft-progress-table td:nth-child(1) { width: 76px; }
.craft-progress-table td:nth-child(2) { min-width: 110px; }
.craft-progress-table td:nth-child(3) { width: 190px; }
.craft-progress-table td:nth-child(4) { min-width: 220px; }

.craft-progress-thumb,
.craft-progress-no-image {
    display: flex;
    width: 56px;
    height: 56px;
    border: 1px solid #dbe2ea;
    border-radius: 5px;
    background: #f8fafc;
    object-fit: cover;
}

.craft-progress-thumb-button {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 5px;
    background: #f8fafc;
    cursor: zoom-in;
}

.craft-progress-thumb-button .craft-progress-thumb {
    border: 0;
    border-radius: inherit;
    transition: transform 0.16s ease;
}

.craft-progress-thumb-button:hover .craft-progress-thumb,
.craft-progress-thumb-button:focus-visible .craft-progress-thumb {
    transform: scale(1.06);
}

.craft-progress-thumb-button:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.craft-progress-image-preview figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.craft-progress-image-preview figcaption {
    position: absolute;
    bottom: 18px;
    left: 50%;
    max-width: min(88vw, 760px);
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 13px;
    text-align: center;
    transform: translateX(-50%);
}

.craft-progress-no-image {
    align-items: center;
    justify-content: center;
    padding: 5px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
}

.craft-progress-style-no { color: #1456c0; }

.craft-progress-meter-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 12px;
}

.craft-progress-meter-line strong { color: #172033; }

.craft-progress-meter {
    height: 7px;
    border-radius: 999px;
    background: #e5eaf0;
    overflow: hidden;
}

.craft-progress-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2468e5;
}

.craft-progress-missing-list { display: flex; flex-wrap: wrap; gap: 5px; }

.craft-progress-missing-list span,
.craft-progress-complete-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
    white-space: nowrap;
}

.craft-progress-complete-tag {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.craft-progress-table td > small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}

.craft-progress-date { color: #64748b; font-size: 12px; white-space: nowrap; }
.craft-progress-edit { white-space: nowrap; }
.craft-progress-mobile-list { display: none; }

.craft-progress-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    padding: 15px 20px;
    border-top: 1px solid var(--line);
}

.craft-progress-pagination > a:not(.button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: #334155;
    text-decoration: none;
}

.craft-progress-pagination > a.active {
    border-color: #2468e5;
    background: #2468e5;
    color: #fff;
}

.craft-progress-empty { margin: 20px; }

@media (max-width: 900px) {
    .craft-progress-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .craft-progress-filter-actions { align-self: end; }
}

@media (max-width: 760px) {
    .craft-create-form { grid-template-columns: 1fr; }
    .craft-create-form button { width: 100%; }
    .craft-review-bar { align-items: flex-start; flex-direction: column; }
    .craft-review-actions { width: 100%; }
    .craft-review-actions > * { flex: 1; }
    .craft-review-actions button,
    .craft-review-actions .button { width: 100%; text-align: center; }
    .craft-save-all-form { justify-items: stretch; }
    .craft-save-all-status { max-width: none; text-align: left; }
    .craft-progress-head { align-items: flex-start; flex-direction: column; gap: 12px; }
    .craft-progress-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .craft-progress-summary > div:nth-child(2) { border-right: 0; }
    .craft-progress-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .craft-progress-summary > div:nth-child(4) { border-right: 0; }
    .craft-progress-summary > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
    .craft-progress-summary > div { padding: 14px 16px; }
    .craft-progress-summary strong { font-size: 22px; }
    .craft-progress-filters { grid-template-columns: 1fr; padding: 15px; }
    .craft-progress-filter-actions > * { flex: 1; text-align: center; }
    .craft-progress-result-meta { padding: 10px 15px; }
    .craft-progress-table-wrap { display: none; }
    .craft-progress-mobile-list { display: block; }

    .craft-progress-mobile-list article { padding: 15px; border-bottom: 1px solid var(--line); }
    .craft-progress-mobile-list article:last-child { border-bottom: 0; }

    .craft-progress-mobile-top {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin-bottom: 11px;
    }

    .craft-progress-mobile-top > div { min-width: 0; }
    .craft-progress-mobile-top strong,
    .craft-progress-mobile-top span { display: block; }
    .craft-progress-mobile-top strong { color: #1456c0; overflow-wrap: anywhere; }
    .craft-progress-mobile-top span { margin-top: 4px; color: #64748b; font-size: 11px; }
    .craft-progress-mobile-top b { font-size: 18px; }

    .craft-progress-mobile-counts {
        display: flex;
        gap: 14px;
        margin: 10px 0;
        color: #475569;
        font-size: 12px;
    }

    .craft-progress-mobile-list .craft-progress-missing-list,
    .craft-progress-mobile-list .craft-progress-complete-tag,
    .craft-progress-mobile-list .craft-review-status { margin: 0 6px 12px 0; }
    .craft-progress-mobile-list .craft-progress-edit { width: 100%; text-align: center; }
    .craft-progress-pagination { justify-content: center; padding: 13px 15px; }
}

@media print {
    @page order-quote-page {
        size: A4 landscape;
        margin: 0;
    }

    .quote-print-body {
        background: #fff;
        padding: 0;
    }

    .quote-print-toolbar {
        display: none;
    }

    .quote-print-sheet {
        page: order-quote-page;
        width: 297mm;
        min-height: 210mm;
        max-width: none;
        margin: 0;
        padding: 7mm;
        box-shadow: none;
    }

    @page production-order-page {
        size: A4 portrait;
        margin: 0;
    }

    .production-print-body {
        background: #fff;
    }

    .production-print-toolbar {
        display: none;
    }

    .production-print-pages {
        display: block;
        padding: 0;
    }

    .production-print-sheet {
        page: production-order-page;
        width: 210mm;
        height: 297mm;
        min-height: 0;
        margin: 0;
        padding: 7mm;
        box-shadow: none;
        page-break-after: always;
        overflow: hidden;
    }

    .production-print-sheet:last-child {
        page-break-after: auto;
    }

    .production-print-empty {
        border: 0;
        margin: 0;
        box-shadow: none;
    }
}

.movement-delivery-print-panel {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.movement-delivery-print-copy h2 {
    margin: 0 0 5px;
}

.movement-delivery-history-link {
    display: inline-block;
    margin-top: 7px;
    font-weight: 700;
}

.movement-delivery-print-form {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(180px, 240px) auto auto;
    gap: 10px;
    align-items: end;
}

.outbound-delivery-print-body {
    margin: 0;
    background: #e5e7eb;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.outbound-delivery-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid #d1d5db;
    background: rgba(255, 255, 255, .96);
}

.outbound-delivery-toolbar h1 {
    margin: 0 0 4px;
    font-size: 20px;
}

.outbound-delivery-pages {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.outbound-delivery-page {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 5mm minmax(0, 1fr);
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 7mm;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
}

.outbound-delivery-copy {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.outbound-delivery-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    min-height: 15mm;
    padding-bottom: 2mm;
}

.outbound-delivery-title h2 {
    margin: 0 0 2px;
    font-size: 19px;
}

.outbound-delivery-title-side {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.outbound-delivery-title-side strong {
    padding: 2px 9px;
    border: 1px solid #111827;
    border-radius: 999px;
    font-size: 15px;
}

.outbound-delivery-title-side span {
    font-size: 11px;
}

.outbound-delivery-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
}

.outbound-delivery-table th,
.outbound-delivery-table td {
    height: 7mm;
    padding: 1.2mm 1.4mm;
    border: 1px solid #111827;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}

.outbound-delivery-table tbody td {
    height: 15mm;
}

.outbound-delivery-table th {
    background: #f3f4f6;
    font-weight: 700;
}

.delivery-col-image { width: 18mm; }
.delivery-col-time { width: 18mm; }
.delivery-col-style { width: 21mm; }
.delivery-col-size { width: 13mm; }
.delivery-col-quantity { width: 13mm; }
.delivery-col-source { width: 35mm; }
.delivery-col-remark { width: auto; }

.outbound-delivery-thumb {
    display: block;
    width: 12mm;
    height: 12mm;
    margin: 0 auto;
    border: .2mm solid #9ca3af;
    border-radius: 1mm;
    object-fit: cover;
}

.outbound-delivery-no-image {
    color: #6b7280;
    font-size: 10px;
}

.outbound-delivery-signatures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5mm;
    margin-top: auto;
    padding-top: 2.5mm;
    font-size: 11px;
}

.outbound-delivery-cut-line {
    position: relative;
    display: grid;
    place-items: center;
    color: #6b7280;
    font-size: 9px;
}

.outbound-delivery-cut-line::before {
    position: absolute;
    right: 0;
    left: 0;
    border-top: .3mm dashed #9ca3af;
    content: "";
}

.outbound-delivery-cut-line span {
    position: relative;
    padding: 0 3mm;
    background: #fff;
}

.outbound-delivery-empty {
    width: min(760px, 100%);
    margin: 40px auto;
    padding: 32px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .12);
}

.delivery-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 900px) {
    .movement-delivery-print-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .movement-delivery-print-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    @page outbound-delivery-page {
        size: A4 portrait;
        margin: 0;
    }

    .outbound-delivery-print-body {
        background: #fff;
    }

    .outbound-delivery-toolbar {
        display: none;
    }

    .outbound-delivery-pages {
        display: block;
        padding: 0;
    }

    .outbound-delivery-page {
        page: outbound-delivery-page;
        width: 210mm;
        height: 297mm;
        min-height: 0;
        margin: 0;
        padding: 7mm;
        box-shadow: none;
        break-after: page;
        page-break-after: always;
        overflow: hidden;
    }

    .outbound-delivery-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .outbound-delivery-empty {
        border: 0;
        box-shadow: none;
    }
}

.craft-process-workbench {
    margin-top: 18px;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.craft-process-workbench-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid #dfe5ee;
}

.craft-process-workbench h2,
.craft-process-workbench h3,
.craft-process-workbench p {
    margin-top: 0;
}

.craft-process-workbench-head h2 {
    margin-bottom: 5px;
    font-size: 21px;
}

.craft-process-workbench-head p,
.craft-process-upload-band p {
    margin-bottom: 0;
    color: #64748b;
    font-size: 13px;
}

.craft-process-create {
    flex: 0 1 760px;
}

.craft-process-create > summary {
    width: max-content;
    margin-left: auto;
    padding: 9px 15px;
    border-radius: 5px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
}

.craft-process-create > summary::-webkit-details-marker {
    display: none;
}

.craft-process-create-form {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.craft-process-create-form label,
.craft-process-step-form label,
.craft-process-upload-form label,
.craft-image-management-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.craft-process-create-form .craft-process-wide {
    grid-column: span 2;
}

.craft-process-create-form input,
.craft-process-create-form select,
.craft-process-create-form textarea,
.craft-process-step-form input,
.craft-process-step-form select,
.craft-process-step-form textarea,
.craft-process-upload-form input,
.craft-process-upload-form select,
.craft-image-management-form input,
.craft-image-management-form select {
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0f2747;
    font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.craft-process-create-form input,
.craft-process-create-form select,
.craft-process-step-form input,
.craft-process-step-form select,
.craft-process-upload-form input,
.craft-process-upload-form select,
.craft-image-management-form input,
.craft-image-management-form select {
    min-height: 36px;
    padding: 7px 9px;
}

.craft-process-create-form textarea,
.craft-process-step-form textarea {
    resize: vertical;
    padding: 8px 9px;
}

.craft-process-list {
    display: grid;
}

.craft-process-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 250px 92px;
    border-bottom: 1px solid #dfe5ee;
}

.craft-process-row:nth-child(odd) {
    background: #f8fbff;
}

.craft-process-sequence {
    display: grid;
    place-items: center;
    border-right: 1px solid #dfe5ee;
    color: #2563eb;
    font-size: 18px;
    font-weight: 800;
}

.craft-process-step-form {
    display: grid;
    grid-template-columns: minmax(110px, .65fr) minmax(150px, .9fr) minmax(0, 1.35fr) minmax(0, 1.25fr) 84px;
    gap: 10px;
    padding: 14px;
}

.craft-process-step-save {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 9px;
}

.craft-process-step-save .checkbox-inline,
.craft-process-upload-form .checkbox-inline,
.craft-process-create-form .checkbox-inline,
.craft-image-management-form .checkbox-inline {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    color: #334155;
    font-size: 12px;
}

.craft-process-step-save .checkbox-inline input,
.craft-process-upload-form .checkbox-inline input,
.craft-process-create-form .checkbox-inline input,
.craft-image-management-form .checkbox-inline input {
    width: 16px;
    min-height: auto;
    height: 16px;
    margin: 0;
}

.craft-process-media {
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #dfe5ee;
}

.craft-process-media-label {
    display: block;
    margin-bottom: 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.craft-process-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.craft-process-thumbs a {
    min-width: 0;
    color: #334155;
    font-size: 10px;
    text-decoration: none;
}

.craft-process-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #d8e0ea;
    background: #fff;
    object-fit: cover;
}

.craft-process-thumbs span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-process-row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 12px;
    border-left: 1px solid #dfe5ee;
}

.craft-process-row-actions form {
    display: grid;
    gap: 6px;
}

.craft-process-row-actions button {
    width: 100%;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 12px;
    white-space: nowrap;
}

.craft-process-empty {
    padding: 24px;
    color: #64748b;
    text-align: center;
}

.craft-process-upload-band {
    padding: 18px 22px;
    border-top: 1px solid #dfe5ee;
    background: #f8fafc;
}

.craft-process-upload-band h3,
.craft-image-management h3 {
    margin-bottom: 4px;
    font-size: 17px;
}

.craft-process-upload-form {
    display: grid;
    grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.2fr) minmax(145px, .75fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-top: 14px;
}

.craft-process-file {
    position: relative;
    display: grid;
    min-height: 36px;
    place-items: center;
    border: 1px dashed #2563eb;
    border-radius: 4px;
    background: #fff;
    color: #1d4ed8 !important;
    cursor: pointer;
}

.craft-process-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.craft-image-management {
    padding: 18px 22px 22px;
    border-top: 1px solid #dfe5ee;
}

.craft-image-management-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.craft-image-management-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 72px;
    gap: 12px;
    align-items: center;
    padding: 9px;
    border: 1px solid #dfe5ee;
    background: #fff;
}

.craft-image-management-row > a img {
    display: block;
    width: 86px;
    height: 64px;
    border: 1px solid #dfe5ee;
    object-fit: cover;
}

.craft-image-management-form {
    display: grid;
    grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.2fr) 95px auto auto;
    gap: 9px;
    align-items: end;
}

.craft-image-management-row > form:last-child button {
    width: 100%;
}

.craft-query-step-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    list-style: none;
}

.craft-query-step-item {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
}

.craft-query-step-item:last-child {
    border-bottom: 0;
}

.craft-query-step-sequence {
    display: grid;
    place-items: start center;
    padding-top: 18px;
    border-right: 1px solid var(--line);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 18px;
    font-weight: 800;
}

.craft-query-step-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    padding: 16px 18px 18px;
}

.craft-query-step-title,
.craft-query-step-images {
    grid-column: 1 / -1;
}

.craft-query-step-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.craft-query-step-title span {
    color: #64748b;
    font-size: 12px;
}

.craft-query-step-title h4 {
    margin: 0;
    color: #0f2747;
    font-size: 17px;
}

.craft-query-step-content strong {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 12px;
}

.craft-query-step-key {
    padding-left: 14px;
    border-left: 3px solid #f59e0b;
}

.craft-query-step-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 240px));
    gap: 10px;
}

@media (max-width: 1180px) {
    .craft-process-row {
        grid-template-columns: 52px minmax(0, 1fr) 78px;
    }

    .craft-process-media {
        grid-column: 2;
        border-top: 1px solid #dfe5ee;
        border-left: 0;
    }

    .craft-process-row-actions {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .craft-process-step-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .craft-process-step-save {
        flex-direction: row;
        grid-column: 1 / -1;
    }

    .craft-process-upload-form,
    .craft-image-management-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .craft-process-workbench-head {
        flex-direction: column;
    }

    .craft-process-create,
    .craft-process-create > summary {
        width: 100%;
        margin-left: 0;
    }

    .craft-process-create {
        flex: none;
    }

    .craft-process-create > summary {
        text-align: center;
    }

    .craft-process-create-form,
    .craft-process-step-form,
    .craft-process-upload-form,
    .craft-image-management-form {
        grid-template-columns: 1fr;
    }

    .craft-process-create-form .craft-process-wide,
    .craft-process-step-save {
        grid-column: auto;
    }

    .craft-process-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .craft-process-media,
    .craft-process-row-actions {
        grid-column: 2;
        grid-row: auto;
        border-top: 1px solid #dfe5ee;
        border-left: 0;
    }

    .craft-process-row-actions {
        flex-direction: row;
    }

    .craft-process-row-actions form {
        flex: 1;
    }

    .craft-image-management-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .craft-image-management-row > a img {
        width: 72px;
        height: 72px;
    }

    .craft-image-management-row > form:last-child {
        grid-column: 2;
    }

    .craft-query-step-item {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .craft-query-step-content {
        grid-template-columns: 1fr;
    }

    .craft-query-step-title,
    .craft-query-step-images {
        grid-column: auto;
    }

    .craft-query-step-images {
        grid-template-columns: 1fr;
    }
}

.craft-query-search-panel {
    border-left: 4px solid #166534;
}

.craft-query-department-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.craft-query-department-bar > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.craft-query-department-bar > strong {
    color: #166534;
    font-size: 15px;
}

.craft-query-department-bar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.craft-query-department-bar a {
    padding: 7px 11px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.craft-query-department-bar a:hover,
.craft-query-department-bar a.active {
    border-color: #166534;
    background: #ecfdf5;
    color: #166534;
}

.craft-query-search-form {
    display: grid;
    grid-template-columns: minmax(220px, 520px) 132px;
    gap: 10px;
    align-items: end;
}

.craft-query-search-form.has-department-select {
    grid-template-columns: minmax(150px, 220px) minmax(220px, 520px) 132px;
}

.craft-query-search-form input,
.craft-query-search-form select,
.craft-query-search-form button {
    min-height: 46px;
}

.craft-query-result {
    position: relative;
    isolation: isolate;
    margin-top: 18px;
    border-top: 2px solid #111827;
    background: #fff;
}

.craft-query-result::after {
    position: fixed;
    top: 52%;
    left: 58%;
    z-index: 8;
    max-width: 72vw;
    color: rgba(127, 29, 29, .13);
    content: attr(data-watermark);
    font-size: 24px;
    font-weight: 700;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-18deg);
    white-space: nowrap;
}

.craft-query-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.craft-query-result-head h2 {
    margin: 3px 0 0;
    font-size: 26px;
}

.craft-query-security-state {
    max-width: 280px;
    padding-left: 12px;
    border-left: 3px solid #166534;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.craft-query-overview {
    display: grid;
    grid-template-columns: minmax(240px, 36%) minmax(0, 1fr);
    gap: 24px;
    padding: 22px 0;
}

.craft-query-style-figure,
.craft-query-guide-item,
.craft-query-qr-figure {
    margin: 0;
}

.craft-query-style-figure img {
    display: block;
    width: 100%;
    max-height: 520px;
    border: 1px solid var(--line);
    background: #f8fafc;
    object-fit: contain;
}

.craft-query-style-figure figcaption,
.craft-query-guide-item figcaption,
.craft-query-qr-figure figcaption {
    margin-top: 7px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.craft-query-note {
    min-width: 0;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.craft-query-note h3,
.craft-query-section h3,
.craft-query-cut-item h4,
.craft-query-process-item h4 {
    margin: 0 0 12px;
}

.craft-query-section {
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.craft-query-pre {
    color: #111827;
    line-height: 1.75;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.craft-query-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
}

.craft-query-material-table {
    min-width: 620px;
}

.craft-query-material-table th:first-child,
.craft-query-material-table td:first-child {
    width: 72px;
    text-align: center;
}

.craft-query-cut-grid,
.craft-query-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.craft-query-cut-item,
.craft-query-guide-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fafc;
}

.craft-query-cut-item img,
.craft-query-guide-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid #d1d5db;
    background: #fff;
    object-fit: contain;
    -webkit-touch-callout: none;
    user-select: none;
}

[data-craft-query-preview] {
    display: block;
    cursor: zoom-in;
    touch-action: manipulation;
}

.craft-query-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    overflow: hidden;
    background: rgba(7, 12, 22, .96);
    color: #fff;
}

.craft-query-image-viewer.is-open {
    display: block;
}

.craft-query-viewer-head {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    background: linear-gradient(rgba(0, 0, 0, .68), transparent);
}

.craft-query-viewer-head > div {
    min-width: 0;
}

.craft-query-viewer-head strong {
    display: block;
    overflow: hidden;
    max-width: min(70vw, 780px);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.craft-query-viewer-head span {
    display: block;
    margin-top: 2px;
    color: #cbd5e1;
    font-size: 13px;
}

.craft-query-viewer-head button {
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 29px;
    line-height: 1;
}

.craft-query-viewer-stage {
    position: absolute;
    inset: 64px 0 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.craft-query-viewer-stage > img {
    display: block;
    max-width: calc(100vw - 116px);
    max-height: 100%;
    object-fit: contain;
    cursor: grab;
    transform-origin: center;
    transition: transform .08s ease-out;
    user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
    will-change: transform;
}

.craft-query-viewer-stage > img.is-dragging {
    cursor: grabbing;
    transition: none;
}

.craft-query-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 52px;
    min-height: 68px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 8px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 42px;
    line-height: 1;
    transform: translateY(-50%);
}

.craft-query-viewer-nav.is-prev {
    left: max(12px, env(safe-area-inset-left));
}

.craft-query-viewer-nav.is-next {
    right: max(12px, env(safe-area-inset-right));
}

.craft-query-viewer-tools {
    position: absolute;
    right: 0;
    bottom: max(34px, env(safe-area-inset-bottom));
    left: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
}

.craft-query-viewer-tools button {
    min-width: 88px;
    min-height: 42px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: 14px;
}

.craft-query-viewer-hint {
    position: absolute;
    right: 12px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 3;
    margin: 0;
    color: #aeb9c9;
    font-size: 11px;
    text-align: center;
}

body.craft-query-viewer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.craft-query-cut-item .craft-query-pre {
    margin-top: 10px;
}

.craft-query-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.craft-query-process-item {
    min-width: 0;
    padding: 14px 16px;
    border-left: 4px solid #b45309;
    background: #fffbeb;
}

.craft-query-empty {
    min-height: 180px;
    margin-top: 18px;
    align-content: center;
}

.craft-query-qr-panel {
    display: grid;
    grid-template-columns: minmax(420px, 680px) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.craft-query-qr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.craft-query-qr-grid h2 {
    margin: 0 0 10px;
    font-size: 17px;
}

.craft-query-qr-figure img {
    display: block;
    width: min(320px, 100%);
    aspect-ratio: 1;
    border: 1px solid var(--line);
}

.craft-query-device-setup p {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.65;
}

@media (max-width: 760px) {
    .craft-query-department-bar { align-items: flex-start; flex-direction: column; }
    .craft-query-department-bar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .craft-query-department-bar a { text-align: center; }
    .craft-query-search-form,
    .craft-query-overview,
    .craft-query-process-grid,
    .craft-query-qr-panel {
        grid-template-columns: 1fr;
    }

    .craft-query-qr-grid {
        grid-template-columns: 1fr;
    }

    .craft-query-search-form button {
        width: 100%;
    }

    .craft-query-result-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .craft-query-security-state {
        max-width: none;
        text-align: left;
    }

    .craft-query-overview {
        gap: 16px;
    }

    .craft-query-note {
        padding-top: 16px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .craft-query-cut-grid,
    .craft-query-guide-grid {
        grid-template-columns: 1fr;
    }

    .craft-query-result::after {
        left: 50%;
        max-width: 92vw;
        font-size: 18px;
    }

    .craft-query-viewer-stage {
        inset: 58px 0 110px;
    }

    .craft-query-viewer-stage > img {
        max-width: 100vw;
    }

    .craft-query-viewer-nav {
        top: auto;
        bottom: 2px;
        width: 48px;
        min-height: 44px;
        border: 0;
        background: rgba(15, 23, 42, .86);
        font-size: 32px;
        transform: none;
    }

    .craft-query-viewer-tools {
        right: 58px;
        bottom: max(30px, env(safe-area-inset-bottom));
        left: 58px;
        gap: 5px;
        padding: 4px;
    }

    .craft-query-viewer-tools button {
        min-width: 0;
        min-height: 40px;
        flex: 1 1 0;
        padding: 5px 7px;
        font-size: 12px;
    }

    .craft-query-viewer-hint {
        display: none;
    }
}

@media print {
    .craft-query-body .shell {
        display: none !important;
    }

    .craft-query-body::after {
        display: block;
        padding: 40mm 20mm;
        color: #111827;
        content: "Protected craft view - printing disabled";
        font-size: 18px;
        text-align: center;
    }
}