:root {
  --ink: #16191f;
  --muted: #68707d;
  --line: #e4e6eb;
  --panel: #ffffff;
  --surface: #f2f3f5;
  --purple: #6757e7;
  --purple-dark: #5344d1;
  --teal: #00a98f;
  --danger: #d94a5b;
  --shadow: 0 12px 36px rgba(25, 30, 45, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: "Inter", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(103, 87, 231, .24);
  outline-offset: 2px;
}
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.eyebrow { display: block; color: #8a92a0; font-size: 10px; font-weight: 800; letter-spacing: .14em; }

.topbar {
  height: 64px;
  display: grid;
  grid-template-columns: 300px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  color: #f8f9fb;
  background: #15171c;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: fixed;
  inset: 0 0 auto 0;
  width: 100vw;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #7769f4, #29c8b0); box-shadow: 0 8px 20px rgba(36, 193, 170, .18); }
.brand-mark svg { width: 23px; stroke: white; }
.brand strong { display: block; font-size: 15px; letter-spacing: .01em; }
.project-title-wrap { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.project-title { width: min(360px, 32vw); border: 1px solid transparent; border-radius: 7px; padding: 4px 10px; text-align: center; color: #f8f9fb; background: transparent; font-size: 13px; font-weight: 700; }
.project-title:hover, .project-title:focus { border-color: #3d414b; background: #20232a; }
.save-state { color: #888f9a; font-size: 10px; }
.save-state i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #42c995; margin-right: 4px; }
.top-actions { min-width: max-content; display: flex; align-items: center; gap: 7px; }
.top-separator { width: 1px; height: 24px; background: #353840; margin: 0 3px; }
.icon-btn, .top-btn { border: 0; cursor: pointer; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #bcc1ca; background: transparent; }
.icon-btn svg { width: 19px; }
.icon-btn:hover:not(:disabled) { background: #282b32; color: white; }
.icon-btn:disabled { opacity: .32; cursor: default; }
.top-btn { flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.top-btn.subtle { color: #d7d9df; background: #282b32; border: 1px solid #393d46; }
.top-btn.subtle:hover { background: #323640; }
.top-btn.refine { color: #bff8ec; background: #173a35; border: 1px solid #2b6f63; }
.top-btn.refine:hover:not(:disabled), .top-btn.refine.active { color: white; background: #087d68; border-color: #20b99d; }
.top-btn.refine:disabled { opacity: .35; cursor: default; }
.top-btn.restore-layers { color: #e7e3ff; background: #302a52; border: 1px solid #6559a9; }
.top-btn.restore-layers:hover { color: white; background: #514598; border-color: #8d80df; }
.top-btn.reset-all { color:#ffdec4; background:#473124; border:1px solid #936849; }
.top-btn.reset-all:hover:not(:disabled) { background:#664630; }
.top-btn.reset-all:disabled { opacity:.35; cursor:default; }
.top-actions { min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.topbar { grid-template-columns:225px minmax(100px,1fr) minmax(0,max-content); }
.reset-dialog { max-width:min(560px,90vw); }
#resetAllConfirmBtn { color:white; background:#955125; border-color:#955125; }
.element-search { display:grid; gap:6px; margin:16px 0 10px; font-size:11px; color:#657086; }
.element-search input { min-width:0; width:100%; padding:10px; border:1px solid #dce0e8; border-radius:8px; font-size:12px; }
.element-catalog-summary { display:flex; justify-content:space-between; color:#647086; font-size:11px; margin-bottom:14px; }
.element-category { margin-bottom:19px; }
.element-category h3 { margin:0 0 9px; font-size:12px; color:#343f55; }
.element-catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.element-catalog-grid button { min-width:0; height:68px; padding:6px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid #e3e7ef; border-radius:7px; background:#f8fafc; cursor:pointer; }
.element-catalog-grid button:hover { background:#eeebff; border-color:#9d92e6; }
.element-catalog-grid img { width:38px; height:32px; object-fit:contain; pointer-events:none; }
.element-catalog-grid span { width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:9px; color:#5f6c83; }
.top-btn.primary { display: flex; align-items: center; gap: 7px; color: white; background: linear-gradient(135deg, #7464ed, #6354dc); box-shadow: 0 5px 15px rgba(103, 87, 231, .28); }
.top-btn.primary:hover { background: #796af0; }
.top-btn svg { width: 16px; }

.app-shell { position: fixed; inset: 64px 0 0; display: grid; grid-template-columns: 76px 286px minmax(420px, 1fr) 286px; min-width: 1020px; }
.tool-rail { padding: 13px 8px; background: #1b1e24; border-right: 1px solid #30333b; display: flex; flex-direction: column; gap: 6px; }
.rail-item { width: 60px; min-height: 58px; border: 0; border-radius: 11px; color: #aeb4be; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 10px; font-weight: 650; }
.rail-item svg { width: 21px; height: 21px; }
.rail-item:hover { color: white; background: #282b33; }
.rail-item.active { color: white; background: linear-gradient(145deg, rgba(111,94,234,.95), rgba(88,73,211,.95)); box-shadow: 0 6px 18px rgba(96,80,220,.25); }

.left-panel, .right-panel { min-width: 0; background: var(--panel); overflow-y: auto; }
.left-panel { border-right: 1px solid var(--line); }
.right-panel { border-left: 1px solid var(--line); }
.panel-view { display: none; padding: 22px 18px; }
.panel-view.active { display: block; }
.panel-heading, .inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h2, .inspector-heading h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.02em; }
.beta, .count-badge { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 20px; color: #5c50c5; background: #eeebff; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.panel-copy { margin: 10px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.drop-zone { min-height: 176px; border: 1.5px dashed #c9ccd4; border-radius: 14px; background: #fafafb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: .18s ease; }
.panel-heading + .drop-zone, .panel-heading + .add-image-btn { margin-top: 16px; }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--purple); background: #f6f4ff; transform: translateY(-1px); }
.drop-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: var(--purple); background: #ece9ff; }
.drop-icon svg { width: 23px; }
.drop-zone strong { margin-top: 2px; font-size: 13px; }
.drop-zone > span:last-child { color: #9299a5; font-size: 10px; }
.source-card { display: grid; grid-template-columns: 48px 1fr 26px; align-items: center; gap: 10px; margin-top: 12px; padding: 8px; border: 1px solid #e5e6ea; border-radius: 11px; background: white; }
.source-card img { width: 48px; height: 42px; object-fit: cover; border-radius: 7px; background: #eceef2; }
.source-card strong, .source-card span { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.source-card strong { font-size: 11px; }
.source-card span { color: #8c939f; font-size: 9px; margin-top: 4px; }
.mini-btn { border: 0; border-radius: 6px; color: #858c97; background: transparent; cursor: pointer; font-size: 18px; }
.mini-btn:hover { color: var(--danger); background: #fff0f2; }
.field-label { display: block; margin: 18px 0 7px; color: #535a67; font-size: 11px; font-weight: 700; }
.segment-control { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 10px; background: #f0f1f3; }
.segment-control button { height: 31px; border: 0; border-radius: 7px; color: #777e8a; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.segment-control button.active { color: #332a86; background: white; box-shadow: 0 2px 8px rgba(20,25,35,.1); }
.mode-hint { margin: 7px 2px 0; color: #8a909b; font-size: 10px; line-height: 1.45; }
.analyze-btn { width: 100%; height: 43px; margin-top: 13px; border: 0; border-radius: 10px; color: white; background: linear-gradient(135deg, #695be5, #7f54dd); box-shadow: 0 8px 18px rgba(103,87,231,.22); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 800; }
.analyze-btn svg { width: 18px; }
.analyze-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.analyze-btn:disabled { opacity: .42; cursor: default; box-shadow: none; }

.element-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.add-image-btn { width: 100%; height: 42px; margin: 0 0 12px; border: 1px solid #bdb6f5; border-radius: 10px; color: #5146c7; background: #f3f1ff; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 10px; font-weight: 800; }
.add-image-btn:hover { border-color: #8f83ea; background: #ebe7ff; transform: translateY(-1px); }
.add-image-btn svg { width: 18px; }
.element-grid button { min-height: 96px; border: 1px solid #e2e4e9; border-radius: 12px; background: #fafafb; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.element-grid button:hover { border-color: #a9a1ec; background: #f7f5ff; transform: translateY(-1px); }
.element-grid b { font-size: 10px; }
.shape { width: 42px; height: 30px; display: block; background: linear-gradient(145deg, #7869eb, #5d4bd2); box-shadow: 0 5px 12px rgba(97,78,211,.2); }
.shape.rounded { border-radius: 9px; background: linear-gradient(145deg, #1fc6ac, #07927d); }
.shape.circle { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #1c92e6, #0868ba); }
.shape.line { height: 4px; margin: 13px 0; border-radius: 5px; background: #293d5c; box-shadow: none; }
.preset-block { margin-top: 22px; padding-top: 17px; border-top: 1px solid #eceef1; }
.preset-block h3 { margin: 0 0 10px; font-size: 11px; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatches button { width: 27px; height: 27px; border: 3px solid white; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #d9dce2; cursor: pointer; }
.swatches button:hover { transform: scale(1.1); }

.layer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 15px 0 11px; }
.layer-actions button { height: 29px; border: 1px solid #dfe1e6; border-radius: 7px; background: #f8f8fa; cursor: pointer; font-size: 9px; }
.layer-actions button:hover:not(:disabled) { border-color: #a9a1ec; color: #5547cd; background: #f4f2ff; }
.layer-actions button.danger:hover:not(:disabled) { color: var(--danger); border-color: #efb7bf; background: #fff2f3; }
.layer-actions button:disabled { opacity: .35; cursor: default; }
.layer-import-shortcut { width: 100%; height: 34px; margin: 0 0 11px; border: 1px dashed #aaa2ed; border-radius: 8px; color: #574acb; background: #f5f3ff; cursor: pointer; font-size: 10px; font-weight: 800; }
.layer-import-shortcut:hover { color: white; border-style: solid; border-color: #6757e7; background: #6757e7; }
.layer-list { display: flex; flex-direction: column; gap: 6px; }
.layer-level-heading { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 27px; margin-top: 4px; padding: 0 8px; border: 1px solid #e2e0f5; border-radius: 7px; color: #4f46b8; background: rgba(246,245,255,.96); backdrop-filter: blur(5px); }
.layer-level-heading strong { font-size: 9px; }
.layer-level-heading span { color: #8984ba; font-size: 8px; }
.empty-mini { padding: 24px 8px; text-align: center; color: #9ba1ab; font-size: 10px; }
.layer-row { display: grid; grid-template-columns: 27px 36px 1fr 25px; align-items: center; gap: 7px; min-height: 50px; padding: 5px 6px; border: 1px solid transparent; border-radius: 9px; background: #fafafb; cursor: pointer; }
.layer-row:hover { background: #f5f4fb; }
.layer-row.selected { border-color: #aea6ef; background: #f0edff; }
.layer-row.group-owner { border-left: 3px solid #0ba989; background: linear-gradient(90deg, #e9fbf6 0, #fafafb 34%); }
.layer-row.group-child { width: calc(100% - 14px); margin-left: 14px; position: relative; background: #fcfdfd; }
.layer-row.group-child::before { content: ""; position: absolute; left: -10px; top: -8px; bottom: 50%; width: 8px; border-left: 1px solid #9ddfd1; border-bottom: 1px solid #9ddfd1; border-radius: 0 0 0 6px; pointer-events: none; }
.visibility-btn, .lock-btn { width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: #8a919c; padding: 5px; }
.visibility-btn svg, .lock-btn svg { width: 15px; }
.visibility-btn:hover, .lock-btn:hover { color: #4e42c2; background: white; }
.layer-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: contain; background: repeating-conic-gradient(#eff0f3 0 25%, white 0 50%) 50% / 10px 10px; border: 1px solid #e2e3e7; }
.layer-thumb.shape-thumb, .layer-thumb.text-thumb { display: grid; place-items: center; color: white; background: var(--thumb-color, #6757e7); font-size: 14px; font-weight: 800; }
.layer-thumb.text-thumb { color: #3e4652; background: white; }
.layer-info { min-width: 0; }
.layer-info strong, .layer-info span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-info .layer-hierarchy { display: inline-block; width: auto; margin: 0 0 2px; padding: 1px 5px; border-radius: 999px; color: #5548cf; background: #ebe8ff; font-size: 7px; font-weight: 800; letter-spacing: .02em; }
.layer-info strong { font-size: 10px; }
.layer-info span { margin-top: 3px; color: #969ca6; font-size: 8px; text-transform: uppercase; }
.layer-row.is-hidden { opacity: .52; }

.workspace { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) 42px; background: #e8e9ec; position: relative; }
.context-toolbar { display: flex; align-items: center; padding: 7px 12px; background: linear-gradient(180deg, #fff, #fbfbfd); border-bottom: 1px solid #dddfe5; box-shadow: 0 2px 9px rgba(24,30,42,.045); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.context-toolbar::-webkit-scrollbar { display: none; }
.tool-placeholder { color: #979da7; font-size: 11px; }
.selection-tools { min-width: max-content; display: flex; align-items: center; gap: 6px; }
.selection-tools.hidden { display: none; }
.selection-mode-group { display: flex; align-items: center; gap: 4px; }
.selection-tools button { height: 30px; padding: 0 9px; border: 1px solid #dfe1e6; border-radius: 7px; color: #454c58; background: #fafafb; cursor: pointer; font-size: 10px; font-weight: 700; }
.selection-tools button:hover:not(:disabled) { border-color: #a9a1ec; background: #f5f3ff; }
.selection-tools button.active { color: #5548cf; border-color: #b8aff8; background: #eeebff; }
.selection-tools button.positive.active { color: #087861; border-color: #8bd7c5; background: #e7f8f3; }
.selection-tools button.negative.active { color: #bd3f51; border-color: #efadb7; background: #fff0f2; }
.selection-tools button:disabled { opacity: .38; cursor: default; }
.selection-tools .selection-apply { padding: 0 13px; color: white; border-color: #6757e7; background: #6757e7; }
.selection-tools .selection-apply:hover:not(:disabled) { color: white; border-color: #5545d2; background: #5545d2; }
.selection-divider { width: 1px; height: 23px; margin: 0 2px; background: #e0e2e6; }
#candidateStatus { min-width: 78px; color: #6f7682; font-size: 9px; text-align: center; }
.tool-group { display: none; align-items: center; gap: 6px; min-width: 0; width: 100%; flex-wrap: wrap; }
.tool-group.active { display: flex; }
.tool-group button, .tool-group select, .tool-group input[type=number] { height: 32px; border: 1px solid #dfe1e7; border-radius: 8px; color: #3f4652; background: #f8f9fb; font-size: 10px; line-height: 1; white-space: nowrap; }
.tool-group button { padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tool-group button:hover { border-color: #aba4e9; color: #5548d3; background: #f2f0ff; box-shadow: 0 2px 7px rgba(86,71,205,.09); }
.tool-group button:disabled { color: #aeb3bc; cursor: not-allowed; opacity: .58; }
.image-tools button.active, .text-tools button.active { color: #5a4ee5; background: #ece9ff; border-color: #c9c2ff; }
.text-tools button.active { color: #5a4ee5; background: #ece9ff; border-color: #c9c2ff; }
.curve-text-btn { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.curve-text-btn span { width: auto; height: auto; margin: 0; background: none; font-size: 15px; line-height: 1; }
.curve-bend-field input[type=range] { width: 76px; }
.curve-bend-field output { min-width: 20px; color: #5549d8; font-weight: 700; text-align: right; }
.compact-field input[type=number] { width: 52px; }
.compact-field input[type=range] { width: 62px; }
#imageShape { min-width: 92px; }
#imageFit { min-width: 78px; }
#textEffect { min-width: 74px; }
#effectColor { flex: 0 0 auto; }
#brushSizeField input[type=range] { width: 68px; }
#brushSizeField output { min-width: 38px; color: #5549d8; font-weight: 700; text-align: right; white-space: nowrap; }
.tool-group > span { width: 1px; min-width: 1px; height: 24px; background: #dedfe5; margin: 0 3px; }
.tool-group label { display: flex; align-items: center; gap: 6px; color: #69717d; font-size: 10px; white-space: nowrap; }
.tool-group input[type=range] { width: 90px; accent-color: var(--purple); }
.tool-group select { min-width: 116px; padding: 0 24px 0 9px; cursor: pointer; }
.tool-group input[type=number] { width: 58px; padding: 0 6px; }
.tool-group input[type=color] { width: 32px; min-width: 32px; height: 32px; border: 1px solid #dfe1e6; border-radius: 8px; padding: 4px; background: white; cursor: pointer; }
.canvas-viewport { min-height: 0; overflow: auto; position: relative; background-color: #e7e8eb; background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%); background-size: 32px 32px; background-position: 0 0, 0 16px, 16px -16px, -16px 0; }
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 35px; overflow: auto; }
.empty-art { width: 146px; height: 112px; position: relative; margin-bottom: 25px; }
.art-layer { position: absolute; left: 23px; width: 100px; height: 64px; border-radius: 14px; transform: rotate(-8deg) skewX(-7deg); box-shadow: 0 16px 22px rgba(54,46,133,.16); }
.art-layer.l1 { top: 36px; background: linear-gradient(135deg, #bcb5ff, #7769e8); }
.art-layer.l2 { top: 18px; left: 31px; background: linear-gradient(135deg, #92eadb, #16b49a); transform: rotate(3deg) skewX(-7deg); }
.art-layer.l3 { top: 0; left: 18px; background: linear-gradient(135deg, #fff, #e9e7ff); border: 1px solid #d8d4fa; transform: rotate(-3deg) skewX(-7deg); }
.empty-state h1 { margin: 7px 0 12px; font-size: clamp(27px, 3vw, 42px); line-height: 1.13; letter-spacing: -.045em; }
.empty-state h1 em { color: var(--purple); font-style: normal; }
.empty-state > p { max-width: 500px; margin: 0 0 20px; color: #69717d; font-size: 13px; line-height: 1.7; }
.empty-state > button { height: 42px; padding: 0 22px; border: 0; border-radius: 10px; color: white; background: #6355dc; box-shadow: 0 8px 20px rgba(99,85,220,.28); cursor: pointer; font-size: 12px; font-weight: 800; }
.empty-state > button:hover { background: #5748d0; transform: translateY(-1px); }
.feature-pills { display: flex; gap: 7px; margin-top: 17px; }
.feature-pills span { padding: 6px 10px; border: 1px solid #d5d7dc; border-radius: 20px; color: #7d8490; background: rgba(255,255,255,.5); font-size: 9px; }
.stage-wrap { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 70px; }
.stage { position: relative; flex: 0 0 auto; background: white; box-shadow: 0 12px 42px rgba(29,34,48,.22); transform-origin: center; overflow: visible; user-select: none; }
.stage.precise-extract-active, .stage.precise-extract-active * { cursor: crosshair !important; }
.stage.precise-extract-active .selection-handle,
.stage.precise-extract-active .rotation-handle { display: none; }
.extract-selection { position: absolute; z-index: 999; border: 2px solid #8b5cf6; border-radius: 3px; background: rgba(124, 92, 246, .12); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 3px 14px rgba(76,56,180,.22); pointer-events: none; }
.extract-selection::after { content: "智能范围"; position: absolute; left: -2px; top: -23px; padding: 3px 7px; border-radius: 5px 5px 0 0; color: white; background: #7257e8; font-size: 9px; font-weight: 800; white-space: nowrap; }
.selection-mask-preview { position: absolute; inset: 0; z-index: 940; width: 100%; height: 100%; object-fit: fill; opacity: .48; pointer-events: none; mix-blend-mode: multiply; }
.selection-point { position: absolute; z-index: 965; width: 15px; height: 15px; border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.48); pointer-events: none; transform: translate(-50%, -50%); }
.selection-point.positive { background: #10a37f; }
.selection-point.negative { background: #e14d62; }
.selection-point::before, .selection-point::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.5px; border-radius: 2px; background: white; transform: translate(-50%, -50%); }
.selection-point.positive::after { transform: translate(-50%, -50%) rotate(90deg); }
.selection-lasso { position: absolute; inset: 0; z-index: 970; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.selection-lasso polygon { fill: rgba(103,87,231,.18); stroke: #6757e7; stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.stage.selection-busy::after { content: "正在识别候选对象…"; position: absolute; z-index: 1250; left: 50%; top: 16px; padding: 7px 12px; color: white; border-radius: 18px; background: rgba(35,28,91,.88); box-shadow: 0 5px 16px rgba(0,0,0,.22); font-size: 10px; font-weight: 700; transform: translateX(-50%); pointer-events: none; }
.canvas-layer { position: absolute; transform-origin: center; touch-action: none; }
.canvas-layer > img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.ring-hit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ring-hit-target { pointer-events: stroke; cursor: move; }
.ring-hit-layer .selection-handle, .ring-hit-layer .rotation-handle { pointer-events: auto; }
.image-selection-overlay { pointer-events: none; }
.nested-capsule-row { margin-left: calc(var(--nest-depth, 0) * 12px); border-left: 3px solid #66bfb0; }
.image-selection-overlay .selection-handle, .image-selection-overlay .rotation-handle { pointer-events: auto; }
.ring-size-handle { z-index: 3; }
.ring-size-n { left: 50%; top: -4px; right: auto; bottom: auto; cursor: ns-resize; transform: translateX(-50%); }
.ring-size-s { left: 50%; bottom: -4px; right: auto; top: auto; cursor: ns-resize; transform: translateX(-50%); }
.ring-size-e { right: -4px; top: 50%; bottom: auto; left: auto; cursor: ew-resize; transform: translateY(-50%); }
.ring-size-w { left: -4px; top: 50%; bottom: auto; right: auto; cursor: ew-resize; transform: translateY(-50%); }
.stage.eraser-active .canvas-layer.layer-image.selected:not(.locked) { cursor: none; }
.stage.eraser-active .canvas-layer.layer-image.selected .selection-handle,
.stage.eraser-active .canvas-layer.layer-image.selected .rotation-handle { display: none; }
.brush-cursor { position: absolute; z-index: 1200; display: none; border: 1.5px solid rgba(255,255,255,.98); border-radius: 50%; background: rgba(239,68,68,.13); box-shadow: 0 0 0 1px rgba(18,22,30,.88), 0 2px 8px rgba(0,0,0,.22); pointer-events: none; transform: translate(-50%, -50%); }
.brush-cursor.visible { display: block; }
.brush-cursor.restore { background: rgba(16,185,129,.15); box-shadow: 0 0 0 1px #087f65, 0 2px 8px rgba(0,0,0,.18); }
.brush-cursor.paint { opacity: .65; }
.result-download { color: #5a4ed2; font-size: 10px; text-decoration: underline; margin-left: 6px; white-space: nowrap; }
.stage.color-pick-active, .stage.color-pick-active * { cursor: crosshair !important; }
.canvas-layer > img.paint-overlay { position: absolute; inset: 0; }
.brush-cursor::before, .brush-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(25,30,40,.72); transform: translate(-50%, -50%); }
.brush-cursor::before { width: 5px; height: 1px; }
.brush-cursor::after { width: 1px; height: 5px; }
.canvas-layer.layer-text { padding: 2px 5px; display: flex; align-items: center; white-space: pre-wrap; overflow: hidden; line-height: 1.2; cursor: move; }
.canvas-layer.layer-text.single-line { white-space: nowrap; line-height: 1.05; }
.canvas-layer.layer-text.svg-text { padding: 0; overflow: visible; }
.canvas-layer.layer-text.source-mode { padding: 0; }
.canvas-layer.layer-text.source-mode > img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.canvas-layer.layer-shape { cursor: move; }
.canvas-layer.selected:not(.locked)::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid #6757e7; pointer-events: none; }
.canvas-layer.selected.locked::after { content: ""; position: absolute; inset: -2px; border: 1.5px dashed #9a91df; pointer-events: none; }
.selection-handle { position: absolute; z-index: 3; width: 11px; height: 11px; right: -7px; bottom: -7px; border: 2px solid white; border-radius: 50%; background: #6757e7; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: nwse-resize; }
.rotation-handle { position: absolute; z-index: 3; width: 13px; height: 13px; top: -29px; left: calc(50% - 6px); border: 2px solid white; border-radius: 50%; background: #6757e7; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: grab; }
.rotation-handle::after { content: ""; width: 1px; height: 14px; position: absolute; left: 4px; top: 10px; background: #6757e7; }
.canvas-layer.locked .selection-handle, .canvas-layer.locked .rotation-handle { display: none; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background: white; border-top: 1px solid var(--line); }
.status-chip { display: flex; align-items: center; gap: 7px; color: #737b86; font-size: 9px; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: #32bf8e; box-shadow: 0 0 0 4px rgba(50,191,142,.12); }
.status-chip i.busy { background: #f0aa2a; box-shadow: 0 0 0 4px rgba(240,170,42,.13); animation: pulse 1s infinite; }
.status-chip i.error { background: #e55363; box-shadow: 0 0 0 4px rgba(229,83,99,.12); }
.zoom-controls { display: flex; align-items: center; gap: 7px; }
.zoom-controls button { height: 27px; min-width: 27px; border: 1px solid #e1e3e7; border-radius: 7px; background: #fafafb; cursor: pointer; }
.zoom-controls input { width: 96px; accent-color: var(--purple); }
.zoom-controls span { width: 34px; color: #737a85; font-size: 9px; text-align: right; }
.zoom-controls .zoom-value { padding: 0 8px; color: #5b50c9; font-size: 9px; }

.right-panel { padding: 22px 18px; }
.inspector-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #949aa5; text-align: center; }
.inspector-empty svg { width: 55px; color: #c7cad1; }
.inspector-empty strong { color: #737a85; font-size: 11px; margin-top: 13px; }
.inspector-empty span { max-width: 165px; margin-top: 5px; font-size: 9px; line-height: 1.5; }
.selected-summary { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; margin-top: 15px; padding: 10px; border: 1px solid #e5e6ea; border-radius: 11px; background: #fafafb; }
.selected-icon { width: 42px; height: 42px; border-radius: 8px; background: repeating-conic-gradient(#eceef1 0 25%, white 0 50%) 50% / 12px 12px; border: 1px solid #dedfe4; background-size: cover; background-position: center; }
.selected-summary input { width: 100%; border: 0; padding: 0; background: transparent; font-size: 11px; font-weight: 750; }
.selected-summary small { display: block; margin-top: 3px; color: #9097a2; font-size: 8px; text-transform: uppercase; }
.form-section { padding: 17px 0; border-bottom: 1px solid #eceef1; }
.form-section h3 { margin: 0 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.field-grid { display: grid; gap: 7px; }
.field-grid.four { grid-template-columns: 1fr 1fr; }
.field-grid label { display: grid; grid-template-columns: 18px 1fr; align-items: center; height: 31px; padding: 0 7px; border: 1px solid #e1e3e7; border-radius: 7px; background: #fafafb; }
.field-grid label span { color: #969ca6; font-size: 8px; font-weight: 800; }
.field-grid input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; }
.full-field { display: block; margin-top: 8px; }
.full-field > span, .textarea-field > span { display: block; margin-bottom: 6px; color: #747c87; font-size: 9px; }
.full-field > div { height: 32px; display: flex; align-items: center; padding: 0 8px; border: 1px solid #e1e3e7; border-radius: 7px; background: #fafafb; }
.full-field input[type=number] { width: 100%; border: 0; background: transparent; outline: 0; font-size: 10px; }
.full-field input[type=color] { width: 28px; height: 25px; border: 0; padding: 1px; background: transparent; }
.full-field b { color: #8b929c; font-size: 9px; font-weight: 500; }
.range-field { display: grid; grid-template-columns: 52px 1fr 35px; align-items: center; gap: 7px; color: #747c87; font-size: 9px; }
.range-field input { width: 100%; accent-color: var(--purple); }
.range-field output { text-align: right; color: #4e5560; }
.textarea-field textarea { width: 100%; min-height: 110px; max-height: 400px; resize: vertical; border: 1px solid #dfe1e6; border-radius: 8px; padding: 8px; color: #303640; background: #fafafb; font-size: 13px; line-height: 1.6; }
.text-edit-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; font-size: 10px; color: #69717d; }
.text-edit-options label { display: inline-flex; align-items: center; gap: 4px; }
.text-edit-options select, .text-edit-options button { padding: 5px 7px; border: 1px solid #dfe1e6; border-radius: 6px; background: #f6f5ff; color: #574acb; cursor: pointer; }
.text-convert-btn { width: 100%; margin-top: 7px; border: 1px solid #cbc5ff; border-radius: 8px; padding: 7px; color: #4436ac; background: #f2f0ff; cursor: pointer; font-size: 10px; font-weight: 700; }
.text-source-hint { display: block; margin-top: 6px; color: #8a909b; font-size: 9px; line-height: 1.45; }
.toggles { border-bottom: 0; }
.toggles label { min-height: 36px; display: flex; align-items: center; justify-content: space-between; color: #535a65; font-size: 10px; }
.toggles label > span { display: flex; align-items: center; gap: 7px; }
.toggles svg { width: 16px; color: #858c97; }
input[role=switch] { appearance: none; width: 34px; height: 19px; border-radius: 20px; background: #cbd0d8; cursor: pointer; position: relative; transition: .15s; }
input[role=switch]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .15s; }
input[role=switch]:checked { background: var(--purple); }
input[role=switch]:checked::after { transform: translateX(15px); }

.analysis-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; background: rgba(14,16,21,.72); backdrop-filter: blur(9px); }
.analysis-card { width: min(720px, 90vw); display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; border-radius: 20px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.scan-visual { min-height: 380px; position: relative; overflow: hidden; background: #121722; }
.scan-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; opacity: .82; }
.scan-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(103,87,231,.2), transparent 40%, rgba(0,197,168,.14)); mix-blend-mode: screen; }
.scan-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; }
.scan-line { position: absolute; z-index: 2; left: 0; right: 0; height: 2px; background: #54efd0; box-shadow: 0 0 18px #21d9bb, 0 0 45px rgba(33,217,187,.6); animation: scan 2.2s ease-in-out infinite; }
.analysis-info { padding: 42px 36px; }
.analysis-info h2 { margin: 7px 0 22px; font-size: 23px; line-height: 1.25; }
.progress-track { height: 5px; overflow: hidden; border-radius: 6px; background: #e9eaf0; }
.progress-track span { height: 100%; width: 8%; display: block; border-radius: 6px; background: linear-gradient(90deg, #6757e7, #17bfa5); transition: width .45s ease; }
.analysis-info ol { margin: 23px 0 0; padding: 0; list-style: none; }
.analysis-info li { margin: 0 0 14px; padding-left: 25px; position: relative; color: #9ba1aa; font-size: 11px; }
.analysis-info li::before { content: ""; width: 10px; height: 10px; position: absolute; left: 2px; top: 1px; border: 1.5px solid #c9ccd2; border-radius: 50%; }
.analysis-info li.active { color: #4237ad; font-weight: 750; }
.analysis-info li.active::before { border-color: #6757e7; box-shadow: inset 0 0 0 3px white; background: #6757e7; }
.analysis-info li.done { color: #3f806f; }
.analysis-info li.done::before { border-color: #14a98e; background: #14a98e; }
.toast-region { position: fixed; z-index: 200; right: 18px; bottom: 54px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { width: min(340px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: white; background: #252931; box-shadow: var(--shadow); font-size: 11px; line-height: 1.5; animation: toastIn .2s ease; }
.toast.success { border-left: 4px solid #31c69b; }
.toast.error { border-left: 4px solid #ef6171; }

@keyframes scan { 0%, 100% { top: 8%; opacity: .45; } 50% { top: 91%; opacity: 1; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 70px 250px minmax(390px, 1fr) 250px; }
  .topbar { grid-template-columns: 210px minmax(80px,1fr) minmax(0,max-content); }
  .top-btn.subtle { display: inline-flex; padding: 0 8px; font-size: 10px; }
  .stage-wrap { padding: 48px; }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(145px, 1fr) minmax(0,max-content); gap: 10px; padding: 0 12px; }
  .project-title-wrap, .top-separator { display: none; }
  .top-actions { justify-self: end; gap: 5px; }
  .top-btn { padding: 0 10px; }
}

@media (max-height: 720px) {
  .drop-zone { min-height: 130px; }
  .analysis-card { max-height: 90vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.batch-panel { margin-top:16px; border:1px solid #dfdbea; border-radius:12px; padding:12px; background:#faf9ff; }
.parallel-control { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; font-size:12px; font-weight:700; color:#555c70; }
.parallel-control select { border:1px solid #ded9ed; border-radius:8px; padding:7px 10px; background:#fff; color:#5143ab; }
.background-tasks { margin-top:auto; }
.background-tasks small { font-size:9px; max-width:100%; overflow-wrap:anywhere; }
.background-tasks.running { color:#5143ab; background:#f0edff; }
.background-tasks.needs-attention { color:#9a4c11; background:#fff3e5; }
.background-tasks.running svg { stroke:#6757e7; }
.batch-item-progress { margin:7px 0; }
.batch-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.batch-heading h3 { margin:0; font-size:13px; }
.batch-heading span,.batch-summary { font-size:11px; color:#626b7d; }
.batch-summary { line-height:1.6; margin:8px 0; }
.batch-track { height:6px; border-radius:8px; overflow:hidden; background:#e6e4ef; }
.batch-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,#7054ee,#17bba9); }
.batch-warning { padding:8px; color:#9a4c11; background:#fff3e5; border-radius:6px; font-size:11px; line-height:1.5; }
.batch-list { display:grid; gap:8px; margin-top:12px; max-height:310px; overflow:auto; }
.batch-item { border:1px solid #e4e2ed; border-radius:8px; padding:8px; background:white; }
.batch-item strong { display:block; overflow-wrap:anywhere; font-size:11px; }
.batch-item p { margin:5px 0; font-size:10px; color:#667085; overflow-wrap:anywhere; line-height:1.5; }
.batch-item[data-status="failed"] { border-color:#e8b6ae; }
.batch-item[data-status="unsaved"] { border-color:#eab369; }
.batch-item[data-status="completed"] { border-color:#9dd4c5; }
.batch-item-actions,.batch-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.batch-panel button { border:1px solid #d9d4ee; border-radius:7px; padding:6px 8px; background:#fff; color:#5042a0; font-size:10px; cursor:pointer; }
.batch-panel button:disabled { opacity:.45; cursor:default; }
.batch-panel small { display:block; margin-top:9px; color:#758094; font-size:10px; line-height:1.6; }
.draft-row { display:flex; align-items:center; gap:8px; }
.draft-row > button:first-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.draft-row .draft-delete { flex-shrink:0; color:#ad4c36; background:#fff5f1; }
#draftDeleteConfirmBtn { color:white; background:#ac4f36; }