/* The listing page embeds this exact main-tool workbench.  No duplicate crop
   implementation or separate state is introduced for the listing workflow. */
body.embedded-main-crop { min-height: 0; height: auto; overflow: visible; background: transparent; }
body.embedded-main-crop .announcement-banner,
body.embedded-main-crop .rail,
body.embedded-main-crop .project-drawer,
body.embedded-main-crop .materials-drawer,
body.embedded-main-crop .tool-page,
body.embedded-main-crop .history-drawer,
body.embedded-main-crop .workspace-header,
body.embedded-main-crop #result-toolbar,
body.embedded-main-crop #panel-resizer,
body.embedded-main-crop .chat-panel,
body.embedded-main-crop #crop-workspace,
body.embedded-main-crop #slice-workspace,
body.embedded-main-crop #empty-state,
body.embedded-main-crop .workspace-scroll-controls { display: none !important; }
body.embedded-main-crop .app-shell { display: block; min-height: 0; }
body.embedded-main-crop .workspace { min-width: 0; padding: 0; }
body.embedded-main-crop .detail-stage.tool-workbench-stage { width: 100%; max-width: none; margin: 0; padding: 0; }
body.embedded-main-crop .main-pending-section { display: none; }
body.embedded-main-crop [data-main-preset-section="1200"],
body.embedded-main-crop [data-main-preset-section="transparent"] { display: none; }
body.embedded-main-crop .main-crop-section { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.embedded-main-crop .main-crop-section > header { min-height: 38px; padding: 0 2px 8px; border: 0; background: transparent; }
body.embedded-main-crop .main-crop-section > header strong { font-size: 13px; }
body.embedded-main-crop .main-crop-section-actions small,
body.embedded-main-crop .main-inline-crop-card > header,
body.embedded-main-crop .main-crop-section-actions,
body.embedded-main-crop .main-inline-crop-card > footer,
body.embedded-main-crop [data-main-crop-copy],
body.embedded-main-crop [data-main-crop-duplicate],
body.embedded-main-crop [data-main-crop-unclassify],
body.embedded-main-crop .main-inline-crop-card > footer a { display: none !important; }
body.embedded-main-crop .main-inline-crop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 0; }
body.embedded-main-crop .main-inline-crop-card { border-color: #e1e3e6; border-radius: 5px; }
body.embedded-main-crop .main-inline-crop-card > footer { min-height: 34px; justify-content: flex-end; padding: 4px 5px; background: #fff; }
body.embedded-main-crop .main-inline-crop-card > footer > div { width: 100%; justify-content: flex-end; }
body.embedded-main-crop .main-inline-crop-card > footer [data-main-crop-save] { min-height: 24px; padding: 0 8px; }
body.embedded-main-crop .main-inline-crop-frame .main-tool-logo-preview { pointer-events: none; }
body.embedded-main-crop .main-inline-crop-frame .main-tool-logo-resize,
body.embedded-main-crop .main-inline-crop-frame .main-tool-logo-remove { display: none; }
/* The listing view is read-only, but its thumbnails should still open the
   full-screen image viewer when clicked. */
body.embedded-main-crop .main-inline-crop-frame img[data-enlargeable] { pointer-events: auto; }

:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-soft: #f7f7f8;
  --text: #17181a;
  --muted: #777b82;
  --line: #e4e6e9;
  --primary: #222326;
  --primary-text: #ffffff;
  --accent: #725cff;
  --accent-soft: #efecff;
  --success: #18794e;
  --danger: #c93636;
  --chat-width: 430px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; background: var(--bg); color: var(--text); }
body.materials-page-open { height: 100vh; overflow: hidden; }
body.tool-page-open { height: 100vh; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 58px minmax(420px, 1fr) 8px var(--chat-width); }
.announcement-banner { display: flex; justify-content: center; padding: 8px 18px; border-bottom: 1px solid #ecd69e; background: #fff8e7; color: #6a4a00; }
.announcement-banner > div { width: min(1280px, 100%); display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.announcement-banner strong { flex: 0 0 auto; font-size: 12px; }
.announcement-banner p { margin: 0; font-size: 12px; line-height: 1.5; text-align: center; }
.rail { position: sticky; top: 0; height: 100vh; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border-right: 1px solid var(--line); z-index: 50; }
.logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--primary); color: var(--primary-text); font-weight: 700; margin-bottom: 8px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); text-decoration: none; }
.icon-button:hover, .icon-button.active { background: var(--panel-soft); color: var(--text); }
.detail-mode-menu-wrap { position: relative; }
.detail-mode-menu { position: absolute; z-index: 1; top: 0; left: 100%; width: 118px; display: grid; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: 0 10px 26px rgba(27,31,38,.14); opacity: 0; pointer-events: none; transform: translateX(-4px); visibility: hidden; transition: opacity .14s, transform .14s, visibility .14s; }
.detail-mode-menu-wrap:hover .detail-mode-menu, .detail-mode-menu-wrap:focus-within .detail-mode-menu { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
.detail-mode-menu button { min-height: 31px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: 12px; text-align: left; white-space: nowrap; }
.detail-mode-menu button:hover, .detail-mode-menu button:focus-visible, .detail-mode-menu button.active { background: var(--primary); color: var(--primary-text); outline: 0; }
.rail-divider { width: 26px; height: 1px; margin: 2px 0; background: var(--line); }
.tool-entry { font-size: 13px; font-weight: 750; }
.tool-page { position: fixed; z-index: 40; inset: 0 0 0 58px; display: grid; grid-template-rows: 70px minmax(0, 1fr); overflow: hidden; background: #f5f6f8; }
.tool-page-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tool-page-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.tool-page-heading > div { min-width: 0; display: grid; gap: 3px; }
.tool-page-heading strong { font-size: 17px; }
.tool-page-mode { width: 112px; height: 31px; padding: 0 27px 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; }
.tool-page-heading small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool-page-back { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 19px; }
.tool-page-back:hover { border-color: #c5c8ce; background: var(--panel-soft); }
.tool-page-actions { display: flex; align-items: center; gap: 8px; }
.tool-page-content { min-width: 0; overflow-y: auto; padding: 26px 28px 48px; }
.tool-page-content > * { width: min(1260px, 100%); margin-right: auto; margin-left: auto; }
.tool-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.tool-intro h1 { margin: 0; font-size: 24px; font-weight: 700; }
.tool-intro p { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.tool-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.tool-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.tool-section-head strong { font-size: 15px; }
.tool-section-head span { color: var(--muted); font-size: 12px; }
.tool-empty { min-height: 158px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 1px dashed #cfd3d9; border-radius: 8px; background: rgba(255,255,255,.68); color: var(--muted); font-size: 13px; text-align: center; }
.tool-empty strong { color: var(--text); font-size: 14px; }
.tool-empty .button { margin-top: 4px; }
.tool-source-grid, .tool-output-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tool-source-card, .tool-output-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tool-source-card.selected { border-color: #1d8a62; box-shadow: 0 0 0 2px rgba(29,138,98,.14); }
.tool-source-card img, .tool-output-card img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: contain; background: #eef0f2; }
.tool-source-card button, .tool-output-card a { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border: 0; border-top: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 11px; text-decoration: none; }
.tool-source-card button:hover, .tool-output-card a:hover { background: var(--panel-soft); }
.tool-source-name { display: block; overflow: hidden; padding: 7px 8px 0; color: var(--text); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tool-source-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px 7px; color: var(--muted); font-size: 10px; }
.tool-current-image { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 22px; align-items: start; }
.tool-current-preview { position: relative; min-height: 260px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tool-current-preview img { width: 100%; max-height: 420px; display: block; object-fit: contain; }
.tool-current-preview span { color: var(--muted); font-size: 13px; }
.tool-current-controls { display: grid; align-content: start; gap: 13px; padding-top: 5px; }
.tool-current-controls h2 { margin: 0; font-size: 17px; }
.tool-current-controls p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tool-preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-preset-button { min-width: 92px; min-height: 46px; display: grid; gap: 2px; place-content: center; padding: 5px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); text-align: center; }
.tool-preset-button strong { font-size: 13px; }
.tool-preset-button small { color: var(--muted); font-size: 10px; }
.tool-preset-button:hover { border-color: #4e9c7b; background: #f0faf6; }
.tool-project-images { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 10px; }
.tool-project-image { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.tool-project-image img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #eef0f2; }
.tool-project-image button { width: 100%; min-height: 31px; padding: 0 7px; border: 0; border-top: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 11px; }
.tool-project-image button:hover { background: var(--panel-soft); }
.color-tool-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 28px; align-items: start; }
.color-garment-panel { display: grid; gap: 12px; }
.color-garment-stage { min-height: 310px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #c8ccd3; border-radius: 8px; background: var(--panel); color: var(--muted); text-align: center; }
.color-garment-stage img { width: 100%; max-height: 460px; display: block; object-fit: contain; }
.color-garment-stage button { margin-top: 10px; }
.color-card-list { display: grid; gap: 8px; }
.color-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) 100px auto; align-items: center; gap: 9px; min-height: 54px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.color-card.disabled { opacity: .54; }
.color-card-swatch { width: 30px; height: 30px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; background: #d9d9d9; }
.color-card-swatch img { width: 100%; height: 100%; display: block; object-fit: cover; }
.color-card input[type="text"] { min-width: 0; height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 12px; }
.color-card input[type="color"] { width: 32px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.color-card-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.color-card-actions { display: flex; align-items: center; gap: 5px; }
.color-card-actions button { min-width: 33px; height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 11px; }
.color-card-actions button:hover { border-color: #c4c8cf; color: var(--text); }
.color-output-card .color-output-top { display: flex; align-items: center; gap: 6px; padding: 7px 8px 0; }
.color-output-dot { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; }
.size-tool-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(360px, 1.1fr); gap: 28px; align-items: start; }
.size-editor { display: grid; gap: 12px; }
.size-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.size-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.size-field input, .size-field select { height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.size-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.size-table { min-width: 500px; width: 100%; border-collapse: collapse; }
.size-table th, .size-table td { min-width: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.size-table th:last-child, .size-table td:last-child { border-right: 0; }
.size-table tr:last-child td { border-bottom: 0; }
.size-table input { width: 100%; height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--text); text-align: center; font-size: 12px; }
.size-table button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--danger); }
.size-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.size-editor-actions > div { display: flex; gap: 7px; }
.size-preview-wrap { position: sticky; top: 16px; min-height: 340px; display: grid; place-items: center; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.size-preview { width: min(100%, 650px); overflow: hidden; border: 1px solid #d9dce1; background: #fff; }
.size-preview.size-blue-grid { border-color: #aec6e9; background: #fafdff; }
.size-preview.size-black-gold { border-color: #ad9264; background: #fffdf9; }
.size-preview-title { padding: 25px 16px 6px; color: #1f2024; font-size: 25px; font-weight: 750; text-align: center; }
.size-preview.size-blue-grid .size-preview-title { color: #1d4f91; }
.size-preview.size-black-gold .size-preview-title { color: #25211b; }
.size-preview-subtitle { padding: 0 16px 18px; color: var(--muted); font-size: 11px; text-align: center; }
.size-preview table { width: calc(100% - 32px); margin: 0 16px 24px; border-collapse: collapse; table-layout: fixed; }
.size-preview th, .size-preview td { min-width: 0; height: 36px; padding: 4px; border: 1px solid #d9dce1; color: #272a2f; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.size-preview th { background: #f2f3f5; font-weight: 700; }
.size-preview.size-blue-grid th { background: #e7f0ff; border-color: #aec6e9; color: #1a3158; }
.size-preview.size-blue-grid td { border-color: #aec6e9; }
.size-preview.size-black-gold th { border-color: #ad9264; background: #3a3329; color: #fff; }
.size-preview.size-black-gold td { border-color: #c8b387; }
.size-rendered { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.size-rendered img { max-width: 100%; max-height: 290px; margin: 0 auto; display: block; object-fit: contain; }
.history-drawer { position: fixed; z-index: 30; top: 0; bottom: 0; left: 58px; width: min(330px, calc(100vw - 58px)); padding: 16px 14px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); box-shadow: 14px 0 30px rgba(26,30,38,.12); }
.history-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-drawer header button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: var(--panel-soft); color: var(--muted); font-size: 20px; line-height: 1; }
.project-drawer { position: fixed; z-index: 31; top: 0; bottom: 0; left: 58px; width: min(350px, calc(100vw - 58px)); display: flex; flex-direction: column; padding: 16px 14px; overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); box-shadow: 14px 0 30px rgba(26,30,38,.12); }
.project-drawer header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-drawer header button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: var(--panel-soft); color: var(--muted); font-size: 20px; line-height: 1; }
.project-count-summary { margin: 13px 0 11px; color: var(--muted); font-size: 12px; }
.project-new-button { width: 100%; }
.project-recent-section { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; margin-top: 20px; }
.project-deleted-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.project-recycle-note { margin: -2px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.project-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--text); font-size: 13px; }
.project-section-head span { color: var(--muted); font-size: 11px; }
.project-list { display: grid; gap: 7px; }
.project-recent-list { min-height: 0; flex: 1 1 auto; align-content: start; overflow-y: auto; padding: 1px 3px 1px 0; }
.project-empty { margin: 24px 0; color: var(--muted); font-size: 13px; text-align: center; }
.project-item { position: relative; width: 100%; min-height: 64px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-align: left; }
.project-item:hover, .project-item.current { border-color: #c9c0ff; background: var(--accent-soft); }
.project-item.current { box-shadow: inset 3px 0 0 var(--accent); }
.project-thumb { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--panel-soft); color: var(--accent); font-size: 17px; font-weight: 700; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-item-copy { min-width: 0; display: grid; gap: 3px; }
.project-item-copy strong, .project-item-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-item-copy strong { font-size: 13px; }
.project-item-copy span { color: var(--muted); font-size: 11px; }
.project-item-time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.project-item-row .project-item-time { margin-right: 27px; }
.project-all-button { width: 100%; flex: 0 0 auto; margin-top: 13px; }
.project-dialog .dialog-card { width: min(430px, calc(100vw - 32px)); }
.project-list-dialog .project-list-card { width: min(1180px, calc(100vw - 40px)); max-height: min(88vh, 860px); display: flex; flex-direction: column; gap: 14px; }
.project-list-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 34px; }
.project-list-dialog-head h2 { margin: 0; }
.project-search { height: 38px; flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); }
.project-list-all { min-height: 220px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); align-content: start; gap: 18px 16px; overflow-y: auto; padding: 2px 6px 10px 2px; }
.project-list-all .project-item { cursor: pointer; }
.project-item-card { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 2px; border: 0; background: transparent; box-shadow: none; }
.project-item-card:hover, .project-item-card.current { border-color: transparent; background: transparent; box-shadow: none; }
.project-item-card .project-thumb { width: 100%; height: auto; flex: 0 0 auto; aspect-ratio: 16 / 9; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: #f2f3f5; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.project-item-card:hover .project-thumb { border-color: #bfc2c8; box-shadow: 0 8px 18px rgba(25,28,35,.09); transform: translateY(-1px); }
.project-item-card.current .project-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(114,92,255,.16); }
.project-item-card .project-thumb img { min-width: 0; min-height: 0; }
.project-item-card .project-thumb-1 { display: block; }
.project-item-card .project-thumb-2 { grid-template-rows: minmax(0,1fr); }
.project-item-card .project-thumb-3 img:first-child { grid-row: 1 / 3; }
.project-thumb-placeholder { grid-column: 1 / -1; grid-row: 1 / -1; place-self: center; color: #a0a4ab; font-size: 24px; }
.project-item-card .project-item-copy { margin-top: 9px; }
.project-item-card .project-item-copy strong { font-size: 14px; }
.project-item-card .project-item-copy span { margin-top: 1px; font-size: 11px; }
.project-item-card .project-item-time { margin-top: 4px; font-size: 10px; }
.project-item-card .project-delete { position: absolute; z-index: 2; top: 7px; right: 7px; border: 1px solid rgba(223,225,229,.85); background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(20,22,27,.1); }
.project-create-card { min-width: 0; align-self: start; aspect-ratio: 16 / 9; display: grid; place-content: center; gap: 8px; width: 100%; padding: 12px; border: 1px dashed #c9ccd1; border-radius: 8px; background: #f7f7f8; color: var(--muted); }
.project-create-card:hover { border-color: #9f94e9; background: var(--accent-soft); color: var(--text); }
.project-create-card span { font-size: 28px; font-weight: 300; line-height: 1; }
.project-create-card strong { font-size: 12px; font-weight: 600; }
.project-grid-empty { grid-column: 1 / -1; }
.project-delete { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.project-item-row .project-delete { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.project-delete:hover { background: #fdeeee; color: var(--danger); }
.project-item-deleted { grid-template-columns: 46px minmax(0, 1fr) auto; padding-bottom: 40px; opacity: .82; }
.project-item-deleted:hover { border-color: var(--line); background: var(--panel); }
.project-item-deleted .project-item-time { margin-right: 0; align-self: start; padding-top: 4px; }
.project-deleted-actions { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 6px; }
.project-deleted-actions .button { min-height: 26px; padding: 0 8px; font-size: 11px; }
.materials-drawer { position: fixed; z-index: 32; inset: 0 0 0 58px; display: grid; grid-template-rows: 70px minmax(0,1fr); overflow: hidden; background: #f4f5f7; }
.materials-page-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.materials-heading, .materials-header-actions { min-width: 0; display: flex; align-items: center; gap: 10px; }
.materials-paste-hint { display: flex; align-items: center; gap: 3px; margin-right: 2px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.materials-paste-hint kbd { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border: 1px solid #dfe1e5; border-bottom-color: #c9ccd1; border-radius: 5px; background: #f7f7f8; box-shadow: 0 1px 0 #d6d8dc; color: #555960; font-family: inherit; font-size: 9px; }
.materials-paste-hint b { color: #a0a4ab; font-size: 9px; font-weight: 500; }
.materials-paste-hint em { margin-left: 3px; font-style: normal; }
.materials-heading > div { min-width: 0; display: grid; gap: 2px; }
.materials-heading strong { font-size: 18px; }
.materials-heading small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.materials-back { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 19px; line-height: 1; }
.materials-back:hover, .materials-refresh:hover { border-color: #c8cbd0; background: var(--panel-soft); }
.materials-page-body { min-height: 0; display: grid; grid-template-columns: 212px minmax(0,1fr); }
.materials-sidebar { min-height: 0; display: flex; flex-direction: column; gap: 26px; padding: 22px 14px 16px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.materials-sidebar-label { margin: 0 8px 8px; color: var(--muted); font-size: 11px; font-weight: 650; }
.materials-category { width: 100%; min-height: 40px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; text-align: left; }
.materials-category:hover { background: var(--panel-soft); color: var(--text); }
.materials-category.active { background: #eceef1; color: var(--text); font-weight: 650; }
.materials-category b { min-width: 24px; color: #969ba3; font-size: 11px; font-weight: 500; text-align: right; }
.materials-category.subcategory { min-height: 32px; padding-left: 26px; font-size: 12px; }
.materials-category.subcategory span::before { content: "└ "; color: #a0a5ad; }
.materials-category-add { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 5px; margin: 10px 8px 0; }
.materials-category-add input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 11px; }
.materials-category-add input:focus { outline: 0; border-color: #8d7ee7; box-shadow: 0 0 0 2px rgba(114,92,255,.1); }
.materials-category-add button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 18px; line-height: 1; }
.materials-category-add button:hover { border-color: #b5bac2; background: var(--panel-soft); }
.materials-subcategory-add { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 30px; margin-top: 5px; }
.materials-subcategory-add select { min-width: 0; height: 30px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 10px; }
.materials-subcategory-add select:focus { outline: 0; border-color: #8d7ee7; box-shadow: 0 0 0 2px rgba(114,92,255,.1); }
.materials-subcategory-add :disabled { cursor: not-allowed; opacity: .55; }
.materials-use-section { display: grid; gap: 8px; padding: 16px 8px 0; border-top: 1px solid var(--line); }
.materials-use-section label { color: var(--text); font-size: 12px; font-weight: 650; }
.materials-use-section select, .materials-toolbar select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); }
.materials-use-section p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.materials-sync-note { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 8px; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.materials-sync-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(24,121,78,.11); }
.materials-sync-note div { min-width: 0; display: grid; gap: 3px; }
.materials-sync-note strong { font-size: 11px; }
.materials-sync-note small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.materials-content { position: relative; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 24px 32px; }
.materials-toolbar { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: minmax(220px,680px) 132px; justify-content: space-between; gap: 10px; padding: 20px 0 14px; background: #f4f5f7; }
.materials-search-field { min-width: 0; height: 42px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 2px 8px rgba(28,31,36,.03); }
.materials-search-field:focus-within { border-color: #aca1f4; box-shadow: 0 0 0 3px rgba(114,92,255,.09); }
.materials-search-field > span { color: var(--muted); font-size: 20px; }
.materials-search-field input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.materials-search-field button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 16px; }
.materials-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 10px; }
.materials-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.materials-list-head > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.materials-batch-bar { position: sticky; z-index: 4; top: 76px; width: fit-content; max-width: 100%; min-height: 44px; display: flex; align-items: center; gap: 4px; margin: 0 auto 14px; padding: 5px 6px 5px 12px; border: 1px solid #dfe1e5; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(28,31,36,.11); }
.materials-batch-bar[hidden] { display: none; }
.materials-batch-bar strong { margin-right: 6px; color: #565961; font-size: 11px; font-weight: 650; white-space: nowrap; }
.materials-batch-bar button, .materials-batch-bar select { min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #45484f; font-size: 11px; white-space: nowrap; }
.materials-batch-bar button:hover, .materials-batch-bar select:hover { background: #f1f2f4; }
.materials-batch-bar .primary-action { background: #26282d; color: #fff; }
.materials-batch-bar .primary-action:hover { background: #111216; }
.materials-batch-bar .close-action { width: 32px; padding: 0; color: #777b84; font-size: 18px; }
.materials-batch-bar label { display: flex; align-items: center; gap: 2px; padding-left: 5px; border-left: 1px solid #eceef1; color: #92969e; font-size: 10px; }
.materials-batch-bar .danger { color: #b72f2f; }
.materials-dropzone { position: absolute; z-index: 5; inset: 76px 24px 24px; display: grid; place-items: center; border: 2px dashed #9282ef; border-radius: 8px; background: rgba(239,236,255,.96); color: var(--accent); font-size: 15px; font-weight: 650; }
.materials-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); align-items: start; gap: 14px; }
.material-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 14px rgba(28,31,36,.045); transition: transform .16s ease, box-shadow .16s ease; }
.material-item:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(28,31,36,.09); }
.material-item.selected { border-color: #7563e8; box-shadow: 0 0 0 2px rgba(117,99,232,.14); }
.material-selector { position: absolute; z-index: 3; top: 9px; left: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(20,22,27,.16); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.material-preview:hover .material-selector, .material-item.selected .material-selector, .material-selector:focus-within { opacity: 1; pointer-events: auto; }
.material-selector input { width: 15px; height: 15px; accent-color: #6655dc; }
.material-category-chip { position: absolute; z-index: 2; bottom: 8px; left: 8px; width: 86px; height: 32px; padding: 0 22px 0 9px; border: 1px solid rgba(25,27,31,.1); border-radius: 6px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(20,22,27,.14); color: #3d4047; font-size: 10px; opacity: 0; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; }
.material-preview:hover .material-category-chip, .material-category-chip:focus-visible { opacity: 1; transform: translateY(0); }
.material-preview { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #eceef1; }
.material-preview-open { width: 100%; height: 100%; display: block; padding: 0; border: 0; background: transparent; }
.material-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.material-add-overlay { position: absolute; z-index: 2; right: 8px; bottom: 8px; left: auto; min-width: 88px; min-height: 32px; display: grid; place-items: center; padding: 6px 10px; border: 1px solid rgba(25,27,31,.1); border-radius: 6px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(20,22,27,.14); color: #202126; font-size: 11px; font-weight: 650; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.material-preview:hover .material-add-overlay, .material-add-overlay:focus-visible { opacity: 1; pointer-events: auto; }
.material-preview:hover .material-add-overlay, .material-add-overlay:focus-visible { transform: translateY(0); }
.material-add-overlay:hover { background: #fff; }
.material-add-overlay:disabled { cursor: wait; }
.material-category-chip { right: calc(50% + 3px); left: 8px; width: auto; padding-right: 16px; padding-left: 5px; }
.material-category-chip { height: auto; min-height: 32px; display: block; overflow: visible; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: #3d4047; }
.material-category-chip summary { min-width: 58px; height: 32px; display: flex; align-items: center; overflow: hidden; padding: 0 8px; border: 1px solid rgba(25,27,31,.1); border-radius: 6px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(20,22,27,.14); cursor: pointer; font-size: 10px; list-style: none; text-overflow: ellipsis; white-space: nowrap; }
.material-category-chip summary::-webkit-details-marker { display: none; }
.material-category-chip[open] { z-index: 6; opacity: 1; transform: translateY(0); }
.material-category-menu { position: absolute; bottom: calc(100% + 5px); left: 0; width: 146px; max-height: 158px; display: grid; gap: 2px; overflow-y: auto; padding: 5px; border: 1px solid #d8dbe0; border-radius: 6px; background: rgba(255,255,255,.98); box-shadow: 0 9px 22px rgba(20,22,27,.18); }
.material-category-menu label { min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 4px; border-radius: 4px; color: #42454c; cursor: pointer; font-size: 11px; }
.material-category-menu label:hover { background: #f0f1f3; }
.material-category-menu label.subcategory { padding-left: 15px; color: #61656d; }
.material-category-menu label.subcategory span::before { content: "└ "; color: #a0a5ad; }
.material-category-menu input { width: 13px; height: 13px; margin: 0; accent-color: #6655dc; }
.material-category-menu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-category-empty { display: block; padding: 5px; color: var(--muted); font-size: 10px; }
.material-add-overlay { right: 8px; left: calc(50% + 3px); min-width: 0; padding-right: 5px; padding-left: 5px; }
.material-delete { position: absolute; z-index: 2; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: rgba(20,22,27,.68); color: #fff; font-size: 19px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease; }
.material-preview:hover .material-delete, .material-delete:focus-visible { opacity: .86; pointer-events: auto; }
.material-delete:hover { background: #c13232; opacity: 1; }
.material-delete:disabled { cursor: wait; opacity: .5; }
.material-copy { padding: 10px; display: grid; gap: 8px; }
.material-title-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.material-title-row strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.material-title-row span { flex: 0 0 auto; padding: 2px 5px; border-radius: 4px; background: var(--panel-soft); color: var(--muted); font-size: 9px; text-transform: uppercase; }
.material-meta { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; }
.material-meta span { overflow: hidden; text-overflow: ellipsis; }
.material-tags { min-height: 18px; display: flex; gap: 5px; overflow: hidden; }
.material-tags span { max-width: 92px; overflow: hidden; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.material-copy > button { min-height: 34px; padding: 0 9px; border: 1px solid var(--primary); border-radius: 7px; background: var(--primary); color: var(--primary-text); font-size: 12px; }
.material-copy > button:hover { background: #35363a; }
.material-copy > button:disabled { opacity: .55; cursor: wait; }
.materials-empty { grid-column: 1/-1; min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 6px; margin: 0; border: 1px dashed #d9dce1; border-radius: 8px; background: rgba(255,255,255,.55); color: var(--muted); font-size: 13px; text-align: center; }
.materials-empty strong { color: var(--text); font-size: 14px; }
.materials-empty button { margin-top: 5px; }
.history-list { display: grid; gap: 14px; margin-top: 14px; }
.history-empty { margin: 30px 0; color: var(--muted); font-size: 13px; text-align: center; }
.history-project-recycle-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 10px; border: 1px dashed #d9b7ad; border-radius: 8px; background: #fff9f7; }
.history-project-recycle-summary strong { font-size: 13px; }
.history-project-recycle-summary span { color: #a14836; font-size: 11px; font-weight: 650; }
.history-project-recycle-summary p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
.history-project-recycle-toggle { min-height: 30px; justify-self: start; padding: 4px 9px; border: 1px solid #23262b; border-radius: 5px; background: #23262b; color: #fff; font-size: 11px; }
.history-project-recycle-toggle:hover { background: #3a3e45; }
.history-task { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.history-task-deleted { border-style: dashed; border-color: #d9b7ad; background: #fff9f7; }
.history-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.history-task-name { min-width: 0; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.history-task-name:hover { color: var(--accent); }
.history-task-time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.history-task-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: -3px 0 8px; color: var(--muted); font-size: 10px; }
.history-project-recycle-note { color: #a14836; font-weight: 650; }
.history-project-recycle-actions { display: flex; gap: 6px; margin: 0 0 9px; }
.history-project-recycle-actions button { min-height: 27px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); font-size: 11px; }
.history-project-recycle-actions button:hover { border-color: var(--accent); color: var(--accent); }
.history-project-recycle-actions button.danger { color: #a94442; }
.history-project-empty { margin: 0; color: var(--muted); font-size: 11px; }
.history-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.history-image-item { position: relative; min-width: 0; }
.history-image { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.history-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.history-image span { position: absolute; right: 3px; bottom: 3px; left: 3px; overflow: hidden; padding: 2px 3px; border-radius: 3px; background: rgba(20,21,24,.68); color: #fff; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.history-image-item.recycled .history-image { opacity: .62; border-style: dashed; }
.history-recycle-badge { position: absolute; top: 4px; left: 4px; z-index: 1; padding: 2px 4px; border-radius: 4px; background: rgba(20,21,24,.78); color: #fff; font-size: 9px; }
.history-recycle-time { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-align: center; }
.history-recycle-actions { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 4px; }
.history-recycle-actions button { min-height: 25px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); font-size: 10px; }
.history-recycle-actions button:hover { border-color: var(--accent); color: var(--accent); }
.history-recycle-actions button.danger { color: #a94442; }

.workspace { container-type: inline-size; min-width: 0; padding: 20px 24px 64px; }
.workspace-scroll-controls { position: fixed; z-index: 22; right: calc(var(--chat-width) + 18px); bottom: 16px; display: grid; gap: 6px; }
.workspace-scroll-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #cfd3d8; border-radius: 6px; background: rgba(255,255,255,.96); color: #3d4249; box-shadow: 0 4px 14px rgba(24,29,37,.13); font-size: 19px; line-height: 1; }
.workspace-scroll-button:hover:not(:disabled) { border-color: var(--accent); background: #fff; color: var(--accent); }
.workspace-scroll-button:disabled { border-color: #e2e5e8; color: #c2c6cb; box-shadow: none; cursor: default; }
.workspace-scroll-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 0; }
.workspace-header > :first-child { display: grid; align-content: start; gap: 0; }
.title-row { display: flex; align-items: baseline; gap: 8px; }
.site-title { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.3; }
.site-domain { margin: 0; color: var(--muted); font-size: 10px; line-height: 1; }
.project-title { max-width: min(320px, 100%); margin: 0; overflow: hidden; color: var(--text); font-size: 20px; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.workspace-header #project-status { margin-top: 2px; line-height: 1.35; }
.workspace-project-title { min-width: 0; display: flex; align-items: baseline; gap: 2px; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.workspace-project-title .project-title { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.3; }
.compact-select { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); padding: 5px 10px; color: var(--text); }
.muted { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.inline-note { margin-left: 9px; }
.header-actions, .toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credit-badge { padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; white-space: nowrap; }
button.credit-badge { border: 1px solid transparent; cursor: pointer; font-family: inherit; text-align: left; }
button.credit-badge:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: #ece9ff; }
button.credit-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button { min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.button:hover { border-color: #c8cbd0; }
.button.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.button.secondary { background: var(--panel); }
.button.full { width: 100%; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workbench-toolbar-title { min-width: 0; display: flex; align-items: center; gap: 9px; }
.workbench-toolbar-title strong { flex: 0 0 auto; font-size: 16px; }
.workbench-toolbar-title select { min-width: 112px; height: 32px; padding: 0 27px 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; }
.workbench-toolbar-title .inline-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crop-entry { display: inline-flex; align-items: center; gap: 7px; }
.crop-entry.locked { border-color: #d9d3ff; }
.vip-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid #d8d0ff; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1; }

@container (max-width: 940px) {
  .workspace-header { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); align-items: start; gap: 8px 12px; }
  .workspace-header > :first-child { min-width: 0; }
  .header-actions { min-width: 0; justify-content: flex-end; gap: 5px; }
  .header-actions .button { min-height: 32px; padding: 0 8px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
  .header-actions .credit-badge { padding: 5px 8px; font-size: 11px; }
  .result-toolbar { align-items: center; flex-wrap: wrap; }
  .workbench-toolbar-title { width: auto; flex: 0 0 auto; }
  .toolbar-actions { width: auto; min-width: 0; flex: 1 1 0; justify-content: flex-end; }
}

.crop-workspace { min-height: 620px; margin-top: 0; }
.crop-workspace-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.crop-title-group, .crop-title-group > div, .crop-toolbar, .crop-zoom-toolbar { display: flex; align-items: center; gap: 8px; }
.crop-title-group strong { font-size: 16px; }
.crop-icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 18px; }
.crop-icon-button:hover { border-color: #c7cbd1; background: var(--panel-soft); }
.crop-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.crop-toolbar { justify-content: flex-end; flex-wrap: wrap; }
.crop-count { min-width: 48px; color: var(--muted); font-size: 12px; text-align: center; }
.crop-empty { width: 100%; min-height: 520px; display: grid; place-content: center; justify-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--line); background: #eef0f3; color: var(--muted); }
.crop-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px dashed #bcc1c9; border-radius: 8px; background: var(--panel); color: var(--accent); font-size: 28px; }
.crop-empty strong { color: var(--text); font-size: 15px; }
.crop-items { width: min(790px, 100%); margin: 18px auto 0; display: grid; gap: 16px; }
.crop-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 16px rgba(28,31,36,.06); }
.crop-card-header { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 13px; border-bottom: 1px solid var(--line); }
.crop-card-title { min-width: 0; display: flex; align-items: center; gap: 9px; }
.crop-card-title > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.crop-card-title strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.crop-card-controls { display: flex; align-items: center; gap: 6px; }
.crop-card-controls .crop-icon-button { width: 30px; height: 30px; font-size: 15px; }
.crop-scale-label { width: 42px; color: var(--muted); font-size: 11px; text-align: center; }
.crop-height-input { width: 76px; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; }
.crop-card-delete { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: var(--panel-soft); color: var(--danger); font-size: 16px; }
.crop-frame { position: relative; width: 100%; overflow: hidden; background: #e7e9ed; cursor: grab; touch-action: none; }
.crop-frame.dragging { cursor: grabbing; }
.crop-frame > img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform: translate(-50%,-50%); transform-origin: center; pointer-events: none; user-select: none; }
.crop-frame::after { content: attr(data-crop-width); position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 4px; background: rgba(20,21,24,.7); color: #fff; font-size: 10px; pointer-events: none; }
.crop-height-handle { height: 22px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid rgba(255,255,255,.5); background: rgba(29,31,35,.92); color: #fff; cursor: ns-resize; font-size: 11px; font-weight: 700; letter-spacing: 0; touch-action: none; user-select: none; }
.crop-height-handle > span { font-size: 10px; font-weight: 600; opacity: .9; }

.slice-toolbar { justify-content: flex-end; }
.slice-size-field { height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); font-size: 11px; }
.slice-size-field input { width: 58px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; text-align: right; }
.slice-size-times { color: var(--muted); font-size: 12px; }
.slice-workspace { min-height: 620px; padding: 18px 0 40px; }
.slice-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 14px; border-bottom: 1px solid var(--line); }
.slice-intro strong { font-size: 15px; }
.slice-dimension-preview { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 11px; }
.slice-source-list { width: min(790px,100%); margin: 18px auto 0; display: block; font-size: 0; line-height: 0; }
.slice-source-item { position: relative; min-height: 0; margin: 0; padding: 0; overflow: hidden; font-size: 0; line-height: 0; background: var(--panel); }
.slice-source-item img { width: 100%; height: auto; display: block; margin: 0; padding: 0; border: 0; vertical-align: top; }
.slice-source-label { position: absolute; top: 7px; left: 7px; z-index: 1; min-width: 25px; height: 25px; display: grid; place-items: center; padding: 0 6px; border-radius: 5px; background: rgba(20,21,24,.76); color: #fff; font-size: 10px; }
.slice-source-empty { min-height: 420px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.slice-result { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.slice-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.slice-result-head strong { font-size: 15px; }
.slice-export-path { max-width: min(790px,80vw); overflow-wrap: anywhere; }
.slice-result-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; }
.slice-result-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.slice-result-item img { width: 100%; aspect-ratio: 1/1; display: block; object-fit: contain; background: #eef0f3; }
.slice-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; color: var(--muted); font-size: 10px; }
.slice-result-meta strong { color: var(--text); font-size: 11px; }

.empty-state { min-height: 520px; color: var(--muted); }
.project-empty-guide { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; }
.project-empty-guide h2 { margin: 14px 0 4px; color: var(--text); font-size: 18px; }
.project-empty-guide > p { margin: 0 0 18px; }
.empty-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.empty-actions[hidden] { display: none; }
.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; padding: 0; border-radius: 18px; background: var(--panel); border: 1px dashed #cfd2d7; color: var(--muted); font-size: 30px; }
.empty-icon:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
.empty-icon:focus-visible { outline: 3px solid rgba(114,92,255,.2); outline-offset: 2px; }

/* Empty-project home: thin lines, generous white space and real work previews. */
body.homepage-mode { background: #fff; }
body.homepage-mode .app-shell { grid-template-columns: 58px minmax(0, 1fr); }
body.homepage-mode .workspace { min-height: 100vh; padding: 20px 32px 64px; background: #fff; }
body.homepage-mode .workspace-header { width: min(1180px, 100%); margin: 0 auto; padding-bottom: 18px; border-bottom: 1px solid #dedfdd; }
body.homepage-mode .workspace-project-title,
body.homepage-mode .workspace-header #project-status,
body.homepage-mode #export-detail-pages-entry,
body.homepage-mode #result-toolbar,
body.homepage-mode #panel-resizer,
body.homepage-mode #chat-panel { display: none !important; }
body.homepage-mode .site-title { font-size: 19px; }
body.homepage-mode .site-domain { color: #8a8c87; }
body.homepage-mode .empty-state { min-height: 0; }

.home-workbench { width: min(1180px, 100%); margin: 0 auto; color: #171916; text-align: left; }
.home-hero { min-height: 490px; display: grid; align-content: center; justify-items: center; padding: 58px 20px 46px; text-align: center; }
.home-hero h2 { width: min(820px, 100%); min-height: 126px; display: grid; place-items: center; margin: 0; color: #121510; font-size: 56px; font-weight: 650; line-height: 1.12; letter-spacing: 0; white-space: pre-line; transition: opacity .22s ease, transform .22s ease; }
.home-hero h2.changing { opacity: 0; transform: translateY(4px); }
.home-hero > p { max-width: 560px; margin: 20px auto 0; color: #676b64; font-size: 15px; line-height: 1.7; }
.home-composer { width: min(760px, 100%); margin-top: 34px; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.home-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(114,92,255,.11); }
.home-composer-row { min-height: 52px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.home-composer textarea { width: 100%; height: 46px; min-height: 46px; max-height: 118px; resize: none; overflow-y: auto; padding: 12px 2px 8px; border: 0; outline: 0; background: transparent; color: #171916; font-size: 15px; line-height: 1.55; }
.home-composer textarea::placeholder { color: #9a9d96; }
.home-upload,
.home-submit { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 9px; font-size: 20px; line-height: 1; }
.home-upload { border: 0; background: transparent; color: var(--muted); }
.home-upload:hover { background: var(--panel-soft); color: var(--text); }
.home-submit { border: 0; background: var(--primary); color: var(--primary-text); }
.home-submit:hover { background: #34363a; }
.home-submit:disabled, .home-upload:disabled { opacity: .45; cursor: default; }
.home-file-preview { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 9px; padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.home-file-item { position: relative; flex: 0 0 56px; height: 56px; overflow: visible; border: 1px solid #d9dcd6; border-radius: 6px; background: #f3f4f1; }
.home-file-item img { width: 100%; height: 100%; display: block; border-radius: 5px; object-fit: cover; }
.home-file-item button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #1f221e; color: #fff; font-size: 13px; line-height: 1; }
.home-hero .home-composer-note { margin-top: 10px; color: #92968f; font-size: 11px; }

.home-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #dedfdd; border-bottom: 1px solid #dedfdd; }
.home-flow article { min-width: 0; min-height: 112px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-content: center; gap: 17px; padding: 24px 30px; }
.home-flow article + article { border-left: 1px solid #e4e6e1; }
.home-flow article > span { display: flex; align-items: center; gap: 10px; color: #7d817a; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-flow article > span::after { width: 26px; height: 1px; background: #292d27; content: ""; }
.home-flow article > div { min-width: 0; display: grid; gap: 5px; }
.home-flow strong { color: #191c17; font-size: 16px; font-weight: 650; }
.home-flow small { color: #7a7e76; font-size: 11px; line-height: 1.5; }


.detail-stage { width: min(560px, 100%); margin: 20px auto 0; }
.detail-stage.tool-workbench-stage { width: min(1080px, 100%); display: grid; gap: 16px; margin-top: 18px; }
.tool-workbench-config { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 3px 14px rgba(28,31,36,.045); }
.tool-workbench-config > div:first-child { display: grid; gap: 3px; }
.tool-workbench-config > div:first-child strong { font-size: 14px; }
.tool-workbench-config > div:first-child span { color: var(--muted); font-size: 12px; }
.tool-workbench-source-list { grid-column: 1 / -1; display: flex; gap: 8px; min-height: 76px; overflow-x: auto; padding-bottom: 2px; }
.tool-workbench-source-card { position: relative; flex: 0 0 68px; height: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
.tool-workbench-source-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tool-workbench-source-card > span { position: absolute; left: 5px; bottom: 5px; min-width: 21px; padding: 2px 4px; border-radius: 4px; background: rgba(20,21,24,.74); color: #fff; font-size: 10px; text-align: center; }
.tool-workbench-source-card > button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,21,24,.76); color: #fff; font-size: 15px; line-height: 1; }
.tool-workbench-add-source { flex: 0 0 160px; min-height: 76px; display: grid; place-content: center; gap: 2px; border: 1px dashed #b8bdc5; border-radius: 6px; background: #fafbfc; color: var(--muted); }
.tool-workbench-add-source strong { color: var(--accent); font-size: 22px; line-height: 1; }
.tool-workbench-add-source span { font-size: 12px; }
.tool-workbench-prompt { grid-column: 1 / -1; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.tool-workbench-prompt textarea { width: 100%; min-height: 44px; resize: vertical; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; color: var(--text); font: inherit; line-height: 1.45; }
.tool-workbench-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tool-workbench-image-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 16px rgba(28,31,36,.055); }
.tool-workbench-image-card > header { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tool-workbench-image-card > header > span { color: var(--muted); font-size: 11px; }
.tool-workbench-image-card > header strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tool-workbench-image-card > header em { margin-left: auto; padding: 3px 6px; border-radius: 4px; background: #edf7f2; color: #19714b; font-size: 10px; font-style: normal; white-space: nowrap; }
.tool-workbench-image { position: relative; aspect-ratio: 1; overflow: hidden; background: #f1f2f4; }
.tool-workbench-image > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tool-workbench-version { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 6px; background: rgba(20,21,24,.74); color: #fff; }
.tool-workbench-version button { width: 23px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.15); color: #fff; font-size: 17px; line-height: 1; }
.tool-workbench-version button:disabled { opacity: .38; }
.tool-workbench-version b { min-width: 31px; font-size: 10px; font-weight: 600; text-align: center; }
.tool-workbench-image-card > footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 10px; color: var(--muted); font-size: 11px; }
.tool-workbench-image-card > footer > div { display: inline-flex; gap: 5px; }
.tool-workbench-image-card > footer button { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); font-size: 11px; }
.tool-workbench-image-card > footer button:hover { border-color: #b6bac2; background: var(--panel-soft); }
.tool-workbench-image-card > footer button:disabled { opacity: .45; }
.tool-workbench-empty { grid-column: 1 / -1; min-height: 250px; display: grid; place-content: center; justify-items: center; gap: 5px; border: 1px dashed #c9cdd3; border-radius: 8px; background: #fafbfc; color: var(--muted); text-align: center; }
.tool-workbench-empty strong { color: var(--text); font-size: 15px; }
.tool-workbench-empty span { font-size: 12px; }
.tool-workbench-config.color { grid-template-columns: minmax(0, 1fr); }
.tool-workbench-garment { display: grid; grid-template-columns: 98px minmax(0, 1fr); align-items: stretch; gap: 12px; }
.tool-workbench-garment > button { min-height: 98px; display: grid; place-content: center; gap: 4px; overflow: hidden; padding: 0; border: 1px dashed #bcc1c9; border-radius: 7px; background: #fafbfc; color: var(--muted); font-size: 12px; }
.tool-workbench-garment > button img { width: 100%; height: 72px; display: block; object-fit: contain; background: #fff; }
.tool-workbench-garment > button span { padding-bottom: 6px; }
.tool-workbench-garment .tool-workbench-prompt { grid-column: auto; }
.tool-workbench-color-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tool-workbench-color-card { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 7px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; color: var(--text); text-align: left; }
.tool-workbench-color-card:hover, .tool-workbench-color-card.active { border-color: #9d90ec; background: #f6f4ff; }
.tool-workbench-color-card img, .tool-workbench-color-card i { grid-row: 1 / -1; width: 30px; height: 30px; display: block; overflow: hidden; border-radius: 5px; object-fit: cover; }
.tool-workbench-color-card span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tool-workbench-color-card b { color: var(--muted); font-size: 10px; font-weight: 500; }

/* Main-image workbench: classify once, then crop directly in the matching size. */
.main-workbench-stage { gap: 14px; }
.main-pending-section, .main-crop-section { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 3px 14px rgba(28,31,36,.045); }
.main-pending-section > header, .main-crop-section > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.main-pending-section > header > div, .main-crop-section > header > div { min-width: 0; display: grid; gap: 2px; }
.main-pending-section > header strong, .main-crop-section > header strong { font-size: 14px; }
.main-pending-section > header span, .main-crop-section > header span, .main-crop-section > header small { color: var(--muted); font-size: 11px; font-weight: 400; }
.main-workbench-header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.main-crop-section-actions { min-width: 0; display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 9px; }
.main-crop-section-actions small { min-width: 0; text-align: right; }
.main-logo-entry { min-width: 0; max-width: 210px; height: 31px; display: inline-grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 0 8px 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); text-align: left; }
.main-logo-entry:hover { border-color: #a9afb7; background: var(--panel-soft); }
.main-logo-entry img, .main-logo-entry-empty { width: 22px; height: 22px; display: block; overflow: hidden; border-radius: 4px; object-fit: contain; background: #f1f2f4; }
.main-logo-entry-empty { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-style: normal; }
.main-logo-entry > span:not(.main-logo-entry-empty) { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.main-logo-entry i { color: var(--muted); font-size: 12px; font-style: normal; }
.main-pending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 11px; padding: 12px; }
.main-pending-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.main-pending-image { position: relative; aspect-ratio: 1; overflow: hidden; background: #f0f1f2; }
.main-pending-image > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.main-pending-delete { position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: rgba(22,24,28,.76); color: #fff; font-size: 17px; line-height: 1; }
.main-pending-version { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 5px; background: rgba(22,24,28,.76); color: #fff; }
.main-pending-version button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.15); color: #fff; font-size: 15px; line-height: 1; }
.main-pending-version button:disabled { opacity: .35; }
.main-pending-version b { min-width: 27px; font-size: 10px; text-align: center; }
.main-pending-body { display: grid; gap: 8px; padding: 9px; }
.main-pending-info { min-width: 0; display: grid; gap: 6px; }
.main-pending-info > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.main-pending-outpaint, .option-inline-crop-outpaint { position: absolute; z-index: 8; right: 7px; bottom: 7px; min-height: 25px; padding: 0 7px; border: 1px solid rgba(255,255,255,.8); border-radius: 4px; background: rgba(237,247,242,.94); color: #176b4e; font-size: 10px; font-weight: 700; line-height: 23px; cursor: pointer; }
.main-pending-outpaint:hover, .option-inline-crop-outpaint:hover { border-color: #5ba988; background: #e3f3eb; }
.main-pending-outpaint:focus-visible, .option-inline-crop-outpaint:focus-visible { outline: 2px solid #176b4e; outline-offset: 2px; }
.main-pending-outpaint-badge { position: absolute; z-index: 7; left: 7px; top: 7px; padding: 3px 5px; border-radius: 4px; background: rgba(23,107,78,.88); color: #fff; font-size: 10px; line-height: 1.2; }
.main-pending-outpaint-result { display: grid; gap: 5px; padding-top: 6px; border-top: 1px solid var(--line); }
.main-pending-outpaint-result > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 10px; }
.main-pending-outpaint-result > div:first-child span { color: var(--text); font-weight: 700; }
.main-pending-outpaint-result > div:first-child button { min-height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font-size: 10px; cursor: pointer; }
.main-pending-outpaint-result > div:first-child button:hover:not(:disabled) { border-color: #8dc0ae; background: #edf7f2; color: #176b4e; }
.main-pending-outpaint-result > div:first-child button:disabled { opacity: .45; cursor: default; }
.main-pending-outpaint-thumbs { display: flex; align-items: flex-start; gap: 5px; overflow-x: auto; padding-bottom: 1px; }
.main-pending-outpaint-thumbs button { flex: 0 0 52px; display: grid; gap: 2px; padding: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); cursor: pointer; font-size: 9px; text-align: center; }
.main-pending-outpaint-thumbs button:hover, .main-pending-outpaint-thumbs button.is-selected { border-color: #4c7fca; background: #f6f9fd; }
.main-pending-outpaint-thumbs button.is-selected { box-shadow: 0 0 0 1px #4c7fca; color: #245ea9; }
.main-pending-outpaint-thumbs img { width: 46px; height: 46px; display: block; object-fit: cover; }
.main-pending-outpaint-thumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-classify-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; color: var(--muted); font-size: 11px; }
.main-classify-options label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.main-classify-options input { margin: 0; accent-color: var(--primary); }
.main-classify-options label.is-added { color: #9da2aa; }
.main-classify-options input:disabled { opacity: .48; cursor: default; }
.main-pending-body .button { min-height: 30px; justify-content: center; }
.main-pending-empty, .main-crop-section-empty { min-height: 110px; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }
.main-pending-empty strong { color: var(--text); font-size: 13px; }
.main-crop-section > header { border-bottom: 0; }
.main-crop-section > header small { text-align: right; }
.main-inline-crop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; padding: 0 12px 12px; }
.main-inline-crop-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.main-inline-crop-card > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 7px 5px 9px; border-bottom: 1px solid var(--line); }
.main-inline-crop-card > header > div:first-child { min-width: 0; display: flex; align-items: center; gap: 6px; }
.main-inline-crop-card > header span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.main-inline-crop-card > header strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.main-inline-crop-card > header em { flex: 0 0 auto; padding: 2px 4px; border-radius: 4px; background: #edf7f2; color: #19714b; font-size: 9px; font-style: normal; }
.main-inline-crop-card > header .main-source-position-actions { gap: 4px; }
.main-inline-crop-card > header .module-position-control { gap: 3px; font-size: 10px; }
.main-inline-crop-card > header .module-position-control input { width: 30px; height: 23px; padding: 0 2px; border-radius: 4px; font-size: 10px; }
.main-inline-crop-card > header .module-sort-actions { gap: 2px; padding-left: 0; }
.main-inline-crop-card > header .module-sort-button { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1; }
.main-inline-crop-card > header .module-sort-button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.main-inline-crop-card > header .module-sort-button:disabled { opacity: .42; cursor: not-allowed; }
.main-preset-order-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.main-preset-order-actions button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1; }
.main-preset-order-actions button:hover:not(:disabled) { border-color: #8c929a; background: var(--panel-soft); }
.main-preset-order-actions button:disabled { opacity: .38; cursor: not-allowed; }
.main-preset-order-actions [data-main-crop-unclassify] { color: #9d4242; font-size: 15px; }
.main-inline-crop-controls { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.main-inline-crop-controls button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 12px; line-height: 1; }
.main-inline-crop-controls button:disabled { opacity: .38; cursor: default; }
.main-inline-crop-controls b { width: 31px; color: var(--muted); font-size: 9px; font-weight: 600; text-align: center; }
.main-inline-crop-frame { position: relative; overflow: hidden; background: #e8eaed; cursor: grab; touch-action: none; }
.main-inline-crop-frame.dragging { cursor: grabbing; }
.main-inline-crop-frame > img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
.main-inline-crop-frame .main-tool-logo-preview { position: absolute; z-index: 5; min-width: 0; max-width: 42%; max-height: 42%; padding: 0; overflow: visible; border: 1px solid transparent; border-radius: 5px; background: transparent; transform: translate(-50%, -50%); cursor: move; touch-action: none; }
.main-inline-crop-frame .main-tool-logo-preview:hover, .main-inline-crop-frame .main-tool-logo-preview:focus-visible { border-color: rgba(23,107,91,.72); outline: 0; }
.main-inline-crop-frame .main-tool-logo-preview > img { position: static; width: 100%; height: auto; max-height: 100%; display: block; object-fit: contain; transform: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); pointer-events: none; }
.main-tool-logo-resize { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; display: block; box-sizing: border-box; border: 2px solid #fff; border-radius: 3px; background: #176b5b; box-shadow: 0 1px 3px rgba(0,0,0,.28); cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity .14s ease; }
.main-tool-logo-preview:hover .main-tool-logo-resize, .main-tool-logo-preview:focus-visible .main-tool-logo-resize, .main-tool-logo-preview:focus-within .main-tool-logo-resize { opacity: 1; }
.main-inline-crop-copy { position: absolute; inset: 0; pointer-events: none; }
.main-inline-crop-copy .module-marketing-copy { pointer-events: none; }
.main-inline-crop-copy .module-marketing-copy[data-main-marketing-copy] { pointer-events: auto; }
.main-transparent-pending { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); padding: 4px 7px; border-radius: 4px; background: rgba(22,24,28,.76); color: #fff; font-size: 10px; white-space: nowrap; pointer-events: none; }
.main-inline-crop-card > footer { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 7px; border-top: 1px solid var(--line); }
.main-inline-crop-card > footer > div { display: inline-flex; align-items: center; gap: 5px; }
.main-inline-crop-card > footer button, .main-inline-crop-card > footer a { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 10px; text-decoration: none; white-space: nowrap; }
.main-inline-crop-card > footer button:hover, .main-inline-crop-card > footer a:hover { border-color: #b8bdc5; background: var(--panel-soft); }
.main-inline-crop-footer-actions [data-main-outpaint-generate] { border-color: #8dc0ae; background: #edf7f2; color: #176b4e; }
.main-inline-crop-footer-actions [data-main-outpaint-generate]:hover { border-color: #5ba988; background: #e3f3eb; }
.main-inline-crop-card > footer [data-main-crop-save] { border-color: #8dc0ae; background: #edf7f2; color: #176b4e; }
.main-inline-crop-card > footer [data-main-crop-save]:hover { border-color: #5ba988; background: #e3f3eb; }
.main-inline-crop-card > footer [data-main-crop-unclassify] { width: 26px; padding: 0; color: var(--muted); font-size: 15px; }
.option-inline-crop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-inline-crop-card > header > div:first-child em { flex: 0 0 auto; padding: 2px 4px; border-radius: 4px; background: #edf7f2; color: #19714b; font-size: 9px; font-style: normal; white-space: nowrap; }
.option-inline-crop-delete { position: absolute; z-index: 8; top: 7px; right: 7px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(22,24,28,.78); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.option-inline-crop-delete:hover { border-color: #fff; background: #b33c3c; }
.option-inline-crop-delete:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.option-inline-crop-card > footer { flex-wrap: wrap; }
.option-outpaint-panel { display: grid; gap: 7px; padding: 8px; border-top: 1px solid var(--line); background: #fafbfc; }
.option-outpaint-head { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.option-outpaint-head > span { color: var(--text); font-size: 11px; font-weight: 700; }
.option-outpaint-head > button, .option-outpaint-actions button { min-height: 25px; padding: 0 7px; border: 1px solid #8dc0ae; border-radius: 4px; background: #edf7f2; color: #176b4e; font-size: 10px; cursor: pointer; white-space: nowrap; }
.option-outpaint-head > button:hover, .option-outpaint-actions button:hover { border-color: #5ba988; background: #e3f3eb; }
.option-outpaint-thumbs { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); align-items: start; gap: 7px; padding: 2px; }
.option-outpaint-thumb-wrap { position: relative; min-width: 0; }
.option-outpaint-thumb { position: relative; width: 100%; min-height: 86px; display: grid; grid-template-rows: 64px 18px; gap: 2px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--muted); cursor: pointer; }
.option-outpaint-thumb:hover { border-color: #5ba988; background: #f6fbf8; }
.option-outpaint-thumb img { width: 100%; height: 64px; display: block; object-fit: cover; }
.option-outpaint-thumb small { overflow: hidden; padding: 0 3px; font-size: 9px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.option-outpaint-thumb.is-selected { border-color: #4c7fca; box-shadow: 0 0 0 1px #4c7fca; }
.option-outpaint-thumb-wrap.is-used .option-outpaint-thumb { border-color: #2e8b68; }
.option-outpaint-thumb em { position: absolute; z-index: 2; left: 3px; top: 3px; padding: 1px 3px; border-radius: 3px; background: rgba(23,107,78,.88); color: #fff; font-size: 8px; font-style: normal; line-height: 14px; pointer-events: none; }
.option-outpaint-thumb-delete { position: absolute; z-index: 3; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #383d44; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.option-outpaint-thumb-delete:hover { background: #b42318; }
.option-outpaint-actions { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.option-outpaint-actions > small, .option-outpaint-empty { color: var(--muted); font-size: 9px; line-height: 1.4; }
.option-outpaint-empty { min-height: 28px; display: flex; align-items: center; }
.option-color-field { min-width: 0; display: inline-grid; grid-template-columns: 14px auto minmax(72px, 1fr); align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.option-color-field i { width: 14px; height: 14px; display: block; border: 1px solid rgba(0,0,0,.12); border-radius: 3px; }
.option-color-field input { width: 100%; min-width: 72px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--text); font-size: 10px; }
.option-inline-crop-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 18px; color: var(--muted); text-align: center; }
.option-inline-crop-empty strong { color: var(--text); font-size: 12px; }
.option-inline-crop-empty span { font-size: 10px; line-height: 1.4; }
.main-transparent-footer { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.main-transparent-footer label { display: inline-flex; align-items: center; gap: 3px; }
.main-transparent-footer input { margin: 0; accent-color: var(--primary); }
.main-transparent-workflow { grid-column: 1 / -1; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.main-transparent-workflow > header { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 11px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.main-transparent-workflow > header > div { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.main-transparent-workflow > header span { color: var(--muted); font-size: 10px; }
.main-transparent-workflow > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.main-transparent-workflow > header em { padding: 2px 5px; border-radius: 4px; background: #edf7f2; color: #19714b; font-size: 9px; font-style: normal; white-space: nowrap; }
.main-transparent-workflow > header button { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font-size: 16px; line-height: 1; }
.main-transparent-workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 10px; }
.main-transparent-workflow-grid > section { min-width: 0; display: grid; grid-template-rows: auto auto auto; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.main-transparent-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 21px; }
.main-transparent-pane-head strong { font-size: 12px; }
.main-transparent-pane-head span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.main-transparent-preview { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #e0e3e7; border-radius: 5px; background: #eef0f2; }
.main-transparent-preview > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.main-transparent-source-delete { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: rgba(24, 27, 31, .74); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.main-transparent-source-delete:hover { background: #b42318; }
.main-transparent-workflow .main-inline-crop-frame { min-width: 0; border: 1px solid #e0e3e7; border-radius: 5px; background-color: #fafbfa; background-image: linear-gradient(45deg,rgba(20,30,35,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(20,30,35,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(20,30,35,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(20,30,35,.04) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.main-transparent-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 18px; color: var(--muted); text-align: center; }
.main-transparent-empty strong { color: var(--text); font-size: 12px; }
.main-transparent-empty span { font-size: 10px; line-height: 1.45; }
.main-transparent-workflow-grid footer { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 10px; }
.main-transparent-workflow-grid footer > button, .main-transparent-crop-actions > button, .main-transparent-crop-actions > a { min-height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); font-size: 10px; text-decoration: none; white-space: nowrap; }
.main-transparent-workflow-grid footer > button:not(:disabled), .main-transparent-crop-actions > button:not(:disabled) { border-color: #8dc0ae; background: #edf7f2; color: #176b4e; }
.main-transparent-workflow-grid footer > button:disabled, .main-transparent-crop-actions > button:disabled { opacity: .45; cursor: default; }
.main-transparent-crop-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.logo-library-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 18px 48px rgba(16,24,40,.22); }
.logo-library-dialog::backdrop { background: rgba(16,24,40,.34); }
.logo-library-shell { min-height: 0; display: grid; grid-template-rows: 68px minmax(0,1fr); }
.logo-library-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 18px 0 22px; border-bottom: 1px solid var(--line); }
.logo-library-head h2 { margin: 0; font-size: 18px; }
.logo-library-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.logo-library-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.logo-library-workspace { min-height: 0; overflow-y: auto; padding: 16px 20px 22px; background: #fbfcfc; }
.logo-library-summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.logo-library-summary p { margin: 0; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.logo-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.logo-library-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); transition: border-color .16s ease, box-shadow .16s ease; }
.logo-library-card.selected { border-color: #176b5b; box-shadow: 0 0 0 2px rgba(23,107,91,.12); }
.logo-library-pick { width: 100%; display: grid; gap: 6px; padding: 10px; border: 0; background: transparent; color: var(--text); text-align: left; }
.logo-library-pick:hover { background: #f4f8f7; }
.logo-library-preview { height: 92px; display: grid; place-items: center; overflow: hidden; border: 1px solid #eceff1; border-radius: 5px; background-color: #fff; background-image: linear-gradient(45deg,rgba(20,30,35,.05) 25%,transparent 25%),linear-gradient(-45deg,rgba(20,30,35,.05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(20,30,35,.05) 75%),linear-gradient(-45deg,transparent 75%,rgba(20,30,35,.05) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.logo-library-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-library-pick strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.logo-library-pick small { color: var(--muted); font-size: 11px; }
.logo-library-card.selected .logo-library-pick small { color: #176b5b; }
.logo-library-card-actions { display: flex; gap: 4px; padding: 0 8px 8px; }
.logo-library-card-actions button { flex: 1; min-height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--muted); font-size: 11px; }
.logo-library-card-actions button:hover { border-color: #bfc3c9; color: var(--text); }
.logo-library-card-actions button.danger:hover { border-color: #d6a0a0; color: #a93333; }
.logo-library-empty { grid-column: 1 / -1; min-height: 210px; display: grid; place-content: center; gap: 6px; padding: 24px; border: 1px dashed #cfd3d8; border-radius: 7px; color: var(--muted); text-align: center; }
.logo-library-empty strong { color: var(--text); }
.detail-module { position: relative; min-height: 320px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; cursor: default; box-shadow: 0 4px 18px rgba(28, 31, 36, .05); }
.detail-module:last-of-type { margin-bottom: 16px; }
.module-delete { position: absolute; z-index: 3; top: 8px; right: 8px; width: 25px; height: 25px; display: grid; place-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(20,21,24,.78); color: #fff; font-size: 18px; line-height: 1; opacity: .82; }
.module-delete:hover { background: var(--danger); opacity: 1; }
.module-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.module-header-title { display: inline-flex; min-width: 0; align-items: center; gap: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-header-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.module-number { display: inline-grid; flex: 0 0 auto; width: 31px; height: 24px; place-items: center; border-radius: 4px; background: #1d1f22; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.module-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 750; }
.module-image-wrap { position: relative; overflow: hidden; }
.module-image { width: 100%; display: block; background: var(--panel-soft); }
.module-copy-edit { position: absolute; z-index: 3; top: 9px; left: 9px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.65); border-radius: 6px; background: rgba(20,21,24,.76); color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.module-copy-edit:hover { background: rgba(20,21,24,.94); }
.module-marketing-copy { position: absolute; z-index: 2; max-width: 76%; padding: 12px 14px; border-radius: 9px; color: #fff; cursor: grab; touch-action: none; user-select: none; pointer-events: auto; text-shadow: 0 1px 3px rgba(0,0,0,.3); container-type: inline-size; }
.module-marketing-copy.dragging { cursor: grabbing; }
.module-marketing-copy.resizing { cursor: default; }
.module-marketing-copy.has-custom-position { right: auto !important; bottom: auto !important; transform: none !important; }
.module-marketing-copy:hover { outline: 2px solid rgba(114,92,255,.72); outline-offset: 2px; }
.module-marketing-copy:focus-visible { outline: 3px solid rgba(114,92,255,.9); outline-offset: 3px; }
.module-marketing-copy.layout-top_left { top: 7%; left: 6%; right: 10%; background: linear-gradient(105deg, rgba(20,20,26,.78), rgba(20,20,26,.34), transparent); }
.module-marketing-copy.layout-top_center { top: 6%; left: 50%; width: min(82%, 460px); transform: translateX(-50%); text-align: center; background: linear-gradient(180deg, rgba(20,20,26,.68), rgba(20,20,26,.18)); }
.module-marketing-copy.layout-left_panel { top: 50%; left: 5%; width: 45%; transform: translateY(-50%); background: rgba(20,20,26,.76); }
.module-marketing-copy.layout-right_panel { top: 50%; right: 5%; width: 45%; transform: translateY(-50%); background: rgba(20,20,26,.76); }
.module-marketing-copy.layout-bottom_band { right: 0; bottom: 5%; left: 0; max-width: none; padding: 14px 7%; background: linear-gradient(90deg, rgba(20,20,26,.84), rgba(20,20,26,.5)); }
.module-marketing-copy.layout-center_card { top: 50%; left: 50%; width: min(70%, 410px); transform: translate(-50%, -50%); text-align: center; background: rgba(20,20,26,.7); backdrop-filter: blur(2px); }
.module-marketing-copy.copy-align-center { text-align: center; }
.module-marketing-copy.copy-align-center .marketing-copy-points-row { justify-content: center; }
.module-marketing-copy.copy-align-right { text-align: right; }
.module-marketing-copy.copy-align-right .marketing-copy-points-row { justify-content: flex-end; }
.module-marketing-copy.theme-light { color: #1e2230; text-shadow: none; background: rgba(255,255,255,.85); }
.module-marketing-copy.theme-light span { border-color: rgba(30,34,48,.36); background: rgba(255,255,255,.45); }
.module-marketing-copy.theme-warm { color: #fff9ee; background: rgba(144,62,32,.8); }
.module-marketing-copy.theme-bold { color: #fff; background: rgba(43,34,125,.86); }
.marketing-copy-item { --copy-item-scale: 1; position: relative; z-index: 2; cursor: move; touch-action: none; }
.marketing-copy-item.has-item-position { position: absolute; margin: 0 !important; white-space: nowrap; }
.module-marketing-copy.copy-align-left .marketing-copy-item.has-item-position { left: 6% !important; right: auto; transform: none; }
.module-marketing-copy.copy-align-center .marketing-copy-item.has-item-position { left: 50% !important; right: auto; transform: translateX(-50%); }
.module-marketing-copy.copy-align-right .marketing-copy-item.has-item-position { right: 6%; left: auto !important; transform: none; }
.module-marketing-copy strong { display: block; font-size: clamp(10px, calc(8.14cqw * var(--copy-item-scale)), 96px); line-height: 1.18; letter-spacing: .04em; }
.module-marketing-copy p { margin: 5px 0 0; font-size: clamp(8px, calc(4cqw * var(--copy-item-scale)), 48px); line-height: 1.45; }
.marketing-copy-points-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.marketing-copy-points-row span { padding: 3px 7px; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; background: rgba(255,255,255,.12); font-size: clamp(8px, calc(3.6cqw * var(--copy-item-scale)), 40px); line-height: 1.35; }
.marketing-copy-item-delete, .marketing-copy-card-delete { position: absolute; z-index: 8; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(24,25,29,.92); color: #fff; font-size: 16px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.marketing-copy-item-delete { top: -9px; right: -10px; opacity: 0; pointer-events: none; }
.marketing-copy-item:hover .marketing-copy-item-delete, .marketing-copy-item:focus-within .marketing-copy-item-delete { opacity: 1; pointer-events: auto; }
.marketing-copy-card-delete { top: -10px; right: -10px; }
.marketing-copy-item-delete:hover, .marketing-copy-card-delete:hover { border-color: #fff; background: #c63b3b; }
.module-marketing-copy .marketing-copy-item-resize { position: absolute; z-index: 7; right: -7px; bottom: -7px; display: block; width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 2px; background: #6251d5; color: transparent; font-size: 0; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.28); cursor: nwse-resize; }
.module-marketing-copy.theme-light .marketing-copy-item-resize { border-color: #fff; background: #6251d5; }
.module-marketing-copy .marketing-copy-item.resizing-item .marketing-copy-item-resize { background: #3e2dbb; }
.marketing-copy-resize { position: absolute; z-index: 6; display: block; }
.marketing-copy-resize.resize-n, .marketing-copy-resize.resize-s { right: 13px; left: 13px; height: 8px; cursor: ns-resize; }
.marketing-copy-resize.resize-n { top: -4px; }
.marketing-copy-resize.resize-s { bottom: -4px; }
.marketing-copy-resize.resize-e, .marketing-copy-resize.resize-w { top: 13px; bottom: 13px; width: 8px; cursor: ew-resize; }
.marketing-copy-resize.resize-e { right: -4px; }
.marketing-copy-resize.resize-w { left: -4px; }
.module-marketing-copy.style-editorial { border-left: 3px solid rgba(255,255,255,.88); border-radius: 2px 10px 10px 2px; }
.module-marketing-copy.style-clean { border: 1px solid rgba(30,34,48,.16); border-radius: 5px; box-shadow: 0 8px 22px rgba(27,31,37,.09); }
.module-marketing-copy.style-square_badge { top: 5%; left: 5%; right: auto; width: 48%; padding: 11px 12px; border: 1px solid rgba(30,34,48,.18); border-radius: 5px; box-shadow: 0 5px 16px rgba(27,31,37,.1); }
.module-marketing-copy.style-square_badge strong { font-size: clamp(18px, 3.6vw, 29px); }
.module-marketing-copy.style-square_badge > div { gap: 4px; margin-top: 7px; }
.module-marketing-copy.style-square_band { bottom: 0; left: 0; right: 0; padding: 13px 7%; border-radius: 0; background: rgba(18,20,25,.88); }
.module-marketing-copy.style-warm_story { border-top: 3px solid rgba(255,233,193,.92); border-radius: 3px 3px 10px 10px; }
.module-marketing-copy.style-center_focus { border: 1px solid rgba(255,255,255,.34); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.module-marketing-copy.style-right_accent { border-right: 4px solid rgba(255,255,255,.86); border-radius: 10px 2px 2px 10px; }
.module-marketing-copy.style-minimal_top { padding: 8px 12px; border-bottom: 2px solid currentColor; border-radius: 0; background: rgba(255,255,255,.58); }
.module-marketing-copy.style-minimal_top strong { font-size: clamp(18px, 3.5vw, 28px); }
.module-marketing-copy.style-pure_text { max-width: 68%; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; text-shadow: 0 2px 5px rgba(0,0,0,.78), 0 0 2px rgba(0,0,0,.9); }
.module-marketing-copy.style-pure_text .marketing-copy-points-row { gap: 9px; margin-top: 8px; }
.module-marketing-copy.style-pure_text .marketing-copy-points-row span { padding: 0; border: 0; border-radius: 0; background: transparent; }
.module-marketing-copy.style-pure_text.theme-light { text-shadow: 0 1px 3px rgba(255,255,255,.78); }
.module-marketing-copy.style-custom_reference { border: 1px solid rgba(255,255,255,.46); border-left-width: 4px; border-radius: 4px 13px 13px 4px; box-shadow: 0 10px 24px rgba(22,24,29,.18); backdrop-filter: blur(2px); }
.module-marketing-copy.style-custom_reference.custom-tone-graphite { background: rgba(30,33,38,.8); color: #fff; }
.module-marketing-copy.style-custom_reference.custom-tone-linen { background: rgba(246,240,228,.88); color: #26262a; text-shadow: none; }
.module-marketing-copy.style-custom_reference.custom-tone-sage { background: rgba(54,83,72,.84); color: #f6faf4; }
.module-marketing-copy.style-custom_reference.custom-tone-terracotta { background: rgba(145,68,41,.84); color: #fff5ed; }
.module-marketing-copy.style-custom_reference.custom-tone-cobalt { background: rgba(42,62,124,.86); color: #f4f6ff; }
.module-marketing-copy.style-custom_layout { padding: 0; overflow: visible; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; text-shadow: none; }
.module-marketing-copy.style-custom_layout:not(.has-layout-image) { padding: 12px 14px; border: 1px dashed rgba(255,255,255,.78); border-radius: 7px; background: rgba(28,30,36,.72); }
.module-marketing-copy.style-custom_layout .marketing-copy-points-row { margin-top: 0; }
.module-marketing-copy.style-custom_layout .marketing-copy-item:not(.has-item-position) { margin-left: 14px; margin-top: 9px; }
.module-marketing-copy.style-vector_layout { padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; text-shadow: 0 1px 2px rgba(0,0,0,.24); }
.module-marketing-copy.style-vector_layout .marketing-copy-points-row { position: relative; z-index: 2; }
.module-marketing-copy.style-vector_layout .marketing-copy-item:not(.has-item-position) { margin: 0; }
.marketing-copy-vector-element { position: absolute; display: block; z-index: 1; pointer-events: auto; }
.marketing-copy-vector-shape { z-index: 0; }
.marketing-copy-vector-symbol { display: grid; width: max-content; height: max-content; place-items: center; font-family: Georgia, "Times New Roman", serif; font-weight: 800; line-height: 1; transform: translate(-50%, -50%); }
.marketing-copy-vector-delete { position: absolute; z-index: 5; top: -10px; right: -10px; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(24,25,29,.92); color: #fff; font-size: 16px; line-height: 1; opacity: 0; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.marketing-copy-vector-symbol .marketing-copy-vector-delete { top: -7px; right: -12px; }
.marketing-copy-vector-element:hover .marketing-copy-vector-delete, .marketing-copy-vector-element:focus-within .marketing-copy-vector-delete { opacity: 1; pointer-events: auto; }
.marketing-copy-vector-delete:hover { border-color: #fff; background: #c63b3b; }
.marketing-copy-card { width: min(1060px, calc(100vw - 32px)); }
.marketing-copy-editor-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .9fr); gap: 18px; align-items: start; }
.marketing-copy-editor-preview { position: sticky; top: 0; display: grid; min-height: 520px; place-items: center; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #f3f4f5; }
.marketing-copy-preview-loading { display: grid; min-height: 260px; width: min(100%, 340px); place-items: center; padding: 24px; border: 1px dashed #cbd0d6; border-radius: 6px; color: var(--muted); font-size: 13px; text-align: center; }
.marketing-copy-preview-image { position: relative; width: min(100%, 540px); overflow: hidden; box-shadow: 0 8px 25px rgba(20,21,24,.12); }
.marketing-copy-preview-image > img { display: block; width: 100%; height: auto; }
.marketing-copy-preview-image .module-marketing-copy.is-editor-placeholder { outline: 1px dashed rgba(255,255,255,.82); outline-offset: 4px; }
.marketing-copy-layout-status { position: absolute; z-index: 7; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border: 1px solid rgba(255,255,255,.74); border-radius: 5px; background: rgba(24,26,31,.8); color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.18); pointer-events: none; }
.marketing-copy-layout-status i { width: 7px; height: 7px; border-radius: 50%; background: #7cd6aa; }
.marketing-copy-layout-status.is-busy i { background: #f3c26b; animation: marketing-copy-pulse 1s ease-in-out infinite; }
@keyframes marketing-copy-pulse { 50% { opacity: .35; transform: scale(.72); } }
.marketing-copy-editor-controls { display: grid; gap: 12px; }
.marketing-copy-ai-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) auto; align-items: end; gap: 8px; }
.marketing-copy-ai-row .button { min-height: 42px; white-space: nowrap; }
.marketing-copy-opacity { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.marketing-copy-opacity input { min-width: 0; accent-color: var(--accent); }
.marketing-copy-opacity output { min-width: 35px; color: var(--muted); font-size: 12px; text-align: right; }
.marketing-copy-align { display: grid; grid-template-columns: auto minmax(140px, 1fr); align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.marketing-copy-align select { min-width: 0; }
.marketing-copy-learn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.marketing-copy-learn span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.marketing-copy-learn .button { flex: 0 0 auto; }
.marketing-copy-template-library { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; background: #fbfcfd; }
.marketing-copy-template-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.marketing-copy-template-head span { color: var(--text); font-size: 13px; font-weight: 650; }
.marketing-copy-template-head small { color: var(--muted); font-size: 11px; }
.marketing-copy-template-head > div { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }
.marketing-copy-template-head .button { min-height: 28px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
.marketing-copy-template-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.marketing-copy-template-save input { min-width: 0; }
.marketing-copy-template-save .button { min-height: 38px; white-space: nowrap; }
.marketing-copy-template-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.marketing-copy-template-empty { color: var(--muted); font-size: 11px; line-height: 1.4; }
.marketing-copy-template-item { display: inline-grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.marketing-copy-template-apply { min-width: 0; max-width: 180px; padding: 5px 8px; overflow: hidden; border: 0; background: transparent; color: var(--text); font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.marketing-copy-template-apply:hover { background: var(--accent-soft); color: var(--accent); }
.marketing-copy-template-delete { width: 27px; padding: 0; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 16px; line-height: 1; }
.marketing-copy-template-delete:hover { background: #fff2f2; color: var(--danger); }
.marketing-copy-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.marketing-copy-style-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.marketing-copy-style-head span { font-size: 14px; font-weight: 650; }
.marketing-copy-style-head small { color: var(--muted); font-size: 12px; }
.marketing-copy-style-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.marketing-copy-style { min-height: 82px; display: grid; grid-template-rows: 30px auto auto; align-content: center; justify-items: start; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); color: var(--text); text-align: left; }
.marketing-copy-style:hover { border-color: var(--accent); background: #f6f4ff; }
.marketing-copy-style.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #f6f4ff; }
.marketing-copy-style i { position: relative; display: block; width: 100%; height: 30px; overflow: hidden; border-radius: 3px; background: #24262c; }
.marketing-copy-style i::before, .marketing-copy-style i::after { content: ""; position: absolute; display: block; }
.marketing-copy-style b { font-size: 11px; line-height: 1.2; }
.marketing-copy-style span { color: var(--muted); font-size: 10px; line-height: 1.2; }
.marketing-copy-style.style-editorial i::before { top: 7px; left: 6px; width: 43%; height: 3px; background: #fff; box-shadow: 0 6px 0 rgba(255,255,255,.76), 0 12px 0 rgba(255,255,255,.42); }
.marketing-copy-style.style-clean i { background: #f8f8f6; border: 1px solid #dfe1e3; }
.marketing-copy-style.style-clean i::before { top: 7px; left: 7px; width: 45%; height: 3px; background: #25282c; box-shadow: 0 7px 0 #73777d; }
.marketing-copy-style.style-clean i::after { right: 7px; top: 6px; width: 17px; height: 17px; border: 1px solid #70757b; border-radius: 50%; }
.marketing-copy-style.style-square_badge i { background: #f4f4f1; border: 1px solid #d9dbdc; }
.marketing-copy-style.style-square_badge i::before { top: 5px; left: 5px; width: 45%; height: 19px; border: 1px solid #4b4e52; }
.marketing-copy-style.style-square_badge i::after { top: 9px; left: 9px; width: 28%; height: 3px; background: #4b4e52; box-shadow: 0 6px 0 #85898d; }
.marketing-copy-style.style-square_band i::before { right: 0; bottom: 0; left: 0; height: 11px; background: #d7d8d4; }
.marketing-copy-style.style-square_band i::after { bottom: 4px; left: 7px; width: 44%; height: 2px; background: #34363b; box-shadow: 0 -4px 0 #34363b; }
.marketing-copy-style.style-warm_story i { background: #a34f34; }
.marketing-copy-style.style-warm_story i::before { bottom: 5px; left: 6px; width: 50%; height: 3px; background: #fff4df; box-shadow: 0 -6px 0 rgba(255,244,223,.7); }
.marketing-copy-style.style-center_focus i::before { top: 6px; left: 24%; width: 52%; height: 18px; border: 1px solid rgba(255,255,255,.72); }
.marketing-copy-style.style-center_focus i::after { top: 11px; left: 33%; width: 34%; height: 3px; background: #fff; box-shadow: 0 6px 0 rgba(255,255,255,.6); }
.marketing-copy-style.style-right_accent i { background: #2f3c70; }
.marketing-copy-style.style-right_accent i::before { top: 6px; right: 6px; width: 43%; height: 3px; background: #fff; box-shadow: 0 7px 0 rgba(255,255,255,.76), 0 14px 0 rgba(255,255,255,.45); }
.marketing-copy-style.style-minimal_top i { background: #f8f8f6; border-bottom: 2px solid #2c2f33; }
.marketing-copy-style.style-minimal_top i::before { top: 7px; left: 27%; width: 46%; height: 3px; background: #2c2f33; box-shadow: 0 6px 0 #8b8e92; }
.marketing-copy-style.style-pure_text i { background: #6b6d71; }
.marketing-copy-style.style-pure_text i::before { top: 7px; left: 7px; width: 50%; height: 3px; background: #fff; box-shadow: 0 7px 0 rgba(255,255,255,.78), 0 14px 0 rgba(255,255,255,.56); }
.marketing-copy-style.style-custom_reference i { background: #32465d; border-left: 3px solid #e8e3d8; }
.marketing-copy-style.style-custom_reference i::before { top: 6px; left: 8px; width: 48%; height: 3px; background: #fff; box-shadow: 0 7px 0 rgba(255,255,255,.75); }
.marketing-copy-style.style-custom_reference i::after { right: 7px; bottom: 6px; width: 15px; height: 10px; border: 1px solid rgba(255,255,255,.75); }
.marketing-copy-style.style-custom_layout i { background: #ece6dd; border-radius: 9px 9px 5px 5px; }
.marketing-copy-style.style-custom_layout i::before { right: 8px; bottom: 7px; left: 8px; height: 11px; border-radius: 8px; background: #754125; }
.marketing-copy-style.style-custom_layout i::after { bottom: 11px; left: 31%; width: 37%; height: 3px; background: #fff; }
.marketing-copy-style.style-vector_layout i { background: #f0ebe2; }
.marketing-copy-style.style-vector_layout i::before { right: 5px; bottom: 5px; left: 5px; height: 12px; border-radius: 7px; background: #704124; }
.marketing-copy-style.style-vector_layout i::after { right: 9px; bottom: 7px; width: 5px; height: 15px; border-radius: 3px; background: #fff; transform: rotate(12deg); }
.marketing-copy-custom-layout { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 8px; padding: 10px; border: 1px dashed #b9afdf; border-radius: 7px; background: #faf9ff; }
.marketing-copy-custom-layout > div { display: grid; gap: 2px; }
.marketing-copy-custom-layout-head { grid-column: 1 / -1; display: flex !important; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.marketing-copy-custom-layout-head > div:first-child { min-width: 0; }
.marketing-copy-reference-template-head-actions { display: flex !important; flex: 0 0 auto; gap: 6px; }
.marketing-copy-reference-template-head-actions .button { min-height: 30px; white-space: nowrap; }
.marketing-copy-custom-layout strong { font-size: 13px; }
.marketing-copy-custom-layout span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.marketing-copy-design-library { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.marketing-copy-design-list { display: contents !important; }
.marketing-copy-design-add { min-height: 98px; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 8px; border: 1px dashed #9f94ce; border-radius: 6px; background: #fff; color: var(--accent); }
.marketing-copy-design-add:hover { border-color: var(--accent); background: #f4f1ff; }
.marketing-copy-design-add b { font-size: 30px; font-weight: 350; line-height: 1; }
.marketing-copy-design-add small { color: var(--muted); font-size: 11px; }
.marketing-copy-design-item { position: relative; min-width: 0; height: 98px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.marketing-copy-design-item.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.marketing-copy-design-select { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--text); text-align: left; }
.marketing-copy-design-select:hover { background: #f7f6ff; }
.marketing-copy-design-select img { width: 100%; height: 70px; display: block; object-fit: contain; background: #f1f2f4; }
.marketing-copy-design-select span { min-width: 0; padding: 5px 7px; overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.marketing-copy-design-delete { position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px; display: grid; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.84); border-radius: 50%; background: rgba(27,29,34,.82); color: #fff; font-size: 16px; line-height: 1; }
.marketing-copy-design-delete:hover { background: var(--danger); }
.marketing-copy-design-actions { grid-column: 1 / -1; display: flex !important; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.marketing-copy-design-actions > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing-copy-design-actions .button { flex: 0 0 auto; min-height: 30px; }
.marketing-copy-reference-modes { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.marketing-copy-reference-mode { display: flex !important; min-width: 0; align-items: flex-start; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; }
.marketing-copy-reference-mode:has(input:checked) { border-color: var(--accent); background: #f6f4ff; box-shadow: inset 0 0 0 1px var(--accent); }
.marketing-copy-reference-mode input { width: auto !important; margin-top: 2px; accent-color: var(--accent); }
.marketing-copy-reference-mode span { display: grid; gap: 2px; min-width: 0; }
.marketing-copy-reference-mode b { font-size: 12px; }
.marketing-copy-reference-mode small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.marketing-copy-reference-quality { grid-column: 1 / -1; margin: 0; padding: 6px 8px; border-radius: 5px; background: rgba(92,81,197,.08); color: var(--muted); font-size: 11px; line-height: 1.4; }
.marketing-copy-reference-quality.is-limited { background: #fff6e7; color: #9a6200; }
.marketing-copy-reference-template-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.marketing-copy-reference-template-actions input { min-width: 0; }
.marketing-copy-reference-template-actions .button { min-height: 34px; white-space: nowrap; }
.marketing-copy-reference-crop-card { width: min(860px, calc(100vw - 32px)); }
.marketing-copy-reference-crop-card > header { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.marketing-copy-reference-crop-card > header h2 { margin: 0; font-size: 18px; }
.marketing-copy-reference-crop-card > header p { margin: 6px 38px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.marketing-copy-reference-crop-canvas { position: relative; width: min(100%, 760px); max-height: min(66dvh, 680px); margin: 16px auto; overflow: auto; background: #202227; touch-action: none; user-select: none; }
.marketing-copy-reference-crop-canvas img { display: block; width: 100%; height: auto; max-height: min(66dvh, 680px); object-fit: contain; pointer-events: none; }
.marketing-copy-reference-crop-selection { position: absolute; z-index: 2; box-sizing: border-box; border: 2px solid #fff; outline: 9999px solid rgba(13,15,20,.56); background: rgba(127,105,255,.12); box-shadow: 0 0 0 1px rgba(74,54,190,.9), 0 1px 8px rgba(0,0,0,.35); pointer-events: none; }
.marketing-copy-reference-crop-selection::after { content: "学习区域"; position: absolute; top: -25px; left: -2px; padding: 4px 6px; border-radius: 4px 4px 0 0; background: #5544bd; color: #fff; font-size: 11px; line-height: 1; white-space: nowrap; }
.marketing-copy-reference-crop-hint { position: absolute; z-index: 1; top: 50%; left: 50%; max-width: 75%; padding: 7px 9px; border: 1px solid rgba(255,255,255,.56); border-radius: 5px; background: rgba(20,22,27,.76); color: #fff; font-size: 12px; line-height: 1.35; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.marketing-copy-reference-crop-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.marketing-copy-reference-crop-card footer p { margin: 0; color: var(--muted); font-size: 12px; }
.marketing-copy-reference-crop-card footer > div { display: inline-flex; gap: 8px; }
.module-placeholder { min-height: 250px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 26px; background: linear-gradient(145deg, #f7f6ff, #f2f3f5); color: var(--muted); }
.module-placeholder strong { display: block; color: var(--text); margin-bottom: 8px; }
.module-placeholder p { max-width: 340px; margin: 0; font-size: 13px; line-height: 1.6; }
.module-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.module-actions button { border: 0; background: transparent; color: var(--muted); }
.module-actions button:hover { color: var(--text); }
.module-actions > div { display: flex; align-items: center; gap: 12px; }
.module-actions-right { margin-left: auto; }
.module-position-control { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.module-position-control input { width: 38px; height: 27px; padding: 0 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); color: var(--text); font: inherit; font-size: 12px; line-height: 1; text-align: center; }
.module-position-control input:focus { outline: 2px solid rgba(114,92,255,.22); border-color: var(--accent); }
.module-sort-actions { display: inline-flex; align-items: center; gap: 5px; padding-left: 2px; }
.module-header .module-sort-button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: var(--panel-soft); color: var(--muted); font-size: 16px; line-height: 1; }
.module-header .module-sort-button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.module-header .module-sort-button:disabled { opacity: .42; cursor: not-allowed; }
.module-review { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; background: #e7f6ed; color: var(--success); font-size: 11px; white-space: nowrap; }
.module-review.needs-work { background: #fff2e2; color: #a45500; }
.detail-add-card { width: 100%; min-height: 96px; display: grid; place-content: center; gap: 6px; border: 1px dashed #cfd2d7; border-radius: 10px; background: transparent; color: var(--muted); }
.detail-add-card:hover, .detail-add-card.drag-over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.panel-resizer { position: sticky; top: 12px; width: 8px; height: calc(100vh - 24px); height: calc(100dvh - 24px); min-height: 0; align-self: start; cursor: col-resize; touch-action: none; background: var(--bg); z-index: 4; }
.panel-resizer::after { content: ""; position: absolute; left: 3px; top: 0; width: 2px; height: 100%; background: var(--line); transition: background .15s, width .15s, left .15s; }
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizer.dragging::after { left: 2px; width: 4px; background: var(--accent); }
.panel-resizer:focus-visible { outline: 0; }
.app-shell.resizing { cursor: col-resize; user-select: none; }
.chat-panel { position: sticky; top: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); min-height: 0; min-width: 0; align-self: start; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); }
.chat-header { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; padding: 17px 18px 5px; border-bottom: 1px solid var(--line); }
.chat-header-info { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-header-title { min-width: 108px; flex: 1 1 auto; }
.chat-credit-badge { min-width: 0; max-width: 180px; flex: 0 1 auto; overflow: hidden; padding: 4px 6px; font-size: 10px; text-overflow: ellipsis; }
.chat-header-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-left: auto; }
.ai-image-picker-toggle { min-height: 27px; padding: 0 8px; border: 1px solid #1d1f22; border-radius: 6px; background: #1d1f22; color: #fff; font-size: 11px; white-space: nowrap; }
.ai-image-picker-toggle:hover, .ai-image-picker-toggle[aria-expanded="true"] { border-color: #42464d; background: #101114; color: #fff; }
.ai-image-picker-panel { position: absolute; z-index: 25; top: calc(100% + 1px); right: 10px; left: 10px; height: min(680px, calc(100dvh - 100% - 24px)); min-height: 260px; max-height: calc(100dvh - 100% - 24px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; padding: 10px; border: 1px solid #d8d3ff; border-radius: 8px; background: var(--panel); box-shadow: 0 15px 32px rgba(27,31,38,.16); }
.ai-image-picker-panel[hidden] { display: none; }
.ai-image-picker-head, .ai-image-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.ai-image-picker-head strong { font-size: 12px; }
.ai-image-picker-head span, .ai-image-picker-footer span { color: var(--muted); font-size: 10px; }
.ai-image-picker-grid { min-height: 120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min(122px, calc((100dvh - 190px) / 4)); align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 1px; }
.ai-image-picker-item { position: relative; min-width: 0; min-height: 0; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f4f5f7; cursor: pointer; }
.ai-image-picker-item:hover { border-color: #a89bff; }
.ai-image-picker-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(114,92,255,.16); }
.ai-image-picker-item.added { opacity: .56; cursor: default; }
.ai-image-picker-item input { position: absolute; z-index: 2; top: 5px; left: 5px; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.ai-image-picker-item img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform 160ms ease; }
.ai-image-picker-item:hover img { transform: scale(1.045); }
.ai-image-picker-item span { position: absolute; right: 4px; bottom: 4px; max-width: calc(100% - 8px); overflow: hidden; padding: 2px 4px; border-radius: 4px; background: rgba(20,21,24,.68); color: #fff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ai-image-picker-empty { grid-column: 1 / -1; min-height: 84px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.ai-image-picker-footer { position: relative; z-index: 1; min-height: 39px; padding-top: 8px; border-top: 1px solid var(--line); background: var(--panel); }
.ai-image-picker-actions { display: inline-flex; align-items: center; gap: 6px; }
.ai-image-picker-footer .button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.status-dot { padding: 5px 9px; border-radius: 999px; background: var(--panel-soft); color: var(--muted); font-size: 12px; }
.status-dot.ready { background: #e7f6ed; color: var(--success); }
.composer-mode { grid-column: 1; grid-row: 1; min-width: 0; align-self: start; color: var(--muted); font-size: 12px; transform: translateY(2px); }
.composer-mode-control { display: flex; align-items: center; gap: 5px; }
.composer-mode select { width: 66px; min-height: 25px; padding: 0 17px 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 11px; }
.dialogue-action-settings { min-height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 10px; line-height: 1; white-space: nowrap; }
.dialogue-action-settings:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dialogue-action-menu { position: absolute; z-index: 12; bottom: calc(100% + 8px); left: 10px; width: min(342px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border: 1px solid rgba(114,92,255,.28); border-radius: 7px; background: var(--panel); box-shadow: 0 10px 25px rgba(27,31,38,.16); }
.dialogue-action-menu[hidden] { display: none; }
.dialogue-action-option { width: 100%; display: block; min-height: 34px; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; }
.dialogue-action-option:hover, .dialogue-action-option.active { background: var(--accent-soft); }
.dialogue-action-option strong { display: block; overflow: hidden; color: var(--accent); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mode-help { grid-column: 1 / 3; grid-row: 3; min-width: 0; max-width: 100%; align-self: start; justify-self: start; display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.composer-options { grid-column: 1 / 3; grid-row: 2; align-self: center; justify-self: start; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px 9px; }
.image-generation-settings { flex: 0 0 auto; display: inline-flex; align-items: center; }
.image-size-option { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; }
.image-size-option select { width: 68px; min-height: 24px; padding: 0 18px 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); font-size: 10px; }
.image-size-header { flex: 0 0 auto; }
.custom-smart-option, .analysis-first-option, .ai-review-option { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; }
.analysis-first-option { color: var(--text); }
.composer-options input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.custom-image-preview { display: flex; min-height: 72px; gap: 7px; overflow-x: auto; margin: -2px -2px 9px; padding: 2px 2px 9px; border-bottom: 1px solid var(--line); }
.custom-preview-item { position: relative; flex: 0 0 62px; }
.custom-preview-item img { display: block; width: 62px; height: 62px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.custom-preview-item small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.custom-preview-item button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(16,24,40,.78); color: #fff; line-height: 18px; }
.custom-preview-add { flex: 0 0 62px; height: 62px; display: grid; place-content: center; gap: 2px; padding: 0; border: 1px dashed #cfd2d7; border-radius: 6px; background: var(--panel-soft); color: var(--muted); }
.custom-preview-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.custom-preview-add span { font-size: 22px; line-height: 22px; }
.custom-preview-add small { font-size: 10px; letter-spacing: 0; }
.custom-image-preview .dialogue-general-add { order: 2; }
.custom-image-preview .dialogue-bound-model-reference { cursor: grab; }
.custom-image-preview .dialogue-bound-model-reference img { border-color: var(--text); box-shadow: 0 0 0 1px var(--panel); }
.custom-image-preview .dialogue-bound-model-reference.is-dragging { opacity: .45; }
.custom-image-preview .dialogue-fixed-face { order: 3; margin-left: auto; }
.custom-image-preview .dialogue-fixed-face-add { order: 4; margin-left: auto; }
.custom-image-preview .dialogue-fixed-face + .dialogue-fixed-face-add { margin-left: 0; }
.custom-image-login-gate { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 10px 12px; border: 1px solid #ddd6fe; border-radius: 6px; background: #faf7ff; }
.custom-image-login-gate > div { display: grid; gap: 3px; min-width: 0; }
.custom-image-login-gate strong { color: var(--text); font-size: 13px; }
.custom-image-login-gate small { color: var(--muted); font-size: 11px; }
.custom-image-login-gate .button { flex: 0 0 auto; white-space: nowrap; }
.fixed-face-library-dialog { width: min(1180px, calc(100vw - 28px)); height: min(760px, calc(100vh - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 18px 48px rgba(16,24,40,.22); }
.fixed-face-library-dialog::backdrop { background: rgba(16,24,40,.34); }
.model-library-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: 66px minmax(0,1fr); }
.fixed-face-library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 0 22px; border-bottom: 1px solid var(--line); }
.fixed-face-library-head h2 { margin: 0; font-size: 18px; }
.fixed-face-library-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.model-library-head-actions, .model-library-admin-actions { display: flex; align-items: center; gap: 7px; }
.model-library-admin-actions .button { min-height: 30px; padding: 0 10px; }
.model-library-icon-button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 19px; line-height: 1; }
.model-library-icon-button:hover { border-color: #bfc3c9; background: var(--panel-soft); }
.model-library-create-actions { display: inline-flex; align-items: center; gap: 5px; }
.model-library-ai-button { width: auto; min-width: 76px; padding: 0 8px; color: #5043a8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.model-library-ai-button:hover { border-color: #aaa1ea; background: #f4f1ff; color: #4435a1; }
.model-library-layout { min-height: 0; display: grid; grid-template-columns: 228px minmax(0,1fr); }
.model-profile-sidebar { min-height: 0; padding: 16px 12px; overflow-y: auto; border-right: 1px solid var(--line); background: #f6f7f8; }
.model-profile-sidebar-head { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.model-profile-sidebar-head strong { font-size: 12px; }
.model-profile-sidebar > .muted { margin: 4px 4px 12px; font-size: 10px; }
.fixed-face-library-grid { display: grid; gap: 5px; }
.fixed-face-library-card { min-width: 0; width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 68px; padding: 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); text-align: left; }
.fixed-face-library-card:hover { background: #eceef1; }
.fixed-face-library-card.active { border-color: #d5d0f8; background: #eeeafd; }
.fixed-face-library-card img, .fixed-face-library-card .model-profile-thumb-empty { width: 42px; height: 54px; display: grid; place-items: center; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #f4f5f6; color: var(--muted); }
.fixed-face-library-card span { min-width: 0; display: grid; gap: 3px; }
.fixed-face-library-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.fixed-face-library-card small { color: var(--muted); font-size: 9px; }
.fixed-face-library-card b { width: 7px; height: 7px; border-radius: 50%; background: #a4a8af; }
.fixed-face-library-card.bound b { background: #1b8a61; box-shadow: 0 0 0 3px rgba(27,138,97,.11); }
.model-profile-workspace { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 22px 28px; background: #fff; }
.model-profile-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.model-profile-empty strong { color: var(--text); font-size: 16px; }
.model-profile-empty p { max-width: 360px; margin: 0 0 8px; font-size: 12px; line-height: 1.65; }
.model-profile-empty-actions { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.model-profile-titlebar { position: sticky; z-index: 6; top: -20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -20px -22px 0; padding: 14px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 5px 12px rgba(16,24,40,.04); }
.model-profile-titlebar > div:first-child { min-width: 0; display: grid; gap: 4px; }
.model-profile-titlebar input { min-width: 0; max-width: 360px; padding: 3px 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 20px; font-weight: 650; }
.model-profile-titlebar input:focus { border-bottom-color: var(--accent); }
  .model-profile-titlebar small { color: var(--muted); font-size: 10px; }
  .model-profile-titlebar .model-profile-policy-state { color: #7a5f22; line-height: 1.35; }
.model-profile-title-actions { display: flex; align-items: center; gap: 7px; }
.model-profile-title-actions .danger { color: #a93333; }
.model-profile-section { padding-top: 20px; }
.model-profile-section-head { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.model-profile-section-head h3 { margin: 0; font-size: 14px; }
.model-profile-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.model-profile-anchors { display: grid; grid-template-columns: repeat(3,minmax(0,150px)); gap: 10px; }
.model-anchor-slot { position: relative; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px dashed #cfd2d7; border-radius: 7px; background: #f7f7f8; color: var(--muted); }
.model-anchor-slot:hover { border-color: var(--accent); color: var(--accent); }
.model-anchor-slot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.model-anchor-slot span { display: grid; justify-items: center; gap: 4px; font-size: 10px; }
.model-anchor-slot span b { font-size: 23px; font-weight: 400; line-height: 1; }
.model-anchor-slot em { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; border-radius: 4px; background: rgba(20,22,27,.72); color: #fff; font-size: 9px; font-style: normal; opacity: 0; }
.model-anchor-slot:hover em { opacity: 1; }
.model-anchor-crop-dialog { width: min(880px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); box-shadow: 0 24px 70px rgba(16,18,24,.28); }
.model-anchor-crop-dialog::backdrop { background: rgba(20,22,27,.46); }
.model-anchor-crop-card { position: relative; padding: 22px; }
.model-anchor-crop-card > .dialog-close { position: absolute; top: 13px; right: 13px; }
.model-anchor-crop-card > header { padding: 0 38px 13px 0; border-bottom: 1px solid var(--line); }
.model-anchor-crop-card h2 { margin: 0; font-size: 17px; }
.model-anchor-crop-card header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.model-anchor-crop-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(190px, 1fr); align-items: center; gap: 20px; padding: 18px 0; }
.model-anchor-crop-stage-wrap { position: relative; width: min(100%, 380px); justify-self: center; overflow: hidden; border-radius: 6px; background: #202227; box-shadow: 0 0 0 1px rgba(0,0,0,.15); touch-action: none; user-select: none; }
.model-anchor-crop-stage-wrap canvas { width: 100%; height: auto; display: block; cursor: grab; }
.model-anchor-crop-stage-wrap canvas:active { cursor: grabbing; }
.model-anchor-crop-stage-hint { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; border-radius: 4px; color: #fff; background: rgba(20,22,27,.72); font-size: 10px; pointer-events: none; }
.model-anchor-crop-guide { display: grid; align-content: center; gap: 9px; color: var(--muted); }
.model-anchor-crop-guide strong { color: var(--text); font-size: 13px; }
.model-anchor-crop-guide p { margin: 0; font-size: 12px; line-height: 1.65; }
.model-anchor-crop-zoom { display: grid; gap: 6px; margin-top: 5px; color: var(--text); font-size: 11px; }
.model-anchor-crop-zoom span { display: flex; justify-content: space-between; }
.model-anchor-crop-zoom output { color: var(--muted); }
.model-anchor-crop-zoom input { width: 100%; margin: 0; accent-color: var(--accent); }
.model-anchor-crop-card footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.model-anchor-crop-card footer p { margin: 0; color: var(--muted); font-size: 11px; }
.model-anchor-crop-card footer > div { display: inline-flex; gap: 8px; }
.model-face-generator-dialog { width: min(760px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); box-shadow: 0 24px 70px rgba(16,18,24,.28); }
.model-face-generator-dialog::backdrop { background: rgba(20,22,27,.46); }
.model-face-generator-card { position: relative; padding: 22px; }
.model-face-generator-card > .dialog-close { position: absolute; top: 13px; right: 13px; }
.model-face-generator-card > header { padding: 0 38px 14px 0; border-bottom: 1px solid var(--line); }
.model-face-generator-card h2 { margin: 0; font-size: 17px; }
.model-face-generator-card header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.model-face-generator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; padding: 18px 0; }
.model-face-generator-fields label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.model-face-generator-fields input, .model-face-generator-fields select { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #fff; color: var(--text); font: inherit; font-size: 12px; }
.model-face-generator-fields input:focus, .model-face-generator-fields select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.model-face-generator-fields .model-face-extra { grid-column: 1 / -1; }
.model-face-appearance { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fafbfc; }
.model-face-appearance summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; cursor: pointer; list-style: none; }
.model-face-appearance summary::-webkit-details-marker { display: none; }
.model-face-appearance summary > span { min-width: 0; display: grid; gap: 2px; }
.model-face-appearance summary strong { color: var(--text); font-size: 12px; }
.model-face-appearance summary small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.model-face-appearance summary::after { content: "⌄"; flex: 0 0 auto; color: var(--muted); font-size: 15px; transition: transform .16s ease; }
.model-face-appearance[open] summary { border-bottom: 1px solid var(--line); background: #fff; }
.model-face-appearance[open] summary::after { transform: rotate(180deg); }
.model-face-appearance-body { padding: 9px 11px 12px; }
.model-face-settings-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 11px; }
.model-face-settings-grid label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.model-face-person-blend { min-width: 0; display: flex !important; grid-column: 1 / -1; align-items: flex-start; gap: 7px; padding: 9px 10px; border: 1px solid #d9d5fa; border-radius: 6px; background: #f7f6ff; color: var(--text) !important; cursor: pointer; }
.model-face-person-blend[hidden] { display: none !important; }
.model-face-person-blend input { width: 14px !important; height: 14px !important; flex: 0 0 auto; margin: 1px 0 0; padding: 0; accent-color: var(--accent); box-shadow: none !important; }
.model-face-person-blend span { min-width: 0; display: grid; gap: 2px; }
.model-face-person-blend b { font-size: 11px; }
.model-face-person-blend small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.model-face-person-reference { display: grid; grid-column: 1 / -1; gap: 5px; color: var(--muted); font-size: 11px; }
.model-face-generator-fields .model-face-person-authorization { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.model-face-generator-fields .model-face-person-authorization input { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
.model-face-garment { display: grid; grid-column: 1 / -1; gap: 5px; color: var(--muted); font-size: 11px; }
.model-face-garment-reference { min-height: 36px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.model-face-garment-reference img { width: 34px; height: 34px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: #f5f6f7; }
.model-face-garment-reference small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.model-face-garment-clear { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.model-face-garment-clear:hover { background: #f1f2f4; color: #a33; }
.model-face-generator-card footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.model-face-generator-card footer p { margin: 0; color: var(--muted); font-size: 11px; }
.model-face-generator-card footer > div { display: inline-flex; gap: 8px; }
.model-profile-angles { display: grid; grid-template-columns: repeat(5,minmax(128px,1fr)); gap: 10px; }
.model-angle-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.model-angle-card.running { border-color: #bdb2f6; box-shadow: 0 0 0 2px rgba(114,92,255,.08); }
.model-angle-preview { position: relative; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; background: #f1f2f4; color: var(--muted); }
.model-angle-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.model-angle-placeholder { display: grid; justify-items: center; gap: 5px; font-size: 10px; }
.model-angle-placeholder b { font-size: 22px; font-weight: 400; }
.model-angle-status { position: absolute; top: 6px; left: 6px; padding: 3px 6px; border-radius: 4px; background: rgba(34,37,42,.78); color: #fff; font-size: 9px; }
.model-angle-status.approved { background: rgba(21,122,86,.88); }
.model-angle-status.needs_review { background: rgba(175,101,19,.9); }
.model-angle-status.running, .model-angle-status.queued { background: rgba(100,82,210,.9); }
.model-angle-copy { display: grid; gap: 7px; padding: 9px; }
.model-angle-copy strong { font-size: 11px; }
.model-angle-copy p { min-height: 30px; margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.55; }
.model-angle-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.model-angle-actions button { min-height: 27px; flex: 1 1 auto; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); font-size: 9px; }
.model-angle-actions button:hover { border-color: #bcbfc5; background: #f6f7f8; }
.model-angle-actions button.primary { border-color: #24262b; background: #24262b; color: #fff; }
.model-angle-actions button.danger { color: #a93333; }
@media (max-width: 900px) { .fixed-face-library-dialog { height: calc(100vh - 20px); } .model-library-layout { grid-template-columns: 176px minmax(0,1fr); } .model-profile-angles { grid-template-columns: repeat(2,minmax(128px,1fr)); } .model-anchor-crop-layout { grid-template-columns: minmax(0,1fr); } .model-anchor-crop-guide { max-width: 380px; justify-self: center; } }
@media (max-width: 620px) { .fixed-face-library-dialog { width: calc(100vw - 12px); } .model-library-layout { grid-template-columns: 1fr; } .model-profile-sidebar { max-height: 160px; border-right: 0; border-bottom: 1px solid var(--line); } .fixed-face-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .model-profile-titlebar { align-items: flex-start; flex-direction: column; } .model-profile-angles { grid-template-columns: 1fr 1fr; } .model-anchor-crop-dialog, .model-face-generator-dialog { width: calc(100vw - 16px); } .model-anchor-crop-card, .model-face-generator-card { padding: 16px; } .model-anchor-crop-card footer, .model-face-generator-card footer { align-items: flex-start; flex-direction: column; } .model-face-generator-fields { grid-template-columns: 1fr; } .model-face-generator-fields .model-face-extra, .model-face-garment, .model-face-person-reference { grid-column: auto; } .model-face-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .fashion-assets { grid-template-columns: repeat(2,minmax(0,1fr)); } .fashion-reference-options { gap: 6px 10px; } .background-library-dialog { width: calc(100vw - 16px); } .background-library-card { padding: 16px; } .background-library-card > header { align-items: flex-start; flex-direction: column; } .background-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.bound-product-indicator { color: #936117; }
.bound-product-indicator span { background: #fff3d9; color: #936117; }
#models-entry { order: 10; }
#products-entry { order: 11; }
#history-entry { order: 12; }
#enterprise-link { order: 13; }
#admin-link { order: 14; }
.product-profile-titlebar input { display: block; width: min(360px, 100%); }
.product-profile-titlebar #product-profile-category { margin-top: 2px; padding: 4px 0; border-bottom-color: transparent; color: var(--muted); font-size: 12px; font-weight: 500; }
.product-profile-titlebar #product-profile-category:focus { border-bottom-color: var(--accent); color: var(--text); }
.product-profile-images { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; }
.product-profile-image-card { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #f5f6f7; }
.product-profile-image-card img { width: 100%; height: 100%; display: block; object-fit: cover; cursor: zoom-in; }
.product-profile-image-card button { position: absolute; top: 6px; right: 6px; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(28,30,34,.78); color: #fff; font-size: 17px; line-height: 1; opacity: 0; }
.product-profile-image-card:hover button { opacity: 1; }
.product-profile-empty-grid { min-height: 170px; display: grid; place-items: center; border: 1px dashed #cfd2d7; border-radius: 7px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .product-profile-images { grid-template-columns: repeat(3, minmax(112px, 1fr)); } }
@media (max-width: 620px) { .product-profile-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.custom-reference-menu { position: fixed; z-index: 80; width: 186px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 38px rgba(22,24,29,.18); }
.custom-reference-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; text-align: left; }
.custom-reference-menu button:hover { background: var(--panel-soft); color: var(--accent); }
.image-context-menu { position: fixed; z-index: 95; width: 178px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 38px rgba(22,24,29,.2); }
.image-context-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; text-align: left; }
.image-context-menu button:hover { background: var(--panel-soft); color: var(--accent); }
.image-context-menu-divider { display: block; height: 1px; margin: 5px 4px; background: var(--line); }
.custom-page-pick-banner { position: fixed; z-index: 90; left: 50%; top: 18px; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; background: var(--primary); color: var(--primary-text); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 13px; }
.material-picker-dialog { width: min(1120px, calc(100vw - 48px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 24px 70px rgba(16,18,24,.28); }
.material-picker-dialog::backdrop { background: rgba(22,24,30,.42); }
.material-picker-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.material-picker-header > div { min-width: 0; display: grid; gap: 3px; }
.material-picker-header strong { font-size: 16px; }
.material-picker-header small { color: var(--muted); font-size: 12px; }
.material-picker-header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 20px; line-height: 1; }
.material-picker-header button:hover { background: #eceef1; color: var(--text); }
.material-picker-search { height: 42px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 8px; margin: 14px 18px 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); color: var(--muted); }
.material-picker-search input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.material-picker-categories { display: flex; gap: 8px; overflow-x: auto; margin: 0 18px 12px; padding-bottom: 2px; }
.material-picker-category { height: 30px; flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--muted); font-size: 12px; }
.material-picker-category:hover { border-color: #b9afb9; color: var(--text); }
.material-picker-category[aria-pressed="true"] { border-color: #d14343; background: #fff7f7; color: #c13232; font-weight: 650; }
.material-picker-list { min-height: 0; max-height: min(420px, calc(100vh - 294px)); display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); align-items: start; align-content: start; gap: 10px; overflow-y: auto; padding: 6px 18px 20px; }
.material-picker-card { position: relative; min-width: 0; align-self: start; }
.material-picker-item { width: 100%; position: relative; min-width: 0; align-self: start; display: grid; grid-template-rows: 98px auto; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); text-align: left; }
.material-picker-item:hover:not(:disabled) { border-color: #b9afb9; background: var(--panel-soft); }
.material-picker-item[aria-pressed="true"] { border: 2px solid #d14343; background: #fff7f7; box-shadow: 0 0 0 2px rgba(209,67,67,.13); }
.material-picker-item:disabled { cursor: default; opacity: 1; }
.material-picker-item img { width: 100%; height: 98px; display: block; border-radius: 4px; object-fit: contain; background: #f1f2f4; }
.material-picker-item span { overflow: hidden; padding: 0 2px 2px; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.material-picker-delete { position: absolute; z-index: 2; top: 7px; right: 7px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: rgba(20,22,27,.7); color: #fff; font-size: 16px; line-height: 1; }
.material-picker-delete:hover { background: #c13232; }
.material-picker-delete:disabled { cursor: wait; opacity: .55; }
.material-picker-empty { grid-column: 1 / -1; align-self: center; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.material-picker-footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); }
.material-picker-footer small { color: var(--muted); font-size: 12px; }
body.custom-page-pick-active img:not(#image-preview-image) { cursor: crosshair !important; outline: 3px solid transparent; outline-offset: 2px; }
body.custom-page-pick-active img:not(#image-preview-image):hover { outline-color: var(--accent); }
.messages { min-height: 0; flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.message { max-width: 92%; }
.message.user { align-self: flex-end; }
.bubble { padding: 10px 12px; border-radius: 12px; background: var(--panel-soft); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.message.user .bubble { background: var(--primary); color: var(--primary-text); }
.message.user.dialogue-submission-reusable .bubble { cursor: copy; }
.message.user.dialogue-submission-reusable .bubble:hover { outline: 1px solid color-mix(in srgb, var(--primary) 60%, #fff); outline-offset: 2px; }
.review-repair-button { display: inline-flex; align-items: center; min-height: 32px; margin-top: 10px; padding: 0 11px; border: 1px solid #d89a55; border-radius: 6px; background: #fff; color: #965214; font-size: 12px; font-weight: 650; }
.review-repair-button:hover { border-color: #b8712b; background: #fff1de; color: #733900; }
.review-repair-button:disabled { opacity: .55; cursor: wait; }
.job-retry-message .bubble p { margin: 0 0 9px; }
.job-retry-button { min-height: 30px; padding: 0 11px; border: 1px solid var(--accent); border-radius: 7px; background: var(--panel); color: var(--accent); font-size: 12px; }
.job-retry-button:hover { background: var(--accent-soft); }
.job-retry-button:disabled { opacity: .55; cursor: not-allowed; }
.dialogue-detail-plan-message { width: min(100%, 620px); }
.dialogue-detail-plan { padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.dialogue-detail-plan-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.dialogue-detail-plan-heading strong { font-size: 14px; }
.dialogue-detail-plan-heading span, .dialogue-detail-plan-summary { color: var(--muted); font-size: 12px; }
.dialogue-detail-plan-list { display: grid; gap: 1px; padding: 6px; }
.dialogue-detail-plan-item { display: grid; grid-template-columns: auto 25px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 7px; border-radius: 6px; cursor: pointer; }
.dialogue-detail-plan-item:hover { background: var(--panel-soft); }
.dialogue-detail-plan-item input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent); }
.dialogue-detail-plan-number { color: var(--accent); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
.dialogue-detail-plan-content { min-width: 0; display: grid; gap: 2px; }
.dialogue-detail-plan-content strong { overflow: hidden; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.dialogue-detail-plan-content small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.dialogue-detail-plan-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-top: 1px solid var(--line); }
.dialogue-detail-plan-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.dialogue-detail-plan-actions .button { min-height: 30px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
@media (max-width: 560px) { .dialogue-detail-plan-heading { align-items: flex-start; flex-direction: column; gap: 1px; padding: 8px 12px; } .dialogue-detail-plan-footer { align-items: flex-start; flex-direction: column; } .dialogue-detail-plan-actions { width: 100%; } .dialogue-detail-plan-actions .button { flex: 1; } }
.asset-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.asset-thumbs img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.dialogue-submission-references { margin-top: 10px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.dialogue-submission-heading { display: block; margin-bottom: 7px; color: inherit; opacity: .78; font-size: 11px; font-weight: 700; }
.dialogue-submission-list { display: flex; flex-wrap: wrap; gap: 7px; }
.dialogue-submission-item { position: relative; width: 76px; min-width: 76px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); border-radius: 6px; background: rgba(255,255,255,.14); color: inherit; text-align: left; cursor: zoom-in; }
.dialogue-submission-item:hover { border-color: currentColor; background: rgba(255,255,255,.22); }
.dialogue-submission-item img { display: block; width: 74px; height: 58px; object-fit: cover; background: #fff; }
.dialogue-submission-kind { position: absolute; top: 4px; left: 4px; max-width: 68px; overflow: hidden; padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,.66); color: #fff; font-size: 9px; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.dialogue-submission-label { display: block; overflow: hidden; padding: 4px 5px 5px; font-size: 10px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.analysis-message { width: 100%; max-width: 100%; }
.analysis-bubble { padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.analysis-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.analysis-heading strong { font-size: 14px; }
.analysis-heading span { color: var(--accent); font-size: 12px; }
.analysis-heading-actions { display: flex; align-items: center; gap: 8px; }
.analysis-reanalyze { padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); font-size: 12px; }
.analysis-reanalyze:hover { border-color: var(--accent); color: var(--accent); }
.analysis-details { border-top: 1px solid var(--line); }
.analysis-details summary { padding: 9px 12px; color: var(--muted); font-size: 12px; cursor: pointer; }
.analysis-details[open] summary { color: var(--text); }
.typing-cursor::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: cursor-blink .8s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.agent-thinking-bubble { padding: 0 !important; overflow: hidden; border: 1px solid var(--line); background: var(--panel-soft) !important; color: var(--text) !important; }
.agent-thinking-details summary { padding: 9px 11px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.agent-thinking-details[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
.agent-thinking-details p { margin: 0; padding: 10px 11px 11px; color: var(--muted); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.analysis-summary { margin: 0; padding: 12px; color: var(--text); }
.analysis-style { margin: 0 12px 10px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analysis-style small { color: var(--muted); }
.analysis-style p { margin: 4px 0 0; color: var(--text); }
.analysis-modules { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 9px; }
.analysis-modules li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; align-items: start; }
.analysis-modules li > span { color: var(--accent); font-size: 11px; line-height: 20px; }
.analysis-modules strong { display: block; font-size: 13px; }
.analysis-modules p { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.generated-preview { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; }
.generated-preview-item { position: relative; width: fit-content; max-width: 100%; min-width: 0; }
.generated-preview-item img { width: auto; max-width: 100%; max-height: 320px; display: block; object-fit: contain; border-radius: 6px; background: var(--panel-soft); }
.generated-preview-item.deleted img { opacity: .72; }
.generated-preview-deleted { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 4px; background: rgba(27, 31, 38, .78); color: #fff; font-size: 10px; line-height: 1.25; }
.main-saved-output-badge { position: absolute; right: 7px; bottom: 7px; z-index: 3; padding: 3px 6px; border-radius: 4px; background: rgba(27, 31, 38, .72); color: #fff; font-size: 10px; line-height: 1.2; }
.main-tool-logo-remove { position: absolute; top: -8px; right: -8px; z-index: 4; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(30,33,37,.82); color: #fff; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; }
.main-tool-logo-preview:hover .main-tool-logo-remove, .main-tool-logo-preview:focus-visible .main-tool-logo-remove { opacity: 1; }
.asset-manager { margin: 10px 16px 0; max-height: 190px; overflow-y: auto; border-top: 1px solid var(--line); }
.asset-group { padding-top: 9px; }
.asset-group + .asset-group { margin-top: 3px; }
.asset-group header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.asset-inline-row { display: flex; align-items: flex-start; gap: 7px; min-height: 52px; }
.asset-list { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 7px; }
.asset-inline-add { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-content: center; padding: 0; border: 1px dashed #cfd2d7; border-radius: 8px; background: var(--panel-soft); color: var(--muted); font-size: 22px; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.asset-inline-add:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
.asset-inline-add:focus-visible { outline: 3px solid rgba(114,92,255,.18); outline-offset: 2px; }
.asset-manager.empty-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: none; padding-top: 9px; overflow: visible; }
.asset-manager.empty-assets .asset-group { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.asset-manager.empty-assets .asset-group:hover { border-color: #cbc3ff; background: var(--accent-soft); box-shadow: 0 2px 8px rgba(61,45,150,.06); }
.asset-manager.empty-assets .asset-group:focus-visible { outline: 3px solid rgba(114,92,255,.18); outline-offset: 2px; }
.asset-manager.empty-assets .asset-group + .asset-group { margin-top: 0; }
.asset-manager.empty-assets .asset-group header { flex: 1; justify-content: flex-start; margin: 0; color: var(--text); font-weight: 500; }
.asset-manager.empty-assets .asset-group header small { display: none; }
.asset-manager.empty-assets .asset-inline-row { min-height: 32px; }
.asset-manager.empty-assets .asset-inline-add { width: 32px; height: 32px; flex-basis: 32px; border: 0; border-radius: 7px; background: var(--panel); color: var(--accent); font-size: 20px; }
.asset-manager.empty-assets .asset-inline-add:hover { background: var(--panel); transform: none; }
.asset-item { position: relative; width: 52px; height: 52px; }
.asset-item img { width: 52px; height: 52px; display: block; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.asset-delete { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-content: center; border: 0; border-radius: 50%; background: rgba(20,21,24,.82); color: #fff; font-size: 15px; line-height: 1; }
.asset-delete:hover { background: var(--danger); }
.fashion-assets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 10px 16px 0; }
.fashion-reference-options { position: absolute; z-index: 8; bottom: calc(100% + 6px); left: 0; width: 202px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 5px 7px; padding: 7px; box-sizing: border-box; border: 1px solid #cbc3ff; border-radius: 7px; background: rgba(255,255,255,.98); box-shadow: 0 8px 18px rgba(31,28,70,.12); color: var(--muted); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.fashion-reference-options::after, .fashion-garment-options::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 10px; }
.fashion-reference-options > span { grid-column: 1 / -1; color: var(--text); font-size: 10px; font-weight: 700; }
.fashion-reference-options label { min-width: 0; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.fashion-reference-options input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.fashion-reference-options:has(input:checked) { border-color: #bdb1ff; background: #f8f7ff; }
.fashion-garment-options { position: absolute; z-index: 8; bottom: calc(100% + 6px); left: 0; width: 202px; display: grid; gap: 7px; padding: 7px; box-sizing: border-box; border: 1px solid #cbc3ff; border-radius: 7px; background: rgba(255,255,255,.98); box-shadow: 0 8px 18px rgba(31,28,70,.12); color: var(--text); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.fashion-garment-options > label { display: grid; grid-template-columns: 14px minmax(0,1fr); align-items: center; gap: 4px; cursor: pointer; line-height: 1.3; }
.fashion-garment-options input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.fashion-garment-options small { grid-column: 2; color: var(--muted); font-size: 9px; white-space: nowrap; }
.fashion-garment-type { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fashion-garment-type legend { width: 100%; margin: 0 0 2px; padding: 0; color: var(--text); font-size: 10px; font-weight: 700; }
.fashion-garment-type label { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 26px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.fashion-garment-type label:has(input:checked) { border-color: #a99df1; background: #f4f2ff; color: #433892; }
.fashion-garment-type input { flex: 0 0 auto; }
.fashion-asset-slot { position: relative; min-width: 0; }
.fashion-background-slot { display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: center; gap: 3px; min-height: 104px; box-sizing: border-box; padding: 8px 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.fashion-background-slot:hover { border-color: #cbc3ff; background: var(--accent-soft); }
.fashion-model-source-slot { order: 1; }
#fashion-garment-slot { order: 2; }
.fashion-reference-slot { order: 3; }
#fashion-background-slot { order: 4; }
.fashion-asset-button { width: 100%; min-height: 104px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); color: var(--text); }
.fashion-asset-button:hover { border-color: #cbc3ff; background: var(--accent-soft); }
.fashion-asset-button strong { font-size: 12px; font-weight: 600; }
.fashion-asset-button small { color: var(--muted); font-size: 10px; }
.fashion-background-upload-zone { display: grid; place-items: center; min-height: 0; padding: 0; border: 0; background: transparent; }
.fashion-background-upload-zone:hover .fashion-asset-preview { border-color: #bdb1ff; background: #fff; }
.fashion-background-library-inline { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 1px 0; border: 0; background: transparent; color: var(--text); }
.fashion-background-library-inline:hover strong { color: var(--accent); }
.fashion-background-library-inline strong { font-size: 12px; font-weight: 600; }
.fashion-background-library-inline small { color: var(--muted); font-size: 10px; }
.fashion-asset-preview { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cfd2d7; border-radius: 8px; background: var(--panel); color: var(--accent); font-size: 21px; background-position: center; background-size: cover; }
.fashion-asset-preview.has-image { border-style: solid; color: transparent; cursor: zoom-in; }
.fashion-asset-preview.has-preset { padding: 5px; border-style: solid; border-color: #cfd2d7; color: #4a5258; text-align: center; font-size: 9px; font-weight: 700; line-height: 1.25; }
.fashion-asset-preview.has-preset[data-background-preset="pure-white"] { background: #fafafa; }
.fashion-asset-preview.has-preset[data-background-preset="white-studio"] { background: #eeeeeb; }
.fashion-asset-preview.has-preset[data-background-preset="light-gray-studio"] { background: #d9dfe1; }
.fashion-asset-preview.has-preset[data-background-preset="mid-gray-studio"] { background: #b4bdc1; color: #fff; }
.fashion-asset-delete { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; display: grid; place-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(20,21,24,.82); color: #fff; z-index: 2; }
.fashion-asset-delete:hover { background: var(--danger); }
.fashion-reference-slot.has-reference:hover .fashion-reference-options, .fashion-reference-slot.has-reference:focus-within .fashion-reference-options { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fashion-reference-slot.has-reference:hover .fashion-asset-button, .fashion-reference-slot.has-reference:focus-within .fashion-asset-button { border-color: #bdb1ff; }
.fashion-garment-slot.has-garment:hover .fashion-garment-options, .fashion-garment-slot.has-garment:focus-within .fashion-garment-options { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fashion-garment-slot.has-garment:hover .fashion-asset-button, .fashion-garment-slot.has-garment:focus-within .fashion-asset-button { border-color: #bdb1ff; }
.processing { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 9px 11px; background: var(--panel-soft); border-radius: 8px; font-size: 13px; color: var(--muted); }
.spinner { width: 14px; height: 14px; border: 2px solid #d6d8dc; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bound-model-indicator { width: 142px; min-width: 0; height: 50px; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 7px; overflow: hidden; padding: 4px; border: 1px dashed #b8bdc5; border-radius: 7px; background: #fafbfc; color: var(--accent); text-align: left; cursor: pointer; }
.bound-model-indicator[hidden] { display: none; }
.bound-model-indicator:hover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(114,92,255,.1); }
.bound-model-avatar { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border: 1px solid #d9d5fa; border-radius: 5px; background: #f0efff; }
.bound-model-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bound-model-avatar img[hidden], .bound-model-avatar b[hidden] { display: none; }
.bound-model-avatar b { color: var(--accent); font-size: 17px; }
.bound-model-copy { min-width: 0; display: grid; gap: 2px; }
.bound-model-copy small, .bound-model-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bound-model-copy small { color: var(--muted); font-size: 9px; font-weight: 500; }
.bound-model-copy strong { color: var(--text); font-size: 11px; font-weight: 700; }
.bound-product-indicator { align-self: flex-start; min-height: 22px; display: inline-flex; align-items: center; gap: 6px; margin: 7px 16px -3px; padding: 0; border: 0; background: transparent; color: #177a57; font-size: 11px; cursor: pointer; }
.bound-product-indicator[hidden] { display: none; }
.bound-product-indicator span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #e7f6ed; color: #177a57; font-size: 9px; font-weight: 700; }
.bound-product-indicator strong { font-weight: 650; }
.bound-product-indicator:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.composer { position: relative; margin: 10px 14px 0; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(114,92,255,.11); }
.composer textarea { width: 100%; min-height: 100px; resize: none; border: 0; outline: 0; color: var(--text); }
.composer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; column-gap: 10px; row-gap: 3px; }
.composer-submit-actions { grid-column: 3; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 7px; }
.send-button { border: 0; border-radius: 9px; background: var(--primary); color: var(--primary-text); padding: 7px 13px; }
.fashion-detail-page-popover { position: relative; grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; height: 38px; }
.fashion-detail-page-popover[hidden] { display: none; }
.fashion-detail-page-button { width: 116px; height: 38px; padding: 0 12px; border: 1px solid #d8d1ff; border-radius: 8px; background: #f7f5ff; color: #5b49be; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fashion-detail-page-button:hover { border-color: #9789ee; background: #eeeaff; color: #4939a2; }
.fashion-detail-page-menu { position: absolute; right: 0; bottom: calc(100% + 8px); width: 246px; display: none; gap: 8px; padding: 10px; border: 1px solid rgba(15, 23, 42, .12); border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(20, 30, 35, .18); z-index: 16; }
.fashion-detail-page-popover:hover .fashion-detail-page-menu, .fashion-detail-page-popover:focus-within .fashion-detail-page-menu, .fashion-detail-page-menu:hover { display: grid; }
.fashion-detail-page-menu::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 10px; }
.fashion-detail-page-menu-head { color: var(--muted); font-size: 12px; line-height: 1.2; }
.fashion-detail-page-row { display: grid; grid-template-columns: 16px minmax(0,1fr) 54px; align-items: center; gap: 8px; min-height: 30px; color: var(--text); font-size: 13px; }
.fashion-detail-page-row:has(.fashion-detail-page-pose-select) { grid-template-columns: 16px minmax(0,1fr) 58px 54px; }
.fashion-detail-page-row > input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
.fashion-detail-page-pose-select, .fashion-detail-page-row > input[type="number"] { width: 54px; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; color: var(--text); font: inherit; font-size: 13px; }
.fashion-detail-page-pose-select { width: 58px; padding-right: 4px; }
.fashion-detail-page-run { height: 32px; margin-top: 2px; border: 0; border-radius: 7px; background: var(--primary); color: var(--primary-text); font: inherit; font-size: 13px; font-weight: 600; }
.fashion-fusion-mode { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.fashion-fusion-mode select { width: 78px; min-height: 28px; padding: 0 20px 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 11px; }
.fashion-fusion-mode[hidden] { display: none; }

.background-library-dialog { width: min(940px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); box-shadow: 0 24px 70px rgba(16,18,24,.28); }
.background-library-dialog::backdrop { background: rgba(20,22,27,.46); }
.background-library-card { position: relative; display: grid; align-content: start; gap: 14px; min-height: 350px; max-height: min(676px, calc(100vh - 76px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px; }
.background-library-card > .dialog-close { position: absolute; top: 13px; right: 13px; }
.background-library-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-right: 38px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.background-library-card h2 { margin: 0; font-size: 17px; }
.background-library-card header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.background-library-status { margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.background-library-section { min-width: 0; display: grid; gap: 9px; }
.background-library-user-section { min-height: 0; }
.background-library-section-heading { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.background-library-preset-heading { align-items: center; justify-content: space-between; }
.background-library-preset-heading > div { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.background-library-section-heading h3 { margin: 0; font-size: 13px; }
.background-library-section-heading span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.background-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-width: 0; }
.background-library-presets-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.background-library-text-presets-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; min-width: 0; }
.background-library-preset-button { min-width: 0; min-height: 42px; display: grid; align-content: center; justify-items: start; gap: 2px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); text-align: left; }
.background-library-preset-button:hover { border-color: var(--primary); background: var(--accent-soft); }
.background-library-preset-button strong { overflow: hidden; width: 100%; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.background-library-preset-button small { color: var(--muted); font-size: 9px; }
.background-library-preset-button[data-preset-preview="pure-white"] { box-shadow: inset 3px 0 0 #fafafa; }
.background-library-preset-button[data-preset-preview="white-studio"] { box-shadow: inset 3px 0 0 #eeeeeb; }
.background-library-preset-button[data-preset-preview="light-gray-studio"] { box-shadow: inset 3px 0 0 #d9dfe1; }
.background-library-preset-button[data-preset-preview="mid-gray-studio"] { box-shadow: inset 3px 0 0 #aeb8bd; }
.background-library-preset-button[data-preset-preview="custom"] { box-shadow: inset 3px 0 0 #9aaea2; }
.background-library-text-preset { position: relative; min-width: 0; }
.background-library-text-preset .background-library-preset-button { width: 100%; padding-right: 28px; }
.background-library-text-preset-delete { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; }
.background-library-text-preset-delete:hover { background: #f9e7e7; color: #a93333; }
.background-library-text-preset-form { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(0,1.7fr) auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-soft); }
.background-library-text-preset-form[hidden] { display: none; }
.background-library-text-preset-form label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.background-library-text-preset-form input, .background-library-text-preset-form textarea { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; outline: 0; resize: vertical; background: #fff; color: var(--text); font: inherit; font-size: 12px; }
.background-library-text-preset-form input:focus, .background-library-text-preset-form textarea:focus { border-color: var(--primary); }
.background-library-text-preset-form-actions { display: flex; gap: 5px; padding-bottom: 1px; }
.background-library-item { min-width: 0; display: grid; grid-template-rows: auto auto; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.background-library-preview { position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); background: #f3f4f6; cursor: zoom-in; }
.background-library-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.background-library-badge { position: absolute; top: 7px; left: 7px; padding: 3px 6px; border-radius: 4px; background: rgba(20,22,27,.78); color: #fff; font-size: 9px; }
.background-library-copy { display: grid; gap: 8px; padding: 9px; }
.background-library-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.background-library-name { width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 650; }
.background-library-name:focus { border-bottom-color: var(--accent); }
.background-library-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.background-library-actions button { min-height: 28px; flex: 1 1 auto; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); font-size: 10px; }
.background-library-actions button.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.background-library-actions button.danger { color: #a93333; }
.background-library-actions button:disabled { cursor: wait; opacity: .55; }
.background-library-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 5px; color: var(--muted); text-align: center; font-size: 12px; }
.background-library-empty strong { color: var(--text); font-size: 14px; }

.auth-dialog { border: 0; padding: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.auth-dialog::backdrop { background: rgba(20,21,24,.46); }
.dialog-card { position: relative; width: min(390px, calc(100vw - 32px)); padding: 26px; display: grid; gap: 14px; }
.dialog-card h2 { margin: 0; }
.dialog-card label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.dialog-card input { height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; color: var(--text); }
.payment-dialog-card { width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 820px); overflow-y: auto; }
.detail-watermark-card { width: min(620px, calc(100vw - 32px)); }
.detail-watermark-card > .muted { margin: -5px 34px 2px 0; font-size: 12px; line-height: 1.5; }
.detail-watermark-enabled { display: flex !important; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--text) !important; }
.detail-watermark-enabled input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.detail-watermark-enabled span { font-size: 13px; }
.detail-watermark-text-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.detail-watermark-text-row label { min-width: 0; }
.detail-watermark-text-row .button { min-height: 42px; white-space: nowrap; }
.detail-watermark-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.detail-watermark-range { grid-template-columns: 48px minmax(0, 1fr) auto !important; align-items: center; gap: 8px !important; color: var(--text) !important; }
.detail-watermark-range > span:first-child, .detail-watermark-select { font-size: 12px; }
.detail-watermark-range input[type="range"] { width: 100%; height: 16px; padding: 0; accent-color: var(--accent); }
.detail-watermark-percent { display: flex; align-items: center; min-width: 58px; height: 30px; padding-right: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12px; }
.detail-watermark-percent input { width: 39px !important; height: 28px !important; padding: 0 1px 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent; text-align: right; }
.detail-watermark-colors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.detail-watermark-colors legend { padding: 0; margin-right: 2px; color: var(--muted); font-size: 12px; }
.detail-watermark-colors label { display: inline-flex; align-items: center; gap: 5px; color: var(--text) !important; font-size: 12px; cursor: pointer; }
.detail-watermark-colors input { width: 14px !important; height: 14px !important; margin: 0; accent-color: var(--accent); }
.detail-watermark-color-swatch { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.22); border-radius: 3px; }
.detail-watermark-color-swatch.auto { background: linear-gradient(135deg, #fff 0 46%, #717780 46% 54%, #1e2328 54% 100%); }
.detail-watermark-color-swatch.black { background: #16191d; }
.detail-watermark-color-swatch.white { background: #fff; }
.detail-watermark-select { display: grid !important; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--text) !important; }
.detail-watermark-select select { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; }
.detail-watermark-presets-section, .detail-watermark-preview-section { display: grid; gap: 7px; padding-top: 2px; }
.detail-watermark-presets-section header, .detail-watermark-preview-section header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-size: 12px; }
.detail-watermark-presets-section header span, .detail-watermark-preview-section header span { color: var(--muted); font-size: 11px; }
.detail-watermark-presets { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.detail-watermark-presets-empty { display: inline-flex; align-items: center; min-height: 28px; color: var(--muted); font-size: 11px; }
.detail-watermark-preset { display: inline-flex; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
.detail-watermark-preset-use { min-width: 0; max-width: 220px; overflow: hidden; padding: 5px 7px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.detail-watermark-preset-use:hover { background: var(--panel); color: var(--accent); }
.detail-watermark-preset-remove { width: 25px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.detail-watermark-preset-remove:hover { background: #fff0f0; color: #a93333; }
.detail-watermark-preview-section canvas { width: 100%; height: 200px; display: block; border: 1px solid var(--line); border-radius: 7px; background: #f4f5f6; }
.detail-watermark-status { min-height: 18px; margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.detail-watermark-card footer { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding-top: 2px; }
@media (max-width: 520px) { .detail-watermark-controls { grid-template-columns: 1fr; } }
.payment-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.payment-dialog-heading p { margin: 5px 0 0; }
.payment-section { display: grid; gap: 9px; }
.payment-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.payment-section-head h3 { margin: 0; font-size: 14px; }
.payment-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.payment-method-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.payment-method-row label { display: block; }
.payment-method-row input { position: absolute; opacity: 0; pointer-events: none; }
.payment-method-row span { min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); cursor: pointer; }
.payment-method-row input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.payment-package-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.payment-package-card { min-width: 0; display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.payment-package-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.payment-package-card h3 { margin: 0; font-size: 15px; }
.payment-package-price { color: var(--accent); font-size: 18px; font-weight: 800; white-space: nowrap; }
.payment-package-benefits { margin: 0; min-height: 34px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.payment-package-card .button { width: 100%; justify-content: center; }
.payment-history-head { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--line); }
.payment-order-history { display: grid; gap: 6px; }
.payment-order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.payment-order-item strong, .payment-order-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-order-item strong { font-size: 12px; }
.payment-order-item span { color: var(--muted); font-size: 11px; }
.payment-ledger-section { padding-top: 4px; border-top: 1px solid var(--line); }
.payment-deduction-history { display: grid; gap: 0; }
.point-deduction-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.point-deduction-item strong, .point-deduction-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-deduction-item strong { font-size: 12px; }
.point-deduction-item span { color: var(--muted); font-size: 11px; }
.point-deduction-item .point-deduction-value { color: #b2413a; font-size: 13px; font-weight: 750; }
.point-deduction-item .point-deduction-value.uncharged { color: var(--muted); font-weight: 600; }
.payment-empty { margin: 8px 0; color: var(--muted); font-size: 12px; text-align: center; }
.dialog-card.marketing-copy-card { width: min(1060px, calc(100vw - 32px)); max-height: min(92vh, 900px); max-height: min(92dvh, 900px); overflow: auto; overflow-x: hidden; }
.marketing-copy-editor-layout, .marketing-copy-editor-controls, .marketing-copy-editor-controls > * { min-width: 0; }
.marketing-copy-editor-controls input { width: 100%; min-width: 0; }
.dialogue-action-card { width: min(660px, calc(100vw - 32px)); max-height: min(700px, calc(100vh - 32px)); padding: 22px; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.dialogue-action-draft { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.dialogue-action-draft input { min-width: 0; }
.dialogue-action-list { min-height: 0; display: grid; align-content: start; gap: 8px; overflow-y: auto; padding-right: 2px; }
.dialogue-action-edit { display: grid; grid-template-columns: minmax(100px, .28fr) minmax(0, 1fr) auto; gap: 7px; align-items: start; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfc; }
.dialogue-action-edit input, .dialogue-action-edit textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 12px; }
.dialogue-action-edit input { height: 34px; padding: 0 8px; }
.dialogue-action-edit textarea { min-height: 62px; padding: 7px 8px; resize: vertical; line-height: 1.45; }
.dialogue-action-edit.shared { border-color: rgba(114,92,255,.22); background: #f8f7ff; }
.dialogue-action-edit.shared input:disabled, .dialogue-action-edit.shared textarea:disabled { cursor: default; border-color: transparent; background: transparent; color: var(--text); opacity: 1; }
.dialogue-action-shared { align-self: start; padding: 4px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 10px; line-height: 1; }
.dialogue-action-copy { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--accent); font-size: 16px; line-height: 1; }
.dialogue-action-copy:hover { border-color: var(--accent); background: var(--accent-soft); }
.dialogue-action-remove { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #a93333; font-size: 18px; line-height: 1; }
.dialogue-action-remove:hover { background: #fff0f0; }
.dialogue-action-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding-top: 2px; }
.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; font-size: 22px; color: var(--muted); }
.link-button { border: 0; background: transparent; color: var(--accent); }
.error { margin: 0; color: var(--danger); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; padding: 10px 15px; border-radius: 9px; background: var(--primary); color: var(--primary-text); box-shadow: 0 10px 30px rgba(0,0,0,.18); }

img[data-enlargeable], .module-image, .asset-item img, .generated-preview img { cursor: zoom-in; }
.image-preview-dialog { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; display: grid; place-items: center; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; }
.image-preview-dialog:not([open]) { display: none; }
.image-preview-dialog::backdrop { background: transparent !important; }
.image-preview-dismiss { position: absolute; z-index: 0; inset: 0; padding: 0; border: 0; background: transparent; cursor: default; }
.image-preview-surface { position: relative; z-index: 1; width: 100vw; height: 100vh; }
.image-preview-close { position: absolute; right: 8px; top: 8px; z-index: 7; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(16,19,18,.72); color: #fff; font-size: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.24); }
.image-preview-hint { position: absolute; left: 12px; top: 10px; z-index: 7; padding: 6px 10px; border-radius: 999px; background: rgba(16,19,18,.72); color: rgba(255,255,255,.88); font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.image-preview-status { position: absolute; right: 12px; top: 52px; z-index: 8; width: min(380px,calc(100vw - 24px)); padding: 9px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(16,19,18,.84); color: rgba(255,255,255,.94); font-size: 12px; line-height: 1.45; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.image-preview-status.error { border-color: rgba(255,133,133,.72); background: rgba(91,24,24,.9); }
.image-preview-toolbar { position: absolute; right: 52px; top: 8px; z-index: 7; display: inline-flex; gap: 6px; }
.image-preview-ai-actions { position: absolute; right: 12px; bottom: 12px; z-index: 7; display: inline-flex; gap: 8px; }
.image-preview-toolbar button, .image-preview-ai-actions button, .image-preview-footer-actions button { min-width: 36px; height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(16,19,18,.72); color: #fff; font-size: 12px; font-weight: 700; }
.image-preview-toolbar button:hover, .image-preview-toolbar button.active, .image-preview-ai-actions button:hover, .image-preview-ai-actions button.active, .image-preview-footer-actions button:hover { border-color: rgba(255,255,255,.5); background: rgba(26,31,29,.9); }
.image-preview-ai-actions .remove-tool { min-width: 72px; }
.image-preview-viewport { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; cursor: grab; user-select: none; touch-action: none; background: transparent; }
.image-preview-viewport.dragging { cursor: grabbing; }
.image-preview-viewport.removing { cursor: crosshair; }
.image-preview-viewport > img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform-origin: center; pointer-events: none; }
.image-preview-prompt { position: absolute; z-index: 8; right: 12px; bottom: 58px; width: min(30vw,360px); min-width: 260px; height: 148px; resize: vertical; padding: 12px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; outline: 0; background: rgba(16,19,18,.78); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.image-preview-prompt:focus { border-color: #9d8fff; }
.image-preview-prompt::placeholder { color: #9ea2aa; }
.image-preview-selection-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.image-preview-selection-box { position: absolute; border: 2px solid #8f7cff; border-radius: 4px; background: rgba(114,92,255,.2); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }
.image-preview-footer-actions { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7; display: inline-flex; gap: 8px; }
.image-preview-footer-actions button { min-width: 72px; height: 36px; padding: 0 14px; }
.image-preview-footer-actions button.copied { border-color: rgba(122,222,166,.9); background: rgba(26,104,69,.92); color: #effff4; }
.image-preview-dialog.busy .image-preview-viewport::after { content: "AI 正在去除并补齐画面…"; position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 18px; border-radius: 10px; background: rgba(18,19,23,.9); color: #fff; }

@media (max-width: 900px) {
  .tool-page .main-fixed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell { grid-template-columns: 52px minmax(0,1fr); }
  .workspace-scroll-controls { right: 16px; }
  .panel-resizer { display: none; }
  .chat-panel { position: static; grid-column: 1 / -1; height: auto; min-height: 620px; overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  .messages { overflow: visible; }
  .rail { grid-row: 1; }
  .materials-drawer { left: 52px; }
  .materials-page-body { grid-template-columns: 180px minmax(0,1fr); }
  .materials-content { padding-right: 18px; padding-left: 18px; }
  .materials-list { grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 11px; }
}
@media (max-width: 580px) {
  .main-crop-section > header { flex-wrap: wrap; }
  .main-crop-section-actions { width: 100%; justify-content: space-between; }
  .main-crop-section-actions small { text-align: left; }
  .tool-page .exact-color-garment { grid-template-columns: 1fr; }
  .tool-page .main-fixed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .tool-prompt-field, .tool-page .color-garment-workflow { grid-template-columns: 1fr; }
  .tool-page .color-garment-stage { min-height: 132px; }
  .app-shell { grid-template-columns: 1fr; }
  .rail { position: static; width: 100%; height: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-drawer, .history-drawer { left: 0; width: min(410px, 100vw); }
  .project-list-dialog .project-list-card { width: calc(100vw - 20px); max-height: 90vh; padding: 18px 14px; }
  .project-list-all { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 10px; }
  .project-item-card .project-item-copy strong { font-size: 12px; }
  .project-item-card .project-item-copy span { font-size: 10px; }
  .materials-drawer { left: 0; grid-template-rows: auto minmax(0,1fr); }
  .materials-page-header { min-height: 66px; padding: 10px 12px; }
  .materials-heading small { display: none; }
  .materials-header-actions { gap: 6px; }
  .materials-header-actions .button { min-height: 34px; padding: 0 10px; }
  .materials-page-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .materials-sidebar { display: grid; grid-template-columns: minmax(0,1fr) 160px; gap: 10px; padding: 10px 12px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .materials-sidebar > section:first-child { min-width: 0; display: flex; gap: 5px; overflow-x: auto; }
  .materials-sidebar > section:first-child { scrollbar-width: none; }
  .materials-sidebar > section:first-child::-webkit-scrollbar { display: none; }
  .materials-sidebar-label, .materials-sync-note { display: none; }
  .materials-category { width: auto; min-width: max-content; min-height: 36px; display: inline-flex; gap: 6px; padding: 0 10px; }
  .materials-use-section { align-content: center; gap: 4px; padding: 0; border-top: 0; }
  .materials-use-section p { display: none; }
  .materials-use-section select { height: 36px; }
  .materials-content { padding: 0 12px 24px; }
  .materials-toolbar { grid-template-columns: minmax(0,1fr) 112px; padding-top: 12px; }
  .materials-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .material-copy { padding: 8px; }
  .workspace { padding: 16px 12px 40px; }
  .workspace-scroll-controls { right: 14px; bottom: 14px; }
  .workspace-header, .result-toolbar { align-items: flex-start; flex-direction: column; }
  .project-title { max-width: min(100%, 280px); }
  .header-actions { width: 100%; }
  .chat-panel { grid-column: auto; }
  .chat-header { gap: 7px; padding: 13px 12px 5px; }
  .chat-header-title p { display: none; }
  .image-generation-settings { gap: 6px; }
  .image-size-option { font-size: 9px; }
  .crop-workspace-header { align-items: flex-start; flex-direction: column; }
  .crop-toolbar { justify-content: flex-start; }
  .slice-toolbar { justify-content: flex-start; }
  .slice-result-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .crop-card-header { align-items: flex-start; flex-direction: column; }
  .crop-card-controls { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .composer-bottom { grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto auto auto; }
  .composer-mode { grid-column: 1; grid-row: 1; }
  .composer-submit-actions { grid-column: 2 / 4; grid-row: 1; justify-self: end; }
  .composer-options { grid-column: 1 / 4; grid-row: 2; justify-self: start; justify-content: flex-start; margin-top: 2px; }
  .fashion-detail-page-popover { grid-column: 1 / 3; grid-row: 3; }
  .mode-help { grid-column: 1 / 4; grid-row: 4; justify-self: start; text-align: left; }
  .fashion-fusion-mode select { width: 74px; }
  .materials-page-header { align-items: flex-start; }
  .materials-heading strong { font-size: 16px; }
  .materials-refresh { display: none; }
  .materials-sidebar { grid-template-columns: minmax(0,1fr); }
  .materials-use-section { grid-template-columns: auto minmax(0,1fr); align-items: center; }
  .materials-use-section label { white-space: nowrap; }
  .materials-toolbar { grid-template-columns: minmax(0,1fr); }
  .materials-list-head { align-items: flex-start; }
}

@media (max-width: 900px) {
  body.homepage-mode .app-shell { grid-template-columns: 52px minmax(0, 1fr); }
  body.homepage-mode .workspace { padding-right: 22px; padding-left: 22px; }
  .home-hero { min-height: 450px; }
  .home-hero h2 { font-size: 46px; }
  .home-flow article { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 580px) {
  body.homepage-mode .app-shell { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  body.homepage-mode .rail { width: 100vw; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  body.homepage-mode .rail::-webkit-scrollbar { display: none; }
  body.homepage-mode .workspace { width: 100%; min-width: 0; min-height: auto; padding: 0 14px 44px; }
  body.homepage-mode .workspace-header { align-items: center; flex-direction: row; padding: 13px 0; }
  body.homepage-mode .workspace-header .header-actions { width: auto; margin-left: auto; }
  body.homepage-mode .workspace-header #admin-entry { display: none; }
  body.homepage-mode .workspace-header .button { min-height: 31px; padding: 0 9px; font-size: 10px; }
  .home-hero { min-height: 430px; padding: 54px 0 34px; }
  .home-hero h2 { min-height: 90px; font-size: 38px; line-height: 1.16; }
  .home-hero h2.home-title-compact { font-size: 32px; }
  .home-hero > p { margin-top: 16px; padding: 0 12px; font-size: 13px; }
  .home-composer { margin-top: 28px; }
  .home-composer-row { min-height: 52px; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
  .home-composer textarea { font-size: 13px; }
  .home-upload, .home-submit { width: 34px; height: 34px; }
  .home-flow { grid-template-columns: 1fr; }
  .home-flow article { min-height: 88px; grid-template-columns: 56px minmax(0, 1fr); gap: 13px; padding: 17px 8px; }
  .home-flow article + article { border-top: 1px solid #e4e6e1; border-left: 0; }
  .home-flow article > span { gap: 8px; }
  .home-flow article > span::after { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero h2 { transition: none; }
}

@media (max-width: 900px) {
  .tool-page { left: 52px; }
  .tool-page-header { padding-right: 18px; padding-left: 18px; }
  .tool-page-content { padding: 22px 18px 40px; }
  .tool-current-image, .color-tool-layout, .size-tool-layout { grid-template-columns: 1fr; }
  .size-preview-wrap { position: static; }
}

@media (max-width: 580px) {
  .tool-page { left: 0; grid-template-rows: 62px minmax(0, 1fr); }
  .tool-page-header { padding: 0 12px; }
  .tool-page-content { padding: 18px 12px 32px; }
  .tool-intro { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 17px; }
  .tool-intro h1 { font-size: 20px; }
  .tool-source-grid, .tool-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tool-project-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color-card { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .color-card-toggle { grid-column: 2 / -1; }
  .size-form-grid { grid-template-columns: 1fr; }
}

/* Original garment-tool component treatment, scoped to the lightweight tool pages. */
.tool-page .legacy-tool { width: min(1540px, 100%); margin: 0 auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tool-page .panel-head, .tool-page .main-output-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-page .panel-head { min-height: 38px; padding-bottom: 10px; border-bottom: 1px solid #edf0ed; }
.tool-page .panel-head h2, .tool-page .main-output-title h2 { margin: 0; color: var(--text); font-size: 16px; }
.tool-page .actions, .tool-page .panel-actions, .tool-page .main-output-actions, .tool-page .main-square-inline-actions, .tool-page .sizechart-block-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-page .ghost, .tool-page .primary, .tool-page .download-image { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 12px; text-decoration: none; }
.tool-page .ghost:hover, .tool-page .download-image:hover { border-color: #aab0b6; background: #f7f8f7; }
.tool-page .primary { border-color: #176b5b; background: #176b5b; color: #fff; }
.tool-page .compact { min-height: 28px; padding: 0 8px; font-size: 11px; }
.tool-page .image-note { margin: 10px 0 14px; font-size: 12px; line-height: 1.55; }
.tool-page .chunks { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.tool-page .chunk { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.tool-page .chunk-head, .tool-page .chunk-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; color: var(--muted); font-size: 11px; }
.tool-page .chunk-head { border-bottom: 1px solid var(--line); }
.tool-page .chunk-head button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #a94949; font-size: 17px; }
.tool-page .chunk-media { aspect-ratio: 3 / 4; overflow: hidden; background: #fff; }
.tool-page .chunk-media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.tool-page .chunk-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-page .legacy-tool .chunks { grid-template-columns: repeat(auto-fill, minmax(224px, 224px)); align-items: start; }
.tool-page #exact-main-images.chunks { display: block; min-width: 0; overflow-x: auto; padding-bottom: 8px; }
.tool-page .main-fixed-grid { display: grid; grid-template-columns: repeat(6, minmax(156px, 1fr)); gap: 10px; align-items: start; min-width: 986px; }
.tool-page .main-tail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-items: start; margin-top: 10px; min-width: 0; }
.tool-page .main-upload-row { display: grid; grid-template-columns: minmax(180px, 220px); gap: 10px; margin-top: 10px; }
.tool-page .main-upload-card { width: 100%; min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 18px; border: 1px dashed rgba(23,107,91,.28); border-radius: 8px; background: #f7fbf9; color: var(--text); text-align: center; cursor: pointer; }
.tool-page .main-upload-card:hover { border-color: #176b5b; background: #eef8f4; transform: translateY(-1px); }
.tool-page .main-upload-card-fixed { min-height: 302px; }
.tool-page .main-upload-card-inline { min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 12px 14px; text-align: left; }
.tool-page .main-upload-icon { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(23,107,91,.12); color: #176b5b; font-size: 34px; }
.tool-page .main-upload-card-inline .main-upload-icon { width: 28px; height: 28px; font-size: 20px; }
.tool-page .main-upload-title { font-size: 18px; font-weight: 650; }
.tool-page .main-upload-card-inline .main-upload-title { font-size: 14px; }
.tool-page .main-upload-subtitle { max-width: 180px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.tool-page .main-upload-status { margin: 8px 0; }
.tool-page .main-fixed-grid .chunk { position: relative; min-height: 302px; display: block; }
.tool-page .main-fixed-grid .chunk-media, .tool-page .main-tail-grid .chunk-media { position: relative; height: 100%; min-height: 302px; }
.tool-page .chunk-index { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 3px 6px; border-radius: 5px; background: rgba(20,30,35,.72); color: #fff; font-size: 11px; }
.tool-page .select-image { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.9); color: var(--text); font-size: 11px; }
.tool-page .chunk-media > .delete-image { position: absolute; top: 8px; right: 8px; z-index: 4; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,30,35,.72); color: #fff; font-size: 17px; }
.tool-page .legacy-main-original { width: 224px; }
.tool-page .legacy-main-original .chunk-foot { min-height: 42px; align-items: center; }
.tool-page .legacy-main-original .chunk-foot .ghost { flex: 0 0 auto; white-space: nowrap; }
.tool-page .main-output-panel { display: grid; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf0ed; }
.tool-page .main-output-title { display: grid; gap: 3px; }
.tool-page .main-output-title span { font-size: 12px; }
.tool-page .main-output-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.tool-page .main-export-slots { grid-auto-flow: column; grid-auto-columns: 238px; grid-template-columns: none; overflow-x: auto; padding-bottom: 8px; }
.tool-page .main-output-slot { display: grid; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.tool-page .main-output-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-page .main-output-slot-head strong { font-size: 14px; }
.tool-page .main-logo-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; }
.tool-page .main-logo-toolbar > div:first-child { min-width: 0; display: grid; gap: 3px; }
.tool-page .main-logo-toolbar strong { font-size: 13px; }
.tool-page .main-logo-toolbar span { color: var(--muted); font-size: 11px; }
.tool-page .main-tool-logo-preview { position: absolute; z-index: 5; min-width: 0; max-width: 42%; max-height: 42%; padding: 0; overflow: visible; border: 1px solid transparent; border-radius: 5px; background: transparent; transform: translate(-50%, -50%); cursor: move; touch-action: none; }
.tool-page .main-tool-logo-preview:hover, .tool-page .main-tool-logo-preview:focus-visible { border-color: rgba(23,107,91,.72); outline: 0; }
.tool-page .main-slot-stage .main-tool-logo-preview > img, .tool-page .guide-stage .main-tool-logo-preview > img { width: 100%; height: auto; max-height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); pointer-events: none; }
.tool-page .guide-material-layout-stacked { display: grid; gap: 12px; }
.tool-page .guide-material-block { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; }
.tool-page .guide-material-block-title { min-height: 28px; }
.tool-page .guide-material-block-title strong { color: var(--text); font-size: 13px; }
.tool-page .guide-material-row-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tool-page .guide-material-card { min-width: 0; display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-page .guide-stage { position: relative; overflow: hidden; border: 1px dashed rgba(23,107,91,.32); border-radius: 8px; background: #fff; }
.tool-page .guide-stage-large { aspect-ratio: 2 / 3; }
.tool-page .guide-stage-square { aspect-ratio: 1; background-color: #fafbfa; background-image: linear-gradient(45deg,rgba(20,30,35,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(20,30,35,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(20,30,35,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(20,30,35,.04) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; }
.tool-page .guide-stage.is-empty { display: grid; place-items: center; background: #f8faf8; background-image: none; }
.tool-page .guide-stage > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.tool-page .guide-stage-output { cursor: grab; touch-action: none; user-select: none; }
.tool-page .guide-stage-output.dragging { cursor: grabbing; box-shadow: 0 0 0 2px rgba(23,107,91,.38) inset; }
.tool-page .guide-stage-output > .guide-crop-image { object-fit: cover; pointer-events: none; }
.tool-page .guide-stage.drag-over { box-shadow: 0 0 0 3px rgba(23,107,91,.35) inset; }
.tool-page .guide-stage .main-slot-empty { min-height: 100%; padding: 20px 12px 54px; }
.tool-page .guide-stage-upload-btn { position: absolute; z-index: 6; left: 50%; bottom: 12px; min-width: 76px; min-height: 30px; transform: translateX(-50%); border-color: rgba(23,107,91,.28); background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(20,30,35,.14); }
.tool-page .guide-stage-ai-btn { bottom: 12px; }
.tool-page .guide-subject-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.tool-page .guide-subject-controls label { min-height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); }
.tool-page .guide-subject-controls input { margin: 0; }
.tool-page .main-generated-switcher { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-page .main-generated-index { min-width: 56px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--text); font-size: 12px; text-align: center; box-shadow: 0 2px 8px rgba(20,30,35,.12); }
.tool-page .main-slot-order-actions { display: inline-flex; align-items: center; gap: 5px; }
.tool-page .main-output-slot.dragging, .tool-page .chunk.dragging { opacity: .55; }
.tool-page .main-output-slot.drag-over, .tool-page .chunk.drag-over { outline: 2px solid rgba(23,107,91,.5); outline-offset: 2px; }
.tool-page .main-slot-stage.drag-over { box-shadow: 0 0 0 3px rgba(23,107,91,.35) inset; }
.tool-page .main-slot-pane { display: grid; gap: 6px; }
.tool-page .main-slot-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.tool-page .main-slot-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-page .main-slot-stage-large { aspect-ratio: 3 / 4; min-height: 240px; }
.tool-page .main-slot-stage-square { aspect-ratio: 1 / 1; min-height: 190px; }
.tool-page .main-slot-stage img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tool-page .legacy-crop-stage { cursor: grab; touch-action: none; user-select: none; }
.tool-page .legacy-crop-stage.dragging { cursor: grabbing; box-shadow: 0 0 0 2px rgba(23,107,91,.38) inset; }
.tool-page .legacy-crop-stage .legacy-crop-image,
.tool-page .guide-stage-output .guide-crop-image { position: absolute; max-width: none; max-height: none; display: block; pointer-events: none; object-fit: fill; transition: width .08s linear, height .08s linear, left .08s linear, top .08s linear; }
.tool-page .main-crop-overlay { position: absolute; z-index: 4; inset: 0; border: 2px solid rgba(23,107,91,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 999px rgba(23,107,91,.025); pointer-events: none; }
.tool-page .legacy-crop-hint { position: absolute; z-index: 6; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 4px; background: rgba(20,30,35,.72); color: #fff; font-size: 10px; pointer-events: none; }
.tool-page .main-slot-stage .main-crop-delete { position: absolute; z-index: 7; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; background: rgba(20,30,35,.72); color: #fff; font-size: 17px; }
.tool-page .legacy-crop-result { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-page .legacy-crop-result img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.tool-page .legacy-crop-result.square-result img { aspect-ratio: 1; }
.tool-page .main-slot-stage-large .main-slot-placeholder-image { object-fit: contain; opacity: .32; }
.tool-page .main-slot-placeholder-note { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 5px 6px; border-radius: 5px; background: rgba(20,30,35,.7); color: #fff; font-size: 10px; text-align: center; }
.tool-page .main-generate-btn { position: absolute; top: 50%; left: 50%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: rgba(23,107,91,.95); color: #fff; font-size: 12px; transform: translate(-50%, -50%); }
.tool-page .tool-inline-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tool-page .tool-inline-actions .icon-button { width: 28px; min-width: 28px; padding: 0; }
.tool-page .legacy-main-original[draggable="true"] { cursor: grab; }
.tool-page .legacy-main-original.dragging { opacity: .48; cursor: grabbing; }
.tool-page .tool-prompt-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; color: var(--text); font-size: 12px; font-weight: 650; }
.tool-page .tool-prompt-field textarea { width: 100%; min-height: 56px; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-weight: 400; line-height: 1.5; }
.tool-page .tool-version-switcher { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 6px; background: rgba(20,30,35,.76); color: #fff; font-size: 11px; }
.tool-page .tool-version-switcher .ghost { width: 26px; min-width: 26px; min-height: 24px; padding: 0; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.12); color: #fff; }
.tool-page .tool-result-delete, .tool-page .tool-card-delete { position: absolute; top: 7px; right: 7px; z-index: 2; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(255,255,255,.64); border-radius: 50%; background: rgba(24,29,32,.72); color: #fff; font-size: 17px; line-height: 25px; }
.tool-page .color-reference-media { position: relative; }
.tool-page .color-garment-workflow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.tool-page .color-garment-stage { min-height: 160px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; border: 1px dashed rgba(23,107,91,.35); border-radius: 8px; background: #fbfcfb; color: var(--muted); }
.tool-page .color-garment-stage img { width: 100%; height: 132px; display: block; object-fit: contain; }
.tool-page .color-garment-stage strong { color: var(--text); font-size: 14px; }
.tool-page .color-garment-stage span { font-size: 11px; }
.tool-page .legacy-color-crop-stage { cursor: grab; touch-action: none; user-select: none; }
.tool-page .legacy-color-crop-stage.dragging { cursor: grabbing; box-shadow: 0 0 0 2px rgba(23,107,91,.38) inset; }
.tool-page .legacy-crop-image { transform-origin: center; transition: transform .08s linear; pointer-events: none; }
.tool-page .main-square-inline-actions .download-image.compact { display: inline-flex; align-items: center; }
.tool-page .main-slot-empty { height: 100%; display: grid; place-content: center; gap: 4px; padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.tool-page .main-square-footer { display: grid; gap: 6px; }
.tool-page .main-square-note { color: var(--muted); font-size: 11px; line-height: 1.4; }
.tool-page .color-reference-panel { display: grid; gap: 12px; }
.tool-page .color-reference-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.tool-page .color-reference-title { display: grid; gap: 3px; }
.tool-page .color-reference-title h2 { margin: 0; font-size: 16px; }
.tool-page .color-reference-grid, .tool-page .color-generated-slots, .tool-page .color-square-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tool-page .color-reference-card { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfb; }
.tool-page .color-reference-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 12px; }
.tool-page .color-reference-card-head strong { color: var(--text); font-size: 13px; }
.tool-page .color-reference-toggle { display: inline-flex; align-items: center; gap: 4px; }
.tool-page .color-reference-toggle-top { min-height: 26px; padding: 0 7px; border: 1px solid rgba(23,107,91,.16); border-radius: 999px; background: #eef2ef; font-size: 11px; }
.tool-page .color-reference-toggle-top.is-active { border-color: rgba(23,107,91,.32); background: rgba(23,107,91,.12); color: #176b5b; }
.tool-page .color-reference-upload { width: 100%; overflow: hidden; padding: 0; border: 1px dashed rgba(23,107,91,.35); border-radius: 8px; background: #fff; }
.tool-page .color-reference-upload img, .tool-page .color-reference-empty { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }
.tool-page .color-reference-empty { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.tool-page .color-reference-name { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.tool-page .color-reference-name input { width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12px; }
.tool-page .color-reference-delete { position: absolute; top: 7px; right: 7px; z-index: 3; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,30,35,.74); color: #fff; font-size: 17px; opacity: 0; transition: opacity .14s; }
.tool-page .color-reference-card:hover .color-reference-delete, .tool-page .color-reference-card:focus-within .color-reference-delete { opacity: 1; }
.tool-page .color-reference-name-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.tool-page .exact-color-garment { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; margin: 14px 0; }
.tool-page .exact-color-garment > button { min-height: 172px; display: grid; place-items: center; align-content: center; gap: 7px; overflow: hidden; padding: 10px; border: 1px dashed rgba(23,107,91,.32); border-radius: 8px; background: #f8faf8; color: var(--muted); }
.tool-page .exact-color-garment > button img { width: 100%; height: 134px; display: block; object-fit: contain; }
.tool-page .exact-color-garment > button strong { color: var(--text); font-size: 14px; }
.tool-page .exact-color-garment .tool-prompt-field { margin: 0; }
.tool-color-card-dialog { width: min(520px, calc(100vw - 28px)); max-width: none; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(20,30,35,.24); }
.tool-color-card-dialog::backdrop { background: rgba(20,30,35,.46); }
.tool-color-dialog-shell { display: grid; gap: 14px; padding: 18px; }
.tool-color-dialog-shell header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool-color-dialog-shell h2 { margin: 0; font-size: 18px; }
.tool-color-dialog-shell header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f2f4f3; color: var(--muted); font-size: 20px; }
.tool-color-dialog-preview { width: 100%; height: 250px; display: grid; place-items: center; overflow: hidden; padding: 0; border: 1px dashed rgba(23,107,91,.34); border-radius: 8px; background: #f8faf8; color: var(--muted); }
.tool-color-dialog-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.tool-color-dialog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-color-dialog-actions .color-choice { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; }
.tool-color-dialog-actions .color-choice.black { background: #111; }
.tool-color-dialog-actions .color-choice.white { background: #fff; box-shadow: 0 0 0 1px #d4d8d5 inset; }
.tool-color-dialog-actions .color-picker-button { position: relative; overflow: hidden; cursor: pointer; }
.tool-color-dialog-actions .color-picker-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tool-color-dialog-name { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.tool-color-dialog-name input { height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.tool-color-dialog-enabled { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; }
.tool-color-dialog-shell footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding-top: 4px; }
.tool-page .sizechart-layout { display: grid; grid-template-columns: minmax(420px, 820px) minmax(360px, 1fr); gap: 18px; align-items: start; }
.tool-page .sizechart-preview-shell { min-height: 620px; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #f8f8f7; }
.tool-page .sizechart-saved-preview, .tool-page .sizechart-editor-panel { display: grid; gap: 14px; }
.tool-page .sizechart-saved-card { display: grid; justify-items: center; }
.tool-page .sizechart-canvas { width: 790px; max-width: 100%; padding: 28px 26px; border-radius: 8px; background: #fff; box-shadow: 0 8px 30px rgba(20,30,35,.08); }
.tool-page .sizechart-canvas-blue { border-top: 10px solid #1d4f91; }
.tool-page .sizechart-title { color: #1e1e1e; font-size: 42px; font-weight: 750; text-align: center; }
.tool-page .sizechart-subtitle { margin-top: 8px; color: #6d7178; font-size: 16px; text-align: center; }
.tool-page .sizechart-card { margin-top: 22px; border: 1px solid #d8d8d8; }
.tool-page .sizechart-recommend-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.tool-page .sizechart-recommend-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tool-page .sizechart-recommend-item { min-width: 0; padding: 12px 6px; text-align: center; }
.tool-page .sizechart-recommend-size { font-size: 22px; font-weight: 700; }
.tool-page .sizechart-recommend-divider { width: 30px; height: 1px; margin: 8px auto; background: #c2c5c9; }
.tool-page .sizechart-recommend-hint { color: #666b73; font-size: 11px; }
.tool-page .sizechart-note-band { padding: 8px 12px; background: #1d4f91; color: #fff; font-size: 11px; text-align: center; }
.tool-page .sizechart-note-inline { display: grid; gap: 4px; padding: 10px 14px; color: #62676e; font-size: 11px; }
.tool-page .sizechart-measure-wrap { padding: 0 14px 16px; }
.tool-page .sizechart-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tool-page .sizechart-table th, .tool-page .sizechart-table td { padding: 9px 5px; border: 1px solid #d8d8d8; color: #27292d; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.tool-page .sizechart-table th { background: #f2f3f4; }
.tool-page .sizechart-editor-block { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-page .sizechart-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tool-page .sizechart-block-head h3 { margin: 0; font-size: 14px; }
.tool-page .sizechart-editor-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.tool-page .sizechart-editor-grid-wide { grid-column: 1 / -1; }
.tool-page .field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.tool-page .field input, .tool-page .field select, .tool-page .sizechart-table-row input { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.tool-page .sizechart-recommendations-editor, .tool-page .sizechart-table-editor-shell, .tool-page .sizechart-table-editor { display: grid; gap: 9px; }
.tool-page .sizechart-recommendation-row { display: grid; grid-template-columns: 82px minmax(0,1fr) 32px; gap: 8px; align-items: center; }
.tool-page .sizechart-recommendation-fields { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; }
.tool-page .sizechart-recommendation-column-head { min-height: 28px; color: var(--muted); }
.tool-page .sizechart-column-editor { min-width: 0; display: flex; align-items: center; gap: 5px; }
.tool-page .sizechart-column-editor > input { min-width: 0; flex: 1; }
.tool-page .sizechart-column-editor > span:first-child { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-page .sizechart-column-remove { width: 25px; min-width: 25px; height: 25px; min-height: 25px; padding: 0; border-color: #f0d4d4; border-radius: 5px; color: #ad4444; line-height: 1; }
.tool-page .sizechart-column-remove:hover:not(:disabled) { border-color: #e6aaaa; background: #fdf4f4; }
.tool-page .sizechart-column-remove:disabled { cursor: not-allowed; opacity: .45; }
.tool-page .sizechart-column-required { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #d8e7dc; border-radius: 4px; color: #5d7965; font-size: 10px; line-height: 1.2; }
.tool-page .sizechart-template-note { color: var(--muted); font-size: 11px; }
.tool-page .sizechart-table-row { display: grid; gap: 8px; align-items: center; }
.tool-page .sizechart-row-remove { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: #f8eeee; color: #ad4444; font-size: 17px; }
.tool-page .sizechart-download { display: inline-flex; margin-top: 10px; }

/* Custom size-chart template: the visible blocks are the saved output layout. */
.tool-page .sizechart-custom-canvas { position: relative; width: 790px; max-width: 100%; height: var(--size-canvas-height,1180px); overflow: hidden; border: 1px solid #d9dce1; box-shadow: 0 8px 30px rgba(20,30,35,.08); }
.tool-page .sizechart-custom-full-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.tool-page .sizechart-layout-block { position: absolute; z-index: 1; display: grid; min-width: 0; overflow: hidden; border: 1px dashed transparent; touch-action: none; }
.tool-page .sizechart-layout-block:hover { border-color: rgba(29,79,145,.46); background: rgba(255,255,255,.24); }
.tool-page .sizechart-layout-block.is-selected { border-color: rgba(29,79,145,.66); box-shadow: 0 0 0 1px rgba(29,79,145,.12); }
.tool-page .sizechart-layout-block.is-dragging { z-index: 3; border-color: #1d4f91; background: rgba(255,255,255,.78); box-shadow: 0 4px 14px rgba(20,42,68,.18); cursor: grabbing; }
.tool-page .sizechart-layout-handle { position: absolute; z-index: 2; top: 2px; left: 2px; padding: 2px 5px; border: 0; border-radius: 4px; background: rgba(23,31,42,.72); color: #fff; font-size: 10px; line-height: 1.2; opacity: 0; cursor: grab; }
.tool-page .sizechart-layout-block:hover .sizechart-layout-handle, .tool-page .sizechart-layout-block.is-dragging .sizechart-layout-handle { opacity: 1; }
.tool-page .sizechart-layout-block.is-selected .sizechart-layout-handle { opacity: 1; }
.tool-page .sizechart-custom-title { display: grid; place-items: center; min-width: 0; padding: 4px 12px; color: #1f2024; font-size: 37px; font-weight: 750; text-align: center; overflow-wrap: anywhere; }
.tool-page .sizechart-custom-subtitle { display: grid; place-items: center; min-width: 0; padding: 3px 12px; color: #666b73; font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.tool-page .sizechart-custom-recommendations { display: grid; grid-template-columns: repeat(auto-fit,minmax(68px,1fr)); align-items: stretch; height: 100%; border: 1px solid #d8d8d8; background: rgba(255,255,255,.9); }
.tool-page .sizechart-custom-recommend-item { display: grid; align-content: center; justify-items: center; min-width: 0; padding: 6px 4px; border-right: 1px solid #e1e2e4; text-align: center; }
.tool-page .sizechart-custom-recommend-item:last-child { border-right: 0; }
.tool-page .sizechart-custom-recommend-item strong { font-size: 19px; }
.tool-page .sizechart-custom-recommend-item span { margin-top: 5px; color: #666b73; font-size: 11px; overflow-wrap: anywhere; }
.tool-page .sizechart-custom-note { display: grid; align-content: center; justify-items: center; gap: 4px; min-width: 0; padding: 7px 14px; background: rgba(255,255,255,.84); color: #545960; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.tool-page .sizechart-custom-note span:first-child { font-weight: 700; }
.tool-page .sizechart-custom-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; background: var(--size-table-cell-bg,#fff); }
.tool-page .sizechart-custom-table th, .tool-page .sizechart-custom-table td { padding: 3px; border: var(--size-table-border-width,1px) solid var(--size-table-border,#d8d8d8); color: var(--size-table-cell-text,#27292d); font-size: var(--size-table-cell-font,12px); text-align: center; overflow-wrap: anywhere; }
.tool-page .sizechart-custom-table th { background: var(--size-table-header-bg,#f2f3f4); color: var(--size-table-header-text,#27292d); font-size: var(--size-table-header-font,13px); font-weight: 700; }
.tool-page .sizechart-custom-canvas[data-size-content-mode="table"] .sizechart-layout-block-recommendations,
.tool-page .sizechart-custom-canvas[data-size-content-mode="recommend"] .sizechart-layout-block-table { display: none; }
.tool-page .sizechart-canvas-table-grid { padding: 30px 28px 24px; background: #f7f8fa; }
.tool-page .sizechart-canvas-table-grid .sizechart-title { color: #1d2733; }
.tool-page .sizechart-table-grid-layout { display: grid; grid-template-columns: minmax(185px,.72fr) minmax(0,1.28fr); gap: 14px; margin-top: 24px; }
.tool-page .sizechart-table-grid-panel { min-width: 0; overflow: hidden; border: 1px solid #d8dee6; border-radius: 6px; background: #fff; }
.tool-page .sizechart-table-grid-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 13px; background: #273a50; color: #fff; }
.tool-page .sizechart-table-grid-panel > header strong { font-size: 14px; }
.tool-page .sizechart-table-grid-panel > header span { color: rgba(255,255,255,.72); font-size: 10px; }
.tool-page .sizechart-table-grid-panel .sizechart-table th { background: #e8eef5; color: #26384d; }
.tool-page .sizechart-table-grid-panel .sizechart-table td { background: #fff; }
.tool-page .sizechart-table-grid-note { margin-top: 14px; padding: 9px 12px; border-left: 3px solid #556f8e; background: #edf1f5; color: #586574; font-size: 11px; line-height: 1.5; text-align: center; }
.tool-page .sizechart-custom-editor { gap: 10px; }
.tool-page .sizechart-custom-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #dce4ee; border-radius: 7px; background: #f7f9fc; }
.tool-page .sizechart-custom-mode > div:first-child { display: grid; gap: 2px; }
.tool-page .sizechart-custom-mode strong { font-size: 12px; }
.tool-page .sizechart-custom-mode span { color: var(--muted); font-size: 10px; }
.tool-page .sizechart-custom-mode [role="radiogroup"] { display: inline-grid; grid-template-columns: repeat(3, auto); overflow: hidden; border: 1px solid #cfd8e3; border-radius: 6px; background: #fff; }
.tool-page .sizechart-custom-mode button { min-height: 29px; padding: 0 9px; border: 0; border-right: 1px solid #d8e0e9; background: #fff; color: #4f5c6a; font-size: 11px; white-space: nowrap; }
.tool-page .sizechart-custom-mode button:last-child { border-right: 0; }
.tool-page .sizechart-custom-mode button[aria-pressed="true"] { background: #273a50; color: #fff; }
.tool-page .sizechart-custom-background-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfa; }
.tool-page .sizechart-custom-background-control > div { display: flex; align-items: center; gap: 7px; }
.tool-page .sizechart-custom-background-control span { color: var(--muted); font-size: 11px; }
.tool-page .sizechart-background-fit { min-width: 110px; }
.tool-page .sizechart-background-fit select { height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 11px; }
.tool-page .sizechart-layout-position-control { display: grid; gap: 10px; padding: 10px; border: 1px solid #dce4ee; border-radius: 7px; background: #f7f9fc; }
.tool-page .sizechart-layout-position-control .sizechart-block-head { margin: 0; }
.tool-page .sizechart-layout-position-control .sizechart-block-head > div { display: grid; gap: 2px; }
.tool-page .sizechart-layout-position-control .sizechart-block-head > strong { color: #1d4f91; font-size: 12px; }
.tool-page .sizechart-layout-targets { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-page .sizechart-layout-targets .selected { border-color: #1d4f91; background: #e9f0fb; color: #1d4f91; }
.tool-page .sizechart-layout-nudge { display: grid; grid-template-columns: minmax(92px,1fr) 112px minmax(92px,1fr) minmax(92px,1fr); gap: 8px; align-items: end; }
.tool-page .sizechart-layout-arrow-pad { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 30px); gap: 3px; justify-content: center; }
.tool-page .sizechart-layout-arrow-pad button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); font-size: 15px; }
.tool-page .sizechart-layout-arrow-pad button:hover { border-color: #1d4f91; color: #1d4f91; }
.tool-page .sizechart-layout-arrow-pad button[data-size-layout-nudge="up"] { grid-column: 2; }
.tool-page .sizechart-layout-arrow-pad button[data-size-layout-nudge="left"] { grid-column: 1; grid-row: 2; }
.tool-page .sizechart-layout-arrow-pad button[data-size-layout-nudge="right"] { grid-column: 3; grid-row: 2; }
.tool-page .sizechart-layout-arrow-pad button[data-size-layout-nudge="down"] { grid-column: 2; grid-row: 2; }
.tool-page .sizechart-layout-nudge input, .tool-page .sizechart-layout-nudge select { width: 100%; height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.tool-page .sizechart-layout-nudge small { color: var(--muted); font-size: 10px; }
.tool-page .sizechart-custom-background-control { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.tool-page .sizechart-background-summary { min-width: 0; display: grid; gap: 2px; }
.tool-page .sizechart-background-summary strong { font-size: 12px; }
.tool-page .sizechart-background-summary span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tool-page .sizechart-background-upload-actions { display: inline-flex; align-items: center; gap: 5px; }
.tool-page .sizechart-background-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 7px; border-top: 1px solid #e5e8ec; }
.tool-page .sizechart-background-color { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 10px; }
.tool-page .sizechart-background-color input { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.tool-page .sizechart-background-fit { min-width: 0; display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.tool-page .sizechart-background-fit select { width: auto; }
.tool-page .sizechart-advanced-layout { border: 1px solid #dce4ee; border-radius: 7px; background: #f7f9fc; }
.tool-page .sizechart-advanced-layout summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; cursor: pointer; list-style: none; }
.tool-page .sizechart-advanced-layout summary::-webkit-details-marker { display: none; }
.tool-page .sizechart-advanced-layout summary span { color: #34475a; font-size: 12px; font-weight: 650; }
.tool-page .sizechart-advanced-layout summary small { color: var(--muted); font-size: 10px; }
.tool-page .sizechart-advanced-layout-body { padding: 0 10px 10px; }
.tool-page .sizechart-advanced-layout-body .sizechart-layout-position-control { padding: 0; border: 0; background: transparent; }
.tool-page .sizechart-content-editor .sizechart-block-head > div, .tool-page .sizechart-table-editor-block .sizechart-block-head > div, .tool-page .sizechart-recommend-editor .sizechart-block-head > div { display: grid; gap: 2px; }
.tool-page .sizechart-listing-size-editor { border-color: #cbd9ee; background: #f8fbff; }
.tool-page .listing-size-info-note { margin-bottom: 10px; padding: 8px 10px; border-left: 3px solid #4e78bb; background: #edf4ff; color: #536170; font-size: 11px; line-height: 1.55; }
.tool-page .sizechart-upload-previews { display: grid; gap: 10px; margin-top: 12px; }
.tool-page .sizechart-upload-preview { display: grid; gap: 10px; margin-top: 0; padding: 12px; border: 1px solid #cbd9ee; border-radius: 8px; background: #f8fbff; }
.tool-page .sizechart-upload-preview header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-page .sizechart-upload-preview header strong { font-size: 13px; }
.tool-page .sizechart-upload-preview header small, .tool-page .sizechart-upload-preview-actions small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.tool-page .sizechart-upload-table { overflow-x: auto; border: 1px solid #e2e7ef; border-radius: 5px; background: #fff; }
.tool-page .sizechart-upload-table .sizechart-table { width: 100%; min-width: 580px; margin: 0; }
.tool-page .sizechart-upload-table .sizechart-table th, .tool-page .sizechart-upload-table .sizechart-table td { padding: 8px 6px; font-size: 11px; }
.tool-page .sizechart-upload-table .sizechart-upload-corner { min-width: 126px; text-align: right; }
.tool-page .sizechart-upload-table .sizechart-upload-corner span, .tool-page .sizechart-upload-table .sizechart-upload-corner small { display: block; }
.tool-page .sizechart-upload-table .sizechart-upload-corner small { margin-top: 2px; text-align: left; font-size: 10px; }
.tool-page .sizechart-upload-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-page .sizechart-upload-preview-empty { padding: 18px 12px; border: 1px dashed #c7d5e9; border-radius: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.tool-page .sizechart-upload-preview.is-stale { opacity: .58; }
.tool-page .sizechart-table-style-editor { gap: 12px; }
.tool-page .sizechart-style-color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.tool-page .sizechart-style-color-grid label { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; border: 1px solid #dfe4ea; border-radius: 6px; background: #fafbfc; color: #58616c; font-size: 10px; }
.tool-page .sizechart-style-color-grid label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-page .sizechart-style-color-grid input { width: 22px; height: 22px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.tool-page .sizechart-style-range-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.tool-page .sizechart-style-range-grid label { min-width: 0; display: grid; gap: 6px; color: #58616c; font-size: 10px; }
.tool-page .sizechart-style-range-grid span { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.tool-page .sizechart-style-range-grid output { min-width: 18px; padding: 2px 4px; border-radius: 4px; background: #eef1f5; color: #313942; font-size: 10px; text-align: center; }
.tool-page .sizechart-style-range-grid input { width: 100%; accent-color: #273a50; }
.tool-page .sizechart-custom-tables-editor { gap: 10px; }
.tool-page .sizechart-custom-tables-list { display: grid; gap: 8px; }
.tool-page .sizechart-custom-table-card { display: grid; gap: 8px; padding: 9px; border: 1px solid #dfe4ea; border-radius: 7px; background: #fafbfc; }
.tool-page .sizechart-custom-table-card > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-page .sizechart-custom-table-card > header > div { min-width: 0; display: grid; gap: 2px; }
.tool-page .sizechart-custom-table-card strong { font-size: 12px; }
.tool-page .sizechart-custom-table-card header span { color: var(--muted); font-size: 10px; }
.tool-page .sizechart-table-card-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.tool-page .sizechart-table-card-actions .compact { min-height: 30px; padding: 0 8px; font-size: 11px; }
.tool-page .sizechart-table-position-note { color: var(--muted); font-size: 10px; }
.tool-page .sizechart-custom-table-card header label { min-width: 0; flex: 1; display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.tool-page .sizechart-custom-table-card header input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); }
.tool-page .sizechart-custom-table-card .sizechart-block-actions { justify-content: flex-end; }
.tool-page .sizechart-bulk-paste { margin-bottom: 10px; border: 1px solid #dfe4ea; border-radius: 6px; background: #fafbfc; }
.tool-page .sizechart-bulk-paste summary { min-height: 34px; display: flex; align-items: center; padding: 0 9px; color: #4e5965; font-size: 11px; cursor: pointer; }
.tool-page .sizechart-bulk-paste > div { display: grid; gap: 7px; padding: 0 9px 9px; }
.tool-page .sizechart-bulk-paste textarea { width: 100%; min-height: 76px; resize: vertical; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 11px; line-height: 1.45; }
.tool-page .sizechart-bulk-paste button { justify-self: start; min-height: 29px; font-size: 11px; }

@media (max-width: 760px) {
  .tool-page .sizechart-custom-canvas { width: 790px; max-width: none; }
  .tool-page .sizechart-preview-shell { justify-content: start; }
  .tool-page .sizechart-style-color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-page .sizechart-style-range-grid { grid-template-columns: 1fr; }
}

/* Compact workbench treatment shared by the three migrated garment tools. */
.tool-page { background: #f1f3f2; }
.tool-page-header { min-height: 58px; padding: 0 20px; }
.tool-page-heading strong { font-size: 15px; }
.tool-page-content { padding: 14px 20px 34px; }
.tool-page-content > * { width: min(1480px, 100%); }
.tool-intro { align-items: center; min-height: 48px; padding: 0 0 12px; }
.tool-intro h1 { font-size: 18px; }
.tool-intro p { margin-top: 3px; font-size: 12px; line-height: 1.45; }
.tool-section { margin-top: 14px; padding: 0 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tool-intro + .tool-section { margin-top: 14px; }
.tool-section-head { min-height: 42px; margin: 0 0 12px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.tool-section-head strong { font-size: 14px; }
.tool-section-head span { font-size: 11px; }
.tool-section > .tool-source-grid, .tool-section > .tool-output-grid, .tool-section > .tool-project-images, .tool-section > .tool-empty, .tool-section > .tool-current-image, .tool-section > .color-tool-layout, .tool-section > .size-tool-layout { margin-right: 13px; margin-left: 13px; }
.tool-empty { min-height: 118px; border-radius: 6px; font-size: 12px; }
.tool-source-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.tool-output-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.tool-source-card, .tool-output-card { border-radius: 7px; box-shadow: none; }
.tool-source-card img { aspect-ratio: 4 / 5; }
.tool-output-card img { aspect-ratio: 1 / 1; }
.tool-source-name { padding: 6px 7px 0; font-size: 11px; }
.tool-source-meta { padding: 3px 7px 6px; font-size: 10px; }
.tool-source-card button, .tool-output-card a { min-height: 29px; font-size: 11px; }
.tool-current-image { grid-template-columns: minmax(228px, 290px) minmax(0, 1fr); gap: 16px; }
.tool-current-preview { min-height: 228px; border-radius: 7px; }
.tool-current-preview img { max-height: 340px; }
.tool-current-controls { gap: 10px; padding-top: 0; }
.tool-current-controls h2 { font-size: 15px; }
.tool-current-controls p { max-width: 520px; font-size: 12px; line-height: 1.5; }
.tool-preset-row { gap: 6px; }
.tool-preset-button { min-width: 102px; min-height: 38px; grid-auto-flow: column; grid-template-columns: auto auto; gap: 6px; padding: 0 10px; border-radius: 6px; }
.tool-preset-button strong { font-size: 12px; }
.tool-preset-button small { font-size: 10px; }
.tool-project-images { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tool-project-image { border-radius: 6px; }
.tool-project-image button { min-height: 29px; font-size: 10px; }
.color-tool-layout { grid-template-columns: minmax(230px, 285px) minmax(0, 1fr); gap: 18px; }
.color-garment-panel { gap: 8px; }
.color-garment-panel .tool-section-head { min-height: 30px; padding: 0; border: 0; background: transparent; }
.color-garment-stage { min-height: 260px; border-radius: 7px; }
.color-card-list { grid-template-columns: repeat(5, minmax(112px, 1fr)); gap: 8px; }
.color-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 6px; padding: 7px; border-radius: 7px; }
.color-card-swatch { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 5px; }
.color-card input[type="text"] { grid-column: 1 / -1; height: 29px; font-size: 11px; }
.color-card-actions { grid-column: 1; gap: 4px; }
.color-card input[type="color"] { width: 29px; height: 29px; }
.color-card-actions button { min-width: 28px; height: 29px; padding: 0 5px; }
.color-card-toggle { grid-column: 2; align-self: center; font-size: 10px; }
.color-output-card .color-output-top { padding: 6px 7px 0; }
.size-tool-layout { grid-template-columns: minmax(430px, 1.15fr) minmax(330px, .85fr); gap: 18px; }
.size-editor { order: 2; gap: 9px; }
.size-preview-wrap { order: 1; top: 12px; min-height: 280px; padding: 12px; border-radius: 7px; }
.size-preview-title { padding-top: 18px; font-size: 22px; }
.size-preview-subtitle { padding-bottom: 12px; }
.size-preview table { margin-bottom: 16px; }
.size-preview th, .size-preview td { height: 32px; font-size: 10px; }
.size-form-grid { gap: 8px; }
.size-field input, .size-field select { height: 32px; font-size: 12px; }
.size-table input { height: 32px; }
.size-table button { height: 31px; }
.size-editor-actions { margin-top: 1px; }
.size-rendered { padding-top: 10px; }

@media (max-width: 900px) {
  .tool-page-header { padding-right: 14px; padding-left: 14px; }
  .tool-page-content { padding-right: 14px; padding-left: 14px; }
  .tool-current-image, .color-tool-layout, .size-tool-layout { grid-template-columns: 1fr; }
  .size-editor { order: 1; }
  .size-preview-wrap { order: 2; }
  .color-card-list { grid-template-columns: repeat(5, minmax(100px, 1fr)); overflow-x: auto; }
  .tool-page .sizechart-layout { grid-template-columns: 1fr; }
  .tool-page .sizechart-preview-shell { min-height: 0; }
  .tool-page .color-reference-grid, .tool-page .color-generated-slots, .tool-page .color-square-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-inline-crop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .tool-page-content { padding: 12px 10px 28px; }
  .tool-page-header { padding: 0 10px; }
  .tool-section { margin-top: 10px; }
  .tool-section > .tool-source-grid, .tool-section > .tool-output-grid, .tool-section > .tool-project-images, .tool-section > .tool-empty, .tool-section > .tool-current-image, .tool-section > .color-tool-layout, .tool-section > .size-tool-layout { margin-right: 9px; margin-left: 9px; }
  .tool-source-grid, .tool-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-current-image { grid-template-columns: 1fr; }
  .color-card-list { grid-template-columns: repeat(5, 108px); }
  .tool-page .legacy-tool { padding: 10px; }
  .tool-page .legacy-tool .chunks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .legacy-main-original { width: auto; }
  .tool-page .panel-head { align-items: flex-start; flex-direction: column; }
  .tool-page .chunks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .main-output-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .main-export-slots { grid-auto-columns: minmax(218px, 218px); grid-template-columns: none; }
  .tool-page .color-reference-grid, .tool-page .color-generated-slots, .tool-page .color-square-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-pending-grid, .main-inline-crop-grid { grid-template-columns: 1fr; }
  .main-pending-section > header, .main-crop-section > header { align-items: flex-start; flex-direction: column; }
  .main-crop-section > header small { text-align: left; }
  .tool-page .sizechart-editor-grid { grid-template-columns: 1fr; }
  .tool-page .sizechart-editor-grid-wide { grid-column: auto; }
  .tool-page .sizechart-custom-background-control { align-items: flex-start; flex-direction: column; }
  .tool-page .sizechart-background-fit { width: 100%; }
  .tool-page .sizechart-layout-nudge { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tool-page .sizechart-layout-arrow-pad { grid-column: 1 / -1; grid-row: 2; }
  .tool-page .sizechart-canvas { padding: 18px 12px; }
  .tool-page .sizechart-title { font-size: 30px; }
}

.admin-body { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0,1fr); }
.admin-body.admin-auth-pending { display: block; }
.admin-body.admin-auth-pending > .admin-sidebar,
.admin-body.admin-auth-pending > .admin-main { display: none; }
.admin-login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, #efecff 0, var(--bg) 42%); }
.admin-login-card { width: min(390px, 100%); display: grid; gap: 16px; padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 20px 60px rgba(28,31,36,.1); }
.admin-login-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--primary); color: var(--primary-text); font-weight: 700; }
.admin-login-card h1 { margin: 0; font-size: 22px; }
.admin-login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.admin-login-card input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); outline: 0; }
.admin-login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(114,92,255,.11); }
.admin-login-back { color: var(--muted); font-size: 13px; text-align: center; text-decoration: none; }
.admin-login-back:hover { color: var(--text); }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 14px; background: var(--panel); border-right: 1px solid var(--line); }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 24px; }
.admin-brand span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--primary); color: var(--primary-text); font-weight: 700; }
.admin-sidebar nav { display: grid; gap: 5px; }
.admin-nav { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); text-decoration: none; }
.admin-nav:hover, .admin-nav.active { background: var(--panel-soft); color: var(--text); }
.admin-main { min-width: 0; padding: 28px; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.admin-header h1, .admin-panel h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.stat-card span { display: block; color: var(--muted); font-size: 13px; }
.stat-card strong { display: block; margin-top: 9px; font-size: 26px; }
.admin-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.admin-search { width: 240px; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.admin-table th, .admin-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
.admin-table th { color: var(--muted); font-weight: 500; background: var(--panel-soft); }
.system-log-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.system-log-summary > span { min-width: 0; padding: 14px 18px; border-right: 1px solid var(--line); }
.system-log-summary > span:last-child { border-right: 0; }
.system-log-summary small, .system-log-summary strong { display: block; }
.system-log-summary small { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.system-log-summary strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.system-log-filters { display: grid; grid-template-columns: 150px 150px minmax(220px, 1fr) auto; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.system-log-filters select { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.system-log-filters .admin-search { width: 100%; border-radius: 6px; }
.system-log-table { min-width: 1040px; }
.system-log-table td { vertical-align: top; }
.system-log-time { white-space: nowrap; }
.system-log-level { display: inline-flex; min-width: 44px; justify-content: center; padding: 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.system-log-level.info { background: #eaf2ff; color: #245ea8; }
.system-log-level.warning { background: #fff4d8; color: #8a5a00; }
.system-log-level.error { background: #fde8e8; color: #a12b2b; }
.system-log-table td > small, .system-log-event small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.system-log-event { min-width: 360px; max-width: 620px; }
.system-log-event strong, .system-log-event small { display: block; overflow-wrap: anywhere; }
.system-log-footer { display: flex; min-height: 58px; align-items: center; justify-content: center; padding: 10px 18px; }
.member-name strong, .member-name span { display: block; }
.member-name span { margin-top: 3px; color: var(--muted); }
.member-row-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.status-pill { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #e9f7ef; color: var(--success); }
.status-pill.disabled { background: #fdeeee; color: var(--danger); }
.status-pill.vip { border: 1px solid #d8d0ff; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.table-button { border: 0; background: transparent; color: var(--accent); padding: 3px 0; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-card select { height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; background: var(--panel); }
.member-workspace-card { width: min(960px, calc(100vw - 32px)); max-height: min(88vh, 820px); padding: 22px; overflow: hidden; grid-template-rows: auto auto auto minmax(0, 1fr); }
.member-workspace-heading h2 { margin: 0; font-size: 18px; }
.member-workspace-heading p { margin: 4px 0 0; }
.member-workspace-query { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.member-workspace-query input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); }
.member-workspace-content { min-height: 0; display: grid; gap: 14px; overflow-y: auto; padding-right: 4px; }
.member-workspace-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member-workspace-member > div { min-width: 0; display: grid; gap: 3px; }
.member-workspace-member strong { font-size: 15px; }
.member-workspace-member span:not(.status-pill) { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-workspace-section { display: grid; gap: 9px; }
.member-workspace-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-workspace-section-head h3 { margin: 0; font-size: 13px; }
.member-workspace-section-head span { color: var(--muted); font-size: 11px; }
.member-workspace-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.member-workspace-project-card { min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.member-workspace-project-thumb { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--panel-soft); color: var(--muted); }
.member-workspace-project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.member-workspace-project-card > div:last-child { min-width: 0; display: grid; gap: 2px; }
.member-workspace-project-card strong, .member-workspace-project-card span, .member-workspace-project-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-workspace-project-card strong { font-size: 12px; }
.member-workspace-project-card span, .member-workspace-project-card small { color: var(--muted); font-size: 10px; }
.member-workspace-list { display: grid; gap: 6px; }
.member-workspace-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; border-bottom: 1px solid var(--line); }
.member-workspace-row strong, .member-workspace-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-workspace-row strong { font-size: 12px; font-weight: 600; }
.member-workspace-row span { color: var(--muted); font-size: 11px; text-align: right; }
.member-workspace-two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.member-workspace-two-column > div { min-width: 0; }
.member-workspace-empty { margin: 10px 0; color: var(--muted); font-size: 12px; }
.settings-form { padding: 20px; display: grid; gap: 20px; }
.settings-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.settings-form label small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.settings-form input { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); }
.settings-form textarea { width: 100%; min-height: 78px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel); line-height: 1.5; }
.switch-row { display: flex !important; align-items: center; gap: 10px; padding: 12px; border-radius: 9px; background: var(--panel-soft); }
.switch-row input { width: 18px; height: 18px; }
.switch-row span, .switch-row small { display: block; }
.switch-row small { margin-top: 3px; color: var(--muted); }
.settings-group { padding-top: 18px; border-top: 1px solid var(--line); }
.settings-group-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.settings-group-title h3 { margin: 0; font-size: 16px; }
.ai-service-alerts { padding: 14px; border: 1px solid rgba(194, 57, 52, .28); border-radius: 8px; background: #fff7f6; }
.ai-service-alert-list { display: grid; gap: 8px; }
.ai-service-alert-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid rgba(194, 57, 52, .2); border-radius: 6px; background: #fff; }
.ai-service-alert-item div { display: grid; gap: 3px; }
.ai-service-alert-item span, .ai-service-alert-item small { color: var(--muted); font-size: 12px; }
.settings-title-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.settings-span { grid-column: 1 / -1; }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.payment-package-list { display: grid; gap: 18px; }
.payment-package-group { display: grid; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.payment-package-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-package-group > header > div { display: grid; gap: 3px; }
.payment-package-group > header strong { font-size: 14px; }
.payment-package-group > header span, .payment-package-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.payment-package-group-list { display: grid; gap: 8px; }
.payment-package-row { display: grid; grid-template-columns: 120px minmax(160px, 1.4fr) 130px 105px 95px 105px 64px 32px; gap: 8px; align-items: end; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.payment-package-group .payment-package-row { background: var(--panel); }
.payment-package-row label { min-width: 0; }
.payment-package-row input, .payment-package-row select { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); }
.payment-package-enabled { height: 36px; display: flex !important; flex-direction: row; align-items: center; justify-content: center; gap: 6px !important; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.payment-package-enabled input { width: 16px; height: 16px; padding: 0; }
.payment-package-remove { margin-bottom: 3px; color: var(--danger); font-size: 18px; }
.payment-order-table { min-width: 940px; }
.membership-plan-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.membership-plan-summary { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.membership-plan-summary.recommended { border-color: #d6b164; box-shadow: inset 0 3px 0 #d6b164; }
.membership-plan-summary header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membership-plan-summary header strong { font-size: 13px; }
.membership-plan-summary header span { padding: 3px 6px; border-radius: 4px; background: #fff3d8; color: #9a5b08; font-size: 10px; font-weight: 700; }
.membership-plan-summary p { min-height: 34px; margin: 7px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.membership-plan-summary ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.membership-plan-summary li { position: relative; padding-left: 14px; color: var(--text); font-size: 11px; line-height: 1.45; }
.membership-plan-summary li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.update-stage-status { display: grid; gap: 5px; margin-top: 12px; padding: 11px 12px; border: 1px solid #cfe6d9; border-radius: 8px; background: #f4fbf7; color: var(--success); }
.update-stage-status strong { font-size: 13px; }
.update-stage-status span { color: var(--muted); font-size: 12px; }
.update-stage-status code { width: fit-content; max-width: 100%; overflow-x: auto; padding: 4px 6px; border-radius: 4px; background: #eaf5ee; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; white-space: nowrap; }
.update-stage-status.not-ready { border-color: #efd6a8; background: #fff9ed; color: #92641b; }
.api-profile-table { overflow-x: auto; padding-bottom: 2px; }
.api-profile-table-head,
.api-profile-row {
  display: grid;
  grid-template-columns: 92px minmax(180px, 1.5fr) minmax(170px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) 145px 104px;
  gap: 8px;
  align-items: center;
  min-width: 1100px;
}
.api-profile-table-head { padding: 0 10px 8px; color: var(--muted); font-size: 12px; }
.api-profile-list { display: grid; gap: 8px; }
.api-profile-row { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.api-profile-row.selected-image { border-color: rgba(31, 122, 87, .45); }
.api-profile-row.selected-analysis { box-shadow: inset 0 0 0 1px rgba(31, 122, 87, .12); }
.api-profile-row label { min-width: 0; }
.api-profile-row input { width: 100%; box-sizing: border-box; }
.api-model-stack { display: grid; gap: 6px; }
.api-role-buttons,
.api-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.api-purpose-pill { display: inline-flex !important; width: auto; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: var(--muted) !important; cursor: pointer; white-space: nowrap; }
.api-purpose-pill.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent) !important; }
.api-purpose-pill input { width: 14px !important; height: 14px !important; margin: 0; padding: 0; }
.icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; }
.icon-button:disabled { opacity: .35; cursor: not-allowed; }
.maintenance-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(246, 248, 248, .98); color: var(--text); text-align: center; }
.maintenance-overlay[hidden] { display: none; }
.maintenance-overlay-content { display: grid; justify-items: center; gap: 12px; max-width: 360px; }
.maintenance-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 800; }
.maintenance-overlay h1 { margin: 4px 0 0; font-size: 24px; }
.maintenance-overlay p { margin: 0; color: var(--muted); line-height: 1.7; }
@media (max-width: 800px) {
  .admin-body { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(2,1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .api-profile-table-head { display: none; }
  .api-profile-row { grid-template-columns: 1fr 1fr; min-width: 0; }
  .api-profile-row > * { min-width: 0; }
  .membership-plan-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .marketing-copy-editor-layout { grid-template-columns: 1fr; }
  .marketing-copy-editor-preview { position: static; min-height: 260px; padding: 10px; }
  .marketing-copy-style-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-copy-custom-layout { grid-template-columns: 1fr; }
  .marketing-copy-custom-layout-head { align-items: stretch; flex-direction: column; }
  .marketing-copy-reference-template-head-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .marketing-copy-reference-modes { grid-template-columns: 1fr; }
  .marketing-copy-reference-template-actions { grid-template-columns: 1fr 1fr; }
  .marketing-copy-reference-template-actions input { grid-column: 1 / -1; }
  .marketing-copy-reference-crop-card { width: calc(100vw - 20px); }
  .marketing-copy-reference-crop-card > header p { margin-right: 0; }
  .marketing-copy-reference-crop-card footer { align-items: stretch; flex-direction: column; }
  .marketing-copy-reference-crop-card footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .marketing-copy-custom-layout .button { width: 100%; justify-content: center; }
  .admin-main { padding: 16px 12px; }
  .admin-header, .admin-panel-head { flex-direction: column; }
  .admin-search { width: 100%; }
  .system-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-log-summary > span:nth-child(2) { border-right: 0; }
  .system-log-summary > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .system-log-filters { grid-template-columns: 1fr 1fr; }
  .system-log-filters .admin-search { grid-column: 1 / -1; }
  .stat-grid { grid-template-columns: 1fr; }
  .dialog-grid { grid-template-columns: 1fr; }
  .member-workspace-card { width: min(680px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 18px; }
  .member-workspace-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-workspace-two-column { grid-template-columns: 1fr; gap: 14px; }
  .payment-dialog-card { width: calc(100vw - 20px); padding: 18px; }
  .payment-package-options { grid-template-columns: 1fr; }
  .marketing-copy-points { grid-template-columns: 1fr; }
  .marketing-copy-ai-row { grid-template-columns: 1fr; }
  .marketing-copy-ai-row .button { width: 100%; }
  .marketing-copy-template-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .marketing-copy-template-head > div { justify-content: flex-start; flex-wrap: wrap; }
  .marketing-copy-template-save { grid-template-columns: 1fr; }
  .marketing-copy-template-save .button { width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-span { grid-column: auto; }
  .payment-package-row { grid-template-columns: 1fr 1fr; }
  .payment-package-group > header { align-items: flex-start; flex-direction: column; }
  .membership-plan-overview { grid-template-columns: 1fr; }
  .payment-package-remove { justify-self: end; }
  .api-profile-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dialog-card.marketing-copy-card { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 18px; }
  .marketing-copy-editor-layout { grid-template-columns: 1fr; gap: 14px; }
  .marketing-copy-editor-preview { position: static; min-height: 230px; padding: 10px; }
  .marketing-copy-points { grid-template-columns: 1fr; }
  .marketing-copy-style-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-copy-learn { align-items: stretch; flex-direction: column; }
  .marketing-copy-learn .button { width: 100%; justify-content: center; }
  .marketing-copy-style-head { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (max-width: 900px) {
  .tool-page .guide-material-row-three { grid-template-columns: 1fr; }
  .tool-page .main-logo-toolbar { align-items: flex-start; flex-direction: column; }
}

/* Membership center uses the same workspace shell and design tokens as the store tools. */
body.membership-body { min-height: 100vh; background: #f4f6f5; color: var(--text); }
.membership-shell { min-height: 100vh; display: grid; grid-template-columns: 58px minmax(0, 1fr); }
.membership-rail { position: sticky; grid-column: 1; grid-row: 1; }
.membership-rail-logo { color: var(--primary-text); text-decoration: none; }
.membership-body .membership-rail .icon-button.active { background: #e8f3f0; color: #276f68; }
.member-workspace { min-width: 0; }
.member-topbar { height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 32px; border-bottom: 1px solid #dfe5f0; background: rgba(255, 255, 255, .96); }
.member-brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.member-brand .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: #315fc5; color: #fff; font-size: 10px; font-weight: 800; }
.member-brand strong { font-size: 14px; white-space: nowrap; }
.member-header-copy { min-width: 0; display: grid; gap: 2px; padding-left: 18px; border-left: 1px solid var(--line); }
.member-header-copy b { font-size: 13px; }
.member-header-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.member-top-actions { min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.member-top-actions .button { min-height: 34px; border-radius: 7px; font-size: 11px; text-decoration: none; white-space: nowrap; }
.member-page { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 56px; }
.member-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.member-summary-copy { z-index: 2; grid-area: 1 / 1; width: min(540px, 50%); min-height: 0; align-self: start; justify-self: end; display: flex; flex-direction: column; justify-content: center; padding: 62px 58px 30px 24px; text-shadow: 0 1px 22px rgba(255, 255, 255, 1); }
.member-summary .section-kicker { color: #276f68; font-size: 12px; font-weight: 800; }
.member-summary h1 { max-width: 520px; margin: 12px 0 15px; font-size: 44px; line-height: 1.13; }
.member-summary-copy p { max-width: 470px; margin: 0; color: #3f4746; font-size: 15px; line-height: 1.75; }
.member-summary-visual { grid-area: 1 / 1; min-width: 0; height: 410px; margin: 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(38, 60, 55, .12); }
.member-summary-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 60%; }
.account-panel { min-width: 0; min-height: 82px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, .9fr) 180px; align-items: center; gap: 20px; padding: 14px 18px; border: 1px solid #d4dfdc; border-radius: 8px; background: #fff; }
.account-status-line { min-width: 0; display: flex; align-items: center; gap: 11px; }
.account-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: #2d756d; color: #fff; font-weight: 800; }
.account-status-line > div { min-width: 0; display: grid; gap: 4px; }
.account-status-line strong, .account-status-line small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-status-line strong { font-size: 14px; }
.account-status-line small { color: var(--muted); font-size: 11px; }
.account-metrics { display: grid; grid-template-columns: 1fr 1fr; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-metrics > div { display: grid; gap: 4px; padding: 0 11px; }
.account-metrics > div + div { border-left: 1px solid var(--line); }
.account-metrics span { color: var(--muted); font-size: 10px; }
.account-metrics strong { font-size: 14px; }
.account-panel-actions { display: grid; gap: 7px; }
.account-panel-actions .button { justify-content: center; min-height: 34px; }
.membership-body .account-panel .button.primary { border-color: #315fc5; background: #315fc5; }
.membership-body .account-panel .button.primary:hover { border-color: #244ca7; background: #244ca7; }
.membership-body .button.compact { min-height: 32px; padding: 0 11px; border-radius: 6px; font-size: 11px; }
.plan-section, .orders-section { margin-top: 24px; }
.plan-section-head, .orders-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.plan-section-head h2, .orders-head h2 { margin: 0; font-size: 17px; }
.plan-section-head p, .orders-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.period-control { width: 150px; height: 36px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); }
.period-control button { border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; }
.period-control button.active { background: #315fc5; color: #fff; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.plan-card { --plan-accent: #68707d; position: relative; min-width: 0; min-height: 388px; display: flex; flex-direction: column; overflow: hidden; padding: 20px 18px 18px; border: 1px solid #dfe3ea; border-radius: 8px; background: var(--panel); }
.plan-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--plan-accent); }
.plan-card:nth-child(2) { --plan-accent: #356bd6; }
.plan-card:nth-child(3) { --plan-accent: #c88a20; }
.plan-card:nth-child(4) { --plan-accent: #12836e; }
.plan-card:hover { border-color: var(--plan-accent); box-shadow: 0 8px 22px rgba(44, 56, 82, .08); }
.plan-card.recommended { border-color: #dfbd75; background: #fffdf8; box-shadow: inset 0 0 0 1px #f1dfb9; }
.plan-card.current { border-color: var(--plan-accent); box-shadow: inset 0 0 0 1px var(--plan-accent); }
.plan-badge { position: absolute; top: 13px; right: 13px; padding: 3px 6px; border-radius: 4px; background: #fff0c9; color: #916010; font-size: 9px; font-weight: 750; }
.plan-card.current .plan-badge { background: #e6f0ff; color: #2f5fc8; }
.plan-card h3 { margin: 0; padding-right: 52px; font-size: 16px; }
.plan-tagline { min-height: 38px; margin: 6px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.plan-price { min-height: 48px; display: flex; align-items: baseline; gap: 4px; }
.plan-price .currency { font-size: 14px; font-weight: 700; }
.plan-price strong { color: var(--plan-accent); font-size: 28px; line-height: 1; }
.plan-price small { color: var(--muted); font-size: 10px; }
.plan-package-note { min-height: 17px; margin: 6px 0 14px; color: var(--text); font-size: 10px; }
.plan-features { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-features li { position: relative; padding-left: 16px; color: #555a62; font-size: 11px; line-height: 1.45; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--plan-accent); font-weight: 800; }
.plan-card .plan-action { margin-top: auto; }
.plan-card .plan-action.primary { border-color: var(--plan-accent); background: var(--plan-accent); color: #fff; }
.plan-card .plan-action.primary:hover { filter: brightness(.92); }
.plan-skeleton { height: 388px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); animation: member-pulse 1.2s ease-in-out infinite alternate; }
@keyframes member-pulse { from { opacity: .56; } to { opacity: 1; } }
.orders-section { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.orders-head { margin: 0; padding: 15px 17px; border-bottom: 1px solid #dfe7f4; background: #f7faff; }
.order-list { min-height: 86px; }
.order-row { display: grid; grid-template-columns: minmax(180px, 1fr) 160px 110px 88px 140px; align-items: center; gap: 10px; padding: 12px 17px; border-bottom: 1px solid var(--line); font-size: 11px; }
.order-row:last-child { border-bottom: 0; }
.order-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row span { color: var(--muted); }
.order-status { width: fit-content; padding: 3px 6px; border-radius: 4px; background: #eef0f2; color: #5d6269 !important; }
.order-status.paid { background: #e8f4ed; color: var(--success) !important; }
.empty-line { margin: 0; padding: 32px 17px; color: var(--muted); font-size: 11px; text-align: center; }
.membership-body .member-dialog { max-width: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); }
.membership-body .member-dialog::backdrop { background: rgba(24, 26, 30, .42); }
.membership-body .dialog-panel { position: relative; width: min(410px, calc(100vw - 28px)); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 70px rgba(20, 23, 28, .24); }
.membership-body .dialog-close { position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-size: 20px; line-height: 1; }
.membership-body .dialog-heading { display: flex; align-items: center; gap: 11px; padding-right: 32px; }
.membership-body .dialog-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: #315fc5; color: #fff; font-weight: 800; }
.membership-body .dialog-heading h2, .membership-body .purchase-title h2 { margin: 0; font-size: 17px; }
.membership-body .dialog-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.membership-body .dialog-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.membership-body .dialog-panel input[type="text"], .membership-body .dialog-panel input[type="password"], .membership-body .dialog-panel input:not([type]) { width: 100%; height: 41px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--panel); }
.membership-body .dialog-panel input:focus { border-color: #315fc5; box-shadow: 0 0 0 3px rgba(49, 95, 197, .1); }
.membership-body .switch-link { border: 0; background: transparent; color: #315fc5; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.membership-body .form-error { margin: 0; padding: 9px 10px; border-radius: 6px; background: #fff0f0; color: var(--danger); font-size: 11px; line-height: 1.5; }
.membership-body .purchase-panel { width: min(460px, calc(100vw - 28px)); gap: 16px; }
.membership-body .purchase-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-right: 30px; }
.membership-body .purchase-title span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.membership-body .purchase-title > strong { color: #315fc5; font-size: 22px; }
.membership-body .purchase-benefits { display: flex; flex-wrap: wrap; gap: 6px; }
.membership-body .purchase-benefits span { padding: 4px 7px; border-radius: 4px; background: #edf3ff; color: #315fc5; font-size: 10px; }
.membership-body .payment-methods { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.membership-body .payment-methods legend { grid-column: 1 / -1; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.membership-body .payment-methods label { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.membership-body .payment-methods label:has(input:checked) { border-color: #315fc5; background: #f1f6ff; }
.membership-body .payment-methods input { width: 15px; height: 15px; accent-color: #315fc5; }
.membership-body .payment-methods span { min-width: 0; display: grid; gap: 2px; }
.membership-body .payment-methods b { font-size: 11px; }
.membership-body .payment-methods small { color: var(--muted); font-size: 9px; }
.membership-body .payment-note { margin: -4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }
.membership-body .toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 10px 13px; border-radius: 7px; background: var(--primary); color: var(--primary-text); font-size: 11px; box-shadow: 0 12px 30px rgba(20, 23, 28, .2); }

@media (max-width: 980px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-summary-copy { width: min(460px, 58%); padding: 44px 36px 24px 20px; }
  .member-summary h1 { font-size: 36px; }
  .member-summary-visual { height: 350px; }
  .account-panel { grid-template-columns: minmax(190px, 1fr) minmax(220px, .9fr) 160px; gap: 14px; }
  .order-row { grid-template-columns: minmax(160px, 1fr) 130px 80px 110px; }
  .order-row .order-number { display: none; }
}

@media (max-width: 1120px) and (min-width: 981px) {
  .member-summary-copy { width: min(500px, 54%); padding: 50px 42px 26px 22px; }
  .member-summary h1 { font-size: 40px; }
  .member-summary-visual { height: 380px; }
  .account-panel { grid-template-columns: minmax(210px, 1fr) minmax(240px, .9fr) 170px; }
}

@media (max-width: 680px) {
  .membership-shell { display: block; }
  .membership-rail { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 54px; flex-direction: row; justify-content: center; padding: 7px 10px; border-top: 1px solid var(--line); border-right: 0; }
  .membership-rail .membership-rail-logo, .membership-rail .rail-divider, .membership-rail a:nth-of-type(3), .membership-rail a:nth-of-type(4), .membership-rail a:nth-of-type(5) { display: none; }
  .membership-rail .icon-button { width: 38px; height: 38px; }
  .member-workspace { padding-bottom: 54px; }
  .member-topbar { height: 58px; gap: 10px; padding: 0 12px; }
  .member-header-copy { display: none; }
  .member-brand strong { display: none; }
  .member-top-actions { gap: 5px; }
  .member-top-actions .button { min-height: 32px; padding: 0 8px; font-size: 10px; }
  .member-page { width: min(100% - 24px, 560px); padding: 18px 0 36px; }
  .member-summary { grid-template-columns: 1fr; gap: 10px; padding-bottom: 20px; }
  .member-summary-copy { width: auto; min-height: 0; align-self: start; justify-self: stretch; padding: 24px 20px; }
  .member-summary-visual { height: 360px; aspect-ratio: auto; }
  .member-summary-visual img { opacity: .66; object-position: 42% center; }
  .member-summary h1 { max-width: 320px; font-size: 28px; }
  .member-summary-copy p { max-width: 340px; color: #353b3a; }
  .account-panel { grid-template-columns: 1fr; gap: 13px; padding: 16px; }
  .plan-section-head { align-items: flex-start; flex-direction: column; }
  .period-control { width: 100%; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
  .plan-skeleton { height: 350px; }
  .orders-head { align-items: center; }
  .order-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
  .order-row .order-number, .order-row .order-date { display: none; }
  .membership-body .payment-methods { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .fashion-assets { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fashion-reference-options { gap: 6px 10px; }
  .background-library-dialog { width: calc(100vw - 16px); }
  .background-library-card { padding: 16px; }
  .background-library-card > header { align-items: flex-start; flex-direction: column; }
  .background-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .background-library-text-presets-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .background-library-preset-heading { align-items: flex-start; }
  .background-library-text-preset-form { grid-template-columns: 1fr; }
  .background-library-text-preset-form-actions { padding-bottom: 0; }
}