/* v57: one bounded working surface. ID scopes intentionally isolate this layout
   from the legacy workshop/editor rules still used by older embedded previews. */
:root { --workspace-chrome:166px; --control-height:40px; }
#editor-action-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html[data-app-mode="editor"] main, html[data-app-mode="admin"] main { min-height:0; }
.workspace-tabs { display:flex; gap:6px; min-width:0; }
.workspace-tabs > button { border:0; border-radius:7px; background:transparent; padding:9px 13px; min-height:38px; font-size:14px; font-weight:650; white-space:normal; line-height:1.3; }
.workspace-tabs > [aria-selected="true"] { color:var(--green-dark); background:var(--green-soft); }
.workspace-tabs > button:hover { background:#edf2ed; }

#editor-workspace { height:calc(100dvh - var(--workspace-chrome)); min-height:510px; max-width:none; display:grid; grid-template-columns:248px minmax(260px,1fr) 290px; grid-template-areas:"template template template" "ribbon ribbon ribbon" "left info right" "left canvas right" "left hint right"; grid-template-rows:auto auto auto minmax(0,1fr) auto; align-items:stretch; overflow:hidden; padding:0; background:#eef0eb; }
#editor-workspace .canvas-area { display:contents; }
#editor-workspace .left-panel { grid-area:left; display:flex; flex-direction:column; gap:10px; padding:14px; min-height:0; height:100%; overflow:hidden!important; border-right:1px solid var(--line); }
#editor-workspace .right-panel { grid-area:right; grid-column:auto; display:flex; flex-direction:column; justify-content:space-between; gap:14px; padding:18px; min-height:0; height:100%; overflow:hidden!important; border-left:1px solid var(--line); }
#editor-workspace .panel h2 { font:600 20px/1.25 "Segoe UI",sans-serif; margin:0 0 10px; }
#editor-workspace .editor-product-tools { display:grid; gap:6px; }
#editor-workspace .product-picker, #workspace-sheet .product-picker { font-size:14px; }
#editor-workspace .product-picker select, #workspace-sheet .product-picker select { height:42px; font-size:14px; padding:8px; }
#editor-workspace .product-picker small { display:none; }
#editor-workspace .design-template-picker { margin:0; gap:6px; }
#editor-workspace .design-template-open { padding:9px 10px; min-height:42px; }
#editor-workspace .design-template-open b { font-size:14px; }
#editor-workspace .design-template-open small { display:none; }
#editor-workspace .customer-template-shortcut { font-size:12px; padding:4px 8px; min-height:28px; text-align:left; }
#editor-workspace .quick-add { margin:0; }
#editor-workspace .quick-add > span { display:none; }
#editor-workspace .quick-add-primary { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#editor-workspace .quick-add-primary button { display:flex; justify-content:flex-start; align-items:center; text-align:left; min-height:44px; padding:9px; gap:7px; border:1px solid var(--line); border-radius:8px; background:#fff; line-height:1.2; }
#editor-workspace .quick-add-primary button:hover { border-color:#8ca693; background:var(--green-soft); }
#editor-workspace .quick-add-primary button span { min-width:0; font-size:14px; overflow-wrap:normal; }
#editor-workspace .quick-add-primary b { flex:none; font-size:17px; font-weight:600; }
#editor-workspace #add-dxf { grid-column:auto; order:3; background:#f3f6f1; }
#editor-workspace #add-dxf b { font:700 12px/1.2 "Segoe UI",sans-serif; border:1px solid #aec2b1; border-radius:4px; padding:4px 3px; }
#editor-workspace #symbol-picker-open { grid-column:auto; order:4; }
#editor-workspace .editor-layers { display:flex; flex-direction:column; min-height:0; flex:1; }
#editor-workspace .layer-heading { font-size:14px; letter-spacing:0; text-transform:none; margin:0; padding:0 0 9px; border:0; gap:8px; }
#editor-workspace .layer-heading small { font-size:12px; }
#editor-workspace .layer-list { display:flex; flex-direction:column; gap:7px; flex:1; min-height:0; margin:0; max-height:none; overflow:hidden; }
#editor-workspace .layer, #workspace-sheet .layer { min-height:50px; width:100%; flex:none; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; padding:9px; }
#editor-workspace .layer b, #workspace-sheet .layer b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#editor-workspace .layer small, #workspace-sheet .layer small { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#editor-workspace .layer-icon, #workspace-sheet .layer-icon { width:28px; height:28px; }
.layer-icon svg, .quick-add-grid b svg { width:24px; height:24px; display:block; color:#293a2e; }
.layer-icon .vector-icon { font:700 11px/1 sans-serif; }
#workspace-sheet .quick-add-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }
#workspace-sheet .quick-add-grid b svg { width:32px; height:32px; }
.layer-actions { display:flex; align-items:center; gap:4px; flex:none; }
.layer-actions button { padding:5px 6px; font:600 11px/1.4 "Segoe UI",sans-serif; min-height:30px; border:1px solid var(--line); border-radius:5px; background:white; }
.layer-actions button:nth-child(-n+2) { flex:1; }
.layer-order-note { font-size:11px; color:var(--muted); margin:0; flex:none; }
.layer-items { display:flex; flex-direction:column; gap:7px; flex:none; min-height:0; }
.layer-pagination { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; min-height:30px; flex:none; font-size:12px; }
.layer-pagination button { padding:2px 10px; background:white; border:1px solid var(--line); border-radius:5px; font-size:20px; }
.layer[data-drop="before"] { box-shadow:0 -3px 0 var(--green); }
.layer[data-drop="after"] { box-shadow:0 3px 0 var(--green); }
.layer-empty { color:var(--muted); font-size:13px; }
.selection-details-open { width:100%; min-height:42px; padding:10px; text-align:left; font-weight:600; background:var(--green-soft); color:var(--green-dark); border:1px solid var(--line); border-radius:7px; }
#editor-workspace .selection-disclosure { overflow:visible; border:0; background:transparent; padding:0; }
#editor-workspace .selection-disclosure p { font-size:13px; line-height:1.55; color:var(--muted); margin:8px 0 15px; }
#editor-workspace .selection-disclosure .engraving-layer-note { font-size:11px; margin-top:15px; }
.catalog-state { grid-column:1/-1; padding:50px 20px; text-align:center; border:1px solid var(--line); border-radius:14px; background:white; }
.catalog-state p { color:var(--muted); }
.catalog-state button { padding:10px 18px; border-radius:6px; background:var(--green); color:white; }

:is(#editor-workspace,#workspace-sheet) .editor-ribbon { display:block; min-width:0; overflow:visible; margin:0; padding:8px 18px 12px; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:white; }
:is(#editor-workspace,#workspace-sheet) .editor-ribbon > .workspace-tabs { margin-bottom:8px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls { display:flex; align-items:end; flex-wrap:wrap; gap:12px; min-height:60px; }
.ribbon-panel-stack { display:grid; }
.ribbon-panel-stack > .ribbon-controls { grid-area:1/1; }
:is(#editor-workspace,#workspace-sheet) .ribbon-panel-stack > [hidden] { display:flex!important; visibility:hidden; pointer-events:none; }
:is(#editor-workspace,#workspace-sheet) .ribbon-unified { justify-content:flex-start; gap:18px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-unified > label { flex:0 1 180px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-unified .ribbon-size { flex:0 0 105px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-unified .ribbon-position { flex:0 1 330px; min-width:300px; }
.selection-overlay { pointer-events:none; }
.selection-overlay .selection-ring, .selection-overlay .selection-caption { display:block; opacity:1; }
.selection-overlay .selection-ring { stroke-width:1px; }
.resize-handle { pointer-events:all; }
.resize-hit { fill:transparent; stroke:none; }
.resize-dot { fill:#fff; stroke:#38654b; stroke-width:1.5px; vector-effect:non-scaling-stroke; }
.resize-nw,.resize-se { cursor:nwse-resize; }
.resize-ne,.resize-sw { cursor:nesw-resize; }
.resize-e,.resize-w { cursor:ew-resize; }
.vector-import-preview { width:100%; height:128px; display:grid; place-items:center; background:#f4f1e9; border-radius:8px; color:#30251b; }
.vector-import-preview svg { width:120px; height:120px; }
#vector-import-summary { display:grid; gap:7px; }
#vector-import-note { color:var(--muted); }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls > label { display:grid; gap:5px; min-width:0; max-width:none; flex:1 1 160px; font-size:14px; color:var(--muted); }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls .ribbon-operation { order:-1; flex:0 0 190px; padding:0; background:none; }
:is(#editor-workspace,#workspace-sheet) .ribbon-operation select { background:var(--green-soft); border-color:#a2b9a8; color:var(--green-dark); }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls .ribbon-text { flex:2 1 220px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls .ribbon-font { flex:1 1 180px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-controls .ribbon-metric { flex:0 0 120px; width:120px; min-width:0; position:static; }
:is(#editor-workspace,#workspace-sheet) .editor-ribbon input, :is(#editor-workspace,#workspace-sheet) .editor-ribbon select { width:100%; height:40px; min-height:40px; font-size:14px; padding:8px 10px; line-height:1.2; }
:is(#editor-workspace,#workspace-sheet) .ribbon-input-unit { display:grid; grid-template-columns:minmax(0,1fr) auto; height:40px; gap:0; padding:0 7px 0 0; border:1px solid var(--line); border-radius:7px; overflow:hidden; align-items:center; background:#fff; }
:is(#editor-workspace,#workspace-sheet) .ribbon-input-unit input { min-width:0; border:0; border-radius:0; height:38px; min-height:38px; padding:8px 4px 8px 9px; text-align:center; }
:is(#editor-workspace,#workspace-sheet) .ribbon-input-unit em { position:static!important; padding:0 3px; font-size:12px; line-height:1; font-style:normal; color:var(--muted); }
:is(#editor-workspace,#workspace-sheet) .ribbon-series { min-height:40px; height:auto; font-size:14px; padding:8px 12px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-position { min-width:320px; flex:0 1 380px; display:grid; gap:5px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-position > span, :is(#editor-workspace,#workspace-sheet) .ribbon-curve > span { font-size:14px; color:var(--muted); font-weight:650; }
:is(#editor-workspace,#workspace-sheet) .ribbon-position-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-position-fields label { display:grid; grid-template-columns:auto minmax(0,1fr); min-width:0; gap:5px; align-items:center; }
:is(#editor-workspace,#workspace-sheet) .ribbon-position-fields small { font-size:14px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-curve { flex:0 1 310px; min-width:270px; display:grid; grid-template-columns:auto minmax(100px,1fr); gap:5px 12px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-curve > span { grid-column:1/-1; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-buttons { display:flex; gap:5px; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-buttons button { width:42px; height:40px; padding:0; font-size:24px; border:1px solid var(--line); border-radius:7px; background:#fff; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-buttons button.active { border-color:var(--green); background:var(--green-soft); }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-buttons button { display:grid; place-items:center; line-height:1; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-buttons button b { display:block; line-height:1; font-weight:400; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-height { width:auto; min-width:0; }
:is(#editor-workspace,#workspace-sheet) .ribbon-arc-height > span:first-child { display:none; }
#editor-workspace .canvas-toolbar { padding:12px 18px 0; gap:8px; align-items:center; }
#editor-workspace .canvas-toolbar .history-controls button { font-size:12px; min-height:36px; padding:7px 9px; }
#editor-workspace .fit-badge { font-size:12px; padding:7px 10px; }
#editor-workspace .board-wrap { min-height:0; height:100%; max-height:none; padding:8px 16px; overflow:hidden; align-self:stretch; }
#editor-workspace .design-board { display:block; width:100%; height:100%; min-height:0; max-width:100%; max-height:100%; }
#editor-workspace .canvas-hint { padding:0 18px 10px; font-size:12px; line-height:1.4; }
#editor-workspace .ruler { display:none; }
#editor-workspace .template-edit-banner { margin:0; border-radius:0; }
#editor-workspace .selection-disclosure { min-height:0; overflow:visible; }
#editor-workspace .selection-disclosure > summary { padding:8px 0; font-size:14px; font-weight:650; cursor:pointer; }
#editor-workspace .selection-panel, #workspace-sheet .selection-panel { border:0; padding:10px 0; margin:0; }
#editor-workspace .selection-panel > h2, #editor-workspace .selection-panel > .eyebrow, #workspace-sheet .selection-panel > h2, #workspace-sheet .selection-panel > .eyebrow { display:none; }
:is(#editor-workspace,#workspace-sheet) .inspector { border:0; margin:0; padding:0; font-size:14px; gap:14px; }
:is(#editor-workspace,#workspace-sheet) .inspector label { font-size:14px; }
:is(#editor-workspace,#workspace-sheet) .inspector :is(input,select,textarea) { font-size:14px; min-height:40px; }
:is(#editor-workspace,#workspace-sheet) .inspector small { font-size:12px; line-height:1.5; }
:is(#editor-workspace,#workspace-sheet) .inspector input[type="checkbox"] { min-height:0; width:18px; height:18px; flex:none; }
#editor-workspace .order-panel { flex:none; padding:0!important; border:0; position:static; }
#editor-workspace .order-panel > .eyebrow, #editor-workspace .order-panel > h2, #editor-workspace .customer-note { display:none; }
#editor-workspace .shop-order-card { padding:0; margin:0; border:0; background:none; }
#editor-workspace .shop-order-head { display:grid; gap:8px; }
#editor-workspace .shop-order-head b { font-size:14px; font-weight:600; }
#editor-workspace .shop-order-head small { font-size:12px; }
#editor-workspace .shop-order-head strong { font-size:28px; letter-spacing:-.02em; }
#editor-workspace .quantity-field { margin:16px 0; font-size:14px; }
#editor-workspace .quantity-control :is(input,button) { height:40px; }
#editor-workspace .add-cart-button { min-height:44px; margin:0; font-size:14px; }
#editor-workspace .shop-order-note { font-size:12px; line-height:1.4; }
.price-details-open { display:block; padding:9px 0; border:0; background:none; font-size:12px; text-decoration:underline; text-underline-offset:3px; color:var(--green-dark); }
#editor-workspace .design-choice { padding:10px 0 0; margin:10px 0 0; border:0; border-top:1px solid var(--line); }
#editor-workspace .design-choice > .section-label, #editor-workspace .design-choice small { display:none; }
#editor-workspace .design-choice label { font-size:14px; }
#editor-workspace .design-choice select { font-size:14px; min-height:40px; }
.editor-mobile-nav { display:none; }
@media (min-width:901px) and (max-height:850px) {
  html[data-app-mode="editor"] .topbar { height:60px; min-height:60px; padding:10px 24px; }
  html[data-app-mode="editor"] .modebar { height:46px; min-height:46px; padding:3px 24px; }
  #editor-workspace .selection-disclosure > :not(button) { display:none; }
    #editor-workspace .right-panel { gap:12px; }
    #editor-workspace .left-panel { gap:7px; }
    #editor-workspace .product-picker { font-size:12px; }
    #editor-workspace .product-picker select { height:34px; padding:5px 8px; }
    #editor-workspace .design-template-open { min-height:34px; padding:5px 10px; }
    #editor-workspace .customer-template-shortcut { min-height:26px; }
    #editor-workspace .quick-add-primary button { min-height:34px; padding:6px 9px; }
    #editor-workspace .layer-heading { padding-bottom:6px; }
    #editor-workspace .layer { min-height:44px; padding:5px 8px; }
    #editor-workspace .layer b { font-size:13px; }
    #editor-workspace .layer small { font-size:10px; }
}

/* One focus-trapped sheet on touch screens; the same live controls return to
   their desktop positions when it closes. */
#workspace-sheet { width:min(640px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:16px; padding:0; color:var(--ink); background:white; box-shadow:var(--shadow); overflow:hidden; }
#workspace-sheet[open] { display:flex; flex-direction:column; }
#workspace-sheet::backdrop { background:#182d2255; }
#workspace-sheet > header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); }
#workspace-sheet h2 { font:600 20px/1.3 "Segoe UI",sans-serif; margin:0; }
#workspace-sheet header button { min-height:44px; white-space:nowrap; font-size:14px; }
#workspace-sheet .workspace-sheet-body { overflow:auto; overscroll-behavior:contain; padding:20px; min-height:0; }
#workspace-sheet .editor-ribbon { padding:0 0 20px; }
#workspace-sheet .quick-add-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#workspace-sheet .quick-add-grid button { min-height:90px; font-size:14px; }
#workspace-sheet .quick-add-grid b { font-size:30px; }
#workspace-sheet .quick-add-grid small { font-size:14px; }
#workspace-sheet .order-costs { display:block; margin:0; }
#workspace-sheet .order-costs > summary { display:none; }
#workspace-sheet .shop-price-details > span { font-size:16px; padding:5px 0; }
#workspace-sheet .shop-price-details small { font-size:14px; }

/* Administration: a master/detail list, with just one management area open. */
#admin-workspace { display:flex; flex-direction:column; gap:14px; width:100%; max-width:1480px; height:calc(100dvh - var(--workspace-chrome)); min-height:530px; padding:22px 28px; overflow:hidden; }
#admin-workspace .admin-hero { flex:none; gap:20px; min-width:0; }
#admin-workspace .admin-hero .eyebrow { display:none; }
#admin-workspace .admin-hero h1 { margin:0; font:600 28px/1.25 "Segoe UI",sans-serif; letter-spacing:-.02em; }
#admin-workspace .admin-hero p { font-size:14px; color:var(--muted); margin:6px 0 0; }
#admin-workspace .admin-session { font-size:12px; flex-wrap:wrap; justify-content:end; gap:8px; }
#admin-workspace .admin-session button { min-height:40px; font-size:14px; }
#admin-workspace > .workspace-tabs { flex:none; padding:5px; border:1px solid var(--line); border-radius:10px; background:white; }
#admin-workspace > .workspace-tabs button { flex:1; min-height:40px; }
#admin-workspace > [role="tabpanel"] { min-height:0; flex:1; margin:0; }
#admin-workspace :is(.admin-grid,.admin-template-manager,.admin-discount-manager) { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:18px; overflow:hidden; }
#admin-workspace .admin-card { min-width:0; min-height:0; padding:20px; border-radius:12px; box-shadow:none; }
#admin-workspace :is(.admin-grid,.admin-template-manager,.admin-discount-manager) > section { display:flex; flex-direction:column; gap:12px; overflow:hidden; }
#admin-workspace .admin-card h2 { font:600 20px/1.3 "Segoe UI",sans-serif; margin:0; }
#admin-workspace .admin-card p { font-size:14px; line-height:1.5; margin:5px 0; }
#admin-workspace .admin-card-head { align-items:start; gap:12px; flex:none; }
#admin-workspace .admin-card-head > span { font-size:12px; white-space:nowrap; background:#f0f3ee; padding:6px 8px; border-radius:6px; }
#admin-workspace .admin-card-head p { display:none; }
#admin-workspace .admin-add-new { align-self:start; min-height:40px; font-size:14px; padding:8px 12px; }
#admin-workspace .template-list, #admin-workspace .discount-list { display:flex; flex-direction:column; gap:10px; margin:0; overflow:auto; min-height:0; overscroll-behavior:contain; }
#admin-workspace .template-item, #admin-workspace .discount-item { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; padding:13px; flex:none; border-radius:9px; }
#admin-workspace .template-item.inactive, #admin-workspace .discount-item.inactive { opacity:1; background:#f7f8f5; }
#admin-workspace .template-item strong, #admin-workspace .discount-item strong { font-size:16px; line-height:1.4; }
#admin-workspace .template-item small, #admin-workspace .discount-item small { font-size:12px; line-height:1.6; }
#admin-workspace .template-item > div:nth-child(2) > span { font-size:12px; margin-top:3px; }
#admin-workspace .admin-product-visibility { color:var(--green); }
#admin-workspace .inactive .admin-product-visibility { color:var(--muted); }
#admin-workspace .template-item-actions { grid-column:1/-1; justify-content:start; gap:6px; max-width:none; }
#admin-workspace .template-item-actions button { min-height:36px; padding:7px 10px; font-size:12px; border-radius:6px; }
#admin-workspace .template-item-actions .edit { border-color:#9db8a4; color:var(--green-dark); background:var(--green-soft); }
#admin-workspace .template-disc { width:54px; height:54px; }
#admin-workspace .template-disc span { display:none; }
#admin-workspace .template-disc svg { width:46px; height:46px; }
#admin-workspace .template-form { position:relative; display:flex; flex-direction:column; gap:14px; overflow:auto; overscroll-behavior:contain; }
#admin-workspace .template-form > * { flex-shrink:0; }
#admin-workspace .admin-product-fields { display:flex; flex-direction:column; gap:16px; flex:1; }
#admin-workspace .admin-product-fields > .workspace-tabs { padding-bottom:10px; border-bottom:1px solid var(--line); }
#admin-workspace .admin-product-fields > .workspace-tabs button { flex:1; padding:8px; }
#admin-workspace .field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
#admin-workspace label { display:grid; gap:7px; font-size:14px; font-weight:600; line-height:1.4; }
#admin-workspace label small { font-size:12px; font-weight:400; color:var(--muted); }
#admin-workspace :is(input,select,textarea) { width:100%; min-width:0; min-height:42px; padding:9px 10px; font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:white; line-height:1.4; }
#admin-workspace input[type="checkbox"] { width:18px; min-height:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--green); }
#admin-workspace .switch-row { grid-column:1/-1; }
#admin-workspace .value-with-unit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; border:1px solid var(--line); border-radius:7px; background:#fff; align-items:center; overflow:hidden; min-height:42px; }
#admin-workspace .value-with-unit input { height:40px; min-height:40px; border:0; padding:8px 10px; text-align:center; }
#admin-workspace .value-with-unit em { position:static; padding:0 10px; font-size:12px; font-style:normal; white-space:nowrap; }
#admin-workspace .admin-sticky-footer { position:sticky; bottom:-20px; z-index:2; margin:auto -20px -20px; padding:14px 20px; background:#fff; border-top:1px solid var(--line); }
#admin-workspace .admin-form-actions { flex-wrap:wrap; gap:8px; }
#admin-workspace .admin-form-actions button { min-height:42px; font-size:14px; }
#admin-workspace .admin-status { font-size:12px; min-height:0; margin:8px 0 0; }
#admin-workspace .admin-dxf-pair { gap:12px; }
#admin-workspace .admin-dxf-step { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:12px; }
#admin-workspace .admin-dxf-step b { font-size:14px; }
#admin-workspace .admin-dxf-step button { min-height:42px; font-size:14px; }
#admin-workspace .admin-coordinate-details { min-width:0; }
#admin-workspace .admin-coordinate-details summary { font-size:12px; cursor:pointer; }
#admin-workspace .admin-coordinate-details textarea { margin-top:8px; font-family:Consolas,monospace; }
#admin-workspace .admin-boundary-preview { margin-top:14px; }
#admin-workspace .admin-boundary-preview p span { font-size:12px; }
#admin-workspace .admin-pricing-card, #admin-workspace .admin-auth-policy-card { overflow:auto; }
#admin-workspace .admin-pricing-layout { grid-template-columns:minmax(0,2fr) minmax(200px,1fr); gap:28px; }
#admin-workspace .admin-pricing-footer { gap:16px; padding-top:20px; }
#admin-workspace .admin-pricing-footer small { font-size:12px; }
.admin-section-picker, .admin-back { display:none!important; }

@media (max-width:1200px) and (min-width:901px) {
  #editor-workspace { grid-template-columns:216px minmax(220px,1fr) 250px; }
  #editor-workspace .quick-add-primary button { padding:6px; gap:4px; }
  #editor-workspace .quick-add-primary button span { font-size:12px; }
  #editor-workspace :is(.left-panel,.right-panel) { padding:14px; }
  #editor-workspace .ribbon-controls .ribbon-text { flex-basis:160px; }
  #editor-workspace .ribbon-controls .ribbon-font { flex-basis:150px; }
  #editor-workspace .ribbon-controls .ribbon-operation { flex-basis:170px; }
  #editor-workspace .ribbon-controls .ribbon-metric { flex-basis:105px; }
  #admin-workspace { padding:18px; }
}
@media (max-width:900px) {
  html[data-app-mode="editor"] .topbar, html[data-app-mode="admin"] .topbar { min-height:56px; height:56px; padding:8px 14px; }
  html[data-app-mode="editor"] .modebar, html[data-app-mode="admin"] .modebar { height:46px; padding:3px 14px; }
  html[data-app-mode="editor"] .top-actions #account-open, html[data-app-mode="admin"] .top-actions #account-open { width:auto; max-width:140px; font-size:12px; line-height:1.2; }
  #editor-workspace { min-height:470px; grid-template-columns:1fr; grid-template-rows:auto auto auto minmax(110px,1fr) auto auto; grid-template-areas:"template" "insert" "info" "canvas" "mobile" "right"; }
  #editor-workspace .left-panel { display:contents; }
  #editor-workspace .editor-product-tools, #editor-workspace .editor-layers, #editor-workspace #editor-ribbon, #editor-workspace .selection-disclosure { display:none; }
  #editor-workspace .quick-add { grid-area:insert; padding:10px 12px; background:white; border-bottom:1px solid var(--line); }
  #editor-workspace .quick-add-primary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  #editor-workspace .quick-add-primary button { grid-column:auto!important; min-height:46px; padding:7px 5px; justify-content:center; gap:5px; border-radius:7px; }
  #editor-workspace .quick-add-primary button span { font-size:12px; }
  #editor-workspace .quick-add-primary #add-dxf { order:0; }
  #editor-workspace #symbol-picker-open { order:0; }
  #editor-workspace .quick-add-primary button b { font-size:18px; }
  #editor-workspace #add-dxf b { font-size:10px; padding:3px 2px; }
  #editor-workspace .canvas-toolbar { padding:7px 12px 0; flex-wrap:nowrap; justify-content:space-between; }
  #editor-workspace .fit-badge { font-size:12px; padding:5px 7px; }
  #editor-workspace .canvas-toolbar .history-controls button { width:34px; min-width:34px; height:34px; overflow:hidden; font-size:0; padding:3px; }
  #editor-workspace .canvas-toolbar .history-controls button::first-letter { font-size:18px; }
  #editor-workspace .series-preview { order:0; width:auto; gap:4px; }
  #editor-workspace .series-preview button { min-width:30px; }
  #editor-workspace .series-preview span { font-size:12px; }
  #editor-workspace .board-wrap { height:100%; padding:4px 10px; }
  #editor-workspace .canvas-hint { display:none; }
  #editor-workspace .editor-mobile-nav { grid-area:mobile; display:grid; grid-template-columns:1.25fr 1fr 1fr; padding:8px 12px; gap:6px; border-top:1px solid var(--line); background:#fff; }
  #editor-workspace .editor-mobile-nav button { min-height:44px; padding:7px; font-size:13px; line-height:1.25; font-weight:600; border:1px solid var(--line); background:#fff; border-radius:7px; }
  #editor-workspace .editor-mobile-nav button:last-child { border-color:#b1c8b6; color:var(--green-dark); background:var(--green-soft); }
  #editor-workspace .right-panel { grid-area:right; display:block; padding:10px 14px max(10px,env(safe-area-inset-bottom)); height:auto; background:#fff; border:0; border-top:1px solid var(--line); }
  #editor-workspace .order-panel { position:static; padding:0; box-shadow:none; }
  #editor-workspace .shop-order-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(155px,1fr); gap:8px 10px; }
  #editor-workspace .shop-order-head { grid-column:1/-1; display:flex; align-items:center; gap:12px; }
  #editor-workspace .shop-order-head > div { min-width:0; }
  #editor-workspace .shop-order-head b { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #editor-workspace .shop-order-head small { display:none; }
  #editor-workspace .shop-order-head strong { font-size:24px; }
  #editor-workspace .quantity-field { grid-row:2; display:flex; gap:8px; font-size:12px; margin:0; }
  #editor-workspace .quantity-control { flex:none; width:100px; }
  #editor-workspace .quantity-control :is(button,input) { height:42px; width:32px; min-width:0; }
  #editor-workspace .quantity-control input { width:36px; }
  #editor-workspace .add-cart-button { grid-column:2; grid-row:2; min-height:44px; padding:9px; font-size:14px; }
  #editor-workspace .price-details-open { grid-column:1/-1; padding:2px 0; font-size:12px; text-align:left; }
  #editor-workspace .shop-order-note { display:none; }
  #editor-workspace .design-choice { display:none; }
  #editor-workspace:has(#design-tool-choice:not([hidden])) { padding-bottom:0; }
  #workspace-sheet { width:calc(100vw - 16px); max-height:calc(100dvh - 24px); margin:auto auto 8px; border-radius:16px; }
  #workspace-sheet > header { padding:12px 16px; }
  #workspace-sheet .workspace-sheet-body { padding:16px; }
  #workspace-sheet .ribbon-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:14px 12px; }
  #workspace-sheet .ribbon-panel-stack > [hidden] { display:grid!important; }
  #workspace-sheet .ribbon-controls > * { min-width:0!important; width:auto!important; flex:none!important; }
  #workspace-sheet .ribbon-operation, #workspace-sheet .ribbon-text, #workspace-sheet .ribbon-series, #workspace-sheet .ribbon-position, #workspace-sheet .ribbon-curve { grid-column:1/-1; }
  #workspace-sheet .ribbon-controls .ribbon-metric { min-width:0; width:auto; }
  #workspace-sheet .ribbon-position { min-width:0; }
  #workspace-sheet .ribbon-position-fields { gap:5px; }
  #workspace-sheet .ribbon-position-fields label { display:grid; grid-template-columns:1fr; gap:4px; }
  #workspace-sheet .ribbon-position-fields small { font-size:14px; }
  #workspace-sheet .ribbon-input-unit input { padding:8px 3px; }
  #workspace-sheet .ribbon-curve { display:grid; grid-template-columns:auto 1fr; }
  #workspace-sheet :is(input,select,textarea) { font-size:16px!important; }
  #workspace-sheet .editor-product-tools { display:grid; gap:16px; }
  #workspace-sheet .layer-heading { margin:0; border:0; padding:0; font-size:14px; }
  #workspace-sheet .layer-heading small { display:none; }
  #workspace-sheet .layer-list { display:grid; }
  #workspace-sheet .design-choice { margin-top:14px; }
  #workspace-sheet .design-choice label { display:grid; font-size:14px; }
  #workspace-sheet .design-choice select { width:100%; }
  #workspace-sheet .design-choice small { font-size:12px; }
  #admin-workspace { gap:12px; padding:16px; min-height:500px; }
  #admin-workspace .admin-hero { display:flex; gap:8px; }
  #admin-workspace .admin-hero h1 { font-size:22px; }
  #admin-workspace .admin-hero p, #admin-workspace .admin-session b, #admin-workspace .admin-session > span { display:none; }
  #admin-workspace .admin-session { margin:0; }
  #admin-workspace > .workspace-tabs { display:none; }
  #admin-workspace .admin-section-picker { display:grid!important; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; flex:none; font-size:14px; }
  #admin-workspace :is(.admin-grid,.admin-template-manager,.admin-discount-manager) { grid-template-columns:1fr; }
  #admin-workspace [data-detail="list"] > aside, #admin-workspace [data-detail="form"] > section { display:none; }
  #admin-workspace .admin-back { display:block!important; align-self:start; min-height:40px; font-size:14px; }
  #admin-workspace .admin-card { padding:16px; }
  #admin-workspace .admin-sticky-footer { bottom:-16px; margin:16px -16px -16px; padding:12px 16px; }
  #admin-workspace .field-grid { gap:14px; }
  #admin-workspace .admin-pricing-layout { grid-template-columns:1fr; gap:16px; }
  #admin-workspace .admin-dxf-pair { grid-template-columns:1fr; }
  #admin-workspace :is(input,select,textarea) { font-size:16px; }
}
@media (max-width:440px) {
  #admin-workspace .field-grid { grid-template-columns:1fr; }
  #admin-workspace .admin-card-head { flex-wrap:wrap; }
  #admin-workspace .admin-product-fields > .workspace-tabs { gap:3px; }
  #admin-workspace .admin-product-fields > .workspace-tabs button { font-size:13px; padding:8px 5px; }
  #editor-workspace .quick-add-primary #add-dxf { flex-direction:column; gap:3px; }
  #editor-workspace #add-dxf span { font-size:12px; }
}
@media (max-height:740px) and (min-width:901px) {
  #editor-workspace :is(.left-panel,.right-panel) { padding:12px 16px; gap:10px; }
  #editor-workspace .quick-add-primary { grid-template-columns:1fr 1fr; }
  #editor-workspace #add-dxf, #editor-workspace #symbol-picker-open { grid-column:auto; }
  #editor-workspace #add-dxf span { font-size:12px; }
  #editor-workspace .customer-template-shortcut { padding:4px; min-height:28px; }
  #editor-workspace .quantity-field { margin:10px 0; }
  #editor-workspace .shop-order-head { display:flex; justify-content:space-between; }
  #editor-workspace .shop-order-head strong { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) { #workspace-sheet { scroll-behavior:auto; } }

/* Licensed monochrome motifs: a bounded page rather than an endless list. */
#design-template-dialog { width:min(1060px,calc(100vw - 28px)); max-width:calc(100vw - 28px); overflow:hidden; }
#design-template-dialog .design-template-shell { max-height:calc(100dvh - 28px); box-sizing:border-box; }
#design-template-gallery .design-template-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
#design-template-gallery .design-template-card-copy { min-width:0; }
#design-template-gallery .design-template-card-copy small { font-size:12px; }
#design-template-gallery .design-template-preview { min-height:205px; }
#design-template-gallery .design-template-preview svg { height:182px; }
.template-free-start { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 3px; color:var(--muted); font-size:13px; }
.template-free-start button { white-space:nowrap; }
.symbol-library-intro { margin:0 0 16px; color:var(--muted); font-size:14px; }
.symbol-library-filters { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; margin-bottom:16px; }
.symbol-library-filters label { display:grid; gap:6px; font-size:13px; font-weight:650; }
.symbol-library-filters :is(input,select) { min-width:0; width:100%; height:42px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
.symbol-library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; min-height:306px; align-content:start; }
.symbol-library-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:96px; padding:9px 4px; border:1px solid var(--line); border-radius:10px; background:#fafaf7; color:#302b26; cursor:pointer; }
.symbol-library-grid button:hover { background:var(--green-soft); border-color:var(--green); }
.symbol-library-grid button:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
.symbol-library-grid svg { display:block; width:42px; height:42px; }
.symbol-library-grid span { font-size:12px; line-height:1.15; text-align:center; }
.symbol-library-empty { grid-column:1/-1; padding:36px 20px; text-align:center; color:var(--muted); }
.symbol-library-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:16px; font-size:13px; }
.symbol-library-pagination button { width:40px; height:36px; border:1px solid var(--line); background:#fff; border-radius:7px; }
.symbol-library-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); margin-top:16px; padding-top:12px; }
.symbol-library-footer small { color:var(--muted); font-size:11px; }
.symbol-library-footer a { color:inherit; }
@media (max-width:600px) {
  #design-template-gallery .design-template-card { grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr); }
  #design-template-gallery .design-template-preview { min-height:168px; padding:8px; }
  #design-template-gallery .design-template-preview svg { height:148px; }
  .symbol-library-filters { grid-template-columns:1fr; gap:10px; }
  .symbol-library-grid { gap:6px; min-height:264px; }
  .symbol-library-grid button { height:84px; gap:6px; }
  .symbol-library-grid svg { width:34px; height:34px; }
  .symbol-library-grid span { font-size:11px; }
}