:root {
  --ink: #181a20;
  --ink-soft: #4e535e;
  --muted: #7a808c;
  --line: #e2e4e9;
  --line-strong: #cfd3da;
  --panel: #ffffff;
  --canvas: #e8eaee;
  --canvas-grid: rgba(34, 44, 64, .055);
  --blue: #0d63f3;
  --blue-deep: #084fc8;
  --blue-soft: #eaf2ff;
  --navy: #111827;
  --green: #13885d;
  --green-soft: #eaf8f2;
  --amber: #a96508;
  --amber-soft: #fff5dc;
  --red: #c93c3c;
  --red-soft: #fff0ef;
  --radius: 8px;
  --body: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "SF Pro Display", Inter, "PingFang SC", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
body[data-restricted-retouch="true"] .tool-dock [data-library-tab="skills"],
body[data-restricted-retouch="true"] .tool-dock [data-library-tab="templates"],
body[data-restricted-retouch="true"] .tool-dock [data-library-tab="references"],
body[data-restricted-retouch="true"] [data-library-view="skills"],
body[data-restricted-retouch="true"] [data-library-view="templates"],
body[data-restricted-retouch="true"] [data-library-view="references"],
body[data-restricted-retouch="true"] #manageRules,
body[data-restricted-retouch="true"] #activeTemplateButton,
body[data-restricted-retouch="true"] #batchButton,
body[data-restricted-retouch="true"] #versionButton,
body[data-restricted-retouch="true"] .variant-tray,
body[data-restricted-retouch="true"] .copy-block,
body[data-restricted-retouch="true"] .retro-evidence-card,
body[data-restricted-retouch="true"] .claim-badge,
body[data-restricted-retouch="true"] .serial-mark,
body[data-restricted-retouch="true"] .rule-signature,
body[data-restricted-retouch="true"] .design-frame { display: none !important; }
body[data-restricted-retouch="true"] .source-replace-control { display: none !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(13,99,243,.35); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.editor-shell { width: 100vw; height: 100vh; display: grid; grid-template-rows: 56px minmax(0,1fr); }
.editor-topbar { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(260px,1fr) auto minmax(430px,1fr); align-items: center; gap: 16px; padding: 0 12px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(19,27,42,.03); }
.topbar-start, .topbar-actions, .stage-crumbs, .save-state, .canvas-toolbar, .canvas-file-meta, .variant-tray, .readiness, .dialog-head, .dialog-actions { display: flex; align-items: center; }
.topbar-start { min-width: 0; gap: 10px; }
.brand-button { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--navy); border: 0; border-radius: 8px; }
.brand-button svg { width: 18px; height: 18px; }
.file-identity { min-width: 0; padding-left: 2px; }
.file-identity strong, .file-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-identity strong { font: 700 12px/1.25 var(--mono); }
.file-identity span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.project-menu { width: 26px; height: 26px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
.project-menu:hover { color: var(--ink); background: #f0f1f4; }
.stage-crumbs { justify-content: center; gap: 5px; }
.stage-crumbs button { display: flex; align-items: center; gap: 5px; padding: 6px 7px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 10px; }
.stage-crumbs button:hover { color: var(--ink); background: #f1f2f5; }
.stage-crumbs button.active { color: var(--ink); font-weight: 700; }
.stage-crumbs button span { color: #9ba0a9; font: 650 8px/1 var(--mono); }
.stage-crumbs button.active span { color: var(--blue); }
.stage-crumbs > i { color: #c5c8ce; font-style: normal; }
.topbar-actions { justify-content: flex-end; gap: 7px; }
.save-state { gap: 6px; margin-right: 2px; color: var(--muted); font-size: 9px; }
.save-state i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.primary-button, .quiet-button { min-height: 32px; padding: 0 12px; border-radius: 7px; font-size: 10px; font-weight: 700; transition: .15s ease; }
.primary-button { color: #fff; background: var(--blue); border: 1px solid var(--blue); box-shadow: 0 3px 9px rgba(13,99,243,.16); }
.primary-button:hover { background: var(--blue-deep); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.quiet-button { color: var(--ink-soft); background: #fff; border: 1px solid var(--line-strong); }
.quiet-button:hover { color: var(--ink); background: #f6f7f9; border-color: #b9bec7; }
.quiet-button span { margin-left: 4px; color: var(--blue); }
.icon-button, .small-icon-button { display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 6px; }
.icon-button { width: 30px; height: 30px; }
.icon-button svg { width: 16px; }
.small-icon-button { width: 28px; height: 28px; font-weight: 800; }
.small-icon-button svg { width: 15px; height: 15px; }
.icon-button:hover, .small-icon-button:hover { background: #f0f1f4; border-color: var(--line); }
.icon-button:disabled { opacity: .3; cursor: not-allowed; }

.editor-body { min-height: 0; display: grid; grid-template-columns: 56px minmax(296px,19vw) minmax(560px,1fr) 312px; }
.tool-dock { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 8px 5px; background: var(--navy); border-right: 1px solid #232b3a; }
.tool-dock button { display: grid; width: 46px; min-height: 50px; place-items: center; align-content: center; gap: 4px; padding: 5px 0; color: #8e98aa; background: transparent; border: 0; border-radius: 7px; font-size: 8px; }
.tool-dock button svg { width: 18px; height: 18px; }
.tool-dock button:hover { color: #fff; background: rgba(255,255,255,.07); }
.tool-dock button.active { color: #fff; background: var(--blue); }
.dock-spacer { flex: 1; }

.library-panel, .properties-panel { min-width: 0; min-height: 0; background: var(--panel); }
.library-panel { display: grid; grid-template-rows: 62px minmax(0,1fr); border-right: 1px solid var(--line); }
.panel-header, .properties-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.panel-kicker { display: block; color: var(--muted); font: 700 8px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.panel-header h1, .properties-header h2 { margin: 3px 0 0; font: 720 15px/1.2 var(--display); letter-spacing: -.02em; }
.library-view { display: none; min-height: 0; padding: 14px; overflow-y: auto; }
.library-view.active { display: block; }
.intelligence-summary { display:grid; gap:5px; margin-bottom:14px; padding:12px; background:#f6f7f9; border:1px solid var(--line); border-radius:8px; }
.intelligence-summary strong { font-size:11px; }
.intelligence-summary small { color:var(--muted); font-size:8px; line-height:1.5; }
.skill-list { display:grid; gap:8px; }
.skill-card { display:grid; gap:7px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.skill-card:hover { border-color:#aeb6c1; }
.skill-card.active { background:var(--blue-soft); border-color:#8eb4f8; }
.skill-card-head { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:700 7px/1 var(--mono); }
.skill-card > strong { font-size:10px; line-height:1.35; }
.skill-card > small { color:var(--muted); font-size:8px; }
.skill-card > button { min-height:30px; margin-top:2px; color:var(--blue); background:#fff; border:1px solid #bcd2fa; border-radius:6px; font-size:8px; font-weight:750; }
.skill-card > button:hover { color:#fff; background:var(--blue); border-color:var(--blue); }
.skill-card > button:disabled { opacity:.55; cursor:wait; }
.skill-empty { display:grid; gap:5px; text-align:left; }
.skill-empty strong { color:var(--ink); font-size:9px; }
.skill-empty span { font-size:8px; line-height:1.45; }
.create-icon { display:grid; width:28px; height:28px; place-items:center; color:var(--blue); background:var(--blue-soft); border-radius:6px; }
.create-icon svg { width:14px; height:14px; }
.reference-drop { display:grid; width:100%; min-height:116px; place-items:center; align-content:center; gap:7px; color:var(--ink-soft); background:#fafbfc; border:1px dashed #b8bec8; border-radius:8px; }
.reference-drop:hover { color:var(--blue); background:var(--blue-soft); border-color:#8eb4f8; }
.reference-drop svg { width:24px; height:24px; }
.reference-drop strong { font-size:10px; }
.reference-drop small { color:var(--muted); font-size:8px; }
.reference-list { display:grid; gap:7px; margin-top:14px; }
.reference-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:9px; padding:7px; border:1px solid var(--line); border-radius:7px; }
.reference-item img { width:42px; height:42px; object-fit:cover; border-radius:5px; }
.reference-item span { min-width:0; }
.reference-item strong,.reference-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reference-item strong { font-size:8px; }
.reference-item small { margin-top:4px; color:var(--muted); font-size:7px; }
.reference-item > b { color:var(--muted); font:700 6px/1 var(--mono); }
.search-field { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; background: #f4f5f7; border: 1px solid transparent; border-radius: 7px; }
.search-field:focus-within { background: #fff; border-color: #a8c4f9; box-shadow: 0 0 0 2px rgba(13,99,243,.08); }
.search-field svg { width: 14px; color: #8a909b; }
.search-field input { min-width: 0; width: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: 10px; }
.library-filter { display: flex; gap: 4px; margin: 12px 0; }
.library-filter button { min-height: 27px; padding: 0 9px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 9px; }
.library-filter button:hover { color: var(--ink); background: #f3f4f6; }
.library-filter button.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }
.template-list { display: grid; gap: 9px; }
.template-card { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 11px; padding: 8px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; transition: .14s ease; }
.template-card:hover { border-color: #aeb5c0; box-shadow: 0 5px 14px rgba(22,31,48,.08); transform: translateY(-1px); }
.template-card.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(13,99,243,.09); }
.template-thumb { position: relative; display: block; height: 82px; overflow: hidden; background: #e7e9ed; border-radius: 5px; }
.template-thumb::before, .template-thumb::after { content: ""; position: absolute; }
.template-thumb::before { inset: 10px 8px 32px; background: linear-gradient(135deg,#b7bdc8,#f5f6f8 54%,#858e9d); border-radius: 2px; }
.template-thumb::after { left: 8px; right: 19px; bottom: 12px; height: 10px; border-top: 4px solid #222a38; border-bottom: 3px solid rgba(34,42,56,.3); }
.template-thumb.retro-offroad-listing-v1-1 { background: #d5c7b5; }
.template-thumb.retro-offroad-listing-v1-1::before { inset: 24px 4px 20px; background: linear-gradient(135deg,#d59862,#f4ddbd 45%,#6f7e67); clip-path: polygon(2% 0,98% 2%,100% 94%,95% 100%,1% 96%); }
.template-thumb.retro-offroad-listing-v1-1::after { left: 7px; right: 7px; top: 8px; bottom: auto; height: 9px; border: 0; background: #8e4437; box-shadow: 2px 2px 0 #2e1009, 0 58px 0 4px #e7e1d8; }
.template-thumb.brand-02 { background: #f0eee9; }
.template-thumb.brand-02::before { inset: 5px 5px 22px; background: linear-gradient(135deg,#bda38c,#f7f3eb); }
.template-thumb.proof-01 { background: #10233d; }
.template-thumb.proof-01::after { border-color: #f0b429; }
.template-copy { min-width: 0; align-self: center; }
.template-copy strong, .template-copy small, .template-copy em { display: block; }
.template-copy strong { font-size: 10px; line-height: 1.35; }
.template-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.template-copy em { margin-top: 8px; color: var(--blue); font: normal 700 7px/1 var(--mono); }
.template-card.active .template-copy em::before { content: "已应用 · "; }
.library-empty { padding: 30px 8px; color: var(--muted); text-align: center; font-size: 10px; }
.library-create-button { display: grid; grid-template-columns: 28px 1fr; gap: 2px 9px; width: 100%; margin-top: 12px; padding: 11px; text-align: left; background: #f7f8fa; border: 1px dashed #bcc2cc; border-radius: 9px; }
.library-create-button:hover { color: var(--blue); background: var(--blue-soft); border-color: #8cb2f7; }
.library-create-button > span { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: var(--blue); background: #fff; border: 1px solid #bdd1f6; border-radius: 7px; font-size: 16px; }
.library-create-button strong { font-size: 9px; }
.library-create-button small { color: var(--muted); font-size: 7px; line-height: 1.35; }

.source-summary { margin-bottom: 10px; padding: 11px; background: #f6f7f9; border-radius: 8px; }
.source-summary strong, .source-summary small { display: block; }
.source-summary strong { margin-top: 6px; font-size: 10px; }
.source-summary small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.source-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.source-card:hover { border-color: #a9b1bd; }
.source-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #eef0f3; }
.source-card > span { display: block; padding: 10px; }
.source-card strong, .source-card small { display: block; }
.source-card strong { font-size: 9px; }
.source-card small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.source-card > i { position: absolute; top: 8px; right: 8px; padding: 4px 6px; color: #fff; background: rgba(17,24,39,.75); border-radius: 5px; font: normal 700 7px/1 var(--body); backdrop-filter: blur(5px); }
.source-card.empty > i { display: none; }
.asset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.asset-actions label { display: grid; place-items: center; }
.asset-note { display: grid; gap: 4px; margin-top: 14px; padding: 10px 11px; color: #355061; background: #eef7fa; border-left: 3px solid #57a7c1; font-size: 8px; line-height: 1.45; }
.layer-list { display: grid; gap: 2px; }
.layer-button { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 38px; width: 100%; padding: 5px 7px; color: var(--ink-soft); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; }
.layer-button:hover { background: #f4f5f7; }
.layer-button.active { color: var(--blue); background: var(--blue-soft); border-color: #c8dafe; }
.layer-icon { display: grid; width: 22px; height: 22px; place-items: center; color: #737a86; background: #eceef2; border-radius: 5px; font: 800 8px/1 var(--mono); }
.layer-button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.layer-button small { color: var(--muted); font: 600 7px/1 var(--mono); }
.layer-note { margin-top: 12px; color: var(--muted); font-size: 8px; text-align: center; }

.canvas-stage { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 46px minmax(0,1fr) 64px; background: var(--canvas); }
.canvas-toolbar { gap: 8px; padding: 0 13px; color: var(--ink-soft); background: rgba(248,249,251,.96); border-bottom: 1px solid #d6d9df; }
.canvas-file-meta { gap: 8px; }
.canvas-file-meta span { font-size: 9px; font-weight: 700; }
.canvas-file-meta b { color: var(--muted); font: 600 8px/1 var(--mono); }
.toolbar-divider { width: 1px; height: 18px; margin: 0 3px; background: #d6d9df; }
.toolbar-spacer { flex: 1; }
.tool-button, .fit-button { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 8px; color: #59606c; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 8px; }
.tool-button svg { width: 14px; }
.tool-button:hover, .fit-button:hover { color: var(--ink); background: #fff; border-color: #d5d8de; }
.tool-button.active { color: var(--blue); background: var(--blue-soft); }
.fit-button { color: var(--muted); }
.zoom-control { display: grid; grid-template-columns: 28px 46px 28px; height: 28px; overflow: hidden; background: #fff; border: 1px solid #d4d7dd; border-radius: 6px; }
.zoom-control button { padding: 0; color: #616874; background: transparent; border: 0; font-size: 10px; }
.zoom-control button + button { border-left: 1px solid #e3e5e9; }
.zoom-control button:hover { background: #f3f4f6; }
.zoom-control #zoomValue { font: 700 8px/1 var(--mono); }
.canvas-viewport { position: relative; min-width: 0; min-height: 0; overflow: auto; background-color: var(--canvas); background-image: linear-gradient(var(--canvas-grid) 1px, transparent 1px), linear-gradient(90deg,var(--canvas-grid) 1px,transparent 1px); background-size: 24px 24px; }
.canvas-coordinate { min-width: 100%; min-height: 100%; display: grid; place-items: start center; align-content: start; padding: 44px 64px 100px; }
.artboard-name { margin: 0 auto 8px 0; color: #656b76; font: 650 8px/1 var(--mono); }
.artboard { --title-color: #172033; --body-color: #2d3440; --surface-color: #ffffff; position: relative; flex: 0 0 auto; overflow: hidden; color: var(--ink); background: #eef1f4; box-shadow: 0 2px 3px rgba(20,28,42,.08), 0 15px 36px rgba(20,28,42,.16); transform-origin: top center; transition: width .18s ease, box-shadow .16s ease; }
.artboard.ratio-square { aspect-ratio: 1; }
.artboard.ratio-portrait { aspect-ratio: 4/5; }
.artboard.ratio-wide { aspect-ratio: 61/25; }
.artboard.ratio-store { aspect-ratio: 5/2; }
.product-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-x,50%) var(--photo-y,50%); filter: brightness(var(--photo-brightness,100%)) var(--photo-filter,none); transform: scale(var(--photo-scale,1)); }
.photo-wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(246,247,244,.96) 0 43%,rgba(246,247,244,.28) 66%,transparent); }
.safe-zone { position: absolute; z-index: 8; inset: 5%; display: none; border: 1px dashed rgba(13,99,243,.62); pointer-events: none; }
.show-safe .safe-zone { display: block; }
.grid-lines { position: absolute; z-index: 7; inset: 0; display: none; pointer-events: none; background-image: linear-gradient(rgba(13,99,243,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(13,99,243,.17) 1px,transparent 1px); background-size: 10% 10%; }
.show-grid .grid-lines { display: block; }
.design-frame { position: absolute; z-index: 2; inset: 4%; border: 1px solid rgba(23,32,51,.13); pointer-events: none; }
.serial-mark, .rule-signature { position: absolute; z-index: 4; color: rgba(23,32,51,.5); font: 700 6px/1 var(--mono); letter-spacing: .08em; }
.serial-mark { right: 5%; top: 5%; }
.rule-signature { left: 5%; bottom: 3%; }
.copy-block { position: absolute; z-index: 4; cursor: move; user-select: none; }
.copy-block.dragging { cursor: grabbing; }
.eyebrow { display: inline-block; padding: 5px 8px; color: #fff; background: var(--accent,#155ee8); border-radius: 3px; font: 800 7px/1 var(--body); letter-spacing: .08em; }
.copy-block h2 { margin: 10px 0 0; color: var(--title-color); font: 850 var(--title-size,clamp(24px,3.35vw,48px))/.92 var(--headline-font,var(--display)); letter-spacing: -.035em; }
.copy-block p { margin: 9px 0 0; color: var(--body-color); font: 600 var(--body-size,clamp(8px,.85vw,12px))/1.45 var(--body); }
.feature-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.feature-row span { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(23,32,51,.25); }
.feature-row b { font: 850 8px/1 var(--display); }
.feature-row small { color: var(--ink-soft); font-size: 6px; }
.claim-badge { position: absolute; z-index: 4; right: 5%; bottom: 6%; display: grid; width: 60px; height: 60px; place-items: center; align-content: center; color: #fff; background: #172033; border-radius: 50%; transform: rotate(-4deg); }
.claim-badge span { font: 700 5px/1 var(--body); letter-spacing: .08em; }
.claim-badge b { margin-top: 3px; font: 850 13px/1 var(--display); }
.retro-evidence-card { display: none; }

.layout-right .photo-wash { background: linear-gradient(270deg,rgba(246,247,244,.96) 0 43%,rgba(246,247,244,.25) 66%,transparent); }
.layout-bottom .photo-wash { background: linear-gradient(0deg,rgba(246,247,244,.96) 0 38%,rgba(246,247,244,.22) 61%,transparent); }
.style-outdoor { --title-color:#fff; --body-color:#e6edf5; }
.style-outdoor .photo-wash { background: linear-gradient(90deg,rgba(8,24,42,.94),rgba(8,24,42,.25) 72%,transparent); }
.style-outdoor .eyebrow { color:#18202d; background:#f2bf42 !important; }
.style-outdoor .feature-row span { border-color:rgba(255,255,255,.34); }
.style-outdoor .feature-row small { color:#d7e0ea; }
.style-soft .photo-wash { background:linear-gradient(90deg,rgba(246,237,227,.95),rgba(246,237,227,.22) 68%,transparent); }
.style-editorial .copy-block h2 { font-family: Georgia,"Times New Roman",serif; font-weight:700; }
.style-performance .feature-row span { padding:8px; background:rgba(255,255,255,.9); border:1px solid rgba(23,32,51,.15); }

.rule-retro-offroad-listing-v1-1 { --title-color:#8e4437; --body-color:#2d211c; --surface-color:#e7e1d8; color:#2d211c; background:#d5c7b5; }
.rule-retro-offroad-listing-v1-1::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.3; background-image:repeating-linear-gradient(4deg,rgba(46,16,9,.035) 0 1px,transparent 1px 5px),repeating-linear-gradient(94deg,rgba(255,255,255,.08) 0 1px,transparent 1px 7px); mix-blend-mode:multiply; }
.rule-retro-offroad-listing-v1-1 .product-photo { inset:25.5% 3.5% auto; width:93%; height:51%; clip-path:polygon(2% 0,98% 1%,100% 5%,99% 96%,96% 100%,3% 99%,0 95%,1% 4%); --photo-filter:saturate(.94) contrast(1.04); }
.rule-retro-offroad-listing-v1-1 .photo-wash { z-index:2; opacity:1 !important; background:linear-gradient(180deg,#d5c7b5 0 24.2%,transparent 27% 74%,#d5c7b5 77% 100%),linear-gradient(90deg,#d5c7b5 0 2.8%,transparent 5% 95%,#d5c7b5 97.2%); }
.rule-retro-offroad-listing-v1-1 .copy-block { z-index:4; left:6% !important; right:auto !important; top:3% !important; bottom:auto !important; width:88% !important; padding:0; color:#2d211c; background:transparent; text-align:center !important; backdrop-filter:none; }
.rule-retro-offroad-listing-v1-1 .eyebrow { margin-bottom:8px; padding:5px 15px; color:#fff; background:var(--accent,#5b2e23) !important; border-radius:1px; font-family:Arial,Helvetica,sans-serif; letter-spacing:.09em; }
.rule-retro-offroad-listing-v1-1 .copy-block h2 { max-width:96%; margin:0 auto; color:var(--title-color); font-family:var(--headline-font,"Cooper Black","Superclarendon","Arial Black",Georgia,serif); font-weight:900; line-height:.9; letter-spacing:-.025em; text-transform:uppercase; text-shadow:4px 6px 0 #2e1009; }
.rule-retro-offroad-listing-v1-1 .copy-block p { max-width:82%; margin:10px auto 0; color:var(--body-color); font-family:Arial,Helvetica,sans-serif; font-weight:650; line-height:1.28; }
.rule-retro-offroad-listing-v1-1 .copy-block .feature-row { display:none; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-card { position:absolute; z-index:4; left:5.5%; right:5.5%; bottom:4.5%; display:block; min-height:13%; padding:5.6% 3.5% 3.2%; background:var(--surface-color,rgba(231,225,216,.95)); border:2px solid #5b2e23; border-radius:18px; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-label { position:absolute; left:4%; top:-10px; min-width:36%; padding:6px 12px; color:#fff; background:var(--accent,#5b2e23); font:800 7px/1 Arial,Helvetica,sans-serif; letter-spacing:.08em; text-align:center; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-features { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-features span { display:grid; min-width:0; padding:2px 8px; text-align:center; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-features span + span { border-left:1px solid rgba(91,46,35,.25); }
.rule-retro-offroad-listing-v1-1 .retro-evidence-features b { color:#2e1009; font:900 clamp(9px,1.1vw,17px)/1 "Arial Black",Arial,sans-serif; white-space:nowrap; }
.rule-retro-offroad-listing-v1-1 .retro-evidence-features small { margin-top:6px; color:#2d211c; font:650 clamp(5px,.5vw,8px)/1.2 Arial,sans-serif; }
.rule-retro-offroad-listing-v1-1 .claim-badge { right:7%; bottom:20.5%; width:60px; height:60px; color:#5b2e23; background:#f1e5d2; border:2px solid #5b2e23; box-shadow:0 5px 15px rgba(46,16,9,.16); }
.rule-retro-offroad-listing-v1-1 .claim-badge b { color:#8e4437; }
.rule-retro-offroad-listing-v1-1 .serial-mark { right:4%; top:1.6%; color:rgba(46,16,9,.55); }
.rule-retro-offroad-listing-v1-1 .rule-signature { left:5.5%; bottom:1.3%; color:rgba(46,16,9,.62); }
.rule-retro-offroad-listing-v1-1 .design-frame { display:none; }
.rule-retro-offroad-listing-v1-1 .safe-zone { inset:3.4% 4%; }

.artboard[data-selected-layer="image"] .product-photo,
.artboard[data-selected-layer="headline"] .copy-block,
.artboard[data-selected-layer="eyebrow"] .eyebrow,
.artboard[data-selected-layer="body"] #canvasBody,
.artboard[data-selected-layer="evidence"] .retro-evidence-card,
.artboard[data-selected-layer="evidence"] .feature-row,
.artboard[data-selected-layer="claim"] .claim-badge { outline:2px solid var(--blue); outline-offset:2px; }
.artboard[data-selected-layer="headline"] .copy-block::after { content:""; position:absolute; right:-4px; bottom:-4px; width:7px; height:7px; background:#fff; border:2px solid var(--blue); border-radius:1px; }

.variant-tray { gap:10px; padding:8px 12px; background:rgba(248,249,251,.98); border-top:1px solid #d6d9df; }
.variant-title { display:grid; min-width:85px; gap:3px; }
.variant-title span { color:var(--muted); font-size:7px; }
.variant-title b { font-size:9px; }
.variant-list { display:flex; gap:6px; }
.variant-button { width:44px; height:40px; padding:4px; background:#fff; border:1px solid var(--line-strong); border-radius:6px; }
.variant-button span { display:grid; width:100%; height:100%; place-items:center; color:#66707d; background:#eef0f3; border-radius:3px; font:800 8px/1 var(--mono); }
.variant-button:hover { border-color:#9fa7b4; }
.variant-button.active { border-color:var(--blue); box-shadow:0 0 0 2px rgba(13,99,243,.1); }
.variant-button.active span { color:var(--blue); background:var(--blue-soft); }
.compact-button { margin-left:auto; min-height:30px; }

.properties-panel { display:grid; grid-template-rows:62px 39px minmax(0,1fr) auto; border-left:1px solid var(--line); }
.selection-type { padding:4px 7px; color:var(--blue); background:var(--blue-soft); border-radius:5px; font-size:7px; font-weight:700; }
.property-tabs { display:grid; grid-template-columns:1fr 1fr; padding:5px 12px 0; border-bottom:1px solid var(--line); }
.property-tabs button { position:relative; color:var(--muted); background:transparent; border:0; font-size:9px; }
.property-tabs button.active { color:var(--ink); font-weight:700; }
.property-tabs button.active::after { content:""; position:absolute; left:18%; right:18%; bottom:-1px; height:2px; background:var(--blue); }
.property-tabs b { display:inline-grid; min-width:14px; margin-left:3px; padding:1px 4px; place-items:center; color:var(--amber); background:var(--amber-soft); border-radius:8px; font:700 7px/1.3 var(--mono); }
.inspector-content { min-height:0; padding:14px 15px 28px; overflow-y:auto; }
.inspector-content h3 { margin:0; font:720 13px/1.2 var(--display); }
.inspector-content > p { margin:5px 0 14px; color:var(--muted); font-size:8px; line-height:1.45; }
.inspector-section { margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.inspector-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.inspector-section-head strong { font-size:9px; }
.inspector-section-head small { color:var(--muted); font-size:7px; }
.field-group + .field-group { margin-top:11px; }
.field-label, .field-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; color:var(--ink-soft); font-size:8px; font-weight:700; }
.field-head span { color:var(--muted); font:600 7px/1 var(--mono); }
.text-input, .text-area, .select-input, .number-input { width:100%; padding:8px 9px; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:6px; font-size:9px; }
.text-area { min-height:64px; resize:vertical; line-height:1.45; }
.text-input:hover, .text-area:hover, .select-input:hover { border-color:#a9b0bb; }
.text-input:focus, .text-area:focus, .select-input:focus { border-color:#76a4f6; }
.field-hint { display:flex; justify-content:space-between; gap:6px; margin-top:4px; color:var(--muted); font-size:7px; line-height:1.35; }
.field-hint.warning { color:var(--amber); }
.property-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.range-field { display:grid; grid-template-columns:1fr 36px; gap:8px; align-items:center; }
.range-field input[type="range"] { width:100%; accent-color:var(--blue); }
.range-field output { padding:5px 2px; color:var(--ink-soft); text-align:center; background:#f2f3f5; border-radius:4px; font:700 7px/1 var(--mono); }
.alignment-control { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-bottom:12px; padding:3px; background:#f1f2f4; border-radius:6px; }
.alignment-control button { min-height:27px; color:var(--muted); background:transparent; border:0; border-radius:4px; font-size:8px; }
.alignment-control button.active { color:var(--ink); background:#fff; box-shadow:0 1px 3px rgba(20,28,42,.1); font-weight:700; }
.color-field { display:grid; grid-template-columns:34px 1fr; gap:7px; align-items:center; }
.color-field input[type="color"] { width:34px; height:32px; padding:3px; background:#fff; border:1px solid var(--line-strong); border-radius:6px; }
.color-field input[type="text"] { height:32px; }
.color-swatches { display:flex; flex-wrap:wrap; gap:7px; }
.color-swatches button { width:24px; height:24px; padding:0; background:var(--swatch); border:2px solid #fff; border-radius:6px; box-shadow:0 0 0 1px var(--line-strong); }
.color-swatches button.active { box-shadow:0 0 0 2px var(--blue); }
.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.channel-card { padding:9px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:7px; }
.channel-card:hover { border-color:#aeb6c1; }
.channel-card.active { background:var(--blue-soft); border-color:#8eb4f8; }
.channel-card strong,.channel-card small,.channel-card span { display:block; }
.channel-card strong { font-size:8px; }
.channel-card small { margin-top:4px; color:var(--muted); font:600 7px/1 var(--mono); }
.channel-card span { margin-top:6px; color:var(--green); font-size:6px; font-weight:700; }
.switch-row, .rule-row, .check-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 0; }
.switch-row + .switch-row, .rule-row + .rule-row, .check-row + .check-row { border-top:1px solid #eff0f3; }
.switch-row strong,.switch-row small,.rule-row strong,.rule-row small,.check-row strong,.check-row small { display:block; }
.switch-row strong,.rule-row strong,.check-row strong { font-size:8px; }
.switch-row small,.rule-row small,.check-row small { margin-top:3px; color:var(--muted); font-size:7px; line-height:1.4; }
.toggle { position:relative; flex:0 0 auto; width:29px; height:17px; }
.toggle input { position:absolute; opacity:0; }
.toggle span { position:absolute; inset:0; background:#cbd0d7; border-radius:9px; }
.toggle span::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.15s; }
.toggle input:checked + span { background:var(--blue); }
.toggle input:checked + span::after { transform:translateX(12px); }
.check-score { display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:center; padding:11px; background:#f7f8fa; border:1px solid var(--line); border-radius:8px; }
.score-ring { position:relative; display:grid; width:56px; height:56px; place-items:center; background:conic-gradient(var(--green) 0 92%,#e1e4e8 92% 100%); border-radius:50%; }
.score-ring::before { content:""; position:absolute; width:44px; height:44px; background:#fff; border-radius:50%; }
.score-ring b { position:relative; font:800 16px/1 var(--display); }
.check-score strong,.check-score small { display:block; }
.check-score strong { font-size:9px; }
.check-score small { margin-top:4px; color:var(--muted); font-size:7px; line-height:1.4; }
.check-icon { display:grid; flex:0 0 auto; width:17px; height:17px; place-items:center; color:var(--green); background:var(--green-soft); border-radius:50%; font-size:7px; }
.check-icon.warn { color:var(--amber); background:var(--amber-soft); }
.check-icon.pass::after,.status-pass::after { content:""; width:6px; height:3px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg) translateY(-1px); }
.check-icon.warn::after,.status-warn::after { content:""; width:2px; height:7px; border-top:5px solid currentColor; border-bottom:2px solid currentColor; }
.check-row { justify-content:flex-start; }
.check-row button { margin-left:auto; padding:0; color:var(--blue); background:transparent; border:0; font-size:7px; font-weight:700; }
.inspector-footer { display:grid; gap:8px; padding:10px 14px 12px; background:#fbfbfc; border-top:1px solid var(--line); }
.rule-status { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:9px 10px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:7px; }
.rule-status:hover { border-color:#aeb6c1; }
.rule-status > span { display:grid; grid-template-columns:7px 1fr; gap:2px 6px; }
.rule-status i { grid-row:1/3; align-self:center; width:7px; height:7px; background:var(--blue); border-radius:2px; }
.rule-status small,.rule-status strong { display:block; }
.rule-status small { color:var(--muted); font-size:7px; }
.rule-status strong { font-size:8px; }
.rule-status > b { color:var(--muted); }
.rule-status > svg { width:14px; height:14px; color:var(--muted); }
.readiness { justify-content:space-between; }
.readiness span { display:flex; align-items:center; gap:6px; color:var(--green); font-size:8px; font-weight:700; }
.readiness span i { width:6px; height:6px; background:var(--green); border-radius:50%; }
.readiness b { font:800 11px/1 var(--display); }
.full { width:100%; }

.app-dialog { width:min(560px,calc(100vw - 32px)); max-height:min(720px,calc(100vh - 40px)); padding:0; overflow:hidden; color:var(--ink); background:#fff; border:0; border-radius:12px; box-shadow:0 28px 90px rgba(9,17,31,.28); }
.app-dialog::backdrop { background:rgba(10,17,29,.54); backdrop-filter:blur(3px); }
.reference-skill-dialog { width:min(720px,calc(100vw - 40px)); }
.reference-skill-form { display:grid; max-height:calc(min(720px,100vh - 40px) - 64px); gap:16px; padding-top:16px; overflow-y:auto; }
.reference-file { display:grid; min-height:76px; margin:0 18px; place-items:center; color:var(--ink-soft); background:#f7f8fa; border:1px dashed #aeb5c0; border-radius:8px; cursor:pointer; }
.reference-file input { position:absolute; width:1px; height:1px; opacity:0; }
.reference-file span { display:grid; gap:5px; text-align:center; }
.reference-file strong { font-size:10px; }
.reference-file small { color:var(--muted); font-size:8px; }
.dialog-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 18px; }
.dialog-form-grid label { display:grid; gap:6px; color:var(--ink-soft); font-size:8px; font-weight:700; }
.reference-identity-fields { margin:0 18px; padding:10px 0 0; border-top:1px solid var(--line); }
.reference-identity-fields summary { color:var(--ink-soft); font-size:9px; font-weight:750; cursor:pointer; }
.reference-identity-fields > small { display:block; margin:7px 0 10px; color:var(--muted); font-size:7px; line-height:1.5; }
.reference-identity-fields .dialog-form-grid { padding:0; }
.analysis-result { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 18px; padding:12px; background:#f6f8fb; border:1px solid var(--line); border-radius:8px; }
.analysis-result div { display:grid; gap:4px; }
.analysis-result span { color:var(--muted); font-size:7px; }
.analysis-result strong { font-size:8px; line-height:1.35; }
.analysis-result p { grid-column:1/-1; margin:4px 0 0; padding-top:10px; color:var(--ink-soft); border-top:1px solid var(--line); font-size:8px; line-height:1.5; }
.analysis-result.warning { color:var(--amber); background:var(--amber-soft); border-color:#ead19a; }
.analysis-result.warning p { color:#76500e; border-color:#ead19a; }
.gold-standard-editor { display:grid; gap:10px; margin:0 18px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.gold-standard-editor > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.gold-standard-editor strong { font-size:9px; }
.gold-standard-editor small { color:var(--muted); font-size:7px; }
.gold-standard-editor textarea { width:100%; min-height:210px; resize:vertical; padding:10px; color:#243149; background:#f7f9fc; border:1px solid #dce1e8; border-radius:6px; font:500 8px/1.55 var(--mono); }
.gold-standard-editor label { display:grid; gap:5px; color:var(--muted); font-size:7px; }
.gold-standard-editor .scope-review-check { display:flex; align-items:center; gap:7px; color:var(--ink-soft); }
.scope-review-check input { margin:0; }
.dialog-head { justify-content:space-between; gap:12px; padding:16px 18px 13px; border-bottom:1px solid var(--line); }
.dialog-head h2 { margin:4px 0 0; font:720 16px/1.2 var(--display); }
.dialog-intro { margin:0; padding:14px 18px 0; color:var(--muted); font-size:9px; line-height:1.5; }
.dialog-actions { justify-content:flex-end; gap:8px; padding:13px 18px; border-top:1px solid var(--line); }
.version-list, .template-manager-list { max-height:520px; padding:10px 16px 18px; overflow-y:auto; }
.version-item { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:9px; padding:10px 3px; border-bottom:1px solid var(--line); }
.version-item > span { color:var(--blue); font:800 9px/1 var(--mono); }
.version-item strong,.version-item small { display:block; }
.version-item strong { font-size:9px; }
.version-item small { margin-top:3px; color:var(--muted); font-size:7px; }
.text-button { padding:0; color:var(--blue); background:transparent; border:0; font-size:8px; font-weight:700; }
.batch-sizes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 18px; }
.batch-size { padding:11px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:8px; }
.batch-size.active { background:var(--blue-soft); border-color:#8fb4f7; }
.batch-size strong,.batch-size small { display:block; }
.batch-size strong { font-size:8px; }
.batch-size small { margin-top:4px; color:var(--muted); font:600 7px/1 var(--mono); }
.delivery-status { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:16px 18px 8px; padding:13px; color:var(--green); background:var(--green-soft); border-radius:8px; }
.delivery-status.warning { color:var(--amber); background:var(--amber-soft); }
.delivery-status span { font-size:8px; font-weight:700; }
.delivery-status strong { justify-self:end; font:800 11px/1 var(--display); }
.delivery-status small { grid-column:1/3; color:var(--ink-soft); font-size:8px; }
.delivery-items { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 18px 18px; }
.delivery-items span { display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:8px; }
.delivery-items i { display:grid; width:16px; height:16px; place-items:center; color:var(--green); background:var(--green-soft); border-radius:50%; font-style:normal; font-size:7px; }
.delivery-items i.status-warn { color:var(--amber); background:var(--amber-soft); }
.batch-size > i { display:grid; width:16px; height:16px; margin-top:7px; place-items:center; color:var(--green); background:var(--green-soft); border-radius:50%; }
.template-manager-toolbar { display:flex; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line); }
.template-manager-toolbar label { display:grid; place-items:center; }
.template-manager-item { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line); }
.template-manager-preview { width:42px; height:50px; background:#e5e7eb; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.template-manager-item strong,.template-manager-item small { display:block; }
.template-manager-item strong { font-size:9px; }
.template-manager-item small { margin-top:3px; color:var(--muted); font-size:7px; }
.manager-actions { display:flex; gap:5px; }
.manager-actions button { min-height:26px; padding:0 7px; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:5px; font-size:7px; }
.manager-actions button:hover { color:var(--blue); border-color:#9ebcf2; }
.manager-actions button.danger:hover { color:var(--red); border-color:#e3a4a4; background:var(--red-soft); }
.dialog-form { display:grid; gap:7px; padding:18px; }
.dialog-form label { font-size:9px; font-weight:700; }
.dialog-form small { color:var(--muted); font-size:7px; line-height:1.45; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; padding:9px 13px; color:#fff; background:rgba(17,24,39,.94); border-radius:7px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.18s ease; font-size:9px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1180px) {
  .editor-topbar { grid-template-columns:minmax(220px,1fr) auto; }
  .stage-crumbs { display:none; }
  .editor-body { grid-template-columns:52px 250px minmax(360px,1fr) 290px; }
  .save-state { display:none; }
}
@media (max-width: 920px) {
  .editor-body { grid-template-columns:52px minmax(0,1fr); }
  .library-panel { display:none; }
  .canvas-stage { min-width:0; margin-right:300px; }
  .properties-panel { position:fixed; z-index:30; top:56px; right:0; bottom:0; width:300px; box-shadow:-14px 0 30px rgba(20,28,42,.12); }
  .topbar-actions .quiet-button { display:none; }
  .canvas-coordinate { padding-left:28px; padding-right:28px; }
  .variant-tray { min-width:0; width:100%; max-width:calc(100vw - 352px); overflow:hidden; }
  .variant-tray .variant-title, .variant-tray .variant-list { display:none; }
  .variant-tray .compact-button { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
.semantic-layer-root {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.artboard.semantic-mode > .product-photo,
.artboard.semantic-mode > .photo-wash,
.artboard.semantic-mode > .copy-block,
.artboard.semantic-mode > .retro-evidence-card,
.artboard.semantic-mode > .claim-badge,
.artboard.semantic-mode > .serial-mark,
.artboard.semantic-mode > .design-frame,
.artboard.semantic-mode > .rule-signature { display: none !important; }

.artboard.semantic-mode .semantic-layer-root { pointer-events: auto; }
.semantic-layer { position: absolute; box-sizing: border-box; cursor: pointer; }
.semantic-layer.selected { outline: 2px solid #0a84ff; outline-offset: 2px; }
.semantic-background { z-index: 0; }
.semantic-image { z-index: 2; display: grid; place-items: center; }
.semantic-image img { width: 100%; height: 100%; display: block; }
.semantic-text { z-index: 5; display: flex; align-items: flex-start; white-space: normal; overflow: hidden; }
.semantic-text[style*="text-align:center"] { justify-content: center; }
.semantic-proof { z-index: 6; padding: calc(30px * var(--semantic-scale,.28)) calc(38px * var(--semantic-scale,.28)); border-radius: calc(42px * var(--semantic-scale,.28)); background: rgba(255,255,255,.94); color: #17202a; border: max(1px,calc(3px * var(--semantic-scale,.28))) solid rgba(20,35,50,.1); box-shadow: 0 calc(24px * var(--semantic-scale,.28)) calc(54px * var(--semantic-scale,.28)) rgba(20,35,50,.12); overflow: hidden; }
.semantic-proof small { display: block; margin-bottom: calc(15px * var(--semantic-scale,.28)); color: var(--evidence-accent); font: 750 max(5px,calc(24px * var(--semantic-scale,.28)))/1.1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.semantic-proof strong { display: block; font: 700 max(7px,calc(34px * var(--semantic-scale,.28)))/1.25 Inter, sans-serif; }
.semantic-chart { display: grid; grid-template-rows: auto auto 1fr; }
.semantic-chart svg { width: 100%; height: 100%; min-height: calc(120px * var(--semantic-scale,.28)); margin-top: calc(12px * var(--semantic-scale,.28)); overflow: visible; }
.semantic-chart path { fill: none; stroke: rgba(23,32,42,.38); stroke-width: 1.2; }
.semantic-chart polyline { fill: none; stroke: var(--evidence-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.semantic-mechanism { display: grid; grid-template-rows: auto 1fr auto; padding: calc(18px * var(--semantic-scale,.28)) calc(22px * var(--semantic-scale,.28)); }
.semantic-mechanism .mechanism-head { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--semantic-scale,.28)); }
.semantic-mechanism .mechanism-head small { margin: 0; }
.semantic-mechanism .mechanism-head em { padding: calc(7px * var(--semantic-scale,.28)) calc(12px * var(--semantic-scale,.28)); border-radius: 999px; background: rgba(23,32,42,.07); color: rgba(23,32,42,.68); font: 720 max(4px,calc(16px * var(--semantic-scale,.28)))/1 Inter,sans-serif; letter-spacing: .06em; font-style: normal; }
.semantic-mechanism svg { width: 100%; height: 100%; min-height: calc(155px * var(--semantic-scale,.28)); overflow: visible; }
.semantic-mechanism .mechanism-panel rect { fill: rgba(23,32,42,.045); stroke: rgba(23,32,42,.12); stroke-width: 1.5; }
.semantic-mechanism .mechanism-panel text { fill: #17202a; font: 720 15px Inter,sans-serif; }
.semantic-mechanism .mechanism-panel .behavior-label { fill: rgba(23,32,42,.52); font-size: 10px; letter-spacing: .08em; }
.semantic-mechanism .axis { fill: none; stroke: rgba(23,32,42,.24); stroke-width: 2; }
.semantic-mechanism .response { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.semantic-mechanism .sudden { stroke: #d13f34; }
.semantic-mechanism .progressive { stroke: var(--evidence-accent); }
.semantic-mechanism circle { fill: var(--evidence-accent); stroke: #fff; stroke-width: 3; }
.semantic-mechanism .mechanism-baseline circle { fill: #d13f34; }
.semantic-mechanism .direction { fill: none; stroke: rgba(23,32,42,.38); stroke-width: 3; stroke-linecap: round; }
.semantic-mechanism .mechanism-disclaimer { display: grid; gap: calc(3px * var(--semantic-scale,.28)); color: rgba(23,32,42,.72); font: 600 max(4px,calc(13px * var(--semantic-scale,.28)))/1.2 Inter,sans-serif; }
.semantic-mechanism .mechanism-disclaimer b { color: #b42318; font-weight: 760; }
.semantic-mechanism .mechanism-disclaimer span { color: rgba(23,32,42,.58); }
.semantic-dimension-overlay { z-index: 10; pointer-events: auto; overflow: visible; }
.semantic-dimension-overlay svg { width: 100%; height: 100%; overflow: visible; }
.semantic-dimension-overlay .dimension-attachment { fill: none; stroke: rgba(255,255,255,.88); stroke-width: 3; stroke-dasharray: 8 7; }
.semantic-dimension-overlay .dimension-main { fill: none; stroke: var(--evidence-accent); stroke-width: 5; }
.semantic-dimension-overlay circle { fill: var(--evidence-accent); stroke: #fff; stroke-width: 4; }
.semantic-dimension-overlay rect { fill: rgba(12,20,28,.88); stroke: rgba(255,255,255,.7); stroke-width: 2; }
.semantic-dimension-overlay text { fill: #fff; font: 760 24px Inter,sans-serif; letter-spacing: .01em; }
.semantic-dimensions span { display: flex; align-items: center; gap: calc(14px * var(--semantic-scale,.28)); margin-top: calc(18px * var(--semantic-scale,.28)); }
.semantic-dimensions span i { height: 1px; flex: 1; background: var(--evidence-accent); position: relative; }
.semantic-dimensions span i::before { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--evidence-accent); }
.semantic-dimensions span i:last-child::before { right: 0; }
.semantic-dimensions span b { font: 720 max(6px,calc(30px * var(--semantic-scale,.28)))/1 Inter, sans-serif; white-space: nowrap; }
.semantic-detail { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; gap: calc(14px * var(--semantic-scale,.28)) calc(28px * var(--semantic-scale,.28)); }
.semantic-detail .detail-mask { grid-row: 1 / span 2; border: max(1px,calc(9px * var(--semantic-scale,.28))) solid var(--evidence-accent); border-radius: 50%; overflow: hidden; background: #e7edf2; }
.semantic-detail .detail-mask img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
.semantic-comparison { border-top: max(2px,calc(15px * var(--semantic-scale,.28))) solid #7b8794; }
.semantic-comparison.advantage { border-top-color: var(--evidence-accent); }
.semantic-badge, .semantic-proof_group { display: flex; flex-direction: column; justify-content: center; border-left: max(2px,calc(15px * var(--semantic-scale,.28))) solid var(--evidence-accent); }
.semantic-missing { z-index: 9; display: flex; flex-direction: column; justify-content: center; padding: calc(24px * var(--semantic-scale,.28)) calc(30px * var(--semantic-scale,.28)); border: 1px dashed #b42318; border-radius: calc(30px * var(--semantic-scale,.28)); color: #7a271a; background: rgba(254,243,242,.96); overflow: hidden; }
.semantic-missing small { font: 800 max(5px,calc(22px * var(--semantic-scale,.28)))/1 Inter, sans-serif; letter-spacing: .08em; }
.semantic-missing strong { margin-top: calc(12px * var(--semantic-scale,.28)); font: 650 max(6px,calc(28px * var(--semantic-scale,.28)))/1.2 Inter, sans-serif; }
.evidence-lineage .rule-row { align-items: center; }

body[data-postproduction-locked="true"] .source-replace-control { display: none; }
body[data-postproduction-locked="true"] #sourceCard { cursor: default; }
.postproduction-review-dialog { width: min(920px, calc(100vw - 40px)); }
.post-review-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-review-compare figure { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.post-review-compare figcaption { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.post-review-compare img { width: 100%; height: 260px; object-fit: contain; border-radius: 10px; background: #f4f4f2; }
.post-review-section { margin-top: 16px; }
.post-review-evidence { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.post-review-evidence img { width: 104px; height: 78px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.post-review-facts { display: grid; gap: 6px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.post-review-issues { display: flex; flex-wrap: wrap; gap: 10px 18px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.post-review-issues legend { padding: 0 6px; color: var(--muted); font-size: 12px; }
.post-review-issues label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
body.project-load-failed .editor-shell {
  visibility: hidden;
  pointer-events: none;
}

.project-load-failure[hidden] { display: none; }
.project-load-failure {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f5f5f7;
}
.project-load-failure > div {
  width: min(100%, 440px);
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .08);
}
.project-load-failure span { color: #6e6e73; font-size: 12px; font-weight: 650; }
.project-load-failure h1 { margin: 8px 0; color: #1d1d1f; font-size: 24px; letter-spacing: -.03em; }
.project-load-failure p { margin: 0; color: #6e6e73; font-size: 14px; line-height: 1.6; }
.project-load-failure nav { display: flex; gap: 8px; margin-top: 20px; }
.project-load-failure a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }