* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 "Segoe UI",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a,label[for=image],summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button,a,input,select,textarea { border-radius:7px; }
button { border:1px solid var(--line); background:var(--surface); padding:8px 12px; }
button:hover:not(:disabled) { background:#2b2d30; border-color:#606065; }
button:disabled { opacity:.35; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,.wipe-handle:focus-visible,label[for=image]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
svg { width:20px; height:20px; display:block; flex-shrink:0; }
[data-icon] { display:inline-flex; flex-shrink:0; }
[hidden] { display:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0; }
.app-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--line); gap:10px; }
.brand,.header-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.app-header .header-actions { flex-wrap:wrap; width:100%; }
.library-link { display:inline-flex; align-items:center; min-height:36px; padding:7px 12px; border:1px solid var(--line); background:var(--surface); color:var(--accent); text-decoration:none; white-space:nowrap; }
.library-link:hover { border-color:var(--accent); background:var(--accent-dim); }
.brand-mark { font-size:33px; line-height:1; }
h1 { font-size:28px; font-weight:600; letter-spacing:-.6px; margin:0; white-space:nowrap; }
h1 span { color:#696c71; margin:0 4px; }
h1 strong { font-weight:600; color:var(--accent); }
.brand-description { display:none; padding-left:16px; border-left:1px solid var(--line); color:#b0b3b7; font-size:13px; }
.connection { display:none; color:#b0b3b7; font-size:12px; margin:0; overflow-wrap:anywhere; }
.connection::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background:#697078; }
.connection.available::before { background:#74ad74; }
#language { color:var(--accent); background:var(--surface); border:1px solid var(--line); padding:7px 10px; }
.studio { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:10px; max-width:1920px; margin:auto; }
.workspace,.inspector { border:1px solid var(--line); border-radius:10px; background:#141618; min-width:0; }
.workspace { display:grid; grid-template-areas:"heading" "image" "tools" "strip" "prompt"; grid-template-rows:auto clamp(280px,48svh,520px) auto auto auto; gap:12px; padding:12px; order:1; }
.workspace-heading { order:1; grid-area:heading; }
.drop-surface { order:2; grid-area:image; }
#workspace-tools { order:3; grid-area:tools; }
.image-strip { order:4; grid-area:strip; }
.prompt-editor { order:5; grid-area:prompt; }
.workspace-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:12px; }
#upload-label { display:block; min-width:0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.change-image { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--text); margin-left:auto; }
.change-image svg { width:15px; height:15px; }
.compare-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.icon-button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; }
.icon-button svg { width:18px; height:18px; }
.zoom-label { padding:5px 4px; font-size:12px; min-width:36px; min-height:44px; border-color:transparent; background:transparent; }
.drop-surface { min-height:0; position:relative; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--surface); }
.workspace.dragging .drop-surface { outline:2px solid var(--accent); outline-offset:-3px; }
.upload-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; cursor:pointer; color:var(--muted); text-align:center; padding:24px; background:radial-gradient(ellipse at center,#23262a 0,var(--surface) 70%); }
.upload-empty strong { font-size:20px; font-weight:500; color:var(--text); margin-top:10px; }
.upload-empty>span:last-child { font-size:13px; }
.upload-symbol { padding:16px; border:1px dashed #50545a; border-radius:12px; }
.upload-symbol svg { width:36px; height:36px; color:var(--accent); }
.image-stage { position:relative; height:100%; min-height:0; overflow:hidden; background-color:#1b1d20; background-image:conic-gradient(#202225 25%,transparent 0 50%,#202225 0 75%,transparent 0); background-size:22px 22px; }
.image-stage img { width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; transform-origin:center; }
.image-stage.single,.image-stage.side,.image-stage.all { display:grid; grid-template-columns:1fr; }
.image-stage.side { grid-template-columns:repeat(2,minmax(0,1fr)); }
.image-stage.all { grid-template-columns:repeat(3,minmax(0,1fr)); }
.image-stage figure { margin:0; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--line); }
.image-stage figure:last-child { border-right:0; }
.image-frame { flex:1; min-height:0; overflow:hidden; }
.image-stage figcaption { text-align:center; font-size:12px; padding:8px; background:var(--surface); color:#c5c7ca; }
.image-stage.swipe { cursor:ew-resize; touch-action:pan-y; }
.image-stage.swipe>img,.wipe-layer { position:absolute; inset:0; width:100%; height:100%; }
.wipe-layer { clip-path:inset(0 calc(100% - var(--split,50%)) 0 0); background-color:#1b1d20; background-image:conic-gradient(#202225 25%,transparent 0 50%,#202225 0 75%,transparent 0); background-size:22px 22px; pointer-events:none; }
.wipe-handle { position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:#e9e6dd; transform:translateX(-1px); touch-action:none; }
.wipe-handle span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border:1px solid #dedbd4; border-radius:50%; background:#202225; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; letter-spacing:2px; box-shadow:0 2px 8px #0006; }
.stage-caption { position:absolute; top:12px; padding:4px 9px; font-size:11px; border-radius:4px; background:#151719d9; color:var(--text); pointer-events:none; }
.stage-caption.left { left:12px; } .stage-caption.right { right:12px; }
.image-stage.pan-enabled { cursor:grab; touch-action:none; }
.image-stage.pan-enabled:active { cursor:grabbing; }
.image-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.thumbnails { display:flex; gap:8px; height:76px; width:100%; min-width:0; }
.thumbnail { flex:1; min-width:0; height:100%; position:relative; overflow:hidden; padding:0; background:#24262a; }
.thumbnail img { width:100%; height:100%; object-fit:contain; }
.thumbnail>span:last-child { position:absolute; bottom:5px; left:6px; padding:1px 5px; color:#eee; font-size:11px; background:#17191be6; border-radius:3px; }
.thumbnail-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#62666c; }
.downloads { display:flex; flex-direction:column; gap:6px; min-width:0; }
.downloads svg { width:16px; height:16px; }
.result-main-actions,.result-output-actions { display:flex; align-items:center; gap:6px; min-width:0; }
.result-main-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:7px 10px; font-size:12px; white-space:nowrap; }
#associate-result { color:var(--text); }
#associate-result:hover:not(:disabled) { border-color:var(--accent); }
#result-character-link { color:var(--accent); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-file-actions { display:flex; align-items:center; gap:2px; min-width:0; padding:3px 4px 3px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.result-file-label { margin-right:auto; color:var(--muted); font-size:11px; font-weight:600; }
.result-file-actions a,.result-file-actions button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 38px; width:38px; min-height:38px; padding:7px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text); text-decoration:none; }
.result-file-actions a:hover,.result-file-actions button:hover:not(:disabled) { border-color:var(--accent); background:var(--raised); }
#copy-result-status:not(:empty) { color:var(--accent); font-size:12px; }
.prompt-editor { border:1px solid var(--line); border-radius:8px; padding:13px 14px; background:var(--surface); }
.prompt-editor>label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
textarea,input,select { background:#202226; color:var(--text); border:1px solid #3a3d42; padding:9px 11px; }
textarea { width:100%; resize:vertical; display:block; min-height:62px; }
textarea::placeholder,input::placeholder { color:#7e838b; }
.exact-prompt { margin-top:11px; color:#c3c6ca; font-size:12px; }
summary { cursor:pointer; user-select:none; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.65 "Segoe UI",Arial,sans-serif; color:var(--muted); margin:12px 0 0; max-height:120px; overflow:auto; }
.prompt-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.prompt-footer button { font-size:11px; padding:4px 8px; background:transparent; }
small { color:var(--muted); font-size:11px; }
.inspector { display:flex; flex-direction:column; order:2; }
.inspector-heading { display:flex; align-items:center; justify-content:space-between; padding:6px 2px 14px; gap:10px; }
h2 { font-size:18px; margin:0; font-weight:600; }
#reset-body { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); padding:0; background:none; border:0; }
#reset-body svg { width:15px; height:15px; }
.inspector-scroll { min-height:0; flex:1; padding:14px 12px 12px; scrollbar-width:thin; scrollbar-color:#45484e transparent; }
.body-group { border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:var(--surface); }
.body-group>summary { padding:15px 14px; display:flex; align-items:center; gap:12px; list-style:none; font-size:14px; font-weight:600; }
.body-group>summary::-webkit-details-marker { display:none; }
.body-group>summary svg { width:26px; height:26px; color:#c6c8cb; }
.body-group>summary::after { content:'⌄'; margin-left:auto; font-size:18px; color:var(--muted); font-weight:400; }
.body-group[open]>summary::after { transform:rotate(180deg); }
.body-group>summary small { color:var(--accent); }
fieldset { border:0; padding:0 13px 16px; margin:0; min-width:0; }
legend { font-size:13px; color:#c5c8cc; margin-bottom:8px; padding:0; }
.choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.choices.wide-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice { display:flex; align-items:center; justify-content:center; gap:6px; position:relative; min-height:37px; border:1px solid #393d42; border-radius:6px; font-size:12px; line-height:1.3; padding:7px 4px; background:#24272b; cursor:pointer; text-align:center; overflow:hidden; }
.choice input { position:absolute; opacity:0; width:1px; height:1px; padding:0; }
.choice:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.choice:has(input[value=default]:checked) { background:#2d3034; border-color:#767980; color:var(--text); }
.choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.choice:hover { border-color:#686971; }
.appearance-warning { margin:10px 0 0; padding:9px 10px; border-left:2px solid #c9a56b; background:#c9a56b0d; color:#e1c18f; font-size:12px; line-height:1.5; }
#combined-body-warning { margin:0 0 12px; }
.advanced { font-size:12px; margin:12px 0 0; color:var(--muted); }
.advanced>summary { display:flex; align-items:center; gap:8px; padding:10px 4px; }
.advanced label { display:block; margin:12px 0 6px; font-size:12px; color:#c8cbd0; }
.advanced input:not([type=checkbox]) { width:100%; }
.input-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.advanced .checkbox { display:flex; align-items:center; gap:8px; }
.checkbox input { accent-color:var(--accent); }
.workflow-control { margin:16px 0; padding:12px; border:1px solid var(--line); border-radius:8px; }
.workflow-slider { display:flex; align-items:center; gap:8px; }
.workflow-slider input { flex:1; min-width:0; accent-color:var(--accent); }
.workflow-slider output { min-width:3em; text-align:right; font-variant-numeric:tabular-nums; }
.inspector-footer { border-top:1px solid var(--line); padding:16px; background:var(--surface); border-radius:0 0 10px 10px; }
.edit-summary strong { font-size:13px; font-weight:600; }
#selected-edits { display:flex; flex-wrap:wrap; gap:5px; max-height:68px; overflow:auto; margin:8px 0 12px; }
#selected-edits:empty { margin:0 0 13px; }
#selected-edits button { font-size:10px; padding:3px 7px; background:var(--accent-dim); color:var(--accent); border-color:var(--accent-border); }
#generate { width:100%; min-height:45px; background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; gap:12px; }
#generate:hover:not(:disabled) { background:var(--accent-hover); }
#generate:disabled { opacity:.45; }
.job-status p { font-size:11px; color:var(--muted); margin:10px 0 0; }
.job-status.error p { color:#ed9e91; }
progress { width:100%; height:5px; accent-color:var(--accent); margin-top:9px; }
#job-details { font-size:10px; margin-top:8px; color:#797f87; }
#job-info { display:block; overflow-wrap:anywhere; margin-top:6px; }
#image-viewer { width:calc(100vw - 16px); max-width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); padding:10px; background:#141618; border:1px solid var(--line); color:var(--text); border-radius:10px; overflow:auto; }
#image-viewer[open] { display:flex; flex-direction:column; gap:12px; }
#image-viewer::backdrop { background:#000d; }
body:has(#image-viewer[open]) { overflow:hidden; }
.fullscreen-heading { display:flex; align-items:center; justify-content:space-between; }
#fullscreen-stage { flex:1; border:1px solid var(--line); border-radius:7px; }
#fullscreen-tools [data-action=fullscreen] { display:none; }
@media(prefers-reduced-motion:no-preference) { button,.choice,a { transition:background .15s,border-color .15s,color .15s; } }

#history-open { display:flex; align-items:center; gap:7px; font-size:12px; }
#history-open svg { width:16px; height:16px; }
#archive-info { margin-left:16px; }
#archive-prompt { flex-shrink:0; font-size:12px; color:var(--muted); }
#history-dialog { width:min(1180px,calc(100vw - 16px)); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:12px; background:#141618; border:1px solid var(--line); border-radius:10px; color:var(--text); overflow:auto; }
#history-dialog::backdrop { background:#000b; }
body:has(#history-dialog[open]) { overflow:hidden; }
.history-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.history-heading p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.history-heading button { font-size:12px; }
#history-status { color:var(--muted); font-size:12px; }
#history-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.history-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0; }
.history-card-delete { position:absolute; z-index:1; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:8px; border:1px solid #764740; border-radius:8px; background:#221818e8; color:#f2aaa3; box-shadow:0 3px 14px #0008; }
.history-card-delete:hover:not(:disabled) { border-color:#eaa39d; background:#3b2422; }
.history-card-delete svg { width:18px; height:18px; }
.history-card-more { position:absolute; z-index:1; top:8px; left:8px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:8px; border:1px solid #56595e; border-radius:8px; background:#1a1c1ee8; color:var(--text); box-shadow:0 3px 14px #0008; }
.history-card-more:hover:not(:disabled) { border-color:var(--accent); background:#2a2927; }
.history-card-more svg { width:18px; height:18px; }
.history-thumbnail { display:block; padding:0; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--raised); cursor:zoom-in; border:0; border-radius:9px 9px 0 0; }
.history-thumbnail img { width:100%; height:100%; object-fit:contain; }
.history-thumbnail:hover:not(:disabled) { background:#282b2f; }
.history-thumbnail:focus-visible { outline-offset:-4px; }
.history-card-body { padding:12px; }
.history-card-info { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:12px; }
.history-card time { font-size:12px; color:var(--muted); }
.history-state { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; }
.history-state::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.history-state-done { color:#a6bfa6; }
.history-state-failed { color:#df9d97; }
.history-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.history-actions button,.history-actions a { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-size:13px; }
.history-actions svg { width:17px; height:17px; }
.history-actions .history-primary { color:var(--accent); border-color:#635035; background:var(--accent-dim); padding:8px 12px; }
.history-actions .history-primary:hover:not(:disabled) { background:#453724; border-color:var(--accent); }
.history-downloads { display:flex; align-items:center; gap:4px; }
.history-actions .history-downloads a { display:flex; flex-direction:column; gap:1px; min-width:45px; min-height:44px; padding:3px 4px; border:1px solid transparent; border-radius:6px; color:var(--muted); font-size:10px; text-decoration:none; white-space:nowrap; }
.history-actions .history-downloads a:hover { border-color:var(--line); background:var(--raised); color:var(--text); }
.history-downloads svg { width:16px; height:16px; }
.history-actions .history-icon-button { flex:0 0 44px; width:44px; padding:0; border-color:transparent; background:transparent; color:var(--muted); }
.history-actions .history-character { min-width:0; max-width:42%; padding:0 2px; color:var(--accent); text-decoration:none; overflow:hidden; white-space:nowrap; }
.history-actions .history-character:hover { text-decoration:underline; }
.history-character span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.history-menu { position:fixed; inset:auto; margin:0; width:min(300px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:7px; background:var(--raised); color:var(--text); border:1px solid #474b52; border-radius:10px; box-shadow:0 12px 36px #0009; }
.history-menu-heading { margin:5px 10px; font-size:11px; color:var(--muted); }
.history-menu button,.history-menu a { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; border:0; background:transparent; color:var(--text); font-size:13px; text-decoration:none; text-align:left; }
.history-menu button:hover:not(:disabled),.history-menu a:hover { background:#35393e; }
.history-menu svg { width:17px; height:17px; color:var(--muted); }
.history-menu button small { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
#result-character-dialog { width:min(1080px,calc(100vw - 28px)); height:min(760px,calc(100dvh - 28px)); max-width:none; max-height:none; overflow:hidden; padding:0; background:var(--bg); color:var(--text); border:1px solid #454039; border-radius:14px; box-shadow:0 30px 100px #000b; }
#result-character-dialog[open] { display:flex; flex-direction:column; }
#result-character-dialog::backdrop { background:#000b; backdrop-filter:blur(4px); }
.result-character-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 18px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,var(--accent-dim),var(--surface) 56%); }
.result-character-eyebrow { display:block; margin-bottom:4px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.result-character-heading h2 { font-size:23px; line-height:1.15; }
.result-character-heading p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.result-character-heading .icon-button { flex:0 0 38px; width:38px; height:38px; padding:8px; background:#25272a; }
.result-character-body { display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); flex:1; min-height:0; }
.result-character-preview { display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; padding:22px; border-right:1px solid var(--line); background:#141618; }
.result-character-section-heading,.result-character-list-heading { display:flex; align-items:center; gap:8px; }
.result-character-section-heading svg,.result-character-list-heading svg { width:17px; height:17px; color:var(--accent); }
.result-character-section-heading h3 { margin:0; font-size:14px; font-weight:650; }
.result-character-preview-frame { display:flex; align-items:center; justify-content:center; flex:1; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background-color:#1b1d20; background-image:conic-gradient(#222428 25%,transparent 0 50%,#222428 0 75%,transparent 0); background-size:20px 20px; }
.result-character-preview-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.result-character-preview>p { margin:0; color:var(--muted); font-size:12px; }
.result-character-picker { display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; padding:22px 22px 0; }
.result-character-field { display:flex; flex-direction:column; gap:6px; color:#bfc0c2; font-size:12px; font-weight:600; }
.result-character-field select { width:100%; min-height:41px; background:var(--surface); }
.result-character-search { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 12px; background:#202226; border:1px solid #3a3d42; border-radius:8px; }
.result-character-search:focus-within { border-color:var(--accent); }
.result-character-search svg { width:19px; height:19px; color:var(--muted); }
.result-character-search input { flex:1; width:100%; min-width:0; padding:8px 0; border:0; outline:none; background:transparent; }
.result-character-list-heading { min-height:23px; color:var(--muted); }
.result-character-list-heading h4 { margin:0; color:#d9d8d5; font-size:12px; font-weight:700; letter-spacing:.02em; }
.result-character-list-heading>span:last-child { margin-left:auto; font-size:11px; }
.result-character-suggestion-section { display:flex; flex-direction:column; gap:8px; }
.result-character-suggestions { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.result-character-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); align-content:start; gap:9px; min-height:0; overflow-y:auto; padding:2px 3px 20px 2px; scrollbar-width:thin; }
.result-character-grid:has(>.result-character-empty) { display:block; }
.result-character-card { display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:74px; padding:8px; text-align:left; background:var(--surface); border:1px solid #383a3d; border-radius:9px; transition:border-color .15s,background .15s; }
.result-character-card:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-dim); }
.result-character-card.active { border-color:var(--accent); background:var(--accent-dim); box-shadow:inset 0 0 0 1px #e8bb7540; }
.result-character-card.suggestion { flex:0 0 174px; }
.result-character-avatar { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 54px; width:54px; height:54px; overflow:hidden; border-radius:7px; background:var(--accent-dim); color:var(--accent); font-size:22px; font-weight:600; }
.result-character-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.result-character-card-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.result-character-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:650; }
.result-character-card-copy small { color:var(--muted); font-size:11px; }
.result-character-empty { padding:24px 12px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:9px; }
.result-character-footer { padding:12px 22px 16px; border-top:1px solid var(--line); background:var(--surface); }
#result-character-status { min-height:0; margin:0; color:var(--muted); font-size:12px; }
#result-character-status:not(:empty) { margin-bottom:9px; }
.result-character-choice { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-character-selected { display:flex; align-items:center; gap:10px; min-width:0; color:var(--muted); font-size:12px; }
.result-character-selected .result-character-avatar { flex-basis:38px; width:38px; height:38px; font-size:16px; }
.result-character-selected strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:13px; }
.result-character-selected small { display:block; }
#result-character-confirm { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:9px 15px; background:var(--accent); border-color:var(--accent); color:var(--accent-text); font-weight:700; }
#result-character-confirm:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }
#result-character-confirm svg { width:17px; height:17px; }
@media(max-width:700px) {
  #result-character-dialog { width:100vw; height:100dvh; border:0; border-radius:0; }
  .result-character-heading { padding:14px 16px; }
  .result-character-heading h2 { font-size:20px; }
  .result-character-body { display:flex; flex-direction:column; overflow:hidden; }
  .result-character-preview { flex:0 0 auto; height:190px; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .result-character-preview-frame { flex:1; }
  .result-character-preview>p { display:none; }
  .result-character-picker { flex:1; gap:9px; padding:14px 16px 0; }
  .result-character-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:7px; }
  .result-character-card { min-height:65px; }
  .result-character-avatar { flex-basis:46px; width:46px; height:46px; }
  .result-character-footer { padding:10px 16px max(12px,env(safe-area-inset-bottom)); }
  .result-character-choice { align-items:stretch; }
  #result-character-confirm { flex:0 0 auto; }
}
@media(max-width:430px) {
  .result-character-preview { height:158px; }
  .result-character-heading p { font-size:12px; }
  .result-character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #result-character-confirm [data-i18n] { max-width:130px; line-height:1.2; text-align:center; }
}
.downloads button { min-height:44px; }
#history-more { display:block; margin:22px auto 0; }
.studio:has(#diagnostic-panel:not([hidden])) { grid-template-columns:minmax(0,1fr); }
#diagnostic-panel { display:flex; flex-direction:column; min-width:0; height:360px; order:3; padding:14px; background:#141618; border:1px solid var(--line); border-radius:10px; }
.diagnostic-heading { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.diagnostic-heading div { display:flex; gap:8px; }
.diagnostic-heading button { font-size:12px; padding:7px 10px; }
.diagnostic-content { display:flex; flex-direction:column; gap:12px; overflow:auto; min-height:0; flex:1; }
.diagnostic-content > div { min-width:0; flex-shrink:0; }
.diagnostic-content p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; margin:0 0 10px; }
.diagnostic-content pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-size:11px; line-height:1.6; }
#diagnostic-log { overflow:auto; padding:10px; background:#101214; border:1px solid var(--line); border-radius:6px; min-height:180px; flex:1; flex-shrink:0; }
#diagnostic-data { max-height:230px; overflow:auto; padding:8px; }
.diagnostic-content details { margin:10px 0; font-size:12px; }
.diagnostic-content table { width:100%; border-collapse:collapse; font-size:11px; }
.diagnostic-content td,.diagnostic-content th { padding:5px; text-align:left; border-bottom:1px solid var(--line); }
/* Crop geometry stays inside the contained image, independent of the viewer toolbar. */
.crop-overlay { position:absolute; cursor:crosshair; touch-action:none; overflow:hidden; }
.crop-rectangle { position:absolute; border:2px solid var(--accent); box-shadow:0 0 0 2000px #0009; cursor:move; }
.crop-rectangle span { position:absolute; width:44px; height:44px; }
.crop-rectangle span::after { content:""; position:absolute; inset:13px; background:var(--accent); border:2px solid #17191c; }
.crop-rectangle [data-corner=nw] { left:-22px; top:-22px; cursor:nwse-resize; }
.crop-rectangle [data-corner=ne] { right:-22px; top:-22px; cursor:nesw-resize; }
.crop-rectangle [data-corner=sw] { left:-22px; bottom:-22px; cursor:nesw-resize; }
.crop-rectangle [data-corner=se] { right:-22px; bottom:-22px; cursor:nwse-resize; }
#crop-tools { align-self:center; width:calc(100% - 16px); max-width:420px; margin:8px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6px; padding:6px; border-radius:7px; background:#191b1eee; }
#crop-hint { grid-column:1 / -1; font-size:11px; color:var(--muted); }
#crop-tools button { grid-column:1 / -1; min-height:44px; padding:8px 6px; }
#crop-size { grid-column:1 / -1; font-size:12px; color:var(--accent); }
#crop-resize-options { grid-column:1 / -1; display:grid; gap:6px; font-size:12px; }
#crop-resize-options .checkbox { display:flex; align-items:center; gap:8px; min-height:44px; margin:0; }
#crop-size-warning { color:var(--muted); }
#crop-output-size { color:var(--accent); }
#dropzone:has(#crop-tools:not([hidden])) { display:flex; flex-direction:column; }
#dropzone:has(#crop-tools:not([hidden])) #workspace-stage { flex:1; min-height:100px; height:auto; }

/* Touch controls and document scrolling are the default, including narrow landscape screens. */
body { padding-bottom:env(safe-area-inset-bottom); }
input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; min-width:0; }
.workspace:has(#crop-tools:not([hidden])) { grid-template-areas:"heading" "image" "prompt"; grid-template-rows:auto clamp(280px,48svh,520px) auto; }
.workspace:has(#crop-tools:not([hidden])) #workspace-tools,.workspace:has(#crop-tools:not([hidden])) .image-strip { display:none; }
.diagnostic-heading button,.history-heading button { min-height:44px; }
.exact-prompt>summary,.advanced>summary,#job-details>summary,.diagnostic-content summary { min-height:44px; align-content:center; }
.change-image,#reset-body,.downloads a,.prompt-footer button,#selected-edits button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.choice { min-height:44px; }
.advanced .checkbox { min-height:44px; margin:6px 0; }
.checkbox input { width:20px; height:20px; flex-shrink:0; }
#archive-info { display:block; margin:4px 0 0; overflow-wrap:anywhere; }
#history-open,#diagnostic-open,#language { min-height:44px; }
.diagnostic-heading div { flex-wrap:wrap; }
#diagnostic-measurements { overflow-x:auto; }
#selected-edits { max-height:none; }
@media(min-width:600px) {
  .app-header { padding:12px 18px; }
  .app-header .header-actions { width:auto; }
  .choices { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1000px) and (min-height:600px) {
  .app-header { min-height:66px; padding:10px 24px; flex-wrap:nowrap; }
  .connection { display:block; max-width:180px; }
  .studio { grid-template-columns:minmax(0,1fr) 340px; padding:14px; gap:14px; }
  .workspace,.inspector { height:calc(100dvh - 108px); }
  .workspace { grid-template-areas:"heading" "tools" "image" "strip" "prompt"; grid-template-rows:auto auto minmax(240px,1fr) auto auto; padding:16px; overflow:auto; }
  .workspace:has(#crop-tools:not([hidden])) { grid-template-areas:"heading" "image" "prompt"; grid-template-rows:auto minmax(240px,1fr) auto; }

  .workspace,.inspector,#diagnostic-panel { order:0; }
  #workspace-tools { order:2; }
  .drop-surface { order:3; }
  .workspace-heading { flex-wrap:nowrap; }
  #upload-label { width:auto; min-width:0; }
  .image-strip { flex-wrap:nowrap; }
  .thumbnails { width:50%; height:90px; }
  .downloads { flex:1; }
  .inspector-scroll { overflow:auto; }
  .choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #selected-edits { max-height:100px; }
  .studio:has(#diagnostic-panel:not([hidden])) { grid-template-columns:minmax(0,1fr) 340px; }
  #diagnostic-panel { grid-column:1 / -1; height:340px; }
  #history-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1280px) and (min-height:600px) {
  .brand-description { display:block; }
  .studio:has(#diagnostic-panel:not([hidden])) { grid-template-columns:300px minmax(0,1fr) 340px; }
  #diagnostic-panel { grid-column:auto; height:calc(100dvh - 108px); }
}
@media(min-width:1700px) and (min-height:600px) {
  .studio { grid-template-columns:minmax(0,1fr) 380px; }
  .studio:has(#diagnostic-panel:not([hidden])) { grid-template-columns:360px minmax(0,1fr) 380px; }
}

/* Keep navigation, source actions and viewing tools in separate, named groups. */
.source-heading { flex:1; min-width:0; }
.source-heading strong { display:block; color:var(--text); font-size:14px; margin-bottom:3px; }
.image-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.change-image { margin-left:0; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:12px; }
.utility-menu { position:relative; }
.utility-menu>summary { display:flex; align-items:center; justify-content:center; gap:7px; list-style:none; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font-size:12px; }
.utility-menu>summary::-webkit-details-marker { display:none; }
.utility-menu[open]>summary { border-color:var(--accent); color:var(--accent); }
.menu-content { position:absolute; right:0; top:calc(100% + 6px); z-index:10; width:240px; max-width:calc(100vw - 32px); padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 8px 24px #0006; }
.menu-content { display:flex; flex-direction:column; gap:8px; }
.menu-content button { width:100%; text-align:left; justify-content:flex-start; min-height:44px; }
.menu-content label { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0; }
.menu-content .connection { display:block; max-width:none; font-size:11px; }
.app-header .header-actions { justify-content:flex-end; }
.view-modes,.comparison-modes,.canvas-tools { display:flex; align-items:center; gap:4px; min-width:0; }
.view-modes,.comparison-modes { padding-right:8px; border-right:1px solid var(--line); }
.tool-group-title { color:var(--muted); font-size:11px; padding:0 4px; }
.compare-toolbar button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:40px; padding:7px 9px; border-radius:6px; font-size:11px; white-space:nowrap; }
.compare-toolbar button svg { width:16px; height:16px; }
.compare-toolbar .canvas-tools { width:auto; justify-content:flex-start; gap:4px; }
.compare-toolbar .icon-button { width:40px; padding:7px; }
.compare-toolbar .zoom-label { min-width:42px; }
.compare-toolbar button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
#crop-hint,#crop-size { text-align:center; }
#crop-apply { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
#crop-cancel { border-color:transparent; background:transparent; color:var(--muted); }
summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.edit-mode-controls { display:grid; gap:10px; margin-bottom:12px; }
.edit-mode-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:5px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.edit-mode-switch button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:80px; padding:12px 6px; border-color:transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; }
.edit-mode-switch button svg { width:24px; height:24px; }
.edit-mode-switch button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.edit-mode-switch button:not(:disabled):hover { color:var(--text); background:var(--raised); }
.edit-mode-switch button[aria-pressed=true]:not(:disabled):hover { color:var(--accent); background:var(--accent-dim); }
#colorize-info { padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
#colorize-info strong { color:var(--text); font-size:13px; }
#colorize-info p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
#colorize-info label { display:block; margin:14px 0 6px; color:var(--text); font-size:12px; font-weight:600; }
#colorize-info select { width:100%; }
.colorize-intensity-row { display:flex; align-items:center; gap:12px; }
.colorize-intensity-row input { flex:1; min-width:0; }
.colorize-intensity-row output { min-width:38px; color:var(--muted); font-size:12px; text-align:right; }
.image-version-actions { display:flex; align-items:center; gap:5px; }
.workspace .image-strip:has(.thumbnails[hidden]) { min-height:0; }
#use-current-image { display:flex; align-items:center; gap:6px; border-color:var(--accent); color:var(--accent); background:var(--accent-dim); font-size:12px; font-weight:600; }
.compare-toolbar .image-version-actions { flex:0 0 auto; }
.retouch-image-picker { width:min(620px,calc(100vw - 24px)); max-height:85dvh; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); }
.retouch-image-picker::backdrop { background:#000b; }
.retouch-image-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.retouch-image-heading h2 { margin:0; font-size:18px; }
#retouch-image-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; }
#retouch-image-choices button { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; padding:8px; }
#retouch-image-choices img { width:100%; height:150px; object-fit:contain; border-radius:5px; background:var(--raised); }
.effect-controls { margin:14px 0 0; }
.effect-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:12px; }
.effect-heading>span { color:var(--muted); font-size:11px; }
.effect-selection { display:flex; align-items:center; gap:6px; }
#effect-open { display:flex; align-items:center; gap:10px; flex:1; min-width:0; min-height:58px; padding:10px; text-align:left; }
#effect-open>span:nth-child(2) { flex:1; min-width:0; }
#effect-open strong,#effect-open small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#effect-open strong { font-size:12px; }
#effect-open small { color:var(--muted); margin-top:3px; font-size:11px; }
#effect-open.active { border-color:var(--accent); background:var(--accent-dim); }
#effect-open.active>span[data-icon] { color:var(--accent); }
#effect-status { margin:8px 0 0; color:var(--muted); font-size:11px; }
#effect-status.error { color:#ed9e91; }
.effect-picker { width:min(680px,calc(100vw - 24px)); max-height:85dvh; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); }
.effect-picker::backdrop { background:#000b; }
.effect-picker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--line); }
.effect-picker-heading h2 { margin:0; font-size:20px; }
.effect-picker-heading p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.effect-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:20px; }
.effect-card { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px; text-align:left; min-width:0; }
.effect-card[aria-pressed=true] { border-color:var(--accent); background:var(--accent-dim); }
.effect-card-preview { display:flex; align-items:center; justify-content:center; height:100px; overflow:hidden; border-radius:5px; background:var(--raised); color:var(--accent); }
.effect-card-preview svg { width:30px; height:30px; }
.effect-card-preview img { width:100%; height:100%; object-fit:cover; }
.effect-card strong { font-size:13px; }
.effect-card small { color:var(--muted); font-size:12px; }
.effects-empty { grid-column:1 / -1; margin:4px 0; color:var(--muted); font-size:13px; }
.body-group .workflow-control { margin:12px 14px; padding:12px; background:var(--bg); }
.retouch-panel { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.retouch-panel h2 { margin:0 0 12px; font-size:16px; }
.studio:has(#inpaint-tools:not([hidden])) .prompt-editor { padding:0 8px; border:0; background:transparent; }
.studio:has(#inpaint-tools:not([hidden])) .exact-prompt { margin:0; }
.inpaint-help { font-size:12px; color:var(--muted); margin:0 0 10px; }
#inpaint-tools>label,#full-image-prompt>label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.mask-overlay { position:absolute; opacity:.5; z-index:3; touch-action:none; pointer-events:none; }
.mask-editing .mask-overlay { pointer-events:auto; cursor:crosshair; }
.mask-editing { touch-action:none; }
.inpaint-reference { border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin-bottom:12px; min-width:0; }
.reference-heading { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; }
.reference-heading>span { color:var(--muted); font-weight:400; }
.reference-content { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
#reference-preview { width:80px; height:80px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.reference-description { flex:1; min-width:160px; font-size:12px; color:var(--muted); }
.reference-description p { margin:0; }
#reference-info { display:block; color:var(--text); margin-top:5px; max-width:100%; overflow-wrap:anywhere; }
#reference-status:not(:empty) { margin-top:5px; color:var(--accent); }
#reference-status.reference-error { color:#f19b91; }
.reference-actions { display:flex; flex-wrap:wrap; gap:6px; }
.reference-actions button { min-height:44px; font-size:12px; }
.reference-dragging { border-color:var(--accent); background:var(--accent-dim); }
@media(max-width:999px) {
}
@media(max-width:359px) {
  .workspace-heading { align-items:flex-start; }
  .image-actions { width:100%; justify-content:flex-end; }
}

/* Character selection shares the atelier's charcoal surfaces and warm accent. */
.app-navigation { display:flex; align-items:stretch; gap:4px; align-self:stretch; }
.app-navigation a { display:flex; align-items:center; min-height:44px; padding:0 15px; border-radius:0; border-bottom:2px solid transparent; color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; }
.app-navigation a:hover { color:var(--text); }
.app-navigation a.active { color:var(--accent); border-bottom-color:var(--accent); }
.character-picker-button { min-height:42px; padding:8px 12px; border-color:var(--accent); color:var(--accent); white-space:nowrap; font-size:13px; font-weight:600; }
.character-picker-button:hover { background:var(--accent-dim); }
.workspace { grid-template-areas:"heading" "image" "tools" "strip" "prompt"; grid-template-rows:auto clamp(280px,48svh,520px) auto auto auto; gap:8px; }
.workspace:has(#character-context:not([hidden])) { grid-template-areas:"heading" "character" "image" "tools" "strip" "prompt"; grid-template-rows:auto auto clamp(280px,48svh,520px) auto auto auto; }
.character-context { grid-area:character; display:flex; align-items:center; gap:12px; min-width:0; padding:9px 12px; border:1px solid var(--accent-border); border-radius:9px; background:linear-gradient(110deg,var(--accent-dim),var(--surface) 55%); }
.character-context-identity { display:flex; align-items:center; gap:10px; min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.character-context-identity:hover:not(:disabled) { border-color:transparent; background:transparent; }
.character-context-identity:hover strong { color:var(--accent); }
.character-context-identity>img { width:45px; height:45px; flex:0 0 45px; border-radius:7px; object-fit:cover; }
.character-context-identity>span:nth-child(2) { min-width:0; }
.character-context-identity strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.character-context-identity small { display:block; margin-top:2px; }
.character-context-identity>[data-icon] { color:var(--muted); }
.character-context-identity>[data-icon] svg { width:14px; height:14px; }
#character-open-library { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:8px; border:1px solid var(--line); border-radius:7px; background:#242629; color:var(--text); text-decoration:none; }
#character-open-library:hover { border-color:var(--accent); color:var(--accent); }
#character-open-library svg { width:17px; height:17px; }
#character-save-status { margin-left:auto; color:var(--accent); font-size:12px; }
.character-picker { width:min(1140px,calc(100vw - 24px)); height:min(86dvh,850px); max-width:none; max-height:none; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); box-shadow:0 28px 90px #000b; }
.character-picker[open] { display:flex; flex-direction:column; }
.character-picker::backdrop { background:#000b; }
.character-picker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,var(--accent-dim),var(--surface) 55%); }
.character-picker-heading span[data-i18n] { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.character-picker-heading h2 { margin:0; font-size:22px; line-height:1.2; }
.character-picker-heading p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.character-picker-heading button { width:38px; height:38px; padding:8px; }
.character-picker-body { display:grid; grid-template-columns:240px minmax(0,1fr); flex:1; min-height:0; }
.character-picker-people { display:flex; flex-direction:column; gap:10px; min-height:0; padding:18px; border-right:1px solid var(--line); }
.character-picker-people label { margin:0; font-size:12px; color:var(--muted); font-weight:600; }
.character-picker-people select,.character-picker-people input { width:100%; min-height:40px; padding:8px 10px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:7px; }
.character-list { display:flex; flex-direction:column; gap:4px; overflow:auto; }
.character-list button { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:6px; text-align:left; border-color:transparent; background:transparent; font-size:13px; }
.character-list button:hover { background:var(--raised); }
.character-list button.active { border-color:var(--accent); background:var(--accent-dim); }
.character-list img { width:38px; height:38px; border-radius:5px; object-fit:cover; }
.character-list span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-list small { color:var(--muted); }
.character-picker-photos { display:flex; flex-direction:column; min-width:0; min-height:0; padding:18px; }
.character-picker-photos h3 { margin:0 0 13px; font-size:15px; font-weight:600; }
.character-picker-gallery { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,45%); flex:1; gap:14px; min-height:0; }
.character-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); grid-auto-rows:max-content; align-content:start; gap:8px; min-height:0; overflow-y:auto; padding:2px 5px 8px 2px; scrollbar-width:thin; }
.character-photo-grid button { position:relative; width:100%; min-width:0; align-self:start; padding:0; aspect-ratio:1; overflow:hidden; border-radius:7px; background:#222428; }
.character-photo-grid button.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.character-photo-grid img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.character-photo-preview { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:#17191b; }
.character-photo-preview-frame { display:flex; align-items:center; justify-content:center; flex:1; min-height:0; overflow:hidden; border-radius:7px; background-color:#1b1d20; background-image:conic-gradient(#222428 25%,transparent 0 50%,#222428 0 75%,transparent 0); background-size:20px 20px; }
.character-photo-preview-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.character-photo-preview-frame>[data-icon] { color:var(--muted); }
.character-photo-preview-frame>[data-icon] svg { width:42px; height:42px; }
.character-photo-preview-detail { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.character-photo-preview-detail>div { min-width:0; }
.character-photo-preview-detail strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.character-photo-preview-detail small { display:block; margin-top:3px; }
#character-photo-use { display:flex; align-items:center; justify-content:center; gap:7px; flex:0 0 auto; min-height:42px; padding:8px 10px; border-color:var(--accent); background:var(--accent); color:var(--accent-text); font-size:12px; font-weight:700; }
#character-photo-use:hover:not(:disabled) { background:var(--accent-hover); }
#character-photo-use svg { width:16px; height:16px; }
#character-picker-status { min-height:28px; margin:0; padding:5px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media(min-width:1000px) and (min-height:600px) {
  .workspace { grid-template-areas:"heading" "tools" "image" "strip" "prompt"; grid-template-rows:auto auto minmax(300px,1fr) auto auto; }
  .workspace:has(#character-context:not([hidden])) { grid-template-areas:"heading" "character" "tools" "image" "strip" "prompt"; grid-template-rows:auto auto auto minmax(300px,1fr) auto auto; }
  .workspace .image-strip { min-height:90px; }
}
.workspace:has(#crop-tools:not([hidden])) { grid-template-areas:"heading" "image" "prompt"; grid-template-rows:auto minmax(240px,1fr) auto; }
.workspace:has(#crop-tools:not([hidden])) .character-context { display:none; }
@media(max-width:650px) {
  .app-header { gap:0; padding:8px 12px 0; }
  .app-header .brand { flex:1; }
  .app-header .header-actions { width:auto; }
  .app-header .header-actions #history-open span[data-i18n] { display:none; }
  .app-navigation { order:3; width:100%; justify-content:center; }
  .app-navigation a { flex:1; justify-content:center; }
  .workspace-heading { flex-wrap:wrap; }
  .image-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .character-picker-button { flex:1; }
  .character-context { gap:8px; }
  .character-picker { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .character-picker-body { display:block; overflow-y:auto; }
  .character-picker-people { gap:7px; padding:12px; border-right:0; border-bottom:1px solid var(--line); }
  .character-list { flex-direction:row; flex:0 0 auto; overflow-x:auto; }
  .character-list { scrollbar-width:none; }
  .character-list::-webkit-scrollbar { display:none; }
  .character-list button { width:92px; min-height:88px; flex:0 0 92px; flex-direction:column; gap:4px; font-size:11px; }
  .character-list img { width:42px; height:42px; border-radius:50%; }
  .character-list small { display:none; }
  .character-picker-photos { display:block; padding:12px; }
  .character-picker-gallery { display:flex; flex-direction:column; gap:9px; }
  .character-photo-preview { position:sticky; top:0; z-index:1; order:-1; height:min(38dvh,300px); padding:7px; box-shadow:0 7px 20px #0008; }
  .character-photo-preview-detail { min-height:44px; }
  .character-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:7px; }
  .compare-toolbar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
  .compare-toolbar .view-modes,.compare-toolbar .comparison-modes,.compare-toolbar .canvas-tools { flex:0 0 auto; }
}

#cancel-generation { width:100%; min-height:40px; margin-top:8px; }


#dropzone { position:relative; }
.mask-dock { position:absolute; z-index:6; top:12px; left:12px; bottom:12px; width:44px; pointer-events:none; }
.mask-dock-bar { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px; max-height:100%; overflow-y:auto; scrollbar-width:none; border:1px solid #ffffff20; border-radius:12px; background:#191c20e8; box-shadow:0 8px 24px #0005; backdrop-filter:blur(12px); pointer-events:auto; }
.mask-dock-bar button { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; min-height:26px; padding:4px; border:1px solid transparent; border-radius:7px; color:#b7bdc5; background:transparent; }
.mask-dock-bar button svg { width:18px; height:18px; }
.mask-dock-bar button:hover:not(:disabled) { background:#ffffff0e; color:var(--text); border-color:#ffffff20; }
.mask-dock-bar button[aria-pressed=true],.mask-dock-bar button[aria-expanded=true] { color:var(--accent); background:var(--accent-dim); border-color:#e5b46770; }
.dock-separator { width:24px; display:block; height:1px; flex-shrink:0; margin:3px 2px; background:#ffffff18; }
.mask-settings-panel { position:absolute; top:0; left:52px; width:230px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#191c20f5; box-shadow:0 8px 28px #0006; pointer-events:auto; }
.mask-settings-panel strong { display:block; font-size:12px; margin-bottom:16px; }
.mask-settings-panel label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); gap:8px; margin:10px 0 6px; }
.mask-settings-panel input[type=range] { width:100%; padding:0; }
.mask-settings-panel input[type=number] { width:80px; }
.mask-stage-status { position:absolute; z-index:4; bottom:14px; left:68px; margin:0; max-width:calc(100% - 86px); padding:5px 8px; border-radius:6px; font-size:11px; color:#d1d5dc; background:#131619c9; pointer-events:none; }
.mask-overlay { opacity:.3; }
@media(max-width:600px) { .mask-dock { left:8px; top:8px; bottom:12px; } .mask-settings-panel { width:210px; } .mask-stage-status { left:62px; font-size:10px; } }

@media(max-width:600px) { .mask-dock-bar button { width:24px; height:24px; min-height:24px; } .mask-dock-bar button { padding:3px; } .mask-dock-bar button svg { width:16px; height:16px; } }

.selection-loading { position:absolute; z-index:7; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 100px); padding:18px 20px; border:1px solid #e8bb7550; border-radius:12px; background:#171a1ff2; box-shadow:0 10px 40px #0008; pointer-events:none; }
.selection-loading strong { display:block; font-size:14px; color:var(--accent); }
.selection-loading small { display:block; margin-top:5px; }
.selection-spinner { width:25px; height:25px; flex:0 0 25px; border:2px solid #e8bb7525; border-top-color:var(--accent); border-radius:50%; animation:selection-spin .9s linear infinite; }
.mask-dock-bar button.selection-pending:disabled { opacity:1; color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
#dropzone[aria-busy=true] .mask-overlay { opacity:.12; }
@keyframes selection-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .selection-spinner { animation:none; } }
@media(max-width:600px) { .selection-loading { left:calc(50% + 20px); padding:12px; gap:10px; } .selection-loading strong { font-size:12px; } .selection-loading small { font-size:10px; } }

.mask-brush-preview { position:absolute; z-index:4; overflow:hidden; pointer-events:none; }
.mask-brush-preview span { position:absolute; transform:translate(-50%,-50%); box-sizing:border-box; border:1px solid #ffce83; border-radius:50%; background:#efb96830; box-shadow:0 0 0 1px #0009; }
.mask-brush-preview[data-tool=eraser] span { border-color:#a8d9ff; background:#65b6f530; }

.retouch-mode-controls { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:8px; }
.retouch-mode-controls p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }

.retouch-strength-controls { margin:12px 0 18px; }
.retouch-strength-controls label { display:flex; justify-content:space-between; gap:12px; }
.retouch-strength-controls output { color:var(--accent); }
.retouch-strength-controls input { width:100%; }
.retouch-strength-controls p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }