:root { --ink: #172026; --muted: #66747d; --line: #dce3e5; --teal: #087f76; --teal-dark: #08665f; --soft: #f3f6f6; --amber: #a76608; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: flex; flex-direction: column; background: #edf1f1; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.vendor-selection-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.vendor-selection-heading button { min-height: 27px; padding: 5px 9px; border: 1px solid #9ec7c1; border-radius: 4px; color: var(--teal-dark); background: white; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vendor-selection-heading button:disabled { opacity: .5; cursor: not-allowed; }

.app-shell { min-height: 100vh; }
.topbar { height: 66px; display: flex; align-items: center; gap: 11px; padding: 0 28px; color: white; background: #12292d; border-bottom: 3px solid #1b9186; }
.brand-mark { width: 50px; height: 38px; display: grid; place-items: center; padding: 4px; border-radius: 9px; background: #f5f9fa; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.topbar > div:nth-child(2) { display: flex; flex-direction: column; }
.topbar strong { font-size: 18px; letter-spacing: -.3px; }
.topbar span { color: #a9c0c2; font-size: 11px; }
.milestone-badge { margin-left: auto; padding: 7px 11px; border: 1px solid #385156; border-radius: 6px; color: #c6d5d6; font-size: 11px; }
.builder { max-width: 1600px; margin: auto; padding: 25px 28px 32px; }
.builder-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { margin: 0 0 4px !important; text-transform: uppercase; color: var(--teal) !important; font-size: 10px !important; font-weight: 800; letter-spacing: 1.4px; }
.builder-heading h1 { margin: 0; font-size: 28px; letter-spacing: -.8px; }
.builder-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.workflow-status { display: flex; align-items: center; gap: 7px; color: #536268; font-size: 11px; font-weight: 700; }
.workflow-status span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); }
.workflow-status i { width: 24px; height: 1px; background: #c3cdcf; }
.workflow-status .muted-step { color: #7d898d; background: #dce2e3; }
.workspace-grid { display: grid; grid-template-columns: minmax(400px, 515px) minmax(520px, 1fr); gap: 18px; align-items: start; }
.control-panel { display: flex; flex-direction: column; gap: 16px; }
.panel-section, .preview-panel { background: white; border: 1px solid #d6dfe1; border-radius: 9px; box-shadow: 0 2px 8px rgb(15 42 46 / 5%); }
.panel-section { padding: 17px; }
.section-heading, .preview-toolbar { display: flex; justify-content: space-between; align-items: center; }
.section-heading { margin-bottom: 13px; }
.section-heading h2, .preview-toolbar h2 { margin: 0; font-size: 15px; }
.section-heading p, .preview-toolbar p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.art-count, .preview-state { padding: 5px 8px; border-radius: 12px; color: var(--teal-dark); background: #e4f3f1; font-size: 10px; font-weight: 700; }
.drop-zone { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #9db9b7; border-radius: 7px; background: #f5fbfa; transition: .15s; cursor: pointer; }
.drop-zone:hover, .drop-zone--active { border-color: var(--teal); background: #e9f7f5; }
.upload-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 7px; border-radius: 50%; color: white; background: var(--teal); font-weight: 800; }
.drop-zone strong { font-size: 13px; }
.drop-zone > span:not(.upload-icon) { margin-top: 3px; color: var(--muted); font-size: 11px; }
.drop-zone small { margin-top: 9px; color: #849195; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.error-list { position: relative; margin-top: 10px; padding: 9px 72px 9px 11px; border: 1px solid #efb4ae; border-radius: 6px; color: #8d2922; background: #fff1f0; font-size: 11px; }
.error-list p { margin: 2px 0; }.error-list button { position: absolute; top: 9px; right: 9px; border: 0; color: #8d2922; background: transparent; font-weight: 700; font-size: 10px; }
.artwork-list { display: flex; flex-direction: column; gap: 12px; margin-top: 13px; }
.artwork-card { padding: 13px; border: 1px solid var(--line); border-radius: 7px; }
.artwork-header { display: grid; grid-template-columns: 54px minmax(0, 1fr) 26px; gap: 10px; align-items: center; }
.thumbnail-wrap { box-sizing: border-box; width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; padding: 3px; border-radius: 5px; background-color: #eef1f1; background-image: linear-gradient(45deg,#d8dede 25%,transparent 25%),linear-gradient(-45deg,#d8dede 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dede 75%),linear-gradient(-45deg,transparent 75%,#d8dede 75%); background-size: 12px 12px; background-position: 0 0,0 6px,6px -6px,-6px 0; }
.thumbnail { max-width: 100%; max-height: 100%; object-fit: contain; }
.artwork-title { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.artwork-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.artwork-title span { color: var(--muted); font-size: 9px; }
.remove-button { width: 26px; height: 26px; border: 1px solid transparent; border-radius: 4px; color: #899598; background: transparent; font-size: 20px; line-height: 1; }
.remove-button:hover { border-color: #f1c3be; color: #a52c24; background: #fff2f1; }
.warning-box { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 8px 9px; border: 1px solid #f0d4a4; border-radius: 5px; color: #744806; background: #fff8eb; }
.warning-box > b { width: 17px; height: 17px; flex: none; display: grid; place-items: center; border-radius: 50%; color: white; background: #d38b1c; font-size: 10px; }
.warning-box p { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 9px; line-height: 1.35; }.warning-box strong { font-size: 10px; }
.stray-warning { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; }.stray-warning button { align-self: center; padding: 5px 8px; border: 1px solid #d8a452; border-radius: 4px; color: #744806; background: white; font-size: 9px; font-weight: 800; }
.analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 11px 0 0; border: 1px solid #e3e8e9; border-radius: 5px; overflow: hidden; }
.analysis-grid div { padding: 8px; border-right: 1px solid #e3e8e9; }.analysis-grid div:last-child { border: 0; }
.analysis-grid dt { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .4px; }.analysis-grid dd { margin: 3px 0 0; font-size: 10px; font-weight: 700; }
.coverage-panel { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; margin-top: 8px; padding: 9px 10px; border-radius: 5px; background: #edf7f4; }.coverage-panel > div { display: flex; flex-direction: column; gap: 3px; }.coverage-panel span, .coverage-panel dt { color: #607075; font-size: 8px; text-transform: uppercase; letter-spacing: .35px; }.coverage-panel strong { font-size: 12px; }.coverage-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }.coverage-panel dl div { padding-left: 8px; border-left: 1px solid #cfe0dc; }.coverage-panel dd { margin: 3px 0 0; font-size: 10px; font-weight: 700; }.coverage-panel > button { padding: 6px 8px; border: 1px solid #9ec7c1; border-radius: 4px; color: var(--teal-dark); background: white; font-size: 9px; font-weight: 800; }
.alpha-details { margin-top: 8px; font-size: 9px; }.alpha-details summary { color: var(--teal-dark); cursor: pointer; font-weight: 700; }
.alpha-details > div { display: grid; grid-template-columns: 1fr auto 46px; gap: 10px; padding: 4px 2px; border-bottom: 1px solid #edf0f1; }.alpha-details em { color: var(--muted); text-align: right; font-style: normal; }
.field-grid { display: grid; gap: 9px; margin-top: 11px; }.two-columns { grid-template-columns: 1fr 1fr; }
.field-grid label { display: flex; flex-direction: column; gap: 5px; color: #526066; font-size: 9px; font-weight: 700; }.field-grid label > span { display: flex; align-items: center; gap: 6px; }
.field-grid input, .field-grid select { width: 100%; height: 31px; padding: 0 8px; border: 1px solid #cad4d6; border-radius: 4px; color: var(--ink); background: white; font-size: 10px; outline: 0; }.field-grid input:focus, .field-grid select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px #d9f0ed; }.field-grid input:disabled { background: #eef1f1; }
.dpi-panel { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding: 8px 10px; border-radius: 5px; background: #edf7f4; }.dpi-panel > div { display: flex; flex-direction: column; gap: 2px; }.dpi-panel div span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.dpi-panel strong { font-size: 13px; }.status-pill { padding: 4px 7px; border-radius: 9px; font-size: 9px; font-weight: 800; }.dpi-panel--good .status-pill { color: #137263; background: #cae9e2; }.dpi-panel--warning { background: #fff8eb; }.dpi-panel--warning .status-pill { color: #885709; background: #f8dfb4; }.dpi-panel--danger { background: #fff0ee; }.dpi-panel--danger .status-pill { color: #a02e25; background: #f5cbc7; }
.sheet-settings { position: static; }.optimize-button { width: 100%; height: 43px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 13px; border: 0; border-radius: 5px; color: white; background: var(--teal); font-size: 11px; font-weight: 800; cursor: pointer; }.optimize-button:hover:not(:disabled) { background: #064f57; }.optimize-button:disabled { color: #899497; background: #e5e9ea; cursor: not-allowed; }.optimize-button span { padding-left: 9px; border-left: 1px solid currentColor; font-size: 8px; text-transform: uppercase; }
.optimization-mode { display: grid; gap: 6px; margin-top: 12px; }.optimization-mode > span { color: #526066; font-size: 8px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }.optimization-mode .mode-selector { margin: 0; }.optimization-mode small { color: var(--muted); font-size: 9px; }.result-mode { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 9px; color: var(--teal-dark); font-size: 10px; }.result-mode span { color: var(--muted); }
.remaining-space { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); background: #edf7f4; }.remaining-space > div { display: grid; gap: 2px; }.remaining-space strong, .remaining-space-result > strong { color: var(--teal-dark); font-size: 10px; text-transform: uppercase; }.remaining-space span, .remaining-space-result p { margin: 0; color: var(--muted); font-size: 9px; }.remaining-space button, .remaining-space-result button { min-height: 30px; padding: 6px 10px; border: 1px solid var(--teal); border-radius: 4px; color: white; background: var(--teal); font-size: 8px; font-weight: 800; text-transform: uppercase; }.remaining-space-result { display: grid; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: #f8fafa; }.remaining-space-result > header { display: flex; justify-content: space-between; gap: 12px; }.remaining-space-result > header div { display: grid; gap: 2px; }.remaining-space-result > header span, .remaining-space-result small { color: var(--muted); font-size: 8px; }.remaining-designs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.remaining-designs article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid #d4dfde; border-radius: 5px; background: white; }.remaining-designs article > div { width: 42px; height: 42px; overflow: hidden; padding: 3px; box-sizing: border-box; border-radius: 4px; background: #edf1f1; }.remaining-designs img { width: 100%; height: 100%; object-fit: contain; }.remaining-designs article > span { min-width: 0; display: grid; gap: 3px; }.remaining-designs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }.remaining-designs button { padding: 5px 7px; }.remaining-space-result aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px; border: 1px solid #bcd9d4; border-radius: 5px; background: #e9f6f3; }.remaining-space-result aside strong { color: var(--teal-dark); font-size: 9px; text-transform: uppercase; }.remaining-space-result aside span { font-size: 9px; font-weight: 700; }.remaining-space-result aside button { margin-left: auto; }.fill-notice { padding: 9px 16px; border-top: 1px solid #b9d8cc; color: #176849; background: #e4f4ec; font-size: 9px; font-weight: 800; text-align: center; }
.optimization-actions { height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-left: 12px; border-radius: 5px; color: #245159; background: #e3f2ef; font-size: 10px; font-weight: 700; }.optimization-actions button { align-self: stretch; padding: 0 14px; border: 0; border-left: 1px solid #bfd9d5; color: #8d322c; background: transparent; font-size: 10px; font-weight: 800; }
.preview-panel { position: relative; min-height: 720px; display: flex; flex-direction: column; overflow: hidden; }.preview-toolbar { height: 65px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.preview-canvas-wrap { position: relative; flex: 1; min-height: 590px; padding: 35px 28px 28px 40px; background: #d9dfe0; }
.ruler { position: absolute; opacity: .55; }.ruler--top { top: 15px; left: 40px; right: 28px; height: 10px; border-top: 1px solid #7e8a8d; background: repeating-linear-gradient(90deg, #7e8a8d 0 1px, transparent 1px 20px); }.ruler--side { top: 35px; bottom: 28px; left: 20px; width: 10px; border-left: 1px solid #7e8a8d; background: repeating-linear-gradient(0deg, #7e8a8d 0 1px, transparent 1px 20px); }
.sheet-canvas { min-height: 527px; height: 100%; overflow: hidden; border: 1px solid #bfc8ca; background: white; box-shadow: 0 3px 12px rgb(27 46 50 / 11%); }.gang-preview-viewport { width: 100%; }.gang-preview-toolbar { border: 0; border-bottom: 1px solid #cbd4d6; border-radius: 0; }.preview-background-controls { display: flex; align-items: center; gap: 5px; margin-left: 7px; padding-left: 9px; border-left: 1px solid #d1d9da; }.preview-background-controls b { margin-right: 2px; color: #657378; font-size: 8px; text-transform: uppercase; }.zoom-toolbar .preview-background-swatch { width: 20px; height: 20px; padding: 0; border-color: #aebabc; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); }.zoom-toolbar .preview-background-swatch[aria-pressed="true"] { outline: 2px solid var(--teal); outline-offset: 1px; }.preview-background-custom { position: relative; width: 22px; height: 22px; overflow: hidden; border: 1px solid #aebabc; border-radius: 50%; background: conic-gradient(#ed4b48,#f2c84b,#58ae69,#46a9d6,#8c66c7,#ed4b48); cursor: pointer; }.preview-background-custom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.preview-background-custom input { position: absolute; inset: -8px; width: 40px; height: 40px; opacity: 0; cursor: pointer; }.gang-preview-stage { position: relative; height: 455px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background-color: #dfe4e4; background-image: linear-gradient(#d4dada 1px,transparent 1px),linear-gradient(90deg,#d4dada 1px,transparent 1px); background-size: 20px 20px; }.gang-preview-stage--pannable { cursor: grab; }.gang-preview-stage--panning, .gang-preview-stage--panning * { cursor: grabbing !important; }.gang-preview-content { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }.gang-preview-content, .gang-preview-content * { user-select: none; -webkit-user-select: none; }.gang-preview-content img { pointer-events: none; -webkit-user-drag: none; }.gang-preview-content > .empty-preview, .gang-preview-content > .awaiting-layout { box-sizing: border-box; width: 100%; max-width: none; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }.preview-layout-details { padding: 12px 16px; border-top: 1px solid var(--line); background: #f8fafa; }.layout-summary { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--ink); font-size: 11px; }.layout-summary > div { display: flex; flex-direction: column; gap: 3px; }.layout-summary > div:last-child { align-items: end; text-align: right; }.layout-summary strong { font-family: var(--font-oswald), sans-serif; font-size: 16px; text-transform: uppercase; }.optimized-sheet { position: relative; width: 100%; height: 100%; overflow: hidden; outline: 2px solid var(--teal); background-color: white; background-image: linear-gradient(rgb(128 143 146 / 12%) 1px, transparent 1px), linear-gradient(90deg,rgb(128 143 146 / 12%) 1px,transparent 1px); background-size: 16px 16px; box-shadow: 0 4px 16px rgb(27 46 50 / 16%); }.placed-artwork { position: absolute; }.placed-artwork img { object-fit: fill; }.optimized-sheet--stale .placed-artwork { opacity: .25; }.stale-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; color: var(--ink); background: rgb(255 255 255 / 72%); font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; }.optimization-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 15px; margin-top: 9px; color: var(--muted); font-size: 9px; text-align: center; }.optimizer-error, .stale-notice { margin: 8px 0 0; color: #a33b31; font-size: 10px; line-height: 1.4; }.stale-notice { color: #916417; }
.empty-preview, .awaiting-layout { max-width: 340px; padding: 30px; text-align: center; }.empty-preview > span { width: 45px; height: 45px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px dashed #8eb2ae; border-radius: 50%; color: var(--teal); background: #f0f8f7; font-size: 23px; }.empty-preview h3, .awaiting-layout h3 { margin: 0 0 7px; font-size: 14px; }.empty-preview p, .awaiting-layout p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.stacked-thumbnails { height: 72px; display: flex; justify-content: center; margin-bottom: 16px; }.stacked-thumbnails div { box-sizing: border-box; width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; padding: 4px; margin-left: -14px; border: 3px solid white; border-radius: 8px; background: #e8eeee; box-shadow: 0 2px 8px #aab4b6; transform: rotate(-4deg); }.stacked-thumbnails div:nth-child(2) { z-index: 2; transform: translateY(-5px); }.stacked-thumbnails div:nth-child(3) { transform: rotate(4deg); }.stacked-thumbnails img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-footer { height: 43px; display: flex; align-items: center; gap: 18px; padding: 0 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.preview-footer span { display: flex; align-items: center; gap: 5px; }.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }.dot--green { background: #2a9a66; }.dot--amber { background: #d2932c; }
.inspection-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(9 25 28 / 72%); }
.inspection-dialog { width: min(850px, 94vw); max-height: 92vh; display: flex; flex-direction: column; overflow: auto; border-radius: 9px; background: white; box-shadow: 0 18px 60px rgb(0 0 0 / 35%); }
.inspection-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }.inspection-dialog > header h2 { max-width: 700px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.inspection-dialog > header button { width: 30px; height: 30px; border: 0; border-radius: 4px; color: #526066; background: #edf1f1; font-size: 20px; }
.inspection-tabs { display: flex; gap: 4px; margin: 14px 18px -5px; }.inspection-tabs button { padding: 7px 11px; border: 1px solid #cbd5d7; border-radius: 5px; color: #536267; background: white; font-size: 10px; font-weight: 800; }.inspection-tabs button.active { border-color: var(--teal); color: white; background: var(--teal); }.inspection-tabs button:disabled { color: #9aa4a7; background: #edf0f1; cursor: not-allowed; }.mask-filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.inspection-viewport { margin: 18px; }.zoom-toolbar { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 4px 6px; border: 1px solid #cbd4d6; border-bottom: 0; border-radius: 5px 5px 0 0; background: #f7f9f9; }.zoom-toolbar button { height: 25px; padding: 0 8px; border: 1px solid #c7d1d3; border-radius: 4px; color: #46565b; background: white; font-size: 9px; font-weight: 800; }.zoom-toolbar button:first-child, .zoom-toolbar button:nth-of-type(2) { width: 27px; padding: 0; font-size: 15px; }.zoom-toolbar > span { min-width: 47px; color: #34454a; text-align: center; font-size: 10px; font-weight: 800; }.zoom-toolbar small { margin-left: auto; color: #748287; font-size: 9px; }
.inspection-stage { position: relative; height: min(62vh, 620px); min-height: 300px; overflow: hidden; touch-action: none; border: 1px solid #cbd4d6; background-color: #e4e8e8; background-image: linear-gradient(45deg,#d1d7d7 25%,transparent 25%),linear-gradient(-45deg,#d1d7d7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d7d7 75%),linear-gradient(-45deg,transparent 75%,#d1d7d7 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }.inspection-stage--pannable { cursor: grab; }.inspection-stage--pannable:active { cursor: grabbing; }.inspection-content { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }.inspection-stage img { object-fit: contain; }.inspection-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }.inspection-stage rect { vector-effect: non-scaling-stroke; fill: none; stroke-width: 2px; }.raw-bounds { stroke: #d14135; }.core-bounds { stroke: #098276; stroke-dasharray: 7 4; }.stray-bounds { fill: rgb(255 171 39 / 38%) !important; stroke: #ff8a00; stroke-width: 3px !important; }
.inspection-stage--mask { background-color: white; }.inspection-stage--mask img { image-rendering: pixelated; }
.inspection-stage { overscroll-behavior: contain; }
.remaining-designs article > .remaining-fill-actions { width: auto; height: auto; display: flex; gap: 5px; overflow: visible; padding: 0; border-radius: 0; background: transparent; }.remaining-fill-actions { display: flex; gap: 5px; margin-left: auto; }.remaining-space-result button.secondary { color: var(--teal-dark); background: white; }
.production-output { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }.production-output > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; color: var(--muted); font-size: 9px; }.production-output > div strong { width: 100%; color: var(--ink); font-size: 11px; text-transform: uppercase; }.production-output button { min-width: 190px; height: 36px; padding: 0 14px; border: 0; border-radius: 5px; color: white; background: var(--teal); font-size: 10px; font-weight: 800; }.production-output button:disabled { color: #899497; background: #e5e9ea; cursor: not-allowed; }.production-output p { grid-column: 1 / -1; margin: 0; color: #a33b31; font-size: 10px; }
.mode-selector, .vendor-result-tabs, .sheet-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }.mode-selector button, .vendor-result-tabs button, .sheet-tabs button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #f7f9f9; font-size: 9px; font-weight: 700; }.mode-selector button.active, .vendor-result-tabs button.active, .sheet-tabs button.active { color: white; border-color: var(--teal); background: var(--teal); }.vendor-list { display: grid; gap: 7px; margin-top: 10px; }.vendor-editor { border: 1px solid var(--line); border-radius: 6px; background: #fafcfc; }.vendor-editor summary { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; padding: 9px; cursor: pointer; font-size: 9px; }.vendor-editor summary label { display: flex; gap: 4px; align-items: center; }.vendor-editor summary strong { font-size: 10px; }.vendor-editor summary span { color: var(--muted); }.vendor-editor-body { padding: 0 9px 9px; }.vendor-size-heading, .vendor-actions { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 5px; font-size: 9px; }.vendor-size-row { display: grid; grid-template-columns: 1fr 1fr 26px; gap: 6px; align-items: end; margin-bottom: 5px; }.vendor-size-row label { color: var(--muted); font-size: 8px; }.vendor-size-row input { width: 100%; box-sizing: border-box; margin-top: 2px; }.vendor-size-row button, .vendor-size-heading button, .vendor-actions button, .add-vendor { min-height: 26px; border: 1px solid var(--line); border-radius: 4px; background: white; font-size: 8px; font-weight: 700; }.vendor-actions { justify-content: flex-end; gap: 5px; }.vendor-actions .danger, .vendor-validation { color: #a33b31; }.vendor-validation { font-size: 9px; line-height: 1.4; }.add-vendor { width: 100%; margin-top: 8px; }.vendor-results { padding: 8px 16px; border-bottom: 1px solid var(--line); background: #f8fafa; }.vendor-result-tabs { margin: 0 0 7px; }.vendor-recommendation { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; color: var(--muted); font-size: 9px; }.vendor-recommendation strong { color: var(--teal-dark); text-transform: uppercase; }.vendor-recommendation .sheet-tabs { width: 100%; margin: 3px 0 0; }
.clearance-mask-canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.vendor-summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fafcfc; font-size: 9px; }.vendor-summary label { display: flex; gap: 5px; align-items: center; }.vendor-summary strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }.vendor-summary span { color: var(--muted); }.vendor-summary button { padding: 6px 12px; border: 1px solid #bfcacc; border-radius: 4px; background: white; font-size: 9px; font-weight: 800; }.vendor-modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(9 25 28 / 72%); }.vendor-modal { width: min(720px,94vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 9px; background: white; box-shadow: 0 18px 60px rgb(0 0 0 / 35%); }.vendor-modal > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }.vendor-modal > header h2 { margin: 0; font-size: 17px; }.vendor-modal > header button { width: 32px; height: 32px; border: 0; border-radius: 4px; background: #edf1f1; font-size: 20px; }.vendor-modal-body { display: grid; gap: 20px; overflow-y: auto; padding: 20px; }.vendor-modal-body section { display: grid; gap: 10px; }.vendor-modal-body h3 { margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; }.vendor-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.vendor-form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }.vendor-form-grid input, .vendor-form-grid textarea, .vendor-number-input input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #aebdbf; border-radius: 5px; color: var(--ink); background: white; font-size: 12px; }.vendor-form-grid textarea { min-height: 76px; resize: vertical; }.vendor-notes { grid-column: 1 / -1; }.vendor-number-input { display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border: 1px solid #aebdbf; border-radius: 5px; background: #f2f5f5; }.vendor-number-input input { min-width: 0; border: 0; border-radius: 0; }.vendor-number-input i { padding: 0 9px; color: #536267; font-size: 11px; font-style: normal; font-weight: 800; }.vendor-sheet-header, .vendor-sheet-row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(120px,1fr) 90px; gap: 10px; align-items: center; }.vendor-sheet-header { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }.vendor-sheet-row > button, .vendor-add-size { min-height: 38px; padding: 8px 14px; border: 1px solid #bfcacc; border-radius: 5px; background: white; font-size: 9px; font-weight: 800; }.vendor-sheet-row > button { color: #a33b31; }.vendor-add-size { justify-self: start; color: var(--teal-dark); }.vendor-modal > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #f7f9f9; }.vendor-modal > footer button { min-height: 38px; padding: 9px 16px; border: 1px solid #bfcacc; border-radius: 5px; background: white; font-size: 10px; font-weight: 800; }.vendor-modal > footer .primary { color: white; border-color: var(--teal); background: var(--teal); }.vendor-modal > footer .primary:disabled { color: #899497; border-color: #d5dcdd; background: #e5e9ea; }.vendor-modal > footer .danger { color: white; border-color: #a33b31; background: #a33b31; }
.preferred-vendor-toggle { grid-column: 1 / -1; grid-template-columns: auto 1fr !important; align-items: center; }.preferred-vendor-toggle input { width: 16px !important; min-height: 16px !important; }.preferred-vendor-toggle small { grid-column: 2; font-weight: 400; }.vendor-result-tabs button, .vendor-result-failure { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }.vendor-result-tabs button strong, .vendor-result-failure strong { font-size: 9px; }.vendor-result-tabs button span, .vendor-result-tabs button small, .vendor-result-failure span, .vendor-result-failure small { font-size: 8px; font-weight: 600; }.vendor-result-failure { max-width: 220px; padding: 7px 9px; border: 1px solid #e5c0bc; border-radius: 5px; color: #8d443c; background: #fff8f7; }.vendor-result-failure small { line-height: 1.35; }
.pricing-model-field { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }.pricing-model-selector { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #aebdbf; border-radius: 5px; }.pricing-model-selector button { min-height: 42px; padding: 7px 10px; border: 0; border-right: 1px solid #aebdbf; color: #536267; background: white; font-size: 10px; font-weight: 800; }.pricing-model-selector button:last-child { border-right: 0; }.pricing-model-selector button.active { color: white; background: var(--teal); }.pricing-model-selector small { display: block; margin-top: 2px; font-size: 8px; font-weight: 500; opacity: .85; }.square-inch-rate > small { color: var(--muted); font-weight: 400; line-height: 1.35; }.vendor-managed-info { gap: 4px !important; padding: 11px 12px; border: 1px solid #c7ddd9; border-radius: 6px; color: #4f6265; background: #edf7f4; font-size: 10px; line-height: 1.4; }.vendor-managed-info strong { color: var(--teal-dark); font-size: 11px; text-transform: uppercase; }
.artboard-progress { position: absolute; z-index: 12; left: 50%; top: 50%; width: min(330px,calc(100% - 40px)); box-sizing: border-box; display: grid; justify-items: center; gap: 9px; padding: 20px; transform: translate(-50%,-50%); border: 1px solid #b8c7c8; border-radius: 8px; background: rgb(255 255 255 / 96%); box-shadow: 0 12px 35px rgb(15 42 46 / 22%); color: var(--ink); text-align: center; }.artboard-progress > span { color: var(--muted); font-size: 10px; }.artboard-progress button { min-height: 34px; padding: 7px 18px; border: 1px solid #a33b31; border-radius: 5px; color: #a33b31; background: white; font-size: 9px; font-weight: 800; }.activity-spinner { width: 24px; height: 24px; border: 3px solid #d5e3e1; border-top-color: var(--teal); border-radius: 50%; animation: dtfix-spin .8s linear infinite; }.progress-track { width: 100%; height: 7px; overflow: hidden; border-radius: 6px; background: #dce6e5; }.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .2s ease; }.progress-track.indeterminate i { width: 38%; animation: dtfix-progress 1.1s ease-in-out infinite; }
.transfer-manifest { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; background: #f1f5f4; }.transfer-manifest > header { margin-bottom: 14px; padding: 16px 18px; border: 1px solid #c8d7d5; border-radius: 7px; background: white; }.transfer-manifest > header div { display: grid; gap: 3px; }.transfer-manifest > header h3 { margin: 0; font-size: 20px; }.transfer-manifest > header strong { color: var(--teal-dark); font-size: 10px; text-transform: uppercase; }.transfer-manifest > header span { color: var(--muted); font-size: 10px; }.manifest-designs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.manifest-design { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid #ccd8d7; border-radius: 7px; background: white; }.manifest-thumbnail { position: relative; width: 72px; height: 72px; box-sizing: border-box; overflow: hidden; padding: 5px; border: 1px solid #d3dddd; border-radius: 6px; background: #edf1f1; }.manifest-thumbnail img { width: 100%; height: 100%; object-fit: contain; }.manifest-design-name { min-width: 0; display: grid; gap: 3px; }.manifest-design-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.manifest-design-name span, .manifest-design dt { color: var(--muted); font-size: 9px; }.manifest-design dl { grid-column: 2; display: grid; gap: 3px; margin: 0; }.manifest-design dl div { display: flex; justify-content: space-between; gap: 10px; }.manifest-design dd { margin: 0; color: #3e5054; font-size: 9px; font-weight: 700; }.manifest-design > b { grid-column: 3; grid-row: 1 / span 2; color: var(--teal-dark); font-size: 14px; }.manifest-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 14px; align-items: start; margin-top: 14px; }.manifest-bottom > aside { display: grid; gap: 5px; padding: 13px; border: 1px solid #c7ddd9; border-radius: 7px; color: #506166; background: #edf7f4; font-size: 10px; line-height: 1.4; }.manifest-bottom > aside strong { color: var(--teal-dark); text-transform: uppercase; }.manifest-totals { display: grid; gap: 7px; padding: 14px; border: 1px solid #c8d7d5; border-radius: 7px; background: white; }.manifest-totals div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }.manifest-totals div strong { color: var(--ink); }.manifest-totals .manifest-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 900; text-transform: uppercase; }.manifest-total strong { color: var(--teal-dark) !important; font-size: 17px; }@keyframes dtfix-spin { to { transform: rotate(360deg); } }@keyframes dtfix-progress { from { transform: translateX(-120%); } to { transform: translateX(280%); } }
.inspection-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 18px; color: #56646a; font-size: 10px; }.inspection-legend span { display: flex; align-items: center; gap: 6px; }.inspection-legend i { width: 18px; height: 8px; display: block; border: 2px solid; }.legend-raw { border-color: #d14135 !important; }.legend-core { border-color: #098276 !important; border-style: dashed !important; }.legend-stray { border-color: #ff8a00 !important; background: rgb(255 171 39 / 38%); }
.mask-explanation, .clearance-note { display: flex; gap: 6px; margin: 10px 18px 0; color: #59676c; font-size: 10px; line-height: 1.45; }.mask-explanation { flex-direction: column; padding: 9px 10px; border-radius: 5px; background: #edf7f4; }.clearance-note { display: block; padding: 8px 10px; border: 1px solid #e2d3b5; border-radius: 5px; background: #fff9ee; }
.inspection-dialog > footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; margin-top: 16px; padding: 13px 18px; border-top: 1px solid var(--line); background: #f7f9f9; }.inspection-dialog > footer p { margin: 0; color: #5b686d; font-size: 10px; }.inspection-dialog > footer button { padding: 8px 16px; border: 0; border-radius: 5px; color: white; background: var(--teal); font-size: 10px; font-weight: 800; }

@media (max-width: 1000px) { .workspace-grid { grid-template-columns: 1fr; }.preview-panel { min-height: 620px; }.sheet-settings { position: static; } }
@media (max-width: 640px) { .topbar { padding: 0 15px; }.milestone-badge, .workflow-status { display: none; }.builder { padding: 18px 12px; }.builder-heading { align-items: start; }.two-columns, .analysis-grid, .coverage-panel, .vendor-form-grid { grid-template-columns: 1fr; }.analysis-grid div { border-right: 0; border-bottom: 1px solid #e3e8e9; }.workspace-grid { display: block; }.preview-panel { margin-top: 14px; }.preview-footer { flex-wrap: wrap; gap: 8px; height: auto; padding: 10px 15px; }.inspection-backdrop, .vendor-modal-backdrop { padding: 8px; }.inspection-dialog > footer { grid-template-columns: 1fr; }.vendor-summary { grid-template-columns: auto 1fr auto; }.vendor-summary span { grid-column: 2; }.vendor-sheet-header { display: none; }.vendor-sheet-row { grid-template-columns: 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.vendor-modal > footer button { flex: 1 1 140px; }.manifest-designs, .manifest-bottom { grid-template-columns: 1fr; }.manifest-design { grid-template-columns: 58px minmax(0,1fr) auto; }.manifest-thumbnail { width: 58px; height: 58px; } }