@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:#e6e8ec;background:#0f1115;font-synthesis:none;font-smooth:always;--bg:#0f1115;--panel:#171a20;--panel2:#1b1e25;--border:#2a2d35;--ink:#edf0f3;--muted:#9297a4;--accent:#a5a3ff;--accent2:#807de8}*{box-sizing:border-box}body{margin:0;min-width:340px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}.hidden{display:none!important}.topbar{height:68px;background:#14161b;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:26px;height:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-12deg)}.brand-mark span{background:var(--accent);border-radius:3px}.brand-mark span:nth-child(2){opacity:.63}.brand-mark span:nth-child(3){opacity:.38}.brand-mark span:nth-child(4){opacity:.84}.brand-name{font-family:Manrope,sans-serif;font-weight:800;font-size:22px;letter-spacing:-1.3px}.brand-dot{color:var(--accent)}.brand-divider{height:19px;width:1px;background:#3d4149;margin:0 3px}.brand-subtitle{font-size:12px;font-weight:600;color:#858a97;letter-spacing:.2px}.topbar-actions{display:flex;align-items:center;gap:14px}.local-tag{font-size:11px;color:#adb3bf;display:flex;align-items:center;gap:7px;padding-right:8px}.local-led{width:6px;height:6px;background:#8ac8a0;border-radius:100%;box-shadow:0 0 0 3px #8ac8a01c}.btn{border:1px solid transparent;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:12px;padding:11px 14px;white-space:nowrap;transition:background .15s,border .15s}.btn-primary{background:var(--accent);color:#161523}.btn-primary:hover{background:#bcbbff}.btn-quiet{background:transparent;color:#a8adbb}.btn-quiet:hover{background:#252832;color:#f8f8fa}.btn-outline{border-color:#383b45;background:#24272f;color:#e8e9ef}.btn-outline:hover{border-color:var(--accent);background:#30323f}.btn.compact{padding:8px 9px;font-weight:600}.full{width:100%}.workspace{display:grid;grid-template-columns:272px minmax(360px,1fr) 278px;height:calc(100vh - 68px);min-height:550px}.left-sidebar,.right-sidebar{background:#191b21;overflow:auto;scrollbar-width:thin;scrollbar-color:#3c3d46 transparent;display:flex;flex-direction:column}.left-sidebar{border-right:1px solid var(--border)}.right-sidebar{border-left:1px solid var(--border)}.panel-top,.inspector-top{padding:25px 20px 8px}.eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#9392d7}.panel-top h2,.section-heading h2,.inspector-top h2{font-family:Manrope,sans-serif;margin:9px 0 5px;font-size:17px;letter-spacing:-.5px}.panel-top p,.inspector-top p{font-size:12px;line-height:1.65;color:#8f94a3;margin:6px 0 8px}.upload-box{margin:9px 16px 0;border:1px dashed #40434e;border-radius:11px;background:#20232b;padding:13px 11px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:border .2s,background .2s}.upload-box:hover,.upload-box.drag{border-color:var(--accent);background:#292c38}.upload-box.ready{border-style:solid;border-color:#4e6658}.upload-icon{display:grid;place-items:center;width:35px;height:35px;flex:none;border:1px solid #4a4c57;background:#292c36;border-radius:9px;color:#b6b5ff;font-size:18px}.upload-copy{min-width:0;flex:1}.upload-copy strong,.upload-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-copy strong{font-size:12px}.upload-copy small{font-size:10px;color:#9197a4;margin-top:4px}.upload-right{color:#b0afef;font-size:18px}.section-rule{height:1px;flex:none;background:#2a2d34;margin:22px 18px}.section-heading{padding:0 20px;display:flex;align-items:center;justify-content:space-between}.section-heading h2{margin-bottom:0}.count-tag{font:600 11px 'DM Sans';color:#a9acc1;background:#282b34;padding:2px 6px;border-radius:5px;margin-left:5px}.icon-btn{background:transparent;border:1px solid transparent;color:#a9adbb;border-radius:8px;width:31px;height:31px;font-size:19px;display:inline-grid;place-items:center}.icon-btn:hover{background:#30333d;color:#fff}.icon-btn.small{width:27px;height:27px;border:1px solid #383b45;background:#252831}.sidebar-hint{font-size:11px;line-height:1.55;color:#898f9c;padding:12px 20px}.group-list{padding:4px 12px 14px;flex:1;overflow:auto;min-height:160px}.empty-groups{border:1px dashed #363943;border-radius:11px;padding:28px 16px;text-align:center;margin:6px 3px}.empty-groups span{font-size:31px;color:#707487}.empty-groups strong{display:block;font-size:12px;margin:12px 0 5px}.empty-groups p{font-size:11px;color:#818797;line-height:1.5;margin:0}.region-group{background:#22252d;border:1px solid #343741;border-radius:11px;margin-bottom:9px;overflow:hidden}.group-head{padding:11px 10px;display:flex;align-items:center;gap:8px;cursor:pointer}.group-head:hover{background:#282b34}.group-icon{width:27px;height:27px;flex:none;border-radius:7px;display:grid;place-items:center;background:#383747;color:#b8b6ff;font-size:14px}.group-name{flex:1;font-size:12px;font-weight:700}.group-count{font-size:10px;color:#8f94a1}.group-options{border-top:1px solid #333640;padding:5px}.variant-row{display:flex;align-items:center;gap:8px;border-radius:7px;padding:8px 7px;cursor:pointer;font-size:11px;color:#a9adbb}.variant-row:hover{background:#30343e}.variant-row.selected{background:#363449;color:#f2f1ff}.variant-dot{width:12px;height:12px;border:1.5px solid #6d7280;border-radius:50%;flex:none}.variant-row.selected .variant-dot{border:4px solid #b3afff;background:#191a24}.variant-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.variant-action{font-size:11px;color:#a3a7b7;border:0;background:none;padding:2px 4px}.variant-action:hover{color:#fff}.group-extra{padding:8px;border-top:1px solid #333640;display:flex;gap:7px}.small-action{border:1px solid #474a56;color:#a6abba;background:#2a2d37;border-radius:6px;padding:5px 7px;font-size:10px}.small-action:hover{color:white;border-color:var(--accent)}.left-footer{padding:14px 17px 18px;border-top:1px solid #2a2d34}.microcopy{text-align:center;color:#777c8a;font-size:10px;line-height:1.45;margin:12px 0 0}.plus-circle{font-size:17px;line-height:0}.main-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#101217}.canvas-header{height:52px;border-bottom:1px solid #272a32;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:8px}.canvas-title{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:700}.canvas-title>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-mark{height:7px;width:7px;background:#9d9aff;box-shadow:0 0 0 4px #9d9aff1e;border-radius:50%;flex:none}.dim-label{font-weight:500;color:#747987;font-size:10px;white-space:nowrap}.canvas-actions{display:flex;align-items:center;gap:6px}.vert-line{height:19px;width:1px;background:#383b45;margin:0 8px}.zoom-label{font-size:11px;color:#b1b4c1;min-width:30px;text-align:center}.tool-row{height:51px;flex:none;background:#17191f;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid #272a32;gap:9px}.toolset{display:flex;gap:4px}.tool{border:0;background:transparent;color:#969cab;border-radius:7px;padding:8px;font-size:12px;display:flex;align-items:center;gap:6px}.tool.active{color:#dbd9ff;background:#363348}.tool:hover{color:#fff;background:#30333d}.tool span{font-size:11px}.brush-size{font-size:11px;color:#999dac;display:flex;align-items:center;gap:8px}.brush-size input{accent-color:var(--accent);width:80px;height:4px}.brush-size span{min-width:22px}.tool-spacer{flex:1}.canvas-viewport{background-color:#111318;background-image:radial-gradient(#31333c 0.75px,transparent .75px);background-size:19px 19px;flex:1;min-height:0;overflow:auto;position:relative;display:flex;align-items:center;justify-content:center;padding:26px}.canvas-wrap{position:relative;line-height:0;box-shadow:0 17px 65px #0009;flex:none;max-width:none}.canvas-wrap canvas{display:block}.canvas-wrap #overlayCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-wrap.pan #overlayCanvas{cursor:grab}.canvas-wrap.brush #overlayCanvas,.canvas-wrap.eraser #overlayCanvas{cursor:crosshair}.welcome{max-width:560px;text-align:center;align-self:center;margin:auto;padding:24px;display:flex;flex-direction:column;align-items:center}.welcome-graphic{height:164px;width:240px;position:relative;margin:4px auto 17px}.mock-frame{position:absolute;left:50%;top:23px;width:137px;height:112px;border-radius:13px;border:1px solid #69659b;background:linear-gradient(135deg,#8b82b7,#4c495e 55%,#252b3d);box-shadow:0 14px 24px #0004;transform:translateX(-50%) rotate(-9deg)}.mock-frame.f2{background:linear-gradient(125deg,#ceaa8a,#564660 65%,#323248);transform:translateX(-50%) translate(20px,10px) rotate(7deg)}.mock-frame.f3{background:linear-gradient(135deg,#ddd5dd,#73739c 55%,#3e415a);transform:translateX(-50%) translate(-8px,20px) rotate(-1deg)}.welcome-center{width:48px;height:48px;border-radius:15px;background:#181827;border:1px solid #9c98e9;box-shadow:0 0 25px #827afc63;position:absolute;left:calc(50% - 24px);top:64px;display:grid;place-items:center;font-size:31px;color:#d4d1ff}.welcome-label{font-weight:800;letter-spacing:2px;color:#a9a4fd;font-size:10px}.welcome h1{font-family:Manrope,sans-serif;font-size:clamp(30px,3.2vw,43px);font-weight:800;letter-spacing:-2px;line-height:1.21;margin:13px 0 14px;color:#f2f2f5}.welcome h1 em{font-style:normal;color:#b6b0ff}.welcome p{font-size:13px;color:#999fae;line-height:1.75;max-width:380px;margin:0}.welcome-actions{display:flex;gap:9px;margin:25px 0 31px}.welcome-steps{display:flex;align-items:center;gap:8px;color:#737888;font-size:10px;white-space:nowrap}.welcome-steps i{width:13px;height:1px;background:#464952}.canvas-foot{height:37px;flex:none;border-top:1px solid #292c34;background:#17191f;color:#808693;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-size:10px;gap:8px}.bottom-shortcut{white-space:nowrap}kbd{font:inherit;color:#bec2cc;border:1px solid #4c4f58;border-radius:4px;padding:2px 4px;margin:0 2px}.right-sidebar .setting-card{padding:15px 18px;border-bottom:1px solid #2b2e36}.setting-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.setting-card strong{font-size:12px}.setting-card p{font-size:11px;color:#8b91a0;line-height:1.58;margin:8px 0 0}.setting-heading span{font-size:10px;color:#b9b5ff}.wide-range{accent-color:#a39eff;width:100%;margin:18px 0 1px}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#757b8a}.toggle-setting{display:flex;justify-content:space-between;gap:12px;align-items:center}.toggle-setting>div{flex:1}.switch{position:relative;display:inline-flex;flex:none;width:31px;height:18px}.switch input{opacity:0;width:0;height:0;position:absolute}.switch span{border-radius:15px;background:#555965;position:absolute;inset:0;transition:.2s}.switch span:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:white;transition:.2s}.switch input:checked+span{background:#8b86e4}.switch input:checked+span:before{transform:translateX(13px)}.right-sidebar .section-rule{margin:18px}.prompt-preview{margin:13px 17px;background:#21242b;border:1px solid #30343d;border-radius:10px;padding:12px;max-height:185px;overflow:auto}.prompt-preview p{font-size:10px;color:#9fa5b5;line-height:1.68;white-space:pre-wrap;margin:0}.right-sidebar>.btn{margin:0 17px}.inspector-bottom{display:flex;gap:10px;padding:18px;margin-top:auto}.hint-icon{color:#b9b4fb;font-size:19px}.inspector-bottom p{font-size:11px;line-height:1.55;color:#818999;margin:0}.inspector-bottom strong{color:#bbc0d1}.processing{position:absolute;inset:0;background:#101217cc;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:5}.processing strong{font-size:13px}.processing small{font-size:11px;color:#9299aa}.spinner{width:35px;height:35px;border-radius:50%;border:3px solid #41404f;border-top-color:#b5b0ff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;z-index:50;bottom:26px;left:50%;transform:translateX(-50%);background:#302e42;border:1px solid #736caf;padding:12px 19px;color:#e8e5ff;border-radius:10px;box-shadow:0 10px 50px #0008;font-size:12px;max-width:min(540px,90vw);text-align:center}.compare #compositeCanvas{filter:none}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:#353943;border-radius:8px}@media(max-width:1120px){.workspace{grid-template-columns:240px minmax(360px,1fr)}.right-sidebar{display:none}.brand-subtitle{display:none}}@media(max-width:730px){.topbar{height:60px;padding:0 12px}.brand-divider,.local-tag{display:none}.topbar-actions{gap:3px}.workspace{height:calc(100vh - 60px);min-height:670px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(480px,1fr) 225px}.main-panel{grid-row:1;grid-column:1}.left-sidebar{grid-row:2;grid-column:1;border-right:0;border-top:1px solid var(--border)}.panel-top,.left-sidebar .upload-box,.left-sidebar .section-rule,.left-sidebar .sidebar-hint,.left-footer,.left-sidebar .panel-top p{display:none}.left-sidebar .section-heading{padding:12px 15px}.left-sidebar .section-heading h2{font-size:14px}.group-list{display:flex;gap:7px;min-height:0;overflow:auto;padding:4px 12px}.region-group{min-width:210px;max-width:240px}.canvas-header{height:42px}.canvas-actions .btn,.canvas-actions .vert-line{display:none}.tool-row{gap:4px;padding:0 6px}.tool{padding:7px 5px}.tool span{display:none}.brush-size input{width:65px}.bottom-shortcut{display:none}.welcome-steps{display:none}.welcome-graphic{height:115px;transform:scale(.72);margin:-15px 0 0}.welcome h1{font-size:33px}.welcome p{font-size:12px}.welcome-actions{margin:17px 0}.canvas-viewport{padding:12px}}

