/* WSF BOM Builder — extracted from index.html (v1.9.74 split) */

* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; background: #f4f5f7; color: #222; font-size: 14px; }
header { background: #fff; border-bottom: 2px solid #c00; padding: 10px 20px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
header img { height: 56px; }
header h1 { font-size: 18px; margin: 0; color: #222; font-weight: 600; }
header .spacer { flex: 1; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar button { padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 4px; }
.toolbar button:hover { background: #f0f0f0; }
.toolbar button.primary { background: #c00; color: #fff; border-color: #900; }
.toolbar button.primary:hover { background: #900; }
.toolbar button.secondary { background: #333; color: #fff; border-color: #222; }
.toolbar button.secondary:hover { background: #222; }
.dd { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; }
.dd-arrow { font-size: 10px; opacity: 0.7; }
.dd-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    min-width: 230px;
    padding: 4px 0;
    z-index: 50;
    margin-top: 2px;
}
.dd.open .dd-menu { display: block; }
.dd-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 7px 14px;
    font-size: 13px;
    color: #111;
    cursor: pointer;
    border-radius: 0;
    font-weight: 500;
}
.dd-menu button:hover { background: #eef2f8; }
.dd-menu hr { margin: 4px 0; border: 0; border-top: 1px solid #eee; }
.dd-menu .dd-group {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    padding: 6px 14px 2px;
    font-weight: 700;
}
main { padding: 20px; max-width: none; margin: 0 auto; }
.section { background: #fff; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 18px; overflow: hidden; }
.section-header { background: #2b3a55; color: #fff; padding: 10px 16px; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.section-body { padding: 14px 16px; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.field { display: flex; flex-direction: column; }
.field label { font-size: 11px; color: #666; font-weight: 600; text-transform: uppercase; margin-bottom: 3px; letter-spacing: 0.5px; }
.field input, .field select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; font-family: inherit; }
.field input:focus, .field select:focus { outline: none; border-color: #c00; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { background: #f0f0f0; border: 1px solid #ccc; padding: 6px 4px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; color: #555; position: sticky; top: 0; }
/* v1.9.14: drag-to-resize columns */
/* v1.9.75: sticky (not relative) — relative was killing the sticky column headers on every
   resizable table (Sub-Assemblies + Items). Sticky still anchors the absolute .resize-handle. */
table.grid.resizable th { position: sticky; top: 0; }
table.grid.resizable th .resize-handle {
    position: absolute; right: -3px; top: 0; bottom: 0; width: 7px;
    cursor: col-resize; user-select: none; z-index: 10;
    background: transparent; transition: background 0.12s ease;
}
table.grid.resizable th .resize-handle:hover,
table.grid.resizable th .resize-handle.dragging { background: #c00; }
/* v1.9.18: when a th gets an inline width, hard-override the col-* min-widths and clip content */
table.grid.resizable th[style*='width'] { min-width: 0 !important; }
table.grid.resizable td { overflow: hidden; }
/* v1.9.15: prevent text-selection bleed when drag-selecting cells in Bulk Editor */
#bulkGridBody td { user-select: none; -webkit-user-select: none; }
#bulkGridBody td input { user-select: auto; -webkit-user-select: text; }
body.bulk-dragging, body.bulk-dragging * { user-select: none !important; -webkit-user-select: none !important; }

table.grid td { border: 1px solid #ddd; padding: 0; }
table.grid td input, table.grid td select { width: 100%; border: 0; padding: 6px 4px; font-size: 13px; font-family: inherit; background: transparent; }
table.grid td input:focus, table.grid td select:focus { outline: 2px solid #c00; outline-offset: -2px; background: #fff; }
table.grid tr:nth-child(even) td { background: #fafafa; }
table.grid tr:hover td { background: #fff7e6; }
table.grid td.actions { text-align: center; padding: 4px; }
.btn-icon { background: none; border: 0; cursor: pointer; padding: 4px 6px; font-size: 14px; color: #888; }
.btn-icon:hover { color: #c00; }
.btn-add { padding: 8px 14px; background: #2b3a55; color: #fff; border: 0; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 13px; }
.btn-add:hover { background: #1c2b45; }
.col-narrow { min-width: 72px; }
.col-medium { min-width: 160px; }   /* selects (Type/Op1-3) — fits 'Customer Supplied' */
.col-wide { min-width: 180px; }     /* item # — grows with content via input size attr */
.col-material { min-width: 200px; } /* material name — grows with content via input size attr */
.col-parent { min-width: 200px; }
.col-desc { min-width: 220px; }     /* description — grows with content via input size attr */
.col-actions { width: 50px; }
/* Long-text inputs: show ellipsis on overflow, but full text appears when focused */
/* Don't ellipsize input contents — let them scroll horizontally inside the input instead */
/* Auto-sizing inputs: width is driven by the size attribute (set by JS = value.length + 2).
   Override `width: 100%` so the input + cell can shrink to fit short content
   AND grow beyond the cell when content is long. */
table.grid td input.auto-size {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: content-box;
    field-sizing: content;
}
.note { color: #888; font-size: 12px; padding: 8px 0; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; align-items: center; justify-content: center; }
.modal-bg.show { display: flex; }
.modal { background: #fff; border-radius: 8px; max-width: 1100px; width: 95%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { padding: 14px 18px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 12px 18px; border-top: 1px solid #ddd; display: flex; justify-content: flex-end; gap: 8px; }
.modal-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #ddd; }
.modal-tab { padding: 8px 16px; cursor: pointer; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; font-weight: 600; color: #666; }
.modal-tab.active { background: #fff; border-color: #ddd; color: #c00; }
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }
.color-swatch { display: inline-block; width: 16px; height: 16px; border: 1px solid #999; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.row-stock td input { background: #f0f0f0; color: #888; }
.row-supplied td input { background: #fff5d6; }
.toast { position: fixed; bottom: 20px; right: 20px; background: #2b3a55; color: #fff; padding: 12px 18px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 200; font-weight: 600; }
.toast.error { background: #c00; }
.toast.success { background: #2a7a2a; }

/* ============== VISUAL POLISH (subtle depth, gradients, transitions) ============== */
body {
    background:
        radial-gradient(1200px 600px at 50% -100px, rgba(43,58,85,0.06), transparent),
        linear-gradient(180deg, #f7f8fa 0%, #ecf0f4 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Header — gradient + refined accent border */
header {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
    border-bottom: 3px solid #c00;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.04);
}
header h1 {
    color: #2b3a55;
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    letter-spacing: 0.4px;
    font-weight: 700;
}

/* Toolbar buttons — gradients + hover lift */
.toolbar button, .dd-btn {
    background: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%);
    border: 1px solid #c5cad1;
    color: #2b3a55;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.toolbar button:hover, .dd-btn:hover {
    background: linear-gradient(180deg, #fafbfc 0%, #dee2e6 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}
.toolbar button:active, .dd-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset, 0 1px 1px rgba(0,0,0,0.05);
}
.toolbar button.primary {
    background: linear-gradient(180deg, #d00 0%, #a00 100%);
    border-color: #800;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(192,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}
.toolbar button.primary:hover {
    background: linear-gradient(180deg, #c00 0%, #900 100%);
    box-shadow: 0 6px 12px rgba(192,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
}
.toolbar button.secondary {
    background: linear-gradient(180deg, #444 0%, #2a2a2a 100%);
    border-color: #1a1a1a;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
}
.toolbar button.secondary:hover {
    background: linear-gradient(180deg, #2a2a2a 0%, #111 100%);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

/* Dropdown menu — refined shadow + smooth open */
.dd-menu {
    box-shadow:
        0 12px 32px rgba(0,0,0,0.18),
        0 4px 10px rgba(0,0,0,0.10),
        0 0 0 1px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.dd-menu button {
    transition: background 0.12s ease;
}
.dd-menu button:hover {
    background: linear-gradient(90deg, #eef2f8 0%, #e0e7f0 100%);
}

/* Section cards — elevation with hover lift */
.section {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.section:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.08);
}

/* Section headers — refined gradient */
.section-header {
    background: linear-gradient(180deg, #364462 0%, #2b3a55 100%);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* Form inputs — focus glow */
.job-grid input, .job-grid select,
.section input[type="text"],
.section input[type="number"],
.section input[type="date"],
.section select,
.section textarea,
table.grid input,
table.grid select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.job-grid input:focus, .job-grid select:focus,
.section input:focus, .section select:focus,
.section textarea:focus,
table.grid input:focus, table.grid select:focus {
    outline: none;
    border-color: #4a6da3;
    box-shadow: 0 0 0 3px rgba(74,109,163,0.18);
    background: #fff;
}

/* Assembly Tree sidebar (v1.7.7) */
.items-with-tree { display: flex !important; gap: 12px; align-items: flex-start; }
/* v1.9.16: drag-resizable sidebar + wrap long names */
.assembly-tree-sidebar { width: 280px; min-width: 200px; max-width: 600px; flex: 0 0 auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; overflow-y: auto; max-height: 600px; position: relative; }
.assembly-tree-sidebar .tree-resize-handle { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 3; background: transparent; transition: background 0.12s ease; }
.assembly-tree-sidebar .tree-resize-handle:hover, .assembly-tree-sidebar .tree-resize-handle.dragging { background: #c00; }
.assembly-tree-sidebar .tree-header { padding: 10px 12px; background: #e2e8f0; border-bottom: 1px solid #cbd5e1; font-size: 12px; font-weight: 600; color: #1e293b; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; }
.assembly-tree-sidebar .tree-body { padding: 6px 0; font-size: 12px; }
.assembly-tree-sidebar .tree-node { padding: 4px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.assembly-tree-sidebar .tree-node:hover { background: #e0e7ff; }
.assembly-tree-sidebar .tree-master { font-weight: 600; color: #1e3a68; background: #dbeafe; }
.assembly-tree-sidebar .tree-master:hover { background: #bfdbfe; }
.assembly-tree-sidebar .tree-subasm { color: #475569; padding-left: 22px; }
.assembly-tree-sidebar .tree-part { color: #64748b; padding-left: 38px; }
/* v1.9.23: loose parts directly under master — less indent + subtle background to distinguish from sub-asm children */
.assembly-tree-sidebar .tree-part.tree-part-direct { padding-left: 26px; background: #f0f7ff; }
.assembly-tree-sidebar .tree-part.tree-part-direct:hover { background: #dbeafe; }
.assembly-tree-sidebar .tree-icon { font-size: 12px; flex-shrink: 0; }
.assembly-tree-sidebar .tree-label { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 100px); word-break: break-word; line-height: 1.3; }
.tree-op-dots { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; flex-shrink: 0; }
.tree-op-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }
.assembly-tree-sidebar .tree-count { color: #94a3b8; font-size: 10px; font-weight: normal; white-space: nowrap; flex-shrink: 0; word-break: keep-all; }
.assembly-tree-sidebar .tree-empty { padding: 12px; color: #94a3b8; font-style: italic; text-align: center; }
.items-with-tree-main { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.tree-collapse-btn { border: 1px solid #cbd5e1; background: #fff; cursor: pointer; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.tree-flash-highlight { animation: flashHighlight 1.5s ease-out; }
@keyframes flashHighlight { 0% { background: #fef3c7; } 100% { background: transparent; } }
/* v1.9.43: error highlighting + items toolbar + validation modal */
.row-error > td { background: #fff1f1 !important; }
.row-error > td:first-child { box-shadow: inset 4px 0 0 #c00; }
.items-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.items-toolbar input.items-search { padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 13px; min-width: 260px; font-family: inherit; }
.btn-errfilter { padding: 7px 12px; border: 1px solid #c00; background: #fff; color: #c00; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 13px; }
.btn-errfilter.active { background: #c00; color: #fff; }
.items-filter-count { font-size: 12px; color: #666; }
.val-modal-list li { color: #7a1010; }

/* Buttons inside section headers (Add Row, Bulk Paste, etc.) */
.btn-add {
    background: linear-gradient(180deg, #3a5070 0%, #2b3a55 100%);
    border: 1px solid rgba(0,0,0,0.15);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Footer polish */
footer {
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.9) 100%);
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* Toast — soft shadow */
.toast {
    box-shadow:
        0 12px 28px rgba(0,0,0,0.22),
        0 4px 10px rgba(0,0,0,0.10);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Modal — softer overlay + lift */
.modal-bg {
    background: rgba(20,28,45,0.55);
    backdrop-filter: blur(2px);
}
.modal {
    box-shadow:
        0 24px 60px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.08);
}
.modal-header {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ============== LOGIN GATE ============== */
#loginOverlay {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #2b3a55 0%, #1a2740 60%, #0e1729 100%);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.login-card {
    background: #fff;
    border-radius: 14px;
    padding: 36px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.2);
    max-width: 380px;
    width: 100%;
    text-align: center;
}
.login-mark {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 28px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.login-card .login-logo {
    font-size: 28px;
    font-weight: 700;
    color: #2b3a55;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.login-card .login-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 22px;
}
.login-card label {
    display: block;
    text-align: left;
    font-size: 11px;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 14px 0 4px;
}
.login-card input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c5cad1;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fafbfc;
}
.login-card input:focus {
    outline: none;
    border-color: #4a6da3;
    box-shadow: 0 0 0 3px rgba(74,109,163,0.18);
    background: #fff;
}
.login-card button {
    width: 100%;
    padding: 12px;
    margin-top: 22px;
    background: linear-gradient(180deg, #d00 0%, #a00 100%);
    color: #fff;
    border: 1px solid #800;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(192,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(192,0,0,0.4); }
.login-card button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.login-error {
    margin-top: 14px;
    color: #a02020;
    font-size: 13px;
    min-height: 18px;
    font-weight: 500;
}
.login-foot {
    margin-top: 22px;
    font-size: 11px;
    color: #aaa;
}
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-left: 8px;
}
.user-badge b { color: #2b3a55; font-weight: 700; }
.user-badge a {
    color: #1b5e80;
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid #d0d5dc;
    border-radius: 10px;
    font-size: 10px;
    transition: background 0.12s ease;
}
.user-badge a:hover { background: #eef2f8; }

.login-bg-logo {
    position: absolute;
    width: 65vmin;
    max-width: 540px;
    min-width: 280px;
    opacity: 0.07;
    filter: brightness(3) contrast(0.6) saturate(0);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.login-card { position: relative; z-index: 1; }

.password-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #888;
    font-style: italic;
}
.password-hint.bad { color: #a02020; font-style: normal; font-weight: 600; }
.password-hint.good { color: #1f7a37; }

/* User mgmt table in Settings */
table.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.users-table th { background: #2b3a55; color: #fff; padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
table.users-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
table.users-table button { font-size: 11px; padding: 4px 10px; border-radius: 3px; cursor: pointer; border: 1px solid #c5cad1; background: #fff; }
table.users-table button.btn-del { background: #fee; color: #a02020; border-color: #e0a0a0; }
table.users-table button.btn-del:hover { background: #fcc; }

@media (max-width: 768px) {
    .login-card { padding: 24px 22px; }
    .login-mark {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 28px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.login-card .login-logo { font-size: 22px; }
}

/* ============== RESPONSIVE (tablet + phone) ============== */
@media (max-width: 1024px) {
    /* Tablet adjustments — keep layout, just tighten things */
    header { gap: 10px; padding: 8px 12px; }
    header img { height: 44px; }
    header h1 { font-size: 16px; }
    .toolbar { gap: 4px; flex-wrap: wrap; }
    .toolbar button, .dd-btn { padding: 7px 10px; font-size: 12px; }
    .job-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .section { margin: 0 8px 12px; }
    .section-body { padding: 10px; }
    table.grid { font-size: 11px; }
    table.grid th, table.grid td { padding: 5px 4px; }
    .modal { width: 96vw; max-width: 96vw; max-height: 90vh; }
}
@media (max-width: 768px) {
    /* Phone — stack vertically, big tap targets */
    body { font-size: 14px; }
    header { flex-direction: column; align-items: flex-start; padding: 10px; gap: 8px; }
    header img { height: 36px; }
    header h1 { font-size: 15px; line-height: 1.2; }
    header .spacer { display: none; }
    /* v1.9.76: pack toolbar 2-per-row instead of a full-width stack (was ~480px tall) */
    .toolbar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .toolbar > button, .toolbar > .dd { width: calc(50% - 2px); }
    .toolbar .dd-btn { width: 100%; }
    .toolbar button, .dd-btn { padding: 12px; font-size: 14px; min-height: 44px; justify-content: center; }
    .dd-menu { position: static; width: 100%; max-height: 60vh; overflow-y: auto; box-shadow: none; border: 1px solid #ddd; margin-top: 4px; }
    .dd-menu button { padding: 12px 14px; font-size: 14px; min-height: 44px; }
    .job-grid { grid-template-columns: 1fr; gap: 10px; }
    .section { margin: 0 6px 10px; border-radius: 4px; }
    .section-header { flex-direction: column; align-items: flex-start; padding: 8px 10px; gap: 6px; font-size: 13px; }
    .section-header button, .btn-add { font-size: 13px; padding: 8px 12px; min-height: 36px; }
    .section-body { padding: 8px; }
    table.grid { font-size: 11px; min-width: 100%; }
    table.grid th, table.grid td { padding: 6px 4px; }
    table.grid input, table.grid select { padding: 6px 4px; font-size: 12px; min-height: 32px; }
    /* Modal becomes full screen on phones */
    .modal-bg { padding: 0; align-items: stretch; justify-content: stretch; }
    .modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .modal-header { padding: 10px 12px; }
    .modal-header h2 { font-size: 16px; }
    .modal-body { padding: 10px 12px; }
    .modal-footer { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
    .modal-footer button { flex: 1 1 calc(50% - 6px); min-height: 44px; font-size: 13px; }
    footer { font-size: 10px; padding: 12px 8px 20px; }
    .toast { left: 10px; right: 10px; bottom: 10px; font-size: 13px; }
    /* The big horizontal scroll for tables — let them scroll */
    .section-body[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
}
@media print {
    header, .toolbar, .section-header button { display: none; }
}

/* =========================================================================
   MASTERPIECE THEME v2 — Modern SaaS, all-about-W branding
   Override block — comes last in the cascade so it wins without !important.
   ========================================================================= */
:root {
    --bg-page: #fafafa;
    --bg-card: #ffffff;
    --bg-soft: #f4f4f5;
    --bg-hover: #f0f0f0;
    --bg-active: #e4e4e7;
    --bg-dark: #09090b;

    --border-subtle: #f0f0f0;
    --border: #e5e7eb;
    --border-strong: #d4d4d8;

    --text-1: #09090b;
    --text-2: #3f3f46;
    --text-3: #71717a;
    --text-4: #a1a1aa;
    --text-inv: #fafafa;

    --brand: #c41e1e;
    --brand-hover: #a31616;
    --brand-strong: #7f0d0d;
    --brand-soft: #fef2f2;

    --green: #16a34a;
    --green-soft: #f0fdf4;
    --amber: #d97706;
    --amber-soft: #fffbeb;
    --blue: #2563eb;
    --blue-soft: #eff6ff;

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-2xl: 20px;

    --shadow-xs: 0 1px 2px rgba(9,9,11,0.04);
    --shadow-sm: 0 1px 3px rgba(9,9,11,0.06), 0 1px 2px rgba(9,9,11,0.04);
    --shadow-md: 0 4px 12px rgba(9,9,11,0.08), 0 2px 4px rgba(9,9,11,0.04);
    --shadow-lg: 0 12px 24px rgba(9,9,11,0.10), 0 4px 8px rgba(9,9,11,0.04);
    --shadow-xl: 0 24px 60px rgba(9,9,11,0.14), 0 8px 24px rgba(9,9,11,0.06);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* ========== HEADER ========== */
header {
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 12px 28px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-xs);
    gap: 14px;
}
header img {
    height: 38px;
    width: auto;
    border-radius: var(--r-sm);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
header h1 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.015em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
header h1::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 33px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1520 1960%22 preserveAspectRatio=%22xMidYMid meet%22><path d=%22M0,0 L1520,0 L1520,1960 L0,1960 Z M39,158 L36,161 L35,163 L34,228 L38,241 L41,258 L45,269 L48,289 L52,300 L55,312 L56,321 L60,334 L65,357 L69,370 L72,388 L77,409 L79,421 L84,434 L88,454 L93,471 L97,487 L101,501 L104,516 L109,531 L112,547 L117,563 L120,580 L124,594 L127,613 L133,631 L137,648 L141,662 L144,677 L149,692 L152,708 L157,724 L160,739 L165,755 L168,772 L173,790 L176,807 L181,824 L183,835 L188,849 L192,869 L197,885 L200,900 L205,916 L208,932 L211,939 L216,966 L221,984 L224,1000 L228,1013 L232,1033 L237,1047 L240,1063 L245,1080 L249,1097 L253,1110 L256,1126 L261,1142 L265,1161 L269,1175 L272,1192 L276,1205 L280,1226 L285,1241 L288,1255 L293,1272 L296,1287 L301,1302 L304,1318 L309,1335 L313,1352 L317,1366 L321,1388 L325,1402 L328,1418 L333,1433 L336,1448 L340,1459 L344,1479 L349,1495 L353,1513 L357,1526 L360,1542 L365,1557 L369,1579 L373,1597 L377,1613 L381,1625 L384,1642 L388,1651 L392,1671 L397,1687 L399,1696 L403,1700 L406,1701 L417,1702 L461,1703 L470,1704 L519,1705 L1008,1705 L1056,1704 L1065,1703 L1097,1703 L1124,1701 L1129,1698 L1133,1693 L1137,1681 L1141,1662 L1146,1646 L1149,1632 L1154,1615 L1157,1599 L1161,1584 L1164,1567 L1169,1552 L1173,1535 L1177,1522 L1180,1506 L1185,1492 L1189,1472 L1193,1459 L1197,1441 L1201,1431 L1205,1409 L1209,1393 L1213,1373 L1217,1361 L1220,1345 L1225,1331 L1229,1311 L1234,1295 L1238,1279 L1241,1270 L1244,1254 L1250,1238 L1253,1221 L1257,1205 L1260,1189 L1265,1173 L1268,1155 L1273,1141 L1277,1122 L1281,1110 L1284,1094 L1289,1080 L1292,1063 L1297,1048 L1302,1026 L1305,1015 L1308,997 L1313,981 L1316,964 L1321,951 L1324,935 L1329,920 L1333,900 L1337,889 L1340,873 L1346,854 L1349,838 L1353,826 L1357,804 L1361,790 L1365,770 L1369,759 L1372,742 L1377,728 L1381,708 L1385,696 L1388,680 L1394,663 L1397,648 L1402,630 L1407,607 L1409,600 L1412,583 L1417,569 L1420,552 L1425,537 L1429,518 L1433,505 L1437,486 L1441,475 L1444,459 L1449,444 L1452,426 L1457,406 L1461,386 L1464,378 L1469,356 L1473,343 L1477,323 L1480,314 L1484,294 L1488,281 L1490,268 L1493,257 L1496,245 L1499,231 L1499,165 L1497,160 L1494,158 Z %22 fill=%22#FFFFFF%22/><path d=%22M0,0 L1455,0 L1459,3 L1460,12 L1460,73 L1455,96 L1452,105 L1450,114 L1448,127 L1444,140 L1440,159 L1436,173 L1433,189 L1427,210 L1424,223 L1420,236 L1415,261 L1412,273 L1409,289 L1404,305 L1401,320 L1397,331 L1393,351 L1388,368 L1385,382 L1380,398 L1377,414 L1372,429 L1369,446 L1364,466 L1361,480 L1356,498 L1354,508 L1348,526 L1345,541 L1340,558 L1337,573 L1333,584 L1329,604 L1324,620 L1321,636 L1316,655 L1313,671 L1308,688 L1306,700 L1301,715 L1298,731 L1293,745 L1289,765 L1284,780 L1281,796 L1276,810 L1273,827 L1268,843 L1265,861 L1260,880 L1256,897 L1253,905 L1249,925 L1244,939 L1241,955 L1236,972 L1233,986 L1229,997 L1225,1019 L1220,1034 L1216,1056 L1213,1067 L1210,1084 L1204,1100 L1201,1115 L1196,1131 L1192,1148 L1188,1161 L1185,1177 L1180,1191 L1177,1206 L1172,1223 L1168,1243 L1164,1261 L1161,1276 L1156,1290 L1152,1308 L1148,1322 L1145,1337 L1140,1352 L1137,1368 L1132,1384 L1129,1397 L1124,1412 L1121,1430 L1116,1449 L1113,1465 L1108,1481 L1105,1495 L1101,1507 L1097,1527 L1093,1537 L1088,1542 L1085,1543 L1056,1545 L1026,1545 L1017,1546 L969,1547 L480,1547 L431,1546 L422,1545 L378,1544 L367,1543 L361,1540 L359,1535 L355,1519 L351,1504 L348,1490 L344,1480 L341,1463 L335,1445 L331,1425 L327,1405 L323,1389 L320,1380 L317,1364 L312,1348 L308,1330 L304,1318 L300,1298 L296,1287 L293,1271 L288,1257 L285,1240 L280,1221 L277,1203 L272,1187 L268,1169 L264,1156 L261,1140 L256,1126 L252,1106 L247,1089 L243,1073 L240,1064 L236,1043 L232,1030 L229,1012 L224,995 L220,977 L216,964 L213,948 L207,928 L204,914 L200,902 L197,885 L192,872 L188,851 L184,838 L180,818 L176,803 L171,778 L168,771 L165,754 L160,738 L156,720 L152,708 L148,688 L143,673 L140,658 L136,645 L133,627 L128,610 L125,593 L120,578 L117,562 L112,546 L109,530 L104,516 L100,496 L96,483 L92,466 L88,455 L85,436 L80,418 L77,401 L72,385 L69,370 L64,355 L60,335 L55,319 L52,305 L47,288 L44,273 L39,259 L36,242 L32,226 L29,208 L25,196 L20,171 L17,163 L15,151 L11,136 L9,131 L6,111 L2,100 L-1,83 L-5,70 L-4,5 L-2,1 Z M140,66 L137,68 L136,71 L136,84 L140,104 L143,117 L147,143 L150,155 L153,176 L157,198 L159,205 L163,231 L166,243 L169,264 L173,286 L175,293 L179,320 L182,332 L184,348 L187,364 L189,374 L191,381 L193,397 L198,420 L200,436 L203,452 L205,462 L207,469 L209,485 L214,508 L216,524 L219,540 L221,550 L223,557 L225,573 L230,596 L232,612 L235,628 L239,648 L241,664 L244,675 L251,717 L254,729 L257,752 L260,763 L265,792 L267,805 L271,811 L278,814 L389,813 L388,816 L383,821 L371,835 L368,839 L364,846 L360,853 L357,861 L354,866 L352,870 L349,882 L346,892 L343,912 L341,927 L341,965 L344,986 L349,1002 L355,1018 L363,1032 L367,1037 L373,1045 L380,1054 L387,1064 L394,1070 L398,1074 L409,1083 L419,1091 L425,1094 L432,1099 L448,1107 L457,1110 L465,1114 L475,1117 L485,1122 L497,1125 L504,1129 L519,1134 L532,1139 L540,1142 L553,1147 L563,1150 L576,1155 L585,1157 L592,1161 L597,1163 L609,1166 L619,1171 L629,1174 L645,1179 L651,1181 L650,1184 L612,1184 L354,1185 L351,1190 L352,1283 L356,1305 L359,1315 L361,1324 L366,1336 L370,1347 L375,1355 L378,1362 L387,1376 L395,1383 L402,1390 L406,1394 L416,1402 L424,1407 L431,1411 L437,1414 L445,1419 L452,1421 L460,1426 L471,1430 L479,1434 L490,1437 L494,1440 L510,1444 L528,1449 L535,1451 L552,1454 L577,1459 L606,1462 L611,1464 L625,1465 L630,1466 L675,1468 L686,1470 L780,1470 L791,1468 L836,1466 L860,1462 L895,1458 L923,1452 L940,1449 L950,1446 L966,1442 L983,1436 L995,1432 L1004,1428 L1015,1424 L1022,1420 L1030,1417 L1040,1411 L1046,1407 L1050,1404 L1057,1400 L1072,1386 L1081,1376 L1085,1368 L1089,1363 L1093,1353 L1097,1345 L1101,1329 L1104,1320 L1107,1301 L1107,1288 L1109,1277 L1108,1254 L1107,1247 L1106,1225 L1102,1205 L1099,1196 L1097,1187 L1093,1179 L1091,1173 L1088,1165 L1082,1155 L1078,1149 L1075,1145 L1072,1139 L1067,1134 L1058,1124 L1047,1113 L1039,1108 L1035,1105 L1028,1101 L1022,1097 L1016,1094 L1008,1089 L1000,1086 L992,1081 L984,1078 L980,1075 L968,1071 L962,1067 L947,1062 L937,1057 L927,1054 L917,1049 L907,1046 L896,1041 L887,1039 L882,1036 L863,1030 L850,1025 L839,1022 L826,1017 L815,1014 L802,1009 L791,1006 L775,1001 L766,998 L764,993 L770,992 L1075,992 L1080,988 L1081,984 L1081,930 L1080,924 L1079,908 L1076,892 L1073,874 L1067,858 L1064,849 L1059,842 L1056,835 L1048,825 L1042,817 L1040,813 L1194,813 L1199,809 L1202,797 L1204,782 L1207,768 L1210,755 L1212,736 L1215,728 L1220,694 L1223,680 L1226,667 L1228,648 L1231,640 L1236,606 L1240,587 L1242,577 L1245,557 L1248,544 L1254,507 L1257,496 L1260,473 L1264,456 L1270,419 L1273,408 L1276,385 L1280,368 L1286,331 L1289,320 L1292,297 L1296,280 L1302,243 L1305,232 L1308,209 L1311,196 L1315,173 L1317,160 L1322,136 L1324,120 L1326,115 L1329,95 L1331,85 L1332,71 L1327,66 L1003,66 L997,69 L994,74 L991,90 L989,98 L986,112 L983,127 L980,141 L975,167 L970,193 L968,201 L966,219 L963,232 L960,249 L958,267 L954,288 L952,299 L950,322 L947,334 L946,335 L941,320 L941,310 L939,300 L937,283 L933,255 L931,239 L929,220 L925,199 L923,183 L922,169 L916,129 L913,96 L910,75 L907,69 L902,66 L563,66 L557,69 L555,73 L550,100 L546,116 L542,140 L538,156 L534,180 L530,196 L524,233 L520,252 L518,268 L516,275 L514,289 L513,292 L510,325 L509,328 L507,328 L503,311 L499,279 L497,257 L492,225 L489,195 L484,161 L481,131 L475,89 L474,74 L470,68 L465,66 Z %22 fill=%22#dc2222%22 transform=%22translate%2839,158%29%22/><path d=%22M0,0 L6,0 L13,5 L28,10 L37,15 L48,19 L55,23 L63,26 L73,34 L77,39 L84,53 L86,64 L87,77 L89,88 L87,102 L84,112 L76,121 L70,125 L61,127 L48,128 L41,130 L31,129 L28,128 L11,126 L3,119 L-1,112 L-2,97 L-3,4 Z %22 fill=%22#dc2222%22 transform=%22translate%28722,1353%29%22/><path d=%22M0,0 L2,1 L4,13 L6,29 L10,48 L14,68 L18,88 L21,104 L27,126 L32,151 L35,158 L39,178 L41,183 L40,190 L-39,190 L-42,187 L-41,181 L-38,174 L-34,154 L-31,140 L-27,122 L-25,109 L-21,93 L-17,69 L-13,53 L-9,29 L-7,23 L-4,7 L-1,1 Z %22 fill=%22#dc2222%22 transform=%22translate%28771,713%29%22/><path d=%22M0,0 L26,0 L39,4 L43,9 L47,17 L48,26 L48,94 L51,101 L50,105 L42,105 L34,101 L17,96 L12,92 L-1,88 L-7,83 L-15,78 L-23,70 L-29,60 L-31,49 L-31,26 L-29,17 L-17,4 Z %22 fill=%22#dc2222%22 transform=%22translate%28743,1046%29%22/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* ========== TOOLBAR (top bar buttons) ========== */
.toolbar {
    gap: 8px;
}
.toolbar button,
.toolbar .dd-btn {
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-1);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    transition: all 0.12s ease;
    cursor: pointer;
    letter-spacing: -0.005em;
}
.toolbar button:hover,
.toolbar .dd-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-4);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.toolbar button.primary {
    background: var(--bg-dark);
    color: var(--text-inv);
    border-color: var(--bg-dark);
}
.toolbar button.primary:hover {
    background: #27272a;
    border-color: #27272a;
}
.toolbar button.primary[style*="background:#0a5b2a"],
.toolbar button.primary[style*="background:#0a"] {
    background: var(--green) !important;
    border-color: var(--green) !important;
}
.toolbar .dd-btn.secondary {
    background: var(--bg-card);
    color: var(--text-2);
}
.toolbar .dd-btn.secondary[style*="background:#2b3a55"] {
    background: var(--bg-card) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-1) !important;
}
.toolbar .dd-btn.secondary[style*="background:#5a3a8a"] {
    background: var(--bg-card) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-1) !important;
}

/* Dropdown menus */
.dd-menu {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 240px;
    margin-top: 4px;
}
.dd-menu button {
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-1);
    cursor: pointer;
    transition: background 0.1s ease;
    font-family: var(--font-sans);
}
.dd-menu button:hover {
    background: var(--bg-hover);
}
.dd-menu hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: 6px 4px;
}
.dd-menu .dd-group {
    padding: 8px 12px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-4);
    font-weight: 600;
}

/* ========== MAIN ========== */
main {
    padding: 28px 32px;
    max-width: none;
    margin: 0;
}

/* ========== SECTIONS (cards) ========== */
.section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.section-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 22px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-header[style*="background:#2b3a55"] {
    background: var(--bg-card) !important;
    color: var(--text-1) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
.section-body {
    padding: 22px;
    background: var(--bg-card);
}

/* ========== FORM FIELDS ========== */
.field {
    margin-bottom: 0;
}
.field label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: var(--font-sans);
    background: var(--bg-card);
    color: var(--text-1);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--text-2);
    box-shadow: 0 0 0 3px rgba(9,9,11,0.06);
}

/* ========== TABLES ========== */
/* ========== TABLE/TREE VIEW TOGGLE ========== */
.view-toggle { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.view-toggle-btn { border: 0; background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-family: var(--font-sans); transition: all 0.15s; }
.view-toggle-btn:hover { color: var(--text-1); }
.view-toggle-btn.active { background: var(--bg-card); color: var(--text-1); box-shadow: var(--shadow-sm); }

/* ========== LOGIN CARD FOOTER ========== */
.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #999;
    line-height: 1.6;
    letter-spacing: 0.02em;
}
.login-footer a:hover { color: #c00 !important; }

/* ========== BUILD VIEW (indented hierarchy, shop-floor friendly) ========== */
.build-view { max-width: 1600px; margin: 0 auto; padding: 4px 0 40px; }

.build-notice {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    padding: 14px 20px;
    border-radius: 6px;
    color: #1e3a8a;
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.build-search { margin-bottom: 20px; }
.build-search input {
    width: 100%;
    max-width: 520px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--font-sans);
    background: var(--bg-card);
    color: var(--text-1);
}
.build-search input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }

.build-list { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Section labels ---------- */
.build-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #71717a;
    padding: 24px 4px 10px 4px;
    margin-top: 4px;
}
.build-list > .build-group-label:first-child { padding-top: 0; }

/* ---------- Base row ---------- */
.build-row {
    display: grid;
    grid-template-columns: 64px 22px 180px 1fr auto auto 32px;
    gap: 14px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 11px 18px;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.build-row:hover { border-color: #d4d4d8; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

/* Icon cell */
.b-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #71717a; flex-shrink: 0;
}
.b-icon svg { width: 18px; height: 18px; display: block; }

/* ---------- MASTER row ---------- */
.build-row.master {
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
    border: 1px solid #1e3a8a;
    color: #fff;
    padding: 18px 22px;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
    margin-bottom: 12px;
}
.build-row.master .b-icon { color: #bfdbfe; }
.build-row.master .b-tag {
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
.build-row.master .b-qty { font-size: 28px; color: #fff; font-weight: 800; }
.build-row.master .b-item { font-size: 16px; font-weight: 700; color: #fff; }
.build-row.master .b-desc { font-size: 15px; font-weight: 500; color: #dbeafe; }
.build-row.master:hover { box-shadow: 0 4px 14px rgba(30, 64, 175, 0.35); border-color: #1e3a8a; }
.build-row.master .b-qty:hover,
.build-row.master .b-item:hover,
.build-row.master .b-desc:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }

/* ---------- SUB-ASSEMBLY row ---------- */
.build-row.sub {
    margin-left: 36px;
    background: #fafafa;
    border-left: 4px solid #2563eb;
    padding-left: 18px;
}
.build-row.sub .b-icon { color: #2563eb; }
.build-row.sub .b-tag {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
.build-row.sub .b-qty { font-size: 22px; color: #18181b; font-weight: 700; }
.build-row.sub .b-item { font-size: 14px; font-weight: 700; color: #18181b; }
.build-row.sub .b-desc { font-size: 14px; font-weight: 500; color: #3f3f46; }

/* ---------- PART row ---------- */
.build-row.part {
    margin-left: 72px;
    border-color: #e4e4e7;
    padding: 9px 16px;
    background: #fff;
    position: relative;
}
.build-row.part .b-icon { color: #a1a1aa; }
.build-row.part::before {
    content: '';
    position: absolute;
    left: -36px;
    top: -4px;
    bottom: 50%;
    width: 1px;
    background: #d4d4d8;
}
.build-row.part::after {
    content: '';
    position: absolute;
    left: -36px;
    top: 50%;
    width: 32px;
    height: 1px;
    background: #d4d4d8;
}
.build-row.part .b-qty { font-size: 18px; color: #27272a; font-weight: 600; }
.build-row.part .b-item { font-size: 13px; color: #18181b; }
.build-row.part .b-desc { font-size: 13px; color: #3f3f46; }

/* ---------- Cell styling (inline editing) ---------- */
.b-qty {
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.b-qty:hover { background: var(--bg-soft); border-color: var(--border); }
.b-qty input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #2563eb; border-radius: 6px;
    padding: 3px 6px;
    font-size: inherit; font-weight: inherit; font-family: inherit;
    text-align: center; outline: none; background: #fff;
}

.b-item {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--text-1);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b-item:hover { background: var(--bg-soft); border-color: var(--border); }
.b-item input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #2563eb; border-radius: 6px;
    padding: 3px 6px;
    font-size: inherit; font-weight: inherit; font-family: inherit;
    outline: none; background: #fff;
}

.b-desc {
    color: var(--text-1);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b-desc:hover { background: var(--bg-soft); border-color: var(--border); }
.b-desc input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #2563eb; border-radius: 6px;
    padding: 3px 6px;
    font-size: inherit; font-weight: inherit; font-family: inherit;
    outline: none; background: #fff;
}

/* ---------- Type badges ---------- */
.b-type { text-align: right; }
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid;
    white-space: nowrap;
}
.type-badge.make  { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.type-badge.stock { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.type-badge.cust  { color: #b45309; border-color: #fbbf24; background: #fffbeb; }
.build-row.master .type-badge {
    background: rgba(255,255,255,0.20);
    color: #fff;
    border-color: rgba(255,255,255,0.30);
}

/* ---------- Operation badges (OP1 = blue, OP2 = orange, OP3 = purple) ---------- */
.b-ops { display: inline-flex; gap: 4px; align-items: center; }
.b-ops .op-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.op-pill.op1 { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.op-pill.op2 { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
.op-pill.op3 { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.b-ops .op-empty { color: #d4d4d8; font-size: 13px; font-weight: 500; padding: 0 6px; }
.build-row.master .op-pill {
    background: rgba(255,255,255,0.20);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

/* ---------- Delete ---------- */
.b-act { display: flex; justify-content: center; align-items: center; }
.b-act button {
    background: transparent;
    border: 1px solid transparent;
    color: #a1a1aa;
    width: 28px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.b-act button:hover { background: #fee2e2; color: #c00; border-color: #fecaca; }
.build-row.master .b-act button { color: rgba(255,255,255,0.5); }
.build-row.master .b-act button:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }

.build-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-3);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
    .build-row { grid-template-columns: 50px 18px 1fr auto auto 28px; gap: 8px; padding: 10px 14px; }
    .build-row .b-item { grid-column: 3 / 4; }
    .build-row .b-desc { display: none; }
    .build-row.master { padding: 14px 16px; }
    .build-row.master .b-qty { font-size: 22px; }
    .build-row.sub { margin-left: 16px; }
    .build-row.part { margin-left: 32px; }
    .build-row.part::before { left: -16px; }
    .build-row.part::after { left: -16px; width: 14px; }
}

/* Scrollable table viewport — keeps horizontal scrollbar with the table, not at page bottom */
.table-viewport {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    /* Right-edge scroll hint shadow */
    background-image:
        linear-gradient(to right, var(--bg-card) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg-card) 70%),
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
/* Thin modern scrollbar */
.table-viewport::-webkit-scrollbar { height: 12px; width: 12px; }
.table-viewport::-webkit-scrollbar-track { background: var(--bg-soft); border-radius: 6px; }
.table-viewport::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 6px;
    border: 2px solid var(--bg-soft);
}
.table-viewport::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }
.table-viewport { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) var(--bg-soft); }

table.grid {
    background: var(--bg-card);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: 100%;
}
table.grid thead th {
    background: var(--bg-soft);
    color: var(--text-3);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    /* Sticky column headers — stay visible while scrolling */
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Sticky first column ("Item #" / row identifier) — stays visible while scrolling horizontally */
table.grid thead th:first-child,
table.grid tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border);
}
table.grid thead th:first-child {
    z-index: 3;
    background: var(--bg-soft);
}
table.grid tbody tr:nth-child(even) td:first-child { background: var(--bg-soft); }
table.grid tbody tr:hover td:first-child { background: var(--bg-hover); }
table.grid tbody td {
    padding: 0;                       /* let the input fill the cell so clicking anywhere lands on it */
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-1);
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--bg-hover); }
table.grid input,
table.grid select {
    border: 1px solid transparent;
    background: transparent;
    padding: 10px 12px;               /* internal padding so text has breathing room; the INPUT now owns the cell area */
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-1);
    width: 100%;
    box-sizing: border-box;
    display: block;                   /* fill the td entirely so clicking anywhere = clicking the input */
    cursor: text;
}
table.grid select { cursor: pointer; }
/* v1.9.40: hide the native dropdown arrow on grid selects — it ate ~16px of cell width and
   truncated op names ("PLASMA CUT" -> "PLASN"). Selects still open on click; hover/focus
   border + background change remain the visual affordance. */
table.grid select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.grid td.actions { padding: 4px; }
table.grid td .col-actions, table.grid td.col-actions { padding: 4px; }
table.grid input:hover,
table.grid select:hover {
    background: var(--bg-card);
    border-color: var(--border);
}
table.grid input:focus,
table.grid select:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--text-2);
    box-shadow: 0 0 0 3px rgba(9,9,11,0.06);
}

/* ========== ACTION BUTTONS in body ========== */
.btn-add {
    padding: 7px 14px;
    background: var(--bg-dark);
    color: var(--text-inv);
    border: 1px solid var(--bg-dark);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all 0.12s ease;
    font-family: var(--font-sans);
    letter-spacing: -0.005em;
}
.btn-add:hover {
    background: #27272a;
    border-color: #27272a;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.btn-add[style*="background:#2b6b3a"],
.btn-add[style*="background:#0a5b2a"] {
    background: var(--green) !important;
    border-color: var(--green) !important;
}
.btn-add[style*="background:#2b6b3a"]:hover,
.btn-add[style*="background:#0a5b2a"]:hover {
    background: #15803d !important;
    border-color: #15803d !important;
}
.btn-add[style*="background:#555"] {
    background: var(--bg-card) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-1) !important;
}
.btn-add[style*="background:#555"]:hover {
    background: var(--bg-hover) !important;
}

/* Item-only mode badge */
#itemOnlyModeBadge[style*="background:#0a5b2a"] {
    background: var(--green-soft) !important;
    color: var(--green) !important;
    font-weight: 600 !important;
    border: 1px solid #bbf7d0;
}

/* ========== MODALS ========== */
.modal-bg {
    background: rgba(9,9,11,0.4) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.modal-content {
    background: var(--bg-card);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}
.modal-tab {
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: -0.005em;
}
.modal-tab:hover { color: var(--text-1); }
.modal-tab.active {
    color: var(--text-1);
    border-bottom-color: var(--bg-dark);
}

/* ========== FOOTER ========== */
footer, .footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-3);
    padding: 14px 28px;
    font-size: 12px;
}

/* ========== LOGIN OVERLAY - HERO MOMENT ========== */
#loginOverlay {
    background: #0a0a0c;
    background-image:
        radial-gradient(ellipse 800px 600px at 50% -10%, rgba(196,30,30,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at 80% 100%, rgba(196,30,30,0.10) 0%, transparent 50%),
        radial-gradient(ellipse 600px 400px at 20% 90%, rgba(50,80,180,0.08) 0%, transparent 50%);
}
#loginOverlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.login-bg-logo {
    width: 55vmin;
    max-width: 520px;
    min-width: 260px;
    opacity: 0.06;
    filter: grayscale(1) brightness(2);
}
.login-card {
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-2xl);
    padding: 44px 48px 40px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 12px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,1);
    max-width: 460px;
    width: 100%;
    position: relative;
}
/* logo now rendered as inline <img class="login-mark"> */
.login-mark {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto 28px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.login-card .login-logo {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    text-align: center;
}
.login-card .login-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 26px;
    text-align: center;
    font-weight: 400;
}
.login-card label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    text-transform: none;
    letter-spacing: 0;
    margin: 14px 0 6px;
}
.login-card input {
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: 14px;
    background: #fff;
    font-family: var(--font-sans);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.login-card input:focus {
    outline: none;
    border-color: var(--text-1);
    box-shadow: 0 0 0 3px rgba(9,9,11,0.08);
    background: #fff;
}
.login-card button {
    background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
    color: #fff;
    border: 1px solid #09090b;
    border-radius: var(--r-md);
    padding: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    margin-top: 24px;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: all 0.15s ease;
}
.login-card button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
.login-foot {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-4);
    margin-top: 24px;
    letter-spacing: 0;
    text-align: center;
}

/* User badge in footer */
.user-badge {
    font-family: var(--font-sans);
    font-size: 12px;
}
.user-badge b { font-weight: 600; color: var(--text-1); }
.user-badge a {
    padding: 2px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--text-2);
    font-size: 11px;
    transition: all 0.12s;
}
.user-badge a:hover {
    background: var(--bg-hover);
    border-color: var(--text-4);
    color: var(--text-1);
}

/* Password hint inline */
.password-hint { font-family: var(--font-sans); font-size: 11px; }

/* Users table refinements */
table.users-table { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
table.users-table th {
    background: var(--bg-soft);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
table.users-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
table.users-table tr:last-child td { border-bottom: 0; }
table.users-table button {
    padding: 5px 11px;
    font-size: 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.12s;
    color: var(--text-1);
}
table.users-table button:hover {
    background: var(--bg-hover);
    border-color: var(--text-4);
}
table.users-table button.btn-del {
    background: var(--brand-soft);
    border-color: #fecaca;
    color: var(--brand-strong);
}
table.users-table button.btn-del:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* ========== UTILITIES & POLISH ========== */
hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--text-1);
    outline-offset: 2px;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* Make the spacer flex */
header .spacer { flex: 1; }

/* Notes */
.note, p.note {
    font-family: var(--font-sans);
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.5;
}

/* Loading + status states */
[style*="background:#fef2f2"], [style*="background:#fee"] { background: var(--brand-soft) !important; }
[style*="background:#f0fdf4"] { background: var(--green-soft) !important; }
[style*="background:#fffbeb"] { background: var(--amber-soft) !important; }

/* ============== RELEASE NOTES ============== */
.release-version {
    margin: 24px 0 0;
    padding: 18px 0 4px;
    border-top: 1px solid var(--border);
}
.release-version:first-child { margin-top: 16px; padding-top: 8px; border-top: 0; }
.release-version-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.release-version-num {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
}
.release-version-num.current::after {
    content: 'CURRENT';
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    margin-left: 8px;
    border-radius: 99px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.release-version-date {
    font-size: 12px;
    color: var(--text-3);
}
.release-change {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.55;
}
.release-tag {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    margin-top: 1px;
    min-width: 60px;
    text-align: center;
}
.release-tag.tag-NEW    { background: #ecfdf5; color: #047857; }
.release-tag.tag-UI     { background: #eef2ff; color: #3730a3; }
.release-tag.tag-FIX    { background: #fef3c7; color: #92400e; }
.release-tag.tag-CHANGE { background: #f3f4f6; color: #374151; }
.release-tag.tag-DEPLOY { background: #fdf2f8; color: #9d174d; }
.release-change-text { color: var(--text-2); }

/* ============== STEP IMPORT ============== */
#stepProgressOverlay {
    position: fixed; inset: 0;
    background: rgba(9,9,11,0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}
.step-progress-card {
    background: #fff;
    border-radius: var(--r-xl);
    padding: 32px 40px;
    box-shadow: var(--shadow-xl);
    text-align: center;
    max-width: 420px;
}
.step-progress-card .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: stepSpin 0.8s linear infinite;
}
@keyframes stepSpin { to { transform: rotate(360deg); } }
.step-progress-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.step-progress-card .step-progress-detail { font-size: 13px; color: var(--text-3); }

.step-tree {
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
}
.step-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.step-tree-node .step-tree-name { color: var(--text-1); }
.step-tree-node .step-tree-qty {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 10px;
}
.step-tree-node.is-assembly .step-tree-name { font-weight: 600; }
.step-tree-node.is-assembly { color: var(--blue); }
.step-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0 18px;
}
.step-summary .stat {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    text-align: center;
}
.step-summary .stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}
.step-summary .stat-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* Mobile/tablet refinements */
@media (max-width: 768px) {
    /* v1.9.76: header must NOT be sticky on phones — the stacked toolbar made it
       ~480px tall (53% of an S26 Ultra screen), permanently covering the app. */
    header { padding: 10px 14px; gap: 8px; position: static; }
    header h1 { font-size: 13px; }
    header h1::before { width: 26px; height: 26px; font-size: 13px; }
    main { padding: 14px; }
    .section { border-radius: var(--r-lg); }
    .section-body { padding: 16px; }
    .login-card { padding: 28px 22px; }
    .login-mark { max-width: 280px; margin-bottom: 22px; }
}
/* Experimental-feature gate: elements tagged [data-beta] are hidden unless the
   signed-in user has beta_access (body gets .beta-on). Add data-beta="<key>" to
   any future not-yet-proven feature to gate it the same way. */
body:not(.beta-on) [data-beta] { display: none !important; }