.workspace-mode-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 28px; border-bottom:1px solid var(--border); background:#fff; }
#workspace-mode-switch { --mode-position:1; --mode-count:3; position:relative; display:grid; grid-template-columns:repeat(var(--mode-count),minmax(0,1fr)); width:calc(var(--mode-count)*136px); max-width:100%; box-sizing:border-box; flex:none; padding:4px; border:1px solid #e6e1db; border-radius:12px; background:#f2f0ed; touch-action:pan-y; user-select:none; }
#workspace-mode-switch button[hidden] { display:none!important; }
.workspace-mode-thumb { position:absolute; left:4px; top:4px; bottom:4px; width:calc((100% - 8px)/var(--mode-count)); border-radius:8px; background:#fff; box-shadow:0 2px 6px #30261c14,0 0 0 1px #30261c06; transform:translateX(calc(var(--mode-position)*100%)); transition:transform .25s cubic-bezier(.22,.8,.3,1); pointer-events:none; }
#workspace-mode-switch.is-dragging .workspace-mode-thumb { transition:none; }
#workspace-mode-switch button { position:relative; z-index:1; min-height:38px; padding:8px 12px; border:0; border-radius:8px; background:transparent; font-size:13px; font-weight:600; line-height:1.5; font-family:inherit; color:#81786f; cursor:pointer; transition:color .2s; white-space:nowrap; }
#workspace-mode-switch button[aria-selected="true"] { color:#b9232a; }
#workspace-mode-switch button:focus-visible { outline:2px solid #b9232a; outline-offset:-2px; }
#workspace-mode-caption { flex:1; min-width:0; margin:0; font-size:11px; line-height:1.6; color:#8c8279; text-align:right; }
.workspace-table-actions { display:flex; flex:none; gap:8px; margin-left:auto; }
.drawing-size-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.order-shared-fields { border-top:1px solid var(--border); padding-top:18px; margin-top:18px; }
.order-shared-fields > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; cursor:pointer; list-style:none; }
.order-shared-fields > summary::after { content:'＋'; color:#9e9389; font-size:15px; }
.order-shared-fields[open] > summary::after { content:'−'; }
.order-shared-fields > summary::-webkit-details-marker { display:none; }
.order-shared-fields > summary > span { margin-left:auto; font-weight:400; font-size:10px; color:#9d938a; }
.order-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; padding-top:15px; }
:is(#order-shared-fields,#material-mode-panel) label { margin:0; font-size:12px; font-weight:400; }
:is(#order-shared-fields,#material-mode-panel) input,
:is(#order-shared-fields,#material-mode-panel) select,
:is(#order-shared-fields,#material-mode-panel) textarea { box-sizing:border-box; min-width:0; width:100%; color:#302b27; font-family:inherit; border:1px solid #dedad5; border-radius:7px; padding:8px 9px; font-size:13px; background:#fff; line-height:1.5; box-shadow:none; }
:is(#order-shared-fields,#material-mode-panel) :is(input,select,textarea):focus { outline:2px solid #b9232a20; border-color:#b9232a; outline-offset:1px; }
#order-shared-fields textarea { resize:vertical; min-height:68px; max-height:200px; }
.order-field { display:flex; flex-direction:column; gap:6px; }
.order-field > span { color:#726a63; font-size:11px; }
.order-field-wide { grid-column:1 / -1; }
.order-field-hint { margin:10px 0 0; font-size:11px; color:#91887f; line-height:1.75; }
#material-mode-panel { min-width:0; border:1px solid var(--border); border-radius:12px; background:#fff; overflow:clip; align-self:start; }
.material-mode-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:23px 22px 20px; border-bottom:1px solid #e8e4df; }
.order-eyebrow { margin:0 0 5px; font-size:9px; font-weight:600; letter-spacing:.14em; color:#a28e81; }
.material-mode-heading h2 { margin:0; font-size:22px; font-weight:650; color:#2d2824; letter-spacing:.03em; }
#order-context-label { margin:6px 0 0; color:#93867b; font-size:11px; }
.order-live-badge { border:1px solid #dcebe3; background:#f3f9f6; border-radius:20px; padding:6px 10px; font-size:10px; color:#39725d; white-space:nowrap; }
.order-live-badge::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; background:#448269; border-radius:50%; vertical-align:middle; }
.order-section { padding:20px 22px 22px; border-bottom:1px solid #e8e4df; min-width:0; }
.order-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.order-section-heading h3 { margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px; }
.order-section-heading h3 > span { color:#b9232a; font-size:10px; font-weight:500; }
.order-section-heading > span { color:#9c9086; font-size:10px; text-align:right; }
#order-summary { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; border-top:1px solid #ebe7e2; }
#order-summary > div { display:grid; grid-template-columns:68px minmax(0,1fr); align-items:baseline; gap:8px; padding:11px 0; border-bottom:1px solid #f0ece7; font-size:12px; }
#order-summary > div > span { color:#9b8c80; font-size:11px; }
#order-summary strong { font-weight:500; color:#41372e; white-space:pre-wrap; overflow-wrap:anywhere; }
#order-summary .order-summary-wide { grid-column:1 / -1; }
#order-materials { margin-top:15px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:11px; }
.order-material { display:flex; gap:10px; padding:12px; border:1px solid #e9e3dc; border-radius:9px; background:#fcfbf9; min-width:0; }
.order-material-off { opacity:.5; }
.order-part-icon { display:flex; align-items:center; justify-content:center; width:40px; flex:0 0 40px; height:55px; margin-top:25px; }
.order-part-icon svg { width:100%; height:100%; }
.order-part-placeholder { color:#b3a69a; }
.order-material-body { flex:1; min-width:0; }
.order-material-heading { display:flex; align-items:center; gap:5px; margin-bottom:9px; }
.order-material-heading label { display:flex; gap:5px; align-items:center; color:#aaa097; }
#material-mode-panel input[type="checkbox"] { appearance:auto; width:13px; min-height:13px; height:13px; padding:0; accent-color:#b9232a; cursor:pointer; }
#material-mode-panel .order-material-heading > input { padding:2px 1px; min-height:24px; border-color:transparent; background:transparent; font-size:12px; font-weight:600; }
.order-origin { font-size:9px; flex:none; color:#9c8b7c; }
.order-material-values { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.8fr); gap:6px; }
.order-material-grouped .order-material-values { grid-template-columns:repeat(2,minmax(0,1fr)); }
.order-material-grouped .order-material-values > label:first-child { grid-column:1 / -1; }
.order-material-values label { display:grid; gap:4px; }
.order-material-values label > span { color:#9b8e82; font-size:10px; white-space:nowrap; }
#material-mode-panel .order-material-values input, #material-mode-panel .order-material-values select { min-height:34px; padding:6px 5px; font-size:12px; }
#material-mode-panel .order-material-values input:disabled { background:#f4f1ed; }
#material-mode-panel .order-material-note { min-height:27px; padding:5px 0 0; margin-top:5px; border:0; background:transparent; font-size:10px; color:#82786f; }
.order-piece-option { display:flex; align-items:center; gap:7px; padding-top:9px; color:#93887f; }
.order-material-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
.order-reset { border:0; padding:0; background:transparent; color:#9a897a; font:inherit; font-size:10px; cursor:pointer; text-underline-offset:3px; }
.order-reset:hover { color:#b9232a; text-decoration:underline; }
#order-glass-specs { overflow-x:auto; }
#order-glass-specs table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
#order-glass-specs th { padding:10px; font-size:10px; background:#f7f5f2; color:#968779; font-weight:500; }
#order-glass-specs td { padding:12px 10px; font-size:12px; border-bottom:1px solid #ebe6df; color:#716257; }
#order-glass-specs strong { color:#b9232a; font-size:14px; font-weight:500; }
.order-figure { display:flex; align-items:center; justify-content:center; min-height:210px; background:#fff; border:1px solid #eee9e4; border-radius:8px; overflow:hidden; }
.order-figure img { display:block; width:100%; height:100%; object-fit:contain; }
.order-figure p { padding:20px; color:#a29487; font-size:11px; text-align:center; }
#order-glass-preview { height:clamp(360px,54vh,510px); padding:10px; }
.order-drawing-pair { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1fr); }
.order-drawing-pair .order-section { padding:18px 12px; }
.order-drawing-pair .order-section + .order-section { border-left:1px solid #e8e4df; }
.order-drawing-pair .order-figure { height:285px; min-height:0; }
#order-three-preview { border:0; }
.order-drawing-pair .order-section-heading { flex-wrap:wrap; gap:8px; min-height:30px; }
.order-mode-footer { position:sticky; bottom:0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; border-top:1px solid #e5e2de; background:#ffffffed; backdrop-filter:blur(12px); }
#order-readiness { font-size:11px; color:#946c37; margin:0; line-height:1.7; }
#order-readiness[data-complete="true"] { color:#247461; }
#order-export-status { font-size:11px; color:#847b72; margin:2px 0 0; }
.order-export-actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.order-export-actions button { white-space:nowrap; }
.order-mode-empty { padding:60px 20px; color:#9b8c80; font-size:13px; text-align:center; }
.order-print-frame { position:fixed; left:-10000px; top:0; width:900px; height:1273px; border:0; }
body[data-workspace-mode="materials"] .mobile-workbench-nav { display:none; }
body[data-workspace-mode="materials"] #material-mode-panel,
body[data-workspace-mode="workbench"] #drawing-panel { animation:workspace-mode-enter .2s ease-out; }
@keyframes workspace-mode-enter { from { opacity:.55; transform:translateX(8px); } to { opacity:1; transform:none; } }
@media(max-width:800px) {
  .workspace-mode-bar { padding:12px 18px; flex-wrap:wrap; gap:8px 12px; }
  #workspace-mode-caption { order:1; flex:1 0 100%; text-align:left; }
  .material-mode-heading,.order-section { padding:18px; }
  .order-mode-footer { padding:15px 18px; }
}
@media(max-width:520px) {
  .material-mode-heading { align-items:flex-start; }
  .order-live-badge { max-width:85px; white-space:normal; line-height:1.6; padding:5px 8px; }
  #order-summary { gap:0 12px; }
  #order-summary > div { grid-template-columns:1fr; gap:4px; }
  #order-summary .order-summary-wide { grid-template-columns:68px minmax(0,1fr); }
  .order-drawing-pair { grid-template-columns:1fr; }
  .order-drawing-pair .order-section + .order-section { border-left:0; }
  #order-glass-specs th,#order-glass-specs td { padding:10px 6px; }
  #order-glass-specs strong { font-size:13px; }
  .order-export-actions { width:100%; }
  .order-export-actions button { flex:1; }
}
@media(prefers-reduced-motion:reduce) {
  .workspace-mode-thumb { transition:none; }
  body[data-workspace-mode] #material-mode-panel,body[data-workspace-mode] #drawing-panel { animation:none; }
}


.order-material-color { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:6px; margin-bottom:9px !important; }
.order-material-color > span { color:#9b8e82; font-size:10px; }
#material-mode-panel .order-material-color input { background:#f4f1ed; color:#51463d; min-height:30px; padding:5px 7px; font-size:12px; }

.order-processing { margin-top: 7px; color: #68625b; font-size: 11px; line-height: 1.6; }
.order-processing summary { cursor: pointer; }
.order-processing p { margin: 5px 0 0; }

/* Spreadsheet import and batch generation */
.order-batch-dialog { width:min(850px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dedad5; border-radius:16px; color:#302b27; box-shadow:0 24px 80px #0003; }
.order-batch-dialog::backdrop { background:#201b185c; }
.batch-heading { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; border-bottom:1px solid #eee7e2; }
.batch-heading h2 { margin:2px 0 0; font-size:20px; }
.batch-heading .order-eyebrow { margin:0 0 6px; }
.batch-body { padding:16px 24px; }
.batch-file { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; font-weight:600; }
.batch-file input { max-width:100%; font:inherit; font-weight:400; }
.batch-file input::file-selector-button { border:1px solid #dedad5; border-radius:6px; padding:8px 12px; background:#faf8f6; margin-right:10px; cursor:pointer; }
.batch-hint { color:#857b72; font-size:12px; line-height:1.7; margin:10px 0; }
#batch-summary { font-size:13px; margin:16px 0 10px; }
.batch-table-scroll { max-height:260px; overflow:auto; border:1px solid #e8e1db; border-radius:8px; }
.batch-table { border-collapse:collapse; width:100%; font-size:12px; line-height:1.6; }
.batch-table th { position:sticky; top:0; text-align:left; background:#f5f2ef; font-weight:500; white-space:nowrap; z-index:1; }
.batch-table th,.batch-table td { padding:9px 10px; border-bottom:1px solid #eee7e2; vertical-align:top; }
.batch-table td:nth-child(3) { min-width:110px; overflow-wrap:anywhere; }
.batch-table td:nth-child(4) { min-width:145px; }
.batch-table td:last-child { min-width:130px; overflow-wrap:anywhere; }
.batch-table small { display:block; color:#8c8279; font-size:11px; }
.batch-table input { accent-color:#b9232a; }
.batch-invalid { color:#ab2428; background:#fff6f5; }
.batch-options { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px; }
.batch-options label { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.batch-options select { border:1px solid #dedad5; border-radius:6px; padding:9px 12px; font:inherit; background:#fff; }
#batch-progress { width:100%; height:8px; accent-color:#b9232a; }
#batch-status { font-size:12px; line-height:1.7; margin:10px 0 0; overflow-wrap:anywhere; }
.batch-footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:16px 24px; border-top:1px solid #eee7e2; background:#fcfbfa; position:sticky; bottom:0; }
.batch-footer .capture-btn { margin:0; width:auto; padding:10px 14px; }
.batch-render-frame { position:fixed; left:-16000px; top:0; width:1200px; height:1000px; border:0; pointer-events:none; }
@media(max-width:600px) { .workspace-mode-bar { padding:12px 14px; gap:8px 12px; } #workspace-mode-switch, #workspace-mode-switch[data-materials-available="false"] { width:100%; } .workspace-table-actions { order:2; } #workspace-mode-caption { flex:1; } .batch-heading,.batch-body,.batch-footer { padding:14px; } .batch-footer button { flex:1; white-space:nowrap; } .batch-options label { flex:1; min-width:130px; } }

.batch-table input[type="checkbox"] { width:16px; height:16px; min-height:0; padding:0; margin:2px 0; box-shadow:none; appearance:auto; }