@font-face{font-family:Inter;src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Space;src:url("/assets/fonts/sora-latin-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{font-family:Inter,system-ui,sans-serif;color:#f4f4f4;background:#0c0d0e;color-scheme:dark;--lime:#ff6200;--line:#262729;--muted:#85858a;--surface:#17181a;--card-size:280px;--header:52px}
*{box-sizing:border-box}body{margin:0;font-size:13px}button,input,select,textarea{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lime);outline-offset:3px}input:focus,textarea:focus,select:focus{outline:1px solid #7e573f}svg.icon{height:17px;width:17px;display:block;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hidden,[hidden]{display:none!important}.muted{color:var(--muted)}h1,h2,h3,p{margin-top:0}h1,h2{letter-spacing:-.04em}h1{font-size:30px}h2{font-size:24px}.eyebrow{font-size:10px;letter-spacing:.12em;font-weight:650;color:var(--muted)}.text-button{display:inline-flex;align-items:center;gap:5px;padding:3px;color:#ccc;font-size:12px}.text-button:hover{color:var(--lime)}.small-button,.lime-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#1d1e20;padding:10px 13px;border-radius:10px;white-space:nowrap}.small-button:hover{background:#292a2d}.lime-button{background:var(--lime);color:#101106;border:0;font-weight:650;min-height:40px}.lime-button:hover{background:#ff751f}.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#aaa;border-radius:10px;position:relative;font-size:22px}.icon-button:hover{background:#242528;color:white}.green-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:5px}.promo{display:flex;align-items:center;gap:12px;background:var(--lime);color:#121212;padding:10px 24px;font-size:12px}.promo button:first-of-type{margin-left:auto;background:#111;color:white;border-radius:7px;padding:8px}.topbar{height:var(--header);position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:0 16px;background:#0c0d0ef5;backdrop-filter:blur(18px)}.brand{width:28px;height:28px;flex-shrink:0;color:#fafafa}.brand svg{width:100%;height:100%}.brand.brand-logo{width:auto;height:32px;display:flex;align-items:center}.brand.brand-logo img{height:32px;width:auto;display:block}.topbar nav{display:flex;align-items:center;gap:19px;min-width:0;flex:1;height:100%;white-space:nowrap}.nav-item{display:flex;align-items:center;height:100%;gap:4px;color:#949497;font-size:13px;position:relative;padding:0}.nav-item.active,.nav-item:hover{color:var(--lime)}.nav-item .badge{font-size:9px;background:#3b1d0b;color:#ff751f;padding:1px 4px;border-radius:3px}.nav-divider{height:17px;width:1px;background:var(--line)}.top-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}.top-actions .small-button{padding:8px 11px}.avatar{width:34px;height:34px;border:2px solid #73777b;outline:2px solid #23262b;border-radius:50%;padding:2px;margin-left:5px}.avatar span{display:grid;place-items:center;height:100%;border-radius:50%;color:#341502;background:radial-gradient(circle at 60% 70%,#ff751f,#cd8b62 55%,#aa84d3);font-size:12px;font-weight:700}.notice-dot{position:absolute;right:6px;top:5px;width:5px;height:5px;background:var(--lime);border-radius:50%}.preview-banner{padding:7px 16px;background:#2a1c13;color:#e5bba1;font-size:11px;display:flex;justify-content:center;gap:15px}.preview-banner a{text-decoration:underline}.mega-menu{position:fixed;left:48px;right:190px;top:var(--header);max-height:75vh;overflow:auto;z-index:45;padding:22px;background:#1a1c1dfc;border:1px solid #343538;border-radius:0 0 16px 16px;box-shadow:0 24px 60px #000a;display:grid;grid-template-columns:1fr 2fr;gap:28px}.mega-menu h3{font-size:11px;color:var(--muted);font-weight:450;margin:0 0 12px}.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:4px}.mega-link{display:flex;align-items:center;gap:12px;text-align:left;padding:9px;border-radius:9px}.mega-link:hover{background:#2c2d2f}.mega-link small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.mega-link b{font-size:12px;font-weight:550}.model-mark{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:7px;color:var(--lime);background:#252729;font-size:20px;flex-shrink:0}.model-mark.google{color:#95aaff}.model-mark.openai{color:#aeebd4}.model-mark.kling{color:#ff751f}
.explore-page{padding:12px 16px 0;max-width:1920px;margin:auto}.hero-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:3px}.hero-card{flex:0 0 41%;min-width:310px;scroll-snap-align:start;text-align:left;padding:0}.hero-art{height:clamp(190px,22vw,330px);border-radius:9px;overflow:hidden;position:relative;background:#202326}.hero-art img{height:100%;width:100%;object-fit:cover;transition:transform .45s}.hero-card:hover img{transform:scale(1.035)}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 60%)}.hero-caption{position:absolute;bottom:20px;left:22px;z-index:1;font:700 clamp(24px,3vw,46px)/.98 Space,Inter,sans-serif;text-shadow:0 2px 15px #0005;letter-spacing:-.06em;max-width:85%}.hero-card h2{font:600 14px Space,Inter,sans-serif;margin:15px 0 5px;letter-spacing:-.025em}.hero-card p{color:var(--muted);font-size:12px;margin:0 0 12px}.explore-launch{display:grid;grid-template-columns:41% 1fr;gap:20px;margin-top:29px}.bridge-card{border:1px solid var(--line);border-radius:17px;padding:22px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 90%,#45271466,transparent 55%),linear-gradient(140deg,#1c1d1f,#121314)}.bridge-card h1{font:650 31px/.98 Space,Inter,sans-serif;letter-spacing:-.06em;margin:14px 0}.bridge-card p{color:#95959a;font-size:12px}.bridge-card .lime-button{margin-top:19px}.pipeline{border:1px solid #363735;background:#242525;border-radius:10px;padding:13px;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#aaa}.pipeline span:first-child{color:var(--lime)}.quick-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-tool{border:1px solid var(--line);box-shadow:inset 0 0 0 3px #111214;background:#1b1c1f;border-radius:16px;padding:17px 15px;display:flex;flex-direction:column;text-align:left;min-width:0}.quick-tool:hover{border-color:#694c3a;background:#252825}.quick-tool .quick-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.quick-tool b{font-size:12px;margin-bottom:7px}.quick-tool p{font-size:11px;color:var(--muted);margin:0;line-height:1.5}.tag{display:inline-flex;font-size:9px;background:#292b2d;color:#d1d1d1;padding:4px 6px;border-radius:20px}.tag.lime{color:#131603;background:var(--lime);border-radius:4px;font-weight:700}.discovery-section{margin:50px 0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.section-heading h2{font-family:Space,Inter,sans-serif;font-size:30px;margin-bottom:8px}.section-heading p{color:var(--muted);font-size:12px;margin-bottom:0}.inspiration-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.inspiration-card{padding:0;text-align:left}.inspiration-card figure{margin:0;position:relative;height:280px;border-radius:12px;overflow:hidden;background:#242626}.inspiration-card img{height:100%;width:100%;object-fit:cover;transition:transform .3s}.inspiration-card:hover img{transform:scale(1.04)}.inspiration-card figure:after{content:"↗";position:absolute;bottom:12px;right:12px;border:1px solid #fff5;border-radius:50%;height:30px;width:30px;display:grid;place-items:center;background:#1118}.inspiration-card b{display:block;margin:12px 0 5px;font-family:Space,Inter,sans-serif}.inspiration-card small{color:var(--muted)}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0;font-size:10px;color:#6e7075}
.studio-page{padding:0 16px 16px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:8px;height:calc(100dvh - var(--header))}.composer{border:1px solid #1d1e20;border-radius:20px;background:#101112;padding:0 8px 10px;min-height:0;display:flex;flex-direction:column;overflow:hidden;align-self:stretch}.work-tabs{display:flex;gap:13px;padding:15px 8px 7px;flex-shrink:0;min-height:50px}.work-tabs button{padding:0 0 12px;color:#9b9ba0;font-size:12px;white-space:nowrap;border-bottom:2px solid transparent}.work-tabs button.active{color:#fff;border-color:white}.composer-scroll{padding:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333 transparent;flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}.preset-card{position:relative;min-height:132px;width:100%;overflow:hidden;border-radius:11px;text-align:left;background:linear-gradient(140deg,#480407,#d1150b 46%,#140505 47%,#400607 71%,#090d0c 72%);isolation:isolate}.preset-art{position:absolute;right:-5px;top:30px;width:180px;height:80px;border:9px solid #1d0508;box-shadow:0 0 0 2px #780a0c,10px 15px 30px #0008;transform:rotate(-32deg);background:repeating-linear-gradient(90deg,#1c0b0d 0 10px,#520c0f 10px 12px);z-index:-1}.preset-change{position:absolute;top:9px;right:10px;background:#0a0a0a88;border:1px solid #ffffff17;border-radius:6px;padding:4px 7px;font-size:11px}.preset-copy{position:absolute;bottom:14px;left:13px;display:flex;flex-direction:column;gap:6px}.preset-copy b{font:700 20px Space,Inter,sans-serif;color:var(--lime);letter-spacing:-.04em}.preset-copy small{font-size:11px}.segment{display:flex;background:#18191b;padding:4px;border-radius:9px;gap:4px}.segment button{flex:1;padding:10px 2px;border-radius:7px;color:#929296;font-size:12px;font-weight:550}.segment button.active{background:#303134;color:#fff}.ref-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;border:1px dashed #343537;border-radius:14px;background:#18191b;cursor:pointer;margin-top:5px;color:#818187;gap:6px}.ref-box:hover,.ref-box.drag{border-color:var(--lime);background:#21251a}.ref-box strong{font-size:12px;font-weight:450}.ref-box small{font-size:11px;color:#aaa}.ref-icons{display:flex;margin-bottom:8px}.ref-icons span{height:30px;width:30px;background:#282a2d;border:1px solid #484a4d;border-radius:50%;display:grid;place-items:center;margin-left:-3px;color:#999}.ref-icons .icon{height:14px}.reference-list:empty{display:none}.reference-list{display:flex;gap:7px;flex-wrap:wrap;padding:2px}.reference-item{position:relative;width:66px;height:66px;border:1px solid #383b3d;border-radius:8px;background:#262729;display:grid;place-items:center;overflow:hidden}.reference-item img,.reference-item video{width:100%;height:100%;object-fit:cover}.reference-item button{position:absolute;top:0;right:0;background:#000a;width:19px;height:19px;font-size:15px;border-radius:0 0 0 5px}.reference-item small{font-size:8px;max-width:60px;overflow:hidden}.prompt-box{padding:14px 13px 8px;background:#191a1c;border:1px solid #202123;border-radius:11px;display:flex;flex-direction:column;min-height:158px;flex:0 0 auto}.prompt-box label{color:#919197;font-size:12px;margin-bottom:5px}.prompt-box textarea{width:100%;min-height:90px;resize:vertical;background:none;border:0;outline:0;line-height:1.5;font-size:13px;padding:0}.prompt-box textarea::placeholder{color:#808085}.prompt-tools{display:flex;align-items:center;gap:9px;margin-top:7px}.prompt-tools button{font-size:10px;background:#111315;border-radius:5px}.prompt-tools .icon{width:12px;height:12px}#promptCount{margin-left:auto;color:#64676c;font-size:8px}.output-settings{display:flex;flex-direction:column;gap:8px}.model-trigger{background:#262729;border-radius:6px;padding:8px 12px;display:flex;align-items:center;gap:5px;text-align:left;width:100%;min-height:48px}.model-trigger small{display:block;color:#bbb;font-size:10px;margin-bottom:2px}.model-trigger strong{font-size:13px;font-weight:500}.model-trigger .model-mark{width:20px;height:20px;background:none}.chevron{margin-left:auto;color:#999;font-size:19px}.setting-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.setting-button{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;background:#1a1b1d;border-radius:6px;white-space:nowrap;font-size:12px}.setting-button:hover{background:#2b2d30}.setting-button small{color:#94979a;font-size:10px}.setting-button.wide{grid-column:1/-1;justify-content:space-between;padding:12px}.setting-button .icon{width:13px;height:13px}.composer-submit{padding:9px 8px 0;flex-shrink:0;background:#101112}.generate{width:100%;min-height:45px;font-size:14px;box-shadow:0 3px 0 #a44306;border-radius:11px;gap:10px}.generate-symbol{font-size:20px}.bridge-status{display:flex;align-items:center;gap:5px;color:#7b7e7b;font-size:9px;padding-top:10px;min-height:20px}.bridge-status i{width:5px;height:5px;border-radius:50%;background:#ee9c45}.bridge-status i.online{background:var(--lime)}.bridge-status button{font-size:9px;padding:0}.shortcut{margin-left:auto}.workflow-note{font-size:11px;line-height:1.5;color:#e7d49d;border:1px solid #53452a;background:#2a2316;border-radius:8px;padding:10px;margin:0}
.result-panel{border:1px solid var(--line);border-radius:20px;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#303235 transparent;padding:10px 16px 24px}.history-toolbar{display:flex;align-items:center;gap:10px;position:sticky;top:-10px;padding:0 0 10px;background:#0c0d0ef5;z-index:5;min-height:45px}.history-tabs{display:flex;gap:3px}.history-tabs button{display:flex;gap:6px;align-items:center;padding:8px 10px;border-radius:8px;color:#96969a;font-size:11px;white-space:nowrap}.history-tabs button.active{background:linear-gradient(#2a2b2d,#222325);color:white;box-shadow:inset 0 1px #ffffff0a}.history-tabs svg{height:14px;width:14px}.history-controls{display:flex;gap:6px;align-items:center;margin-left:auto}.history-controls input{width:110px;accent-color:#fff;height:3px}.view-switch{display:flex;border:1px solid #1e1f21;background:#17181a;border-radius:8px;padding:3px}.view-switch button{display:flex;align-items:center;gap:5px;padding:5px 7px;font-size:11px;border-radius:5px;color:#8b8c90}.view-switch button.active{background:#2c2d30;color:white}.view-switch .icon{height:13px;width:13px}.history-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:#191a1c;padding:12px;border-radius:10px;margin:5px 0 15px}.history-filters label{display:grid;gap:5px;font-size:10px;color:#aaa}.history-filters input,.history-filters select{padding:7px;border-radius:5px;border:1px solid #383a3d;background:#232427;color:white}.history-filters .check-label{display:flex;align-items:center;align-self:center}.history-list{display:flex;flex-direction:column;gap:14px}.history-card{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid #303135;border-radius:17px;overflow:hidden;background:#191a1d;min-height:250px}.job-media{background:radial-gradient(ellipse at 50% 5%,#303235,#181a1d 60%);position:relative;min-height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;color:#757981}.job-media img,.job-media video{height:100%;width:100%;position:absolute;inset:0;object-fit:contain;background:#111}.job-live-status{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 24px)}.job-provider-state{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:100%;padding:7px 11px;border-radius:12px;background:#111a;color:#d8ded9;border:1px solid #ffffff18;font-size:10px;letter-spacing:.01em;backdrop-filter:blur(8px);text-align:center}.job-provider-state small{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9da69f;font-size:9px}.job-details{padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}.model-chip{display:flex;align-items:center;gap:8px;align-self:flex-start;border:1px solid #444649;padding:7px 9px;border-radius:8px;font-size:11px}.job-prompt{color:#a0a1a5;line-height:1.55;font-size:13px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0}.job-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;margin-top:auto}.job-meta span{padding:6px 8px;background:#292a2d;border-radius:6px}.job-time{color:#87898c;font-size:10px}.job-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}.job-actions button,.job-actions a{font-size:11px;padding:7px 10px;border-radius:7px;background:#2d2e32}.job-actions .primary{color:#111;background:var(--lime)}.job-error{color:#ffb4a6;font-size:11px;line-height:1.5}.status-pill{padding:10px 15px;background:#2b2d31;color:#eee;border:1px solid #3c3d40;border-radius:30px;font-size:13px;display:flex;align-items:center;gap:7px}.spinner{display:inline-block;height:14px;width:14px;border-radius:50%;border:2px solid #fff3;border-top-color:white;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.job-progress{width:100%;height:3px;background:#35373a;border-radius:2px}.job-progress i{display:block;height:100%;background:var(--lime)}.history-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--card-size),100%),1fr))}.history-list.grid .history-card{display:flex;flex-direction:column}.history-list.grid .job-media{height:var(--card-size);min-height:180px}.history-list.grid .job-details{padding:13px;flex:1;gap:9px}.history-list.grid .job-prompt{font-size:11px;-webkit-line-clamp:2}.history-list.grid .job-meta{font-size:9px}.empty-state{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:350px;color:#919398;gap:12px;padding:35px}.empty-state>.icon{height:40px;width:40px;color:#62676b;stroke-width:1}.empty-state h3{margin:6px 0 0;color:#e6e6e5;font-size:20px;font-weight:500;letter-spacing:-.03em}.empty-state p{margin:0;font-size:12px;max-width:330px;line-height:1.6}.how-panel{padding:90px 32px 30px}.how-panel h1{font:650 clamp(24px,3vw,38px) Space,Inter,sans-serif;letter-spacing:-.065em;margin:10px 0}.how-panel>p{color:#83858a;font-size:12px;line-height:1.6}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}.how-art{height:170px;background:#121517;border-radius:16px;display:grid;place-items:center;overflow:hidden;position:relative;margin-bottom:20px}.how-art img{width:100%;height:100%;object-fit:cover}.how-art .icon{height:54px;width:54px;stroke-width:1;color:var(--lime)}.how-steps h3{font:650 19px Space,Inter,sans-serif;letter-spacing:-.055em;margin-bottom:9px}.how-steps p{font-size:12px;color:#818589;line-height:1.6}.how-footer{border-top:1px solid #24272a;padding-top:22px;margin-top:30px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#92979b;font-size:12px}.history-expanded .composer{display:none}.history-expanded{grid-template-columns:1fr}
.image-mode .studio-page{display:block;height:auto;min-height:calc(100dvh - var(--header));padding:0 16px 190px}.image-mode .composer{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 48px));height:auto;max-height:50dvh;z-index:20;border:1px solid #494b4d;box-shadow:0 14px 50px #0008;background:linear-gradient(130deg,#151819f5,#252727f5);backdrop-filter:blur(20px);display:grid;grid-template-columns:minmax(0,1fr) 150px;padding:16px 22px;border-radius:24px;gap:14px}.image-mode .composer-scroll{overflow:visible;display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.image-mode .work-tabs,.image-mode .preset-card,.image-mode .segment,.image-mode .ref-box,.image-mode #soundBtn,.image-mode #promptLabel,.image-mode #promptCount{display:none}.image-mode .prompt-box{min-height:45px;display:block;padding:0;background:none;border:0}.image-mode .prompt-box textarea{min-height:37px;height:45px;resize:none;font-size:13px}.image-mode .prompt-tools{position:absolute;left:21px;bottom:21px;margin:0;padding:9px 8px;z-index:1;border:1px solid #323538;border-radius:9px}.image-mode .prompt-tools button{background:none;font-size:12px}.image-mode .prompt-tools button:before{content:"+";font-size:17px;margin-right:8px}.image-mode .output-settings{display:flex;flex-direction:row;gap:7px;margin-left:115px;overflow-x:auto;scrollbar-width:none;min-height:41px}.image-mode .model-trigger{width:auto;flex-shrink:0;min-height:40px;gap:6px;flex-direction:row-reverse;border:1px solid #333737;border-radius:9px;background:#202323}.image-mode .model-trigger small{display:none}.image-mode .model-trigger strong{font-size:12px}.image-mode .model-trigger .chevron{display:none}.image-mode .setting-fields{display:flex;flex-shrink:0;gap:7px}.image-mode .setting-button{background:#202323;border:1px solid #333737;border-radius:9px;padding:8px 11px}.image-mode .setting-button small{display:none}.image-mode .composer-submit{background:none;display:flex;flex-direction:column;justify-content:center;padding:0}.image-mode .generate{min-height:58px;box-shadow:none;border-radius:14px}.image-mode .bridge-status{font-size:8px;justify-content:center}.image-mode .bridge-status .shortcut{display:none}.image-mode .result-panel{border:0;border-radius:0;overflow:visible;padding:0}.image-mode .history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--card-size),100%),1fr));gap:5px}.image-mode .history-card{display:block;border-radius:5px;overflow:hidden}.image-mode .job-media{min-height:330px}.image-mode .history-card .job-details{padding:12px}.image-mode .reference-list{position:static}.image-mode .reference-list:not(:empty){padding-bottom:2px}.image-mode .reference-item{height:45px;width:45px}.image-mode .how-panel{padding-top:65px}.image-examples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.image-examples button{padding:0;position:relative;overflow:hidden;border-radius:4px;height:clamp(260px,50vh,560px);background:#202325}.image-examples img{width:100%;height:100%;object-fit:cover}.image-examples span{position:absolute;bottom:14px;left:14px;border-radius:5px;background:#1119;padding:5px 8px;font-size:10px}.example-label{padding:5px;color:#707578;font-size:10px;display:flex;justify-content:space-between}
.assets-page{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - var(--header));border-top:1px solid #1e2022}.assets-sidebar{border-right:1px solid var(--line);padding:25px 16px;display:flex;flex-direction:column;gap:7px}.assets-sidebar h2{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:20px}.assets-sidebar button{padding:11px 12px;text-align:left;display:flex;justify-content:space-between;border-radius:7px;color:#a6a9ac}.assets-sidebar button.active{background:#252829;color:#fff}.assets-sidebar p{font-size:9px;letter-spacing:.1em;color:#72777b}.assets-sidebar small{font-size:11px;color:#787d80;line-height:1.7}.assets-sidebar hr{border:0;border-top:1px solid #2c2e31;width:100%;margin:20px 0}.assets-main{padding:28px 35px}.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px;margin-top:20px}.asset-item{position:relative;border-radius:10px;border:1px solid #313638;padding:0;background:#191c1e;overflow:hidden;text-align:left}.asset-item img,.asset-item video{width:100%;height:160px;object-fit:cover}.asset-item>svg{width:100%;height:160px;padding:50px;color:#819098}.asset-item b{font-size:11px;display:block;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.module-page{padding:30px;max-width:1500px;margin:auto}.module-hero{min-height:260px;border-radius:20px;display:flex;flex-direction:column;justify-content:center;padding:40px;background:radial-gradient(ellipse at 100% 30%,#4e382b55,transparent 60%),#1b1e21;border:1px solid #34383a;margin-bottom:25px}.module-hero h1{font:650 48px Space,Inter,sans-serif;letter-spacing:-.06em;margin-bottom:10px}.module-hero p{max-width:550px;color:#a2a7aa;line-height:1.7}.module-status{display:flex;justify-content:space-between;align-items:center;background:#211f16;border:1px solid #514a2b;border-radius:10px;padding:14px;color:#d9cc9d;font-size:12px;margin-bottom:25px;gap:15px}.module-layout{display:grid;grid-template-columns:1fr 2fr;gap:20px}.module-panel{padding:23px;background:#17191b;border:1px solid #303235;border-radius:15px;min-height:280px}.module-panel textarea{background:#202427;width:100%;height:150px;border:1px solid #42474a;border-radius:9px;padding:12px;resize:vertical;margin-bottom:12px}.module-panel h3{font-size:17px}.disabled-page{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:70vh;text-align:center;padding:30px}.disabled-page>span .icon{height:60px;width:60px;color:#555;margin-bottom:20px}.disabled-page p{color:var(--muted);margin-bottom:30px}
dialog{color:inherit;border:1px solid #414547;background:linear-gradient(130deg,#202528,#141719);border-radius:17px;padding:0;width:min(640px,calc(100vw - 28px));max-height:85dvh;box-shadow:0 25px 90px #000b;overflow:auto}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;gap:13px;padding:17px 20px;border-bottom:1px solid #ffffff0b;position:sticky;top:0;background:#1d2225;z-index:3}.dialog-heading h2{margin:0;font-size:17px;flex:1;letter-spacing:-.025em}.dialog-heading .icon-button{margin-left:auto}.dialog-content{padding:20px;color:#b7bcbe;line-height:1.6;font-size:12px}.dialog-content label{display:grid;gap:8px;margin:17px 0;color:#d7d9d9}.dialog-foot{padding:13px 20px;border-top:1px solid #373b3e;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#93999c}.dialog-foot a{color:var(--lime)}.search-field{border:1px solid #393f43;border-radius:9px;background:#252a2d;width:100%;padding:12px;color:white;outline:none;font-size:12px}.model-dialog{width:min(540px,calc(100vw - 28px))}.model-tools{padding:14px 17px 0;position:sticky;top:65px;z-index:2;background:#1e2426}.family-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:12px 0}.family-tabs button{padding:7px 10px;border-radius:6px;background:#292f31;color:#a6aeb0;font-size:10px;white-space:nowrap}.family-tabs button.active{background:#503422;color:var(--lime)}.model-list{padding:6px 12px 18px;min-height:180px}.model-group-label{color:#8c959a;font-size:10px;font-weight:450;margin:15px 8px 6px}.model-option{display:flex;align-items:center;gap:11px;text-align:left;width:100%;padding:10px;border:1px solid transparent;border-radius:10px}.model-option:hover{background:#343a3c}.model-option.selected{border-color:#503a2c;background:#323934}.model-option strong{font-size:12px;display:block;font-weight:500}.model-option small{color:#8c999e;display:block;margin-top:5px;font-size:10px}.model-option .check{margin-left:auto;color:var(--lime)}.search-results{padding:12px;max-height:55vh;overflow:auto}.search-result{display:flex;gap:12px;align-items:center;padding:12px;width:100%;text-align:left;border-radius:8px}.search-result:hover{background:#333a3c}.search-result small{margin-left:auto;font-size:10px;color:#9ea7ac}.floating-menu{position:fixed;top:51px;right:16px;z-index:50;width:260px;border:1px solid #3b4245;background:#1c2225f9;box-shadow:0 15px 50px #0009;border-radius:12px;padding:8px;backdrop-filter:blur(20px)}.account-info{padding:13px;border-bottom:1px solid #373d40;margin-bottom:6px}.account-info b,.account-info small{display:block}.account-info small{color:#8d999e;font-size:10px;margin-top:7px}.floating-menu button{padding:11px;border-radius:7px;display:block;width:100%;text-align:left;color:#cbd0d3;font-size:12px}.floating-menu button:hover{background:#30373b}.notification-menu{right:60px;width:320px;max-height:60vh;overflow:auto}.notification-menu p{font-size:12px;padding:10px;color:#9ea7ac;line-height:1.6}.setting-popover{position:fixed;z-index:70;background:#242a2c;border:1px solid #4a5255;border-radius:10px;box-shadow:0 18px 30px #0008;padding:6px;min-width:140px;max-height:260px;overflow:auto}.setting-popover button{display:flex;justify-content:space-between;gap:24px;padding:10px;width:100%;font-size:12px;border-radius:6px}.setting-popover button:hover,.setting-popover button.active{background:#3a4342;color:var(--lime)}.toast-stack{position:fixed;right:20px;bottom:22px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:min(400px,calc(100vw - 40px));pointer-events:none}.toast{padding:13px 17px;background:#252c2e;border:1px solid #505b5f;border-radius:11px;box-shadow:0 10px 35px #0008;font-size:12px;line-height:1.5}.toast.error{border-color:#994f46;color:#ffc2af}.detail-dialog{width:min(1000px,calc(100vw - 28px))}.detail-media{display:flex;align-items:center;justify-content:center;background:#080a0b;border-radius:9px;min-height:200px;max-height:55vh;overflow:hidden;margin-bottom:20px}.detail-media img,.detail-media video{max-height:55vh;max-width:100%;object-fit:contain}.detail-meta{display:flex;gap:15px;flex-wrap:wrap;color:#8b989e;font-size:11px;margin-bottom:15px}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preset-option{padding:25px 15px;border:1px solid #3b4244;border-radius:12px;background:#232a2c;text-align:left}.preset-option:hover{border-color:var(--lime)}.preset-option b{display:block;font:650 19px Space,Inter,sans-serif;margin-bottom:9px}.preset-option small{color:#94a0a3;font-size:10px}.connection-details{border:1px solid #394347;border-radius:9px;padding:12px;background:#161d1f}
@media(min-width:1600px){.studio-page{grid-template-columns:380px 1fr}.ref-box{min-height:160px}.preset-card{min-height:165px}.prompt-box{min-height:210px}.prompt-box textarea{min-height:140px}.topbar{gap:25px}.topbar nav{gap:23px}}
@media(max-width:1200px){.topbar nav{gap:13px}.nav-item.extra-nav{display:none}.quick-tools{grid-template-columns:repeat(2,1fr)}.quick-tool .quick-top{margin-bottom:10px}.bridge-card h1{font-size:30px}.history-controls input{display:none}.inspiration-grid{grid-template-columns:repeat(4,1fr)}.inspiration-grid .inspiration-card:last-child{display:none}.how-panel{padding:60px 14px}.how-steps{gap:13px}.how-art{height:135px}}
@media(max-width:950px){.topbar{gap:14px}.nav-item.secondary-nav{display:none}.top-actions{gap:2px}.studio-page{grid-template-columns:300px minmax(0,1fr);padding:0 10px 10px}.result-panel{padding:10px}.history-card{display:block}.job-media{min-height:220px}.history-toolbar{flex-wrap:wrap}.history-controls{margin-left:0}.how-steps{grid-template-columns:1fr}.how-art{height:160px}.image-mode .composer{grid-template-columns:minmax(0,1fr) 110px;padding:15px}.image-mode .output-settings{margin-left:100px}.image-mode .prompt-tools{left:14px}.image-mode .generate{min-height:54px;font-size:12px}.image-examples{grid-template-columns:repeat(3,1fr)}.image-examples button:nth-child(4){display:none}.explore-launch{grid-template-columns:1fr 1.2fr}.hero-card{flex-basis:55%}.inspiration-grid{grid-template-columns:repeat(3,1fr)}.inspiration-grid .inspiration-card:nth-child(4){display:none}.module-layout{grid-template-columns:1fr}.assets-page{grid-template-columns:180px 1fr}.assets-main{padding:25px}.mega-menu{right:30px}.mega-links{grid-template-columns:1fr}}
@media(max-width:650px){:root{--header:54px}.topbar{padding:0 12px;gap:13px}.topbar nav{gap:12px}.nav-item{font-size:12px}.nav-divider{display:none}.top-actions .admin-link,.top-actions .optional,.top-actions [data-action=notifications]{display:none}.top-actions .small-button{padding:7px}.top-actions .icon-button{width:28px}.brand{width:23px}.brand.brand-logo{width:30px;overflow:hidden}.brand.brand-logo img{height:30px;max-width:none}.avatar{width:28px;height:28px;margin-left:3px}.mega-menu{left:10px;right:10px;grid-template-columns:1fr;gap:15px}.mega-links{grid-template-columns:1fr 1fr}.preview-banner{font-size:9px;text-align:center;padding:7px}.explore-page{padding:8px 12px 0}.hero-carousel{gap:12px}.hero-card{flex-basis:88%;min-width:260px}.hero-art{height:220px}.hero-caption{font-size:30px}.explore-launch{grid-template-columns:1fr;margin-top:15px;gap:14px}.bridge-card{padding:22px}.quick-tools{grid-template-columns:1fr 1fr}.quick-tool{padding:14px}.quick-tool .quick-top{margin-bottom:18px}.discovery-section{margin:32px 0}.section-heading{align-items:start}.section-heading h2{font-size:22px}.section-heading .small-button{font-size:10px;padding:8px}.inspiration-grid{grid-template-columns:1fr 1fr}.inspiration-grid .inspiration-card:nth-child(3){display:none}.inspiration-card figure{height:230px}.studio-page{display:flex;flex-direction:column;height:auto;min-height:100vh;padding:0 8px 14px;gap:14px}.composer{width:100%;min-height:620px;height:auto;padding:0 10px 12px;overflow:visible}.composer-scroll{overflow:visible;min-height:480px}.preset-card{min-height:135px}.prompt-box{min-height:150px}.work-tabs{justify-content:flex-start;gap:24px}.result-panel{min-height:420px;overflow:visible}.history-card{display:block}.history-controls{margin-left:auto}.history-toolbar{position:static}.history-tabs button{font-size:10px;padding:8px}.view-switch button span:not([data-icon]){display:none}.history-controls .icon-button{width:25px}.how-panel{padding:28px 10px}.how-panel h1{font-size:26px}.how-steps{grid-template-columns:1fr;gap:20px}.how-art{height:180px;margin-bottom:12px}.how-footer{flex-direction:column;align-items:start}.image-mode .studio-page{padding:0 8px 220px}.image-mode .composer{width:calc(100% - 20px);bottom:10px;min-height:0;border-radius:18px;display:block;padding:14px 14px 10px}.image-mode .composer-scroll{min-height:0}.image-mode .prompt-box{min-height:45px}.image-mode .output-settings{margin:0 0 8px 96px;height:37px}.image-mode .prompt-tools{left:14px;bottom:64px;padding:7px 6px}.image-mode .composer-submit{padding:0;display:flex;flex-direction:row;align-items:center;gap:10px}.image-mode .generate{width:130px;min-height:37px;font-size:12px;order:2}.image-mode .bridge-status{flex:1;justify-content:flex-start;padding-top:0}.image-mode .generate-symbol{display:none}.image-mode .setting-button{font-size:11px;padding:6px 9px}.image-mode .model-trigger strong{font-size:11px}.image-examples{grid-template-columns:1fr 1fr}.image-examples button:nth-child(3){display:none}.image-mode .history-list{grid-template-columns:1fr 1fr}.image-mode .job-media{min-height:220px}.image-mode .history-card .job-details{padding:10px}.image-mode .job-meta{display:none}.image-mode .job-actions{flex-wrap:wrap;justify-content:start}.assets-page{display:block}.assets-sidebar{border-right:0;padding:15px;display:flex;flex-direction:row;flex-wrap:wrap}.assets-sidebar h2{width:100%;margin:0 0 4px}.assets-sidebar hr,.assets-sidebar p,.assets-sidebar small{display:none}.assets-sidebar button{padding:8px;font-size:11px}.assets-main{padding:18px 14px}.asset-grid{grid-template-columns:repeat(2,1fr)}.module-page{padding:18px 12px}.module-hero{padding:28px;min-height:240px}.module-hero h1{font-size:35px}.module-status{align-items:start;font-size:11px}.module-panel{padding:18px}.floating-menu{right:10px}.notification-menu{right:10px;width:300px}footer{flex-direction:column;text-align:center;gap:10px}.dialog-heading{padding:13px 16px}.dialog-content{padding:16px}.family-tabs{padding:10px 0}.model-tools{top:61px}.dialog-foot{font-size:9px;padding:12px}.preset-option b{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.preview-banner .preview-exit{padding:0;color:inherit;text-decoration:underline;font-size:inherit}.preview-banner .preview-exit:hover{color:#fff}

/* Model mega menu: a compact Higgsfield-like discovery surface
   backed by the same exact catalog/readiness state as the picker. A disabled
   model remains visible with its real readiness reason; it is never silently
   replaced with a neighboring model. */
.mega-menu{grid-template-columns:minmax(180px,.72fr) minmax(360px,1.8fr);gap:24px}
.mega-menu>section{min-width:0}
.mega-menu .mega-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.mega-menu .mega-section-heading h3{margin-bottom:4px}
.mega-menu .mega-section-heading p{margin:0;font-size:10px}
.mega-menu .mega-links{grid-template-columns:1fr}
.mega-menu .mega-link{min-height:48px}
.mega-menu .mega-link>[data-icon],.mega-menu .mega-link>.icon{width:19px;height:19px;color:#aebda8;flex:0 0 19px}
.mega-menu .mega-link:hover>[data-icon],.mega-menu .mega-link:hover>.icon{color:var(--lime)}
.mega-model-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.mega-model-group{min-width:0}
.mega-model-group h4{margin:0 0 6px;color:#8c9595;font-size:10px;font-weight:500;letter-spacing:.02em}
.mega-model-links{display:grid;gap:3px}
.mega-model-link{display:flex;align-items:center;gap:8px;min-width:0;width:100%;padding:7px 8px;border:1px solid transparent;border-radius:8px;text-align:left;color:#e6eae5}
.mega-model-link:hover:not(:disabled){background:#ffffff0d;border-color:#ffffff0d}
.mega-model-link:disabled{cursor:not-allowed;opacity:.65}
.mega-model-link .model-mark{width:25px;height:25px;border-radius:6px;font-size:14px;flex:0 0 25px}
.mega-model-copy{display:grid;gap:3px;min-width:0;flex:1}
.mega-model-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:550}
.mega-model-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8d9697;font-size:9px}
.mega-model-link.availability-ready .mega-model-copy small{color:#e7a57c}
.mega-model-link.availability-error .mega-model-copy small{color:#f1aaa0}
.mega-model-link.availability-muted .mega-model-copy small{color:#d3be91}
.mega-model-badge{flex:0 0 auto;padding:2px 5px;border:1px solid #ffffff14;border-radius:4px;color:#c9d0c5;font-size:8px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.mega-model-all{width:100%;margin-top:7px;padding:7px 8px;font-size:10px}
.mega-empty{margin:0;color:#858d8d;font-size:10px}
.mega-pipeline{grid-column:1/-1;padding-top:10px;border-top:1px solid #ffffff09}
.mega-pipeline h3{margin-bottom:5px}
.mega-pipeline p{margin:0;font-size:10px}
.mega-admin{grid-column:1/-1;padding-top:10px;border-top:1px solid #ffffff09}
.mega-admin-actions{display:flex;flex-wrap:wrap;gap:7px}
.nav-item.menu-open{color:var(--lime)}
/* The hover picker is intentionally model-only. Keep it wide enough for
   names/status text, without reserving an empty Features column. */
.mega-menu.models-only{left:16px;right:16px;max-width:1180px;margin-inline:auto;grid-template-columns:minmax(0,1fr);border-radius:20px}
.mega-menu.models-only .mega-models-only{min-width:0}
.mega-menu.models-only .mega-model-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.mega-menu.models-only.is-contextual .mega-model-groups{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.mega-menu.models-only.is-contextual .mega-model-group{grid-column:1/-1}
.mega-menu.models-only.is-contextual .mega-model-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px}
.mega-menu.models-only.is-contextual .mega-model-group h4{display:none}
/* Image and Video each reveal the same model-only surface, showing only
   enabled workflows. */
.mega-menu.is-contextual{left:16px;right:16px;max-width:1180px;margin-inline:auto;padding:24px;grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);gap:30px;border-radius:20px;background:#1b1d1efc;scrollbar-width:thin;scrollbar-color:#44484a transparent}
.mega-menu.is-contextual h3{font-size:13px;letter-spacing:0;margin-bottom:12px;text-transform:none}
.mega-menu.is-contextual .mega-section-heading{align-items:center;margin-bottom:8px}
.mega-menu.is-contextual .mega-section-heading p{display:none}
.mega-menu.is-contextual .mega-model-groups{grid-template-columns:minmax(0,1fr)}
.mega-menu.is-contextual .mega-model-group h4{display:none}
.mega-menu.is-contextual .mega-link,.mega-menu.is-contextual .mega-model-link{min-height:68px;padding:9px;border-radius:12px;gap:14px}
.mega-menu.is-contextual .mega-link>.icon{box-sizing:content-box;width:24px;height:24px;flex:0 0 24px;padding:13px;border-radius:14px;background:#25282a;color:#f0f2ef}
.mega-menu.is-contextual .mega-model-link .model-mark{width:50px;height:50px;flex-basis:50px;border-radius:14px;font-size:25px}
.mega-menu.is-contextual .mega-link b,.mega-menu.is-contextual .mega-model-copy b{font-size:14px;font-weight:550}
.mega-menu.is-contextual .mega-link small,.mega-menu.is-contextual .mega-model-copy small{font-size:12px;line-height:1.4;color:#959b98}
.mega-menu.is-contextual .mega-model-copy{gap:5px}
.mega-menu.is-contextual .mega-model-all{margin-top:10px;min-height:37px;font-size:12px}
.mega-menu.is-contextual .mega-pipeline{display:none}
/* Contextual Image/Video menus contain the model list only. The legacy
   two-column shell must not reserve a dead column. */
.mega-menu.models-only.is-contextual{grid-template-columns:minmax(0,1fr)}
/* Provider marks use inline vector paths instead of placeholder letters. The
   same mark is reused in the picker, selected-model control and History so
   the model identity stays recognizable everywhere in the customer UI. */
.model-mark-logo{color:#f7f5f3;overflow:hidden}
.model-mark-logo .model-logo-svg{display:block;width:66%;height:66%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.model-mark-logo.brand-openai{color:#f1f4f1}
.model-mark-logo.brand-google{color:#8fc7ff}
.model-mark-logo.brand-kling{color:#ff751f}
.model-mark-logo.brand-seedream{color:#f6a4ff}
.model-mark-logo.brand-seedance{color:#ff91c8}
.model-mark-logo.brand-flux{color:#b4d2ff}
.model-mark-logo.brand-xai{color:#f3f5f4}
.model-mark-logo.brand-recraft{color:#ffb7e8}
.model-mark-logo.brand-minimax{color:#92ffe1}
.model-mark-logo.brand-wan{color:#ffd27d}
.model-mark-logo.brand-generic{color:#ff6200}
.mega-menu.is-contextual .model-mark-logo .model-logo-svg{width:66%;height:66%;stroke-width:1.6}
@media(max-width:650px){
  .mega-menu.models-only{left:10px;right:10px}
  .mega-menu.models-only .mega-model-groups{grid-template-columns:minmax(0,1fr);gap:12px}
  .mega-menu.models-only.is-contextual .mega-model-links{grid-template-columns:minmax(0,1fr)}
  .mega-menu.is-contextual{left:10px;right:10px;padding:16px;grid-template-columns:minmax(0,1fr);gap:18px;border-radius:16px}
  .mega-menu.is-contextual .mega-links{grid-template-columns:minmax(0,1fr)}
  .mega-menu.is-contextual .mega-link,.mega-menu.is-contextual .mega-model-link{min-height:58px;padding:7px;gap:11px}
  .mega-menu.is-contextual .mega-link>.icon{padding:10px;width:22px;height:22px;flex-basis:22px;border-radius:11px}
  .mega-menu.is-contextual .mega-model-link .model-mark{width:42px;height:42px;flex-basis:42px;border-radius:11px}
  .mega-menu.is-contextual .mega-link b,.mega-menu.is-contextual .mega-model-copy b{font-size:13px}
  .mega-menu.is-contextual .mega-link small,.mega-menu.is-contextual .mega-model-copy small{font-size:11px}
}
@media(max-width:650px){
  .mega-menu{grid-template-columns:1fr;gap:14px}
  .mega-model-groups{grid-template-columns:1fr;gap:12px}
  .mega-menu .mega-links{grid-template-columns:1fr 1fr}
  .mega-pipeline,.mega-admin{grid-column:auto}
}

/* Audio workspace: scoped so the existing Image/Video studio keeps its layout. */
.audio-page { min-height: calc(100dvh - 72px); background: #0b0d0d; color: #f4f7f5; }
.audio-workspace { max-width: 1600px; margin: 0 auto; padding: 26px clamp(14px, 3vw, 44px) 60px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
.audio-sidebar { border-right: 1px solid #ffffff12; padding-right: 18px; }
.audio-eyebrow { color: #e99c6c; letter-spacing: .14em; font-size: 10px; font-weight: 800; margin: 0 0 10px; }
.audio-sidebar h2, .audio-header h1, .audio-section-heading h2 { margin: 0; }
.audio-sidebar nav { display: grid; gap: 5px; margin-top: 22px; }
.audio-sidebar nav button { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 10px; background: transparent; color: #a9b1af; padding: 11px; text-align: left; cursor: pointer; }
.audio-sidebar nav button.active, .audio-sidebar nav button:hover, .audio-sidebar nav button:focus-visible { color: #fff; background: #ffffff12; }
.audio-sidebar nav button span { width: 24px; color: #e99c6c; text-align: center; }
.audio-sidebar nav button i { margin-left: auto; color: #f7bf74; font-style: normal; }
.audio-sidebar-note, .audio-muted { margin-top: 25px; color: #7e8986; font-size: 12px; line-height: 1.55; }
.audio-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.audio-header h1 { font-size: clamp(26px, 4vw, 42px); letter-spacing: -.03em; }
.audio-header p:not(.audio-eyebrow) { color: #9da6a4; margin: 8px 0 0; }
.audio-library-button, .audio-text-button, .audio-job-actions button, .audio-voice-card footer button, .audio-dictionary-card button, .audio-upload { border: 1px solid #ffffff18; background: #171b1b; color: #f5f7f5; border-radius: 9px; padding: 9px 12px; cursor: pointer; }
.audio-library-button:hover, .audio-text-button:hover, .audio-job-actions button:hover { border-color: #e99c6c; }
.audio-tabs { display: flex; gap: 4px; border-bottom: 1px solid #ffffff14; margin-bottom: 18px; }
.audio-tabs button { border: 0; border-bottom: 2px solid transparent; color: #9ca5a3; background: none; padding: 11px 14px; cursor: pointer; }
.audio-tabs button.active { border-color: #e99c6c; color: #fff; }
.audio-composer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }
.audio-input-panel, .audio-settings-panel, .audio-dictionary-editor, .audio-dictionary-card, .audio-job, .audio-unsupported { border: 1px solid #ffffff12; background: #111515; border-radius: 14px; padding: 18px; }
.audio-input-panel, .audio-settings-panel { display: grid; gap: 15px; align-content: start; }
.audio-control { display: grid; gap: 8px; color: #c2cbc8; font-size: 13px; }
.audio-control > label { font-weight: 700; color: #e8ecea; }
.audio-control textarea, .audio-control input[type=text], .audio-control input[type=number], .audio-control select, .audio-dictionary-editor input, .audio-dictionary-editor textarea, .audio-voice-filters input, .audio-voice-filters select { width: 100%; box-sizing: border-box; border: 1px solid #ffffff18; background: #0a0d0d; color: #f1f4f3; border-radius: 8px; padding: 10px; }
.audio-control textarea { min-height: 100px; resize: vertical; }
.audio-control textarea:focus, .audio-control input:focus, .audio-control select:focus { outline: 2px solid #e99c6c66; border-color: #e99c6c; }
.audio-text-meta, .audio-upload, .audio-file, .audio-speaker, .audio-section-heading, .audio-job header, .audio-job-actions, .audio-rule, .audio-dictionary-card, .audio-voice-card-head { display: flex; align-items: center; gap: 10px; }
.audio-text-meta { justify-content: space-between; color: #81908b; font-size: 11px; }
.audio-text-meta button { border: 0; color: #e99c6c; background: none; cursor: pointer; }
.audio-warning { border: 1px solid #e7a25a66; background: #2b1c0c; color: #ffd6a8; border-radius: 9px; padding: 10px 12px; }
.audio-unsupported { margin-bottom: 16px; border-color: #e7a25a55; background: #20180f; color: #ffd6a8; }
.audio-unsupported p { color: #f4c88f; }
.audio-voice-trigger { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; border: 1px solid #ffffff18; background: #0a0d0d; color: #fff; border-radius: 8px; padding: 9px; cursor: pointer; }
.audio-voice-trigger small, .audio-file small, .audio-voice-card small, .audio-job small { color: #8a9590; display: block; }
.audio-voice-avatar { display: grid; place-items: center; width: 32px; height: 32px; background: #263425; color: #e99c6c; border-radius: 50%; }
.audio-upload { min-height: 110px; border-style: dashed; flex-direction: column; justify-content: center; text-align: center; }
.audio-upload input { max-width: 100%; }
.audio-file { justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #ffffff0d; }
.audio-file audio { max-width: min(260px, 45%); }
.audio-speakers { display: grid; gap: 8px; }
.audio-speaker { background: #0a0d0d; padding: 9px; border-radius: 8px; }
.audio-speaker > b { color: #e99c6c; }
.audio-speaker button, .audio-speaker input { min-width: 0; background: #151a19; border: 1px solid #ffffff18; color: #fff; border-radius: 7px; padding: 7px; }
.audio-speaker label { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; }
.audio-submit-panel { margin-top: 10px; border-top: 1px solid #ffffff12; padding-top: 14px; display: grid; gap: 8px; }
.audio-price { display: flex; justify-content: space-between; color: #8d9894; font-size: 12px; }
.audio-price b { color: #fff; font-size: 15px; }
.audio-primary { border: 0 !important; background: #e99c6c !important; color: #10130f !important; font-weight: 800; border-radius: 9px; padding: 12px 16px; cursor: pointer; }
.audio-primary:disabled, .audio-control button:disabled, .audio-control input:disabled, .audio-control select:disabled { opacity: .45; cursor: not-allowed; }
.audio-spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: audio-spin .8s linear infinite; }
@keyframes audio-spin { to { transform: rotate(360deg); } }
.audio-history { display: grid; gap: 12px; }
.audio-job header { justify-content: space-between; }
.audio-job-status { font-size: 12px; border-radius: 99px; padding: 4px 8px; background: #ffffff12; }
.audio-job-status.status-completed { color: #e99c6c; }.audio-job-status.status-failed { color: #ffad9e; }
.audio-job-progress { display: grid; gap: 7px; margin: 14px 0; color: #9da6a4; font-size: 12px; }.audio-job-progress progress { width: 100%; accent-color: #e99c6c; }
.audio-output-item { display: grid; gap: 8px; margin-top: 12px; }.audio-output-item audio { width: 100%; }.audio-output-item pre { white-space: pre-wrap; max-height: 240px; overflow: auto; color: #d7ddda; background: #080a0a; padding: 12px; border-radius: 8px; }
.audio-job-actions { flex-wrap: wrap; margin-top: 10px; }.audio-job-actions button { font-size: 12px; }.audio-empty { text-align: center; color: #9ba7a3; padding: 50px 20px; }.audio-empty span { color: #e99c6c; font-size: 32px; }
.audio-dictionaries { display: grid; gap: 14px; }.audio-section-heading { justify-content: space-between; }.audio-dictionary-card { justify-content: space-between; flex-wrap: wrap; }.audio-dictionary-card div { margin-right: auto; }.audio-rule { align-items: stretch; flex-wrap: wrap; }.audio-rule input, .audio-rule select { flex: 1 1 120px; min-width: 0; }.audio-rule label { display: flex; align-items: center; }.audio-dictionary-editor { display: grid; gap: 12px; }.audio-rules { display: grid; gap: 8px; }.audio-dictionary-preview { white-space: pre-wrap; color: #b9c7bf; }
.audio-voice-dialog { width: min(1000px, calc(100vw - 24px)); max-height: min(780px, calc(100dvh - 24px)); background: #101414; color: #fff; border: 1px solid #ffffff20; border-radius: 14px; padding: 0; }.audio-voice-dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }.audio-voice-dialog > header { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ffffff14; }.audio-voice-dialog > header button { border: 0; background: none; color: #fff; font-size: 24px; cursor: pointer; }.audio-voice-body { padding: 16px 20px 24px; overflow: auto; max-height: calc(100dvh - 120px); }.audio-provider-tabs, .audio-voice-filters { display: flex; flex-wrap: wrap; gap: 7px; }.audio-provider-tabs button { border: 1px solid #ffffff18; background: #151a19; color: #bbc4c0; border-radius: 99px; padding: 8px 11px; cursor: pointer; }.audio-provider-tabs button.active { border-color: #e99c6c; color: #fff; }.audio-voice-filters { margin: 14px 0; }.audio-voice-filters input { flex: 1 1 220px; }.audio-voice-filters select, .audio-voice-filters label { flex: 0 1 140px; }.audio-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }.audio-voice-card { border: 1px solid #ffffff14; background: #161b1a; border-radius: 10px; padding: 13px; }.audio-voice-card-head { align-items: flex-start; }.audio-voice-card-head > div { flex: 1; }.audio-voice-card h3 { margin: 0; }.audio-voice-card-head button { border: 0; background: none; color: #ffd15a; font-size: 20px; cursor: pointer; }.audio-voice-card p { min-height: 34px; color: #9da7a3; font-size: 12px; }.audio-voice-tags { display: flex; flex-wrap: wrap; gap: 4px; }.audio-voice-tags span { font-size: 11px; color: #e99c6c; background: #e99c6c1a; padding: 3px 6px; border-radius: 99px; }.audio-voice-card footer { display: flex; gap: 6px; margin-top: 12px; }.audio-voice-card footer button { padding: 7px 8px; font-size: 11px; }
@media (max-width: 850px) { .audio-workspace { grid-template-columns: 1fr; }.audio-sidebar { border-right: 0; border-bottom: 1px solid #ffffff12; padding: 0 0 13px; }.audio-sidebar nav { display: flex; overflow-x: auto; }.audio-sidebar nav button { flex: 0 0 auto; }.audio-sidebar nav button b { display: none; }.audio-sidebar-note { display: none; }.audio-composer-grid { grid-template-columns: 1fr; }.audio-header { flex-direction: column; }.audio-library-button { align-self: stretch; } }
@media (max-width: 520px) { .audio-workspace { padding: 18px 11px 40px; }.audio-input-panel, .audio-settings-panel { padding: 12px; }.audio-file { align-items: flex-start; flex-wrap: wrap; }.audio-file audio { max-width: 100%; width: 100%; }.audio-rule { display: grid; grid-template-columns: 1fr 1fr; }.audio-rule label { font-size: 11px; }.audio-voice-body { padding: 12px; }.audio-voice-grid { grid-template-columns: 1fr; } }
.asset-tile{position:relative;min-width:0}.asset-fav{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:8px;background:#0b0d0dcc;color:#aaa;display:grid;place-items:center}.asset-fav:hover,.asset-fav.active{color:var(--lime)}.asset-fav .icon{width:14px;height:14px}.image-examples .example-label{grid-column:1/-1}

/* Image model picker: match Higgsfield's quiet, search-first surface while
   keeping Picsart readiness and observed controls available to assistive tech,
   tooltips, and the Admin catalogue. The full diagnostics remain in the
   button's accessible name/title instead of taking over every row visually. */
@media (min-width: 651px) {
  .image-mode #modelDialog .dialog-heading {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: block;
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  .image-mode #modelDialog .dialog-heading h2 { display: none; }
  .image-mode #modelDialog .dialog-heading .icon-button {
    pointer-events: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #8e9294;
  }
  .image-mode #modelDialog .model-tools {
    top: 0;
    padding: 12px 12px 0;
    background: #171b1d;
  }
  .image-mode #modelDialog .search-field {
    height: 32px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 7px;
    border-color: #ffffff18;
    background: #202426;
  }
  .image-mode #modelDialog .family-tabs { display: none; }
  .image-mode #modelDialog .model-list { padding: 3px 10px 12px; }
  .image-mode #modelDialog .model-group-label {
    margin: 12px 8px 6px;
    color: #858c90;
    letter-spacing: .01em;
  }
  .image-mode #modelDialog .model-option {
    min-height: 56px;
    padding: 8px 10px;
    gap: 10px;
    border-radius: 10px;
  }
  .image-mode #modelDialog .model-option strong { font-size: 12px; }
  .image-mode #modelDialog .model-option small {
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .image-mode #modelDialog .model-option small:not(:first-of-type) { display: none; }
  .image-mode #modelDialog .dialog-foot { padding: 8px 12px; font-size: 9px; }
  .image-mode .image-examples button > span { display: none; }

  /* Higgsfield keeps credits in the account/CTA surfaces while the studio
     header stays focused on creation tools. The local CTA still shows the
     exact Picsart-derived cost, so hiding this duplicate pill only changes
     the desktop header geometry. */
  body:has(#studioPage:not(.hidden)) .top-actions .credit-pill { display: none; }

  /* Keep the editorial canvas breathing room aligned with the reference
     viewport; the image dock remains independently centered and unchanged. */
  body:not(.image-mode) .studio-page { padding-right: 16px; }
  #resultPanel:has(#motionPanel) .motion-panel { width: 100%; }

  /* Match the reference's shorter video rail and full-width CTA. The rail
     remains scrollable, so Picsart-specific fields are not removed; only the
     duplicate connection row is taken out of the visual chrome. */
  body:not(.image-mode) .studio-page .composer {
    height: calc(100dvh - 102px);
    max-height: calc(100dvh - 102px);
  }
  body:not(.image-mode) .studio-page .composer-submit { padding-inline: 0; }
  body:not(.image-mode) .studio-page .composer-submit .generate { width: 100%; }
  body:not(.image-mode) .studio-page .composer-submit .bridge-status { display: none; }
}

/* Control refinements keep the existing Studio grids and mobile layout intact.
   Reference: Higgsfield's neutral controls, 6px trigger corners, 12px popovers,
   white-8% selection state, and 200ms standard easing. */
:root {
  --control-surface: #1c1e20;
  --control-hover: #2b2d2f;
  --control-selected: #ffffff14;
  --control-text: #f7f7f8;
  --control-muted: #9b9c9f;
  --control-ease: cubic-bezier(.4, 0, .2, 1);
}

:is(.small-button, .lime-button, .icon-button, .text-button, .model-trigger,
    .setting-button, .model-option, .family-tabs button, .segment button,
    .work-tabs button, .history-tabs button, .view-switch button,
    .setting-popover button, .floating-menu button, .job-actions button,
    .job-actions a, .reference-item button) {
  transition: background-color 200ms var(--control-ease),
    border-color 200ms var(--control-ease), color 200ms var(--control-ease),
    box-shadow 200ms var(--control-ease), transform 200ms var(--control-ease);
}

:is(.small-button, .icon-button, .text-button, .model-trigger,
    .setting-button, .model-option, .family-tabs button, .segment button,
    .history-tabs button, .view-switch button, .setting-popover button):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.small-button { border-color: #ffffff0d; background: #202224; }
.icon-button { color: #a2a3a6; }
:is(.small-button, .icon-button):hover:not(:disabled) {
  background: #ffffff14;
  color: var(--control-text);
}
:is(.small-button, .icon-button, .lime-button, .model-trigger,
    .setting-button, .setting-popover button):active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled { transform: none; }

.work-tabs button { transition: color 200ms var(--control-ease), border-color 200ms var(--control-ease); }
.work-tabs button:hover:not(:disabled) { color: #f7f7f8; }
.segment { background: #17191b; border: 1px solid #ffffff05; }
.segment button:hover:not(.active):not(:disabled) { color: #dddde0; background: #ffffff08; }
.segment button.active { background: #ffffff14; box-shadow: 0 1px 3px #0003, inset 0 1px #ffffff05; }
.reference-library-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px;border:1px solid #2b2e30;border-radius:10px;background:#141617;scrollbar-width:none;margin:4px 0 8px}.reference-library-tabs::-webkit-scrollbar{display:none}.reference-library-tabs button{flex:0 0 auto;color:#858b8d;font-size:10px;line-height:1;padding:8px 10px;border-radius:7px;white-space:nowrap}.reference-library-tabs button:hover{color:#fff;background:#ffffff0a}.reference-library-tabs button.active{color:#10130a;background:#f2eae5}.reference-library-tabs + .muted{display:block;margin:0 0 8px;color:#8c9294;font-size:10px;line-height:1.4}

.prompt-box {
  border-color: #ffffff0a;
  transition: border-color 200ms var(--control-ease), box-shadow 200ms var(--control-ease);
}
.prompt-box:focus-within {
  border-color: #7e573f;
  box-shadow: 0 0 0 2px #ff620010;
}
.prompt-tools button {
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid #ffffff08;
  color: #b2b3b6;
}
.prompt-tools button:hover:not(:disabled) { background: #ffffff14; color: #f7f7f8; }
.image-reference-button { display: none; }
#soundBtn[aria-pressed="true"] { color: #eac3ab; border-color: #ff62002b; background: #ff62000a; }
.ref-box { transition: background-color 200ms var(--control-ease), border-color 200ms var(--control-ease); }
.reference-item button:hover { background: #151515; color: white; }

.model-trigger {
  background: #26282a;
  border: 1px solid #ffffff07;
  border-radius: 8px;
  gap: 8px;
  color: var(--control-text);
}
/* Higgsfield places the provider mark before the selected model label.  The
   DOM keeps the label first so assistive technology still reads it naturally;
   flex ordering only changes the visual treatment in the closed trigger. */
.model-trigger > .model-mark { order: -1; }
.model-trigger > span:not(.model-mark):not(.chevron) { min-width: 0; }
.model-trigger strong { line-height: 1.35; }
.model-trigger small { color: #9d9ea1; }
.model-trigger:hover:not(:disabled),
.model-trigger[aria-expanded="true"] { background: #303234; border-color: #ffffff14; }
.chevron { transition: transform 200ms var(--control-ease), color 200ms var(--control-ease); }
.model-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); color: #f7f7f8; }

.setting-fields { gap: 6px; }
.setting-fields .setting-button {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--control-surface);
  color: var(--control-text);
  text-align: left;
  white-space: nowrap;
}
.setting-fields .setting-button small {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.setting-fields .setting-button strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.setting-fields .setting-button > span { color: #8e9093; line-height: 1; transition: transform 200ms var(--control-ease); }
.setting-fields .setting-button:hover:not(:disabled),
.setting-fields .setting-button[aria-expanded="true"] { background: var(--control-hover); }
.setting-fields .setting-button[aria-expanded="true"] { border-color: #ffffff1f; }
.setting-fields .setting-button[aria-expanded="true"] > span { transform: rotate(180deg); color: #f7f7f8; }
.setting-fields .setting-button:disabled { opacity: .7; background: #17191b; cursor: default; }
.setting-fields .setting-button:disabled strong { color: #b2b3b6; }

.setting-popover {
  width: 200px;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: min(480px, calc(100dvh - 16px));
  background: #171717;
  border: 1px solid #222;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px #0005, 0 8px 10px -6px #0005;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #424242 transparent;
  overscroll-behavior: contain;
}
.setting-popover-title {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 10px 6px;
  color: #a3a3a7;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
}
.setting-popover button {
  min-height: 46px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 4px;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #f7f7f8;
  font-variant-numeric: tabular-nums;
}
.setting-option-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  color: #d6dadd;
}
.setting-option-icon .ratio-icon { width: 20px; height: 20px; }
.setting-option-label { min-width: 0; flex: 1; text-align: left; }
.setting-popover .check { margin-left: auto; color: #fff; font-size: 16px; line-height: 1; }
.setting-popover button:hover:not(:disabled),
.setting-popover button.active,
.setting-popover button[aria-selected="true"] {
  background: #ffffff14;
  color: #f7f7f8;
}
.setting-popover button:focus-visible { outline-offset: -2px; }
.setting-popover:not(.hidden) { animation: control-popover-in 200ms var(--control-ease); }
.setting-toggle .setting-toggle-dot {
  width: 18px;
  height: 10px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: #47494a;
  position: relative;
  transition: background-color 200ms var(--control-ease);
}
.setting-toggle .setting-toggle-dot::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9babb;
  transition: transform 200ms var(--control-ease), background-color 200ms var(--control-ease);
}
.setting-toggle.is-on .setting-toggle-dot { background: #7d4623; }
.setting-toggle.is-on .setting-toggle-dot::after { transform: translateX(8px); background: var(--lime); }
.setting-number-editor { display: grid; gap: 12px; padding: 4px 4px 2px; }
.setting-number-editor label { display: grid; gap: 7px; color: #a3a3a7; font-size: 11px; }
.setting-number-editor input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #3a3c3d;
  border-radius: 8px;
  background: #242526;
  color: #f7f7f8;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.setting-number-editor input:focus { border-color: var(--lime); box-shadow: 0 0 0 2px #ff620020; }
.setting-number-actions { display: flex; justify-content: flex-end; gap: 7px; }
.setting-number-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #36383a;
  border-radius: 7px;
  background: #252728;
  color: #cfd0d2;
  font-size: 11px;
}
.setting-number-actions button:hover { background: #343638; color: #fff; }
.setting-number-actions .setting-number-apply { border-color: #834c2a; background: #66381c; color: #ff751f; }
.setting-number-actions .setting-number-apply:hover { background: #7e4521; }
.setting-popover.setting-number-popover { width: 228px; min-width: 228px; }

.model-dialog {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  background: #171717;
  box-shadow: 0 24px 70px #0008, 0 0 0 1px #ffffff03;
}
.model-dialog[open] { display: flex; flex-direction: column; animation: control-dialog-in 200ms var(--control-ease); }
.model-dialog::backdrop { background: transparent; backdrop-filter: none; }
.model-dialog .dialog-heading { position: static; flex-shrink: 0; padding: 10px 14px; }
.model-dialog .dialog-heading h2 { font-size: 13px; font-weight: 500; }
.model-dialog .dialog-heading .icon-button { width: 26px; height: 26px; }
.model-dialog .model-tools { position: static; flex-shrink: 0; padding: 8px 12px 0; }
.model-dialog .model-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; scrollbar-color: #424242 transparent; overscroll-behavior: contain; }
.model-dialog .dialog-foot { flex-shrink: 0; padding: 11px 14px; font-size: 9px; border-color: #ffffff0b; }
.model-dialog .family-tabs { padding: 8px 0; }
.model-dialog .family-tabs button { padding: 6px 8px; }
.setting-fields .setting-button .icon { width: 15px; height: 15px; opacity: .8; }
.setting-fields .setting-button strong { margin-right: auto; }
.model-dialog .dialog-heading,
.model-dialog .model-tools { background: #171717; }
.model-dialog .dialog-heading { border-color: #ffffff0b; }
body:not(.image-mode) .studio-page .setting-fields .setting-button {
  gap: 3px;
  padding-left: 8px;
  padding-right: 8px;
}
body:not(.image-mode) .studio-page .setting-fields .setting-button strong {
  font-size: 13px;
  letter-spacing: -.02em;
}
body:not(.image-mode) .studio-page .setting-fields .setting-button > span {
  font-size: 15px;
}
.model-dialog .search-field {
  min-height: 40px;
  padding: 10px 12px;
  border-color: #ffffff12;
  background: #222;
  border-radius: 8px;
  transition: border-color 200ms var(--control-ease), box-shadow 200ms var(--control-ease);
}
.model-dialog .search-field::placeholder { color: #8c8d90; }
.model-dialog .search-field:focus { border-color: #79553e; outline: none; box-shadow: 0 0 0 2px #ff620010; }
.family-tabs button { background: transparent; border: 1px solid #ffffff0a; color: #a3a4a6; }
.family-tabs button:hover:not(:disabled) { background: #ffffff0d; color: #f7f7f8; }
.family-tabs button.active { background: #ffffff14; border-color: #ffffff1c; color: #f7f7f8; }
.model-group-label { color: #8d8e91; letter-spacing: .045em; font-size: 10px; font-weight: 500; }
.model-option { min-height: 60px; border-radius: 8px; margin: 2px 0; }
.model-option:hover:not(:disabled) { background: #ffffff0d; }
.model-option.selected { background: #ffffff14; border-color: #ffffff12; }
.model-option strong { font-size: 13px; font-weight: 500; color: #f7f7f8; }
.model-option small { color: #909196; margin-top: 4px; }
.model-option .model-mark { background: #ffffff0a; border: 1px solid #ffffff08; }
.model-option .check { font-size: 14px; }

.generate {
  min-height: 48px;
  padding: 0 16px 2px;
  border-radius: 12px;
  background: #ff6f16;
  color: #14151a;
  box-shadow: inset 0 -3px 0 #0000006e;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.generate:hover:not(:disabled) { background: #ff751f; box-shadow: inset 0 -3px 0 #0000006e; }
.generate:active:not(:disabled) { box-shadow: inset 0 -1px 0 #0000006e; }
.generate:disabled { box-shadow: none; background: #744b31; color: #d9c5b8; opacity: .65; }
.workflow-note { color: #b6b8ad; background: #1a1d17; border-color: #3b2f27; font-size: 10px; line-height: 1.6; }

/* Preserve the existing horizontal image composer and narrow-screen sizing. */
.image-mode .setting-fields .setting-button {
  display: flex;
  min-height: 40px;
  padding: 8px 11px;
  gap: 7px;
  white-space: nowrap;
  border-color: #ffffff12;
  border-radius: 9px;
}
.image-mode .setting-fields .setting-button strong { font-size: 12px; }

/* Explicit account/lane routing stays compact inside the composer while
   making multi-profile setups visible instead of relying on Admin diagnostics. */
.worker-routing {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid #26292b;
  border-radius: 9px;
  background: #151718;
}
.worker-routing label {
  color: #a6aaac;
  font-size: 10px;
  margin: 0;
}
.worker-routing select {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #383c3f;
  border-radius: 7px;
  background: #202325;
  color: #f3f3ef;
  font-size: 11px;
  outline: 0;
}
.worker-routing select:focus { border-color: var(--lime); }
.worker-routing select:disabled { opacity: .65; cursor: not-allowed; }
.worker-routing small {
  color: #777d80;
  font-size: 9px;
  line-height: 1.35;
}
.image-mode .worker-routing {
  min-width: 180px;
  padding: 6px 8px;
  flex: 0 0 210px;
}
.image-mode .worker-routing label { display: none; }
.image-mode .worker-routing small { display: none; }
.image-mode .worker-routing select { padding: 7px 8px; font-size: 10px; }
.image-mode .prompt-box:focus-within { box-shadow: none; }
.image-mode .model-trigger[aria-expanded="true"] { border-color: #ffffff26; }

.detail-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.detail-result-grid > .detail-media {
  min-width: 0;
  min-height: 0;
  max-height: min(42dvh, 380px);
  aspect-ratio: 1;
  margin-bottom: 0;
  border: 1px solid #ffffff0a;
  border-radius: 10px;
}
.detail-result-grid > .detail-media :is(img, video) {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.detail-receipt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.detail-receipt > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #313a3d;
  border-radius: 9px;
  background: #171d1f;
}
.detail-receipt b { color: #dce2df; font-size: 10px; font-weight: 600; }
.detail-receipt small { color: #9ca7a9; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-receipt-error { border-color: #754944 !important; background: #251a1b !important; }
.detail-receipt-error b { color: #ffc5b7; }
.job-provider-notice { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid #754944; border-radius: 9px; background: #251a1b; color: #f0b9ad; overflow-wrap: anywhere; min-width: 0; }
.job-provider-notice[hidden] { display: none; }
.job-provider-notice strong { font-size: 11px; font-weight: 600; }
.job-provider-notice p { margin: 0; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.job-provider-notice small { font-size: 10px; line-height: 1.5; color: #b8aaa6; overflow-wrap: anywhere; }
.history-card .job-provider-notice p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.job-provider-notice.is-warning { border-color: #645334; background: #252116; color: #e2ce9f; }
.job-provider-notice.is-status { border-color: #313a3d; background: #171d1f; color: #dce2df; }
.detail-tab-panel > .job-provider-notice { margin-bottom: 16px; }
.detail-section { margin: 0 0 16px; }
.detail-section h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; color: #e4e9e5; font-size: 12px; font-weight: 600; }
.detail-section h3 small { color: #899698; font-size: 10px; font-weight: 500; }
.detail-chip-list, .detail-reference-list { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-chip, .detail-reference { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #30383b; border-radius: 7px; background: #181e20; color: #aab4b5; font-size: 10px; }
.detail-chip b, .detail-reference b { color: #d8dfdc; font-weight: 600; }
.detail-reference { flex-direction: column; align-items: flex-start; min-width: 100px; max-width: 220px; }
.detail-reference small { color: #8f9b9d; font-size: 9px; }
.detail-muted { margin: 0; color: #859092; font-size: 11px; }
.detail-prompt-section p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: #c2c9c7; font-size: 12px; line-height: 1.55; }
.detail-thumbnails { display: flex; gap: 8px; overflow-x: auto; margin: -8px 0 18px; padding: 2px 1px 5px; }
.detail-thumbnail { flex: 0 0 64px; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 1px solid #30383b; border-radius: 8px; background: #14191a; }
.detail-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumbnail.selected { border-color: var(--lime); box-shadow: 0 0 0 2px #e08d5a33; }
.detail-primary-action { min-height: 42px; padding: 10px 18px; border-radius: 9px; background: var(--lime); color: #20150e; font-size: 12px; font-weight: 700; box-shadow: 0 8px 20px #d8804926; }
.detail-primary-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.detail-favorite-action.active { color: var(--lime); border-color: #764a2e; background: #342821; }
.detail-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 190px; padding: 6px; border: 1px solid #3b4245; border-radius: 9px; background: #1c2225f7; box-shadow: 0 14px 34px #000a; z-index: 4; }
.detail-more-menu button { display: block; width: 100%; padding: 9px 10px; border-radius: 6px; color: #cbd0d3; text-align: left; font-size: 11px; }
.detail-more-menu button:hover { background: #30373b; color: var(--lime); }
.detail-actions { position: relative; align-items: center; }
.detail-reference-preview { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid #30383b; }
.detail-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #0d1011; }
.detail-dialog::backdrop { background: #050708d9; backdrop-filter: blur(8px); }
.detail-content-shell, .detail-view { width: 100%; height: 100%; min-height: 0; }
.detail-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); }
.detail-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(18px, 4vw, 56px); background: radial-gradient(circle at 50% 42%, #252c2d 0, #111617 48%, #080a0b 100%); }
.detail-stage-media { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; background: #050607; box-shadow: 0 22px 70px #0009; }
.detail-stage-media img, .detail-stage-media video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.detail-stage .detail-thumbnails { flex: 0 0 auto; justify-content: center; margin: 0; }
.detail-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(160deg, #202628 0, #151a1b 100%); border-left: 1px solid #ffffff12; box-shadow: -18px 0 50px #0007; }
.detail-panel-header { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 20px 20px 15px; border-bottom: 1px solid #ffffff0d; }
.detail-author-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #eea171, #804d2e); color: #20150e; font-size: 13px; font-weight: 800; }
.detail-author-copy { min-width: 0; flex: 1; }
.detail-author-copy strong, .detail-author-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-author-copy strong { color: #f0f3ee; font-size: 12px; }
.detail-author-copy small { margin-top: 2px; color: #8e999b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.detail-panel-header .icon-button { margin-left: auto; }
.detail-panel-tabs { display: flex; gap: 4px; flex: 0 0 auto; padding: 12px 20px 0; border-bottom: 1px solid #ffffff0d; }
.detail-panel-tab { padding: 8px 10px 10px; border-bottom: 2px solid transparent; color: #8f999b; font-size: 11px; }
.detail-panel-tab[aria-selected="true"] { border-color: var(--lime); color: #f0f3ee; }
.detail-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 12px; }
.detail-panel-scroll .detail-section { margin-bottom: 20px; }
.detail-panel-scroll .detail-section h3 { text-transform: uppercase; letter-spacing: .08em; }
.detail-prompt-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail-prompt-heading h3 { flex: 1; margin: 0; }
.detail-prompt-copy { max-height: 190px; overflow: auto; padding: 11px 12px; border: 1px solid #30383b; border-radius: 9px; background: #111617; }
.detail-prompt-copy p { margin: 0; }
.detail-details-accordion { border-top: 1px solid #ffffff0d; border-bottom: 1px solid #ffffff0d; }
.detail-details-accordion summary { cursor: pointer; padding: 12px 0; color: #e4e9e5; font-size: 11px; font-weight: 650; letter-spacing: .08em; list-style: none; }
.detail-details-accordion summary::-webkit-details-marker { display: none; }
.detail-details-accordion summary::after { float: right; content: "+"; color: #98a4a3; font-size: 15px; }
.detail-details-accordion[open] summary::after { content: "−"; }
.detail-edit-box textarea { width: 100%; min-height: 170px; resize: vertical; padding: 11px; border: 1px solid #3b4545; border-radius: 9px; background: #111617; color: #e9eeeb; outline: none; font: inherit; line-height: 1.55; }
.detail-edit-box textarea:focus { border-color: var(--lime); }
.detail-comments-empty { padding: 24px 0; color: #8d999b; font-size: 11px; line-height: 1.6; }
.detail-action-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 20px; border-top: 1px solid #ffffff0d; background: #171d1ef5; }
.detail-action-bar .detail-primary-action { flex: 1 0 100%; }
.detail-action-bar .detail-more-menu { bottom: calc(100% - 4px); }
.detail-stage .detail-media-error { color: #9da7a8; }
@media (max-width: 800px) {
  .detail-dialog { height: 100dvh; }
  .detail-view { display: flex; flex-direction: column; }
  .detail-stage { flex: 0 0 43dvh; min-height: 250px; padding: 12px; }
  .detail-stage-media { border-radius: 10px; }
  .detail-panel { flex: 1 1 auto; border-left: 0; border-top: 1px solid #ffffff12; box-shadow: 0 -15px 45px #0007; }
  .detail-panel-header { padding: 12px 16px 10px; }
  .detail-panel-tabs { padding: 8px 16px 0; }
  .detail-panel-scroll { padding: 14px 16px 10px; }
  .detail-action-bar { padding: 10px 16px 14px; }
  .detail-action-bar .small-button { flex: 1 1 auto; min-height: 38px; }
}

@keyframes control-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes control-dialog-in {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 650px) {
  .image-mode .setting-fields .setting-button { min-height: 37px; padding: 6px 9px; }
  .image-mode .setting-fields .setting-button strong { font-size: 11px; }
  .detail-result-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .detail-actions { gap: 6px; }
  .detail-primary-action { width: 100%; }
}

/* Customer Plans surface: backend-owned package cards with a compact,
   Higgsfield-inspired dark layout. Prices and feature text are rendered from
   the published package catalog; no checkout values are calculated here. */
.billing-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(900px, calc(100vh - 28px));
}
.billing-dialog > .dialog-heading {
  padding: 22px 24px 16px;
  align-items: flex-start;
}
.billing-dialog > .dialog-heading h2 { margin-top: 5px; font-size: 25px; letter-spacing: -.04em; }
.billing-dialog > .dialog-content { padding: 0 24px 18px; overflow: auto; }
.plans-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 8px 0 21px;
  border-bottom: 1px solid var(--line);
}
.plans-hero h3 { margin: 6px 0 6px; font-size: 21px; letter-spacing: -.035em; }
.plans-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }
.plans-balance {
  min-width: 170px;
  padding: 13px 15px;
  border: 1px solid rgba(255,117,31,.2);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,117,31,.1), rgba(255,255,255,.02));
  text-align: right;
}
.plans-balance span, .plans-balance small { display: block; color: var(--muted); font-size: 10px; }
.plans-balance strong { display: inline-block; margin-top: 3px; color: var(--lime); font-size: 26px; letter-spacing: -.04em; }
.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 20px 0 14px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 19px;
  border-color: color-mix(in srgb, var(--plan-accent, var(--line-strong)) 35%, var(--line));
  background: linear-gradient(155deg, color-mix(in srgb, var(--plan-accent, #ff6200) 9%, #191d1e), #121517 62%);
  box-shadow: 0 15px 35px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--plan-accent, var(--lime)) 70%, white); box-shadow: 0 20px 45px rgba(0,0,0,.3); }
.plan-card.is-current { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(255,117,31,.15), 0 20px 45px rgba(0,0,0,.28); }
.plan-badge { align-self: flex-start; margin: -4px 0 11px; padding: 4px 8px; border-radius: 999px; background: var(--plan-accent, var(--lime)); color: #130f0d; font-size: 9px; font-weight: 850; }
.plan-card-top { align-items: flex-start; min-height: 61px; }
.plan-card-top b { font-size: 18px; letter-spacing: -.03em; }
.plan-card-top p { max-width: 230px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.plan-current { flex: none; padding: 4px 7px; border: 1px solid rgba(255,117,31,.35); border-radius: 999px; color: var(--lime); font-size: 8px; text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 19px 0 2px; }
.plan-price strong { color: var(--text); font-size: 24px; letter-spacing: -.05em; }
.plan-price small { color: var(--muted); font-size: 9px; text-align: right; }
.plan-credits { display: flex; align-items: baseline; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.09); }
.plan-credits b { color: var(--plan-accent, var(--lime)); font-size: 15px; }
.plan-credits span { color: var(--muted); font-size: 10px; }
.plan-features { display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.plan-features li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; color: #e5e8df; font-size: 10px; }
.plan-features li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.plan-features li b { font-weight: 650; }
.plan-features li small { color: var(--muted); line-height: 1.35; }
.plan-features li em { flex: none; color: var(--plan-accent, var(--lime)); font-size: 8px; font-style: normal; }
.plan-features li.is-excluded { color: var(--muted-2); text-decoration: line-through; }
.plan-feature-icon { flex: none; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--plan-accent, var(--lime)) 17%, transparent); color: var(--plan-accent, var(--lime)); font-size: 9px; font-weight: 850; }
.plan-features-empty { min-height: 34px; margin: 14px 0; color: var(--muted); font-size: 10px; }
.plan-buy-button { width: 100%; min-height: 39px; margin-top: auto; border: 1px solid var(--plan-accent, var(--lime)); border-radius: 9px; background: var(--plan-accent, var(--lime)); color: #0c110a; font-size: 11px; font-weight: 850; transition: filter .16s ease, transform .16s ease; }
.plan-buy-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.plan-buy-button.is-current { border-color: var(--line-strong); background: var(--panel-3); color: var(--muted); }
.plans-note { margin: 0 0 19px; color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.billing-dialog .billing-ledger { padding-top: 7px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .plans-hero { align-items: stretch; flex-direction: column; }
  .plans-balance { width: 100%; text-align: left; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
}

.styles-panel{padding:22px 4px 30px}.styles-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.styles-heading h2{font:650 32px Space,Inter,sans-serif;letter-spacing:-.06em;margin:4px 0 7px}.styles-heading p:not(.eyebrow){color:#8d9598;font-size:12px;max-width:520px;line-height:1.6;margin:0}.style-section{margin-top:25px}.style-section h3{font-size:13px;font-weight:500;color:#d9dddc;margin:0 0 10px}.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.style-card{display:grid;grid-template-columns:78px minmax(0,1fr);min-height:150px;background:linear-gradient(145deg,#1a2021,#111516);border:1px solid #303638;border-radius:14px;overflow:hidden}.style-card:hover{border-color:#7c5034}.style-card-built-in{background:linear-gradient(145deg,#24211b,#121617)}.style-swatch{display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#ea925b,#693d22 28%,#2b201a 60%,#0d1313 100%);font-size:28px;color:#ff751f}.style-swatch-video{background:radial-gradient(circle at 30% 20%,#ff751f,#6d4024 25%,#251c16 55%,#101313 100%)}.style-swatch-image{background:radial-gradient(circle at 40% 20%,#a5dbff,#2e5b76 28%,#1e2735 58%,#101415 100%)}.style-card-copy{padding:13px;display:flex;flex-direction:column;min-width:0}.style-card-copy b{font-size:14px;color:#f0f3ee}.style-card-copy small{margin-top:4px;color:#b4907a;font-size:10px}.style-card-copy p{margin:8px 0 12px;color:#98a1a2;font-size:10px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.style-card-copy .small-button{font-size:10px;padding:6px 8px;align-self:flex-start}.style-card-actions{display:flex;gap:8px;align-items:center;margin-top:auto}.danger-text{color:#f1a99a;font-size:10px}.style-empty{border:1px dashed #3b4545;border-radius:12px;padding:25px;color:#8f9999;display:flex;align-items:center;gap:12px}.style-empty>span{font-size:26px;color:var(--lime)}.style-empty p{margin:0;font-size:11px}.style-name-dialog{width:min(480px,calc(100vw - 28px))}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.style-name-dialog input{padding:11px;border:1px solid #3b4545;border-radius:8px;background:#151a1b;color:white}
@media (prefers-reduced-motion: reduce) {
  .setting-popover:not(.hidden), .model-dialog[open] { animation: none; }
  :is(.small-button, .icon-button, .lime-button, .model-trigger,
      .setting-button, .setting-popover button):active:not(:disabled) { transform: none; }
}
/* Account and billing surface */
.credit-pill{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border:1px solid #394341;border-radius:999px;background:#1d2524;color:#f5ded0;font-size:11px}.credit-pill span{color:var(--lime)}.credit-pill b{font-weight:700}.credit-pill small{color:#97a29f;font-size:9px}.auth-dialog{width:min(500px,calc(100vw - 28px))}.auth-tabs{display:flex;gap:6px;padding:14px 20px 0}.auth-tabs button{padding:9px 12px;border-radius:8px;color:#9da7a6;font-size:12px}.auth-tabs button.active{background:#343e37;color:var(--lime)}.auth-error{border:1px solid #75473e;background:#321f1c;color:#ffc1ad;padding:10px 12px;border-radius:8px;font-size:12px}.account-info .account-credit{color:var(--lime);margin-top:8px}.account-info .account-plan{color:#8d999e;font-size:10px;margin-top:4px}.floating-menu .danger-action{color:#ffc2b3}
.model-option.availability-error small:first-of-type { color: #ffb4a5; }
.model-option.availability-ready small:first-of-type { color: var(--lime); }
.model-settings-hint { opacity: .72; }
.model-observed-hint { color: #dda582 !important; opacity: .9; white-space: normal; line-height: 1.35; }

/* The original image composer is intentionally a compact dock: status is
   still exposed through the connection indicator and model dialog, while the
   customer-facing surface does not consume a full extra header row. */
@media (min-width: 651px) {
  /* Image dock uses one content row: unlike the video sidebar, the hidden
     context row must not leave an empty band inside the floating composer. */
  .image-mode .composer {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "editor submit";
    align-content: stretch;
  }
  .image-mode .composer-scroll { align-self: stretch; }
  .image-mode .composer-submit { align-self: center; }
  .image-mode .ratio-icon { color: #d6dadd; }
  .image-mode .quality-icon { color: #d6dadd; }
  .image-mode .image-count-stepper {
    flex: 0 0 auto;
    width: 104px;
    min-width: 104px;
    height: 40px;
    padding: 0 5px;
    justify-content: space-between;
    gap: 3px;
  }
  .image-mode .image-count-stepper .stepper-label { display: none; }
  .image-mode .image-count-stepper .stepper-value {
    min-width: 40px;
    text-align: center;
    color: #e2e4e2;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  .image-mode .image-count-stepper .stepper-value span { color: #898f8e; }
  .image-mode .image-count-stepper .stepper-button {
    width: 28px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #aeb5b4;
    font-size: 18px;
    line-height: 1;
  }
  .image-mode .image-count-stepper .stepper-button:hover:not(:disabled) {
    color: #f5f7f4;
    background: #ffffff12;
  }
  .image-mode .image-count-stepper .stepper-button:disabled { color: #555b5c; }
  .image-mode .image-count-stepper.is-invalid .stepper-value { color: #efaa9f; }
}

@media (max-width: 650px) {
  .image-mode .image-count-stepper { min-height: 37px; }
  .image-mode .image-count-stepper .stepper-label { display: inline-flex; }
  .image-mode .image-count-stepper .stepper-label .icon { display: none; }
}

/* When references are present, show their thumbnails in the same top strip
   as Higgsfield. Keep the exact prompt and provider controls below; no
   inferred control or provider value is introduced. */
@media (min-width: 651px) {
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .reference-list {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    height: 48px;
    align-items: center;
    padding: 0;
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box {
    padding-top: 50px;
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box textarea {
    height: 34px;
    min-height: 34px;
  }
}

@media (max-width: 650px) {
  .image-mode .prompt-tools .image-reference-button { display: inline-flex; }
  .image-mode .prompt-tools button::before { content: none !important; }
  .image-mode .prompt-tools .image-reference-button::before {
    content: "+" !important;
    font-size: 16px;
    margin-right: 5px;
  }
}

/* Higgsfield's picker is a generous, searchable surface at desktop widths;
   a wider dialog prevents long Picsart model names from being truncated. */
@media (min-width: 651px) {
  .model-dialog {
    width: min(650px, calc(100vw - 28px));
  }
}
.model-option:disabled { cursor: not-allowed; opacity: .55; }
.operator-toggle { display: flex; gap: 10px; align-items: center; line-height: 1.5; }
.operator-toggle input { width: auto; accent-color: var(--lime); }
.billing-dialog { width: min(760px, calc(100vw - 28px)); }
.billing-balance { border: 1px solid #483930; border-radius: 16px; padding: 22px; background: #211a15; }
.billing-balance span, .billing-balance small { display: block; color: var(--muted); }
.billing-balance strong { display: block; font-size: 42px; margin: 8px 0; color: var(--lime); }
.billing-ledger { overflow: auto; }
.billing-ledger table { width: 100%; border-collapse: collapse; font-size: 12px; }
.billing-ledger th, .billing-ledger td { padding: 13px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.billing-ledger th { color: var(--muted); font-weight: 500; }
.credit-positive { color: var(--lime); }

/* Account center follows the compact dark card language used by Higgsfield:
   identity first, a three-metric summary, then workspace actions. */
.account-info { padding: 13px 12px 12px; }
.account-info-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-info-head > span:nth-child(2) { min-width: 0; flex: 1; }
.account-info-head b, .account-info-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-avatar, .profile-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 60% 70%, #ff751f, #cd8b62 55%, #aa84d3); color: #341502; font-weight: 750; }
.account-avatar { width: 31px; height: 31px; font-size: 10px; }
.guest-avatar { background: #303638; color: #ff6200; }
.account-status { flex: 0 0 auto; color: #e9ad88; border: 1px solid #754b30; border-radius: 999px; padding: 3px 6px; font-size: 8px; text-transform: capitalize; }
.account-info .account-credit { margin-top: 11px; font-size: 12px; font-weight: 650; }
.account-info .account-plan { margin-top: 4px; }
.account-guest-copy { color: #9da4a5; font-size: 10px; line-height: 1.5; margin: 11px 0 0; }
.account-quick-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 4px 8px; }
.account-quick-stats > div { min-width: 0; border: 1px solid #ffffff0b; border-radius: 8px; padding: 8px 7px; background: #161a1b; }
.account-quick-stats small, .account-quick-stats b, .account-quick-stats span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-quick-stats small { color: #858e90; font-size: 8px; margin-bottom: 4px; }
.account-quick-stats b { color: #f7e7dd; font-size: 11px; font-weight: 650; }
.account-quick-stats span { color: #737a7d; font-size: 8px; margin-top: 2px; }
.account-quick-stats .account-guest-stat { grid-column: 1 / -1; }
.account-menu-label { color: #70797b; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; padding: 5px 11px 3px; }
.account-menu-label-secondary { border-top: 1px solid #ffffff0b; margin-top: 4px; padding-top: 10px; }
.floating-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.floating-menu button span { color: #737a7c; font-size: 16px; line-height: 1; }
.google-auth-wrap { width: 100%; min-height: 44px; }
.google-auth-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffffff1a; border-radius: 9px; background: #f7f7f5; color: #171818; font-weight: 600; transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.google-auth-fallback { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffffff1a; border-radius: 9px; background: #f7f7f5; color: #171818; font-weight: 600; transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.google-auth-fallback:hover:not(:disabled) { background: #fff; box-shadow: 0 8px 24px #0004; transform: translateY(-1px); }
.google-auth-fallback:active:not(:disabled) { transform: translateY(1px); }
.google-auth-fallback:disabled { cursor: wait; opacity: .75; }
.google-auth-button:hover:not(:disabled) { background: #fff; box-shadow: 0 8px 24px #0004; transform: translateY(-1px); }
.google-auth-button:active:not(:disabled) { transform: translateY(1px); }
.google-auth-button:disabled { cursor: wait; opacity: .75; }
.google-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #4285f4; font: 700 15px/1 Arial, sans-serif; background: #fff; }
.google-auth-arrow { margin-left: auto; color: #707070; font-size: 16px; }
.auth-divider { display: flex; align-items: center; gap: 9px; margin: 17px 0 4px; color: #757d7e; font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #ffffff0d; }
.google-auth-button.is-loading .google-mark, .google-auth-fallback.is-loading .google-mark { animation: auth-spin 1s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.profile-dialog { width: min(580px, calc(100vw - 28px)); }
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 2px 0 20px; border-bottom: 1px solid #ffffff0c; }
.profile-avatar { width: 56px; height: 56px; font-size: 17px; }
.profile-hero h3 { margin: 0 0 4px; font: 600 21px/1.05 Space, Inter, sans-serif; letter-spacing: -.04em; color: #f5f2f0; }
.profile-hero p { margin: 0 0 8px; color: #989fa0; }
.profile-badge { display: inline-flex; border: 1px solid #754c32; color: #ff6200; border-radius: 999px; padding: 4px 8px; font-size: 9px; text-transform: capitalize; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.profile-grid > div { border: 1px solid #ffffff0c; border-radius: 10px; background: #191d1e; padding: 11px 12px; }
.profile-grid small, .profile-grid strong { display: block; }
.profile-grid small { color: #81888a; font-size: 10px; margin-bottom: 6px; }
.profile-grid strong { color: #f0f1ed; font-size: 13px; font-weight: 550; }
.profile-grid .profile-credit { color: var(--lime); }
.profile-usage { border: 1px solid #ffffff0c; background: #191d1e; border-radius: 10px; margin-top: 9px; padding: 13px 12px; }
.profile-usage > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.profile-usage > div:first-child span { color: #9da4a4; }
.profile-usage > div:first-child b { color: #f0e5df; font-weight: 550; }
.usage-track { height: 6px; border-radius: 99px; overflow: hidden; background: #303638; margin-top: 10px; }
.usage-track i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.profile-usage p { color: #7e8688; font-size: 10px; line-height: 1.5; margin: 10px 0 0; }
.profile-security { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ffffff0c; background: #191d1e; border-radius: 10px; margin-top: 9px; padding: 11px 12px; }
.profile-security > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.profile-security-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #20252b; color: #8ab4f8; font-weight: 700; }
.profile-security b, .profile-security small { display: block; }
.profile-security b { font-size: 11px; color: #e9ece8; }
.profile-security small { margin-top: 3px; color: #81898a; font-size: 9px; }
.profile-security-state { color: #e0a885; font-size: 9px; white-space: nowrap; }
.profile-edit-form { display: flex; align-items: end; gap: 9px; margin-top: 16px; }
.profile-edit-form label { flex: 1; color: #858e8e; font-size: 10px; }
.profile-edit-form input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; padding: 10px 11px; border: 1px solid #394243; border-radius: 9px; background: #111516; color: #f4efec; font: inherit; outline: none; }
.profile-edit-form input:focus { border-color: #ad6c44; box-shadow: 0 0 0 3px #e6864a18; }
.profile-edit-form button { white-space: nowrap; }
.profile-form-error { margin: 8px 0 0; color: #f1a99a; font-size: 10px; }
.profile-notice { margin: 8px 0; color: #e9a377; font-size: 11px; line-height: 1.5; }
.profile-edit-form input:disabled { opacity: .7; cursor: wait; }
.profile-language-field { display: block; margin-top: 12px; color: #858e8e; font-size: 10px; }
.profile-language-field select { display: block; width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #394243; border-radius: 9px; background: #111516; color: #f4efec; font: inherit; outline: none; }
.profile-language-field select:focus { border-color: #ad6c44; box-shadow: 0 0 0 3px #e6864a18; }
.profile-language-field select:disabled { opacity: .7; cursor: wait; }
.profile-sessions .profile-form-error { margin-bottom: 10px; }
.profile-sessions { margin-top: 18px; border-top: 1px solid #ffffff0c; padding-top: 16px; }
.profile-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-section-heading .eyebrow { margin: 0 0 3px; }
.profile-section-heading h3 { margin: 0; font: 600 16px/1.1 Space, Inter, sans-serif; letter-spacing: -.03em; color: #eef1eb; }
.profile-session-list { display: grid; gap: 7px; }
.profile-session { display: flex; align-items: center; gap: 9px; border: 1px solid #ffffff0b; border-radius: 10px; padding: 9px 10px; background: #171b1c; }
.profile-session.is-current { border-color: #6a432b; background: #241d19; }
.profile-session-icon { width: 23px; color: #83929a; font-size: 13px; text-align: center; }
.profile-session.is-current .profile-session-icon { color: var(--lime); }
.profile-session-copy { min-width: 0; flex: 1; }
.profile-session-copy b, .profile-session-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-session-copy b { color: #e7ebe3; font-size: 11px; font-weight: 550; }
.profile-session-copy small { margin-top: 3px; color: #7f898a; font-size: 9px; }
.profile-session-current { display: inline-block; margin-top: 4px; color: #e9a377; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.profile-session-revoke { padding: 6px 8px; font-size: 9px; white-space: nowrap; }
.profile-session-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed #394243; border-radius: 10px; padding: 13px; color: #879091; font-size: 10px; }
.profile-session-error { color: #f1a99a; }
.profile-spinner { width: 11px; height: 11px; border: 2px solid #ffffff26; border-top-color: var(--lime); border-radius: 50%; animation: auth-spin .8s linear infinite; }
.profile-revoke-others { width: 100%; margin-top: 9px; padding: 9px; border: 1px solid #5e3d3b; border-radius: 9px; background: #24191a; color: #f0b1a7; cursor: pointer; font-size: 10px; }
.profile-revoke-others:hover:not(:disabled) { border-color: #b16a61; background: #30201f; }
.profile-revoke-others:disabled, .profile-session-revoke:disabled { cursor: wait; opacity: .6; }
.billing-overview { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.billing-usage { border: 1px solid #ffffff0b; border-radius: 16px; padding: 22px; background: #191d1e; }
.billing-usage span, .billing-usage small { display: block; color: var(--muted); }
.billing-usage strong { display: block; margin: 8px 0; font-size: 32px; color: #eef0ea; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 17px 0 20px; }
.plan-card { border: 1px solid #ffffff0d; border-radius: 12px; padding: 13px; background: #191d1e; }
.plan-card.is-current { border-color: #7c4d30; background: #271d17; }
.plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plan-card-top b { font-size: 12px; }
.plan-card-top span { color: #ff6200; font-size: 8px; text-transform: uppercase; }
.plan-card > strong { display: block; margin-top: 13px; font-size: 18px; color: #f2e9e3; }
.plan-card > strong small { color: #8c9593; font-size: 9px; font-weight: 400; }
.plan-card p { color: #878f90; font-size: 9px; margin: 5px 0 13px; }
.plan-card .small-button { width: 100%; padding: 7px 6px; font-size: 9px; }
@media(max-width:650px) {
  .billing-overview, .plan-grid { grid-template-columns: 1fr; }
  .profile-grid { gap: 7px; }
  .profile-hero h3 { font-size: 18px; }
  .profile-edit-form { align-items: stretch; flex-direction: column; }
  .profile-edit-form button { align-self: flex-end; }
  .profile-session { align-items: flex-start; }
  .profile-session-revoke { margin-left: auto; }
}

/* Higgsfield-style creation affordances: compact context, model-aware prompt
   helpers, and a live queue indicator keep the local bridge legible while it
   routes jobs through one or more Picsart lanes. */
.studio-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 9px 8px;
  border-bottom: 1px solid #ffffff09;
  flex-shrink: 0;
}
.studio-context-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.studio-context-title > span:last-child { display: grid; gap: 3px; min-width: 0; }
.studio-context-title small { color: #7d8182; font-size: 8px; letter-spacing: .14em; }
.studio-context-title strong { color: #f4f1ef; font-size: 12px; font-weight: 550; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-context-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #311b0e; color: var(--lime); font-size: 14px; }
.studio-context-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #74797a; font-size: 9px; white-space: nowrap; }
.context-dot { width: 5px; height: 5px; border-radius: 99px; background: #74797a; }
.studio-context.is-online .context-dot { background: var(--lime); box-shadow: 0 0 0 3px #ff620014; }
.studio-context.is-online #studioWorkerStatus { color: #dba380; }
.studio-context.is-offline .context-dot { background: #ef9c53; }
.studio-context.is-offline #studioWorkerStatus { color: #d4a878; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.prompt-head label { margin: 0; }
.prompt-actions { display: flex; gap: 4px; }
.prompt-action { color: #8d9492; padding: 3px 6px; border: 1px solid #ffffff0b; border-radius: 5px; font-size: 9px; white-space: nowrap; }
.prompt-action:first-child { color: #e8b799; border-color: #ff620021; background: #ff620009; }
.prompt-action:hover { color: #fff; background: #ffffff12; }
.prompt-suggestions { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 1px; }
.prompt-suggestions:empty { display: none; }
.prompt-suggestion { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a9aeaa; background: #101214; border: 1px solid #ffffff0a; border-radius: 999px; padding: 5px 8px; font-size: 9px; }
.prompt-suggestion:hover { color: #f3e3d9; border-color: #ff620040; background: #2a1f18; }
.model-capabilities { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.model-capabilities:empty { display: none; }
.capability { color: #a7acab; background: #151719; border: 1px solid #ffffff09; border-radius: 99px; padding: 4px 7px; font-size: 9px; line-height: 1; }
.capability-status.ready { color: #efb38d; border-color: #ff620030; background: #ff62000b; }
.capability-status.error { color: #ffb4a5; border-color: #75392f; background: #351d1a; }
.capability-status.muted { color: #d2b97e; border-color: #66502a; background: #2b2417; }
.queue-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 9px 11px; border: 1px solid #25282a; border-radius: 11px; background: linear-gradient(110deg, #171a1b, #131516); color: #a7abad; font-size: 10px; }
.queue-summary-main, .queue-summary-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.queue-summary-main strong { color: #f1f3ef; font-weight: 550; white-space: nowrap; }
.queue-muted { color: #737a7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-lane { color: #daa380; white-space: nowrap; }
.queue-sync { color: #aeb5b0; padding: 4px 6px; border: 1px solid #ffffff0c; border-radius: 5px; font-size: 9px; }
.queue-sync:hover { color: #fff; background: #ffffff10; }
.queue-pulse { width: 7px; height: 7px; border-radius: 99px; background: #707577; flex-shrink: 0; }
.queue-pulse.busy { background: #ff6200; box-shadow: 0 0 0 3px #ff620017; animation: queue-pulse 1.7s ease-in-out infinite; }
@keyframes queue-pulse { 50% { opacity: .45; transform: scale(.75); } }
.work-tabs button.locked { color: #666b6d; border-bottom-color: transparent; cursor: not-allowed; }
.work-tabs button.locked:hover { color: #9da5a6; background: #ffffff05; }
.workflow-lock { display: inline-grid; place-items: center; margin-left: 3px; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; line-height: 1; }
.segment button.locked { color: #656a6b; cursor: not-allowed; background: transparent; }
.segment button.locked:hover { color: #a0a5a3; background: #ffffff05; }
@media (max-width: 650px) {
  .studio-context { padding: 10px 4px 7px; }
  .studio-context-meta { font-size: 8px; }
  .prompt-suggestions { margin-bottom: 2px; }
  .queue-summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .queue-summary-actions { width: 100%; justify-content: space-between; }
}

/* Explicit regions prevent the context header from displacing the prompt
   into the narrow action column when new composer sections are added. */
.image-mode .studio-page { padding-bottom: 350px; }
.image-mode .composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  grid-template-areas: "context context" "editor submit";
  align-items: start;
  min-height: 0;
  max-height: min(560px, calc(100dvh - var(--header) - 28px));
  padding: 14px 18px;
  gap: 12px 18px;
  overflow-x: hidden;
  overflow-y: auto;
}
.image-mode .studio-context {
  grid-area: context;
  min-width: 0;
  padding: 0 0 10px;
}
.image-mode .composer-scroll {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.image-mode .prompt-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 7px;
}
.image-mode .prompt-head { margin: 0; }
.image-mode #promptLabel { display: block; font-size: 11px; color: #afb5b1; }
.image-mode .prompt-actions { flex-wrap: wrap; justify-content: flex-end; }
.image-mode .prompt-box textarea {
  display: block;
  min-width: 0;
  min-height: 60px;
  height: 60px;
  max-height: 160px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.55;
  overflow-y: auto;
}
.image-mode .prompt-suggestions { min-width: 0; max-width: 100%; }
.image-mode .prompt-suggestion { max-width: min(280px, 80%); }
.image-mode .prompt-tools {
  position: static;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 8px;
}
.image-mode .prompt-tools button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #ffffff12;
  border-radius: 7px;
  font-size: 11px;
}
.image-mode #promptCount { display: block; font-size: 9px; }
.image-mode .output-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  height: auto;
  margin: 0;
  gap: 7px;
  overflow: visible;
}
.image-mode .model-trigger { max-width: 100%; flex-direction: row; }
.image-mode .setting-fields { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
.image-mode .worker-routing {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 260px;
  padding: 0;
  border: 0;
  background: none;
}
.image-mode .worker-routing select { min-height: 40px; }
.image-mode .model-capabilities { order: 4; flex-basis: 100%; min-width: 0; }
.image-mode .workflow-note {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #969e94;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.image-mode .composer-submit {
  grid-area: submit;
  align-self: end;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.image-mode .generate { width: 100%; min-height: 46px; font-size: 14px; order: 0; }
.image-mode .bridge-status { padding-top: 3px; justify-content: center; }
.image-mode .bridge-status button { white-space: normal; }
.image-mode .history-expanded .composer { display: none; }
@media (max-width: 950px) {
  .image-mode .composer { grid-template-columns: minmax(0, 1fr) 140px; gap: 10px 14px; }
  .image-mode .worker-routing { max-width: none; }
}
@media (max-width: 650px) {
  .image-mode .studio-page { padding-bottom: 430px; }
  .image-mode .composer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "context" "editor" "submit";
    padding: 12px;
    gap: 10px;
  }
  .image-mode .studio-context-meta { flex-wrap: wrap; white-space: normal; }
  .image-mode .prompt-box textarea { min-height: 56px; height: 56px; font-size: 13px; }
  .image-mode .prompt-action { font-size: 9px; padding: 4px 5px; }
  .image-mode .model-trigger { flex: 1 1 auto; }
  .image-mode .worker-routing { flex-basis: 100%; }
  .image-mode .composer-submit { flex-direction: row; align-items: center; }
  .image-mode .generate { width: 142px; min-height: 42px; margin-left: auto; order: 2; }
  .image-mode .bridge-status { flex: 1; justify-content: flex-start; }
}

/* Keep the image composer in the same three compact regions at every desktop
   width.  Without explicit rows, the implicit grid track created by the
   workflow controls can stretch the prompt editor to the full viewport and
   leave the placeholder floating in the action column. */
@media (min-width: 651px) {
  .image-mode .composer {
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: auto minmax(0, max-content) auto;
    grid-template-areas: "context context" "editor submit";
    align-content: start;
    height: max-content;
    max-height: min(560px, calc(100dvh - var(--header) - 28px));
  }
  .image-mode .composer-scroll {
    align-self: start;
    width: 100%;
    min-height: 0;
  }
  .image-mode .prompt-box {
    width: 100%;
    min-height: 0;
    max-height: 166px;
    overflow: hidden;
  }
  .image-mode .prompt-box textarea {
    flex: 0 1 auto;
    width: 100%;
    min-height: 56px;
    height: 72px;
    max-height: 96px;
    overflow-y: auto;
  }
  .image-mode .prompt-suggestions {
    min-height: 0;
    max-height: 28px;
  }
  .image-mode .composer-submit {
    align-self: end;
  }
}

/* Final image-composer pass: match Higgsfield's bottom dock proportions while
   leaving every model control/data source owned by Picsart and Manager. */
@media (min-width: 651px) {
  .image-mode .studio-page {
    padding-bottom: 230px;
  }
  .image-mode .composer {
    width: min(1120px, calc(100% - 56px));
    bottom: 16px;
    max-height: min(260px, calc(100dvh - var(--header) - 24px));
    padding: 14px 22px;
    gap: 8px 16px;
    border-radius: 26px;
    overflow: visible;
    background: rgba(15, 17, 19, .96);
    border-color: #3b4143;
    box-shadow: 0 18px 60px #000b, 0 0 0 1px #ffffff04;
  }
  .image-mode .studio-context {
    min-height: 34px;
    padding: 0 0 9px;
    border-bottom-color: #ffffff0d;
  }
  .image-mode .studio-context-mark { width: 25px; height: 25px; }
  .image-mode .composer-scroll {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
    min-height: 0;
  }
  .image-mode .prompt-box {
    flex: 0 0 125px;
    height: 125px;
    max-height: 125px;
    gap: 5px;
    overflow: hidden;
  }
  .image-mode .prompt-head {
    min-height: 20px;
    margin: 0;
  }
  .image-mode #promptLabel { display: none; }
  .image-mode .prompt-actions { margin-left: auto; }
  .image-mode .prompt-box textarea {
    flex: 0 0 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
  }
  .image-mode .prompt-suggestions {
    flex: 0 0 23px;
    min-height: 23px;
    max-height: 23px;
    padding: 0;
  }
  .image-mode .prompt-suggestion { padding: 4px 8px; }
  .image-mode .prompt-tools {
    position: static;
    flex: 0 0 27px;
    min-height: 27px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .image-mode .prompt-tools button { min-height: 27px; }
  .image-mode .prompt-tools .image-reference-button { display: inline-flex; }
  .image-mode .output-settings {
    flex: 0 0 42px;
    height: 42px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .image-mode .model-trigger {
    flex: 0 0 auto;
    width: auto;
    max-width: 180px;
    min-height: 40px;
  }
  .image-mode .setting-fields {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    height: 42px;
  }
  .image-mode .setting-fields .setting-button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 11px;
  }
  .image-mode .worker-routing {
    flex: 0 1 220px;
    min-width: 150px;
    max-width: 220px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .image-mode .worker-routing select {
    height: 40px;
    padding: 7px 8px;
  }
  /* The same information remains available in Admin/status; it should not
     add a second visual row to the customer composer. */
  .image-mode .model-capabilities { display: none; }
  .image-mode .workflow-note {
    flex: 0 0 18px;
    height: 18px;
    max-height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8d9695;
    font-size: 9px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .image-mode .composer-submit {
    align-self: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
  }
  .image-mode .generate {
    min-height: 64px;
    border-radius: 14px;
    font-size: 16px;
    box-shadow: inset 0 -3px 0 #00000045;
  }
  .image-mode .bridge-status {
    min-height: 15px;
    padding-top: 0;
    justify-content: center;
  }
}

/* Final dock proportions: Higgsfield keeps the image composer nearly edge to
   edge and gives the prompt the visual weight of the canvas.  The previous
   1120px cap made the local composer look like a narrow settings card on
   larger screens.  Keep the same model/control DOM and only widen the shell
   and its Generate rail; Picsart remains the source of every option. */
@media (min-width: 651px) {
  /* Match Higgsfield's image canvas rhythm: a quiet band under the global
     header, no second history/queue chrome over the artwork, and a dock that
     leaves the Generate action at the same compact 144px rail.  History and
     lane status remain reachable through the composer and account/admin
     surfaces; this rule only removes duplicate chrome from the canvas view. */
  .image-mode .studio-page { padding-top: 39px; }
  .image-mode .history-toolbar,
  .image-mode .queue-summary { display: none; }
  .image-mode .result-panel { padding: 0 0 24px; }
  .image-mode .composer {
    width: min(1680px, calc(100% - 56px));
    grid-template-columns: minmax(0, 1fr) 144px;
    padding-inline: 24px;
    border-radius: 27px;
  }
  .image-mode .prompt-box {
    padding-inline: 0;
    background: transparent;
    border-color: transparent;
  }
  .image-mode .prompt-box textarea {
    height: 54px;
    min-height: 54px;
    max-height: 78px;
    font-size: 15px;
  }
  .image-mode .composer-submit {
    min-width: 0;
  }
  .image-mode .generate {
    min-height: 58px;
    font-size: 16px;
  }
}

/* Keep the desktop dock in the same compact vertical band as Higgsfield's
   composer. Suggestions remain available through the prompt tools, but do
   not push provider controls below the fold when a model has long metadata. */
@media (min-width: 651px) {
  .image-mode .composer {
    max-height: min(205px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .prompt-box {
    flex-basis: 94px;
    height: 94px;
    max-height: 94px;
  }
  .image-mode .prompt-box textarea {
    height: 40px;
    min-height: 40px;
    max-height: 52px;
  }
  .image-mode .prompt-suggestions,
  .image-mode .workflow-note {
    display: none;
  }
  .image-mode .prompt-tools {
    flex-basis: 25px;
    min-height: 25px;
  }
  .image-mode .prompt-tools button {
    min-height: 25px;
  }
  .image-mode .generate {
    min-height: 58px;
  }
}

/* Keep the provider/account routing affordance available without letting it
   overpower the Higgsfield-style control rail.  The selected Picsart lane is
   still a real native select (so keyboard/assistive access and exact account
   routing remain intact), but the closed control reads as a compact utility
   chip instead of a second full-width form field. */
@media (min-width: 651px) {
  .image-mode .worker-routing {
    flex: 0 0 132px;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }
  .image-mode .worker-routing label,
  .image-mode .worker-routing small {
    display: none;
  }
  .image-mode .worker-routing select {
    width: 100%;
    min-height: 40px;
    padding: 7px 22px 7px 10px;
    border: 1px solid #ffffff0b;
    border-radius: 8px;
    background: #1b1e20;
    color: #c2a28e;
    font-size: 10px;
    text-overflow: ellipsis;
  }
  .image-mode .worker-routing select:hover:not(:disabled),
  .image-mode .worker-routing select:focus {
    border-color: #ff620040;
    background: #242a20;
  }
}

/* Keep the image dock's single leading plus beside the reference uploader;
   Elements retains its compact @ affordance without a second plus glyph. */
@media (min-width: 651px) {
  .image-mode .prompt-tools button::before { content: none !important; }
  .image-mode .prompt-tools .image-reference-button::before {
    content: "+" !important;
    font-size: 17px;
    margin-right: 8px;
  }
}

/* Image canvas parity -----------------------------------------------------
   Higgsfield's image surface is a quiet, edge-to-edge contact sheet with the
   composer floating above it.  Keep the Manager/Picsart metadata and actions
   in the DOM, but let the artwork carry the first visual read.  The details
   fade in on hover/focus so History remains fully usable without turning the
   canvas into a stack of admin cards. */
@media (min-width: 651px) {
  .image-mode .studio-page {
    padding: 39px 0 230px;
  }
  .image-mode .result-panel {
    border: 0;
    border-radius: 0;
    padding: 0 0 24px;
    overflow-y: auto;
  }
  .image-mode .history-list.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    align-items: stretch;
  }
  .image-mode .history-list.grid .history-card {
    position: relative;
    display: block;
    min-height: 0;
    height: min(520px, calc(100dvh - var(--header) - 90px));
    border: 0;
    border-radius: 0;
    background: #151718;
    overflow: hidden;
  }
  .image-mode .history-list.grid .job-media {
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background: #17191b;
  }
  .image-mode .history-list.grid .job-media img,
  .image-mode .history-list.grid .job-media video {
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .25s ease;
  }
  .image-mode .history-list.grid .history-card:hover .job-media img,
  .image-mode .history-list.grid .history-card:focus-within .job-media img,
  .image-mode .history-list.grid .history-card:hover .job-media video,
  .image-mode .history-list.grid .history-card:focus-within .job-media video {
    transform: scale(1.025);
    filter: brightness(.78);
  }
  .image-mode .history-list.grid .job-details {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    min-height: 0;
    padding: 34px 13px 12px;
    gap: 7px;
    color: #f5f1ef;
    background: linear-gradient(180deg, transparent, #060707e8 72%);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .image-mode .history-list.grid .history-card:hover .job-details,
  .image-mode .history-list.grid .history-card:focus-within .job-details {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .image-mode .history-list.grid .model-chip {
    display: inline-flex;
    padding: 6px 8px;
    border-color: #ffffff38;
    background: #101211b8;
    font-size: 10px;
    backdrop-filter: blur(8px);
  }
  .image-mode .history-list.grid .job-prompt {
    color: #d5d9d4;
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
  .image-mode .history-list.grid .job-meta,
  .image-mode .history-list.grid .job-time {
    font-size: 9px;
  }
  .image-mode .history-list.grid .job-meta span {
    padding: 4px 6px;
    background: #ffffff16;
  }
  .image-mode .history-list.grid .job-actions button {
    padding: 6px 8px;
    font-size: 10px;
    background: #ffffff18;
    backdrop-filter: blur(8px);
  }
  .image-mode .history-list.grid .empty-media {
    padding: 22px;
    text-align: center;
    color: #777d7e;
    font-size: 11px;
  }
  .image-mode .history-list.grid .status-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: #101211d9;
    backdrop-filter: blur(9px);
  }
  .image-mode .history-list.grid .job-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
  }
  /* The reference dock keeps the prompt as the hero.  Secondary local
     helpers remain available in Video/Styles, while Image keeps the clean
     one-line action rail and the exact provider controls below it. */
  .image-mode .prompt-actions {
    opacity: .55;
    transform: scale(.92);
    transform-origin: right center;
  }
  .image-mode .prompt-action {
    padding: 2px 5px;
    font-size: 8px;
  }
}

@media (max-width: 650px) {
  .image-mode .history-list.grid .history-card {
    position: relative;
    min-height: 0;
    height: clamp(220px, 56vw, 340px);
    border-radius: 5px;
  }
  .image-mode .history-list.grid .job-media { height: 100%; min-height: 0; }
  .image-mode .history-list.grid .job-details {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 24px 9px 8px;
    gap: 5px;
    background: linear-gradient(180deg, transparent, #060707e8 78%);
  }
  .image-mode .history-list.grid .job-prompt { font-size: 9px; }
  .image-mode .history-list.grid .job-meta,
  .image-mode .history-list.grid .job-time { display: none; }
}

/* The prompt itself is a first-class reference drop surface, matching the
   image composer interaction on Higgsfield. Keep the state visible even in
   the compact dock where #refBox is hidden. */
.prompt-box.drop-target {
  border-color: #ff6200 !important;
  background: linear-gradient(135deg, #ff620016, #191a1c) !important;
  box-shadow: 0 0 0 2px #ff620030, 0 10px 34px #0007;
}
.frame-reference-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.frame-reference-slots[hidden], .ref-box[hidden] { display: none !important; }
.frame-reference-slot { min-width: 0; border: 1px solid #383b3b; border-radius: 12px; padding: 8px; background: #181a1b; }
.frame-reference-slot > strong { display: block; margin-bottom: 7px; font-size: 10px; line-height: 1.5; color: #dce2df; }
.frame-reference-picker { display: flex; width: 100%; min-height: 110px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; overflow: hidden; border: 1px dashed #515757; border-radius: 8px; background: #111415; }
.frame-reference-picker img { width: 100%; height: 90px; object-fit: contain; }
.frame-reference-picker > span:last-child { width: 100%; padding: 0 5px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #b8c1bd; }
.frame-reference-placeholder { font-size: 27px; color: #ff6200; }
.frame-reference-picker:disabled { opacity: .45; cursor: not-allowed; }
.frame-reference-picker:focus-visible, .frame-reference-actions button:focus-visible { outline: 2px solid #ff6200; outline-offset: 2px; }
.frame-reference-actions { display: flex; justify-content: space-between; gap: 5px; padding-top: 7px; }
.frame-reference-actions button { font-size: 10px; color: #cbd5cf; padding: 3px; }
.frame-reference-actions button:disabled { opacity: .4; cursor: not-allowed; }
.frame-reference-slot.is-error { border-color: #c77b6c; }
.frame-reference-guidance { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: #bdc8c2; }
.prompt-box.drop-target::after {
  content: "Drop references to attach";
  align-self: center;
  color: #eeba99;
  font-size: 10px;
  pointer-events: none;
}
.image-mode .prompt-box.drop-target::after {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 7px;
  background: #131615e8;
}
/* Header parity: planned/provider-unverified destinations stay visible like
   Higgsfield's global nav but are clearly non-actionable until verified. */
.topbar .nav-item.locked { color: #5f6366; cursor: not-allowed; }
.topbar .nav-item.locked:hover { color: #a2a6a5; }
.topbar .nav-item.locked .badge { opacity: .65; }

/* Higgsfield keeps the first desktop row useful without letting the header
   wrap.  The local header advertises the same surfaces at comfortable widths;
   on compact laptops the later entries collapse behind More. */
@media (max-width: 1050px) and (min-width: 951px) {
  .topbar nav .nav-item:nth-child(n + 9):not(.more-trigger) { display: none; }
}
@media (max-width: 950px) {
  .topbar nav .nav-item:nth-child(n + 9):not(.more-trigger) { display: none; }
}

/* Video studio parity pass -------------------------------------------------
   Higgsfield keeps the video workspace very quiet: a 45px global rail, a
   model card immediately below the workflow tabs, and a thin queue hint that
   never competes with the result canvas.  Keep the local bridge/status
   affordances, but use the same rhythm and visual hierarchy. */
@media (min-width: 651px) {
  :root { --header: 45px; }
  .topbar { height: var(--header); padding-inline: 16px; gap: 18px; }
  .topbar nav { gap: 18px; }
  body:not(.image-mode) .studio-page .studio-context { display: none; }
  body:not(.image-mode) .studio-page .composer { border-radius: 18px; }
  body:not(.image-mode) .studio-page .work-tabs {
    min-height: 49px;
    padding: 14px 8px 7px;
    gap: 14px;
  }
  body:not(.image-mode) .studio-page .work-tabs button {
    font-size: 12px;
    padding-bottom: 11px;
  }
  body:not(.image-mode) .studio-page .preset-card {
    min-height: 130px;
    border-radius: 12px;
    background:
      linear-gradient(112deg, #111b21 0%, #23343c 45%, #172125 46%, #080c0e 100%),
      radial-gradient(circle at 85% 25%, #e7a85166, transparent 32%);
    box-shadow: inset 0 1px #ffffff12, inset 0 -22px 45px #0007;
  }
  body:not(.image-mode) .studio-page .preset-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(135deg, transparent 0 44%, #9eb8ad18 44.5% 45%, transparent 45.5%),
      linear-gradient(155deg, transparent 0 57%, #f1b55e1a 57.5% 58%, transparent 58.5%),
      radial-gradient(ellipse at 84% 16%, #f3c67844, transparent 20%);
    mix-blend-mode: screen;
  }
  body:not(.image-mode) .studio-page .preset-art {
    right: -15px;
    top: 22px;
    width: 184px;
    height: 94px;
    border: 0;
    opacity: .85;
    transform: rotate(-20deg);
    background:
      linear-gradient(145deg, transparent 0 26%, #b7c4b725 27% 30%, transparent 31%),
      linear-gradient(90deg, #25363d 0 33%, #e0a55c 34% 38%, #162226 39% 70%, #789a8f 71% 75%, #11191d 76%),
      repeating-linear-gradient(0deg, #ffffff08 0 2px, transparent 2px 9px);
    box-shadow: 0 12px 25px #0008;
    clip-path: polygon(0 16%, 91% 0, 100% 73%, 12% 100%);
    z-index: 0;
  }
  body:not(.image-mode) .studio-page .preset-copy { z-index: 2; }
  body:not(.image-mode) .studio-page .preset-copy b {
    max-width: 210px;
    font-size: 18px;
    line-height: 1.05;
    text-transform: uppercase;
  }
  body:not(.image-mode) .studio-page .segment {
    border: 1px solid #ffffff0a;
    border-radius: 10px;
    background: #171a1c;
  }
  body:not(.image-mode) .studio-page .ref-box {
    min-height: 138px;
    border-color: #30373a;
    border-style: dashed;
    border-radius: 13px;
    background: linear-gradient(145deg, #1a1e20, #151719);
    box-shadow: inset 0 1px #ffffff06;
  }
  body:not(.image-mode) .studio-page .ref-box:hover,
  body:not(.image-mode) .studio-page .ref-box.drag {
    border-color: var(--lime);
    background: linear-gradient(145deg, #261e19, #171b18);
  }
  body:not(.image-mode) .studio-page .ref-icons span {
    background: #242a2c;
    border-color: #4b5558;
  }
  body:not(.image-mode) .studio-page .prompt-box {
    border-color: #2a3032;
    border-radius: 12px;
    background: #171a1c;
  }
  body:not(.image-mode) .studio-page .prompt-box:focus-within {
    border-color: #ff620040;
    box-shadow: 0 0 0 3px #ff62000c;
  }
  body:not(.image-mode) .studio-page .result-panel {
    border-radius: 18px;
    padding-top: 9px;
  }
  body:not(.image-mode) .studio-page .history-toolbar {
    min-height: 45px;
    padding-bottom: 8px;
  }
  body:not(.image-mode) .studio-page .history-tabs button {
    padding: 8px 10px;
    border-radius: 9px;
  }
  body:not(.image-mode) .studio-page .queue-summary {
    min-height: 26px;
    margin: 0 0 10px;
    padding: 5px 10px;
    border-radius: 9px;
    background: #151819;
    border-color: #202527;
    font-size: 9px;
  }
  body:not(.image-mode) .studio-page .queue-summary-main,
  body:not(.image-mode) .studio-page .queue-summary-actions { gap: 5px; }
  body:not(.image-mode) .studio-page .queue-summary .queue-muted { display: none; }
  body:not(.image-mode) .studio-page .queue-sync { padding: 3px 6px; font-size: 8px; }
  body:not(.image-mode) .studio-page .history-card {
    border-radius: 15px;
    border-color: #2a3032;
    background: #151819;
  }
  body:not(.image-mode) .studio-page .job-details { padding: 18px; gap: 12px; }
}

/* Motion Library uses the same editorial canvas rhythm as Higgsfield's
   reference library. It is only a prompt/reference surface: choosing a tile
   loads the local draft and never bypasses Picsart calibration. */
.video-only-tab { display: inline-flex; }
.motion-panel { padding: 12px 8px 28px; }
.motion-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .95fr);
  gap: 34px;
  align-items: center;
  height: 230px;
  min-height: 230px;
  max-height: 230px;
  padding: 24px 28px 22px;
  border-radius: 17px;
  background: radial-gradient(circle at 82% 35%, #9c7e6b22, transparent 30%), #111416;
  border: 1px solid #202628;
}
.motion-copy h1 { margin: 8px 0 10px; font: 650 clamp(25px, 2.45vw, 36px)/.95 Space, Inter, sans-serif; letter-spacing: -.065em; }
.motion-copy > p:not(.eyebrow) { max-width: 510px; color: #81898a; font-size: 12px; line-height: 1.6; margin: 0; }
.motion-hero-art { position: relative; align-self: stretch; min-height: 172px; border-radius: 11px; overflow: hidden; background: #202729; }
.motion-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000b, transparent 55%); }
.motion-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.motion-hero-art span { position: absolute; z-index: 1; left: 12px; bottom: 11px; color: #f4f0ed; font-size: 10px; }
.motion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 10px; margin-top: 14px; }
.motion-card { min-width: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid #242a2c; border-radius: 12px; background: #171a1c; transition: transform 180ms ease, border-color 180ms ease; }
.motion-card:first-child { grid-row: span 2; }
.motion-card:hover { transform: translateY(-2px); border-color: #f1782c55; }
.motion-card-art { display: block; position: relative; height: calc(100% - 44px); min-height: 96px; overflow: hidden; background: #202427; }
.motion-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.motion-card:hover .motion-card-art img { transform: scale(1.04); }
.motion-card-play { position: absolute; left: 10px; bottom: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #0c0f0ed9; color: #ff751f; }
.motion-card-play .icon { width: 12px; height: 12px; }
.motion-card-copy { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 9px 10px; }
.motion-card-copy b { overflow: hidden; color: #e8ece7; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.motion-card-copy small { color: #747e7e; font-size: 8px; white-space: nowrap; }
.image-mode .video-only-tab { display: none; }
.image-mode #motionPanel { display: none !important; }
@media (max-width: 950px) {
  .motion-hero { grid-template-columns: 1fr .8fr; gap: 18px; padding: 20px; }
  .motion-grid { grid-template-columns: repeat(3, 1fr); }
  .motion-card:first-child { grid-row: span 1; }
}
@media (max-width: 650px) {
  .motion-panel { padding: 4px 0 18px; }
  .motion-hero { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; padding: 18px; gap: 15px; }
  .motion-hero-art { min-height: 150px; }
  .motion-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 7px; }
  .motion-card:first-child { grid-column: span 2; }
  .motion-card-copy { display: block; }
  .motion-card-copy small { display: block; margin-top: 3px; }
}

/* Image canvas parity: keep the results contact-sheet quiet like Higgsfield
   while retaining the complete local history/actions on hover or keyboard
   focus. Provider settings and attribution remain unchanged in the DOM. */
@media (min-width: 651px) {
  .image-mode .studio-page { padding: 39px 0 230px; }
  .image-mode .result-panel { border: 0; border-radius: 0; padding: 0 0 24px; }
  .image-mode .history-list.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    align-items: stretch;
  }
  .image-mode .history-list.grid .history-card {
    position: relative;
    display: block;
    min-height: 0;
    height: min(520px, calc(100dvh - var(--header) - 90px));
    border: 0;
    border-radius: 0;
    background: #151718;
    overflow: hidden;
  }
  .image-mode .history-list.grid .job-media { height: 100%; min-height: 0; border-radius: 0; }
  .image-mode .history-list.grid .job-media img,
  .image-mode .history-list.grid .job-media video {
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .25s ease;
  }
  .image-mode .history-list.grid .history-card:hover .job-media img,
  .image-mode .history-list.grid .history-card:focus-within .job-media img,
  .image-mode .history-list.grid .history-card:hover .job-media video,
  .image-mode .history-list.grid .history-card:focus-within .job-media video { transform: scale(1.025); filter: brightness(.78); }
  .image-mode .history-list.grid .job-details {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    min-height: 0;
    padding: 34px 13px 12px;
    gap: 7px;
    background: linear-gradient(180deg, transparent, #060707e8 72%);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .image-mode .history-list.grid .history-card:hover .job-details,
  .image-mode .history-list.grid .history-card:focus-within .job-details { opacity: 1; transform: none; pointer-events: auto; }
  .image-mode .history-list.grid .model-chip { padding: 6px 8px; border-color: #ffffff38; background: #101211b8; font-size: 10px; backdrop-filter: blur(8px); }
  .image-mode .history-list.grid .job-prompt { color: #d5d9d4; font-size: 11px; -webkit-line-clamp: 2; }
  .image-mode .history-list.grid .job-meta, .image-mode .history-list.grid .job-time { font-size: 9px; }
  .image-mode .history-list.grid .job-meta span { padding: 4px 6px; background: #ffffff16; }
  .image-mode .history-list.grid .job-actions button { padding: 6px 8px; font-size: 10px; background: #ffffff18; backdrop-filter: blur(8px); }
  .image-mode .history-list.grid .empty-media { padding: 22px; text-align: center; color: #777d7e; font-size: 11px; }
  .image-mode .history-list.grid .status-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; background: #101211d9; backdrop-filter: blur(9px); }
  .image-mode .history-list.grid .job-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
  .image-mode .prompt-actions { opacity: .55; transform: scale(.92); transform-origin: right center; }
  .image-mode .prompt-action { padding: 2px 5px; font-size: 8px; }
}
@media (max-width: 650px) {
  .image-mode .history-list.grid .history-card { position: relative; min-height: 0; height: clamp(220px, 56vw, 340px); border-radius: 5px; }
  .image-mode .history-list.grid .job-media { height: 100%; min-height: 0; }
  .image-mode .history-list.grid .job-details { position: absolute; inset: auto 0 0; z-index: 2; padding: 24px 9px 8px; gap: 5px; background: linear-gradient(180deg, transparent, #060707e8 78%); }
  .image-mode .history-list.grid .job-prompt { font-size: 9px; }
  .image-mode .history-list.grid .job-meta, .image-mode .history-list.grid .job-time { display: none; }
}

/* Image mode intentionally renders the contact sheet even when the saved
   view preference was List; unlike Video, the reference surface has no
   split-card list. Keep the same overlay treatment for that persisted state. */
@media (min-width: 651px) {
  .image-mode .history-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .image-mode .history-list .history-card { position: relative; display: block; min-height: 0; height: min(520px, calc(100dvh - var(--header) - 90px)); border: 0; border-radius: 0; overflow: hidden; background: #151718; }
  .image-mode .history-list .job-media { height: 100%; min-height: 0; border-radius: 0; }
  .image-mode .history-list .job-media img, .image-mode .history-list .job-media video { object-fit: cover; }
  .image-mode .history-list .job-details { position: absolute; inset: auto 0 0; z-index: 2; min-height: 0; padding: 34px 13px 12px; gap: 7px; background: linear-gradient(180deg, transparent, #060707e8 72%); opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
  .image-mode .history-list .history-card:hover .job-details, .image-mode .history-list .history-card:focus-within .job-details { opacity: 1; transform: none; pointer-events: auto; }
  .image-mode .history-list .model-chip { padding: 6px 8px; background: #101211b8; border-color: #ffffff38; font-size: 10px; backdrop-filter: blur(8px); }
  .image-mode .history-list .job-prompt { color: #d5d9d4; font-size: 11px; -webkit-line-clamp: 2; }
  .image-mode .history-list .job-meta, .image-mode .history-list .job-time { font-size: 9px; }
  .image-mode .history-list .job-meta span { padding: 4px 6px; background: #ffffff16; }
  .image-mode .history-list .job-actions button { padding: 6px 8px; font-size: 10px; background: #ffffff18; backdrop-filter: blur(8px); }
}
@media (max-width: 650px) {
  .image-mode .history-list .history-card { position: relative; min-height: 0; height: clamp(220px, 56vw, 340px); border-radius: 5px; }
  .image-mode .history-list .job-media { height: 100%; min-height: 0; }
  .image-mode .history-list .job-details { position: absolute; inset: auto 0 0; z-index: 2; padding: 24px 9px 8px; gap: 5px; background: linear-gradient(180deg, transparent, #060707e8 78%); }
  .image-mode .history-list .job-meta, .image-mode .history-list .job-time { display: none; }
}

/* Small screens keep Higgsfield's single-purpose rail: trim navigation to the
   primary surfaces and remove diagnostics from the customer-facing dock. The
   same model/account controls remain available in the compact settings row or
   picker, while the full status text stays in Admin/desktop. */
@media (max-width: 650px) {
  .topbar { gap: 8px; }
  .topbar nav { gap: 10px; }
  .topbar nav .nav-item:nth-child(n + 4):not(.more-trigger) { display: none; }
  .top-actions { gap: 2px; }
  .top-actions [data-action="search"],
  .top-actions a[href="#assets"] { display: none; }
  .top-actions .credit-pill { padding: 6px 8px; font-size: 10px; }
  .top-actions .credit-pill small { font-size: 8px; }
  .image-mode .studio-context,
  .image-mode .model-capabilities,
  .image-mode .workflow-note,
  .image-mode .prompt-suggestions { display: none; }
  .image-mode .composer { min-height: 0; max-height: min(360px, calc(100dvh - 72px)); overflow-y: auto; }
  .image-mode .composer-scroll { min-height: 0; display: block; }
  .image-mode .prompt-box { height: auto; min-height: 58px; margin-bottom: 8px; }
  .image-mode .prompt-box textarea { min-height: 42px; height: 42px; }
  .image-mode .worker-routing { margin-top: 7px; }
  .image-mode .history-list .job-details { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .image-mode .history-list .history-card:focus-within .job-details { opacity: 1; pointer-events: auto; }
}

/* Motion Library is the editorial canvas in Higgsfield's video workflow:
   remove the operational queue strip from that tab only and let the hero
   align with the right canvas edge. The queue remains visible on History. */
@media (min-width: 651px) {
  #resultPanel:has(#motionPanel) > .queue-summary { display: none; }
  #resultPanel:has(#motionPanel) .motion-panel {
    margin-left: -16px;
    margin-right: -16px;
    padding: 14px 0 28px;
  }
}

/* Final Image canvas alignment -------------------------------------------
   Higgsfield places the reference contact sheet immediately below the
   global header.  The local inspiration label is useful to screen readers
   and remains in the DOM, but it should not reserve a visible row in the
   hero canvas.  Hiding that visual-only row and compensating the top rhythm
   keeps the first image tile on the same baseline as the reference UI. */
@media (min-width: 651px) {
  .image-mode .studio-page { padding-top: 45px; }
  .image-mode .studio-page .result-panel { padding-top: 0; }
  .image-mode .image-examples .example-label { display: none; }
}

/* Image dock calibration --------------------------------------------------
   Keep the Picsart routing select in the DOM for keyboard/automation and
   Admin diagnostics, but let the customer-facing image surface follow
   Higgsfield's compact control rail: a centered ~1120px dock, generous side
   margins, and one clean row of provider controls.  Routing remains automatic
   by default, so hiding this optional override cannot change job semantics. */
@media (min-width: 651px) {
  .image-mode .composer {
    /* Higgsfield keeps the image dock almost edge-to-edge on a desktop
       canvas.  The earlier 160px gutter made the local dock read like a
       narrow settings card at 1176–1280px viewport widths. */
    width: min(1120px, calc(100% - 56px));
    min-height: 199px;
    max-height: 199px;
    bottom: 18px;
    padding-inline: 24px;
  }
  .image-mode .worker-routing { display: none; }
  .image-mode .prompt-box {
    flex-basis: 96px;
    height: 96px;
    max-height: 96px;
  }
  .image-mode .prompt-box textarea {
    height: 42px;
    min-height: 42px;
    max-height: 54px;
  }
  .image-mode .output-settings { gap: 7px; }
}

/* Put the image actions on the same bottom rail as the model controls.  This
   is the key Higgsfield interaction cue: prompt copy stays quiet above, then
   references, elements and the calibrated Picsart settings read as one
   keyboard-friendly strip. */
@media (min-width: 651px) {
  .image-mode .composer-scroll { position: relative; }
  .image-mode .prompt-actions,
  .image-mode #promptCount { display: none; }
  .image-mode .prompt-tools {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    min-height: 40px;
    align-items: center;
  }
  .image-mode .prompt-tools button { min-height: 40px; }
  .image-mode .prompt-tools .image-reference-button {
    width: 42px;
    padding-inline: 0;
    gap: 0;
    justify-content: center;
  }
  .image-mode .prompt-tools .image-reference-button > span:last-child,
  .image-mode .prompt-tools [data-action="elements"] > span { display: none; }
  .image-mode .prompt-tools [data-action="elements"] {
    width: 42px;
    padding-inline: 0;
    font-size: 0;
    justify-content: center;
  }
  .image-mode .prompt-tools [data-action="elements"]::before {
    content: "@" !important;
    font-size: 14px;
  }
  .image-mode .output-settings {
    position: absolute;
    left: 96px;
    right: 0;
    bottom: 0;
    min-height: 40px;
    height: 40px;
    align-items: center;
  }
  .image-mode .prompt-box {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }
  .image-mode .generate { min-height: 48px; }
  .image-mode .reference-list:not(:empty) {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  .image-mode .reference-item { width: 46px; height: 46px; }
}

/* The guest CTA keeps the same narrow action rail as Higgsfield's Generate
   button. Its title/status still explains the sign-in requirement, while the
   visible label stays inside the 144px rail instead of overflowing. */
@media (min-width: 651px) {
  .image-mode .generate { font-size: 13px; white-space: nowrap; }
.image-mode .generate-symbol { display: none; }
}

/* Final image dock row override. This comes after the compact legacy rules so
   the hidden image context cannot create a zero-height row followed by a
   blank band; the prompt and provider controls fill the dock like Higgsfield. */
@media (min-width: 651px) {
  .image-mode .composer {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "editor submit";
    align-content: stretch;
  }
  /* Higgsfield's image dock is intentionally single-purpose: the canvas
     starts above it and only the prompt, Picsart controls, and Generate rail
     remain visible.  The local status/context row is still rendered for
     accessibility and video/Admin diagnostics, but leaving a named grid area
     without a matching template creates an implicit row and a visible
     "Image studio" band.  Remove it from the customer-facing image dock so
     the prompt begins at the same vertical baseline as the reference UI. */
  .image-mode .studio-context { display: none; }
  .image-mode .composer-scroll { align-self: stretch; }
  .image-mode .composer-submit { align-self: center; }
}

/* Video's reference cards use the same generous 160px rhythm as Higgsfield's
   motion workflow. The sidebar remains scrollable, so this only improves the
   first-read proportions without changing job controls or provider payloads. */
@media (min-width: 651px) {
  body:not(.image-mode) .studio-page .work-tabs { min-height: 55px; }
  body:not(.image-mode) .studio-page .ref-box { min-height: 160px; }
}

/* Image canvas toolbar ----------------------------------------------------
   Higgsfield leaves a quiet 45px utility band under the global header (the
   filter button and card-size slider sit on the right).  Keep the local
   History/queue semantics intact, but expose only those non-destructive
   canvas controls in Image mode so the first image row starts at the same
   y=90 baseline as the reference surface. */
@media (min-width: 651px) {
  .image-mode .studio-page { padding-top: 0; }
  .image-mode .history-toolbar {
    display: flex;
    height: 45px;
    min-height: 45px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
    background: #0c0d0ef5;
    border-bottom: 1px solid #ffffff05;
  }
  .image-mode .history-tabs,
  .image-mode .history-controls [data-action="expand"],
  .image-mode .history-controls .view-switch { display: none; }
  .image-mode .history-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
  .image-mode .history-controls .icon-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #85898a;
  }
  .image-mode .history-controls input[type="range"] {
    display: block;
    width: 118px;
    height: 3px;
    accent-color: #f4f5f1;
    opacity: .82;
  }
  .image-mode .result-panel { padding-top: 0; }
  .image-mode .composer-submit {
    align-self: center;
    position: relative;
    padding-bottom: 0;
    transform: translateY(16px);
  }
  .image-mode .bridge-status {
    /* Higgsfield keeps connection/credit diagnostics out of the creation
       dock. They remain available from the account and Admin surfaces. */
    display: none;
  }
}

/* A quiet inline recovery hint keeps the compact dock understandable when
   Generate is disabled. It is populated from the same Manager/Picsart
   readiness state as the button, so it never invents provider controls. */
.generate-hint {
  display: block;
  max-width: 220px;
  margin: 0 auto 6px;
  color: #a6ada9;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}
.generate-hint:not(.hidden) {
  animation: control-popover-in 200ms var(--control-ease);
}
@media (min-width: 651px) {
  .image-mode .generate-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    max-width: 144px;
    margin: 0;
    color: #9ea6a3;
    font-size: 9px;
  }
}
@media (max-width: 650px) {
  .image-mode .generate-hint {
    flex: 0 0 auto;
    max-width: 190px;
    margin: 0;
    font-size: 9px;
    text-align: left;
  }
}

/* Image surface calibration: the editor is part of the floating dock, not
   an inset form card.  These selectors deliberately include the Studio
   ancestor so the older sidebar surface rules cannot paint a #111 rectangle
   behind the image prompt.  No provider control or job state is changed. */
@media (min-width: 651px) {
  .image-mode .studio-page .composer {
    background: linear-gradient(112deg, rgba(15, 17, 18, .97), rgba(37, 40, 41, .97));
    border-color: #424749;
    box-shadow: 0 18px 60px #0009, inset 0 1px #ffffff05;
  }
  .image-mode .studio-page .prompt-box,
  .image-mode .studio-page .prompt-box:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  /* The reference dock leaves a quiet lower inset beneath its 42px control
     rail.  Use the same baseline instead of pinning controls to the border. */
  .image-mode .prompt-tools,
  .image-mode .output-settings { bottom: 16px; }
  .image-mode .prompt-tools button,
  .image-mode .output-settings,
  .image-mode .output-settings .setting-button,
  .image-mode .output-settings .model-trigger { min-height: 42px; }
  .image-mode .output-settings { height: 42px; }
  .image-mode .studio-page .prompt-box textarea {
    color: #f2f3ef;
    caret-color: var(--lime);
  }
  .image-mode .studio-page .prompt-box textarea::placeholder { color: #929695; }
  .image-mode .model-trigger strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* References get their own top strip, as in the reference studio.  Without
     the extra editor space, an attached 46px thumbnail overlaps line one of
     a prompt.  Keep the bottom control rail fixed and scroll long bundles
     horizontally instead of growing the dock without a bound. */
  .image-mode .composer:has(.reference-list:not(:empty)) {
    min-height: 251px;
    max-height: min(251px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box {
    flex-basis: 148px;
    height: 148px;
    min-height: 148px;
    max-height: 148px;
    padding-top: 52px;
  }
  .image-mode .reference-list:not(:empty) {
    right: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .image-mode .reference-item { flex: 0 0 46px; }
}

/* Narrow studios keep their primary tasks on one scrollable rail.  This
   avoids clipping workflow/history labels at phone widths and reserves the
   safe area below a fixed image dock without changing the desktop rhythm. */
@media (max-width: 650px) {
  .work-tabs,
  .history-tabs {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .work-tabs button,
  .history-tabs button { flex: 0 0 auto; }
  .image-mode .studio-page .composer {
    bottom: max(10px, env(safe-area-inset-bottom));
    border-color: #424749;
    background: linear-gradient(112deg, rgba(15, 17, 18, .97), rgba(37, 40, 41, .97));
  }
  .image-mode .studio-page .prompt-box,
  .image-mode .studio-page .prompt-box:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .image-mode .studio-page .prompt-box textarea { font-size: 16px; caret-color: var(--lime); }
  .image-mode .reference-item { flex: 0 0 45px; }
  .image-mode .composer-submit { flex-wrap: wrap; }
  .image-mode .generate-hint { flex-basis: 100%; max-width: none; }
}
@media (max-width: 380px) {
  .topbar nav { gap: 8px; }
  .top-actions .credit-pill small { display: none; }
  .image-mode .prompt-actions { gap: 2px; }
  .image-mode .prompt-action { padding-inline: 4px; }
}

/* Reference parity: Higgsfield keeps the image dock at the same compact
   height when thumbnails are attached. The thumbnail strip occupies the
   upper prompt area; it must not push the whole dock 50px upward. */
@media (min-width: 651px) {
  .image-mode .composer:has(.reference-list:not(:empty)) {
    min-height: 200px;
    height: 200px;
    max-height: min(200px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box {
    flex-basis: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    padding-top: 52px;
  }
}

/* Match the reference image dock's tighter vertical rhythm. The prompt line
   and one 42px control rail fit in a short floating card; attached
   references intentionally opt into the taller 200px variant above. */
@media (min-width: 651px) {
  .image-mode .composer {
    height: 152px;
    min-height: 152px;
    max-height: min(152px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .composer-scroll .prompt-box {
    flex-basis: 68px;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }
  .image-mode .composer-scroll .prompt-box textarea {
    height: 34px;
    min-height: 34px;
    max-height: 42px;
  }
  .image-mode .composer:has(.reference-list:not(:empty)) {
    height: 200px;
    min-height: 200px;
    max-height: min(200px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .composer:has(.reference-list:not(:empty)) .prompt-box {
    flex-basis: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
  }
}

/* Keep the CTA self-describing like Higgsfield: the provider controls remain
   exact Picsart values, while the local Manager's configured credit estimate
   is shown as a secondary line instead of being buried in diagnostics. */
.generate-cost {
  display: block;
  color: currentColor;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  opacity: .72;
  white-space: nowrap;
}
.input-quote-panel { width: 100%; border: 1px solid #454c36; border-radius: 10px; background: #1a2017; padding: 10px 11px; margin-bottom: 10px; color: #e8dfd9; transition: border-color .18s ease, background .18s ease; }
.input-quote-panel[hidden] { display: none; }
.input-quote-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.input-quote-heading button { flex-shrink: 0; padding: 7px 9px; border: 1px solid #85614a; border-radius: 6px; background: #35261d; color: #f5d8c6; font-size: 11px; }
.input-quote-heading button:disabled { opacity: .55; cursor: wait; }
.input-quote-panel p { margin: 8px 0 5px; font-size: 11px; line-height: 1.45; min-height: 0; }
.input-quote-panel small { display: block; color: #a8b09b; font-size: 10px; line-height: 1.4; }
.input-quote-panel #inputQuoteTiming { margin-top: 6px; color: #dab39b; font-variant-numeric: tabular-nums; }
.input-quote-panel[data-quote-state="ready"] { border-color: #b06d43; background: #251c16; }
.input-quote-panel[data-quote-state="checking"],
.input-quote-panel[data-quote-state="freezing"],
.input-quote-panel[data-quote-state="queued"],
.input-quote-panel[data-quote-state="preparing"] { border-color: #745847; }
.input-quote-panel:is([data-quote-state="error"],[data-quote-state="failed"],[data-quote-state="expired"]) { border-color: #91734a; background: #272015; }
@media (max-width: 650px) { .image-mode .input-quote-panel { flex-basis: 100%; order: -1; } }
@media (min-width: 651px) {
  .image-mode .generate {
    flex-direction: column;
    gap: 3px;
    justify-content: center;
  }
  .image-mode .generate-symbol { display: inline; font-size: 13px; line-height: 1; }
.image-mode .generate-cost { font-size: 9px; }
}

/* Final Higgsfield parity calibration -----------------------------------
   Keep this last so the desktop image surface has one authoritative geometry
   after the responsive/legacy rules above.  The reference composer is a
   1120x202px floating dock at 16px from the viewport bottom: a 152px editor
   fieldset on the left and an 84px Generate rail aligned to its lower edge.
   Model controls and values remain the exact Picsart/Manager projection. */
@media (min-width: 651px) {
  .image-mode .studio-page {
    padding-top: 0;
    padding-bottom: 230px;
  }
  .image-mode .history-toolbar {
    display: flex;
    height: 45px;
    min-height: 45px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
    background: #0c0d0ef5;
    border-bottom: 1px solid #ffffff05;
  }
  .image-mode .history-tabs,
  .image-mode .history-controls [data-action="expand"],
  .image-mode .history-controls .view-switch { display: none; }
  .image-mode .history-controls { margin-left: auto; }
  .image-mode .result-panel { padding: 0 0 24px; }

  .image-mode .composer {
    width: min(1120px, calc(100% - 56px));
    height: 202px;
    min-height: 202px;
    max-height: min(202px, calc(100dvh - var(--header) - 24px));
    bottom: 16px;
    padding: 24px;
    gap: 8px 16px;
    border-radius: 26px;
    overflow: visible;
    background: rgba(15, 17, 19, .96);
    border-color: #3b4143;
    box-shadow: 0 18px 60px #000b, 0 0 0 1px #ffffff04;
  }
  .image-mode .composer-scroll {
    height: 152px;
    min-height: 152px;
    align-self: stretch;
    overflow: visible;
  }
  .image-mode .prompt-box {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    flex-basis: 68px;
    padding: 0;
    gap: 5px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .image-mode .prompt-head { min-height: 20px; margin: 0; }
  .image-mode #promptLabel { display: none; }
  .image-mode .prompt-actions { margin-left: auto; }
  .image-mode .prompt-box textarea {
    flex: 0 0 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0;
    color: #f2f3ef;
    caret-color: var(--lime);
    font-size: 15px;
    line-height: 1.45;
  }
  .image-mode .prompt-box textarea::placeholder { color: #929695; }
  .image-mode .prompt-suggestions { display: none; }
  .image-mode .prompt-tools,
  .image-mode .output-settings {
    bottom: 0;
    height: 42px;
    min-height: 42px;
  }
  .image-mode .prompt-tools {
    width: 83px;
    gap: 1px;
  }
  .image-mode .prompt-tools button {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
  }
  .image-mode .output-settings {
    left: 91px;
  }
  .image-mode .model-trigger {
    width: 160px;
    max-width: 160px;
  }
  .image-mode .setting-fields .setting-button {
    min-width: 81px;
  }
  .image-mode .setting-fields .image-count-stepper {
    width: 104px;
    min-width: 104px;
  }
  .image-mode .prompt-tools button,
  .image-mode .output-settings .setting-button,
  .image-mode .output-settings .model-trigger { min-height: 40px; }
  .image-mode .output-settings { overflow-x: auto; scrollbar-width: none; }
  .image-mode .worker-routing { max-width: 220px; }

  .image-mode .composer-submit {
    align-self: end;
    height: 84px;
    min-height: 84px;
    justify-content: flex-end;
    gap: 0;
    padding: 0;
    transform: none;
  }
  .image-mode .generate {
    height: 84px;
    min-height: 84px;
    border-radius: 14px;
    font-size: 15px;
    box-shadow: inset 0 -3px 0 #00000045;
  }
  .image-mode .bridge-status { display: none; }

  /* Reference thumbnails occupy the same 56px top strip as Higgsfield;
     the dock stays 202px instead of jumping when a reference is attached. */
  .image-mode .composer:has(.reference-list:not(:empty)) {
    height: 202px;
    min-height: 202px;
    max-height: min(202px, calc(100dvh - var(--header) - 24px));
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .reference-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 56px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
  }
  .image-mode .reference-item { flex: 0 0 56px; width: 56px; height: 56px; }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box {
    height: 112px;
    min-height: 112px;
    max-height: 112px;
    flex-basis: 112px;
    padding-top: 64px;
  }
  .image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box textarea {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
  }
}

/* Header and canvas parity -----------------------------------------------
   Higgsfield uses a generous, portrait-biased contact sheet for inspiration.
   The controls below are presentation-only: model discovery, job payloads,
   and the Picsart adapter remain untouched. */
@media (min-width: 651px) {
  /* The reference uses a fixed, centered 1120px dock at this viewport and a
     portrait-biased four-column contact sheet behind it.  Keep the dock
     geometry above authoritative; only make the artwork track the provider's
     9:16-ish cards instead of stopping at a short preview height. */
  .image-mode .image-examples {
    padding-right: 16px;
    gap: 2px;
  }
  .image-mode .history-toolbar {
    height: 47px;
    min-height: 47px;
  }
  .image-mode .image-examples button {
    height: auto;
    min-height: 0;
    aspect-ratio: .558;
    border-radius: 0;
  }
}

@media (max-width: 1100px) and (min-width: 651px) {
  .top-actions .admin-link { display: none; }
}

/* Video editorial canvas parity -----------------------------------------
   Higgsfield keeps the video shell flush to the right viewport edge and
   presents the motion library as an unboxed editorial surface.  Preserve the
   local Picsart prompt/model controls in the left rail, while matching that
   outer geometry and the hero/card rhythm. */
@media (min-width: 651px) {
  body:not(.image-mode) .studio-page {
    padding-right: 0;
  }
  #resultPanel:has(#motionPanel) .motion-panel {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    width: calc(100% + 6px);
  }
  body:not(.image-mode) .studio-page .motion-hero {
    height: 207px;
    min-height: 207px;
    max-height: 207px;
    grid-template-columns: minmax(0, 1fr) 312px;
    padding: 12px;
    gap: 48px;
    position: relative;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  body:not(.image-mode) .studio-page .motion-hero-art {
    min-height: 0;
    height: 175px;
    align-self: start;
    margin-top: 1px;
    border-radius: 8px;
  }
  body:not(.image-mode) .studio-page .motion-copy {
    align-self: start;
    margin-top: 20px;
    padding-top: 16px;
  }
  body:not(.image-mode) .studio-page .motion-copy h1 {
    margin: 0 0 10px;
  }
  body:not(.image-mode) .studio-page .motion-copy > p:not(.eyebrow) {
    max-width: 420px;
    font-size: 14px;
    line-height: 20px;
  }
  body:not(.image-mode) .studio-page .motion-grid {
    /* Match the reference's responsive masonry: four cards on a wider
       desktop, three on a compact laptop, without squeezing thumbnails. */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    padding: 0 12px;
    margin-top: 14px;
  }
  body:not(.image-mode) .studio-page .motion-copy .eyebrow { display: none; }
}

/* Higgsfield keeps Motion Library deliberately editorial: its toolbar only
   exposes the four library tabs. Filtering, card-size and list/grid controls
   belong to History and should not compete with the motion canvas. */
@media (min-width: 651px) {
  #resultPanel:has(#motionPanel:not(.hidden)) .history-controls { display: none; }
}

@media (min-width: 951px) and (max-width: 1240px) {
  body:not(.image-mode) .studio-page .motion-card:first-child { grid-row: auto; }
  body:not(.image-mode) .studio-page .motion-card:nth-child(2) { grid-row: span 3; }
}

/* A photographic selected-model tile matches the reference's first-read
   hierarchy. The artwork is decorative; names and controls remain Picsart's. */
.preset-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; transition: transform 300ms ease; }
.preset-card .preset-art { display: none; }
.preset-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0001, #0002 35%, #000a); pointer-events: none; }
.preset-card .preset-change, .preset-card .preset-copy { z-index: 2; }
.preset-card:hover .preset-preview { transform: scale(1.025); }
@media (min-width: 651px) {
  body:not(.image-mode) .studio-page .preset-card::after { background: linear-gradient(180deg, #0001, #0002 35%, #000b); mix-blend-mode: normal; }
}

/* Final Higgsfield parity pass -------------------------------------------
   Keep the local bridge's model catalog and Picsart controls intact, but use
   the same compact, floating surfaces as the reference app.  These rules
   deliberately live last so they win over the earlier responsive variants. */
@media (min-width: 651px) {
  .model-dialog {
    width: min(400px, calc(100vw - 24px));
    height: min(640px, calc(100dvh - 112px));
    max-height: min(640px, calc(100dvh - 112px));
    border-radius: 16px;
    background: #171717;
    box-shadow: 0 26px 70px #000b, 0 0 0 1px #ffffff05;
  }
  .model-dialog .dialog-heading { padding: 10px 14px; min-height: 42px; }
  .model-dialog .model-tools { padding: 8px 12px 0; }
  .model-dialog .search-field { min-height: 40px; border-radius: 8px; }
  .model-dialog .family-tabs { gap: 4px; padding: 8px 0; }
  .model-dialog .family-tabs button { padding: 6px 8px; font-size: 9px; }
  .model-dialog .model-list { padding: 4px 10px 12px; }
  .model-dialog .model-option { min-height: 57px; padding: 9px 10px; gap: 10px; }
  .model-dialog .model-option strong { font-size: 12px; }
  .model-dialog .model-option small { font-size: 9px; margin-top: 3px; }

  /* The reference uses a tall first/last motion tile with stacked cards in
     the middle. Keep the card order supplied by the local inspiration data. */
  body:not(.image-mode) .studio-page .motion-grid {
    grid-auto-rows: 140px;
    gap: 10px 12px;
  }
  body:not(.image-mode) .studio-page .motion-card:first-child,
  body:not(.image-mode) .studio-page .motion-card:nth-child(3) { grid-row: span 3; }
  body:not(.image-mode) .studio-page .motion-card:nth-child(2),
  body:not(.image-mode) .studio-page .motion-card:nth-child(4),
  body:not(.image-mode) .studio-page .motion-card:nth-child(5) { grid-row: span 1; }
  body:not(.image-mode) .studio-page .motion-card { border-radius: 12px; }
  body:not(.image-mode) .studio-page .motion-card-copy { padding: 9px 10px; }
  body:not(.image-mode) .studio-page .motion-hero {
    grid-template-columns: minmax(0, 1fr) 272px;
  }
}

@media (max-width: 650px) {
  .model-dialog {
    width: calc(100vw - 20px);
    height: min(76dvh, 610px);
    max-height: calc(100dvh - 86px);
    border-radius: 15px;
  }
}

/* Higgsfield-style utility links in the global header. These remain local
   actions: Pricing opens the Manager credit view and Enterprise stays an
   informational affordance without calling a provider API. */
.top-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 8px;
  color: #8f9195;
  font-size: 12px;
  white-space: nowrap;
}
.top-link [data-icon] { width: 14px; height: 14px; opacity: .75; }
.top-link:hover { color: #f4f4f4; }
.top-link[data-action="pricing"] {
  min-height: 32px;
  padding-inline: 10px;
  border: 1px solid #2b2f31;
  border-radius: 10px;
  background: #17191b;
  color: #f1f2ef;
}
.top-link[data-action="pricing"]:hover { background: #222628; border-color: #464c4e; }
.top-link b {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background: #ff39a9;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 3px 12px #ff39a933;
}
.history-tabs .tab-badge {
  padding: 2px 5px;
  border-radius: 4px;
  background: #3b1d0b;
  color: #ff751f;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .02em;
}
@media (max-width: 1100px) {
  .top-link { display: none; }
}

/* Keep the first row visually identical to Higgsfield on desktop: its main
   creative surfaces stay visible through Cinema Studio, while the longer
   tail moves into More only at laptop/mobile widths.  The route links remain
   in the DOM for keyboard and screen-reader access. */
@media (min-width: 1101px) {
  .topbar { gap: 12px; padding-inline: 15px; }
  .topbar nav { gap: 12px; overflow: hidden; }
  .topbar nav .desktop-secondary { display: flex; }
  .topbar nav .more-trigger { display: flex; flex: 0 0 auto; }
  .top-actions { gap: 2px; }
  .top-actions .admin-link { display: none; }
  .top-actions .credit-pill { padding-inline: 8px; }
  .top-actions .top-link { padding-inline: 8px; }
}
@media (min-width: 651px) and (max-width: 1100px) {
  .topbar { gap: 14px; }
  .topbar nav { gap: 15px; overflow: hidden; }
  .topbar nav .desktop-secondary { display: none; }
  .topbar nav .more-trigger { flex: 0 0 auto; }
  .top-actions { gap: 3px; }
  .top-actions .admin-link { display: none; }
  .top-actions .credit-pill { padding-inline: 9px; }
}
/* Failed cards must remain diagnosable without hovering the image overlay. */
.empty-media-error { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); padding: 24px; text-align: center; line-height: 1.5; overflow-wrap: anywhere; }
.empty-media-error strong { color: #e8d7d0; font-size: 14px; font-weight: 550; }
.empty-media-error > span { color: #c39e94; font-size: 12px; }
.empty-media-error small { color: #8c9295; font-size: 11px; }

/* Video references can be explicitly assigned to Picsart's frame slots. */
.reference-role { position:absolute; left:3px; right:3px; bottom:3px; z-index:2; min-width:0; padding:3px 2px; border:1px solid #ffffff26; border-radius:4px; background:#111d; color:#f1f1ee; font-size:8px; line-height:1.1; }
.reference-item:has(.reference-role) { width:86px; height:88px; }
.reference-item small { max-width:78px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reference-limit-hint { display:block; min-height:15px; margin:1px 3px 0; color:#7f8783; font-size:9px; line-height:1.35; }
.reference-limit-hint.pending { color:#d6cf9d; }
.reference-limit-hint.error { color:#f1aaa0; }
.reference-item video { display:block; object-fit:cover; }
/* The image dock keeps the Higgsfield contact-sheet rhythm; routine model
   limits do not add a blank visual row. Errors/pending reads remain visible
   and actionable. */
.image-mode .reference-limit-hint { display:none; }
.image-mode .reference-limit-hint.pending,
.image-mode .reference-limit-hint.error { display:block; position:absolute; left:0; right:0; top:56px; margin:0; z-index:3; }
/* Native Picsart progress is intentionally separate from Manager's overall
   phase progress (which can start at 30% before Generate). */
.job-provider-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ff751f1a;
  color: #ff751f;
  border: 1px solid #ff751f44;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
}
.job-provider-progress.is-unknown { color:#aeb5b3; background:#ffffff08; border-color:#ffffff18; font-weight:400; }
.job-progress-times { display:grid; gap:4px; text-align:center; color:#aeb5b3; font-size:10px; line-height:1.5; }
.job-observer-status { display:grid; gap:4px; max-width:100%; color:#c2ccc3; text-align:center; font-size:10px; line-height:1.4; }
.job-monitor-label { color:#c7ad9d; }
.job-monitor-label[data-attention="true"] { color:#ebcb8c; }
.job-live-status .spinner[hidden] { display:none; }
.job-progress-warning { max-width:280px; padding:7px 10px; border:1px solid #e1b76644; border-radius:9px; background:#332916c9; color:#ebcb8c; font-size:10px; line-height:1.5; text-align:center; }
.job-progress-warning[hidden] { display:none; }
.job-media > .job-progress { position:absolute; left:0; right:0; bottom:0; z-index:3; }
.job-progress.is-indeterminate i { width:100%; background:linear-gradient(90deg,#35373a 15%,#c98c66 50%,#35373a 85%); background-size:200% 100%; animation:job-progress-waiting 2s linear infinite; }
.job-live-status .status-pill { max-width:100%; white-space:normal; text-align:center; justify-content:center; }
.image-mode .history-list.grid .job-live-status .status-pill { position:static; transform:none; white-space:normal; }
@keyframes job-progress-waiting { from { background-position:200% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion:reduce) { .job-progress.is-indeterminate i { animation:none; } }

/* Customer-facing reference and Agent cues. These are presentation-only: the
   model profile and worker payload remain the source of truth. */
.ref-box.has-files {
  min-height: 82px;
  border-style: solid;
  border-color: #624634;
  background: linear-gradient(135deg, #1b2117, #181a1b);
}
.ref-box.has-files .ref-icons { margin-bottom: 1px; transform: scale(.78); transform-origin: center; }
.ref-box.is-disabled { cursor: not-allowed; opacity: .72; }
.reference-kind {
  position: absolute;
  left: 3px;
  bottom: 3px;
  max-width: calc(100% - 6px);
  padding: 2px 4px;
  overflow: hidden;
  border: 1px solid #ffffff26;
  border-radius: 4px;
  background: #111d;
  color: #e7c5af;
  font-size: 7px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.reference-item:has(.reference-role) .reference-kind { bottom: 27px; }
.reference-item.is-invalid {
  border-color: #b86554;
  box-shadow: inset 0 0 0 1px #b8655438;
}
.reference-aspect {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 21px;
  overflow: hidden;
  padding: 2px 3px;
  border: 1px solid #ffffff24;
  border-radius: 4px;
  background: #101314d9;
  color: #dfc3b1;
  font-size: 7px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.reference-aspect.is-invalid {
  border-color: #b8655488;
  color: #ffd1be;
  background: #341c18e8;
}
.reference-dimensions {
  position: absolute;
  top: 18px;
  left: 3px;
  right: 3px;
  overflow: hidden;
  padding: 2px 3px;
  border: 1px solid #ffffff1c;
  border-radius: 4px;
  background: #101314c9;
  color: #d3b29d;
  font-size: 7px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.reference-dimensions.is-invalid {
  border-color: #b8655488;
  color: #ffd1be;
  background: #341c18e8;
}
.image-mode .reference-dimensions { font-size: 6px; }
.image-mode .reference-aspect { max-width: calc(100% - 8px); font-size: 6px; }
.reference-item.is-missing {
  background: repeating-linear-gradient(135deg, #211b19 0 8px, #2a2220 8px 16px);
  color: #ffc9b9;
}
.reference-item[draggable="true"] { cursor: grab; }
.reference-item[draggable="true"]:active { cursor: grabbing; }
.reference-reorder {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 4;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid #ffffff20;
  border-radius: 5px;
  background: #0c0e0ed9;
  backdrop-filter: blur(5px);
}
.reference-reorder button {
  position: static;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 3px;
  color: #e8c7b2;
  font-size: 10px;
  line-height: 15px;
}
.reference-reorder button:hover:not(:disabled),
.reference-reorder button:focus-visible { background: #ff620024; color: #fff; }
.reference-reorder button:disabled { opacity: .3; }
.reference-item:has(.reference-reorder) small { padding-right: 28px; }
.image-mode .reference-reorder { transform: scale(.82); transform-origin: bottom right; }
.reference-missing {
  position: absolute;
  inset: 19px 3px auto;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffd4c7;
}
.agent-live-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 3px 1px 7px;
  padding: 7px 8px;
  border: 1px solid #293029;
  border-radius: 9px;
  background: linear-gradient(110deg, #151b17, #121516);
  color: #b2bab4;
}
.agent-live-strip.is-busy {
  border-color: #6c452d;
  background: linear-gradient(110deg, #291d16, #141817);
}
.agent-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: #6e7670;
}
.agent-live-strip.is-busy .agent-live-dot {
  background: var(--lime);
  box-shadow: 0 0 0 3px #ff620017;
  animation: queue-pulse 1.7s ease-in-out infinite;
}
.agent-live-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.agent-live-copy strong {
  overflow: hidden;
  color: #e9e2de;
  font-size: 9px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-live-copy small {
  overflow: hidden;
  color: #7f8a82;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-live-open {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid #ffffff10;
  border-radius: 5px;
  color: #cf9b7b;
  font-size: 8px;
}
.agent-live-open:hover { color: #fff; background: #ffffff0e; }
@media (max-width: 650px) {
  .agent-live-strip { margin-inline: 0; }
  .agent-live-open { display: none; }
}
/* Image mode keeps the exact compact Higgsfield dock; the live lane remains
   available in the Manager monitor and video composer without adding a grid
   row to the image prompt rail. */
.image-mode .agent-live-strip { display: none; }
.job-retry-note{display:block;color:#d7bd83;font-size:10px;line-height:1.45;padding:7px 9px;border:1px solid #5a4a2c;background:#2e2619;border-radius:8px}

/* Image-card actions -----------------------------------------------------
   Keep the contact sheet dimensions untouched: actions live in an absolute
   overlay and only become interactive while a card is hovered/focused (or
   explicitly activated by the first tap on a touch screen). The layout
   mirrors Higgsfield's image surface: a vertical quick-action rail on the
   right and a rounded action dock along the bottom edge. */
.image-mode .history-list .job-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  padding: 0;
  background: linear-gradient(180deg, #05060618 0, transparent 35%, #050606a8 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.image-mode .history-list .job-media-overlay-tools {
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.image-mode .history-list .job-media-overlay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  background: #070a09c7;
  color: #f5efec;
  box-shadow: 0 8px 24px #0007;
  backdrop-filter: blur(10px);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.image-mode .history-list .job-media-overlay-button:hover,
.image-mode .history-list .job-media-overlay-button:focus-visible {
  border-color: #efa272b8;
  background: #121914e8;
  color: var(--lime);
  transform: translateY(-1px);
  outline: none;
}
.image-mode .history-list .job-media-overlay-button .icon {
  width: 19px;
  height: 19px;
}
.image-mode .history-list .job-media-overlay-favorite.active {
  color: var(--lime);
  border-color: #efa27270;
}
.image-mode .history-list .job-media-overlay-dock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: flex;
  align-items: stretch;
  width: min(94%, 470px);
  max-width: calc(100% - 20px);
  min-height: 58px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid #ffffff20;
  border-radius: 999px;
  background: #080b0de8;
  box-shadow: 0 12px 30px #0009, inset 0 1px #ffffff0a;
  backdrop-filter: blur(16px) saturate(125%);
}
.image-mode .history-list .job-media-overlay-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
  padding: 10px 13px;
  border: 0;
  border-right: 1px solid #ffffff16;
  color: #f6f4f2;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.image-mode .history-list .job-media-overlay-pill:last-child { border-right: 0; }
.image-mode .history-list .job-media-overlay-pill.job-animate-action { border-right-color: #ffffff16; }
.image-mode .history-list .job-media-overlay-pill:hover,
.image-mode .history-list .job-media-overlay-pill:focus-visible {
  background: #ffffff12;
  color: var(--lime);
  outline: none;
}
.image-mode .history-list .job-media-overlay-pill-icon {
  display: inline-flex;
  flex: 0 0 auto;
}
.image-mode .history-list .job-media-overlay-pill-icon .icon {
  width: 18px;
  height: 18px;
}
.image-mode .history-list .job-media-overlay-pill-chevron {
  margin-left: 2px;
  color: #a9b0a9;
  font-size: 16px;
  line-height: 1;
}
@media (min-width: 651px) {
  .image-mode .history-list .job-media:hover .job-media-overlay,
  .image-mode .history-list .job-media:focus-within .job-media-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 650px) {
  .image-mode .history-list .job-media.is-touch-active .job-media-overlay,
  .image-mode .history-list .job-media:focus-within .job-media-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .image-mode .history-list .job-media-overlay {
    background: linear-gradient(180deg, #05060620 0, transparent 32%, #050606b0 100%);
  }
  .image-mode .history-list .job-media-overlay-tools { top: 10px; right: 10px; gap: 6px; }
  .image-mode .history-list .job-media-overlay-button { width: 42px; height: 42px; padding: 9px; }
  .image-mode .history-list .job-media-overlay-dock {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    min-height: 46px;
    transform: none;
  }
  .image-mode .history-list .job-media-overlay-pill {
    gap: 5px;
    padding: 8px 9px;
    font-size: 10px;
  }
  .image-mode .history-list .job-media-overlay-pill-icon .icon { width: 15px; height: 15px; }
}

/* Final Plans overrides (after the legacy account rules). */
.billing-dialog { width: min(1080px, calc(100vw - 28px)); max-height: min(900px, calc(100vh - 28px)); }
.billing-dialog > .dialog-heading { padding: 22px 24px 16px; align-items: flex-start; }
.billing-dialog > .dialog-heading h2 { margin-top: 5px; font-size: 25px; letter-spacing: -.04em; }
.billing-dialog > .dialog-content { padding: 0 24px 18px; overflow: auto; }
.billing-dialog .plans-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 8px 0 21px; border-bottom: 1px solid var(--line); }
.plans-hero h3 { margin: 6px 0; font-size: 21px; letter-spacing: -.035em; }
.plans-hero p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }
.plans-balance { min-width: 170px; padding: 13px 15px; border: 1px solid rgba(255,117,31,.2); border-radius: 13px; background: linear-gradient(135deg, rgba(255,117,31,.1), rgba(255,255,255,.02)); text-align: right; }
.plans-balance span, .plans-balance small { display: block; color: var(--muted); font-size: 10px; }
.plans-balance strong { display: inline-block; margin-top: 3px; color: var(--lime); font-size: 26px; letter-spacing: -.04em; }
.billing-dialog .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 20px 0 14px; }
.billing-dialog .plan-card { position: relative; display: flex; flex-direction: column; min-height: 370px; padding: 19px; border-color: color-mix(in srgb, var(--plan-accent, var(--line-strong)) 35%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--plan-accent, #ff6200) 9%, #191d1e), #121517 62%); box-shadow: 0 15px 35px rgba(0,0,0,.16); }
.billing-dialog .plan-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--plan-accent, var(--lime)) 70%, white); box-shadow: 0 20px 45px rgba(0,0,0,.3); }
.billing-dialog .plan-card.is-current { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(255,117,31,.15), 0 20px 45px rgba(0,0,0,.28); }
.billing-dialog .plan-card-top { align-items: flex-start; min-height: 61px; }
.billing-dialog .plan-card-top b { font-size: 18px; letter-spacing: -.03em; }
.billing-dialog .plan-card-top p { max-width: 230px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.billing-dialog .plan-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 19px 0 2px; }
.billing-dialog .plan-price strong { color: var(--text); font-size: 24px; letter-spacing: -.05em; }
.billing-dialog .plan-price small { color: var(--muted); font-size: 9px; text-align: right; }
.billing-dialog .plan-credits { display: flex; align-items: baseline; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.09); }
.billing-dialog .plan-credits b { color: var(--plan-accent, var(--lime)); font-size: 15px; }
.billing-dialog .plan-credits span { color: var(--muted); font-size: 10px; }
.billing-dialog .plan-features { display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.billing-dialog .plan-features li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; color: #e5e8df; font-size: 10px; }
.billing-dialog .plan-features li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.billing-dialog .plan-features li b { font-weight: 650; }
.billing-dialog .plan-features li small { color: var(--muted); line-height: 1.35; }
.billing-dialog .plan-features li em { flex: none; color: var(--plan-accent, var(--lime)); font-size: 8px; font-style: normal; }
.billing-dialog .plan-features li.is-excluded { color: var(--muted-2); text-decoration: line-through; }
.billing-dialog .plan-feature-icon { flex: none; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--plan-accent, var(--lime)) 17%, transparent); color: var(--plan-accent, var(--lime)); font-size: 9px; font-weight: 850; }
.billing-dialog .plan-features-empty { min-height: 34px; margin: 14px 0; color: var(--muted); font-size: 10px; }
.billing-dialog .plan-buy-button { width: 100%; min-height: 39px; margin-top: auto; border: 1px solid var(--plan-accent, var(--lime)); border-radius: 9px; background: var(--plan-accent, var(--lime)); color: #0c110a; font-size: 11px; font-weight: 850; }
.billing-dialog .plan-buy-button.is-current { border-color: var(--line-strong); background: var(--panel-3); color: var(--muted); }
.checkout-dialog { width: min(850px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); background: #131719; border: 1px solid #3a4345; }
.checkout-dialog > .dialog-heading { padding: 20px 24px; background: #171c1e; }
.checkout-dialog > .dialog-heading h2 { margin-top: 5px; font-size: 23px; }
.checkout-dialog > .dialog-content { padding: 0; }
.checkout-layout { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(300px, 1.15fr); min-height: 430px; }
.checkout-summary { padding: 32px 27px; background: radial-gradient(ellipse at 0% 0%, #c56f3915, transparent 70%), #171c1e; border-right: 1px solid #ffffff0d; }
.checkout-summary h3 { margin: 12px 0 22px; color: #f5efec; font: 650 30px/1.1 Space, Inter, sans-serif; letter-spacing: -.04em; }
.checkout-credit-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: #c1ac9f; padding-bottom: 24px; border-bottom: 1px solid #ffffff0c; }
.checkout-credit-total strong { color: var(--lime); font-size: 34px; letter-spacing: -.055em; }
.checkout-credit-total > span:first-child { color: var(--lime); font-size: 24px; }
.checkout-order-lines { display: grid; gap: 18px; padding-top: 22px; }
.checkout-order-lines > div { display: grid; gap: 5px; }
.checkout-order-lines span { font-size: 11px; color: #9da8a9; }
.checkout-order-lines b { font-size: 19px; color: #f5f1ef; }
.checkout-order-lines code { font-size: 10px; color: #cbd2ca; overflow-wrap: anywhere; }
.checkout-safe-note { margin: 26px 0 0; color: #8d9998; font-size: 11px; line-height: 1.7; }
.checkout-payment { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 24px; }
.checkout-status { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px; border: 1px solid #ffffff10; border-radius: 11px; background: #1c2324; }
.checkout-status-symbol { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e3814416; color: var(--lime); font-size: 19px; }
.checkout-status b, .checkout-status small { display: block; }
.checkout-status b { color: #f4eeea; font-size: 12px; }
.checkout-status small { margin-top: 4px; color: #9daaa6; font-size: 10px; line-height: 1.6; }
.checkout-status-confirming .checkout-status-symbol { animation: spin 1.5s linear infinite; }
.checkout-status-paid { border-color: #995d38; background: #30251f; }
.checkout-status-failed .checkout-status-symbol, .checkout-status-expired .checkout-status-symbol { background: #c2763e20; color: #efb68d; }
.checkout-qr-frame { padding: 16px; border-radius: 15px; background: #fff; box-shadow: 0 10px 26px #0004; }
.checkout-qr-frame img { display: block; width: 232px; height: 232px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.checkout-qr-unavailable { min-height: 250px; max-width: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 25px 15px; text-align: center; }
.checkout-qr-unavailable > span { color: #7c9188; font-size: 54px; }
.checkout-qr-unavailable b { color: #d6e0d8; }
.checkout-qr-unavailable small { color: #9da8a3; line-height: 1.6; }
.checkout-transfer-card { width: 100%; max-width: 340px; display: grid; gap: 9px; padding: 13px 15px; border: 1px solid #ffffff12; border-radius: 12px; background: #1a2122; }
.checkout-transfer-title { margin-bottom: 2px; color: #ff6200; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.checkout-transfer-card > div:not(.checkout-transfer-title) { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }
.checkout-transfer-card span { color: #94a19b; font-size: 10px; }
.checkout-transfer-card b { color: #f4efec; font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.checkout-transfer-mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.checkout-transfer-content { color: #ff6200 !important; }
.checkout-success-art { display: grid; place-items: center; width: 150px; height: 150px; margin: 48px 0; border-radius: 50%; border: 1px solid #cd7a4644; background: radial-gradient(#ad653944, #75442610); color: var(--lime); font-size: 65px; }
.checkout-success-summary { width: 100%; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #a3cc474455; border-radius: 11px; background: #cd7a4612; }
.checkout-success-summary b, .checkout-success-summary small { display: block; }
.checkout-success-summary b { color: var(--lime); font-size: 13px; }
.checkout-success-summary small { margin-top: 4px; color: #c9d5c7; font-size: 11px; line-height: 1.5; }
.checkout-expiry { min-height: 19px; color: #8f9c97; font-size: 10px; text-align: center; }
.checkout-expiry b { color: #ece2dc; margin-left: 5px; font-variant-numeric: tabular-nums; }
.checkout-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: 100%; }
.checkout-actions .lime-button { min-height: 43px; padding: 11px 19px; }
.checkout-actions .small-button { min-height: 43px; font-size: 11px; }
.checkout-actions .text-button { width: 100%; justify-content: center; padding-top: 4px; font-size: 10px; }
.checkout-message { margin: 2px 0 0; color: #cbbd9b; text-align: center; font-size: 10px; }
.checkout-dialog .dialog-foot { font-size: 9px; gap: 15px; flex-wrap: wrap; }
@media (max-width: 650px) {
  .checkout-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .checkout-dialog > .dialog-heading { padding: 15px 18px; }
  .checkout-dialog > .dialog-heading h2 { font-size: 20px; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { padding: 20px; border-right: 0; border-bottom: 1px solid #ffffff0d; }
  .checkout-summary h3 { font-size: 25px; margin: 8px 0 10px; }
  .checkout-credit-total { padding-bottom: 12px; }
  .checkout-credit-total strong { font-size: 29px; }
  .checkout-order-lines { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
  .checkout-order-lines b { font-size: 17px; }
  .checkout-safe-note { margin-top: 12px; font-size: 10px; }
  .checkout-payment { padding: 18px; }
  .checkout-qr-frame img { width: 220px; height: 220px; }
  .checkout-actions .lime-button { flex: 1 1 100%; }
  .checkout-dialog .dialog-foot { padding: 13px 18px; }
}
.plans-note { margin: 0 0 19px; color: var(--muted-2); font-size: 10px; line-height: 1.45; }
@media (max-width: 760px) {
  .billing-dialog .plans-hero { align-items: stretch; flex-direction: column; }
  .billing-dialog .plans-balance { width: 100%; text-align: left; }
  .billing-dialog .plan-grid { grid-template-columns: 1fr; }
  .billing-dialog .plan-card { min-height: 0; }
}
.setting-slider{display:grid;grid-template-columns:auto minmax(42px,max-content) minmax(0,1fr);grid-template-rows:minmax(40px,auto);align-items:center;text-align:left;cursor:default}
.setting-slider-copy{min-width:42px;display:flex;align-items:baseline;justify-content:flex-start;gap:6px}
.setting-slider-copy strong{margin:0!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.setting-slider input[type=range]{grid-column:3;grid-row:1;min-width:0;width:100%;height:24px;margin:0;accent-color:var(--lime);cursor:pointer;touch-action:pan-y}

/* Duration needs enough horizontal travel to select long Seedance clips
   precisely. In the narrow video composer it gets a full row; the other
   settings remain compact on the row below. */
body:not(.image-mode) .studio-page .setting-fields .setting-slider {
  grid-column:1 / -1;
  min-height:48px;
  padding:8px 12px;
  gap:10px;
  border-color:#ffffff12;
}
body:not(.image-mode) .studio-page .setting-fields .setting-slider input[type=range] {
  min-width:120px;
}

/* The horizontal image composer keeps its one-line toolbar, but gives the
   duration track a predictable minimum instead of the browser's tiny range
   intrinsic width. */
.image-mode .studio-page .setting-fields .setting-slider {
  grid-column:auto;
  grid-template-columns:auto minmax(42px,max-content) minmax(210px,1fr);
  min-width:340px;
  min-height:48px;
  padding:8px 11px;
  gap:9px;
}

@media (max-width:650px) {
  body:not(.image-mode) .studio-page .setting-fields .setting-slider {
    min-height:46px;
    padding-inline:10px;
  }
  .image-mode .studio-page .setting-fields .setting-slider {
    min-width:230px;
    grid-template-columns:auto minmax(42px,max-content) minmax(140px,1fr);
  }
}

/* Reference previews stay inside the shared composer draft.  The trigger is
   a real button so opening media can never activate remove, reorder or
   Generate; the hover card is non-interactive and touch users use the modal. */
.reference-item { position: relative; }
.reference-item [data-remove-reference] { z-index: 4; }
.reference-item .reference-reorder, .reference-item .reference-role { z-index: 4; }
.reference-item small, .reference-item .reference-kind,
.reference-item .reference-aspect, .reference-item .reference-dimensions { z-index: 2; pointer-events: none; }
.reference-preview-trigger {
  position: absolute !important; inset: 0 !important; width: 100% !important;
  height: 100% !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: inherit !important; background: transparent !important;
  display: grid; place-items: center; overflow: hidden; cursor: zoom-in; z-index: 1;
}
.reference-preview-trigger:hover, .reference-preview-trigger:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.reference-preview-trigger img, .reference-preview-trigger video,
.reference-preview-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.reference-preview-trigger video { pointer-events: none; }
.reference-preview-video-badge { position: absolute; left: 5px; bottom: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #000b; color: #fff; font-size: 9px; }
.reference-preview-state { display: grid; place-items: center; min-height: 80px; padding: 16px; text-align: center; color: #d6d8d8; line-height: 1.5; }
.reference-preview-trigger .reference-preview-state { min-height: 0; padding: 0; font-size: 18px; }
.reference-retry { position: absolute !important; right: 22px !important; top: 2px !important; z-index: 3; width: 18px !important; height: 18px !important; padding: 0 !important; border-radius: 50% !important; background: #2a201a !important; color: var(--lime) !important; }
.reference-hover-preview { position: fixed; z-index: 120; pointer-events: none; padding: 5px; border: 1px solid #4a4f50; border-radius: 12px; background: #111416ee; box-shadow: 0 18px 50px #000a; overflow: hidden; }
.reference-hover-preview img, .reference-hover-preview video { display: block; width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; background: #080909; }
.reference-preview-dialog { width: min(900px, calc(100vw - 28px)); max-width: 900px; padding: 0; border: 1px solid #343a3b; border-radius: 18px; color: #f4f5f4; background: #101314; box-shadow: 0 25px 100px #000d; overflow: hidden; }
.reference-preview-dialog::backdrop { background: #050606c7; backdrop-filter: blur(5px); }
.reference-preview-shell { display: flex; flex-direction: column; min-height: min(75vh, 720px); }
.reference-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ffffff12; }
.reference-preview-heading { min-width: 0; }
.reference-preview-heading h2 { margin: 3px 0 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-preview-header-actions { display: flex; align-items: center; gap: 10px; }
.reference-preview-count { color: #a4aaa9; font-size: 12px; font-variant-numeric: tabular-nums; }
.reference-preview-stage { flex: 1; min-height: 300px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 20px; }
.reference-preview-media { min-width: 0; min-height: 280px; height: min(60vh, 560px); display: grid; place-items: center; }
.reference-preview-image, .reference-preview-video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #080909; }
.reference-preview-video { width: 100%; max-height: 560px; }
.reference-preview-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ffffff1e; background: #252a2b; color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; }
.reference-preview-nav:hover:not(:disabled), .reference-preview-nav:focus-visible:not(:disabled) { background: var(--lime); color: #111; }
.reference-preview-nav:disabled { visibility: hidden; }
.reference-preview-meta { display: flex; flex-direction: column; gap: 5px; padding: 14px 20px 18px; border-top: 1px solid #ffffff12; color: #aab0af; font-size: 12px; }
.reference-preview-meta strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none), (max-width: 650px) { .reference-hover-preview { display: none !important; } }
@media (max-width: 650px) {
  .reference-preview-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .reference-preview-shell { min-height: 100dvh; }
  .reference-preview-stage { min-height: 0; grid-template-columns: 36px minmax(0, 1fr) 36px; padding: 12px 8px; }
  .reference-preview-media { height: calc(100dvh - 180px); min-height: 220px; }
  .reference-preview-nav { width: 34px; height: 34px; font-size: 23px; }
  .reference-preview-header { padding: 12px; }
  .reference-preview-meta { padding: 12px; }
}

/* Image result lightbox --------------------------------------------------
   Higgsfield presents an image as a quiet full-screen canvas. The action
   rail floats on the right and the three creation actions stay in one pill
   along the bottom edge. This variant is applied only to image results; the
   video detail inspector keeps its existing information panel. */
.detail-dialog.image-lightbox-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #050607;
}
.detail-dialog.image-lightbox-dialog::backdrop {
  background: #050607;
  backdrop-filter: none;
}
.image-lightbox-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  color: #f7f8f5;
  background: #050607;
}
.image-lightbox-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 44%, #202526 0, #101516 55%, #050607 100%);
}
.image-lightbox-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.image-lightbox-media::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, #00000018 0%, transparent 32%, #00000042 100%);
  z-index: 1;
}
.image-lightbox-media img,
.image-lightbox-media video {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #050607;
}
.image-lightbox-media video { object-fit: contain; }
.image-lightbox-close {
  position: absolute;
  top: 38px;
  left: 2px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid #b9bcbc;
  border-radius: 10px;
  background: #07090988;
  color: #e8ebe8;
  box-shadow: 0 5px 18px #0008;
  font-size: 23px;
  line-height: 1;
}
.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
  border-color: #fff;
  background: #151918cc;
  outline: none;
}
.image-lightbox-close span { transform: translateY(-1px); }
.image-lightbox-actions {
  position: absolute;
  top: 38px;
  right: 14px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.image-lightbox-action {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f3f5f2;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.image-lightbox-action .icon {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.image-lightbox-action:hover,
.image-lightbox-action:focus-visible {
  background: #ffffff18;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}
.image-lightbox-action.active { color: #fff; }
.image-lightbox-action.active .icon { fill: #fff; }
.image-lightbox-more-trigger { background: #070707c9; }
.image-lightbox-more-trigger:hover,
.image-lightbox-more-trigger:focus-visible { background: #202121e8; }
.image-lightbox-more-menu,
.image-lightbox-3d-menu {
  position: absolute;
  right: 0;
  z-index: 12;
  display: grid;
  gap: 2px;
  min-width: 185px;
  padding: 6px;
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: #121514f2;
  box-shadow: 0 18px 50px #000b;
  backdrop-filter: blur(18px);
}
.image-lightbox-more-menu { top: 226px; }
.image-lightbox-3d-menu { bottom: calc(100% + 9px); }
.image-lightbox-more-menu button,
.image-lightbox-3d-menu button {
  padding: 10px 11px;
  border-radius: 7px;
  color: #e3e8e4;
  text-align: left;
  font-size: 11px;
}
.image-lightbox-more-menu button:hover,
.image-lightbox-more-menu button:focus-visible,
.image-lightbox-3d-menu button:hover,
.image-lightbox-3d-menu button:focus-visible {
  background: #ffffff14;
  color: #ff751f;
  outline: none;
}
.image-lightbox-dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 8;
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: calc(100% - 24px);
  min-height: 64px;
  overflow: visible;
  transform: translateX(-50%);
  border: 1px solid #2b2e2d;
  border-radius: 34px;
  background: linear-gradient(110deg, #111313f0 0%, #1f2222ef 50%, #090b0bf2 100%);
  box-shadow: 0 15px 40px #000b, inset 0 1px #ffffff0d;
  backdrop-filter: blur(18px);
}
.image-lightbox-dock-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 195px;
  min-height: 62px;
  padding: 0 20px;
  border-right: 1px solid #ffffff12;
  color: #f1f3f0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.image-lightbox-dock-button:first-child { border-radius: 32px 0 0 32px; }
.image-lightbox-dock-button:last-of-type { border-right: 0; border-radius: 0 32px 32px 0; }
.image-lightbox-dock-button:hover,
.image-lightbox-dock-button:focus-visible {
  background: #ffffff0d;
  color: #fff;
  outline: none;
}
.image-lightbox-dock-icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.image-lightbox-dock-icon .icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.image-lightbox-dock-chevron {
  margin-left: 13px;
  color: #f2f3ef;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-2px);
}
.image-lightbox-thumbnails {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 7;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 30px);
  overflow-x: auto;
  transform: translateX(-50%);
  padding: 4px;
  border-radius: 12px;
  background: #080a0ad9;
  box-shadow: 0 10px 30px #0008;
  scrollbar-width: none;
}
.image-lightbox-thumbnails::-webkit-scrollbar { display: none; }
.image-lightbox-thumbnail {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffffff24;
  border-radius: 7px;
  background: #161919;
}
.image-lightbox-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-lightbox-thumbnail.selected { border-color: #fa7624; box-shadow: 0 0 0 2px #ee9e6d55; }
.image-lightbox-view .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;
}
@media (max-width: 700px) {
  .image-lightbox-close { top: 14px; left: 10px; width: 34px; height: 34px; }
  .image-lightbox-actions { top: 14px; right: 8px; gap: 6px; }
  .image-lightbox-action { width: 42px; height: 42px; }
  .image-lightbox-action .icon { width: 24px; height: 24px; }
  .image-lightbox-more-menu { top: 192px; }
  .image-lightbox-dock { bottom: 10px; width: calc(100% - 18px); min-height: 52px; }
  .image-lightbox-dock-button { min-width: 0; min-height: 51px; flex: 1 1 0; gap: 5px; padding: 0 8px; font-size: 11px; letter-spacing: -.01em; }
  .image-lightbox-dock-button > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .image-lightbox-dock-icon .icon { width: 19px; height: 19px; }
  .image-lightbox-dock-chevron { margin-left: 1px; font-size: 19px; }
  .image-lightbox-thumbnails { bottom: 70px; }
  .image-lightbox-media img, .image-lightbox-media video { max-height: calc(100dvh - 70px); }
}

/* Image inspector --------------------------------------------------------
   Clicking an image uses the Higgsfield-style split inspector: artwork stays
   large on the left while the Info panel keeps prompt, facts and creation
   actions in a stable right rail. These rules intentionally come after the
   older detail rules so the image inspector remains consistent at every card
   entry point. */
.detail-dialog:not(.image-lightbox-dialog) {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #181b1b;
}
.detail-dialog:not(.image-lightbox-dialog)::backdrop { background: #111313d9; backdrop-filter: blur(7px); }
.detail-dialog:not(.image-lightbox-dialog) .detail-view { grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 490px); }
.detail-dialog:not(.image-lightbox-dialog) .detail-stage {
  padding: 0;
  background: radial-gradient(circle at 50% 42%, #32312e 0, #171b1b 54%, #0e1011 100%);
}
.detail-dialog:not(.image-lightbox-dialog) .detail-stage-media {
  border-radius: 0;
  background: #101212;
  box-shadow: none;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-stage-media img,
.detail-dialog:not(.image-lightbox-dialog) .detail-stage-media video { object-fit: contain; }
.detail-dialog:not(.image-lightbox-dialog) .detail-panel {
  background: linear-gradient(160deg, #282727 0, #202020 48%, #1d2020 100%);
  border-left-color: #ffffff14;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-header {
  padding: 18px 20px 14px;
  border-bottom: 0;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-author-avatar {
  width: 42px;
  height: 42px;
  background: #e9ebe7;
  color: #252727;
  font-size: 16px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-author-copy strong { font-size: 15px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-author-copy small { font-size: 11px; text-transform: none; letter-spacing: 0; }
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-header .icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #343434;
  font-size: 26px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-tabs {
  margin: 0 14px;
  padding: 4px;
  gap: 2px;
  border: 0;
  border-radius: 14px;
  background: #333333;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab {
  flex: 1 1 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  color: #999b9b;
  font-size: 14px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab span { margin-right: 7px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab[aria-selected="true"] {
  color: #f1f2ee;
  background: #4a4a4a;
  box-shadow: inset 0 1px #ffffff12;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-scroll { padding: 18px 14px 14px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-panel-scroll .detail-section { margin-bottom: 18px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-prompt-heading {
  margin: 0 4px 10px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-prompt-heading h3 {
  color: #a8aaaa;
  font-size: 14px;
  letter-spacing: .04em;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-prompt-heading h3 span { margin-right: 7px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #6b6b6b;
  border-radius: 9px;
  background: #3f3f3f;
  color: #eee;
  font-size: 13px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-copy-button .icon { width: 16px; height: 16px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-prompt-copy {
  max-height: 260px;
  padding: 18px 16px;
  border: 0;
  border-radius: 12px;
  background: #4a4849;
  box-shadow: inset 0 1px #ffffff0a;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-prompt-copy p {
  color: #f0f0ee;
  font-size: 15px;
  line-height: 1.5;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-details-accordion {
  border-top: 1px solid #ffffff12;
  border-bottom: 1px solid #ffffff12;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-details-accordion summary {
  padding: 13px 4px;
  color: #a8aaaa;
  font-size: 14px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-details-accordion summary span { margin-right: 7px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-facts { margin: 0; padding: 5px 4px 12px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 18px;
  padding: 7px 0;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-facts dt { color: #999b9b; font-size: 14px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-facts dd { margin: 0; color: #efefec; font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px 14px 20px;
  background: #202323f5;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 12px;
  background: #ff751f;
  color: #1d120c;
  font-size: 15px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-primary-action .icon { width: 21px; height: 21px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-action-pair,
.detail-dialog:not(.image-lightbox-dialog) .detail-action-utilities { display: grid; gap: 8px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-action-pair { grid-template-columns: 1fr 1fr; }
.detail-dialog:not(.image-lightbox-dialog) .detail-action-utilities { grid-template-columns: minmax(0, 1fr) 48px 48px 48px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .small-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #5c5d5d;
  border-radius: 10px;
  background: #353737;
  color: #f0f1ed;
  font-size: 14px;
}
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .small-button .icon { width: 19px; height: 19px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-icon-action { padding: 0; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-icon-action .icon { width: 21px; height: 21px; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-favorite-action.active { color: #ff751f; border-color: #91512a; }
.detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-more-menu { bottom: calc(100% - 4px); }
@media (max-width: 800px) {
  .detail-dialog:not(.image-lightbox-dialog) .detail-stage { flex: 0 0 46dvh; padding: 0; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-panel-tabs { margin-inline: 10px; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab { min-height: 38px; font-size: 12px; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-prompt-copy p,
  .detail-dialog:not(.image-lightbox-dialog) .detail-facts dt,
  .detail-dialog:not(.image-lightbox-dialog) .detail-facts dd { font-size: 12px; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions { padding: 10px 12px 14px; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .small-button { min-height: 40px; font-size: 12px; }
  .detail-dialog:not(.image-lightbox-dialog) .detail-action-utilities { grid-template-columns: minmax(0, 1fr) 42px 42px 42px; }
}

/* Customer Image studio. Deliberately scoped: Video, Admin, routing and
   billing keep their existing presentation and behaviour. */
.image-gallery-tools { display: none; }
body.image-mode {
  --image-surface: #1e2022;
  --image-control: #303234;
  --image-muted: #989da1;
  --image-columns: 5;
}
body.image-mode .studio-page { display: block; height: auto; min-height: calc(100dvh - var(--header)); padding: 0 0 310px; }
body.image-mode .result-panel { position: relative; border: 0; border-radius: 0; padding: 0; overflow: visible; }
body.image-mode .history-toolbar,
body.image-mode .queue-summary { display: none; }

/* Quiet status filters and view utilities share a compact gallery rail. */
body.image-mode .image-gallery-tools { position: relative; z-index: 8; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; min-height: 44px; padding: 4px 13px 8px; }
body.image-mode #imageStatusFilters { display: flex; align-items: center; gap: 3px; min-width: 0; margin-right: auto; }
body.image-mode .image-status-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #949ca2; font-size: 12px; white-space: nowrap; }
body.image-mode .image-status-filter:hover { color: #e5e9eb; background: #24282b; }
body.image-mode .image-status-filter[aria-pressed="true"] { border-color: #353b3f; background: #2a3033; color: #f0f3f4; }
body.image-mode .image-status-filter :is(.image-status-count, [data-image-status-count]) { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; min-height: 17px; padding: 1px 4px; border-radius: 5px; background: #ffffff0b; color: #aeb7bc; font-size: 10px; font-variant-numeric: tabular-nums; }
body.image-mode .image-status-filter[aria-pressed="true"] :is(.image-status-count, [data-image-status-count]) { background: #ffffff10; color: #e1e9ec; }
body.image-mode .image-status-filter [data-image-status-count][hidden] { display: none; }
body.image-mode #imageNewResults { position: fixed; z-index: 17; top: calc(var(--header) + 14px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100vw - 24px); min-height: 35px; padding: 9px 14px; border: 1px solid #5d483b; border-radius: 24px; background: #33271ff2; box-shadow: 0 5px 20px #0005; color: #eccebb; font-size: 12px; backdrop-filter: blur(10px); }
body.image-mode #imageNewResults:hover { background: #47362b; }
body.image-mode .image-gallery-tools > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; min-height: 32px; border: 1px solid #303235; border-radius: 8px; background: transparent; color: #dddfe1; font-size: 12px; }
body.image-mode .image-gallery-tools > button:hover,
body.image-mode .image-gallery-tools > button[aria-expanded="true"] { background: #272a2c; color: #fff; }
body.image-mode .image-gallery-tools .icon { width: 14px; height: 14px; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) { position: absolute; top: calc(100% - 2px); right: 12px; z-index: 30; width: 260px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 12px; border: 1px solid #373a3d; border-radius: 14px; background: var(--image-surface); box-shadow: 0 15px 40px #0008; color: #e6e8e9; font-size: 12px; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 3px; font-size: 12px; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) strong { display: block; margin: 2px 3px 8px; color: var(--image-muted); font-size: 11px; font-weight: 500; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) :is(select, input[type="search"], input[type="date"]) { min-width: 0; max-width: 100%; padding: 8px; border: 1px solid #42464a; border-radius: 7px; background: #2b2e30; color: #e8eaec; font-size: 12px; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) input[type="search"] { width: 100%; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) input[type="checkbox"] { accent-color: var(--lime); }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) input[type="range"] { display: block; width: 100%; accent-color: var(--lime); }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) button { padding: 8px 10px; border-radius: 7px; font-size: 12px; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) button:hover,
body.image-mode :is(#imageViewPopover, #imageFilterPopover) button[aria-pressed="true"] { background: #363a3d; }
body.image-mode :is(#imageViewPopover, #imageFilterPopover) hr { margin: 9px 0; border: 0; border-top: 1px solid #363a3d; }
body.image-mode #imageViewPopover .image-layout-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 9px; background: #171a1c; }
body.image-mode #imageViewPopover .image-layout-options button { border: 1px solid transparent; color: #a9afb4; }
body.image-mode #imageViewPopover .image-layout-options button[aria-pressed="true"] { border-color: #515a60; background: #3a4145; color: #f3f5f6; box-shadow: 0 2px 5px #0003; }

/* The gallery has no permanent caption over delivered images. Failed or
   running jobs retain their existing status/credit messages and controls. */
body.image-mode .history-list,
body.image-mode .history-list.grid { display: grid; grid-template-columns: repeat(var(--image-columns), minmax(0, 1fr)); align-items: start; gap: 2px; }
body.image-mode .history-list .history-card,
body.image-mode .history-list.grid .history-card { position: relative; display: block; min-width: 0; min-height: 0; height: auto; border: 0; border-radius: 0; overflow: hidden; background: #191c1e; }
body.image-mode .history-list .job-media { position: relative; aspect-ratio: 1; width: 100%; height: auto; min-height: 0; border-radius: 0; background: #17191b; }
body.image-mode .history-list.grid .job-media { height: auto; min-height: 0; }
body.image-mode .history-list .job-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 140ms ease; }
body.image-mode .history-list:not([data-image-layout="masonry"]) .job-media > img { object-fit: cover !important; }
body.image-mode .history-list .history-card:hover .job-media :is(img, video),
body.image-mode .history-list .history-card:focus-within .job-media :is(img, video) { transform: none; filter: brightness(.94); }
body.image-mode .history-list.grid .history-card:is(:hover, :focus-within) .job-media :is(img, video) { transform: none; filter: brightness(.94); }
body.image-mode .history-list .history-card:has(.job-media-overlay) > .job-details { display: none; }
body.image-mode .history-list .history-card:not(:has(.job-media-overlay)) .job-details { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 13px; background: #1e2022; }
body.image-mode .history-list.grid .history-card:not(:has(.job-media-overlay)) .job-details { position: static; opacity: 1; transform: none; pointer-events: auto; }
body.image-mode .history-list .empty-media { min-height: 160px; height: 100%; padding: 20px; font-size: 11px; text-align: center; }
body.image-mode .history-list .job-progress { z-index: 3; }
body.image-mode .history-list > .empty-state { grid-column: 1 / -1; min-height: 45vh; }
body.image-mode .history-list .image-date-heading { grid-column: 1 / -1; padding: 18px 14px 10px; color: #a4a9ad; font-size: 12px; font-weight: 500; }
/* Natural-ratio coordinates come from ordered layout over persisted request
   ratios. Loading a result cannot change the frame or rebalance columns. */
body.image-mode .history-list[data-image-layout="masonry"] { position: relative; display: block; columns: auto; column-gap: normal; }
body.image-mode .history-list[data-image-layout="masonry"] > .image-gallery-card { position: absolute; margin: 0; }
body.image-mode .history-list[data-image-layout="masonry"] > .image-date-heading { position: absolute; left: 0; width: 100%; margin: 0; }
body.image-mode .history-list[data-image-layout="masonry"] .image-gallery-card .job-media { width: 100%; height: 100%; aspect-ratio: var(--image-ratio, 1); }
body.image-mode .history-list[data-image-layout="masonry"] .job-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.image-mode .history-list .image-gallery-card > .job-details { display: none; }
body.image-mode .history-list .image-gallery-card .job-media { isolation: isolate; }
body.image-mode .history-list .image-gallery-card .job-media > img { background: #17191b; }
body.image-mode .image-tile-status { position: absolute; z-index: 2; inset: 12px 12px 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; text-align: center; color: #c8cfd1; font-size: 12px; line-height: 1.4; }
body.image-mode .image-tile-status > strong { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #e0e5e6; font-size: 13px; font-weight: 500; }
body.image-mode .image-tile-status :is(small, .image-tile-model) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8e989e; font-size: 10px; }
body.image-mode .image-tile-status .spinner { width: 18px; height: 18px; flex: 0 0 18px; border-color: #eac9b425; border-top-color: #e6ae8b; }
body.image-mode .image-tile-status .icon { width: 22px; height: 22px; color: #a8b29a; }
body.image-mode .image-gallery-card[data-gallery-status="attention"] .image-tile-status > strong { color: #d9c2a4; }
body.image-mode .image-gallery-card[data-gallery-status="attention"] .image-tile-status .icon { color: #c0a67d; }
body.image-mode .image-tile-footer { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 7px; color: #9ba6ab; font-size: 10px; line-height: 1.4; }
body.image-mode .image-tile-footer > :is(span, small, strong) { flex: 1 0 100%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 400; }
body.image-mode .image-tile-footer button { min-height: 28px; padding: 5px 8px; border: 1px solid #41484c; border-radius: 7px; background: #252b2edb; color: #d4dcdf; font-size: 10px; white-space: nowrap; }
body.image-mode .image-tile-footer button:hover { background: #3b4449; color: #fff; }
body.image-mode .image-tile-footer button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
body.image-mode .image-tile-batch { position: absolute; z-index: 3; top: 9px; left: 9px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 18px); min-height: 21px; padding: 4px 6px; border: 1px solid #ffffff15; border-radius: 6px; background: #15191cba; color: #bfc8cc; font-size: 9px; font-variant-numeric: tabular-nums; pointer-events: none; backdrop-filter: blur(6px); }
body.image-mode .image-gallery-card .image-tile-batch { transition: opacity 140ms ease; }
body.image-mode .image-gallery-card.has-image-result .image-tile-batch { opacity: 0; }
body.image-mode .image-gallery-card.has-image-result:is(:hover, :focus-within) .image-tile-batch { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.image-mode .image-tile-status .spinner { animation: none; }
  body.image-mode .image-gallery-card :is(.image-tile-batch, .job-media-overlay, img) { transition: none; }
}
body.image-mode .image-examples { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
body.image-mode .image-examples button { border-radius: 0; height: clamp(250px, 54vh, 580px); }

/* Hover actions mirror the quiet canvas: circular rail and independent
   reference/video split buttons, with keyboard and touch equivalents. */
body.image-mode .history-list .job-media-overlay { z-index: 4; opacity: 0; pointer-events: none; background: linear-gradient(180deg, #0000000c, transparent 55%, #00000045); transition: opacity 140ms ease; }
body.image-mode .history-list .job-media:is(:hover, :focus-within, .is-touch-active) .job-media-overlay { opacity: 1; pointer-events: auto; }
body.image-mode .history-list .job-media-overlay-tools { top: 10px; right: 10px; gap: 5px; }
body.image-mode .history-list .job-media-overlay-button { position: relative; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 50%; background: #151719dd; box-shadow: none; backdrop-filter: blur(8px); color: #fff; }
body.image-mode .history-list .job-media-overlay-button .icon { width: 16px; height: 16px; }
body.image-mode .history-list .job-media-overlay-button:hover,
body.image-mode .history-list .job-media-overlay-button:focus-visible { transform: none; color: #fff; background: #34383bea; }
body.image-mode .history-list .job-media-overlay-favorite.active { color: var(--lime); }
body.image-mode .history-list .job-media-overlay-dock { left: auto; right: 10px; bottom: 12px; width: auto; max-width: calc(100% - 20px); min-height: 0; gap: 6px; transform: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body.image-mode .history-list .job-media-overlay-pill { flex: 0 1 auto; min-height: 34px; padding: 8px 10px; gap: 6px; border: 0; border-radius: 24px; background: #17191bea; font-size: 11px; font-weight: 400; }
body.image-mode .history-list .job-media-overlay-pill-icon .icon { width: 15px; height: 15px; }
body.image-mode .history-list .job-media-overlay-pill:hover { color: #fff; background: #393d40ee; }
body.image-mode .history-list .job-media-overlay-split { display: inline-flex; position: relative; min-width: 0; border-radius: 24px; background: #17191bea; }
body.image-mode .history-list .job-media-overlay-split > .job-media-overlay-pill { border-radius: 24px 0 0 24px; background: transparent; }
body.image-mode .history-list .job-media-overlay-split > button + button { min-width: 24px; padding: 8px 5px; border-left: 1px solid #ffffff1c; border-radius: 0 24px 24px 0; }
body.image-mode .history-list .job-media-overlay-split > button:hover { background: #393d40ee; }
body.image-mode .image-card-select { position: absolute; left: 8px; top: 8px; z-index: 6; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; opacity: 0; cursor: pointer; transition: opacity 140ms ease; }
body.image-mode .image-card-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); cursor: pointer; }
body.image-mode button.image-card-select { width: 18px; height: 18px; margin: 4px; border: 1px solid #ffffffa8; border-radius: 4px; background: #20262988; color: #200c00; }
body.image-mode button.image-card-select[aria-pressed="true"] { opacity: 1; border-color: var(--lime); background: var(--lime); }
body.image-mode button.image-card-select > span { opacity: 0; }
body.image-mode button.image-card-select[aria-pressed="true"] > span { opacity: 1; }
body.image-mode .history-card:hover .image-card-select,
body.image-mode .history-card:focus-within .image-card-select,
body.image-mode .image-card-select:has(input:checked) { opacity: 1; }
body.image-mode .history-card:has(.image-card-select input:checked)::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 2px solid var(--lime); pointer-events: none; }
body.image-mode .history-card:has(.image-card-select[aria-pressed="true"])::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 2px solid var(--lime); pointer-events: none; }
body.image-mode .history-list .job-media-overlay-caret { min-height: 34px; color: #fff; background: transparent; }
body.image-mode .image-card-menu { position: fixed; z-index: 40; width: 220px; max-width: calc(100vw - 20px); padding: 7px; border: 1px solid #3b4043; border-radius: 12px; background: #222628; box-shadow: 0 12px 30px #0008; }
body.image-mode .image-card-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 35px; padding: 8px; border-radius: 7px; color: #e4e8e9; font-size: 12px; text-align: left; }
body.image-mode .image-card-menu button:hover,
body.image-mode .image-card-menu button:focus-visible { background: #3b4145; }
body.image-mode .image-card-menu button:disabled { color: #7e858a; cursor: not-allowed; }
body.image-mode .image-selection-bar { position: fixed; left: 50%; top: calc(var(--header) + 52px); transform: translateX(-50%); z-index: 16; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 10px 13px; border: 1px solid #4a4e52; border-radius: 12px; background: #222628f5; box-shadow: 0 5px 24px #0006; font-size: 12px; }
body.image-mode .image-selection-bar button { padding: 6px; border-radius: 6px; font-size: 12px; }
body.image-mode .image-selection-bar button:hover { background: #373c40; }

/* Floating draft composer. Wrapping is intentional: every model retains
   its true controls, and neither a long prompt nor a quote clips the rail. */
body.image-mode .composer { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) 105px; align-items: end; gap: 12px; width: min(880px, max(650px, 60vw)); min-width: 0; min-height: 0; height: auto; max-height: min(62dvh, 580px); padding: 12px; overflow: auto; overscroll-behavior: contain; border: 5px solid #121416; border-radius: 21px; background: #1e2022f7; box-shadow: 0 4px 22px #0007; backdrop-filter: blur(18px); }
body.image-mode .composer :is(.studio-context, .agent-live-strip, .work-tabs, .preset-card, .segment, .ref-box, .model-capabilities) { display: none; }
body.image-mode .composer-scroll { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow: visible; padding: 0; }
body.image-mode .prompt-box { display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; background: none; overflow: visible; box-shadow: none; }
body.image-mode .prompt-box:focus-within { box-shadow: none; }
body.image-mode .prompt-head { min-height: 0; height: 0; margin: 0; }
body.image-mode :is(#promptLabel, #promptCount, .prompt-suggestions, .prompt-actions) { display: none; }
body.image-mode .prompt-box textarea { display: block; width: 100%; min-width: 0; height: 54px; min-height: 54px; max-height: 180px; padding: 3px 4px 8px; margin: 0; resize: vertical; border: 0; border-radius: 5px; background: transparent; color: #ebedf0; font-size: 13px; line-height: 1.55; }
body.image-mode .prompt-box textarea::placeholder { color: #94999d; }
body.image-mode .prompt-tools { position: static; display: flex; align-items: center; flex: 0 0 auto; gap: 0; min-height: 32px; width: auto; margin: 0; padding: 0; border: 0; border-radius: 7px; background: var(--image-control); }
body.image-mode .prompt-tools button { display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 32px; padding: 7px 8px; border-radius: 7px; color: #dcdee1; font-size: 12px; background: transparent; }
body.image-mode .prompt-tools button:hover { background: #404448; }
body.image-mode .prompt-tools button::before,
body.image-mode .prompt-tools .image-reference-button::before { content: none !important; }
body.image-mode .prompt-tools button + button { border-left: 1px solid #45484a; border-radius: 0 7px 7px 0; }
body.image-mode .prompt-tools .icon { width: 16px; height: 16px; }
body.image-mode .prompt-tools #soundBtn { display: none; }
body.image-mode .output-settings { position: static; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; width: auto; min-height: 32px; height: auto; margin: 0; padding: 0; overflow: visible; }
body.image-mode .model-trigger { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; flex-direction: row; gap: 6px; width: auto; min-height: 32px; max-width: 190px; padding: 7px 8px; border: 0; border-radius: 7px; background: var(--image-control); }
body.image-mode .model-trigger:hover { background: #404448; }
body.image-mode .model-trigger > span:first-child { min-width: 0; }
body.image-mode .model-trigger strong { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
body.image-mode .model-trigger small { display: none; }
body.image-mode .model-trigger .model-mark { order: -1; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px; background: transparent; }
body.image-mode .model-trigger .chevron { display: block; transform: rotate(90deg); font-size: 14px; line-height: 1; color: #aaaeb1; }
body.image-mode .setting-fields { display: contents; }
body.image-mode .setting-fields .setting-button { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 32px; max-width: 100%; padding: 7px 8px; gap: 5px; border: 0; border-radius: 7px; background: var(--image-control); font-size: 12px; }
body.image-mode .setting-fields .setting-button:hover,
body.image-mode .setting-fields .setting-button[aria-expanded="true"] { background: #41464a; }
body.image-mode .setting-fields .setting-button strong { margin: 0; font-size: 12px; font-weight: 400; }
body.image-mode .setting-fields .setting-button small { display: none; }
body.image-mode .setting-fields .setting-button > span { min-width: 0; }
body.image-mode .image-count-stepper { height: 32px; min-height: 32px; gap: 0; border: 0; border-radius: 7px; background: var(--image-control); }
body.image-mode .image-count-stepper .stepper-label { display: none; }
body.image-mode .image-count-stepper .stepper-button { width: 24px; height: 32px; min-height: 32px; padding: 5px; color: #a7adb1; }
body.image-mode .image-count-stepper .stepper-value { padding: 0 3px; font-size: 12px; }
body.image-mode .workflow-note:not(.hidden) { display: block; margin: 0; padding: 7px 8px; border-radius: 7px; font-size: 10px; line-height: 1.4; }
body.image-mode .composer-submit { display: flex; flex-direction: column; align-self: end; align-items: stretch; justify-content: flex-end; gap: 6px; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; background: none; }
body.image-mode .generate { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 100%; min-width: 0; min-height: 80px; padding: 12px 8px; margin: 0; border-radius: 12px; box-shadow: 0 2px 1px #ae4300; font-size: 12px; font-weight: 550; }
body.image-mode .generate .generate-symbol { display: none; }
body.image-mode .generate .generate-cost { display: block; margin: 0; font-size: 11px; font-weight: 400; }
body.image-mode .generate-hint:not(.hidden) { font-size: 10px; text-align: center; line-height: 1.4; }
body.image-mode .input-quote-panel { padding: 7px; font-size: 10px; overflow-wrap: anywhere; }
body.image-mode .input-quote-panel :is(p, small, strong) { font-size: 10px; }

/* Reset the legacy fixed-height reference variants as well as their base
   selectors: attaching a file must not reintroduce the old 202px canvas. */
body.image-mode .studio-page .composer,
body.image-mode .composer:has(.reference-list:not(:empty)) { height: auto; min-height: 0; max-height: min(62dvh, 580px); padding: 12px; transform: translateX(-50%); grid-template-rows: auto; grid-template-areas: "editor submit"; background: #1e2022f7; border-color: #121416; box-shadow: 0 4px 22px #0007; }
body.image-mode .composer-scroll { height: auto; }
body.image-mode .composer-scroll .prompt-box,
body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box,
body.image-mode .composer:has(.reference-list:not(:empty)) .prompt-box { height: auto; min-height: 0; max-height: none; flex-basis: auto; padding: 0; }
body.image-mode .composer-scroll .prompt-box textarea,
body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box textarea { height: 54px; min-height: 54px; max-height: 180px; flex: 0 0 auto; }
body.image-mode .composer-submit { min-height: 0; transform: none; }
body.image-mode .generate { height: auto; }
body.image-mode .generate-hint { position: static; max-width: 100%; }
body.image-mode .prompt-tools { height: auto; align-self: auto; }
body.image-mode .prompt-tools button { width: auto; min-width: 32px; }
body.image-mode .prompt-tools [data-action="elements"] { width: auto; font-size: 12px; }
body.image-mode .prompt-tools [data-action="elements"]::before { content: none !important; }
body.image-mode .output-settings :is(.setting-button, .model-trigger) { min-height: 32px; }
body.image-mode .setting-fields .image-count-stepper { width: auto; min-width: 76px; }
body.image-mode .studio-page .prompt-tools [data-action="elements"]::before { content: none !important; }

/* Model-specific controls stay reachable in an anchored extra-settings
   surface, instead of filling the primary prompt rail with every option. */
body.image-mode .image-advanced-settings { position: relative; flex: 0 0 auto; min-width: 0; }
body.image-mode .image-advanced-settings > summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 9px; border-radius: 7px; background: var(--image-control); color: #e3e7e9; font-size: 12px; line-height: 18px; list-style: none; cursor: pointer; user-select: none; }
body.image-mode .image-advanced-settings > summary::-webkit-details-marker { display: none; }
body.image-mode .image-advanced-settings > summary::after { content: "⌄"; color: #a7adb0; font-size: 13px; line-height: 1; }
body.image-mode .image-advanced-settings[open] > summary::after { transform: rotate(180deg); }
body.image-mode .image-advanced-settings > summary:hover,
body.image-mode .image-advanced-settings[open] > summary { background: #42484c; }
body.image-mode .image-advanced-settings > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
body.image-mode .image-advanced-settings:not([open]) > .image-extra-panel { display: none; }
body.image-mode .image-extra-panel { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 35; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px; width: min(320px, calc(100vw - 24px)); max-height: 240px; overflow-y: auto; padding: 10px; border: 1px solid #3d4347; border-radius: 13px; background: #24282b; box-shadow: 0 12px 32px #0008; }
body.image-mode .setting-fields .image-extra-panel .setting-button { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; min-height: 56px; align-content: center; align-items: center; gap: 3px 6px; padding: 9px 10px; white-space: normal; }
body.image-mode .setting-fields .image-extra-panel .setting-button small { position: static; display: block !important; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: normal; color: #a9b0b4; font-size: 10px; line-height: 1.4; }
body.image-mode .setting-fields .image-extra-panel .setting-button > small { grid-column: 1 / -1; grid-row: 1; }
body.image-mode .setting-fields .image-extra-panel .setting-button > .icon { display: none; }
body.image-mode .setting-fields .image-extra-panel .setting-button strong { grid-column: 1; grid-row: 2; min-width: 0; width: 100%; overflow-wrap: anywhere; font-size: 12px; }
body.image-mode .setting-fields .image-extra-panel .setting-button > span:last-child { grid-column: 2; grid-row: 2; }
body.image-mode .setting-fields .image-extra-panel .setting-button.setting-toggle .setting-toggle-dot { grid-column: 2; grid-row: 2; }
body.image-mode .setting-fields .image-extra-panel .setting-slider { grid-template-columns: 1fr; }
body.image-mode .setting-fields .image-extra-panel .setting-slider > .setting-slider-copy { display: block; grid-column: 1; grid-row: 1; }
body.image-mode .setting-fields .image-extra-panel .setting-slider > input { grid-column: 1; grid-row: 2; max-width: 100%; }
body.image-mode .composer:has(.image-advanced-settings[open]) { overflow: visible; }

/* References remain draggable and keyboard reorderable. File errors are
   never concealed by the compact presentation. */
body.image-mode .reference-list,
body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .reference-list { position: static; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; width: 100%; min-height: 0; margin: 0; padding: 2px 4px 10px; }
body.image-mode .reference-list:empty { display: none; }
body.image-mode .reference-list:not(:empty),
body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .reference-list { height: auto; overflow: visible; flex-wrap: wrap; }
body.image-mode .reference-item { flex: 0 0 48px; width: 48px; height: 48px; min-width: 0; padding: 0; border: 1px solid #45494b; border-radius: 9px; overflow: visible; background: #303436; }
body.image-mode .reference-item .reference-preview-trigger { inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 8px; overflow: hidden; }
body.image-mode .reference-item .reference-preview-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
body.image-mode .reference-item > :is(small, .reference-kind) { display: none; }
body.image-mode .reference-item [data-remove-reference] { right: -5px; top: -5px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #4a4f53; color: #fff; opacity: 0; transition: opacity 140ms ease; }
body.image-mode .reference-item:is(:hover, :focus-within) [data-remove-reference] { opacity: 1; }
body.image-mode .reference-item:is(:hover, :focus-within) { border-color: #aeb4b7; }
body.image-mode .reference-item .reference-reorder { opacity: 0; transition: opacity 140ms ease; }
body.image-mode .reference-item:is(:hover, :focus-within) .reference-reorder { opacity: 1; }
body.image-mode .reference-item:is(.is-invalid, .is-missing) { flex-basis: 110px; width: 110px; height: 80px; border-color: #d58675; }
body.image-mode .reference-item:is(.is-invalid, .is-missing) :is(.reference-aspect, .reference-dimensions, .reference-missing) { display: block; max-width: 100%; font-size: 9px; line-height: 1.3; }
body.image-mode .reference-item:has(.reference-role) { flex-basis: 86px; width: 86px; height: 88px; }
body.image-mode .reference-limit-hint { margin: 0 4px 5px; font-size: 10px; line-height: 1.35; }
body.image-mode .reference-limit-hint:empty { display: none; }
body.image-mode .reference-limit-hint:is(.pending, .error) { position: static; display: block; margin: 2px 4px 6px; }

/* Searchable model/settings surfaces keep the app's existing selections. */
body.image-mode #modelDialog { border-color: #34383b; border-radius: 15px; background: #1e2022; box-shadow: 0 12px 40px #0008; }
body.image-mode #modelDialog .dialog-heading { position: static; min-height: 32px; padding: 5px 9px; border: 0; background: transparent; }
body.image-mode #modelDialog .dialog-heading h2 { display: block; font-size: 11px; color: #a2a8ac; }
body.image-mode #modelDialog .dialog-heading .icon-button { position: static; margin-left: auto; width: 25px; height: 25px; }
body.image-mode #modelDialog .model-tools { position: static; padding: 0 10px; background: transparent; }
body.image-mode #modelDialog .search-field { width: 100%; padding: 10px; min-height: 40px; margin: 0 0 6px; border: 0; border-bottom: 1px solid #3b3f42; border-radius: 0; background: transparent; font-size: 14px; }
body.image-mode #modelDialog .family-tabs { display: none; }
body.image-mode #modelDialog .model-list { padding: 3px 9px 12px; }
body.image-mode #modelDialog .model-group-label { margin: 9px 8px 5px; font-size: 11px; color: #a0a7aa; }
body.image-mode #modelDialog .model-option { min-height: 58px; padding: 9px; gap: 10px; border-radius: 8px; }
body.image-mode #modelDialog .model-option:hover,
body.image-mode #modelDialog .model-option[aria-selected="true"] { background: #34383b; }
body.image-mode #modelDialog .model-option strong { font-size: 12px; font-weight: 500; }
body.image-mode #modelDialog .model-option small { font-size: 11px; color: #a1a8ac; line-height: 1.4; }
body.image-mode #modelDialog .model-option .model-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; }
body.image-mode #modelDialog .dialog-foot { font-size: 10px; padding: 8px 12px; }
body.image-mode .setting-popover { border-color: #383c40; border-radius: 13px; background: #1e2022; padding: 9px; box-shadow: 0 12px 35px #0008; }
body.image-mode .setting-popover button { min-height: 38px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
body.image-mode .setting-popover .check { color: var(--lime); }
body.image-mode .mega-menu.models-only.is-contextual { left: 12px; right: auto; width: min(720px, calc(100vw - 24px)); max-width: none; margin: 0; padding: 20px; border-radius: 20px; }
body.image-mode .mega-menu.is-contextual .mega-model-link { min-height: 58px; padding: 9px; gap: 11px; border-radius: 8px; }
body.image-mode .mega-menu.is-contextual .mega-model-link .model-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 8px; }
body.image-mode .mega-menu.is-contextual .mega-model-copy b { font-size: 13px; font-weight: 500; }
body.image-mode .mega-menu.is-contextual .mega-model-copy small { font-size: 11px; }

/* Image inspector uses the same real result data, inside a quieter rail. */
body.image-mode .detail-dialog:not(.image-lightbox-dialog) { background: #121416; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-view { grid-template-columns: minmax(0, 1fr) 320px; gap: 8px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-stage { background: radial-gradient(ellipse at 45% 45%, #655e4b33, transparent 72%); }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-stage-media { background: transparent; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel { margin: 8px 8px 8px 0; height: calc(100% - 16px); border: 1px solid #383c40; border-radius: 20px; background: #1e2022; box-shadow: none; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-header { padding: 13px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-author-avatar { width: 30px; height: 30px; font-size: 12px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-author-copy strong { font-size: 12px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-author-copy small { font-size: 10px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-header .icon-button { width: 30px; height: 30px; font-size: 22px; background: #303437; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-tabs { margin: 0 13px; padding: 4px; border-radius: 10px; background: #303437; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab { min-height: 30px; padding: 5px 7px; border-radius: 7px; font-size: 12px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-tab[aria-selected="true"] { background: #44484b; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-scroll { padding: 13px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-prompt-heading { margin: 0 0 9px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-prompt-heading h3 { font-size: 11px; letter-spacing: 0; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-copy-button { min-height: 25px; padding: 4px 7px; border: 0; border-radius: 6px; background: #383d40; font-size: 11px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-prompt-copy { padding: 12px; background: #2c3033; box-shadow: none; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-prompt-copy p { font-size: 12px; line-height: 1.6; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-details-accordion summary { padding: 11px 2px; font-size: 11px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-facts > div { padding: 5px 0; gap: 10px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-facts :is(dt, dd) { font-size: 12px; }
body.image-mode .detail-panel .detail-credit-section { padding: 11px 12px; border: 1px solid #3d4940; border-radius: 10px; background: #252e27; }
body.image-mode .detail-panel .job-credit-settlement { display: grid; gap: 5px; margin: 0; }
body.image-mode .detail-panel .job-credit-settlement strong { display: block; color: #e5d4ca; font-size: 12px; line-height: 1.4; }
body.image-mode .detail-panel .job-credit-settlement small { display: block; margin: 0; color: #aab7ab; font-size: 11px; line-height: 1.5; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions { padding: 11px 13px 13px; gap: 7px; background: #1e2022; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .detail-primary-action { min-height: 38px; border-radius: 9px; font-size: 12px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .small-button { min-height: 36px; gap: 6px; padding: 7px; border-color: #454b4f; border-radius: 8px; background: #303538; font-size: 11px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .small-button:hover { background: #42494d; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-action-utilities { grid-template-columns: minmax(0, 1fr) 35px 35px 35px; }
body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-image-actions .icon { width: 16px; height: 16px; }
body.image-mode #elementsDialog { width: min(820px, calc(100vw - 24px)); border-color: #3a3e42; border-radius: 17px; background: #1e2022; }
body.image-mode #elementsDialog .dialog-heading { background: transparent; }
body.image-mode #elementsDialog .dialog-heading h2 { font-size: 15px; font-weight: 500; }
body.image-mode #elementsDialog .reference-library-tabs { gap: 5px; }
body.image-mode #elementsDialog .reference-library-tabs button { padding: 8px 10px; border-radius: 7px; font-size: 12px; }
body.image-mode #elementsDialog .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
body.image-mode #elementsDialog .asset-card { border-radius: 9px; }

body.image-mode :is(.image-gallery-tools, .composer, .job-media-overlay, .image-selection-bar) button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
body.image-mode [data-tooltip]:not(.image-card-select) { position: relative; }
body.image-mode [data-tooltip]:is(:hover, :focus-visible)::after { content: attr(data-tooltip); position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 220px; padding: 6px 8px; border: 1px solid #454a4e; border-radius: 6px; background: #24282bf5; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.4; white-space: normal; pointer-events: none; box-shadow: 0 4px 15px #0006; }
body.image-mode .job-media-overlay-tools [data-tooltip]:is(:hover, :focus-visible)::after { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translateY(50%); }

@media (max-width: 1100px) {
  body.image-mode { --image-columns: 4; }
  body.image-mode .composer { width: min(880px, calc(100vw - 32px)); }
  body.image-mode .history-list .job-media-overlay-pill { gap: 4px; padding: 8px; font-size: 10px; }
}
@media (max-width: 800px) {
  body.image-mode { --image-columns: 3; }
  body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-view { display: flex; flex-direction: column; overflow: auto; }
  body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-stage { flex: 0 0 48dvh; min-height: 260px; }
  body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel { flex: 1 0 auto; width: calc(100% - 16px); height: auto; max-height: none; margin: 0 8px 8px; }
  body.image-mode .detail-dialog:not(.image-lightbox-dialog) .detail-panel-scroll { overflow: visible; }
}
@media (max-width: 650px) {
  body.image-mode { --image-columns: 2; }
  body.image-mode .studio-page { padding: 0 0 350px; }
  body.image-mode .image-gallery-tools { min-height: 47px; padding: 4px 10px 7px; }
  body.image-mode .image-gallery-tools > button { min-height: 36px; }
  body.image-mode #imageStatusFilters { flex: 1 0 100%; order: -1; width: 100%; max-width: 100%; margin: 0 0 2px; overflow-x: auto; scrollbar-width: none; }
  body.image-mode #imageStatusFilters::-webkit-scrollbar { display: none; }
  body.image-mode .image-status-filter { flex: 0 0 auto; min-height: 36px; gap: 5px; padding: 8px 7px; font-size: 11px; }
  body.image-mode #imageNewResults { top: calc(var(--header) + 9px); font-size: 11px; }
  body.image-mode .history-list,
  body.image-mode .history-list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.image-mode .image-tile-status { inset: 10px 8px 59px; gap: 6px; font-size: 11px; }
  body.image-mode .image-tile-status > strong { font-size: 12px; }
  body.image-mode .image-tile-status .spinner { width: 16px; height: 16px; flex-basis: 16px; }
  body.image-mode .image-tile-footer { left: 6px; right: 6px; bottom: 6px; gap: 4px 5px; font-size: 9px; }
  body.image-mode .image-tile-footer button { min-height: 30px; padding: 5px 7px; font-size: 10px; }
  body.image-mode .image-tile-batch { top: 6px; left: 6px; padding: 3px 5px; }
  body.image-mode .history-list .job-media-overlay-tools { top: 7px; right: 7px; }
  body.image-mode .history-list .job-media-overlay-button { width: 34px; height: 34px; }
  body.image-mode .history-list .job-media-overlay-dock { bottom: 7px; right: 7px; max-width: calc(100% - 14px); gap: 4px; }
  body.image-mode .history-list .job-media-overlay-pill { min-height: 34px; padding: 7px; font-size: 10px; }
  body.image-mode .history-list .job-media-overlay-pill > span:not(.job-media-overlay-pill-icon):not(.job-media-overlay-pill-chevron) { display: none; }
  body.image-mode .composer { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 12px); max-height: min(65dvh, 560px); grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; border-width: 4px; border-radius: 18px; }
  body.image-mode .studio-page .composer,
  body.image-mode .composer:has(.reference-list:not(:empty)) { grid-template-areas: "editor" "submit"; padding: 10px; max-height: min(65dvh, 560px); bottom: max(8px, env(safe-area-inset-bottom)); }
  body.image-mode .composer-scroll { gap: 8px; }
  body.image-mode .prompt-box textarea { height: 68px; min-height: 68px; max-height: 150px; font-size: 16px; }
  body.image-mode .composer-scroll .prompt-box textarea,
  body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .prompt-box textarea { height: 68px; min-height: 68px; max-height: 150px; }
  body.image-mode .prompt-tools { min-height: 38px; }
  body.image-mode .prompt-tools button { min-height: 38px; }
  body.image-mode .model-trigger,
  body.image-mode .setting-fields .setting-button { min-height: 38px; }
  body.image-mode .output-settings :is(.setting-button, .model-trigger) { min-height: 38px; }
  body.image-mode .image-advanced-settings > summary { min-height: 38px; }
  body.image-mode .image-extra-panel { position: fixed; right: 6px; left: 6px; bottom: calc(100% + 8px); width: auto; max-height: min(240px, 34dvh); }
  body.image-mode .model-trigger { max-width: 190px; }
  body.image-mode .image-count-stepper { min-height: 38px; height: 38px; }
  body.image-mode .image-count-stepper .stepper-button { height: 38px; }
  body.image-mode .composer-submit { display: flex; flex-direction: column; width: 100%; gap: 5px; }
  body.image-mode .generate { flex-direction: row; justify-content: space-between; width: 100%; min-height: 43px; padding: 10px 14px; font-size: 13px; }
  body.image-mode .generate .generate-cost { font-size: 12px; }
  body.image-mode .generate-hint:not(.hidden) { text-align: left; }
  body.image-mode .reference-list,
  body.image-mode .composer-scroll:has(.reference-list:not(:empty)) .reference-list { gap: 9px; }
  body.image-mode .reference-item [data-remove-reference] { opacity: 1; width: 22px; height: 22px; }
  body.image-mode #elementsDialog .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.image-mode #elementsDialog .dialog-content { padding: 13px; }
  body.image-mode #elementsDialog .reference-library-tabs { flex-wrap: wrap; }
  body.image-mode .mega-menu.models-only.is-contextual { left: 10px; width: calc(100vw - 20px); padding: 12px; }
  body.image-mode .mega-menu.models-only.is-contextual .mega-model-links { grid-template-columns: 1fr; }
  body.image-mode .image-selection-bar { top: calc(var(--header) + 50px); width: max-content; flex-wrap: wrap; justify-content: center; gap: 7px; }
}
@media (hover: none) {
  body.image-mode .history-list .job-media-overlay { opacity: 1; pointer-events: auto; }
  body.image-mode .history-list .job-media-overlay-tools > button:nth-child(n + 3) { display: none; }
  body.image-mode .image-card-select { opacity: 1; }
  body.image-mode [data-tooltip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.image-mode :is(.job-media-overlay, .job-media img, .job-media video, .reference-item, .reference-item button, .image-card-select) { transition: none; }
}

/* Video studio — presentation only. Keep every override behind the Video
   route class so Image's original-ratio gallery and the other workspaces
   retain their own geometry. Existing controls/players remain the controls. */
body.video-mode { --header: 44px; background: #0c0d0e; }
body.video-mode .topbar { height: var(--header); padding-inline: 16px; gap: 14px; border-bottom: 0; }
body.video-mode .studio-page {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 8px;
  height: calc(100dvh - var(--header)); min-height: 0; padding: 0 16px 16px;
}
body.video-mode .studio-page.history-expanded { grid-template-columns: minmax(0, 1fr); }
body.video-mode .studio-page .composer {
  position: relative; inset: auto; transform: none; display: flex; flex-direction: column;
  width: auto; min-width: 0; height: 100%; max-height: 100%; min-height: 0;
  align-self: stretch; padding: 0 8px 10px; border: 1px solid #222426;
  border-radius: 19px; background: #101112; box-shadow: none; overflow: hidden;
}
body.video-mode .studio-page.history-expanded .composer { display: none; }
body.video-mode .studio-page .studio-context { display: none; }
body.video-mode .studio-page .work-tabs {
  display: flex; flex: 0 0 auto; align-items: stretch; justify-content: space-between;
  min-height: 48px; gap: 8px; margin: 0; padding: 13px 7px 0;
}
body.video-mode .studio-page .work-tabs button {
  min-width: 0; min-height: 35px; padding: 0 0 10px; font-size: 11px;
  font-weight: 500; white-space: nowrap; color: #929497;
}
body.video-mode .studio-page .work-tabs button.active { color: #fff; border-color: #fff; }
body.video-mode .studio-page .work-tabs button.locked { color: #686c70; }
body.video-mode .work-tabs .workflow-lock { width: 11px; height: 11px; margin-left: 1px; font-size: 8px; }
body.video-mode .studio-page .composer-scroll {
  display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px;
  min-width: 0; min-height: 0; padding: 7px 0 4px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: #373a3d transparent; overscroll-behavior: contain;
}
body.video-mode .composer-scroll > * { flex-shrink: 0; }
body.video-mode .studio-page .preset-card {
  display: block; width: 100%; height: 130px; min-height: 130px; padding: 0;
  border: 1px solid #ffffff0c; border-radius: 12px; overflow: hidden;
  background: #24282b; box-shadow: none;
}
body.video-mode .studio-page .preset-card::after { background: linear-gradient(180deg, #00000005 15%, #00000095); mix-blend-mode: normal; }
body.video-mode .studio-page .preset-card .preset-art { display: none; }
body.video-mode .preset-card .preset-preview { object-position: center 45%; }
body.video-mode .preset-card .preset-change { z-index: 3; padding: 5px 8px; color: #fff; background: #161719ad; backdrop-filter: blur(8px); border-color: #ffffff1c; }
body.video-mode .preset-card .preset-copy { bottom: 13px; left: 12px; gap: 5px; }
body.video-mode .studio-page .preset-copy b { max-width: 270px; font-size: 19px; line-height: 1.1; text-transform: none; overflow-wrap: anywhere; }
body.video-mode .preset-copy small { color: #e0e0e2; font-size: 11px; }
body.video-mode .studio-page .segment { min-height: 40px; padding: 3px; gap: 3px; border: 1px solid #343639; border-radius: 10px; background: #1c1d1f; }
body.video-mode .segment button { min-height: 32px; padding: 6px; font-size: 11px; font-weight: 450; border-radius: 7px; }
body.video-mode .segment button.active { background: #292b2d; box-shadow: inset 0 0 0 1px #ffffff0c, 0 1px 3px #0004; }
body.video-mode .studio-page .ref-box {
  min-height: 160px; margin: 0; padding: 16px 12px; gap: 6px;
  border: 1px dashed #333639; border-radius: 11px; background: #1b1d1f;
  box-shadow: inset 0 0 0 3px #ffffff02; text-align: center;
}
body.video-mode .studio-page .ref-box:is(:hover, :focus-visible, .drag):not(.is-disabled) { background: #24272a; border-color: #9aa07e; box-shadow: inset 0 0 0 1px #ff620020; }
body.video-mode .studio-page .ref-box.has-files { min-height: 76px; padding: 11px; border-style: solid; background: #1b1e1e; }
body.video-mode .studio-page .ref-box.is-required { border-color: #807453; background: #211f1a; }
body.video-mode .ref-box.is-required strong { color: #f2dfa9; }
body.video-mode .ref-box.has-files .ref-icons { display: none; }
body.video-mode .ref-box strong { color: #f0f1f1; font-size: 12px; font-weight: 500; line-height: 1.4; }
body.video-mode .ref-box small { max-width: 100%; color: #8c9296; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
body.video-mode .studio-page .ref-icons { margin: 0 0 8px; }
body.video-mode .studio-page .ref-icons span { width: 35px; height: 35px; margin-left: -5px; color: #c3c7c9; border: 1px solid #4b4f52; background: radial-gradient(circle at 40% 15%, #41464a, #24272a 70%); box-shadow: 0 2px 4px #0004; }
body.video-mode .ref-icons .icon { width: 15px; height: 15px; }
body.video-mode #refBox[data-reference-kinds]:not([data-reference-kinds~="image"]) .ref-icons [data-icon="image"],
body.video-mode #refBox[data-reference-kinds]:not([data-reference-kinds~="video"]) .ref-icons [data-icon="video"],
body.video-mode #refBox[data-reference-kinds]:not([data-reference-kinds~="audio"]) .ref-icons [data-icon="music"] { display: none; }
body.video-mode .composer-scroll > .reference-list {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 9px; width: 100%;
  min-height: 0; padding: 6px 3px 9px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: #4b5053 transparent;
}
body.video-mode .composer-scroll > .reference-list:empty { display: none; }
body.video-mode .reference-item { flex: 0 0 82px; width: 82px; height: 82px; padding: 0; border: 1px solid #42484b; border-radius: 9px; background: #272b2e; overflow: hidden; }
body.video-mode .reference-item:is(:hover, :focus-within) { border-color: #9ca6ab; }
body.video-mode .reference-item .reference-preview-thumb { object-fit: cover; }
body.video-mode .reference-item [data-remove-reference] { top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 1px solid #ffffff2a; border-radius: 50%; background: #151719d9; color: #fff; opacity: .75; }
body.video-mode .reference-item:is(:hover, :focus-within) [data-remove-reference] { opacity: 1; background: #34393d; }
body.video-mode .reference-item .reference-reorder { opacity: .5; }
body.video-mode .reference-item:is(:hover, :focus-within) .reference-reorder { opacity: 1; }
body.video-mode .reference-item .reference-reorder button { width: 20px; height: 20px; }
body.video-mode .reference-item:has(.reference-role) { flex-basis: 100px; width: 100px; height: 108px; }
body.video-mode .reference-item:has(.reference-role) .reference-reorder { bottom: 28px; }
body.video-mode .reference-role { min-height: 23px; font-size: 9px; }
body.video-mode .reference-item:is(.is-invalid, .is-missing) { border-color: #ce8272; flex-basis: 112px; width: 112px; min-height: 96px; }
body.video-mode .reference-item .reference-aspect,
body.video-mode .reference-item .reference-dimensions { font-size: 8px; }
body.video-mode .reference-item.is-missing .reference-missing { padding-top: 6px; font-size: 9px; }
body.video-mode .frame-reference-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.video-mode .frame-reference-slot { padding: 8px; border-color: #363a3d; border-radius: 11px; background: #1b1d1f; }
body.video-mode .frame-reference-slot > strong { min-height: 15px; margin-bottom: 6px; color: #cdd1d3; font-size: 10px; font-weight: 500; }
body.video-mode .frame-reference-picker { min-height: 114px; border-color: #444a4d; border-radius: 8px; background: #151719; }
body.video-mode .frame-reference-picker:hover:not(:disabled) { background: #25292c; border-color: #8a9183; }
body.video-mode .frame-reference-picker img { height: 86px; object-fit: contain; }
body.video-mode .frame-reference-placeholder { color: #c7ccce; }
body.video-mode .frame-reference-picker > span:last-child { font-size: 9px; }
body.video-mode .frame-reference-actions button { min-height: 26px; padding: 4px; border-radius: 5px; }
body.video-mode .frame-reference-actions button:hover { background: #ffffff0c; color: #fff; }
body.video-mode .frame-reference-guidance { padding: 0 3px; color: #929c9f; font-size: 10px; line-height: 1.5; }
body.video-mode .studio-page .prompt-box {
  display: flex; flex-direction: column; gap: 0; width: 100%; min-height: 180px;
  height: auto; max-height: none; padding: 11px 11px 9px; overflow: visible;
  border: 1px solid #282b2e; border-radius: 11px; background: #1b1d1f;
}
body.video-mode .studio-page .prompt-box:focus-within { border-color: #727a60; box-shadow: 0 0 0 2px #ff62000b; }
body.video-mode .prompt-head { min-height: 20px; margin: 0 0 7px; gap: 6px; }
body.video-mode .prompt-head label { color: #e0e3e4; font-size: 12px; font-weight: 450; }
body.video-mode .prompt-actions { gap: 3px; }
body.video-mode .prompt-action { padding: 4px 5px; border-color: transparent; background: transparent; color: #9a9fa2; font-size: 9px; }
body.video-mode .prompt-action:hover { color: #fff; background: #ffffff0b; border-color: #ffffff0b; }
body.video-mode .studio-page .prompt-box textarea {
  width: 100%; height: auto; min-height: 108px; max-height: 260px; padding: 0;
  resize: vertical; overflow-y: auto; color: #e5e8e9; background: transparent;
  font-size: 13px; line-height: 1.6; border: 0; outline: none; caret-color: var(--lime);
}
body.video-mode .prompt-box textarea::placeholder { color: #7f8589; }
body.video-mode .reference-limit-hint { margin: 0 0 6px; min-height: 0; color: #90999c; font-size: 9px; line-height: 1.4; }
body.video-mode .reference-limit-hint.error { color: #ffb7a8; }
body.video-mode .reference-limit-hint.pending { color: #ded09a; }
body.video-mode .prompt-suggestions { display: none; }
body.video-mode .prompt-suggestion { border-radius: 6px; font-size: 9px; background: #26292c; }
body.video-mode .prompt-tools { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 9px 0 0; padding: 0; border: 0; background: none; }
body.video-mode .prompt-tools .image-reference-button { display: none; }
body.video-mode .prompt-tools button { min-height: 27px; padding: 5px 7px; font-size: 10px; border-radius: 6px; background: #26292b; border-color: #ffffff08; color: #d5d8da; }
body.video-mode .prompt-tools button:hover:not(:disabled) { color: #fff; background: #393e41; }
body.video-mode #soundBtn[aria-pressed="true"] { color: #eae3df; background: #2b2e2c; border-color: #ffffff10; }
body.video-mode #soundBtn:disabled { display: none; }
body.video-mode #promptCount { margin-left: auto; font-size: 8px; color: #7d8589; font-variant-numeric: tabular-nums; }
body.video-mode .output-settings { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.video-mode .model-trigger { min-height: 54px; padding: 9px 12px; gap: 10px; border: 1px solid #ffffff05; border-radius: 8px; background: #212426; }
body.video-mode .model-trigger .model-mark { width: 25px; height: 25px; }
body.video-mode .model-trigger small { color: #999fa3; font-size: 10px; }
body.video-mode .model-trigger strong { display: block; max-width: 238px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.video-mode .model-trigger:hover,
body.video-mode .model-trigger[aria-expanded="true"] { background: #2c3033; border-color: #ffffff18; }
body.video-mode .model-capabilities { gap: 4px; }
body.video-mode .model-capabilities .capability { font-size: 9px; padding: 4px 6px; background: #191c1e; }
body.video-mode .studio-page .setting-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
body.video-mode .studio-page .setting-fields .setting-button {
  position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr) 10px;
  grid-template-rows: auto auto; align-items: center; gap: 3px 6px; min-width: 0;
  min-height: 51px; padding: 8px 9px; border: 1px solid #ffffff07; border-radius: 8px;
  background: #202326; white-space: normal; text-align: left;
}
body.video-mode .studio-page .setting-fields .setting-button > .icon { grid-column: 1; grid-row: 1 / 3; width: 15px; height: 15px; color: #a6adb0; }
body.video-mode .studio-page .setting-fields .setting-button small { position: static; grid-column: 2; grid-row: 1; width: auto; height: auto; margin: 0; padding: 0; color: #8d969a; font-size: 9px; line-height: 1.2; clip-path: none; white-space: normal; overflow: visible; }
body.video-mode .studio-page .setting-fields .setting-button strong { grid-column: 2; grid-row: 2; max-width: 100%; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
body.video-mode .studio-page .setting-fields .setting-button > span:not(.setting-slider-copy) { grid-column: 3; grid-row: 1 / 3; font-size: 12px; color: #8d969a; }
body.video-mode .studio-page .setting-fields .setting-button:hover:not(:disabled),
body.video-mode .studio-page .setting-fields .setting-button[aria-expanded="true"] { background: #2d3235; border-color: #ffffff19; }
body.video-mode .studio-page .setting-fields .setting-slider { display: grid; grid-template-columns: 17px minmax(45px, max-content) minmax(0, 1fr); grid-template-rows: auto; grid-column: 1 / -1; min-height: 52px; gap: 8px; padding: 8px 10px; }
body.video-mode .studio-page .setting-fields .setting-slider > .icon { grid-row: 1; }
body.video-mode .studio-page .setting-fields .setting-slider .setting-slider-copy { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 45px; transform: none; }
body.video-mode .studio-page .setting-fields .setting-slider input[type="range"] { grid-column: 3; grid-row: 1; min-width: 0; width: 100%; height: 28px; margin: 0; accent-color: var(--lime); }
body.video-mode .video-advanced-settings { grid-column: 1 / -1; min-width: 0; border: 1px solid #ffffff0b; border-radius: 9px; background: #191c1e; }
body.video-mode .video-advanced-settings > summary { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 9px 11px; color: #abb2b5; font-size: 11px; cursor: pointer; list-style: none; border-radius: 8px; }
body.video-mode .video-advanced-settings > summary::-webkit-details-marker { display: none; }
body.video-mode .video-advanced-settings > summary::after { content: "⌄"; margin-left: auto; color: #8e969a; transition: transform 160ms ease; }
body.video-mode .video-advanced-settings[open] > summary::after { transform: rotate(180deg); }
body.video-mode .video-advanced-settings > summary:hover { color: #fff; background: #24292b; }
body.video-mode .video-advanced-settings > summary .icon { width: 14px; height: 14px; }
body.video-mode .video-extra-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 7px 7px; }
body.video-mode .video-extra-panel .setting-button { min-height: 49px; }
body.video-mode .studio-page .composer-submit { flex: 0 0 auto; padding: 8px 0 0; margin: 0; border: 0; background: #101112; box-shadow: 0 -5px 10px #101112a6; z-index: 2; }
body.video-mode .studio-page .composer-submit .generate { width: 100%; min-height: 45px; padding: 9px; gap: 8px; border-radius: 11px; background: var(--lime); color: #131604; font-size: 14px; box-shadow: 0 3px 0 #993b00; }
body.video-mode .studio-page .composer-submit .generate:hover:not(:disabled) { background: #ff751f; box-shadow: 0 3px 0 #bb591c, 0 0 18px #ff62001b; }
body.video-mode .studio-page .composer-submit .generate:disabled { opacity: .55; }
body.video-mode .generate-cost { font-size: 12px; color: inherit; white-space: nowrap; }
body.video-mode .generate-hint { display: block; margin: 0 2px 7px; color: #c8c2ab; font-size: 10px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
body.video-mode .studio-page .result-panel { height: 100%; min-height: 0; min-width: 0; padding: 9px 16px 20px; border: 1px solid #26292b; border-radius: 19px; background: #0c0e0f; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
body.video-mode .studio-page .history-toolbar { position: sticky; top: -9px; z-index: 6; display: flex; flex-wrap: nowrap; gap: 10px; min-height: 53px; padding: 1px 0 11px; background: #0c0e0ff5; backdrop-filter: blur(10px); }
body.video-mode .history-tabs { min-width: 0; gap: 4px; }
body.video-mode .history-tabs [data-history-tab="motion-library"],
body.video-mode .history-tabs [data-history-tab="styles"] { display: none; }
body.video-mode .studio-page .history-tabs button { min-height: 32px; padding: 7px 9px; border-radius: 8px; font-size: 11px; }
body.video-mode .history-tabs button.active { border: 1px solid #ffffff0a; background: linear-gradient(#292d30, #202427); box-shadow: inset 0 1px #ffffff09; }
body.video-mode .history-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; margin-left: auto; }
body.video-mode .history-controls .icon-button { width: 32px; height: 32px; border-radius: 8px; color: #969da1; background: #15181a; }
body.video-mode .history-controls .icon-button:hover { background: #292e31; color: #fff; }
body.video-mode .history-controls [data-action="filter"] { width: auto; min-width: 59px; gap: 6px; padding-inline: 9px; font-size: 11px; }
body.video-mode .history-controls .video-control-label { font-size: 11px; font-weight: 400; line-height: 1; white-space: nowrap; }
body.video-mode .history-controls #cardSize { width: 65px; min-width: 40px; accent-color: #b8bfc2; }
body.video-mode .history-controls .view-switch { padding: 3px; gap: 2px; border-color: #24292c; background: #15181a; }
body.video-mode .view-switch button { min-height: 26px; padding: 5px 7px; font-size: 10px; }
body.video-mode .view-switch button.active { background: #2d3337; }
body.video-mode .studio-page .queue-summary { min-height: 24px; margin-bottom: 13px; padding: 5px 8px; background: #131719; border-color: #202527; border-radius: 7px; color: #959fa4; }
body.video-mode .history-filters { display: flex; gap: 10px; padding: 13px; border: 1px solid #2f3539; background: #1b2023; border-radius: 11px; margin: 0 0 15px; }
body.video-mode .history-filters label { min-width: 0; font-size: 10px; }
body.video-mode .history-filters input,
body.video-mode .history-filters select { max-width: 100%; min-height: 35px; padding: 7px 9px; background: #242b2f; border-color: #3a4247; border-radius: 7px; font-size: 11px; }
body.video-mode .history-list { display: flex; flex-direction: column; gap: 20px; padding: 0; }
body.video-mode .studio-page .history-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: stretch;
  gap: 10px; min-height: 0; padding: 0; overflow: visible; border: 0;
  border-radius: 15px; background: transparent;
}
body.video-mode .history-list .job-media { min-width: 0; min-height: clamp(310px, 32vw, 470px); height: 100%; border: 1px solid #ffffff04; border-radius: 15px; background: #171a1c; overflow: hidden; }
body.video-mode .history-list .job-media > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #141719; transform: none; }
body.video-mode .history-list .job-media > video { cursor: auto; }
body.video-mode .history-list .job-media:focus-visible { outline-offset: 2px; }
body.video-mode .studio-page .job-details { min-width: 0; gap: 13px; padding: 14px; border: 1px solid #22272a; border-radius: 15px; background: #101315; transition: border-color 160ms ease, background-color 160ms ease; }
body.video-mode .history-card:is(:hover, :focus-within) .job-details { border-color: #384045; background: #121719; }
body.video-mode .job-details .model-chip { gap: 6px; max-width: 100%; min-height: 28px; padding: 5px 7px; border-color: #32383c; border-radius: 7px; background: #15191c; font-size: 10px; }
body.video-mode .job-details .model-chip > span:not(.model-mark):not(.spacer) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.video-mode .job-details .model-mark { width: 17px; height: 17px; background: transparent; }
body.video-mode .job-details .favorite { min-width: 23px; min-height: 23px; padding: 3px; }
body.video-mode .job-prompt { font-size: 12px; line-height: 1.7; color: #a2aaaf; -webkit-line-clamp: 7; overflow-wrap: anywhere; }
body.video-mode .job-meta { margin-top: auto; gap: 5px; font-size: 9px; }
body.video-mode .job-meta span { display: inline-flex; align-items: center; min-height: 24px; padding: 5px 7px; border-radius: 6px; color: #c7ced2; background: #1d2326; }
body.video-mode .job-time { color: #79858b; font-size: 9px; line-height: 1.4; }
body.video-mode .job-actions { flex-wrap: wrap; gap: 4px; justify-content: flex-start; padding-top: 4px; margin-top: 0; }
body.video-mode .job-actions > .spacer { display: none; }
body.video-mode .job-actions :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; max-width: 100%; padding: 6px 7px; border: 1px solid #ffffff08; border-radius: 7px; color: #aab3b8; background: #1a2023; font-size: 9px; }
body.video-mode .job-actions :is(button, a):hover { color: #fff; border-color: #ffffff20; background: #303a40; }
body.video-mode .job-actions :is(.primary, [data-action="rerun"]) { color: #ede6e1; background: #293126; border-color: #624f44; }
body.video-mode .job-actions > .video-reuse-button { margin-right: auto; font-size: 11px; padding-inline: 9px; }
body.video-mode .job-actions .icon { width: 14px; height: 14px; }
body.video-mode .video-job-more { position: relative; flex: 0 0 auto; }
body.video-mode .video-job-more:has(.video-job-menu:empty) { display: none; }
body.video-mode .video-job-more > summary { display: grid; place-items: center; width: 31px; height: 31px; padding: 6px; list-style: none; cursor: pointer; border: 1px solid #ffffff08; border-radius: 7px; color: #aab3b8; background: #1a2023; transition: background-color 160ms ease, color 160ms ease; }
body.video-mode .video-job-more > summary::-webkit-details-marker { display: none; }
body.video-mode .video-job-more > summary:is(:hover, :focus-visible),
body.video-mode .video-job-more[open] > summary { color: #fff; background: #303a40; border-color: #ffffff20; }
body.video-mode .video-job-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 9; display: grid; gap: 3px; min-width: 184px; width: max-content; max-width: min(240px, calc(100vw - 48px)); max-height: 260px; overflow: auto; padding: 6px; border: 1px solid #434c52; border-radius: 10px; background: #20292df7; backdrop-filter: blur(14px); box-shadow: 0 9px 25px #0008; }
body.video-mode .job-actions .video-job-menu > button { justify-content: flex-start; min-height: 32px; width: 100%; padding: 7px 9px; border-color: transparent; border-radius: 6px; font-size: 11px; background: transparent; }
body.video-mode .job-actions .video-job-menu > button:hover { background: #37434a; }
body.video-mode .job-actions .video-job-menu > [data-delete-job] { color: #e5aaa1; }
body.video-mode .history-card:has(.video-job-more[open]) { position: relative; z-index: 5; }
body.video-mode .studio-page .setting-fields .setting-toggle { grid-template-columns: 17px minmax(0, 1fr) 26px; }
body.video-mode .job-error { margin: 0; color: #eeb0a2; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
body.video-mode .job-details .job-credit-settlement { display: grid; gap: 4px; margin: 0; padding: 9px 10px; border: 1px solid #34433c; border-radius: 8px; background: #1b2721; }
body.video-mode .job-details .job-credit-settlement strong { display: block; color: #d8c7bd; font-size: 10px; line-height: 1.4; }
body.video-mode .job-details .job-credit-settlement small { display: block; margin: 0; color: #95a89b; font-size: 9px; line-height: 1.5; }
body.video-mode .job-retry-note { font-size: 9px; line-height: 1.5; color: #b9a68f; }
body.video-mode .history-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-size), 100%), 1fr)); gap: 13px; }
body.video-mode .studio-page .history-list.grid .history-card { display: flex; flex-direction: column; gap: 0; border: 1px solid #242b2f; border-radius: 14px; overflow: hidden; background: #101315; }
body.video-mode .history-list.grid .job-media { flex: 0 0 auto; aspect-ratio: 16 / 10; min-height: 160px; height: auto; border: 0; border-radius: 0; }
body.video-mode .studio-page .history-list.grid .job-details { flex: 1; gap: 10px; padding: 12px; border: 0; border-top: 1px solid #242b2f; border-radius: 0; }
body.video-mode .history-list.grid .job-prompt { font-size: 11px; -webkit-line-clamp: 3; }
body.video-mode .how-panel { padding: 38px 20px 20px; }
body.video-mode .empty-state { min-height: min(58dvh, 480px); }
body.video-mode #modelDialog { border: 1px solid #3a4145; border-radius: 14px; background: #1b2023; box-shadow: 0 20px 60px #000b; }
body.video-mode #modelDialog .dialog-heading { min-height: 44px; padding: 10px 13px; background: #1b2023; }
body.video-mode #modelDialog .dialog-heading h2 { font-size: 14px; }
body.video-mode #modelDialog .model-tools { padding: 8px 12px; background: #1b2023; }
body.video-mode #modelDialog .search-field { min-height: 38px; border-radius: 8px; background: #282f33; border-color: #41494e; }
body.video-mode #modelDialog .family-tabs { padding: 8px 0 0; }
body.video-mode #modelDialog .model-list { padding: 0 9px 12px; }
body.video-mode #modelDialog .model-option { min-height: 59px; border-radius: 9px; }
body.video-mode #modelDialog .model-option:hover { background: #30393d; }
body.video-mode #modelDialog .model-option.selected { background: #30382e; border-color: #5a664a; }
body.video-mode #modelDialog .model-option small { line-height: 1.4; font-size: 10px; }
body.video-mode .setting-popover { border-radius: 12px; padding: 7px; background: #202629; border-color: #41494e; }
body.video-mode .setting-popover button { min-height: 39px; border-radius: 7px; font-size: 12px; }
body.video-mode .setting-popover button:hover,
body.video-mode .setting-popover button.active { color: #fff; background: #354044; }
body.video-mode .setting-popover .check { color: var(--lime); }
body.video-mode :is(.composer, .history-toolbar, .job-actions) [data-tooltip] { position: relative; }
body.video-mode :is(.composer, .history-toolbar, .job-actions) [data-tooltip]:is(:hover, :focus-visible)::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 10; width: max-content; max-width: 230px; padding: 7px 9px; transform: translateX(-50%); border: 1px solid #454e53; border-radius: 7px; color: #e8ecee; background: #222a2ff5; box-shadow: 0 5px 15px #0005; font-size: 10px; font-weight: 400; line-height: 1.4; white-space: normal; pointer-events: none; }
body.video-mode :is(.composer, .history-toolbar, .job-actions) :is(button, summary):focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
body.video-mode .video-inspector-dialog { background: #111517; }
body.video-mode .video-inspector-dialog .detail-view { grid-template-columns: minmax(0, 1fr) 332px; gap: 8px; }
body.video-mode .video-inspector-dialog .detail-stage { padding: 12px; background: #111517; }
body.video-mode .video-inspector-dialog .detail-stage-media { background: #0c1012; border-radius: 12px; }
body.video-mode .video-inspector-dialog .detail-stage-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
body.video-mode .video-inspector-dialog .detail-panel { margin: 8px 8px 8px 0; height: calc(100% - 16px); border: 1px solid #333e44; border-radius: 17px; background: #1a2226; box-shadow: none; overflow: hidden; }
body.video-mode .video-inspector-dialog .detail-panel-header { padding: 13px; }
body.video-mode .video-inspector-dialog .detail-author-avatar { width: 31px; height: 31px; font-size: 12px; }
body.video-mode .video-inspector-dialog .detail-author-copy strong { font-size: 12px; }
body.video-mode .video-inspector-dialog .detail-author-copy small { font-size: 10px; }
body.video-mode .video-inspector-dialog .detail-panel-header .icon-button { width: 31px; height: 31px; font-size: 23px; background: #303b41; }
body.video-mode .video-inspector-dialog .detail-panel-tabs { margin-inline: 12px; padding: 4px; border-radius: 9px; background: #2a353b; }
body.video-mode .video-inspector-dialog .detail-panel-tab { min-height: 32px; padding: 6px 9px; border-radius: 6px; font-size: 12px; }
body.video-mode .video-inspector-dialog .detail-panel-tab[aria-selected="true"] { background: #435159; }
body.video-mode .video-inspector-dialog .detail-panel-scroll { padding: 14px 12px; }
body.video-mode .video-inspector-dialog .detail-prompt-heading { margin: 0 1px 8px; }
body.video-mode .video-inspector-dialog .detail-prompt-heading h3 { font-size: 11px; letter-spacing: 0; }
body.video-mode .video-inspector-dialog .detail-copy-button { min-height: 27px; padding: 5px 7px; font-size: 10px; border: 0; border-radius: 6px; background: #34424a; }
body.video-mode .video-inspector-dialog .detail-prompt-copy { padding: 12px; border-radius: 10px; background: #29343b; box-shadow: none; }
body.video-mode .video-inspector-dialog .detail-prompt-copy p { color: #dde5e9; font-size: 12px; line-height: 1.65; }
body.video-mode .video-inspector-dialog .detail-details-accordion summary { padding: 11px 2px; font-size: 11px; }
body.video-mode .video-inspector-dialog .detail-facts > div { padding: 5px 0; gap: 10px; }
body.video-mode .video-inspector-dialog .detail-facts :is(dt, dd) { font-size: 11px; line-height: 1.5; }
body.video-mode .video-inspector-dialog .detail-credit-section { padding: 10px; border: 1px solid #3e5046; border-radius: 10px; background: #25332b; }
body.video-mode .video-inspector-dialog .job-credit-settlement { display: grid; gap: 5px; margin: 0; }
body.video-mode .video-inspector-dialog .job-credit-settlement strong { color: #e4d6cd; font-size: 11px; }
body.video-mode .video-inspector-dialog .job-credit-settlement small { color: #acbcb0; font-size: 10px; line-height: 1.5; }
body.video-mode .video-inspector-dialog .detail-video-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 11px 12px 13px; background: #1a2226; }
body.video-mode .video-inspector-dialog .detail-action-pair { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
body.video-mode .video-inspector-dialog .detail-action-utilities { grid-template-columns: minmax(0, 1fr) 35px 35px 35px; }
body.video-mode .video-inspector-dialog .detail-video-actions .small-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 37px; padding: 7px; border: 1px solid #465760; border-radius: 8px; background: #2b3941; font-size: 11px; }
body.video-mode .video-inspector-dialog .detail-video-actions .small-button:hover { background: #3e505a; }
body.video-mode .video-inspector-dialog .detail-video-actions .detail-icon-action { padding: 0; }
body.video-mode .video-inspector-dialog .detail-video-actions .detail-favorite-action.active { color: var(--lime); border-color: #8b5838; }
body.video-mode .video-inspector-dialog .detail-video-actions .icon { width: 16px; height: 16px; }
body.video-mode .video-inspector-dialog .detail-more-menu { bottom: calc(100% - 4px); }
body.video-mode #elementsDialog { width: min(820px, calc(100vw - 24px)); border: 1px solid #3b464d; border-radius: 16px; background: #1b2429; }
body.video-mode #elementsDialog .dialog-heading { background: #1b2429; }
body.video-mode #elementsDialog .dialog-heading h2 { font-size: 15px; }
body.video-mode #elementsDialog .reference-library-tabs { gap: 4px; background: #151d21; }
body.video-mode #elementsDialog .reference-library-tabs button { padding: 9px 10px; font-size: 11px; }
body.video-mode #elementsDialog .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }

@media (min-width: 1600px) {
  body.video-mode .studio-page { grid-template-columns: 336px minmax(0, 1fr); }
  body.video-mode .studio-page .history-card { grid-template-columns: minmax(0, 1fr) 260px; }
  body.video-mode .history-list .job-media { min-height: 480px; }
}
@media (min-width: 701px) and (max-width: 1120px) {
  body.video-mode .studio-page { grid-template-columns: 300px minmax(0, 1fr); padding-inline: 10px; }
  body.video-mode .studio-page .result-panel { padding-inline: 10px; }
  body.video-mode .studio-page .history-card { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid #262c30; border-radius: 14px; overflow: hidden; }
  body.video-mode .history-list .job-media { min-height: 270px; aspect-ratio: 16 / 10; height: auto; border: 0; border-radius: 0; }
  body.video-mode .studio-page .job-details { padding: 13px; border: 0; border-top: 1px solid #262c30; border-radius: 0; gap: 10px; }
  body.video-mode .job-prompt { -webkit-line-clamp: 3; }
  body.video-mode .studio-page .history-toolbar { flex-wrap: wrap; gap: 5px; padding-bottom: 9px; }
  body.video-mode .history-controls { margin-left: auto; gap: 4px; }
  body.video-mode .history-controls #cardSize { width: 42px; }
  body.video-mode .view-switch button { padding-inline: 6px; }
  body.video-mode .view-switch button > span { display: none; }
}
@media (max-width: 700px) {
  body.video-mode { --header: 52px; }
  body.video-mode .topbar { padding-inline: 10px; }
  body.video-mode .studio-page { display: flex; flex-direction: column; gap: 14px; height: auto; min-height: calc(100dvh - var(--header)); padding: 4px 8px 22px; }
  body.video-mode .studio-page .composer { position: static; width: 100%; height: auto; max-height: none; min-height: 0; padding: 0 9px 12px; border-radius: 16px; overflow: visible; }
  body.video-mode .studio-page .work-tabs { min-height: 46px; justify-content: flex-start; gap: 17px; padding: 12px 4px 0; }
  body.video-mode .studio-page .work-tabs button { min-height: 34px; font-size: 12px; }
  body.video-mode .studio-page .composer-scroll { overflow: visible; min-height: 0; max-height: none; gap: 9px; padding-top: 6px; }
  body.video-mode .studio-page .preset-card { min-height: 120px; height: 120px; }
  body.video-mode .studio-page .ref-box { min-height: 135px; }
  body.video-mode .studio-page .ref-box.has-files { min-height: 72px; }
  body.video-mode .studio-page .prompt-box { min-height: 190px; padding: 12px; }
  body.video-mode .studio-page .prompt-box textarea { min-height: 115px; max-height: 320px; font-size: 16px; line-height: 1.6; }
  body.video-mode .prompt-action { min-height: 28px; font-size: 10px; }
  body.video-mode .prompt-tools button { min-height: 33px; font-size: 11px; }
  body.video-mode .studio-page .setting-fields .setting-button { min-height: 56px; padding: 9px 11px; }
  body.video-mode .studio-page .setting-fields .setting-button small { font-size: 10px; }
  body.video-mode .studio-page .setting-fields .setting-button strong { font-size: 13px; }
  body.video-mode .studio-page .setting-fields .setting-slider { min-height: 56px; }
  body.video-mode .studio-page .composer-submit { position: static; padding: 10px 0 0; background: #101112; box-shadow: none; }
  body.video-mode .studio-page .composer-submit .generate { min-height: 48px; }
  body.video-mode .studio-page .result-panel { height: auto; min-height: 300px; padding: 8px 9px 16px; border-radius: 16px; overflow: visible; }
  body.video-mode .studio-page .history-toolbar { position: sticky; top: var(--header); min-height: 48px; padding: 4px 0 9px; flex-wrap: wrap; gap: 5px; border-radius: 10px 10px 0 0; }
  body.video-mode .history-tabs { flex: 1 1 auto; }
  body.video-mode .history-tabs button { padding-inline: 7px; }
  body.video-mode .history-controls { flex: 0 0 auto; margin-left: auto; gap: 4px; }
  body.video-mode .history-controls #cardSize { width: 48px; }
  body.video-mode .view-switch button { min-height: 30px; padding: 5px 7px; }
  body.video-mode .view-switch button > span { display: none; }
  body.video-mode .history-controls .icon-button { width: 34px; height: 34px; }
  body.video-mode .history-list { gap: 16px; }
  body.video-mode .studio-page .history-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; border: 1px solid #2a3034; border-radius: 13px; }
  body.video-mode .history-list .job-media { flex: 0 0 auto; min-height: 210px; height: auto; aspect-ratio: 16 / 11; border: 0; border-radius: 0; }
  body.video-mode .studio-page .job-details { padding: 13px; gap: 11px; border: 0; border-top: 1px solid #2a3034; border-radius: 0; }
  body.video-mode .job-prompt { -webkit-line-clamp: 4; }
  body.video-mode .job-actions :is(button, a) { min-height: 36px; padding: 8px; font-size: 10px; }
  body.video-mode .video-job-more > summary { width: 36px; height: 36px; }
  body.video-mode .history-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.video-mode .history-filters label { width: 100%; }
  body.video-mode .history-filters input { width: 100%; }
  body.video-mode .history-filters .check-label input { width: auto; }
  body.video-mode .history-list.grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
  body.video-mode .how-panel { padding: 25px 8px 15px; }
  body.video-mode #modelDialog { width: calc(100vw - 18px); max-width: calc(100vw - 18px); max-height: min(80dvh, 680px); border-radius: 15px; }
  body.video-mode .reference-item [data-remove-reference],
  body.video-mode .reference-item .reference-reorder { opacity: 1; }
}
@media (max-width: 900px) {
  body.video-mode .video-inspector-dialog .detail-view { display: flex; flex-direction: column; overflow: auto; }
  body.video-mode .video-inspector-dialog .detail-stage { flex: 0 0 45dvh; min-height: 250px; padding: 6px; }
  body.video-mode .video-inspector-dialog .detail-panel { flex: 1 0 auto; width: calc(100% - 16px); height: auto; max-height: none; margin: 0 8px 8px; }
  body.video-mode .video-inspector-dialog .detail-panel-scroll { overflow: visible; }
  body.video-mode #elementsDialog .reference-library-tabs { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  body.video-mode .studio-page .work-tabs { gap: 12px; }
  body.video-mode .studio-page .work-tabs button { font-size: 11px; }
  body.video-mode .history-controls { width: 100%; justify-content: flex-end; }
  body.video-mode .history-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  body.video-mode .topbar { gap: 9px; }
  body.video-mode .topbar .brand { flex: 0 0 27px; width: 27px; height: 27px; }
  body.video-mode .topbar nav { flex: 1 1 0; min-width: 0; gap: 12px; overflow: hidden; }
  body.video-mode .topbar nav .nav-item { flex: 0 0 auto; }
  body.video-mode .topbar nav .more-trigger,
  body.video-mode .topbar nav [data-route="explore"] { display: none; }
  body.video-mode .topbar .top-actions { flex: 0 0 auto; min-width: 0; gap: 2px; }
}
@media (hover: none) {
  body.video-mode .reference-item [data-remove-reference],
  body.video-mode .reference-item .reference-reorder { opacity: 1; }
  body.video-mode :is(.composer, .history-toolbar, .job-actions) [data-tooltip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.video-mode :is(.preset-preview, .ref-box, .reference-item, .reference-item button, .prompt-box, .job-details, .video-advanced-settings > summary::after) { transition: none; }
}

/* Customer credit shop — presentation only. Package content and all purchase
   actions remain server-owned; these rules do not style checkout or Studio. */
#billingDialog {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh;
  max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #101114; color: #f5f5f6; box-shadow: none;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #55565b #101114;
}
#billingDialog::backdrop { background: #101114; backdrop-filter: none; }
#billingDialog > .dialog-heading {
  position: static; display: block; padding: 54px 76px 12px;
  border: 0; background: transparent; text-align: center;
}
#billingDialog .billing-heading-copy { max-width: 1040px; margin-inline: auto; }
#billingDialog .billing-heading-copy > .eyebrow {
  margin: 0 0 16px; color: #909198; font-size: 10px; line-height: 1.4;
  font-weight: 600; letter-spacing: .2em;
}
#billingDialog #billingTitle {
  margin: 0; color: #fff; font-family: Inter, system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 62px); line-height: 1.08; font-weight: 780;
  letter-spacing: -.055em; text-wrap: balance;
}
#billingDialog .billing-subtitle {
  max-width: 660px; margin: 22px auto 0; color: #909096;
  font-size: 16px; font-weight: 400; line-height: 1.65; text-wrap: balance;
}
#billingDialog .billing-close {
  position: fixed; top: max(20px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right)); z-index: 8;
  width: 42px; height: 42px; margin: 0; padding: 0; border: 1px solid #ffffff07;
  border-radius: 50%; color: #e7e7eb; background: #303135;
  box-shadow: 0 3px 16px #0002; font-size: 24px; line-height: 1;
  transition: background .16s ease, transform .16s ease;
}
#billingDialog .billing-close:hover { color: #fff; background: #46474d; transform: rotate(90deg); }
#billingDialog > #billingContent {
  width: min(100%, 1248px); max-width: none; margin: 0 auto; padding: 0 24px 32px;
  overflow: visible; color: #b3b3bc; font-size: 13px; line-height: 1.5;
}
#billingDialog .plans-hero {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px; margin: 14px auto 32px; padding: 0;
  border: 0; background: transparent;
}
#billingDialog .plans-purchase-mode {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 16px; border: 1px solid #3b3c42;
  border-radius: 11px; color: #ededf0; background: #15161a;
  font-size: 12px; line-height: 1.4; font-weight: 550;
}
#billingDialog .plans-purchase-mode svg { width: 16px; height: 16px; color: #ff6200; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#billingDialog .plans-purchase-mode small { padding-left: 9px; border-left: 1px solid #3b3c42; color: #92939b; font-size: 10px; font-weight: 400; }
#billingDialog .plans-balance {
  display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: 6px; min-width: 0; min-height: 44px; width: auto; padding: 10px 16px;
  border: 1px solid #333630; border-radius: 11px; background: #1d1713;
  text-align: center; box-shadow: none;
}
#billingDialog .plans-balance :is(span, small) { display: inline; color: #a3aa98; font-size: 11px; line-height: 1.5; }
#billingDialog .plans-balance strong { display: inline; margin: 0 0 0 4px; color: #ff751f; font-size: 16px; line-height: 1.25; letter-spacing: -.025em; }
#billingDialog .plan-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; gap: 24px 18px; margin: 0 0 24px;
}
#billingDialog .plan-card {
  --plan-card-top: #232427; --plan-card-bottom: #1b1c1e;
  --plan-button-bg: #fbfbfc; --plan-button-color: #17171b; --plan-button-edge: #c8c8cd;
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 23px 19px 20px; border: 1px solid #414249; border-radius: 24px;
  background: linear-gradient(155deg, var(--plan-card-top), var(--plan-card-bottom) 72%);
  box-shadow: inset 0 1px #ffffff07, 0 8px 24px #0001;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#billingDialog .plan-card[data-plan-style="blue"] {
  --plan-card-top: #173b89; --plan-card-bottom: #151a2c;
  --plan-button-bg: linear-gradient(180deg, #0658ff, #4673ff);
  --plan-button-color: #fff; --plan-button-edge: #173eac; border-color: #36548c;
}
#billingDialog .plan-card[data-plan-style="rose"] {
  --plan-card-top: #751532; --plan-card-bottom: #29151e;
  --plan-button-bg: linear-gradient(180deg, #ff1767, #ef43de);
  --plan-button-color: #fff; --plan-button-edge: #b8239f; border-color: #824052;
}
#billingDialog .plan-card[data-plan-style="graphite"] {
  --plan-card-top: #2e3348; --plan-card-bottom: #1b1c22;
  --plan-button-bg: linear-gradient(180deg, #254aff, #123ddb);
  --plan-button-color: #fff; --plan-button-edge: #18328f; border-color: #484c5e;
}
#billingDialog .plan-card:hover {
  transform: translateY(-4px); border-color: #8a8d99;
  box-shadow: inset 0 1px #ffffff0c, 0 16px 40px #0004;
}
#billingDialog .plan-card.is-current { border-color: #9e7053; box-shadow: inset 0 0 0 1px #ff620018; }
#billingDialog .plan-card.is-featured { border-width: 1px; }
#billingDialog .plan-card-top { display: block; min-height: 94px; margin: 0; }
#billingDialog .plan-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 34px; }
#billingDialog .plan-name-row h3 {
  margin: 0; color: #fff; font-size: 27px; line-height: 1.15;
  font-weight: 730; letter-spacing: -.055em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
#billingDialog .plan-badge {
  position: static; display: inline-flex; align-items: center; align-self: auto;
  max-width: 100%; min-height: 20px; margin: 0; padding: 3px 6px;
  border: 0; border-radius: 3px; color: #0e1500; background: #ff6200;
  font-size: 9px; font-weight: 750; line-height: 1.2;
  font-style: italic; text-transform: uppercase; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
#billingDialog .plan-card[data-plan-style="rose"] .plan-badge { color: #fff; background: #fd2563; }
#billingDialog .plan-card[data-plan-style="graphite"] .plan-badge { color: #fff; background: #2999f0; }
#billingDialog .plan-card-top p {
  max-width: none; margin: 10px 0 20px; color: #b5b1bc;
  font-size: 13px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere;
}
#billingDialog .plan-current {
  position: absolute; top: -12px; right: 20px; padding: 5px 9px; border: 1px solid #895839;
  border-radius: 6px; color: #ff751f; background: #33241a;
  font-size: 9px; line-height: 1.2; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase;
}
#billingDialog .plan-credit-box {
  min-height: 123px; padding: 17px 15px 15px; border: 1px solid #ffffff03;
  border-radius: 16px; background: #ffffff0d;
}
#billingDialog .plan-credits { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; }
#billingDialog .plan-credits svg { width: 19px; height: 19px; margin-right: 4px; flex: 0 0 auto; color: #e3e3ea; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#billingDialog .plan-credits b { color: #fff; font-size: 23px; line-height: 1.2; font-weight: 680; letter-spacing: -.035em; }
#billingDialog .plan-credits span { color: #ededf2; font-size: 15px; font-weight: 550; }
#billingDialog .plan-credit-caption { margin: 10px 0 0; color: #b6b2bf; font-size: 12px; line-height: 1.5; }
#billingDialog .plan-credit-unit { display: block; margin: 5px 0 0; color: #b6b2bf; font-size: 12px; line-height: 1.5; }
#billingDialog .plan-price { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin: 22px 0 17px; }
#billingDialog .plan-price strong { color: #fff; font-size: clamp(30px, 2.8vw, 37px); line-height: 1.1; font-weight: 720; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
#billingDialog .plan-price small { color: #a6a3ae; font-size: 12px; line-height: 1.5; font-weight: 400; text-align: left; }
#billingDialog .plan-buy-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%; min-height: 52px; margin: 0; padding: 12px 14px;
  border: 1px solid #ffffff12; border-radius: 11px;
  background: var(--plan-button-bg); color: var(--plan-button-color);
  box-shadow: 0 4px 0 var(--plan-button-edge), 0 7px 14px #0002;
  font-size: 15px; font-weight: 650; line-height: 1.4;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
#billingDialog .plan-buy-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 0 var(--plan-button-edge), 0 9px 19px #0003; }
#billingDialog .plan-buy-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--plan-button-edge); }
#billingDialog .plan-buy-button:disabled { cursor: wait; opacity: .65; transform: none; }
#billingDialog .plan-purchase-note { margin: 13px 0 0; color: #b9b4c2; font-size: 10px; line-height: 1.5; text-align: center; }
#billingDialog .plan-feature-panel { flex: 1; margin-top: 22px; padding: 17px 14px; border: 1px solid #ffffff0c; border-radius: 15px; background: #ffffff05; }
#billingDialog .plan-feature-panel h4 { margin: 0 0 13px; color: #ecebf0; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .025em; text-transform: uppercase; }
#billingDialog .plan-features { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
#billingDialog .plan-features li { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; min-width: 0; color: #e6e4ec; font-size: 12px; line-height: 1.5; }
#billingDialog .plan-features li > span:nth-child(2) { display: grid; flex: 1 1 135px; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
#billingDialog .plan-features li b { font-weight: 500; }
#billingDialog .plan-features li small { color: #aaa7b5; font-size: 11px; line-height: 1.5; }
#billingDialog .plan-features li em { flex: 0 1 auto; max-width: 100%; padding: 2px 5px; border-radius: 4px; color: #ff751f; background: #ff620019; font-size: 9px; font-weight: 600; font-style: normal; line-height: 1.5; overflow-wrap: anywhere; }
#billingDialog .plan-features li.is-excluded { color: #777783; text-decoration: none; }
#billingDialog .plan-features li.is-excluded b { text-decoration: line-through; }
#billingDialog .plan-feature-icon { display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 19px; margin-top: 1px; color: #bcbcc5; background: none; border: 0; border-radius: 0; font-size: 12px; font-weight: 500; }
#billingDialog .plan-features-empty { min-height: 0; margin: 0; color: #a5a3af; font-size: 12px; line-height: 1.6; }
#billingDialog .plans-note { max-width: 820px; margin: 24px auto 30px; color: #8e8e99; font-size: 11px; line-height: 1.7; text-align: center; text-wrap: balance; }
#billingDialog .billing-ledger-disclosure { margin-top: 28px; border: 1px solid #303138; border-radius: 16px; background: #15161b; }
#billingDialog .billing-ledger-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 17px 20px; color: #dedde5; font-size: 13px; line-height: 1.5; font-weight: 550; list-style: none; cursor: pointer; }
#billingDialog .billing-ledger-disclosure > summary::-webkit-details-marker { display: none; }
#billingDialog .billing-ledger-disclosure > summary::after { content: "+"; color: #bdbcc5; font-size: 21px; font-weight: 400; }
#billingDialog .billing-ledger-disclosure[open] > summary::after { content: "−"; }
#billingDialog .billing-ledger-disclosure > summary:hover { color: #fff; background: #ffffff04; border-radius: 16px; }
#billingDialog .billing-credit-usage-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 4px 20px 20px; border: 0; }
#billingDialog .billing-credit-usage-link h3 { margin: 0 0 5px; color: #e5e5ed; font-size: 14px; font-weight: 550; letter-spacing: -.02em; }
#billingDialog .billing-credit-usage-link p { margin: 0; color: #9696a3; font-size: 11px; line-height: 1.6; }
#billingDialog .billing-credit-usage-link .small-button { flex: 0 0 auto; min-height: 39px; padding: 10px 13px; border: 1px solid #42434e; border-radius: 8px; color: #e8e8ed; background: #24252d; font-size: 11px; }
#billingDialog .billing-credit-usage-link .small-button:hover { background: #343642; }
#billingDialog .billing-ledger { margin: 0 20px 20px; padding-top: 7px; overflow: auto; border-top: 1px solid #30313b; }
#billingDialog .billing-ledger table { width: 100%; min-width: 570px; font-size: 11px; }
#billingDialog .billing-ledger :is(th, td) { padding: 12px 10px; border-color: #30313b; }
#billingDialog .billing-ledger th { color: #9c9ca9; }
#billingDialog .billing-ledger-disclosure > p { padding: 0 20px 20px; margin: 0; color: #8f8e9a; font-size: 12px; }
#billingDialog > .dialog-foot { justify-content: center; padding: 18px 24px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid #25262c; background: #101114; color: #7f7f8b; font-size: 11px; line-height: 1.6; text-align: center; }
#billingDialog :is(button, summary, a):focus-visible { outline: 2px solid #ff6200; outline-offset: 4px; }
@media (min-width: 1000px) {
  #billingDialog .plan-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 999px) {
  #billingDialog > .dialog-heading { padding: 54px 70px 12px; }
  #billingDialog #billingTitle { font-size: clamp(34px, 5.5vw, 50px); }
  #billingDialog .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 810px; margin-inline: auto; }
  #billingDialog .plan-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }
  #billingDialog .plan-card-top { min-height: 88px; }
}
@media (max-width: 620px) {
  #billingDialog > .dialog-heading { padding: 59px 20px 8px; }
  #billingDialog .billing-heading-copy > .eyebrow { margin-bottom: 13px; font-size: 9px; }
  #billingDialog #billingTitle { font-size: clamp(29px, 8.4vw, 44px); letter-spacing: -.055em; }
  #billingDialog .billing-subtitle { max-width: 400px; margin-top: 16px; font-size: 13px; line-height: 1.65; }
  #billingDialog .billing-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 36px; height: 36px; font-size: 23px; }
  #billingDialog > #billingContent { padding: 0 14px 24px; }
  #billingDialog .plans-hero { flex-direction: row; gap: 8px; margin: 20px 0 27px; }
  #billingDialog .plans-purchase-mode { min-height: 39px; padding: 9px 12px; font-size: 11px; }
  #billingDialog .plans-purchase-mode small { font-size: 9px; }
  #billingDialog .plans-balance { min-height: 39px; width: auto; padding: 9px 12px; }
  #billingDialog .plans-balance :is(span, small) { font-size: 10px; }
  #billingDialog .plans-balance strong { font-size: 14px; }
  #billingDialog .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 430px; gap: 24px; }
  #billingDialog .plan-card,
  #billingDialog .plan-card:last-child:nth-child(2n + 1) { grid-column: auto; width: 100%; padding: 23px 18px 18px; border-radius: 20px; }
  #billingDialog .plan-card-top { min-height: 0; }
  #billingDialog .plan-name-row h3 { font-size: 28px; }
  #billingDialog .plan-card-top p { margin-bottom: 18px; font-size: 13px; }
  #billingDialog .plan-credit-box { min-height: 115px; }
  #billingDialog .plan-price strong { font-size: 35px; }
  #billingDialog .plan-features li { font-size: 13px; }
  #billingDialog .plan-features li small { font-size: 12px; }
  #billingDialog .plan-buy-button { min-height: 52px; }
  #billingDialog .billing-ledger-disclosure > summary { padding: 16px; font-size: 12px; }
  #billingDialog .billing-credit-usage-link { align-items: stretch; flex-direction: column; padding: 0 16px 16px; }
  #billingDialog .billing-ledger { margin-inline: 16px; }
  #billingDialog .billing-credit-usage-link .small-button { align-self: flex-start; min-height: 42px; }
}
@media (hover: none) {
  #billingDialog .plan-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #billingDialog :is(.plan-card, .plan-buy-button, .billing-close) { transition: none; }
  #billingDialog :is(.plan-card:hover, .plan-buy-button:hover, .plan-buy-button:active, .billing-close:hover) { transform: none; }
}

/* Shared reference library: a compact media shelf beside the active composer. */
body:is(.image-mode, .video-mode) #elementsDialog.reference-library-dialog {
  width: min(1120px, calc(100vw - 40px)); max-width: none; max-height: min(740px, calc(100dvh - 110px));
  padding: 0; border: 1px solid #414345; border-radius: 22px; color: #f4f4f4; background: #242526;
  box-shadow: 0 22px 70px #0009; overflow: hidden;
}
#elementsDialog.reference-library-dialog::backdrop { background: #08090a47; backdrop-filter: blur(1px); }
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-heading {
  display: flex; align-items: center; gap: 12px; min-height: 73px; padding: 14px 17px;
  border: 0; background: #202122; position: relative;
}
#elementsDialog #referenceLibraryTitle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs {
  display: flex; align-items: center; flex-wrap: nowrap; flex: 1; gap: 7px; min-width: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow-x: auto;
}
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs button {
  min-height: 43px; padding: 11px 16px; border: 1px solid transparent; border-radius: 24px;
  background: transparent; color: #a7a8aa; font-size: 13px; font-weight: 550; line-height: 1.3;
  transition: background .16s ease, color .16s ease;
}
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs button:hover { color: #f4f4f4; background: #ffffff0b; }
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs button.active { color: #161718; background: #fff; }
#elementsDialog .reference-library-legacy-tab { display: none !important; }
body.image-mode #elementsDialog .reference-library-video-tab,
body.video-mode #elementsDialog .reference-library-image-tab { display: none !important; }
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-close {
  display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
  width: 40px; height: 40px; margin: 0; border-radius: 50%; background: #303233;
  color: #d4d5d6; font-size: 25px; font-weight: 300; transition: background .16s ease;
}
#elementsDialog .reference-library-close:hover { color: #fff; background: #454748; }
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-content { padding: 0 16px 16px; color: #c1c2c4; line-height: 1.4; }
#elementsDialog .reference-library-toolbar {
  display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 0;
  border-bottom: 1px solid #414344;
}
#elementsDialog .reference-library-filters { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
#elementsDialog .reference-library-filters button {
  min-height: 37px; padding: 8px 13px; border: 1px solid transparent; border-radius: 22px;
  color: #a9abad; font-size: 12px; white-space: nowrap; transition: background .16s ease, color .16s ease;
}
#elementsDialog .reference-library-filters button:hover { background: #ffffff0a; color: #fff; }
#elementsDialog .reference-library-filters button.active,
#elementsDialog .reference-library-filters button[aria-pressed="true"] { border-color: #505253; background: #393b3c; color: #f3f4f5; }
#elementsDialog .reference-library-toolbar .reference-library-search {
  display: flex; align-items: center; gap: 0; flex: 0 0 auto; min-width: 34px; width: 34px; height: 35px;
  margin: 0 0 0 auto; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  cursor: text; transition: width .16s ease, background .16s ease;
}
#elementsDialog .reference-library-search svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #95999c; stroke-width: 1.7; }
#elementsDialog .reference-library-search input { width: 0; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #eee; font-size: 12px; opacity: 0; }
#elementsDialog .reference-library-toolbar .reference-library-search:focus-within,
#elementsDialog .reference-library-toolbar .reference-library-search:has(input:not(:placeholder-shown)) { width: min(220px, 26%); gap: 8px; border-color: #414344; background: #2d2f30; }
#elementsDialog .reference-library-search:focus-within input,
#elementsDialog .reference-library-search:has(input:not(:placeholder-shown)) input { width: 100%; opacity: 1; }
#elementsDialog .reference-library-search input::placeholder { color: #999da0; }
#elementsDialog .reference-library-toolbar .reference-library-sort { display: flex; align-items: center; gap: 7px; margin: 0; color: #a6a9ab; font-size: 11px; }
#elementsDialog .reference-library-sort select {
  min-height: 35px; max-width: 115px; padding: 7px 9px; border: 1px solid #414344; border-radius: 8px;
  color: #d5d6d8; background: #303233; font: inherit; font-size: 12px;
}
#elementsDialog .reference-library-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: start; padding: 11px 2px; }
#elementsDialog .reference-library-caption .muted { margin: 0; color: #9da0a2; font-size: 10px; line-height: 1.5; }
#elementsDialog #referenceLibraryCount { flex-shrink: 0; color: #b7babd; font-size: 10px; line-height: 1.5; }
#elementsDialog .reference-library-undo:not([hidden]) {
  display: flex; flex: 1 0 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border: 1px solid #4a4e42; border-radius: 8px; background: #34372e; color: #c8cdbd; font-size: 11px;
}
#elementsDialog .reference-library-undo button { flex-shrink: 0; padding: 4px 7px; border-radius: 5px; color: #f1e4dc; font-size: 11px; font-weight: 600; }
#elementsDialog .reference-library-undo button:hover { background: #ffffff14; }
body:is(.image-mode, .video-mode) #elementsDialog .reference-library-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: max-content;
  align-content: start; align-items: start; gap: 14px;
  max-height: min(485px, calc(100dvh - 315px)); min-height: min(210px, max(100px, calc(100dvh - 439px))); margin: 0; padding: 1px 2px 7px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: #66696a transparent;
}
#elementsDialog .reference-library-grid > :is(.asset-item, .reference-library-item, .reference-library-upload-tile) {
  /* The tile owns its square size. Media stays out of grid sizing so a long
     library cannot compress rows around percentage-height descendants. */
  position: relative; display: block; align-self: start; width: 100%; height: auto;
  min-width: 0; min-height: 0; aspect-ratio: 1 / 1;
  padding: 0; border: 1px solid transparent; border-radius: 13px; overflow: hidden; background: #353738;
  color: #eee; text-align: left; isolation: isolate; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#elementsDialog .reference-library-item > .asset-item {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  margin: 0; padding: 0; aspect-ratio: auto; border: 0; border-radius: inherit; overflow: hidden; background: #363839;
}
#elementsDialog .reference-library-grid > :is(.asset-item, .reference-library-item):is(:hover, :focus-within) { border-color: #989c9f; box-shadow: 0 3px 13px #0005; }
#elementsDialog .reference-library-grid > :is(.asset-item, .reference-library-item):focus-within,
#elementsDialog .reference-library-grid > .reference-library-upload-tile:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
#elementsDialog .reference-library-grid > :is(.asset-item, .reference-library-item) :is(img, video) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; aspect-ratio: auto; object-fit: contain; object-position: center; background: #363839;
}
#elementsDialog .reference-library-grid :is(.asset-item, .reference-library-item) > b,
#elementsDialog .reference-library-name {
  position: absolute; inset: auto 0 0; z-index: 2; display: block; margin: 0; padding: 20px 9px 9px;
  overflow: hidden; color: #fff; background: linear-gradient(transparent, #000b); font-size: 10px; font-weight: 450;
  white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity .16s ease;
}
#elementsDialog .reference-library-grid :is(.asset-item, .reference-library-item):is(:hover, :focus-within) > b,
#elementsDialog .reference-library-item:is(:hover, :focus-within) .reference-library-name { opacity: 1; }
#elementsDialog .reference-library-grid > .reference-library-upload-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  border: 1px dashed #656869; border-radius: 13px; background: #3b3d3e; color: #eee; text-align: center;
}
#elementsDialog .reference-library-grid .reference-library-upload-tile:hover { border-color: #b5babd; background: #474a4b; }
#elementsDialog .reference-library-upload-tile .icon,
#elementsDialog .reference-library-upload-icon { box-sizing: content-box; width: 24px; height: 24px; padding: 14px; border: 1px solid #777c7e; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #74787a, #414547 75%); color: #f0f1f2; }
#elementsDialog .reference-library-upload-icon { display: inline-flex; align-items: center; justify-content: center; }
#elementsDialog .reference-library-upload-icon > .icon { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; }
#elementsDialog .reference-library-upload-tile :is(span, strong, b) { font-size: 12px; font-weight: 500; }
#elementsDialog .reference-library-upload-tile small { max-width: 90%; color: #b9bec0; font-size: 10px; line-height: 1.5; }
#elementsDialog .reference-library-badge {
  position: absolute; z-index: 3; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  max-width: calc(100% - 16px); padding: 4px 6px; border-radius: 5px; background: #111c; color: #fff;
  font-size: 9px; line-height: 1; backdrop-filter: blur(5px);
}
#elementsDialog .reference-library-badge .icon { width: 12px; height: 12px; }
#elementsDialog .reference-library-check,
#elementsDialog .reference-library-selection {
  position: absolute; z-index: 3; top: 8px; left: 8px; display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border: 1px solid #ffffff90; border-radius: 5px; background: #1119; color: #fff;
  font-size: 13px; opacity: 0; transition: opacity .16s ease;
}
#elementsDialog .reference-library-item:is(:hover, :focus-within) :is(.reference-library-check, .reference-library-selection) { opacity: 1; }
#elementsDialog .reference-library-grid .reference-library-item:is([aria-pressed="true"], .selected) { border-color: var(--lime); }
#elementsDialog .reference-library-item:is([aria-pressed="true"], .selected) :is(.reference-library-check, .reference-library-selection),
#elementsDialog .asset-item[aria-pressed="true"] :is(.reference-library-check, .reference-library-selection) { opacity: 1; border-color: var(--lime); background: var(--lime); color: #151713; }
#elementsDialog .reference-library-actions,
#elementsDialog .reference-library-item > .reference-library-preview {
  position: absolute; z-index: 4; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease;
}
#elementsDialog :is(.reference-library-preview, .reference-library-crop, .reference-library-remove) {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px;
  width: 32px; height: 32px; padding: 7px; border: 1px solid #ffffff30; border-radius: 50%; background: #343638e6;
  color: #fff; backdrop-filter: blur(8px); transition: background .16s ease, border-color .16s ease;
}
#elementsDialog :is(.reference-library-preview, .reference-library-crop, .reference-library-remove) :is(.icon, svg) { width: 16px; height: 16px; }
#elementsDialog .reference-library-item:is(:hover, :focus-within) .reference-library-actions,
#elementsDialog .reference-library-item:is(:hover, :focus-within) > .reference-library-preview { opacity: 1; pointer-events: auto; transform: none; }
#elementsDialog :is(.reference-library-preview, .reference-library-crop):hover { background: #5b5f63; border-color: #ffffff80; }
#elementsDialog .reference-library-remove:hover { background: #833c3e; border-color: #e79b9b; }
#elementsDialog .reference-library-item:is([aria-busy="true"], .is-busy) { pointer-events: none; }
#elementsDialog .reference-library-item:is([aria-busy="true"], .is-busy)::after {
  content: ""; position: absolute; z-index: 5; inset: calc(50% - 14px) auto auto calc(50% - 14px);
  width: 28px; height: 28px; border: 2px solid #ffffff50; border-top-color: #fff; border-radius: 50%;
  background: #1012143d; animation: reference-library-spin .8s linear infinite;
}
@keyframes reference-library-spin { to { transform: rotate(360deg); } }
#elementsDialog .reference-library-empty,
#elementsDialog .reference-library-grid > .muted {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 190px; margin: 0; padding: 25px; color: #a9afb1; text-align: center;
}
#elementsDialog .reference-library-empty .icon { width: 32px; height: 32px; margin-bottom: 4px; color: #72797c; }
#elementsDialog .reference-library-empty strong { color: #d5d9da; font-size: 14px; font-weight: 500; }
#elementsDialog .reference-library-empty p { margin: 0; max-width: 340px; font-size: 12px; line-height: 1.6; }
#elementsDialog :is(button, input, select):focus-visible { outline: 2px solid #edd1bf; outline-offset: 2px; }
@media (min-width: 1101px) {
  body.image-mode #elementsDialog.reference-library-dialog {
    inset: auto auto var(--reference-library-bottom, 219px) 50%; margin: 0; transform: translateX(-50%);
    max-height: calc(100dvh - var(--reference-library-bottom, 219px) - 20px);
  }
  body.image-mode #elementsDialog .reference-library-grid { max-height: min(470px, calc(100dvh - var(--reference-library-bottom, 219px) - 220px)); }
  body.video-mode #elementsDialog.reference-library-dialog {
    inset: var(--header) auto auto 340px; margin: 0; width: min(600px, calc(100vw - 360px));
    height: min(670px, calc(100dvh - var(--header) - 24px)); max-height: calc(100dvh - var(--header) - 24px);
    border-radius: 22px; background: #303134;
  }
  body.video-mode #elementsDialog.reference-library-dialog[open] { display: flex; flex-direction: column; }
  body.video-mode #elementsDialog .reference-library-heading { flex-shrink: 0; min-height: 58px; padding: 10px 13px; background: #222327; }
  body.video-mode #elementsDialog .reference-library-tabs { gap: 4px; }
  body.video-mode #elementsDialog .reference-library-tabs button { min-height: 37px; padding: 9px 12px; font-size: 12px; }
  body.video-mode #elementsDialog .reference-library-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 12px 12px; background: #303134; }
  body.video-mode #elementsDialog .reference-library-toolbar { flex-shrink: 0; min-height: 50px; padding: 7px 0; gap: 7px; }
  body.video-mode #elementsDialog .reference-library-filters button { padding-inline: 9px; font-size: 11px; }
  body.video-mode #elementsDialog .reference-library-sort > span { display: none; }
  body.video-mode #elementsDialog .reference-library-caption { flex-shrink: 0; padding-block: 8px; }
  body.video-mode #elementsDialog .reference-library-grid { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 0; max-height: none; }
  body.video-mode #elementsDialog .reference-library-grid > :is(.reference-library-item, .reference-library-upload-tile) { border-radius: 14px; }
  body.video-mode #elementsDialog .reference-library-grid .reference-library-upload-tile { background: #47494b; }
}
@media (min-width: 1600px) { body.video-mode #elementsDialog.reference-library-dialog { left: 356px; } }
@media (max-width: 1100px) {
  body:is(.image-mode, .video-mode) #elementsDialog.reference-library-dialog { width: min(900px, calc(100vw - 28px)); }
  body.video-mode #elementsDialog.reference-library-dialog { width: min(600px, calc(100vw - 28px)); }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #elementsDialog .reference-library-sort > span { display: none; }
}
@media (max-width: 650px) {
  body:is(.image-mode, .video-mode) #elementsDialog.reference-library-dialog { inset: auto 0 0; width: 100%; max-height: 86dvh; margin: 0; border-radius: 19px 19px 0 0; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-heading { min-height: 65px; padding: 11px 12px; gap: 7px; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs { flex-wrap: nowrap; gap: 3px; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-tabs button { min-height: 39px; padding: 9px 11px; font-size: 11px; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-close { width: 32px; height: 32px; flex-basis: 32px; font-size: 22px; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-content { padding: 0 10px max(12px, env(safe-area-inset-bottom)); }
  #elementsDialog .reference-library-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  #elementsDialog .reference-library-filters { flex: 1; gap: 0; }
  #elementsDialog .reference-library-filters button { min-height: 35px; padding: 8px 12px; font-size: 11px; }
  #elementsDialog .reference-library-toolbar .reference-library-search { margin-left: 0; }
  #elementsDialog .reference-library-toolbar .reference-library-search:focus-within,
  #elementsDialog .reference-library-toolbar .reference-library-search:has(input:not(:placeholder-shown)) { flex: 0 0 100%; order: 3; width: 100%; }
  #elementsDialog .reference-library-sort select { min-height: 34px; font-size: 11px; }
  #elementsDialog .reference-library-caption { padding-block: 9px; gap: 9px; }
  #elementsDialog .reference-library-caption .muted { font-size: 9px; }
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: calc(86dvh - 218px); min-height: 140px; }
  #elementsDialog .reference-library-grid > :is(.asset-item, .reference-library-item, .reference-library-upload-tile) { border-radius: 10px; }
  #elementsDialog .reference-library-actions { top: 5px; right: 5px; gap: 5px; }
  #elementsDialog .reference-library-upload-tile .icon,
  #elementsDialog .reference-library-upload-icon { width: 19px; height: 19px; padding: 10px; }
  #elementsDialog .reference-library-upload-icon > .icon { width: 19px; height: 19px; padding: 0; }
  #elementsDialog .reference-library-upload-tile { gap: 9px; }
  #elementsDialog .reference-library-upload-tile :is(span, strong, b) { font-size: 10px; }
  #elementsDialog .reference-library-upload-tile small { display: none; }
  #elementsDialog .reference-library-grid :is(.asset-item, .reference-library-item) > b,
  #elementsDialog .reference-library-name { padding: 14px 6px 6px; font-size: 9px; }
}
@media (max-width: 480px) {
  body:is(.image-mode, .video-mode) #elementsDialog .reference-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none) {
  #elementsDialog .reference-library-grid :is(.asset-item, .reference-library-item) > b,
  #elementsDialog .reference-library-name { opacity: 1; }
  #elementsDialog .reference-library-actions,
  #elementsDialog .reference-library-item > .reference-library-preview { opacity: 1; pointer-events: auto; transform: none; }
  #elementsDialog :is(.reference-library-preview, .reference-library-crop, .reference-library-remove) { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #elementsDialog :is(button, .reference-library-name, .reference-library-check, .reference-library-selection, .reference-library-actions) { transition: none; }
  #elementsDialog .reference-library-item:is([aria-busy="true"], .is-busy)::after { animation: none; }
}

/* Crop creates a new reference; its controls stay isolated from job settings. */
#referenceCropDialog {
  width: min(720px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px);
  padding: 0; border: 1px solid #424548; border-radius: 20px; background: #232527; color: #f2f3f3;
  box-shadow: 0 28px 100px #000b; overflow-x: hidden; overflow-y: auto;
}
#referenceCropDialog::backdrop { background: #08090bb3; backdrop-filter: blur(5px); }
#referenceCropDialog .reference-crop-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px;
  border-bottom: 1px solid #ffffff12; background: #202224;
}
#referenceCropDialog .reference-crop-heading h2 { margin: 0; font-size: 16px; font-weight: 600; }
#referenceCropDialog .reference-crop-heading p { margin: 5px 0 0; color: #a4a8ab; font-size: 11px; line-height: 1.5; }
#referenceCropDialog .reference-crop-heading .icon-button {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px;
  border-radius: 50%; color: #c7cacc; background: #323537;
}
#referenceCropDialog .reference-crop-heading .icon-button:hover { background: #45494c; color: #fff; }
#referenceCropDialog .reference-crop-stage {
  position: relative; height: min(46dvh, 400px); min-height: 180px; margin: 18px 20px 0;
  border-radius: 10px; background: #111315; overflow: hidden; isolation: isolate; user-select: none;
}
#referenceCropDialog .reference-crop-stage > img {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; object-fit: contain; object-position: center; pointer-events: none; user-select: none;
}
#referenceCropDialog .reference-crop-box {
  position: absolute; z-index: 1; box-sizing: border-box; border: 1.5px solid #fff;
  box-shadow: 0 0 0 100vmax #0009; cursor: grab; touch-action: none;
  background-image: linear-gradient(to right, transparent calc(33.333% - .5px), #ffffff60 calc(33.333% - .5px), #ffffff60 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #ffffff60 calc(66.666% - .5px), #ffffff60 calc(66.666% + .5px), transparent calc(66.666% + .5px)), linear-gradient(to bottom, transparent calc(33.333% - .5px), #ffffff60 calc(33.333% - .5px), #ffffff60 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), #ffffff60 calc(66.666% - .5px), #ffffff60 calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
#referenceCropDialog .reference-crop-box:active { cursor: grabbing; }
#referenceCropDialog .reference-crop-box:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
#referenceCropDialog .reference-crop-toolbar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; padding: 16px 20px 12px;
}
#referenceCropDialog .reference-crop-toolbar button {
  min-width: 58px; min-height: 36px; padding: 8px 12px; border: 1px solid #45494c; border-radius: 8px;
  background: #2b2e30; color: #bfc4c7; font-size: 12px; transition: background .16s ease, border-color .16s ease;
}
#referenceCropDialog .reference-crop-toolbar button:hover { background: #3e4245; color: #fff; }
#referenceCropDialog .reference-crop-toolbar button:is(.active, [aria-pressed="true"]) { border-color: #e2e6e9; background: #f0f2f3; color: #202326; }
#referenceCropDialog .reference-crop-status { margin: 0; padding: 0 20px 14px; text-align: center; color: #a8aeb2; font-size: 11px; line-height: 1.5; }
#referenceCropDialog .reference-crop-scale { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 20px 14px; color: #bfc4c7; font-size: 12px; }
#referenceCropDialog .reference-crop-scale input { width: min(260px, 45%); accent-color: var(--lime); cursor: pointer; }
#referenceCropDialog .reference-crop-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px;
  border-top: 1px solid #ffffff12; background: #202224;
}
#referenceCropDialog .reference-crop-footer button {
  min-height: 40px; padding: 10px 18px; border: 1px solid #484c4f; border-radius: 10px;
  background: #303436; color: #e2e5e7; font-size: 12px; font-weight: 550; transition: background .16s ease;
}
#referenceCropDialog .reference-crop-footer button:hover:not(:disabled) { background: #44494c; }
#referenceCropDialog .reference-crop-footer .reference-crop-save { border-color: var(--lime); background: var(--lime); color: #151813; }
#referenceCropDialog .reference-crop-footer .reference-crop-save:hover:not(:disabled) { background: #f3782b; }
#referenceCropDialog button:disabled { opacity: .45; cursor: not-allowed; }
#referenceCropDialog button:focus-visible { outline: 2px solid #edd1bf; outline-offset: 3px; }
@media (max-width: 650px) {
  #referenceCropDialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  #referenceCropDialog .reference-crop-heading { padding: 14px; gap: 10px; }
  #referenceCropDialog .reference-crop-stage { height: min(42dvh, 360px); min-height: 160px; margin: 14px 12px 0; }
  #referenceCropDialog .reference-crop-toolbar { gap: 6px; padding: 13px 12px 10px; }
  #referenceCropDialog .reference-crop-toolbar button { min-width: 52px; min-height: 40px; padding: 8px 10px; }
  #referenceCropDialog .reference-crop-status { padding: 0 14px 12px; }
  #referenceCropDialog .reference-crop-footer { padding: 12px; }
  #referenceCropDialog .reference-crop-footer button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #referenceCropDialog button { transition: none; }
}

/* Customer authentication keeps credential fields separate from Google linking. */
.auth-fields { display: grid; gap: 13px; border: 0; padding: 0; margin: 0; min-width: 0; }
.auth-fields.hidden { display: none; }
.auth-help { display: block; margin: 5px 0 0; color: #8d999e; font-size: 11px; line-height: 1.5; font-weight: 400; }
.auth-help.hidden { display: none; }
.auth-link-copy { margin: 0; font-size: 13px; line-height: 1.6; }
.google-auth-help { margin-top: 9px; color: #8d999e; font-size: 11px; line-height: 1.6; }
.google-auth-help summary { cursor: pointer; }
.google-auth-help p { margin: 8px 0; }
.google-auth-help a { color: inherit; text-decoration: underline; }
.google-auth-button.is-loading { pointer-events: none; opacity: .65; }
.auth-dialog .dialog-content { max-height: min(68vh, 650px); overflow-y: auto; }

.google-auth-popup-button { display: block; margin: 10px auto 0; padding: 5px 8px; color: #c4d1cd; text-decoration: underline; font-size: 12px; line-height: 1.5; }
.google-auth-popup-button:hover { color: #fff; }

/* Customer access: the same account actions, in the approved two-column shell. */
.top-actions .top-search { order: -1; }
.is-guest [data-session-only] { display: none !important; }
.language-picker { position: relative; flex-shrink: 0; }
.language-trigger { border-radius: 50%; color: #b7b9bc; }
.language-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 224px; padding: 7px; border: 1px solid #ffffff12; border-radius: 12px; background: #23262af5; backdrop-filter: blur(24px); box-shadow: 0 16px 40px #0007; z-index: 65; animation: access-menu-in .16s ease-out; }
.language-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 9px; border-radius: 7px; text-align: left; color: #f4f4f5; font-size: 13px; transition: background .18s; }
.language-menu button:hover, .language-menu button[aria-checked=true] { background: #ffffff0e; }
.language-menu button:disabled { opacity: .6; cursor: wait; }
.language-flag { width: 21px; height: 21px; flex: 0 0 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; font-size: 22px; line-height: 1; }
.language-flag-vi { background: #da251d; color: #ff6200; font-size: 15px; }
.language-check { margin-left: auto; opacity: 0; }
[aria-checked=true] > .language-check { opacity: 1; }
.guest-auth-actions { display: flex; align-items: center; gap: 8px; }
.guest-auth-divider { width: 1px; height: 23px; background: #ffffff16; margin: 0 3px; }
.guest-login, .guest-register { min-height: 36px; padding: 0 13px; border-radius: 9px; white-space: nowrap; font-size: 13px; font-weight: 600; transition: background .18s, transform .18s; }
.guest-login { background: #ff6f1614; color: #ff6f16; }
.guest-login:hover { background: #ff6f1629; }
.guest-register { background: #ff6f16; color: #151803; }
.guest-register:hover { background: #ff751f; }
.guest-login:active, .guest-register:active { transform: scale(.98); }
.auth-dialog { width: min(1120px, calc(100vw - 48px)); max-width: 1120px; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #ffffff0c; border-radius: 24px; background: #131517; color: #f4f4f5; overflow: auto; box-shadow: 0 30px 100px #0008; }
.auth-dialog::backdrop { background: #000b; backdrop-filter: blur(2px); }
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; }
.auth-promo { position: relative; min-width: 0; min-height: 676px; margin: 12px; border-radius: 14px; overflow: hidden; background: #112619; }
.auth-promo-image { position: absolute; left: 0; top: 0; width: 109%; height: 100%; object-fit: cover; object-position: left center; max-width: none; transition: transform .6s, filter .6s; }
.auth-promo[data-scene=image] .auth-promo-image { transform: scale(1.08) translateY(-2%); filter: saturate(.72); }
.auth-promo[data-scene=audio] .auth-promo-image { transform: scale(1.16); filter: hue-rotate(18deg) saturate(.8); }
.auth-promo-shade { position: absolute; inset: 0; background: linear-gradient(0deg,#000e 0%,#0004 35%,transparent 65%); }
.auth-promo-copy { position: absolute; bottom: 21px; left: 21px; right: 21px; }
.auth-promo-badge { display: inline-flex; align-items: center; gap: 6px; background: #ffffff1a; border: 1px solid #ffffff15; padding: 5px 8px; border-radius: 6px; font-size: 11px; }
.auth-promo-badge .icon { width: 13px; height: 13px; }
.auth-promo-copy h2 { margin: 13px 0 11px; max-width: 440px; font: 750 39px/1.08 Inter,Arial,sans-serif; letter-spacing: -1.3px; }
.auth-promo-copy p { color: #b7baba; font-size: 12px; max-width: 340px; line-height: 1.5; min-height: 36px; margin: 0; }
.auth-promo-tabs { display: flex; gap: 5px; margin-top: 30px; }
.auth-promo-tabs button { flex: 1; min-width: 0; color: #90918f; text-align: left; background: transparent; padding: 0; }
.auth-promo-tabs button > span { display: block; height: 3px; width: 100%; background: #ffffff30; border-radius: 4px; margin-bottom: 8px; transition: background .18s; }
.auth-promo-tabs button[aria-pressed=true] { color: white; }
.auth-promo-tabs button[aria-pressed=true] > span, .auth-promo-tabs button:hover > span { background: white; }
.auth-promo-tabs b { font-size: 11px; font-weight: 400; }
.auth-form-pane { position: relative; min-width: 0; padding: 61px 54px 34px; }
.auth-dialog-tools { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 5px; z-index: 3; }
.auth-close { background: #ffffff09; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; }
.auth-dialog #authForm { width: 100%; max-width: 383px; margin: 0 auto; text-align: center; }
.auth-brand { display: grid; place-items: center; margin: 0 auto 18px; width: 35px; height: 35px; padding: 5px; border-radius: 9px; background: #ff6f16; color: #111500; }
.auth-brand svg { width: 100%; height: 100%; }
.auth-dialog #authTitle { margin: 0; font-size: 28px; line-height: 1.25; letter-spacing: -.8px; font-weight: 600; }
.auth-dialog #authCopy { margin: 10px 0 0; color: #85878b; font-size: 12px; line-height: 1.5; }
.auth-dialog .google-auth-wrap { margin-top: 37px; }
.auth-dialog .google-auth-button { background: transparent; border-color: #ffffff1c; border-radius: 12px; min-height: 56px; box-shadow: none; overflow: hidden; }
.auth-dialog .google-auth-button:hover { background: #ffffff05; transform: none; box-shadow: none; border-color: #ff6f1655; }
.auth-dialog .google-auth-fallback { min-height: 56px; background: transparent; color: #f4f4f5; border-color: #ffffff1c; border-radius: 12px; box-shadow: none; font-weight: 500; font-size: 13px; }
.auth-dialog .google-auth-fallback:hover:not(:disabled) { background: #ffffff05; border-color: #ff6f1655; box-shadow: none; transform: none; }
.auth-dialog .google-mark { width: 19px; height: 19px; border-radius: 0; background: none; }
.auth-dialog .google-mark img { width: 19px; height: 19px; }
.auth-dialog .google-auth-help { text-align: left; font-size: 11px; margin-top: 10px; }
.auth-dialog .google-auth-help summary { text-align: center; color: #8a8d92; font-size: 11px; }
.auth-dialog .google-auth-help .small-button { font-size: 11px; padding: 6px 10px; }
.auth-dialog .auth-divider { margin: 23px 0; gap: 14px; color: #74767a; font-size: 11px; }
.auth-dialog .auth-divider::before, .auth-dialog .auth-divider::after { background: #ffffff16; }
.auth-dialog .auth-fields { text-align: left; gap: 15px; }
.auth-dialog .auth-fields label { display: block; color: #96989d; font-size: 11px; line-height: 1.5; font-weight: 400; }
.auth-dialog .auth-fields label > span:first-child { display: block; margin-bottom: 7px; }
.auth-dialog .auth-fields input { width: 100%; min-width: 0; height: 49px; padding: 0 14px; border: 1px solid #ffffff1b; border-radius: 10px; background: #101214; color: #f4f4f5; font-size: 13px; transition: background .18s,border-color .18s; }
.auth-dialog .auth-fields input:hover { border-color: #ffffff30; }
.auth-dialog .auth-fields input:focus { background: #141618; border-color: #ff6f1677; }
.auth-dialog .auth-fields input::placeholder { color: #65686e; font-size: 12px; }
.auth-dialog .auth-password-input { display: block; position: relative; }
.auth-dialog .auth-password-input input { padding-right: 43px; }
.auth-dialog .auth-password-input button { position: absolute; right: 5px; top: 7px; width: 34px; height: 34px; border-radius: 50%; }
.auth-dialog .auth-password-input button .icon { width: 16px; height: 16px; }
.auth-dialog #authSubmit { width: 100%; height: 42px; min-height: 42px; border-radius: 10px; margin-top: 15px; background: #ff6f16; color: #151803; font-size: 13px; font-weight: 600; }
.auth-dialog #authSubmit:hover:not(:disabled) { background: #ff751f; }
.auth-dialog #authSubmit:disabled { background: #242629; color: #6b6d71; cursor: not-allowed; }
.auth-dialog .auth-mode-switch { margin: 21px 0 0; color: #85878b; font-size: 11px; }
.auth-mode-switch button { color: #d6d7d9; text-decoration: underline; text-underline-offset: 3px; padding: 2px 3px; font-size: inherit; }
.auth-mode-switch button:hover { color: #ff6f16; }
.auth-dialog .auth-footnote { padding-top: 17px; margin: 24px 0 0; border-top: 1px solid #ffffff16; color: #797c81; font-size: 11px; line-height: 1.5; }
.auth-dialog .auth-error { margin: 15px 0 0; text-align: left; font-size: 12px; }
.auth-login-back { text-align: left; margin-top: 34px; }
.auth-login-back button { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: #a4a6ab; font-size: 11px; }
.auth-login-back button .icon { width: 13px; height: 13px; }
.auth-login-back p { color: #ddd; overflow-wrap: anywhere; font-size: 13px; margin: 10px 0 19px; }
.auth-dialog[data-auth-step=register] .auth-form-pane { padding-top: 58px; }
.auth-dialog[data-auth-step=register] #authTitle { font-size: 25px; }
.auth-dialog[data-auth-step=register] .google-auth-wrap { margin-top: 23px; }
.auth-dialog[data-auth-step=register] .auth-divider { margin: 18px 0; }
.auth-dialog[data-auth-step=register] .auth-fields { grid-template-columns: 1fr 1fr; gap: 13px 12px; }
.auth-dialog[data-auth-step=register] #authEmailField { grid-column: 1 / -1; }
.auth-dialog[data-auth-step=register] .auth-fields input { height: 44px; font-size: 12px; }
.auth-dialog[data-auth-step=register] .auth-password-input button { top: 5px; }
.auth-dialog[data-auth-step=register] #authUsernameHelp { display: none; }
.auth-dialog[data-auth-step=register] .auth-fields { margin-top: 0; }
.auth-dialog[data-auth-step=link] .auth-fields { margin-top: 30px; }
.auth-dialog[data-auth-step=link] .auth-link-copy { color: #a0a3a7; font-size: 13px; }
@keyframes access-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .auth-form-pane { padding-left: 32px; padding-right: 32px; }
  .auth-dialog #authTitle { font-size: 25px; }
  .auth-promo-copy h2 { font-size: 33px; }
  .is-guest .topbar { gap: 12px; }
  .is-guest .topbar nav { gap: 15px; overflow: hidden; }
}
@media (max-width: 700px) {
  .auth-dialog { width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .auth-shell { display: block; min-height: 650px; }
  .auth-promo { display: none; }
  .auth-form-pane { padding: 84px 23px 32px; }
  .auth-dialog #authTitle { font-size: 28px; }
  .auth-dialog .auth-brand { width: 38px; height: 38px; margin-bottom: 22px; }
  .auth-dialog .auth-fields input, .auth-dialog[data-auth-step=register] .auth-fields input { font-size: 16px; }
  .auth-dialog .auth-fields input::placeholder { font-size: 13px; }
  .auth-dialog .google-auth-wrap { margin-top: 35px; }
  .auth-dialog .google-auth-fallback { min-height: 50px; }
  .auth-dialog .auth-mode-switch, .auth-dialog .auth-footnote { font-size: 12px; }
  .auth-dialog[data-auth-step=register] .auth-form-pane { padding-top: 79px; }
  .auth-dialog[data-auth-step=register] .auth-fields { grid-template-columns: 1fr; }
  .auth-dialog[data-auth-step=register] #authEmailField { grid-column: auto; }
  .auth-dialog[data-auth-step=register] .auth-fields input { height: 46px; }
  .is-guest .topbar nav { display: none; }
  .is-guest .top-actions { margin-left: auto; }
  .guest-auth-divider { display: none; }
  .guest-auth-actions { gap: 5px; }
  .guest-login, .guest-register { padding: 0 10px; font-size: 12px; }
  .topbar > .top-actions > .language-picker { position: static; }
  .topbar .language-menu { right: 10px; top: calc(100% + 3px); }
}
@media (max-width: 370px) { .is-guest .top-search { display: none; } }
@media (pointer: coarse) {
  .language-menu button { min-height: 44px; }
  .auth-dialog-tools .icon-button { width: 44px; height: 44px; }
  .guest-login, .guest-register { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-dialog *, .language-menu { animation: none !important; transition: none !important; }
}
.media-retention-note{font-size:11px;line-height:1.5;color:#8f959e;margin:8px 0}
.media-retention-note.is-expired{color:#c7aa79}
.media-expired{display:flex;flex-direction:column;gap:10px;text-align:center;padding:18px}
.media-expired small{font-size:12px;color:#8f959e}