:root {
    color-scheme: light;
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f1f1f1;
    --surface-3: #e7e7e7;
    --text: #151515;
    --muted: #606060;
    --faint: #707070;
    --border: #dedede;
    --border-strong: #bdbdbd;
    --control-border: #8d8d8d;
    --accent: #1a1a1a;
    --accent-hover: #000000;
    --accent-soft: rgba(17, 17, 17, 0.08);
    --accent-border: rgba(17, 17, 17, 0.24);
    --accent-loader: rgba(17, 17, 17, 0.18);
    --accent-contrast: #ffffff;
    --accent-contrast-soft: rgba(255, 255, 255, 0.35);
    --success: #0f7048;
    --danger: #c83c3c;
    --favorite: #7a5713;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.13);
    --topbar-bg: rgba(245, 245, 245, 0.92);
    --composer-fade: rgba(245, 245, 245, 0.92);
    --composer-bg: rgba(255, 255, 255, 0.96);
    --composer-shadow: 0 18px 70px rgba(0, 0, 0, 0.17);
    --media-bg: #ececec;
    --media-check: #e1e1e1;
    --loading-base: #ededed;
    --loading-highlight: #fafafa;
    --toast-bg: #ffffff;
    --upload-remove-bg: #333333;
    --drop-overlay-bg: rgba(255, 255, 255, 0.94);
    --radius: 8px;
    --content: 1420px;
    --composer-space: 190px;
    font-family: Inter, "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-synthesis: none;
    letter-spacing: 0;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d0d;
    --surface: #151515;
    --surface-2: #1f1f1f;
    --surface-3: #2a2a2a;
    --text: #f2f2f2;
    --muted: #a5a5a5;
    --faint: #878787;
    --border: #2d2d2d;
    --border-strong: #494949;
    --control-border: #767676;
    --accent: #f2f2f2;
    --accent-hover: #ffffff;
    --accent-soft: rgba(255, 255, 255, 0.10);
    --accent-border: rgba(255, 255, 255, 0.28);
    --accent-loader: rgba(255, 255, 255, 0.22);
    --accent-contrast: #111111;
    --accent-contrast-soft: rgba(17, 17, 17, 0.38);
    --success: #4cc38a;
    --danger: #ef6a6a;
    --favorite: #f0bd57;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    --topbar-bg: rgba(13, 13, 13, 0.92);
    --composer-fade: rgba(13, 13, 13, 0.92);
    --composer-bg: rgba(31, 31, 31, 0.96);
    --composer-shadow: 0 18px 70px rgba(0, 0, 0, 0.48);
    --media-bg: #111111;
    --media-check: #1a1a1a;
    --loading-base: #131313;
    --loading-highlight: #202020;
    --toast-bg: #252525;
    --upload-remove-bg: #292929;
    --drop-overlay-bg: rgba(21, 21, 21, 0.94);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); line-height: 1.5; }
body:has(dialog[open]) { overflow: hidden; }
button, input, textarea, select { color: inherit; font: inherit; letter-spacing: 0; }
button, select, input[type="checkbox"], label[for], .upload-button { cursor: pointer; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -60px; padding: 10px 16px; color: var(--accent-contrast); background: var(--accent); border-radius: 4px; transition: top .2s ease; }
.skip-link:focus { top: 16px; }