/* Mosaic v0.2: manual mask workflow */
.selection-modes{display:flex;gap:3px;background:#22252d;padding:3px;border:1px solid #353845;border-radius:9px;flex:none}
.mode{border:0;background:transparent;color:#9fa4b1;font-size:11px;font-weight:700;padding:7px 9px;border-radius:6px;white-space:nowrap}
.mode:hover{color:#fff;background:#323641}
.mode.active{color:#e9e7ff;background:#4c486c;box-shadow:inset 0 0 0 1px #69648b}
.pending-banner{margin:9px 14px 8px;padding:9px 10px;background:#322d48;border:1px solid #7570a1;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#eae7ff}
.pending-banner span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.comparing{color:#ffffff!important;background:#514c78!important;border-color:#a8a2f9!important}
#commitBtn{padding:7px 10px}
#commitBtn kbd{border:0;color:#5f5a83;background:#ffffff82}
#quickMasterBtn,#quickRevitBtn{padding:8px 9px}
@media(max-width:1270px){.brush-size{display:none}.tool-row{gap:4px}.tool-row .vert-line{margin:0 2px}.mode{padding:7px 6px}}
@media(max-width:730px){
 .topbar{gap:5px}.topbar-actions{gap:1px}.topbar .btn{padding:8px 6px;font-size:10px}.topbar .brand-name{font-size:20px}
 .canvas-actions #beforeBtn{display:inline-flex!important;max-width:124px;font-size:10px;white-space:nowrap}
 .canvas-actions #zoomFit{display:none}.canvas-actions .vert-line{display:none}
 .canvas-header{padding:0 8px;gap:4px}.canvas-title{font-size:10px;gap:4px}.dim-label{display:none}
 .tool-row{overflow-x:auto;scrollbar-width:thin;justify-content:flex-start;min-height:55px;height:55px;gap:5px}
 .selection-modes{gap:1px}.mode{font-size:10px;padding:7px 5px}.toolset{flex:none}
 .tool-row .tool-spacer{display:none}.tool-row #clearSelectionBtn{display:none}
 .tool-row #commitBtn{flex:none}.brush-size{display:none}
 .canvas-actions .icon-btn{width:25px}
 .left-sidebar .sidebar-hint{display:block;padding:4px 13px 8px;font-size:10px}
 .left-sidebar .group-list{overflow:auto}.left-sidebar .pending-banner{min-width:200px}
 .left-sidebar .section-heading{padding:10px 13px 4px}
 .workspace{grid-template-rows:minmax(420px,1fr) 245px}
}

/* Premium preview: masked edit prompting and non-destructive Harmonize history */
.premium-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid #6b5c9b;background:#2b2440;color:#d5c5ff;padding:6px 9px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.btn-premium{background:linear-gradient(135deg,#bcb1ff,#8a80e8);border:1px solid #b4a8ff;color:#161421}
.btn-premium:hover{background:linear-gradient(135deg,#ded4ff,#aaa0f6)}
.project-intent{margin:13px 16px 0;padding:13px 12px;background:#252333;border:1px solid #494264;border-radius:10px;display:flex;align-items:center;gap:8px}
.project-intent>div{min-width:0;flex:1}
.project-intent p{margin:6px 0 0;font-size:11px;line-height:1.5;color:#c2bcd9;max-height:64px;overflow:auto;overflow-wrap:anywhere}
.project-intent .small-action{flex:none}
.history-heading{padding-top:9px}
.history-heading h2{font-size:13px;color:#d7d6e6}
.premium-setting{background:#201e2c}
.premium-setting strong{color:#d7c8ff}
.premium-setting .btn{margin-top:14px}
.awaiting-ai{border:1px dashed #8b79c6;flex-wrap:wrap}
.awaiting-ai .variant-text{color:#d3c1ff}
.add-ai-result{margin-left:auto;background:#444064;border-color:#7970b1;color:#fff}
.history-section-label{display:flex;justify-content:space-between;gap:5px;margin:17px 4px 9px;font-size:10px;font-weight:800;letter-spacing:.7px;color:#9c9fae}
.history-section-label span{font-weight:500;letter-spacing:0;color:#777c8c}
.archive-node{margin:6px 0 9px calc(var(--history-depth,0) * 7px);border:1px solid #45454e;border-radius:10px;background:#202127;overflow:hidden;opacity:.87}
.archive-node.archive-previewing{opacity:1;border-color:#a499f4;box-shadow:inset 0 0 0 1px #8172b6}
.archive-head{display:flex;align-items:center;gap:8px;padding:11px 9px;background:#28292e;border:0;width:100%;color:#c4c5cf;text-align:left;cursor:pointer}
.archive-head:hover{background:#33343d}
.archive-icon{display:grid;place-items:center;background:#393a42;border-radius:6px;width:24px;height:24px;color:#a9a6ba;flex:none}
.archive-title{flex:1;font-size:11px;font-weight:700}
.archive-title small{display:block;font-size:9px;line-height:1.6;color:#858797;font-weight:500}
.archive-lock{color:#7c8090}
.archive-body{padding:9px 8px 6px}
.archive-actions{display:flex;flex-wrap:wrap;gap:5px}
.archive-actions .small-action{font-size:10px}
.small-action.active-action{background:#494568;color:#e9e2ff;border-color:#968adb}
.archive-note{font-size:10px;line-height:1.5;color:#898a99;margin:9px 3px}
.archived-region{border:1px solid #3a3c46;border-radius:8px;margin-bottom:8px;padding:6px;background:#22232a}
.archived-region-name{color:#b5b5c4;font-weight:700;font-size:10px;padding:4px 3px 7px}
.archived-region-name span{float:right;color:#888a97;font-weight:500}
.archived-option{font:inherit;border:0;background:none;color:#8e919e;padding:7px 5px;display:flex;align-items:center;gap:7px;width:100%;border-radius:6px;text-align:left;cursor:pointer;font-size:10px}
.archived-option:hover,.archived-option.selected{background:#353541;color:#e6e1f2}
.archived-option.selected .variant-dot{border:4px solid #b3aaff}
.archived-option span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mosaic-dialog{background:#1b1c25;color:#f0effa;border:1px solid #656187;border-radius:17px;padding:0;box-shadow:0 24px 95px #000b;width:min(490px,calc(100vw - 26px));max-height:min(90vh,760px);overscroll-behavior:contain}
.mosaic-dialog::backdrop{background:#08090fcb;backdrop-filter:blur(7px)}
.mosaic-dialog form{display:flex;flex-direction:column;padding:24px;gap:12px}
.dialog-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#c2b3ff}
.mosaic-dialog h2{font:800 22px Manrope,sans-serif;letter-spacing:-.6px;margin:0}
.mosaic-dialog p{margin:0 0 5px;color:#a4a6b7;line-height:1.6;font-size:12px}
.mosaic-dialog label{font-size:11px;font-weight:700;color:#dddcf0}
.mosaic-dialog textarea{font:12px/1.6 'DM Sans',sans-serif;width:100%;min-height:95px;resize:vertical;border:1px solid #484a60;border-radius:10px;background:#11141d;color:#f6f4fd;padding:12px;outline:none}
.mosaic-dialog textarea:focus{border-color:#b1a3ff;box-shadow:0 0 0 3px #aca2ff20}
.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:3px}
@media(max-width:1120px){.premium-setting{display:none}}
@media(max-width:730px){
 .premium-pill{display:none}
 .project-intent{margin:4px 11px 0;padding:8px}
 .left-sidebar .project-intent{display:none}
 .left-sidebar .history-heading{display:none}
 .group-list{align-items:stretch}
 .archive-node{min-width:220px;max-width:260px;max-height:100%;overflow:auto;margin-top:0}
 .history-section-label{min-width:120px;align-self:center;white-space:normal}
 .mosaic-dialog form{padding:18px}
 .tool-row .btn-premium{flex:none;font-size:10px;padding:8px 8px}
}

/* Shape tools remain reachable on narrower screens. */
.toolset{flex:none}
.tool[data-tool="rect"],.tool[data-tool="ellipse"]{white-space:nowrap}
@media(max-width:1100px){.tool-row{overflow-x:auto;scrollbar-width:thin}.tool-row .tool-spacer{min-width:4px}}


/* Compact inspector + direct canvas layer transforms */
.inspector-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px 5px;color:#9294b1;font-size:10px;font-weight:800;letter-spacing:1.2px;flex:none}
.inspector-bar .icon-btn{width:28px;height:28px;font-size:17px}
.right-sidebar .inspector-top{padding:6px 16px 5px}
.right-sidebar .inspector-top h2{font-size:15px;margin:5px 0}
.right-sidebar .inspector-top p{font-size:11px;line-height:1.5}
.right-sidebar .setting-card{margin:6px 12px;padding:11px 12px}
.right-sidebar .setting-card p{font-size:11px;line-height:1.5;margin:5px 0 0}
.right-sidebar .prompt-preview{max-height:160px;overflow:auto}
.right-sidebar #copyPromptSecondary{width:calc(100% - 24px);margin:8px 12px}
.right-sidebar .inspector-bottom{margin-top:auto}
.canvas-wrap.transform #overlayCanvas{cursor:move}
#resetTransformBtn{white-space:nowrap}
.workspace.inspector-collapsed{grid-template-columns:272px minmax(360px,1fr) 44px}
.right-sidebar.is-collapsed{overflow:hidden;align-items:center}
.right-sidebar.is-collapsed > :not(.inspector-bar){display:none!important}
.right-sidebar.is-collapsed .inspector-bar{height:100%;width:100%;padding:10px 0;justify-content:flex-end;flex-direction:column-reverse;gap:12px}
.right-sidebar.is-collapsed .inspector-bar span{writing-mode:vertical-rl;letter-spacing:2px}
@media(max-width:1120px){.workspace.inspector-collapsed{grid-template-columns:240px minmax(360px,1fr)}}
@media(max-width:730px){.workspace.inspector-collapsed{grid-template-columns:minmax(0,1fr)}.tool[data-tool="transform"]{flex:none}}

/* OpenAI API key entry and region guide controls */
#apiKeyDialog input{width:100%;box-sizing:border-box;margin:7px 0 15px;background:#191d26;color:#f4f1ff;border:1px solid #495065;border-radius:8px;padding:12px 13px;font:inherit}
#apiKeyDialog input:focus{outline:2px solid #9c89ed;outline-offset:2px}
#apiKeyDialog label{display:block;font-weight:650;font-size:12px;margin-top:6px}
#apiKeyDialog .private-key-note{font-size:11px;color:#9da3b0;line-height:1.55}
#apiKeyDialog .premium-login-error{color:#ff9c91;font-size:12px;min-height:18px}
#premiumStatusBtn.premium-active{color:#b4a5ff}
#regionGuidesBtn[aria-pressed="true"]{color:#c3b6ff;background:rgba(152,121,240,.12)}
#apiKeyDialog .dialog-actions{flex-wrap:wrap}

/* V0.3 – outside-image lasso drafts and contextual Magic Wand */
.canvas-wrap .selection-draft{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.canvas-wrap .selection-draft path{stroke-linecap:round}
.canvas-viewport.is-selecting{touch-action:none}
.canvas-viewport.is-selecting,.canvas-wrap #overlayCanvas{cursor:default}
.canvas-viewport:not(.is-selecting){cursor:default}
.canvas-viewport .canvas-wrap.pan #overlayCanvas,.canvas-viewport:has(.canvas-wrap.pan){cursor:grab}
.canvas-viewport:has(.canvas-wrap.pan:active){cursor:grabbing}
.canvas-wrap.brush #overlayCanvas,.canvas-wrap.eraser #overlayCanvas{cursor:crosshair}
.canvas-wrap.transform #overlayCanvas{cursor:move}
.wand-options{display:flex;align-items:center;gap:7px;color:#c4c5d1;font-size:11px;white-space:nowrap;flex:none}
.wand-options input{width:76px;accent-color:#a5a3ff}
.wand-options output{min-width:19px;font-variant-numeric:tabular-nums}
@media(max-width:730px){.wand-options{gap:3px}.wand-options input{width:52px}}

/* V0.3 - simple, discoverable grouped tool bar */
.tool-row{display:flex;align-items:center;gap:8px;min-height:64px;height:64px;padding:5px 11px;overflow:hidden}
.toolbar-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#343848 transparent}
.toolbar-right{display:flex;align-items:center;gap:7px;flex:none;border-left:1px solid #3b3e4b;padding-left:8px}
.toolbar-cluster{display:flex;flex-direction:column;justify-content:center;flex:none;gap:3px}
.toolbar-caption{font-size:9px;font-weight:800;color:#777f91;letter-spacing:1.2px;line-height:1;padding-left:6px}
.toolbar-divider{width:1px;height:28px;background:#333743;flex:none}
.toolbar-utility,.toolbar-primary{display:flex;align-items:center;gap:3px;flex:none}
.toolbar-primary{gap:5px}
.toolbar-primary .btn-premium{white-space:nowrap}
.toolbar-utility .icon-btn{width:29px;height:30px}
.toolbar-utility #projectPromptToolbarBtn{display:none}
.toolbar-utility #clearSelectionBtn{font-weight:500}
.toolbar-context{display:flex;align-items:center;flex:none}
.toolbar-cluster .toolset{gap:2px}
.toolbar-cluster .tool{padding:6px 7px}
.toolbar-cluster .mode{padding:6px 8px}
.toolbar-cluster .selection-modes{padding:2px}
.toolbar-primary #promptAreaBtn{background:#40395b;border-color:#7664b7;color:#eae4ff}
.toolbar-primary #harmonizeBtn{background:#7d72d9;color:#131121;border-color:#a89df4}
.toolbar-primary #harmonizeBtn:hover{background:#9d94ef}
.inspector-top strong{color:#b4aaff}
.right-sidebar .inspector-top p{line-height:1.75}
.inspector-advanced{padding:3px 12px 12px;border-top:1px solid #2b2e36}
.inspector-advanced summary{cursor:pointer;font-size:11px;color:#b5afee;font-weight:700;padding:11px 4px}
.inspector-advanced[open] summary{color:#ddd9ff}
.inspector-advanced .section-heading{padding:0 5px}
.inspector-advanced .prompt-preview{margin:9px 0}
.inspector-advanced #copyPromptSecondary{margin:0;width:100%}
@media(max-width:1270px){
 .tool-row{gap:5px}
 .toolbar-left{gap:6px}
 .toolbar-right{gap:3px}
 .toolbar-cluster .tool{padding:6px}
 .toolbar-primary .btn{padding:7px}
 .toolbar-caption{font-size:8px}
 .toolbar-utility #clearSelectionBtn{display:none}
}
@media(max-width:900px){
 .toolbar-utility #regionGuidesBtn{display:none}
 .toolbar-left{gap:4px}
 .toolbar-right #undoBtn,.toolbar-right #redoBtn{display:none}
}
@media(max-width:730px){
 .tool-row{height:53px;min-height:53px;padding:3px 5px;overflow:hidden;gap:4px}
 .toolbar-left{gap:6px;overflow-x:auto;scrollbar-width:none}
 .toolbar-cluster{gap:0}
 .toolbar-caption,.toolbar-divider{display:none}
 .toolbar-cluster .tool{padding:7px}
 .toolbar-cluster .tool span{display:none}
 .toolbar-cluster .mode{font-size:10px;padding:6px}
 .toolbar-context .wand-options{font-size:10px}
 .toolbar-right{padding-left:4px;gap:2px}
 .toolbar-right #harmonizeBtn{padding:7px 6px;font-size:10px}
 .toolbar-right #promptAreaBtn{padding:7px 6px;font-size:10px}
 .toolbar-right #commitBtn{padding:7px 5px;font-size:10px}
 .toolbar-utility{display:none}
 .canvas-foot{padding:0 10px}
}

/* Final fit / usability refinements */
@media(min-width:1000px){
  #quickMasterBtn,#quickRevitBtn,.premium-pill,.local-tag{display:none}
  .workspace{grid-template-columns:250px minmax(360px,1fr) 248px}
  .workspace.inspector-collapsed{grid-template-columns:250px minmax(360px,1fr) 44px}
  .canvas-viewport{padding:54px}
}
@media(max-width:1120px) and (min-width:731px){
  .workspace{grid-template-columns:226px minmax(360px,1fr)}
  .workspace.inspector-collapsed{grid-template-columns:226px minmax(360px,1fr)}
}
@media(max-width:730px){
  .canvas-viewport{padding:30px}
}
.canvas-viewport:has(.canvas-wrap.pan){touch-action:none}
.workflow-steps{margin:8px 0 5px;padding-left:21px;display:flex;flex-direction:column;gap:10px;color:#9ba0b0;font-size:11px;line-height:1.55}
.workflow-steps li::marker{color:#9d91ec;font-weight:800}
.workflow-steps strong{color:#d7d1fd}

/* Reusable semantic regions */
.region-group.region-focused{outline:1px solid #8e82d9}
.group-head[role="button"]{cursor:pointer}
.group-head[role="button"]:hover{background:#373341}
.group-head .group-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-details{display:flex;gap:5px;align-items:center;padding:1px 7px 8px}
.group-badge{color:#bfb6db;font-size:10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-category{background:#232630;border:1px solid #484959;border-radius:5px;color:#d2d1dc;max-width:96px;font-size:10px;padding:4px 2px}
.group-details .variant-action{flex:none;padding:4px}
.region-rename-input{font-size:11px;font-weight:600;color:#fff;background:#181923;border:1px solid #a99bf2;border-radius:5px;width:100%;min-width:40px;box-sizing:border-box;padding:4px}
.variant-text small{color:#878c99;font-size:9px}
.region-ghost-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.group-hover-hint{position:absolute;z-index:10;top:0;left:0;background:#252630ed;color:#f2edff;border:1px solid #a399ca70;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:700;box-shadow:0 5px 16px #0006;pointer-events:none;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}

/* Region-first editing: source previews, onboarding, contextual generation. */
.source-thumbnail{width:53px;height:51px;object-fit:cover;border-radius:7px;border:1px solid #575367;flex:none}
.upload-box.ready .upload-icon{display:none}
.base-prompt-shortcut{padding:5px 0 0 2px}
.base-prompt-shortcut .small-action{font-size:10px;color:#aaa3e4}
.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}
.welcome-choice{max-width:720px;width:min(100%,720px);margin:auto}
.welcome-drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:29px auto 25px;width:100%}
.start-drop-zone{min-height:212px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1.5px dashed #72679c;background:linear-gradient(150deg,#252535,#181920);border-radius:15px;color:#f6f3ff;cursor:pointer;font:inherit;transition:border-color .18s,background .18s,transform .18s}
.start-drop-zone:hover,.start-drop-zone.is-dragover{border-color:#b7a5ff;background:#353048;transform:translateY(-2px)}
.start-drop-zone strong{font-size:20px}
.start-drop-zone small{font-size:12px;color:#adb0bd;max-width:185px;line-height:1.5}
.start-drop-icon{font-size:32px;color:#bcb1ff}
.start-drop-cta{font-weight:700;font-size:11px;color:#b7adf9;margin-top:9px}
.quick-area-prompt{position:fixed;z-index:20;overflow-y:auto;overscroll-behavior:contain;width:270px;max-width:calc(100% - 24px);display:flex;flex-direction:column;gap:8px;padding:12px;background:#1e202ced;border:1px solid #998be2;border-radius:12px;box-shadow:0 18px 55px #0009;color:#eeeaff;backdrop-filter:blur(16px)}
.quick-area-prompt.hidden{display:none}
.quick-area-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800}
.quick-area-title button{background:none;border:0;color:#b8b1d7;cursor:pointer;font-size:20px}
.quick-area-prompt textarea{width:100%;resize:vertical;box-sizing:border-box;min-height:62px;background:#131620;border:1px solid #4b4765;border-radius:7px;color:#f6f4ff;font:inherit;font-size:12px;padding:9px}
.quick-area-prompt .btn{align-self:flex-end}
.region-group .group-options{display:flex;flex-direction:column}
.region-group .variant-row[data-master-version]{background:rgba(122,113,212,.07)}
.region-option-prompt{display:flex;align-items:stretch;gap:5px;padding:7px;border-top:1px solid #393944;background:#252631}
.region-option-prompt input{flex:1;min-width:30px;background:#181923;border:1px solid #8276d1;border-radius:6px;color:#fff;font:inherit;font-size:11px;padding:8px}
.region-option-prompt button{font-size:10px;padding:4px 7px;border:1px solid #7668cb;border-radius:6px;color:#eee9ff;background:#51467f;cursor:pointer}
.group-add-option{font-size:17px!important;color:#b9adff!important}
@media(max-width:730px){.welcome-choice{padding:20px 12px}.welcome-drop-grid{gap:9px}.start-drop-zone{min-height:180px;padding:15px 7px}.start-drop-zone strong{font-size:17px}.start-drop-zone small{font-size:10px}.quick-area-prompt{width:240px}}

/* AI actions are always discoverable. They request an API key when invoked. */
/* Source alignment + AI reference imagery */
.source-actions{margin:10px 16px 0;display:flex;flex-direction:column;gap:7px}
.source-actions .btn{justify-content:center;min-height:35px;white-space:normal;font-size:11px}
.source-actions #alignSourcesBtn{background:#292733;border-color:#5e567d;color:#dbd5ff}
.source-actions #generateMasterBtn{background:#54488d;border-color:#9383d6;color:#faf8ff}
.source-actions #generateMasterBtn:hover{background:#6b5ba8}
.reference-upload-action{display:inline-flex!important;align-items:center;justify-content:center;width:max-content;max-width:100%;padding:7px 9px;margin:8px 0 5px;border-radius:7px;border:1px dashed #7267a0;color:#d5c9ff;background:#27243a;font-size:11px;font-weight:700;cursor:pointer}
.reference-upload-action:hover{border-color:#beb0ff;background:#36304b}
.reference-previews{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:0;max-width:100%}
.reference-thumb{width:49px;height:49px;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid #6c5f8e;border-radius:7px;overflow:hidden;background:#252432}
.reference-thumb img{width:100%;height:100%;object-fit:cover}
.reference-thumb button{position:absolute;right:0;top:0;border:0;border-radius:0 0 0 5px;background:#10121cdd;color:#fff;font-size:12px;cursor:pointer;width:18px;height:18px;line-height:17px;padding:0}
.quick-ref-row{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap}
.quick-ref-row .reference-upload-action{margin:0}
.quick-ref-row .reference-thumb{width:38px;height:38px}
.region-option-prompt{flex-wrap:wrap}
.region-option-prompt>input[type="text"]{min-width:100%;flex:1 1 100%}
.region-option-prompt .reference-upload-action{margin:0;padding:4px 7px}
.region-option-prompt .reference-previews{flex:1}
.region-option-prompt .reference-previews img{width:27px;height:27px;border-radius:5px;border:1px solid #7a6aaa;object-fit:cover}
.alignment-dialog{width:min(830px,94vw)!important;max-width:94vw!important;max-height:92vh;overflow-y:auto}
.alignment-dialog h2{margin-bottom:4px}
.alignment-dialog>p{font-size:12px;color:#aab0c2;line-height:1.5}
.alignment-switch{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:15px 0}
.alignment-switch .active{background:#5c518f;color:#fff;border-color:#a69af8}
.alignment-preview-box{position:relative;padding:9px;background:#0f121a;border:1px solid #474257;border-radius:10px}
.alignment-preview-box canvas{display:block;max-width:100%;width:100%;height:auto;max-height:49vh;object-fit:contain;cursor:grab;touch-action:none;border-radius:5px}
.alignment-preview-box canvas:active{cursor:grabbing}
.alignment-preview-box>span{position:absolute;left:15px;bottom:14px;font-size:10px;color:#e0d9ff;background:#1a1b26db;border-radius:5px;padding:5px 7px;pointer-events:none}
.alignment-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}
.alignment-controls label{display:flex;align-items:center;gap:8px;color:#bfc2d2;font-size:11px}
.alignment-controls input[type="range"]{flex:1;min-width:70px;accent-color:#b7a3ff}
.alignment-controls output{min-width:33px;text-align:right;color:#dfd9ff;font-size:10px}
.alignment-controls input[type="number"]{min-width:55px;width:100%;max-width:115px;padding:7px;border-radius:6px;border:1px solid #6c628d;color:#e8e2fa;background:#181924}
@media(max-width:730px){.alignment-dialog{padding:16px!important}.alignment-controls{grid-template-columns:1fr}.alignment-preview-box canvas{max-height:40vh}.reference-upload-action{font-size:10px}}

/* Locked image sources + expandable non-destructive Master version browser */
.upload-box.source-locked{cursor:zoom-in;border-style:solid}
.upload-box.source-locked:hover{border-color:#a89dff;background:#302d3d}
.master-versions{margin:11px 16px 1px;padding:0 9px;border:1px solid #424052;border-radius:9px;background:#24242e}
.master-versions summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;padding:10px 3px;font-size:11px;font-weight:750;color:#ddd6ff}
.master-versions summary::-webkit-details-marker{display:none}
.master-versions summary:before{content:'▸';font-size:11px;color:#b3a6ed}
.master-versions[open] summary:before{content:'▾'}
.master-versions summary span{margin-left:auto;border:1px solid #56506b;border-radius:5px;padding:1px 6px;font-size:10px;color:#b9b3d1}
.master-versions-list{padding:2px 0 8px;display:flex;flex-direction:column;gap:7px;max-height:290px;overflow-y:auto}
.master-version-row{border:1px solid #404052;background:#1c1e27;border-radius:7px;padding:8px}
.master-version-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;justify-content:space-between;margin-bottom:8px}
.master-version-meta strong{font-size:11px;color:#f0ecff}
.master-version-meta small{font-size:9px;color:#9695aa}
.master-version-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.master-version-actions button{flex:1;border:1px solid #554f6b;background:#2c293c;color:#dbd7ef;border-radius:6px;padding:6px 5px;cursor:pointer;font-size:10px;font-weight:650}
.master-version-actions button:hover{background:#463e63;color:#fff;border-color:#9a8bc7}
.master-version-actions [data-master-action="regen"]{background:#4b3a75;color:#eee5ff}
.source-preview-dialog{width:min(960px,95vw)!important;max-width:95vw!important;max-height:94vh!important;padding:18px!important}
.source-preview-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.source-preview-title h2{margin:5px 0}
.source-preview-title p{font-size:11px;color:#a6a9b5;margin:3px 0 9px}
.source-preview-frame{display:flex;align-items:center;justify-content:center;background:#11141b;border:1px solid #3c3f51;border-radius:9px;overflow:auto;min-height:120px;max-height:68vh;padding:10px}
.source-preview-frame img{display:block;max-width:100%;max-height:62vh;object-fit:contain}
.source-preview-dialog .dialog-actions{justify-content:flex-end;margin-top:12px}
@media(max-width:730px){.master-version-actions button{font-size:9px}.source-preview-dialog{padding:12px!important}.source-preview-frame{max-height:58vh}.source-preview-frame img{max-height:54vh}}

/* V0.5: Base-first onboarding remains a separate source until user uploads or generates Master. */
.welcome-source-column{min-width:0;display:flex;flex-direction:column;gap:10px}
.welcome-source-column .start-drop-zone{width:100%;height:210px;min-height:210px}
.welcome-source-column .start-drop-zone:has(.welcome-uploaded-thumb:not(.hidden)){border-color:#b6a9f4}
.welcome-uploaded-thumb{width:66px;height:54px;object-fit:cover;border-radius:8px;box-shadow:0 4px 14px #0007}
/* Base composer: compact neutral input, clean inline photo action. */
.welcome-base-prompt{display:flex;flex-direction:column;gap:0;min-width:0;padding:5px;text-align:left;background:#1a1e27;border:1px solid #434b59;border-radius:14px;box-shadow:0 7px 25px #00000020;transition:border-color .16s,box-shadow .16s}
.welcome-base-prompt:hover{border-color:#636c7c}
.welcome-base-prompt:focus-within{border-color:#a4a0e0;box-shadow:0 0 0 3px #aca3f31a,0 8px 24px #00000026}
.welcome-prompt-bar{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.welcome-base-prompt .welcome-prompt-input{flex:1;min-width:0;width:100%;height:39px;padding:9px 9px 9px 12px;background:transparent;border:0;border-radius:9px;outline:0;box-shadow:none;color:#f7f7fc;font:400 13px/1.35 'DM Sans',system-ui,sans-serif;letter-spacing:-.12px}
.welcome-base-prompt .welcome-prompt-input:focus{outline:none;box-shadow:none}
.welcome-base-prompt .welcome-prompt-input::placeholder{color:#8e96a7;opacity:1}
.welcome-base-prompt .welcome-prompt-image-button{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;padding:0;color:#a7afc1;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.welcome-base-prompt .welcome-prompt-image-button svg{display:block;width:20px;height:20px}
.welcome-base-prompt .welcome-prompt-image-button:hover{background:#303744;color:#f3f4ff;border-color:#3e4859}
.welcome-base-prompt .welcome-prompt-image-button:focus-visible{background:#303744;color:#f3f4ff;border-color:#a8a2eb;outline:2px solid #a8a2eb;outline-offset:2px}
.welcome-base-prompt.reference-drag-over{border-color:#b5aff2;box-shadow:0 0 0 3px #b5aff22a}
.welcome-base-prompt .welcome-compact-previews{display:flex;gap:6px;padding:8px 5px 3px;border-top:1px solid #353b49;min-width:0}
.welcome-base-prompt .welcome-compact-previews:empty{display:none}
.welcome-base-prompt .welcome-compact-previews .reference-thumb{width:36px;height:36px;border-radius:7px;border-color:#5e6678}
.welcome-base-prompt .welcome-prompt-generate-button{flex:0 0 auto;min-height:35px;margin-right:3px;padding:7px 11px;border:1px solid #8f83dd;border-radius:9px;background:#6557ad;color:#fff;font:750 11px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.welcome-base-prompt .welcome-prompt-generate-button:hover{background:#796bc4;border-color:#b7adf2;transform:translateY(-1px)}
.welcome-base-prompt .welcome-prompt-generate-button:focus-visible{outline:2px solid #c0b8ff;outline-offset:2px}
.welcome-base-prompt .welcome-prompt-generate-button:disabled{cursor:wait;opacity:.65;transform:none}
.master-progress-list{display:flex;flex-direction:column;gap:6px;margin:8px 11px 2px}
.master-progress-list:empty{display:none}
.ai-progress-item{padding:9px 10px;border:1px solid #56516f;border-radius:8px;background:#20212a;color:#f5f3ff;transition:border-color .2s,opacity .2s,transform .2s}
.master-progress-item{box-shadow:none}
.ai-progress-item.success{border-color:#77709b}.ai-progress-item.error{border-color:#a45a66}
.ai-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.ai-progress-heading strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-progress-percent{font-size:10px;font-variant-numeric:tabular-nums;color:#bbb5e8;flex:none}
.ai-progress-track{height:7px;overflow:hidden;border-radius:999px;background:#353544;box-shadow:inset 0 1px 2px #0008}
.ai-progress-fill{height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,#7567c8,#b3a9ff,#7567c8);background-size:180% 100%;animation:ai-progress-shimmer 1.25s linear infinite;transition:width .45s ease}
.ai-progress-item.success .ai-progress-fill{background:#a79ae8;animation:none}.ai-progress-item.error .ai-progress-fill{background:#d36b7b;animation:none}
.ai-progress-detail{display:block;margin-top:7px;color:#aeb2c0;font-size:10px;line-height:1.35}
.option-ai-progress{flex:1 0 100%;min-width:0;padding:3px 0 1px}
.option-ai-progress-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:#aeb2c0;font-size:9px}
.option-ai-progress-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.option-ai-progress .ai-progress-track{height:5px}
.option-ai-progress.success .ai-progress-fill{background:#a79ae8;animation:none}
.option-ai-progress.error .ai-progress-fill{background:#d36b7b;animation:none}
@keyframes ai-progress-shimmer{to{background-position:-180% 0}}
@media(max-width:730px){.welcome-prompt-bar{flex-wrap:wrap}.welcome-base-prompt .welcome-prompt-input{flex-basis:calc(100% - 50px)}.welcome-base-prompt .welcome-prompt-generate-button{width:100%;margin:0}}
.source-row{display:flex;gap:5px;align-items:center;margin-right:11px}
.source-row .upload-box{flex:1;min-width:0;margin-right:0}
.source-edit-button{flex:none;border:1px solid #60578e;background:#302b43;border-radius:6px;color:#d6c9ff;padding:6px 8px;font-size:10px;cursor:pointer;margin-top:8px}
.source-edit-button:hover{background:#484069;color:#fff}
.source-edit-overlay{position:absolute!important;inset:0;z-index:9;display:block;width:100%;height:100%;touch-action:none;pointer-events:none}
.source-edit-overlay.active{pointer-events:auto;cursor:move}
.source-editor-active #sourceEditorPanel{display:flex!important}
.source-editor-active .inspector-top,.source-editor-active .setting-card,.source-editor-active .section-rule,
.source-editor-active .inspector-advanced,.source-editor-active .inspector-bottom{display:none!important}
.source-editor-panel{display:flex;flex-direction:column;gap:12px;padding:19px 15px}
.source-editor-panel h2{margin:0;font-size:18px}
.source-editor-panel>p{font-size:11px;color:#abb0c2;line-height:1.6;margin:0}
.source-editor-panel>label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;color:#c7c1db;font-size:11px}
.source-editor-panel input[type="range"]{width:100%;min-width:0;accent-color:#b7a5ff}
.source-editor-panel output{font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.source-edit-coordinates{display:flex;gap:10px}
.source-edit-coordinates label{flex:1;font-size:11px;display:flex;flex-direction:column;gap:4px;color:#c7c1db}
.source-edit-coordinates input{width:100%;border:1px solid #70668e;background:#191926;color:#fff;border-radius:7px;padding:8px}
.source-edit-actions{display:flex;flex-wrap:wrap;gap:7px}
.source-edit-actions button{flex:1;min-width:70px}
.variant-row.dragging{opacity:.45}
.region-group.region-drop-target{outline:2px solid #bc9dff;outline-offset:1px;background:#34304d}
.region-move-picker{max-width:100%;width:100%;color:#e8dfff;background:#242336;border:1px solid #a38ce2;border-radius:6px;padding:6px;font-size:11px}
.variant-row{flex-wrap:wrap}
@media(max-width:730px){
  .welcome-drop-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .welcome-source-column .start-drop-zone{height:180px;min-height:180px}
  .welcome-base-prompt{padding:4px;border-radius:12px}
  .welcome-base-prompt .welcome-prompt-input{font-size:11px;padding:8px;height:37px}
  .welcome-base-prompt .welcome-prompt-image-button{width:37px;height:37px;flex-basis:37px}
  .source-editor-panel{padding:12px}
}

/* During direct source editing, selection tools cannot accidentally repaint the canvas. */
.workspace.source-editor-in-progress .tool-row,
.workspace.source-editor-in-progress .canvas-actions,
.workspace.source-editor-in-progress .group-list,
.workspace.source-editor-in-progress .source-row,
.workspace.source-editor-in-progress .source-actions{pointer-events:none;opacity:.55}
.workspace.source-editor-in-progress .source-editor-panel{pointer-events:auto;opacity:1}
.workspace.source-editor-in-progress .source-edit-overlay.active{pointer-events:auto;opacity:1}

/* Explicit first-image gate. Base upload and prompt can stay on onboarding until Continue. */
.welcome-continue{display:block;width:100%;justify-content:center;border:1px solid #7b70a9;background:rgba(128,109,211,.11);color:#e5d9ff;font-weight:700;margin-top:2px;min-height:36px}
.welcome-continue:hover{background:rgba(128,109,211,.23);border-color:#a89ae8}
.welcome-continue.hidden{display:none}

/* v0.7: Groups inspector replaces Guide, with explicit Help. */
.right-sidebar{min-width:0;display:flex;flex-direction:column}
.right-sidebar .inspector-bar{flex:none;gap:8px}
.right-sidebar .inspector-bar>span{flex:1}
.right-sidebar #helpBtn{font-size:11px;padding:5px 9px}
.groups-panel{display:flex;min-height:0;flex:1;flex-direction:column;overflow:hidden;padding-top:10px}
.groups-panel .section-heading{padding:4px 14px 6px}
.groups-panel .section-heading h2{font-size:16px}
.groups-panel .sidebar-hint{padding:7px 14px}
.groups-panel .group-list{flex:1;min-height:90px;overflow-y:auto;overflow-x:hidden;padding:8px 10px}
.groups-panel .group-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.groups-panel .variant-row{display:flex;gap:5px;row-gap:7px;flex-wrap:wrap;cursor:pointer}
.groups-panel .variant-text{flex:1 1 calc(100% - 30px);width:0;min-width:55px;font-weight:650}
.groups-panel .variant-action{background:#2c2d39;border:1px solid #424350;padding:5px 6px;border-radius:6px;font-size:10px;white-space:nowrap}
.groups-panel .variant-action:hover{background:#49425d;border-color:#8571bf}
.groups-panel .group-add-option{background:#38334a}
.groups-panel .left-footer{flex:none;padding:9px 12px 12px;border-top:1px solid #343541}
.right-sidebar .inspector-bottom{flex:none;margin-top:0;padding:9px 12px 14px}
.right-sidebar.source-editor-active #groupsPanel{display:none!important}
.right-sidebar.source-editor-active #helpBtn{display:none}
.right-sidebar.source-editor-active .inspector-bottom{display:none!important}
.help-dialog{max-width:min(560px,93vw)}
.help-content{max-height:55vh;overflow:auto;padding:12px 23px;color:#c4c8d2;font-size:12px;line-height:1.75}
.help-content p{margin:7px 0 13px}
.help-content strong{color:#d9d2ff}
@media (max-width:1120px) and (min-width:731px){
  .workspace{grid-template-columns:185px minmax(275px,1fr) 250px}
  .right-sidebar{display:flex}
  .left-sidebar .source-row{gap:2px;margin-right:5px}
  .left-sidebar .source-edit-button{padding:4px;font-size:9px}
  .left-sidebar .upload-box{padding:9px 5px;margin-left:7px}
  .tool-row{overflow-x:auto}
  .tool-row .toolset{flex:none}
  .topbar-actions{gap:5px}
  #saveProjectBtn span,#openProjectBtn span{display:none}
  #saveProjectBtn,#openProjectBtn{font-size:15px}
}
@media(max-width:730px){
  .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(390px,1fr) 255px;min-height:590px}
  .main-panel{grid-row:1;grid-column:1}
  .left-sidebar{display:none}
  .right-sidebar{display:flex!important;grid-row:2;grid-column:1;border-left:0;border-top:1px solid #414151;overflow:hidden}
  .right-sidebar .inspector-bar{height:34px;padding:0 11px}
  .groups-panel{padding-top:3px}
  .groups-panel .section-heading{padding:3px 12px}
  .groups-panel .sidebar-hint{display:none}
  .groups-panel .group-list{display:flex;flex-direction:row;overflow-x:auto;overflow-y:auto;min-height:95px;gap:7px;padding:5px 12px}
  .groups-panel .region-group{flex:0 0 226px;max-width:260px;min-width:205px;margin:0}
  .groups-panel .left-footer{display:flex;padding:5px 12px}
  .groups-panel .left-footer .btn{width:100%}
  .right-sidebar .inspector-bottom{display:none}
  .right-sidebar.source-editor-active .source-editor-panel{overflow-y:auto}
  .topbar-actions{gap:2px}
  #saveProjectBtn span,#openProjectBtn span{display:none}
  #saveProjectBtn,#openProjectBtn{font-size:17px;padding:6px 5px!important}
  .topbar .brand-name{font-size:17px}
  .topbar .btn{font-size:9px;padding:6px 5px}
  .topbar .premium-pill{display:none}
  .topbar #exportBtn{font-size:0;padding:6px}
  .topbar #exportBtn .icon{font-size:16px}
}

.help-prompt{margin:18px 0 3px;border-top:1px solid #454453;padding-top:12px}
.help-prompt summary{cursor:pointer;color:#cfc6ff;font-weight:700}
.help-prompt #promptPreview{max-height:190px;overflow:auto;white-space:pre-wrap;font-size:10px;line-height:1.5;word-break:break-word;color:#b6bbca}
.help-prompt-actions{display:flex;gap:8px}

/* Paste (Ctrl/Cmd+V) or drag files directly into any AI prompt. */
/* A floating selected-area prompt must stay fixed even after the reference
   paste/drop helper adds reference-prompt-target. Relative positioning here
   previously pushed the prompt to the far right of the workspace. */
.reference-prompt-target{transition:background .14s,border-color .14s,box-shadow .14s}
.quick-area-prompt.reference-prompt-target{position:fixed}
.welcome-base-prompt.reference-prompt-target{position:relative}
.reference-prompt-target textarea,.reference-prompt-target input[type="text"]{transition:border-color .14s,box-shadow .14s}
.reference-prompt-target.reference-drag-over{background-color:rgba(163,137,255,.09);box-shadow:inset 0 0 0 2px #a398ff;border-radius:10px}
.reference-prompt-target.reference-drag-over textarea,
.reference-prompt-target.reference-drag-over input[type="text"]{border-color:#cec0ff!important;box-shadow:0 0 0 2px #a68aff66!important}
.reference-paste-hint{display:block;margin:5px 0 8px;font-size:10px;line-height:1.5;font-weight:500;color:#a99fd9;opacity:.92;white-space:normal}
.welcome-base-prompt .reference-paste-hint{font-size:10px;text-align:left;margin:5px 0}
.quick-area-prompt .reference-paste-hint{font-size:10px;margin:4px 0}
.region-option-prompt .reference-paste-hint{flex:1 1 100%;margin:1px 2px 0}
.harmonize-reference-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:7px}
.harmonize-reference-row .reference-upload-action{margin:0}
.harmonize-reference-row .reference-previews{flex:1}

/* Compact workspace: keep controls close to the thing they affect. */
.left-sidebar .panel-top{padding:14px 16px 5px}
.left-sidebar .panel-top h2{margin:0;font-size:15px}
.left-sidebar .section-rule{display:none}
.left-sidebar .upload-box{padding:10px 9px}
.left-sidebar .source-thumbnail{width:44px;height:44px}
.base-prompt-shortcut{padding:7px 16px 2px}
.tool-row{height:52px;min-height:52px;padding:4px 9px;gap:5px}
.toolbar-left{gap:6px}
.toolbar-cluster{flex-direction:row;align-items:center;gap:0}
.toolbar-caption{display:none}
.toolbar-divider{height:24px}
.groups-panel{padding-top:2px}
.groups-panel .section-heading{padding:7px 12px}
.groups-panel .section-heading h2{margin:0;font-size:15px}
.groups-panel .group-list{padding-top:4px}
.groups-panel .group-details{padding:0 7px 7px}
.groups-panel .group-category{flex:1;max-width:none}
.groups-panel .variant-row{padding:7px}
.groups-panel .variant-action{min-width:27px;min-height:26px;align-items:center;justify-content:center;padding:4px 6px}
.empty-groups{padding:18px 12px}
.empty-groups strong{margin:0;color:#8d92a0}
#canvasMessage{display:none}
.canvas-foot{height:30px;justify-content:flex-end;padding:0 12px}
.right-sidebar .inspector-bottom{display:none}
.right-sidebar.source-editor-active #addRegionBtn,
.right-sidebar.is-collapsed #groupCount{display:none}

@media(hover:hover) and (pointer:fine){
  .groups-panel .variant-row .variant-action{width:0;min-width:0;padding-inline:0;border-width:0;opacity:0;overflow:hidden;pointer-events:none}
  .groups-panel .variant-row:hover .variant-action,
  .groups-panel .variant-row:focus-within .variant-action{width:auto;min-width:27px;padding-inline:6px;border-width:1px;opacity:1;pointer-events:auto}
}

/* Compact project actions and progressive-disclosure canvas tools. */
.topbar{height:60px;padding-inline:18px}
.workspace{height:calc(100vh - 60px)}
.topbar-actions{gap:6px}
.brand-logo{display:block;width:31px;height:31px;flex:none;border-radius:8px;box-shadow:0 0 18px #7b2df12b}
.topbar-icon-action{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #383b45;border-radius:9px;background:#24272f;color:#e8e9ef;font-size:15px;cursor:pointer}
.topbar-icon-action:hover{border-color:#716aa0;background:#30323f;color:#fff}
#apiKeyStatusBtn{min-width:48px;padding-inline:9px}
#apiKeyStatusBtn.premium-active{background:#262b31;color:#c5bafa}
#exportBtn{min-height:38px;padding-inline:12px}

.tool-row{position:relative;z-index:15;height:48px;min-height:48px;overflow:visible}
.toolbar-left{overflow:visible}
.toolbar-history{display:flex;align-items:center;gap:2px}
.toolbar-history .icon-btn{width:29px;height:30px}
.canvas-actions{gap:2px}
.canvas-actions .vert-line{display:none}
.zoom-fit-value{border:0;border-radius:6px;background:transparent;padding:5px;color:#b1b4c1;cursor:pointer}
.zoom-fit-value:hover{background:#292c35;color:#fff}
.selection-toolset .tool{width:33px;justify-content:center;padding-inline:7px}
.selection-toolset .tool span{display:none}
.selection-toolset .tool.active{width:auto}
.selection-toolset .tool.active span{display:inline}
.toolbar-more{position:relative;flex:none}
.toolbar-more>summary{list-style:none;min-width:58px;justify-content:center}
.toolbar-more>summary::-webkit-details-marker{display:none}
.toolbar-more[open]>summary,.toolbar-more:has(.tool.active)>summary{color:#ddd9ff;background:#363348}
.toolbar-popover{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:252px;padding:9px;border:1px solid #444756;border-radius:11px;background:#1d2027;box-shadow:0 18px 50px #000b}
.toolbar-popover-section{padding:7px}
.toolbar-popover-section+ .toolbar-popover-section{border-top:1px solid #30333d}
.toolbar-popover-section>small{display:block;margin:0 0 7px;color:#858b9a;font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.toolbar-popover .toolset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.toolbar-popover .tool{width:100%;justify-content:flex-start;padding:7px 8px}
.toolbar-popover .selection-modes{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.toolbar-popover .mode{padding-inline:4px}
.toolbar-popover .toolbar-utility{display:block}
.toolbar-popover-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.toolbar-popover-actions .btn{width:100%;padding:7px 6px;font-size:10px}
.toolbar-popover-actions #projectPromptToolbarBtn{display:none}

@media(max-width:900px){
  .selection-toolset .tool span{display:none!important}
  .selection-toolset .tool.active{width:33px}
  .toolbar-right{gap:2px}
  .toolbar-history{display:none}
}
@media(max-width:560px){
  .topbar{padding-inline:10px}
  #apiKeyStatusBtn{min-width:40px;padding-inline:6px}
  .topbar-icon-action{width:34px;height:34px}
  #exportBtn .export-label{display:none}
  #exportBtn{width:36px;padding:0}
  .selection-toolset .tool[data-tool="ellipse"],.selection-toolset .tool[data-tool="wand"]{display:none}
}

/* Desktop tool rail and resizable Groups inspector. */
.workspace{--inspector-width:248px}
.right-sidebar{position:relative}
.inspector-resize-handle{position:absolute;z-index:20;top:0;bottom:0;left:0;width:7px;cursor:col-resize;touch-action:none;outline:0}
.inspector-resize-handle::after{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;background:#2a2d35;transition:width .15s,background .15s}
.inspector-resize-handle:hover::after,.inspector-resize-handle:focus-visible::after,.inspector-resizing .inspector-resize-handle::after{width:3px;background:#8f86df}
.inspector-resizing{cursor:col-resize!important;user-select:none}
.inspector-resizing *{cursor:col-resize!important}
.right-sidebar.is-collapsed .inspector-resize-handle{display:none}

@media(min-width:1130px){
  .workspace{grid-template-columns:250px minmax(360px,1fr) var(--inspector-width)}
  .workspace.inspector-collapsed{grid-template-columns:250px minmax(360px,1fr) 44px}
}
@media(min-width:731px) and (max-width:1129px){
  .workspace{grid-template-columns:185px minmax(275px,1fr) var(--inspector-width)}
  .workspace.inspector-collapsed{grid-template-columns:185px minmax(275px,1fr) 44px}
}
@media(min-width:731px){
  .main-panel{position:relative}
  .tool-row{position:absolute;z-index:16;top:52px;bottom:30px;left:0;width:154px;height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:10px 8px;overflow-x:hidden;overflow-y:auto;border-right:1px solid #2d3039;border-bottom:0;background:#17191f}
  .canvas-viewport,.canvas-foot{margin-left:154px}
  .toolbar-left,.toolbar-right{display:flex;flex:none;flex-direction:column;align-items:stretch;width:100%;gap:10px;padding:0;border:0;overflow:visible}
  .toolbar-section{display:flex;flex-direction:column;gap:5px;padding-bottom:9px;border-bottom:1px solid #2e313a}
  .toolbar-section-title{display:block;padding:0 7px;color:#777f91;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
  .tool-row .toolset{display:flex;flex-direction:column;gap:2px;width:100%}
  .tool-row .tool{width:100%;justify-content:flex-start;padding:7px 8px}
  .tool-row .tool span,.selection-toolset .tool span,.selection-toolset .tool.active span{display:inline!important}
  .selection-toolset .tool,.selection-toolset .tool.active{width:100%}
  .tool-row .selection-modes{display:grid;grid-template-columns:1fr;width:100%;gap:2px;padding:3px}
  .tool-row .mode{text-align:left;padding:6px 8px}
  .toolbar-context{display:block;width:100%}
  .toolbar-context .wand-options,.toolbar-context .brush-size{flex-wrap:wrap;width:100%;padding:5px 7px}
  .toolbar-context input{flex:1;min-width:62px;max-width:100%}
  .toolbar-actions{gap:6px}
  .toolbar-history{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  .toolbar-history .icon-btn{width:100%;height:30px;border:1px solid #333743;background:#20232a}
  .toolbar-actions>.btn{width:100%;justify-content:flex-start;padding:7px 8px}
  .toolbar-actions #projectPromptToolbarBtn{display:none}
  .toolbar-primary{display:flex;flex-direction:column;gap:5px;width:100%;padding-top:1px}
  .toolbar-primary .btn{width:100%;justify-content:center;min-height:34px}
}

@media(max-width:999px){
  .toolbar-section-title{display:none}
  .toolbar-section{display:flex;align-items:center}
  .tool-row{overflow-x:auto;overflow-y:hidden}
  .layer-toolset .tool span{display:none}
  .toolbar-actions{display:none}
  .canvas-viewport,.canvas-foot{margin-left:0}
}

@media(max-width:730px){
  .inspector-resize-handle{display:none}
}

/* Sources live under Groups; the workspace now has only canvas + inspector. */
@media(min-width:1130px){
  .workspace{grid-template-columns:minmax(520px,1fr) var(--inspector-width)}
  .workspace.inspector-collapsed{grid-template-columns:minmax(520px,1fr) 44px}
}
@media(min-width:731px) and (max-width:1129px){
  .workspace{grid-template-columns:minmax(380px,1fr) var(--inspector-width)}
  .workspace.inspector-collapsed{grid-template-columns:minmax(380px,1fr) 44px}
}
.right-sidebar .sources-panel{display:block;flex:0 1 auto;min-height:214px;max-height:43%;padding:0 0 10px;border:0;border-top:1px solid #30333c;background:#17191f;overflow-y:auto}
.right-sidebar .sources-panel .panel-top{padding:11px 13px 2px}
.right-sidebar .sources-panel .panel-top h2{font-size:13px}
.right-sidebar .sources-panel .source-row{margin-right:7px}
.right-sidebar .sources-panel .upload-box{margin:6px 8px 0;padding:8px}
.right-sidebar .sources-panel .source-thumbnail{width:40px;height:40px}
.right-sidebar .sources-panel .source-edit-button{margin-top:6px}
.right-sidebar .sources-panel .master-versions{margin:8px 8px 1px}
.right-sidebar .sources-panel .source-actions{margin:8px 8px 0}
.right-sidebar .sources-panel .base-prompt-shortcut{padding:7px 8px 0}
.right-sidebar.source-editor-active .sources-panel{display:none!important}

@media(max-width:730px){
  .right-sidebar{overflow-y:auto}
  .right-sidebar .groups-panel{flex:0 0 auto;min-height:210px}
  .right-sidebar .sources-panel{display:block!important;flex:none;min-height:210px;max-height:none}
}

/* Help stays available without occupying the Groups header. */
.right-sidebar #helpBtn,.right-sidebar.source-editor-active #helpBtn{position:fixed;z-index:46;right:12px;bottom:12px;display:grid!important;place-items:center;width:28px;min-width:28px;height:28px;padding:0!important;border:1px solid #414550;border-radius:50%;background:#20232a;color:#aeb3c0;font-size:12px;line-height:1;box-shadow:0 5px 18px #0007}
.right-sidebar #helpBtn:hover{border-color:#8d84dc;background:#302d43;color:#fff}
.right-sidebar #helpBtn:focus-visible{outline:2px solid #aaa2f4;outline-offset:2px}

/* Fit uses the viewport's actual padding, with a small gutter at every size. */
.canvas-viewport{padding:10px}
.canvas-header{flex-shrink:0}
@media(min-width:731px) and (max-width:999px){.main-panel:has(.toolbar-section-title) .canvas-viewport,.main-panel:has(.toolbar-section-title) .canvas-foot{margin-left:154px}}
.advanced-settings{flex:none;border-bottom:1px solid var(--border);font-size:11px}
.advanced-settings>summary{padding:11px 13px;color:#c9c5eb;cursor:pointer;font-weight:700}
.advanced-settings-body{display:grid;gap:8px;padding:0 13px 13px;max-height:300px;overflow:auto}
.advanced-settings-body small{color:var(--muted);font-size:10px;line-height:1.5}
.advanced-settings-body select{width:100%;border:1px solid #454956;border-radius:6px;background:#242731;color:var(--ink);padding:6px;font:inherit}
.geometry-setting{display:flex;align-items:center;justify-content:space-between;gap:8px}
.geometry-setting .switch input:focus-visible+span{outline:2px solid #c0b8ff;outline-offset:3px}
.right-sidebar.is-collapsed .advanced-settings,.right-sidebar.source-editor-active .advanced-settings{display:none}

/* Small green accents borrowed from the Mosaic mark. */
:root{--mosaic-green:#aaa0ef;--mosaic-green-soft:rgba(170,160,239,.13);--mosaic-green-border:rgba(170,160,239,.42)}
.brand-dot{color:var(--mosaic-green)}
.status-mark{background:var(--mosaic-green);box-shadow:0 0 0 4px var(--mosaic-green-soft)}
.tool.active{color:#f3fff9;background:linear-gradient(90deg,rgba(126,109,225,.2),var(--mosaic-green-soft));box-shadow:inset 2px 0 0 var(--mosaic-green)}
.variant-row.selected .variant-dot{border-color:var(--mosaic-green);background:#242034}
.upload-box.ready{border-color:var(--mosaic-green-border);box-shadow:inset 0 0 0 1px rgba(170,160,239,.05)}
#addRegionBtn:hover{border-color:var(--mosaic-green-border);color:var(--mosaic-green);background:var(--mosaic-green-soft)}
#commitBtn:not(:disabled){border-color:var(--mosaic-green-border);background:linear-gradient(135deg,#aaa6ff,#b6abf1);color:#1d182d;box-shadow:0 0 18px rgba(170,160,239,.11)}
.ai-progress-fill{background:linear-gradient(90deg,#7567c8,#8e8cf1,var(--mosaic-green));background-size:180% 100%}
.inspector-resize-handle:hover::after,.inspector-resize-handle:focus-visible::after,.inspector-resizing .inspector-resize-handle::after{background:var(--mosaic-green)}
.right-sidebar #helpBtn:hover{border-color:var(--mosaic-green-border);background:#20342d;color:var(--mosaic-green)}

/* mozAI: a pointer for masks, separate navigation, and readable Groups. */
.brand-ai{color:var(--mosaic-green);letter-spacing:-1.4px}
.brand-name{color:#f3f1fa}
.canvas-generation-progress{position:fixed;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 32px));pointer-events:none}
.canvas-generation-progress:empty{display:none}
.canvas-generation-progress .ai-progress-item{padding:17px 19px;border:1px solid #797296;border-radius:13px;background:#20202cf2;box-shadow:0 16px 55px #0007;backdrop-filter:blur(12px)}
.canvas-generation-progress .ai-progress-heading strong{font-size:13px}
.canvas-generation-progress .ai-progress-track{height:6px;margin-top:11px}
.canvas-generation-progress .ai-progress-detail{font-size:11px;margin-top:10px;color:#c1bdd2}
.canvas-generation-progress .ai-progress-item.success{animation:master-progress-dismiss .45s ease forwards}
.canvas-wrap .master-image-transition{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;animation:master-image-reveal .85s ease-in-out forwards}
.canvas-wrap #overlayCanvas{z-index:2}
@keyframes master-image-reveal{from{opacity:1}to{opacity:0}}
@keyframes master-progress-dismiss{to{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.canvas-wrap .master-image-transition,.canvas-generation-progress .ai-progress-item.success{animation-duration:1ms}}
.workspace{--inspector-width:clamp(300px,28vw,380px)}
@media(min-width:731px){
  .workspace{grid-template-columns:minmax(340px,1fr) var(--inspector-width)}
  .workspace.inspector-collapsed{grid-template-columns:minmax(340px,1fr) 44px}
  .tool-row{width:138px;padding-inline:7px}
  .canvas-viewport,.canvas-foot,.main-panel:has(.toolbar-section-title) .canvas-viewport,.main-panel:has(.toolbar-section-title) .canvas-foot{margin-left:138px}
  .tool-row .tool{min-height:31px;padding:6px 8px}
  .toolbar-left,.toolbar-right{gap:7px}
  .toolbar-section{padding-bottom:7px}
}
.canvas-viewport{align-items:flex-start;justify-content:flex-start}
.canvas-wrap{margin:auto}
.canvas-wrap #overlayCanvas{cursor:default}
.canvas-wrap.zoom #overlayCanvas{cursor:zoom-in}
.canvas-wrap.pan #overlayCanvas{cursor:grab}
.canvas-wrap.pan:active #overlayCanvas{cursor:grabbing}
.navigation-toolset svg{flex:none}
.quick-area-title{gap:8px;align-items:center}
.quick-area-title .quick-prompt-drag-handle{display:flex;align-items:center;gap:7px;flex:1;width:auto;padding:4px 0;border:0;background:transparent;color:#d8d3f5;text-align:left;cursor:grab;touch-action:none;font:inherit}
.quick-area-title .quick-prompt-drag-handle.is-dragging{cursor:grabbing}
.quick-prompt-drag-handle:focus-visible{outline:2px solid #a9a2f4;outline-offset:3px;border-radius:4px}
.quick-area-prompt{min-width:220px;max-width:360px}
.project-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 2px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:text}
.project-name:hover{background:#ffffff0a}
.project-name-input{width:min(280px,45vw);min-width:90px;border:1px solid #9a8ed4;border-radius:5px;background:#242431;color:#f5f2ff;padding:5px 7px;font:inherit}
.mask-edit-controls{position:absolute;inset:0;z-index:6;pointer-events:none}
.mask-point-control{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid #c0b2f2;border-radius:50%;background:#292536;color:#f5efff;font:600 17px/1 system-ui;box-shadow:0 2px 8px #0008;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.mask-point-control[hidden]{display:none!important}
.mask-point-control:hover{background:#67548f;border-color:#eee5ff}
.mask-point-control:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mask-point-control:disabled{opacity:.5;cursor:default}
body:has(.source-editor-active) .mask-edit-controls,body:has(.source-editor-active) .brush-cursor{display:none!important}
.mask-editing [data-action="edit-mask"]{background:#625187!important;border-color:#c9b6f3!important;opacity:1!important}
.brush-cursor{position:fixed;z-index:75;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #16131fc9,inset 0 0 0 1px #16131f66;pointer-events:none}
.brush-cursor[hidden]{display:none!important}
.canvas-wrap.brush #overlayCanvas,.canvas-wrap.eraser #overlayCanvas{cursor:none}
@media(min-width:731px){
  .toolbar-section-title{display:block!important}
  .brush-context .brush-size{display:grid;grid-template-columns:1fr auto;gap:6px;width:100%;padding:6px 7px;font-size:10px;color:#b9b5cd}
  .brush-context .brush-size input{grid-column:1/-1;grid-row:2;width:100%;margin:0;min-width:0}
  .brush-context .brush-size span{grid-column:2;grid-row:1;min-width:0;color:#e1d9fa}
}
.right-sidebar{overflow-x:hidden}
.right-sidebar .inspector-bar{min-height:52px;padding:9px 14px}
.groups-panel{padding-top:0;min-height:160px}
.groups-panel .group-list{padding:10px 12px;min-height:100px}
.groups-panel .region-group{border-radius:11px;margin-bottom:12px;border-color:#3c404c;background:#20242d}
.group-head{gap:9px;padding:12px}
.group-icon{width:30px;height:30px;background:#35354d}
.group-heading-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.group-heading-copy>small{font-size:9px;line-height:1.3;color:#8a91a5;letter-spacing:1px;text-transform:uppercase}
.groups-panel .group-name{display:block;font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;color:#f0f1f7}
.group-count{display:grid;place-items:center;min-width:23px;min-height:22px;border-radius:6px;background:#303541;color:#bfc5d8;font-size:10px}
.group-head-actions{display:flex;gap:3px;flex:none}
.groups-panel .group-details{display:flex;align-items:center;gap:6px;padding:0 12px 11px}
.groups-panel .group-category{min-width:0;font-size:10px;padding:6px 8px;background:#191d26;border:1px solid #3a4150;border-radius:6px}
.groups-panel .group-options{padding:5px 7px 7px}
.groups-panel .variant-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:7px;align-items:center;min-height:42px;padding:7px;flex-wrap:nowrap}
.groups-panel .variant-text{width:auto;min-width:0;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.option-actions{display:flex;align-items:center;gap:3px;flex:none}
.groups-panel .variant-row .variant-action,.groups-panel .variant-row:hover .variant-action,.groups-panel .variant-row:focus-within .variant-action{display:grid;place-items:center;width:25px;min-width:25px;height:25px;min-height:25px;padding:0;border:1px solid #424958;border-radius:6px;opacity:.7;pointer-events:auto;overflow:visible;font-size:12px;background:#282e3a}
.groups-panel .variant-row:hover .variant-action,.groups-panel .variant-row:focus-within .variant-action{opacity:1}
.groups-panel .variant-action:focus-visible{outline:2px solid #b3a9fa;outline-offset:2px}
.groups-panel .variant-row.selected{background:linear-gradient(90deg,#36344b,#2c293e);box-shadow:inset 2px 0 0 var(--mosaic-green)}
.option-ai-progress,.region-move-picker{grid-column:1/-1}
.right-sidebar .sources-panel{flex:0 1 auto;min-height:185px;max-height:36%;background:#171b23}
.right-sidebar .sources-panel .panel-top{padding:12px 14px 3px}
.right-sidebar .sources-panel .source-row{margin-right:10px}
.right-sidebar .sources-panel .upload-box{margin-inline:12px;gap:9px}
.right-sidebar .sources-panel .source-edit-button{padding:7px 9px}
.advanced-settings{border-top:1px solid #343b48;border-bottom:0;background:#171b23}
.advanced-settings>summary{padding:13px 50px 13px 14px;font-size:11px}
.advanced-settings-body{padding-inline:14px}
@media(max-width:730px){
  .workspace{grid-template-rows:minmax(440px,1fr) 300px}
  .tool-row .tool{flex:none;min-width:31px}
  .selection-toolset .tool[data-tool="wand"]{display:flex}
  .navigation-toolset{display:flex;gap:2px}
  .navigation-toolset .tool{width:32px;justify-content:center}
  .navigation-toolset .tool span{display:none!important}
  .toolbar-section[aria-label="Canvas navigation"]{border-left:1px solid #343947;padding-left:4px}
  .groups-panel .group-list{display:block}
  .groups-panel .region-group{width:100%;min-width:0;max-width:none}
  .right-sidebar .sources-panel{max-height:none;flex:none}
  .quick-area-prompt{min-width:200px;max-width:calc(100vw - 24px)}
  #exportBtn{width:auto;padding:7px 9px}
  #exportBtn .export-label{display:inline;font-size:10px}
}

/* SVG masks keep contours and points sharp at every zoom level. */
.group-hover-hint{position:fixed}
.source-editor-in-progress #selectionOutlineVectors,.source-editor-in-progress #regionHoverVectors,.source-editor-in-progress #regionGuideVectors{display:none}