.header-actions{gap:9px;flex-wrap:wrap}.header-actions .button,.header-actions .outline-button{font-size:12px;padding:11px 15px;white-space:nowrap}.header-note{display:none}.save-status{font-size:10px}.concept-dialog{width:660px;max-width:calc(100vw - 32px);max-height:90dvh;overflow:auto;margin:auto}.concept-dialog>p{line-height:1.6;color:#76816d}.concept-dialog h2{padding-right:25px}.concept-dialog h3{font-size:14px}.concept-name-label{display:block;font-size:12px;margin:18px 0 7px}.concept-name-row{display:flex;gap:8px}.concept-name-row input{flex:1;min-width:0;background:#fff;border:1px solid #dbe1d2;padding:11px 12px;border-radius:8px;font:inherit}.concept-name-row button{white-space:nowrap}.concept-exports{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}.concept-exports .outline-button{font-size:11px}.concept-exports #export{background:transparent;color:#536447;border:1px solid #dbe1d2;box-shadow:none}.import-label{display:inline-flex;align-items:center;cursor:pointer;position:relative}.import-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.import-label:focus-within{outline:2px solid #536447;outline-offset:2px}.concept-library-title{padding-top:16px;border-top:1px solid #e3e7db}.concept-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e4e7dc;background:#fafbf7;border-radius:12px;padding:14px;margin:9px 0}.concept-card h3{margin:0;overflow-wrap:anywhere}.concept-card p{font-size:11px;color:#879079;margin:5px 0 0;line-height:1.5}.concept-card-actions{display:flex;gap:6px;flex-shrink:0}.concept-card-actions button{font-size:11px;padding:8px}.concept-empty{color:#8a947e;padding:15px 0}.concept-error{color:#b25a40;line-height:1.5}.concept-error:empty{display:none}.order-intro{display:flex;justify-content:space-between;gap:10px;margin:22px 0 14px}.order-intro h3{margin:0 0 5px}.order-intro p{margin:0;color:#8a947e;font-size:11px}.order-count{background:#edf2e4;padding:7px 11px;border-radius:16px;white-space:nowrap;align-self:center;color:#63794f}.order-table-wrap{overflow-x:auto;border:1px solid #e1e6d7;border-radius:12px}.order-table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}.order-table th{background:#f0f3e9;padding:12px;color:#6a7d5c;font-weight:600}.order-table td{padding:13px 12px;border-top:1px solid #e6e9df}.order-table td:last-child{white-space:nowrap}.order-table small{display:block;color:#919783;line-height:1.5;margin-top:5px;font-size:10px}.order-color{display:inline-block;vertical-align:middle;width:13px;height:13px;border:1px solid #0002;background:var(--c);border-radius:50%;margin-right:7px}.order-warning{padding:12px;background:#fff5e4;border-radius:9px;color:#9b744b!important;font-size:11px}.order-footnote{font-size:11px}.concept-status{color:#60774e;line-height:1.5;min-height:18px}.palette-panel{border-bottom:1px solid #e4e7db;padding:0 2px 13px;margin-bottom:13px;grid-column:1/-1}.palette-panel .section-heading{margin:0 0 7px}.palette-panel h3{font-size:11px}.palette-panel .swatches{gap:9px}.palette-panel .swatch{height:23px;width:23px}.palette-panel p{font-size:9px;line-height:1.5;color:#909a83;margin:8px 0 0}.palette-actions{display:flex;align-items:center;justify-content:space-between;gap:5px}.palette-actions button{font-size:10px;text-decoration:underline;color:#6d825b}.custom-color-label{display:flex!important;align-items:center;gap:8px;margin-top:10px}.selected-panel .custom-color-label input{width:32px;height:28px;padding:2px;margin:0;cursor:pointer}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #738862}.palette-panel .swatches{flex-wrap:wrap}.order-dialog .dialog-actions{flex-wrap:wrap}.concept-dialog button:disabled{opacity:.45;cursor:not-allowed}.concept-dialog button:focus-visible,.palette-panel button:focus-visible{outline:2px solid #658a48;outline-offset:3px}
@media(max-width:900px){.app-header{height:auto;min-height:76px;padding:14px 20px;flex-wrap:wrap;gap:12px}.header-actions{margin-left:auto}.header-actions .button,.header-actions .outline-button{font-size:11px;padding:9px}.palette-panel{grid-column:1}.catalog-panel .catalog-grid{grid-row:1/span 7}.save-status{display:none}}
@media(max-width:600px){.app-header{padding:12px 15px;display:block}.brand{display:inline-flex}.header-actions{display:flex;justify-content:space-between;margin-top:12px;gap:6px}.header-actions .button,.header-actions .outline-button{flex:1;padding:10px 7px;font-size:10px;justify-content:center}.concept-dialog{padding:22px 18px;width:calc(100vw - 24px);max-width:none;max-height:92dvh;margin:auto}.concept-dialog h2{font-size:24px}.concept-name-row{flex-direction:column}.concept-card{align-items:flex-start;flex-direction:column}.concept-card-actions{width:100%}.concept-card-actions button{flex:1}.concept-exports>*{flex:1;justify-content:center;white-space:nowrap}.palette-panel{margin-top:14px}.order-table th,.order-table td{padding:10px 8px;font-size:11px}.concept-dialog .dialog-actions .button,.concept-dialog .dialog-actions .outline-button{flex:1;font-size:11px}.order-intro{align-items:flex-start}.order-count{font-size:10px}}

@media(max-width:760px),(max-width:960px) and (max-height:500px){
 dialog:not(#mobile-panel-dialog){
  --dialog-top:max(12px,env(safe-area-inset-top,0px));
  --dialog-right:max(12px,env(safe-area-inset-right,0px));
  --dialog-bottom:max(12px,env(safe-area-inset-bottom,0px));
  --dialog-left:max(12px,env(safe-area-inset-left,0px));
  inset:var(--dialog-top) var(--dialog-right) var(--dialog-bottom) var(--dialog-left);
  width:calc(100vw - var(--dialog-left) - var(--dialog-right));
  max-width:660px;
  max-height:calc(100vh - var(--dialog-top) - var(--dialog-bottom));
  max-height:calc(100dvh - var(--dialog-top) - var(--dialog-bottom));
  margin:auto;
  padding:24px 18px 20px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  font-size:14px;
  overflow-wrap:anywhere;
 }
 dialog:not(#mobile-panel-dialog) h2{padding-right:32px;font-size:24px;line-height:1.2}
 dialog:not(#mobile-panel-dialog)>.eyebrow{display:block;padding-right:34px}
 dialog:not(#mobile-panel-dialog) button,
 dialog:not(#mobile-panel-dialog) .import-label{min-width:44px;min-height:44px;line-height:1.4}
 dialog:not(#mobile-panel-dialog) .dialog-close{width:44px;height:44px;right:6px;top:6px;font-size:24px}
 dialog:not(#mobile-panel-dialog) input,
 dialog:not(#mobile-panel-dialog) select,
 dialog:not(#mobile-panel-dialog) textarea{min-height:44px;font-size:16px}
 dialog:not(#mobile-panel-dialog) .dialog-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
 dialog:not(#mobile-panel-dialog) .button,
 dialog:not(#mobile-panel-dialog) .outline-button{font-size:13px;white-space:normal;text-align:center}
 .concept-name-row{flex-direction:column}
 .concept-name-label{font-size:13px}
 .concept-exports{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
 .concept-card{align-items:stretch;flex-direction:column}
 .concept-card>div{min-width:0}
 .concept-card p{font-size:12px}
 .concept-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .concept-card-actions button{padding:10px}
 .order-intro{align-items:flex-start;flex-wrap:wrap}
 .order-intro>div{min-width:0;flex:1 1 180px}
 .order-intro p,.order-count{font-size:12px}
 .order-dialog .order-table-wrap{overflow:visible;border:0;border-radius:0}
 .order-dialog .order-table{display:block;width:100%;font-size:14px}
 .order-dialog .order-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .order-dialog .order-table tbody{display:grid;gap:12px}
 .order-dialog .order-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #e1e6d7;border-radius:12px}
 .order-dialog .order-table td{display:block;min-width:0;padding:0;border:0;font-size:14px;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .order-dialog .order-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:11px;font-weight:600;line-height:1.4}
 .order-dialog .order-table td:first-child,
 .order-dialog .order-table td:nth-child(2),
 .order-dialog .order-table td:last-child{grid-column:1/-1}
 .order-dialog .order-table td:first-child strong{font-size:16px}
 .order-dialog .order-table td:last-child:not([colspan]){padding-top:10px;border-top:1px solid #e6e9df;font-weight:700}
 .order-dialog .order-table td[colspan]::before{display:none}
 .order-dialog .order-table small{font-size:12px;line-height:1.6}
 .order-dialog .order-total{flex-wrap:wrap;font-size:18px}
 .order-dialog .order-total strong{max-width:100%}
 .order-warning,.order-footnote{font-size:12px}
 .order-dialog #order-concept{width:100%}
 .cutting-dialog .cutting-sheets{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
 .cutting-dialog details summary{min-height:44px;padding:12px 0}
 .cutting-dialog pre{font-size:13px;overflow-wrap:anywhere}
}