.topbar { position: sticky; z-index: 30; top: 0; height: 64px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(16px); }
.topbar-inner { max-width: var(--content); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 700; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-contrast); background: var(--accent); border-radius: 7px; }
.brand-mark svg { width: 17px; height: 17px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.user-badge { max-width: 110px; padding: 4px 8px; overflow: hidden; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.balance-badge { min-height: 32px; padding: 0 8px; display: inline-flex; gap: 5px; align-items: center; color: var(--success); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-badge svg { width: 15px; height: 15px; }
.logout-form { margin: 0; display: flex; }
.connection { min-height: 36px; padding: 0 10px; display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 13px; }
.status-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #d5a24c; box-shadow: 0 0 0 4px rgba(213, 162, 76, .1); }
.connection.ready .status-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(76, 195, 138, .1); }
.connection.error .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(239, 106, 106, .1); }
.icon-button { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; }
.icon-button:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.theme-toggle .theme-icon { grid-area: 1 / 1; }
:root[data-theme="dark"] .theme-icon-dark, :root:not([data-theme="dark"]) .theme-icon-light { display: none; }

.workspace { max-width: var(--content); min-height: calc(100dvh - 64px); margin: 0 auto; padding: 28px 24px var(--composer-space); }
.toolbar { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 22px; }
.toolbar-actions { min-width: 0; display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; justify-content: flex-end; }
.segmented { height: 44px; padding: 3px; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.segment { height: 36px; min-width: 64px; padding: 0 13px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 0; border-radius: 5px; font-size: 14px; }
.segment svg { width: 15px; height: 15px; }
.segment.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); }
.search-field { height: 44px; min-width: 0; padding: 0 12px; display: flex; gap: 10px; align-items: center; color: var(--faint); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.search-field:focus-within { color: var(--muted); border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field svg { width: 18px; height: 18px; flex: none; }
.search-field input { min-width: 0; width: 100%; height: 100%; color: var(--text); background: transparent; border: 0; outline: 0; }
.search-field input::placeholder { color: var(--faint); }
kbd { min-width: 22px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; color: var(--faint); background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 4px; font: 12px/1 ui-monospace, monospace; }
.ghost-button, .secondary-button, .primary-button { min-height: 44px; padding: 0 15px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; border-radius: 7px; font-weight: 600; }
.ghost-button { color: var(--muted); background: transparent; border: 1px solid transparent; }
.ghost-button:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.ghost-button svg { width: 17px; height: 17px; }
.danger-text:hover { color: var(--danger); }

.generation-feature .workspace { max-width: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; scroll-margin-top: 84px; }
.gallery-pagination { min-width: 0; margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.gallery-pagination[hidden] { display: none !important; }
.gallery-page-summary { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.gallery-page-controls, .gallery-page-numbers { min-width: 0; display: flex; gap: 4px; align-items: center; }
.gallery-page-controls { grid-column: 2; justify-content: center; }
.gallery-page-numbers { overflow-x: auto; scrollbar-width: none; }
.gallery-page-numbers::-webkit-scrollbar { display: none; }
.gallery-page-number { width: 44px; height: 44px; padding: 0; display: grid; flex: 0 0 44px; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; font-variant-numeric: tabular-nums; }
.gallery-page-number:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.gallery-page-number[aria-current="page"] { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.gallery-page-gap { width: 24px; flex: 0 0 24px; color: var(--faint); text-align: center; }
.task-card { --task-media-size: 128px; position: relative; min-width: 0; min-height: var(--task-media-size); display: grid; grid-template-columns: var(--task-media-size) minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.task-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.task-selection-control { position: absolute; z-index: 4; left: 4px; top: 4px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: var(--text); background: transparent; border: 0; border-radius: 50%; }
.task-selection-control::before { content: ""; position: absolute; width: 28px; height: 28px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.task-selection-control i, .task-selection-control svg { position: relative; z-index: 1; width: 16px; height: 16px; pointer-events: none; }
.task-selection-control [data-selection-icon] { display: none; }
.task-selection-control.all [data-selection-icon="all"], .task-selection-control.partial [data-selection-icon="partial"] { display: block; }
.task-selection-control.partial { color: var(--accent-contrast); }
.task-selection-control.partial::before { background: var(--accent); border-color: var(--accent); }
.task-selection-control.all { color: var(--accent-contrast); }
.task-selection-control.all::before { background: var(--accent); border-color: var(--accent); }
.task-selection-control:hover::before { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.task-selection-control:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.task-card.selection-partial { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.task-card.selection-all { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.gallery.selection-mode .task-card { cursor: pointer; }
.gallery.selection-mode .task-actions { visibility: hidden; }
.gallery.selection-mode .elapsed-badge { left: 52px; }
.task-media { position: relative; width: var(--task-media-size); height: var(--task-media-size); min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--media-bg); background-image: linear-gradient(45deg,var(--media-check) 25%,transparent 25%),linear-gradient(-45deg,var(--media-check) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--media-check) 75%),linear-gradient(-45deg,transparent 75%,var(--media-check) 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.task-media img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: cover; cursor: zoom-in; }
.task-media.multiple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2px; }
.task-media.multiple img:nth-child(n+5) { display: none; }
.media-count, .elapsed-badge { position: absolute; z-index: 2; top: 8px; padding: 3px 7px; color: #fff; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.14); border-radius: 4px; font-size: 12px; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); }
.elapsed-badge { left: 8px; }
.media-count { right: 8px; }
.task-content { min-width: 0; padding: 6px 8px; display: grid; grid-template-rows: 36px 24px 44px; align-content: space-between; }
.task-prompt { margin: 0; display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.task-meta { min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; scrollbar-width: none; }
.task-meta::-webkit-scrollbar { display: none; }
.meta-chip { max-width: 100%; padding: 2px 7px; overflow: hidden; flex: none; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.route-chip { min-width: 0; flex: 0 1 auto; }
.task-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0; overflow-x: auto; scrollbar-width: none; }
.task-actions::-webkit-scrollbar { display: none; }
.task-actions button { width: 36px; height: 44px; padding: 0; display: grid; place-items: center; flex: 0 0 36px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
.task-actions button:hover { color: var(--text); background: var(--surface-3); }
.task-actions button.active { color: var(--favorite); }
.task-actions button.delete:hover { color: var(--danger); }
.task-actions svg { width: 17px; height: 17px; }
.task-card.running { border-color: var(--accent-border); }
.gallery-selection-bar { min-width: 0; margin: 0 0 16px; padding: 9px 0; display: flex; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gallery-selection-bar[hidden] { display: none !important; }
.selection-summary { min-width: max-content; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.selection-summary strong { font-size: 14px; }
.selection-actions { min-width: 0; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.selection-actions button { min-width: 0; min-height: 44px; }
.commerce-gallery-card { min-height: var(--task-media-size); }
.commerce-result-fan { position: relative; width: var(--task-media-size); height: var(--task-media-size); padding: 0; display: block; overflow: hidden; }
.commerce-fan-trigger { position: relative; width: 100%; height: 100%; padding: 0; display: block; overflow: hidden; background: transparent; border: 0; cursor: zoom-in; }
.commerce-fan-trigger:hover { background: var(--surface-2); }
.gallery.selection-mode .commerce-fan-trigger { cursor: default; }
.task-media .commerce-fan-image { position: absolute; z-index: var(--fan-z); left: 50%; bottom: 8px; width: 70px; height: 92px; display: block; object-fit: cover; background: var(--media-bg); border: 2px solid var(--surface); border-radius: 5px; box-shadow: 0 5px 12px rgba(0,0,0,.24); pointer-events: none; transform: translateX(calc(-50% + var(--fan-x))) rotate(var(--fan-angle)); transform-origin: 50% 112%; }
.role-animation-gallery-card .commerce-fan-image { bottom: 17px; width: 78px; height: 78px; object-fit: contain; }
.loading-media { height: 100%; min-height: 0; display: grid; place-items: center; background: linear-gradient(110deg,var(--loading-base) 30%,var(--loading-highlight) 48%,var(--loading-base) 66%); background-size: 220% 100%; animation: shimmer 1.8s infinite linear; }
.loading-state { display: grid; gap: 12px; justify-items: center; color: var(--muted); font-size: 13px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--accent-loader); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.error-media { height: 100%; min-height: 0; padding: 24px; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); text-align: center; }
.error-media svg { width: 28px; height: 28px; color: var(--danger); }
.error-media p { margin: 0; max-width: 28ch; font-size: 13px; overflow-wrap: anywhere; }

.empty-state { min-height: min(520px, calc(100dvh - 300px)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state[hidden] { display: none; }
.empty-visual { position: relative; width: 126px; height: 104px; margin-bottom: 22px; }
.sample { position: absolute; width: 68px; height: 82px; border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: var(--shadow); }
.sample-one { left: 8px; top: 10px; transform: rotate(-8deg); background: radial-gradient(circle at 60% 32%,#d8d8d8 0 12%,transparent 13%),linear-gradient(145deg,#777777,#262626 52%,#5c5c5c); }
.sample-two { right: 8px; top: 4px; transform: rotate(7deg); background: radial-gradient(circle at 50% 40%,#e1e1e1 0 13%,transparent 14%),linear-gradient(155deg,#8a8a8a,#303030 54%,#565656); }
.empty-visual > span { position: absolute; z-index: 2; left: 45px; bottom: 0; width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent-contrast); background: var(--accent); border: 4px solid var(--bg); border-radius: 50%; }
.empty-visual svg { width: 17px; height: 17px; }
.empty-state h1 { margin: 0; font-size: 24px; line-height: 1.3; }
.empty-state > p { max-width: 520px; margin: 10px 0 22px; color: var(--muted); }
.prompt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.prompt-chips button { min-height: 40px; padding: 0 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.prompt-chips button:hover { color: var(--text); border-color: var(--border-strong); }

.composer-shell { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 18px 20px max(22px, env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(to top,var(--bg) 58%,var(--composer-fade) 78%,transparent); }
.composer { position: relative; width: min(1180px, calc(100vw - 40px)); margin: 0 auto; padding: 12px; pointer-events: auto; background: var(--composer-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--composer-shadow); backdrop-filter: blur(18px); transition: border-color .2s ease, box-shadow .2s ease; }
.composer.drag-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--composer-shadow); }
.drop-overlay { position: absolute; z-index: 5; inset: 0; display: none; gap: 10px; align-items: center; justify-content: center; color: var(--accent); background: var(--drop-overlay-bg); border-radius: calc(var(--radius) - 1px); font-size: 14px; font-weight: 600; pointer-events: none; }
.composer.drag-active .drop-overlay { display: flex; }
.drop-overlay svg { width: 22px; height: 22px; }
.prompt-row { display: grid; grid-template-columns: 1fr 48px; gap: 10px; align-items: end; }
.prompt-row textarea { width: 100%; min-height: 58px; max-height: 180px; padding: 10px 12px; resize: none; color: var(--text); background: transparent; border: 0; outline: 0; line-height: 1.55; }
.prompt-row textarea::placeholder { color: var(--faint); }
.submit-button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent-contrast); background: var(--accent); border: 0; border-radius: 7px; }
.submit-button:hover { background: var(--accent-hover); }
.submit-button svg { width: 21px; height: 21px; }
.submit-button.loading svg { display: none; }
.button-spinner { display: none; width: 20px; height: 20px; border: 2px solid var(--accent-contrast-soft); border-top-color: var(--accent-contrast); border-radius: 50%; animation: spin .75s linear infinite; }
.submit-button.loading .button-spinner { display: block; }
.composer-controls { padding-top: 8px; display: flex; gap: 7px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.composer-controls::-webkit-scrollbar { display: none; }
.composer-controls label, .upload-button, .size-trigger { min-height: 36px; padding: 0 10px; display: inline-flex; flex: none; gap: 7px; align-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.composer-controls label:hover, .upload-button:hover, .size-trigger:hover { color: var(--text); border-color: var(--border-strong); }
.composer-controls label > span { color: var(--faint); }
.composer-controls select { max-width: 180px; padding: 0 18px 0 0; background: transparent; border: 0; outline: 0; }
.composer-controls option { color: var(--text); background: var(--surface-2); }
.upload-button svg { width: 16px; height: 16px; }
.size-control { display: flex; flex: none; }
.size-trigger > span { color: var(--faint); }
.size-trigger strong { max-width: 105px; overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.composer-hint { margin-left: auto; display: flex; flex: none; gap: 5px; align-items: center; color: var(--faint); font-size: 11px; }
.upload-preview { padding: 2px 2px 10px; display: flex; gap: 8px; overflow-x: auto; }
.upload-preview[hidden] { display: none; }
.upload-item { position: relative; width: 64px; height: 64px; flex: none; }
.upload-item img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--border-strong); border-radius: 6px; }
.upload-item button { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; color: #fff; background: var(--upload-remove-bg); border: 1px solid var(--border-strong); border-radius: 50%; }
.upload-item svg { width: 13px; height: 13px; }

.modal { width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; overflow: hidden; color: var(--text); background: rgba(0,0,0,.62); border: 0; }
.modal::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.commerce-result-dialog { width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; overflow: hidden; color: var(--text); background: rgba(0,0,0,.68); border: 0; }
.commerce-result-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.commerce-result-dialog[open] { display: grid; place-items: center; }
.commerce-result-picker { width: min(980px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); animation: modal-in .22s ease-out; }
.commerce-result-picker > header { min-width: 0; min-height: 70px; padding: 11px 14px 11px 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.commerce-result-picker > header > div { min-width: 0; }
.commerce-result-picker > header span { display: block; color: var(--faint); font-size: 11px; }
.commerce-result-picker > header h2 { margin: 2px 0 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.commerce-result-picker > header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.commerce-result-grid { min-width: 0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.commerce-result-grid > button { min-width: 0; height: max-content; padding: 0; overflow: hidden; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; text-align: left; }
.commerce-result-grid > button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.commerce-result-grid img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: contain; background: var(--media-bg); border-bottom: 1px solid var(--border); }
.commerce-result-grid button > span { min-width: 0; min-height: 48px; padding: 8px 10px; display: grid; align-content: center; }
.commerce-result-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.commerce-result-grid small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.modal[open] { display: grid; place-items: center; }
.modal-panel { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: 0; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); animation: modal-in .22s ease-out; }
.settings-panel { position: relative; width: min(1180px, calc(100vw - 32px)); }
.modal-header { min-height: 76px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.image-selection-panel { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.image-selection-panel .modal-header > div { min-width: 0; }
.image-selection-panel .modal-header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-selection-panel .image-selection-close { flex: none; }
.image-selection-body { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.image-selection-tools { min-height: 54px; padding: 5px 14px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--border); }
.image-selection-grid { min-width: 0; min-height: 0; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.image-selection-item { position: relative; min-width: 0; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
.image-selection-item:hover { border-color: var(--border-strong); }
.image-selection-item.selected { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.image-selection-item img { width: 100%; height: 100%; display: block; object-fit: contain; }
.image-selection-check { position: absolute; z-index: 1; left: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.image-selection-item.selected .image-selection-check { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.image-selection-check svg { width: 16px; height: 16px; }
.image-selection-item:not(.selected) .image-selection-check svg { visibility: hidden; }
.download-choice-panel { width: min(560px, calc(100vw - 32px)); }
.batch-download-status { margin: 0; padding: 12px 18px; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; }
.batch-download-status.error { color: var(--danger); }
.batch-download-status[hidden] { display: none; }
.download-choice-panel .modal-footer { flex-wrap: wrap; }
.download-choice-panel .modal-footer button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.share-panel { width: min(620px, calc(100vw - 32px)); }
.share-dialog-body { min-width: 0; padding: 18px; display: grid; gap: 14px; }
.share-prepare { min-width: 0; padding: 14px; display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.share-prepare[hidden], .share-panel .modal-footer button[hidden] { display: none; }
.share-summary-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: var(--accent); background: var(--accent-soft); border-radius: 7px; }
.share-summary-icon svg { width: 20px; height: 20px; }
.share-prepare strong { display: block; font-size: 14px; }
.share-prepare p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.share-result { min-width: 0; display: grid; gap: 8px; }
.share-result[hidden] { display: none; }
.share-result > label { font-size: 13px; font-weight: 600; }
.share-link-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.share-link-row input { min-width: 0; min-height: 44px; padding: 0 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; outline: 0; }
.share-link-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-result > p { margin: 0; color: var(--muted); font-size: 12px; }
.share-result-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.share-result-actions a { text-decoration: none; }
.share-dialog-status { margin: 0; padding: 11px 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; }
.share-dialog-status.error { color: var(--danger); border-color: var(--danger); }
.share-dialog-status[hidden] { display: none; }
.share-panel .modal-footer { flex-wrap: wrap; }
.size-panel { width: min(560px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.size-header { min-height: 86px; padding: 18px 22px 8px; display: flex; align-items: flex-start; justify-content: space-between; }
.size-header h2 { margin: 0; font-size: 20px; }
.size-header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.size-header .icon-button { margin: -8px -10px 0 0; }
.size-body { min-height: 0; padding: 8px 22px 18px; display: flex; flex-direction: column; overflow-y: auto; }
.size-tabs { min-height: 50px; padding: 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; flex: none; background: var(--surface-2); border-radius: 8px; }
.size-tabs button { min-width: 0; min-height: 42px; padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-weight: 600; }
.size-tabs button.selected { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(25, 30, 38, .09); }
.size-mode-panel { padding-top: 24px; }
.size-mode-panel[hidden] { display: none; }
.auto-size-panel { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.auto-size-panel > strong { margin-top: 18px; font-size: 16px; }
.auto-size-panel p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auto-size-icon { width: 72px; height: 72px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 50%; }
.auto-size-icon svg { width: 32px; height: 32px; }
.size-fieldset { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.size-fieldset legend { width: 100%; margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.resolution-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.resolution-options button, .custom-ratio-button { min-height: 48px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; }
.resolution-options button.selected, .ratio-options button.selected { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.ratio-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ratio-options button { min-width: 0; min-height: 76px; padding: 9px 5px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; }
.ratio-shape { display: block; border: 1.5px solid currentColor; border-radius: 3px; }
[data-ratio="1:1"] .ratio-shape { width: 22px; height: 22px; }
[data-ratio="3:2"] .ratio-shape { width: 27px; height: 18px; }
[data-ratio="2:3"] .ratio-shape { width: 18px; height: 27px; }
[data-ratio="16:9"] .ratio-shape { width: 29px; height: 16px; }
[data-ratio="9:16"] .ratio-shape { width: 16px; height: 29px; }
[data-ratio="4:3"] .ratio-shape { width: 27px; height: 20px; }
[data-ratio="3:4"] .ratio-shape { width: 20px; height: 27px; }
[data-ratio="21:9"] .ratio-shape { width: 30px; height: 13px; }
.custom-ratio-button { width: 100%; margin-top: 10px; }
.resolution-options button:hover, .ratio-options button:hover, .custom-ratio-button:hover { color: var(--text); border-color: var(--border-strong); }
.custom-size-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
.custom-size-fields label { min-width: 0; display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.custom-size-fields input { width: 100%; min-height: 48px; padding: 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; outline: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.custom-size-fields input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dimension-separator { min-height: 48px; display: grid; place-items: center; color: var(--faint); }
.size-notice { padding: 14px; display: flex; gap: 10px; align-items: flex-start; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; font-size: 13px; line-height: 1.65; }
.size-notice svg { width: 17px; height: 17px; margin-top: 2px; flex: none; color: var(--accent); }
.size-notice p { margin: 0; }
.size-error { margin: 10px 0 0; color: var(--danger); font-size: 13px; }
.size-summary { min-height: 88px; margin-top: auto; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; background: var(--surface-2); border-radius: 7px; }
.size-summary span { color: var(--muted); font-size: 13px; }
.size-summary strong { margin-top: 4px; font: 600 20px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.size-footer { min-height: 72px; padding: 12px 22px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.size-footer button { width: 100%; }
.settings-body { max-height: calc(100dvh - 190px); padding: 18px; display: grid; gap: 17px; overflow-y: auto; }
.server-notice { padding: 12px; display: flex; gap: 11px; align-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.server-notice svg { flex: none; color: var(--success); }
.server-notice div { display: grid; }
.server-notice strong { color: var(--text); font-size: 14px; }
.server-notice span { font-size: 12px; }
.field { display: grid; gap: 7px; color: var(--text); font-size: 14px; }
.field > span { font-weight: 600; }
.field input, .field select { width: 100%; min-height: 44px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; outline: 0; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input:disabled { color: var(--faint); }
.field small, .toggle-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.field-key-label { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.field-key-label .key-status { color: var(--muted); font-variant-numeric: tabular-nums; }
.field-key-label .key-status.configured { color: var(--success); }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-field button { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; }
.password-field button:disabled { color: var(--faint); }
.password-field svg { width: 17px; height: 17px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.route-editor { display: grid; gap: 12px; }
.route-config { padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.route-config > header { margin-bottom: 13px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.route-config-heading { min-width: 0; display: flex; gap: 12px; align-items: center; }
.route-config-heading > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-enabled-toggle { min-height: 36px; display: inline-flex; gap: 7px; align-items: center; flex: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.route-enabled-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.route-enabled-toggle input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.route-enabled-toggle input:checked + .switch::after { background: #fff; transform: translateX(20px); }
.route-enabled-toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.route-config > header button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 5px; }
.route-config > header button:hover { color: var(--danger); background: var(--surface-3); }
.route-config > header svg { width: 16px; height: 16px; }
.route-fields { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(210px, 1.3fr) minmax(210px, 1.2fr) minmax(220px, 1.3fr) minmax(120px, .65fr); gap: 12px; align-items: start; }
.route-price-field input { font-variant-numeric: tabular-nums; }
.model-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.model-picker button { min-width: 72px; padding: 0 10px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; }
.model-picker button:hover { color: var(--text); border-color: var(--border-strong); }
.model-picker svg, .add-route-button svg { width: 16px; height: 16px; }
.add-route-button { width: 100%; }
.empty-routes { padding: 24px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 7px; text-align: center; }
.toggle-row { min-height: 56px; display: flex; gap: 14px; align-items: center; justify-content: space-between; cursor: pointer; }
.toggle-row > span:first-child { display: grid; gap: 2px; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 44px; height: 24px; flex: none; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 999px; transition: background .2s ease; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: var(--muted); border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.toggle-row input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.toggle-row input:checked + .switch::after { background: #fff; transform: translateX(20px); }
.toggle-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-footer { min-height: 68px; padding: 12px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); }
.secondary-button { color: var(--text); background: transparent; border: 1px solid var(--border-strong); }
.primary-button { color: var(--accent-contrast); background: var(--accent); border: 1px solid var(--accent); }
.primary-button:hover { background: var(--accent-hover); }

.auth-page { display: grid; min-height: 100dvh; place-items: center; padding: 24px; }
.auth-shell { width: min(420px, 100%); }
.auth-panel { padding: 30px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); }
.auth-brand { margin-bottom: 30px; display: flex; gap: 10px; align-items: center; }
.auth-panel header h1 { margin: 0; font-size: 25px; }
.auth-panel header p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.auth-form { margin-top: 24px; display: grid; gap: 17px; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-error { margin-top: 18px; padding: 10px 12px; color: #ffb4a6; background: rgba(235, 91, 60, .12); border: 1px solid rgba(235, 91, 60, .3); border-radius: 6px; font-size: 13px; }
.auth-switch { margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 14px; }
.auth-switch a { margin-left: 5px; color: var(--accent); font-weight: 600; }
.auth-note { margin: 16px 0 0; color: var(--faint); text-align: center; font-size: 12px; }

/* Feature navigation and image editor */
.app-shell { min-width: 0; min-height: calc(100dvh - 64px); }
.feature-sidebar { position: fixed; z-index: 24; top: 64px; bottom: 0; left: 0; width: 184px; padding: 18px 12px; overflow-y: auto; color: var(--text); background: var(--surface); border-right: 1px solid var(--border); }
.feature-nav { display: grid; gap: 6px; }
.feature-nav-item { position: relative; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; display: flex; gap: 10px; align-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.feature-nav-item svg { width: 18px; height: 18px; flex: none; }
.feature-nav-item span { min-width: 0; overflow-wrap: anywhere; }
.feature-nav-item:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.feature-nav-item.active, .feature-nav-item.selected, .feature-nav-item[aria-current="page"], .feature-nav-item[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.feature-nav-item:disabled, .feature-nav-item.disabled, .feature-nav-item[aria-disabled="true"] { opacity: .48; cursor: not-allowed; pointer-events: none; }
.feature-content { min-width: 0; margin-left: 184px; }
.feature-panel, .generation-feature { min-width: 0; }
.feature-panel[hidden], .editor-feature[hidden], .tool-panel[hidden], .inspector-panel[hidden], .drop-zone[hidden], .editor-drop-zone[hidden], .canvas-frame[hidden], .editor-canvas-frame[hidden] { display: none !important; }
.composer-shell { left: 184px; }
.composer { width: min(1180px, calc(100% - 40px)); }
body:not([data-active-feature="generation"]) .composer-shell { display: none; }
body:not([data-active-feature="generation"]) .toast-region { bottom: 24px; }

.editor-feature { height: calc(100dvh - 64px); min-height: 620px; padding: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; overflow: hidden; }
.editor-commandbar, .editor-header { min-width: 0; min-height: 56px; padding: 6px 8px 6px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.editor-title { min-width: 0; }
.editor-title h1, .editor-title h2 { margin: 0; overflow: hidden; font-size: 18px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.editor-title p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editor-command-actions, .editor-document-actions { min-width: 0; display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.editor-command-actions::-webkit-scrollbar, .editor-document-actions::-webkit-scrollbar, .editor-feature .modebar::-webkit-scrollbar, .editor-tabs::-webkit-scrollbar, .editor-feature .tabs::-webkit-scrollbar { display: none; }

:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button { min-width: 44px; min-height: 44px; padding: 0 11px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; color: var(--muted); background: var(--surface); border: 1px solid var(--control-border); border-radius: 7px; line-height: 1.25; text-align: center; }
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button.active,
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button.selected,
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button[aria-selected="true"],
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button:disabled,
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button.disabled,
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; pointer-events: none; }
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button svg { width: 17px; height: 17px; flex: none; }
:where(.editor-command-actions, .editor-document-actions, .editor-feature .modebar, .editor-tabs, .editor-feature .tabs, .button-grid, .crop-actions) button span { min-width: 0; overflow-wrap: anywhere; }
.editor-remove-background .button-spinner { width: 17px; height: 17px; border-color: var(--border-strong); border-top-color: currentColor; }
.editor-document-actions .editor-remove-background.loading:disabled { opacity: 1; cursor: progress; }
.editor-remove-background.loading > svg { display: none; }
.editor-remove-background.loading .button-spinner { display: block; flex: none; }

.editor-workbench { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.editor-source-panel, .source-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); }
.editor-feature .panel-heading { min-width: 0; min-height: 52px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.editor-feature .panel-heading h2, .editor-feature .panel-heading h3, .editor-feature .panel-heading strong { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.editor-feature .panel-heading p { min-width: 0; margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editor-feature .panel-heading > div > span { min-width: 0; display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editor-feature .panel-heading button { width: 44px; height: 44px; padding: 0; flex: none; display: grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; }
.editor-feature .panel-heading button:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.editor-feature .panel-heading svg { width: 17px; height: 17px; }
.source-list { min-width: 0; min-height: 0; padding: 10px; display: grid; align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.source-item, .editor-source-item { position: relative; width: 100%; min-width: 0; min-height: 72px; padding: 7px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 9px; align-items: center; overflow: hidden; color: var(--muted); background: transparent; border: 1px solid var(--control-border); border-radius: 7px; text-align: left; }
.source-item:hover, .editor-source-item:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.source-item.active, .source-item.selected, .source-item[aria-selected="true"], .source-item[aria-pressed="true"], .editor-source-item.active, .editor-source-item.selected, .editor-source-item[aria-selected="true"], .editor-source-item[aria-pressed="true"] { color: var(--text); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.source-item:disabled, .source-item.disabled, .source-item[aria-disabled="true"], .editor-source-item:disabled, .editor-source-item.disabled, .editor-source-item[aria-disabled="true"] { opacity: .48; cursor: not-allowed; pointer-events: none; }
.source-item img, .editor-source-item img { width: 56px; height: 56px; display: block; object-fit: cover; background: var(--media-bg); border-radius: 5px; }
.source-item > span, .source-item > div, .editor-source-item > span, .editor-source-item > div { min-width: 0; overflow: hidden; }
.source-item strong, .source-item p, .source-item span, .editor-source-item strong, .editor-source-item p, .editor-source-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-item strong, .editor-source-item strong { display: block; color: var(--text); font-size: 13px; }
.source-item p, .editor-source-item p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.source-empty, .editor-source-empty { min-height: 220px; padding: 24px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.source-empty svg, .editor-source-empty svg { width: 26px; height: 26px; color: var(--faint); }
.source-empty p, .editor-source-empty p { margin: 0; font-size: 13px; }
.source-empty button, .source-empty label, .editor-source-empty button, .editor-source-empty label { min-height: 44px; padding: 0 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 7px; }
.editor-source-more { width: 100%; min-height: 44px; flex: 0 0 auto; }
.editor-commerce-source-group { min-height: 72px; }
.editor-source-fan { position: relative; width: 56px; height: 56px; display: block; overflow: hidden !important; background: var(--media-bg); border-radius: 5px; }
.editor-source-item .editor-commerce-source { position: absolute; z-index: var(--fan-z); left: 50%; bottom: 3px; width: 36px; height: 48px; display: block; object-fit: cover; background: var(--media-bg); border: 1px solid var(--surface); border-radius: 3px; box-shadow: 0 3px 7px rgba(0,0,0,.22); pointer-events: none; transform: translateX(calc(-50% + var(--fan-x))) rotate(var(--fan-angle)); transform-origin: 50% 112%; }
.editor-commerce-source-copy { min-width: 0; display: grid; gap: 3px; }
.editor-commerce-source-copy small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.editor-canvas-column, .canvas-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--media-bg); }
.editor-feature .modebar { min-width: 0; min-height: 52px; padding: 4px 8px; display: flex; gap: 5px; align-items: center; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.editor-feature .modebar > * { flex: none; }
.editor-feature .modebar .modebar-spacer { margin-left: auto; }
.editor-feature .modebar output, .editor-feature .modebar .range-output { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.editor-feature .stage, .editor-stage { position: relative; min-width: 0; min-height: 0; padding: 24px; display: grid; place-items: safe center; overflow: auto; overscroll-behavior: contain; background: var(--media-bg); }
.drop-zone, .editor-drop-zone { width: min(540px, 100%); min-height: 320px; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--control-border); border-radius: var(--radius); text-align: center; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.drop-zone svg, .editor-drop-zone svg { width: 32px; height: 32px; color: var(--faint); }
.drop-zone strong, .editor-drop-zone strong { color: var(--text); font-size: 15px; }
.drop-zone p, .drop-zone span, .editor-drop-zone p, .editor-drop-zone span { max-width: 42ch; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.drop-zone button, .drop-zone label, .editor-drop-zone button, .editor-drop-zone label { min-height: 44px; padding: 0 14px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 7px; cursor: pointer; }
.drop-zone:focus-within, .drop-zone.drag-active, .editor-feature .stage.drag-active .drop-zone, .editor-drop-zone:focus-within, .editor-drop-zone.drag-active, .editor-stage.drag-active .editor-drop-zone { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.editor-feature .stage.drag-active, .editor-stage.drag-active { box-shadow: inset 0 0 0 3px var(--accent-soft); }
.canvas-frame, .editor-canvas-frame { position: relative; width: max-content; height: max-content; display: grid; place-items: center; overflow: visible; background-color: var(--surface); background-image: linear-gradient(45deg,var(--media-check) 25%,transparent 25%),linear-gradient(-45deg,var(--media-check) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--media-check) 75%),linear-gradient(-45deg,transparent 75%,var(--media-check) 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; border: 1px solid var(--control-border); border-radius: 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.canvas-frame:focus-visible, .editor-canvas-frame:focus-visible, .canvas-container:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.canvas-container { position: relative; width: max-content; height: max-content; display: grid; place-items: center; overflow: visible; line-height: 0; }
.canvas-container canvas, .canvas-container img { max-width: none; max-height: none; display: block; object-fit: contain; touch-action: none; }
.editor-canvas-frame.shape-tool-active .upper-canvas { cursor: crosshair !important; }
.canvas-frame.disabled, .editor-canvas-frame.disabled, .canvas-container.disabled { opacity: .48; pointer-events: none; }
.canvas-frame.loading::after, .editor-canvas-frame.loading::after, .source-item.loading::after, .editor-source-item.loading::after, .editor-stage.loading::after { content: ""; position: absolute; z-index: 3; width: 24px; height: 24px; border: 3px solid var(--accent-loader); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.canvas-frame.loading::before, .editor-canvas-frame.loading::before, .editor-stage.loading::before { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(15, 15, 15, .42); }
.source-item.loading::after, .editor-source-item.loading::after { right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.editor-feature .loading { cursor: progress; }

.editor-inspector, .inspector { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-left: 1px solid var(--border); }
.editor-tabs, .editor-feature .tabs { min-width: 0; min-height: 52px; padding: 4px 6px 0; display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.editor-tabs button, .editor-feature .tabs button { min-width: 76px; flex: 1 0 auto; background: transparent; border-color: transparent; border-radius: 6px 6px 0 0; }
.editor-tabs button.active, .editor-tabs button.selected, .editor-tabs button[aria-selected="true"], .editor-feature .tabs button.active, .editor-feature .tabs button.selected, .editor-feature .tabs button[aria-selected="true"] { color: var(--accent); background: transparent; border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
.tool-panel, .inspector-panel { min-width: 0; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.inspector-panel fieldset { min-width: 0; margin: 0 0 18px; padding: 0 0 18px; display: grid; gap: 12px; border: 0; border-bottom: 1px solid var(--border); }
.inspector-panel fieldset:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.inspector-panel legend { width: 100%; margin: 0 0 12px; padding: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.inspector-panel fieldset > .primary-button, .inspector-panel fieldset > .secondary-button { width: 100%; }
.control-group { min-width: 0; margin: 0 0 18px; padding: 0 0 18px; display: grid; gap: 12px; border-bottom: 1px solid var(--border); }
.control-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.control-group > h3, .control-group > h4, .control-group > strong, .control-group > header h3 { min-width: 0; margin: 0; color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.control-group > p, .control-group > header p { margin: -5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.control-row { min-width: 0; min-height: 44px; display: grid; grid-template-columns: 76px minmax(0, 1fr) 48px; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.control-row > label, .control-row > span:first-child { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.control-row input[type="range"] { width: 100%; min-width: 0; height: 28px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.control-row input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--range-progress, 50%), var(--surface-3) var(--range-progress, 50%), var(--surface-3) 100%); border: 0; border-radius: 3px; }
.control-row input[type="range"]::-webkit-slider-thumb { width: 10px; height: 18px; margin-top: -7.5px; appearance: none; background: var(--accent); border: 2px solid var(--surface); border-radius: 4px; box-shadow: 0 0 0 1px var(--border-strong); }
.control-row input[type="range"]::-moz-range-track { height: 3px; background: var(--surface-3); border: 0; border-radius: 3px; }
.control-row input[type="range"]::-moz-range-progress { height: 3px; background: var(--accent); border-radius: 3px; }
.control-row input[type="range"]::-moz-range-thumb { width: 8px; height: 16px; background: var(--accent); border: 2px solid var(--surface); border-radius: 4px; box-shadow: 0 0 0 1px var(--border-strong); }
.control-row > output { min-width: 48px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 5px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.control-row > input[type="color"] { width: 44px; height: 44px; padding: 4px; grid-column: 3; background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 7px; }
.control-row > input[type="checkbox"] { width: 20px; height: 20px; margin: 0; grid-column: 3; justify-self: end; accent-color: var(--accent); }
.control-row > input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not(.range-number-input), .control-row > select, .control-row > textarea { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; grid-column: 1 / -1; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 6px; outline: 0; }
.control-row > .range-number-input { width: 48px; min-width: 48px; height: 28px; padding: 0 4px; grid-column: 3; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 5px; outline: 0; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; appearance: textfield; }
.control-row > .range-number-input::-webkit-inner-spin-button, .control-row > .range-number-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.control-row > textarea { min-height: 82px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.5; }
.control-row > input:focus, .control-row > select:focus, .control-row > textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.editor-resolution-controls { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; align-items: end; }
.editor-resolution-controls > label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.resolution-input { position: relative; min-width: 0; display: block; }
.resolution-input input { width: 100%; min-width: 0; min-height: 44px; padding: 0 32px 0 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 6px; outline: 0; font-variant-numeric: tabular-nums; appearance: textfield; }
.resolution-input input::-webkit-inner-spin-button, .resolution-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.resolution-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.resolution-input small { position: absolute; right: 10px; top: 50%; color: var(--faint); font-size: 11px; transform: translateY(-50%); pointer-events: none; }
.resize-aspect-toggle { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 7px; }
.resize-aspect-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.resize-aspect-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.resize-aspect-toggle svg { width: 17px; height: 17px; }
.resize-aspect-toggle .resize-unlock-icon, .resize-aspect-toggle[aria-pressed="false"] .resize-lock-icon { display: none; }
.resize-aspect-toggle[aria-pressed="false"] .resize-unlock-icon { display: block; }
.control-hint { margin: -5px 0 0; color: var(--faint); font-size: 11px; line-height: 1.45; }
.range-output { min-width: 48px; min-height: 32px; padding: 0 7px; display: inline-grid; place-items: center; flex: none; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.button-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.button-grid button { width: 100%; min-width: 0; }
.color-control { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.color-control input[type="color"] { width: 44px; height: 44px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.color-control input:not([type="color"]), .color-control select { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
.crop-actions { min-width: 0; padding-top: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crop-actions button { width: 100%; min-width: 0; }
.zoom-toolbar { min-width: 0; min-height: 52px; padding: 4px 8px; display: flex; gap: 5px; align-items: center; justify-content: center; overflow-x: auto; background: var(--surface); border-top: 1px solid var(--border); scrollbar-width: none; }
.zoom-toolbar::-webkit-scrollbar { display: none; }
.zoom-toolbar > * { flex: none; }
.zoom-toolbar output { min-width: 58px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.zoom-toolbar .secondary-button { min-height: 44px; }

.editor-export-dialog { width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; overflow: hidden; color: var(--text); background: rgba(0, 0, 0, .62); border: 0; }
.editor-export-dialog::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.editor-export-dialog[open] { display: grid; place-items: center; }
.editor-export-panel { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: 0; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); animation: modal-in .22s ease-out; }
.editor-export-panel > header { min-height: 68px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.editor-export-panel > header h2 { margin: 0; font-size: 18px; }
.editor-export-panel > header p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.editor-export-panel > header button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex: none; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; }
.editor-export-panel > section, .editor-export-panel > .editor-export-body { max-height: calc(100dvh - 180px); padding: 16px; display: grid; gap: 14px; overflow-y: auto; }
.editor-export-panel label { min-width: 0; display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.editor-export-panel input, .editor-export-panel select { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; color: var(--text); background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 6px; }
.editor-export-quality > span { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.editor-export-quality output { color: var(--text); font-variant-numeric: tabular-nums; }
.editor-export-quality input[type="range"] { padding: 0; accent-color: var(--accent); }
.editor-export-summaries { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.editor-export-summary { min-width: 0; min-height: 68px; padding: 12px 14px; display: grid; align-content: center; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; }
.editor-export-summary span { color: var(--muted); font-size: 12px; }
.editor-export-summary strong { overflow-wrap: anywhere; font-size: 15px; font-variant-numeric: tabular-nums; }
.editor-export-panel > footer { min-height: 68px; padding: 12px 16px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); }
.editor-export-panel > footer button { min-height: 44px; padding: 0 15px; }
.editor-export-panel button.loading { position: relative; color: transparent; pointer-events: none; }
.editor-export-panel button.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: currentColor; border-radius: 50%; animation: spin .75s linear infinite; }

.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; padding: 24px; color: #f4f4f4; background: rgba(5,5,5,.96); border: 0; }
.lightbox::backdrop { background: rgba(5,5,5,.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox-layout { width: min(1480px, 100%); height: calc(100dvh - 48px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.lightbox-canvas { min-width: 0; min-height: 0; margin: 0; display: grid; place-items: center; overflow: hidden; }
.lightbox img { width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: scale-down; border-radius: 4px; }
.lightbox-details { min-width: 0; min-height: 0; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; color: #f4f4f4; background: #151515; border: 1px solid #2d2d2d; border-radius: 8px; }
.lightbox-details header { min-height: 48px; padding-right: 44px; display: flex; align-items: flex-start; justify-content: space-between; }
.lightbox-details h2 { margin: 0; font-size: 18px; }
.lightbox-details header p { margin: 2px 0 0; color: #a5a5a5; font-size: 12px; font-variant-numeric: tabular-nums; }
.image-properties { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #2d2d2d; border-left: 1px solid #2d2d2d; }
.image-properties > div { min-width: 0; min-height: 66px; padding: 10px 12px; display: grid; align-content: center; gap: 3px; border-right: 1px solid #2d2d2d; border-bottom: 1px solid #2d2d2d; }
.image-properties dt { color: #a5a5a5; font-size: 12px; }
.image-properties dd { margin: 0; overflow-wrap: anywhere; color: #f4f4f4; font-size: 13px; font-variant-numeric: tabular-nums; }
.lightbox-prompt { min-height: 0; margin-top: 18px; display: flex; flex: 1 1 0; flex-direction: column; }
.lightbox-prompt[hidden] { display: none; }
.lightbox-prompt h3 { margin: 0 0 7px; color: #a5a5a5; font-size: 12px; font-weight: 500; }
.lightbox-prompt p { min-height: 0; max-height: none; margin: 0; flex: 1; overflow-y: auto; color: #d0d0d0; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.lightbox-close { position: fixed; z-index: 2; right: 24px; top: 24px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.lightbox-close:hover { background: rgba(255,255,255,.14); }
.lightbox-info-toggle { display: none; }
.lightbox-mobile-download { display: none; }
.lightbox-download { min-height: 44px; margin-top: auto; padding: 0 14px; display: flex; flex: none; gap: 8px; align-items: center; justify-content: center; color: var(--accent-contrast); background: var(--accent); border-radius: 7px; text-decoration: none; }
.lightbox-download:hover { background: var(--accent-hover); }
.lightbox-download svg { width: 18px; height: 18px; }
.lightbox-actions { min-width: 0; margin-top: auto; padding-top: 16px; display: grid; gap: 8px; }
.lightbox-actions .lightbox-download { margin-top: 0; }
.lightbox-edit { min-width: 0; min-height: 44px; padding: 0 14px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: #f4f4f4; background: transparent; border: 1px solid #494949; border-radius: 7px; }
.lightbox-edit[hidden] { display: none; }
.lightbox-edit:hover { background: #2a2a2a; border-color: #747474; }
.lightbox-edit svg { width: 18px; height: 18px; }
.toast-region { position: fixed; z-index: 100; left: 50%; bottom: 190px; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 11px 14px; color: var(--text); background: var(--toast-bg); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: var(--shadow); text-align: center; font-size: 14px; animation: toast-in .2s ease-out; }
.toast.error { border-color: rgba(239,106,106,.48); }
body #settingsDialog .settings-panel > .dialog-toast-region { position: absolute; z-index: 101; bottom: 80px; width: min(520px, calc(100% - 32px)); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position-x: -220%; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1040px) {
    .route-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .route-model-field { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    :root { --composer-space: 214px; }
    .topbar { height: 58px; }
    .topbar-inner { padding: 0 14px; }
    .connection span:last-child { display: none; }
    .connection { padding: 0 2px; }
    .workspace { padding: 18px 14px var(--composer-space); }
    .toolbar { grid-template-columns: 1fr auto; gap: 9px; }
    .segmented { grid-column: 1 / -1; width: 100%; }
    .segment { flex: 1; }
    .search-field { min-width: 0; }
    .search-field kbd { display: none; }
    .ghost-button { width: 44px; padding: 0; }
    .ghost-button span { display: none; }
    .gallery-selection-bar { padding: 10px 0; flex-direction: column; gap: 8px; align-items: stretch; }
    .gallery-pagination { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .gallery-page-summary { text-align: center; }
    .gallery-page-controls { justify-content: center; }
    .selection-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .selection-actions button { width: 100%; padding: 0 6px; gap: 4px; font-size: 13px; }
    .selection-actions .ghost-button { width: auto; padding: 0 6px; }
    .selection-actions .ghost-button span { display: inline; }
    .image-selection-dialog[open], .batch-download-dialog[open], .share-dialog[open] { align-items: end; }
    .image-selection-panel { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
    .image-selection-grid { padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .download-choice-panel { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
    .download-choice-panel .modal-footer { padding-right: 12px; padding-left: 12px; }
    .share-panel { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
    .task-content { padding: 8px; }
    .empty-state { min-height: calc(100dvh - 340px); }
    .empty-state h1 { font-size: 21px; }
    .empty-state > p { font-size: 14px; }
    .composer-shell { padding: 10px 10px max(12px, env(safe-area-inset-bottom)); }
    .composer { width: 100%; padding: 9px; }
    .prompt-row textarea { min-height: 54px; font-size: 16px; }
    .composer-controls { padding-top: 6px; }
    .composer-hint { display: none; }
    .composer-controls label > span { display: none; }
    .composer-controls .upload-button span { display: inline; }
    .size-trigger > span { display: none; }
    .size-panel { height: min(780px, calc(100dvh - 20px)); }
    .size-header { padding-right: 16px; padding-left: 16px; }
    .size-body { padding-right: 16px; padding-left: 16px; }
    .size-footer { padding-right: 16px; padding-left: 16px; }
    .settings-grid { grid-template-columns: 1fr; }
    .route-fields { grid-template-columns: 1fr; }
    .route-model-field { grid-column: auto; }
    .toast-region { bottom: 205px; }
    body #settingsDialog .settings-panel > .dialog-toast-region { width: calc(100% - 24px); }
    .lightbox { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .lightbox-layout { height: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); gap: 0; }
    .lightbox-details { position: fixed; z-index: 3; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); max-height: min(68dvh, 560px); padding: 16px; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(calc(100% + 24px)); transition: opacity .18s ease, transform .22s ease-out, visibility .22s; box-shadow: 0 20px 60px rgba(0,0,0,.48); }
    .lightbox-details.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
    .lightbox-details header { min-height: 40px; padding-right: 0; }
    .image-properties { margin-top: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .image-properties > div { min-height: 58px; padding: 8px; }
    .lightbox-prompt { margin-top: 14px; display: block; flex: none; }
    .lightbox-prompt p { max-height: 4.8em; }
    .lightbox-close { right: 16px; top: 16px; }
    .lightbox-mobile-download { position: fixed; z-index: 4; right: 120px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent-contrast); background: var(--accent); border-radius: 50%; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
    .lightbox-mobile-download:hover { background: var(--accent-hover); }
    .lightbox-mobile-download svg { width: 19px; height: 19px; }
    .lightbox-info-toggle { position: fixed; z-index: 4; right: 68px; top: 16px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; color: #fff; background: rgba(5,5,5,.64); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; backdrop-filter: blur(8px); }
    .lightbox-info-toggle:hover, .lightbox-info-toggle[aria-expanded="true"] { background: rgba(255,255,255,.16); }
    .lightbox-info-toggle svg { width: 19px; height: 19px; }
    .lightbox-download { margin-top: 16px; }
}

@media (max-width: 430px) {
    .brand { font-size: 15px; }
    .brand > span:last-child { display: none; }
    .top-actions { gap: 0; }
    .top-actions .connection, .top-actions #exportButton { display: none; }
    .top-actions .user-badge { display: none; }
    .balance-badge { padding: 0 5px; }
    .balance-badge svg { display: none; }
    #selectVisibleButton span { display: none; }
    .share-link-row { grid-template-columns: minmax(0, 1fr); }
    .share-link-row button { width: 100%; }
    .share-result-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .share-result-actions > * { width: 100%; }
    .download-choice-panel .modal-footer { display: grid; grid-template-columns: minmax(0, 1fr); }
    .download-choice-panel .modal-footer button { width: 100%; }
    .size-modal[open] { align-items: end; }
    .size-panel { width: 100%; height: min(760px, calc(100dvh - 8px)); max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
    .size-tabs button { padding: 0 4px; font-size: 14px; }
    .ratio-options { gap: 7px; }
    .ratio-options button { min-height: 72px; }
    .custom-size-fields { gap: 8px; }
    .lightbox { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .lightbox-details { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); max-height: min(72dvh, 480px); padding: 14px; }
    .image-properties { grid-template-columns: 1fr 1fr; }
    .lightbox-close { right: 12px; top: 12px; }
    .lightbox-mobile-download { right: 116px; top: 12px; }
    .lightbox-info-toggle { right: 64px; top: 12px; }
}

@media (max-width: 1160px) {
    .editor-workbench { grid-template-columns: 176px minmax(0, 1fr) 280px; }
    .source-list { padding: 8px; gap: 7px; }
    .source-item, .editor-source-item { min-height: 64px; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
    .source-item img, .editor-source-item img { width: 48px; height: 48px; }
    .tool-panel, .inspector-panel { padding: 14px; }
}

@media (max-width: 900px) {
    .editor-feature { min-height: 680px; padding: 12px; }
    .editor-workbench { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 104px minmax(0, 1fr); grid-template-areas: "source source" "canvas inspector"; }
    .editor-source-panel, .source-panel { grid-area: source; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); border-right: 0; border-bottom: 1px solid var(--border); }
    .editor-source-panel .panel-heading, .source-panel .panel-heading { min-height: 0; border-right: 1px solid var(--border); border-bottom: 0; }
    .source-list { padding: 8px; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; }
    .source-item, .editor-source-item { width: 180px; min-height: 80px; flex: 0 0 180px; }
    .source-empty, .editor-source-empty { width: 100%; min-height: 84px; padding: 8px 14px; flex-direction: row; justify-content: flex-start; text-align: left; }
    .editor-canvas-column, .canvas-column { grid-area: canvas; }
    .editor-inspector, .inspector { grid-area: inspector; }
}

@media (max-width: 760px) {
    .app-shell { min-height: calc(100dvh - 58px); }
    .feature-sidebar { position: sticky; z-index: 24; top: 58px; bottom: auto; width: 100%; height: auto; padding: 8px 14px; overflow: visible; background: var(--topbar-bg); border-right: 0; border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
    .feature-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .feature-nav-item { justify-content: center; text-align: center; }
    .feature-nav-item.active, .feature-nav-item.selected, .feature-nav-item[aria-current="page"], .feature-nav-item[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
    .feature-content { margin-left: 0; }
    .composer-shell { left: 0; right: 0; }
    .composer { width: 100%; }

    .editor-feature { height: auto; min-height: calc(100dvh - 119px); padding: 10px; display: grid; grid-template-rows: auto auto; gap: 10px; overflow: visible; }
    .editor-commandbar, .editor-header { min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .editor-title h1, .editor-title h2 { font-size: 16px; }
    .editor-command-actions, .editor-document-actions { width: 100%; padding-bottom: 2px; align-self: stretch; }
    .editor-command-actions > *, .editor-document-actions > * { flex: none; }
    .editor-workbench { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 96px minmax(420px, 62dvh) auto; grid-template-areas: "source" "canvas" "inspector"; overflow: hidden; }
    .editor-source-panel, .source-panel { grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: 96px; }
    .editor-source-panel .panel-heading, .source-panel .panel-heading { padding: 8px; }
    .source-list { min-height: 0; }
    .source-item, .editor-source-item { width: 172px; min-height: 78px; flex-basis: 172px; }
    .source-empty, .editor-source-empty { min-height: 78px; }
    .editor-canvas-column, .canvas-column { min-height: 420px; border-bottom: 1px solid var(--border); }
    .editor-feature .modebar, .zoom-toolbar { justify-content: flex-start; }
    .editor-feature .stage, .editor-stage { min-height: 0; padding: 14px; }
    .drop-zone, .editor-drop-zone { min-height: 330px; padding: 20px 16px; }
    .editor-inspector, .inspector { height: min(560px, 72dvh); min-height: 420px; border-top: 1px solid var(--border); border-left: 0; }
    .editor-tabs, .editor-feature .tabs { flex: none; }
    .tool-panel, .inspector-panel { flex: 1 1 auto; padding: 14px; overflow-y: auto; }
    .button-grid, .crop-actions { gap: 7px; }
    .editor-export-panel { max-height: calc(100dvh - 20px); }
    .lightbox-actions { padding-top: 14px; }
    .lightbox-actions .lightbox-download { margin-top: 0; }
}

@media (max-width: 430px) {
    .feature-sidebar { padding: 6px 8px; }
    .feature-nav { gap: 6px; }
    .feature-nav-item { padding: 0 8px; }
    .editor-feature { padding: 8px; gap: 8px; }
    .editor-commandbar, .editor-header { padding: 8px; }
    .editor-workbench { grid-template-rows: 92px minmax(390px, 60dvh) auto; }
    .editor-source-panel, .source-panel { grid-template-columns: 126px minmax(0, 1fr); grid-template-rows: 92px; }
    .editor-feature .panel-heading { min-height: 0; padding: 7px; }
    .editor-feature .panel-heading > div > span { display: none; }
    .source-item, .editor-source-item { width: 160px; min-height: 74px; flex-basis: 160px; grid-template-columns: 48px minmax(0, 1fr); }
    .editor-source-fan { width: 48px; height: 56px; }
    .commerce-result-picker { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
    .commerce-result-dialog[open] { align-items: end; }
    .commerce-result-grid { padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .editor-canvas-column, .canvas-column { min-height: 390px; }
    .editor-feature .stage, .editor-stage { padding: 10px; }
    .drop-zone, .editor-drop-zone { min-height: 300px; padding: 18px 12px; }
    .editor-inspector, .inspector { min-height: 400px; }
    .editor-export-modal[open] { align-items: end; }
    .editor-export-panel { width: 100%; max-height: calc(100dvh - 8px); border-radius: 8px 8px 0 0; }
}

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