.studio-page-clean .prompt-row{position:relative}
.studio-page-clean .studio-prompt-editor{position:relative;z-index:1;outline:none;cursor:text}
.studio-page-clean .clean-prompt-placeholder{position:absolute;z-index:0;left:0;top:2px;right:24px;color:#a1a3a7;font-size:14px;line-height:24px;pointer-events:none}
.studio-page-clean .clean-upload-progress{grid-column:1/-1;display:grid;gap:6px;padding:6px 0 0;color:var(--secondary);font-size:11px}
.studio-page-clean .clean-upload-progress>div{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:4px 0 8px}
.studio-page-clean .clean-upload-progress>div span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-page-clean .clean-upload-progress>div i{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:#c5eff5;transform:scaleX(0);transform-origin:left center;transition:transform 160ms ease-out}
.studio-page-clean .clean-floating-panel{position:absolute;z-index:55;overflow:hidden;width:min(520px,calc(100% - 32px));padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#252525;color:var(--text);box-shadow:0 16px 48px #0008,0 2px 8px #0004;animation:popover-in 140ms ease-out}
.studio-page-clean .clean-mention-panel,.studio-page-clean .clean-asset-panel{left:0;bottom:calc(100% + 12px)}
.studio-page-clean .clean-model-panel,.studio-page-clean .clean-parameter-panel{left:16px;bottom:48px;width:min(720px,calc(100% - 32px));max-height:min(460px,calc(100dvh - 100px));overflow:auto}
.studio-page-clean .clean-floating-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 10px;color:#f5f5f6;font-size:13px;font-weight:600}
.studio-page-clean .clean-floating-title button{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:#aeb1b4}
.studio-page-clean .clean-floating-title button:hover{background:rgba(255,255,255,.08);color:#fff}
.studio-page-clean .clean-floating-title .icon{width:14px;height:14px}
.studio-page-clean .clean-floating-list,.studio-page-clean .clean-model-list,.studio-page-clean .clean-option-list{display:grid;gap:3px;max-height:310px;overflow:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.studio-page-clean .clean-floating-option{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:8px;border-radius:9px;text-align:left;color:#e4e4e6}
.studio-page-clean .clean-floating-option:hover{background:rgba(255,255,255,.07)}
.studio-page-clean .clean-floating-option .asset-thumb{width:34px;height:34px;flex:0 0 34px;border-radius:7px}
.studio-page-clean .clean-floating-option img{width:100%;height:100%;object-fit:cover}
.studio-page-clean .clean-floating-option strong,.studio-page-clean .clean-floating-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-page-clean .clean-floating-option strong{color:#f4f4f6;font-size:12px;font-weight:500}
.studio-page-clean .clean-floating-option small{margin-top:2px;color:#aaaab0;font-size:11px}
.studio-page-clean .clean-floating-empty{padding:16px 8px;color:#a7a8ad;font-size:12px;text-align:center}
.studio-page-clean .clean-folder-row{display:flex;gap:4px;overflow:auto;margin-bottom:7px;scrollbar-width:none}
.studio-page-clean .clean-folder-row::-webkit-scrollbar{display:none}
.studio-page-clean .clean-folder-row button{flex:0 0 auto;min-height:28px;padding:0 9px;border-radius:999px;color:#b9bbc0;font-size:11px}
.studio-page-clean .clean-folder-row button:hover,.studio-page-clean .clean-folder-row button.selected{background:rgba(255,255,255,.12);color:#f4f4f6}
.studio-page-clean .clean-load-more{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:32px;margin-top:8px;border-radius:8px;background:rgba(255,255,255,.08);color:#e5e5e9;font-size:12px}
.studio-page-clean .clean-load-more:hover{background:rgba(255,255,255,.13)}
.studio-page-clean .clean-model-option{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:55px;padding:4px 8px;border:1px solid transparent;border-radius:9px;text-align:left;color:#e4e4e6}
.studio-page-clean .clean-model-option:hover,.studio-page-clean .clean-model-option.selected{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.studio-page-clean .clean-model-option:disabled{opacity:.5;cursor:not-allowed}
.studio-page-clean .clean-model-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px;align-self:center}
.studio-page-clean .clean-model-copy strong{overflow-wrap:anywhere;font-size:12px;font-weight:500}
.studio-page-clean .clean-model-copy small{color:#aaaab0;font-size:11px}
.studio-page-clean .clean-model-price{flex:0 0 auto;color:#c5eff5;font-size:11px;font-variant-numeric:tabular-nums}
.studio-page-clean .clean-option-list{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));max-height:none}
.studio-page-clean .clean-option-list>button{min-height:34px;padding:7px 9px;border-radius:8px;color:#dfe0e3;font-size:12px;text-align:left}
.studio-page-clean .clean-option-list>button:hover,.studio-page-clean .clean-option-list>button.selected{background:rgba(255,255,255,.1);color:#fff}
.studio-page-clean .clean-checkbox-option{display:flex;align-items:center;gap:8px;padding:10px 8px;color:#e4e4e6;font-size:12px}
.studio-page-clean .clean-checkbox-option input{accent-color:#c5eff5}
.studio-page-clean .clean-cost-label{align-self:center;margin-right:2px;color:#b9bbc0;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.studio-page-clean .clean-task-dialog{width:min(980px,100%)}
.studio-page-clean .clean-task-dialog .clean-dialog-header{align-items:flex-start}
.studio-page-clean .clean-task-dialog .clean-dialog-header h2{margin-bottom:3px}
.studio-page-clean .clean-task-dialog-status{color:#aeb0b6;font-size:11px}
.studio-page-clean .clean-task-dialog-body{padding:10px 18px 20px}
.studio-page-clean .clean-task-dialog-body .clean-task-card{border:0;background:transparent}
.studio-page-clean .clean-submit-loading{width:15px;height:15px;border:2px solid rgba(23,23,23,.25);border-top-color:#171717;border-radius:50%;animation:clean-spin 700ms linear infinite}
@keyframes clean-spin{to{transform:rotate(360deg)}}
.studio-page-clean .clean-results-header{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(var(--editor-width),100%);margin:36px auto 12px;color:#e8e8eb;font-size:13px}
.studio-page-clean .clean-results-header strong{font-weight:600}.studio-page-clean .clean-results-header span{color:#9fa0a5;font-variant-numeric:tabular-nums}
.studio-page-clean .clean-results-filters{display:flex;align-items:center;gap:6px}
.studio-page-clean .clean-results-filters input,.studio-page-clean .clean-results-filters select{height:30px;min-width:0;padding:0 8px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#1c1c1c;color:#dfe0e3;font-size:11px;outline:none}
.studio-page-clean .clean-results-filters input{width:160px}.studio-page-clean .clean-results-filters input:focus,.studio-page-clean .clean-results-filters select:focus{border-color:rgba(197,239,245,.55)}
.studio-page-clean .clean-task-list{display:grid;gap:20px;width:min(var(--editor-width),100%);margin:0 auto 80px}
.studio-page-clean .clean-task-card{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(29,29,29,.72)}
.studio-page-clean .clean-task-card article{max-width:none!important;padding:16px!important;color:#e7e7e9}
.studio-page-clean .clean-task-card .bg-white,.studio-page-clean .clean-task-card .bg-white\/70{background:rgba(35,35,35,.85)!important}
.studio-page-clean .clean-task-card .text-slate-950,.studio-page-clean .clean-task-card .text-slate-900,.studio-page-clean .clean-task-card .text-slate-800,.studio-page-clean .clean-task-card .text-slate-700{color:#e7e7e9!important}
.studio-page-clean .clean-task-card .text-slate-500,.studio-page-clean .clean-task-card .text-slate-400{color:#a6a7ac!important}
.studio-page-clean .clean-task-card .ring-slate-200,.studio-page-clean .clean-task-card .border-slate-200{border-color:rgba(255,255,255,.09)!important}
.studio-page-clean .clean-task-card .bg-slate-50{background:#292929!important}
.studio-page-clean .clean-results-empty{display:grid;justify-items:center;gap:8px;width:min(var(--editor-width),100%);min-height:180px;margin:0 auto 80px;padding:40px 16px;color:#a4a5aa;text-align:center;font-size:12px}
.studio-page-clean .clean-results-empty strong{color:#e2e3e5;font-size:14px;font-weight:500}.studio-page-clean .clean-results-empty .icon{width:28px;height:28px;color:#b3c4c7}
.studio-page-clean .clean-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:#0009;backdrop-filter:blur(4px)}
.studio-page-clean .clean-dialog{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#202020;color:var(--text);box-shadow:0 24px 80px #0008;animation:popover-in 160ms ease-out}
.studio-page-clean .clean-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;border-bottom:1px solid var(--line)}
.studio-page-clean .clean-dialog-header h2{margin:0;font-size:16px;font-weight:600}.studio-page-clean .clean-dialog-header button{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:#aeb1b4}.studio-page-clean .clean-dialog-header button:hover{background:rgba(255,255,255,.08);color:#fff}.studio-page-clean .clean-dialog-header .icon{width:15px;height:15px}
.studio-page-clean .clean-dialog-body{max-height:calc(100dvh - 120px);overflow:auto;padding:20px;color:#c2c3c7;font-size:13px;line-height:1.8}.studio-page-clean .clean-dialog-body img,.studio-page-clean .clean-dialog-body video{display:block;max-width:100%;max-height:60vh;margin:0 auto;border-radius:10px;object-fit:contain;background:#121212}.studio-page-clean .clean-dialog-body audio{width:100%}
.studio-page-clean .clean-dialog-header>div{min-width:0;flex:1}.studio-page-clean .clean-dialog-header p{margin:3px 0 0;color:#9fa5ad;font-size:12px;line-height:18px}.studio-page-clean .clean-dialog-field{display:grid;gap:7px;color:#dfe2e5;font-size:12px;font-weight:600}.studio-page-clean .clean-dialog-field input{width:100%;height:42px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#171717;color:#f5f7f8;outline:none;font-size:14px}.studio-page-clean .clean-dialog-field input:focus{border-color:rgba(197,239,245,.62);box-shadow:0 0 0 3px rgba(197,239,245,.12)}.studio-page-clean .clean-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.studio-page-clean .clean-dialog-actions button{min-height:34px;padding:0 13px;border-radius:9px;font-size:12px;font-weight:600}.studio-page-clean .clean-dialog-actions .primary-button{background:#e9f1f2;color:#16191a}.studio-page-clean .clean-dialog-actions .primary-button:hover:not(:disabled){background:#fff}.studio-page-clean .clean-dialog-actions .secondary-button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e5e7ea}.studio-page-clean .clean-dialog-actions .secondary-button:hover:not(:disabled){background:rgba(255,255,255,.12)}.studio-page-clean .clean-dialog-actions .danger-button{background:#9e4f4c;color:#fff}.studio-page-clean .clean-dialog-actions .danger-button:hover:not(:disabled){background:#b75e59}.studio-page-clean .clean-dialog-actions button:disabled{cursor:not-allowed;opacity:.5}
.studio-page-clean .studio-task-reference-more{display:grid;position:relative;z-index:4;width:40px;height:40px;place-items:center;border-radius:999px;background:#303336;color:#e9ecef;box-shadow:0 0 0 2px #202020;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.studio-page-clean .task-feed-card .studio-task-reference-thumb{background:#2a2b2d;box-shadow:0 0 0 2px #242526,0 2px 8px rgba(0,0,0,.22)}
.studio-page-clean .task-feed-card .bg-\[\#f3f4f6\]{background:#2b2d2f!important;color:#e9ecef!important;border-color:rgba(255,255,255,.12)!important}
.studio-page-clean .task-feed-card .text-red-600{color:#f0aaa7!important}.studio-page-clean .task-feed-card .text-cyan-700{color:#b9eef0!important}.studio-page-clean .task-feed-card .bg-cyan-50{background:rgba(197,239,245,.1)!important}.studio-page-clean .task-feed-card .border-cyan-200{border-color:rgba(197,239,245,.25)!important}.studio-page-clean .task-feed-card .bg-cyan-100{background:rgba(197,239,245,.18)!important}
.studio-page-clean .task-feed-card .studio-task-preview{background:#1a1d1f!important;color:#b8bdc4!important}.studio-page-clean .task-feed-card .studio-task-preview .text-slate-500{color:#a4aab2!important}.studio-page-clean .task-feed-card .studio-task-preview .text-slate-400{color:#858d97!important}
.studio-page-clean .studio-generating-preview{position:relative;isolation:isolate;display:block;width:min(100%,640px);min-height:240px;aspect-ratio:16/9;margin-inline:auto;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:2px;background:#101214!important;box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.025);contain:paint}
.studio-page-clean .studio-generating-preview__glow,.studio-page-clean .studio-generating-preview__wash,.studio-page-clean .studio-generating-preview__edge{position:absolute;inset:-18%;pointer-events:none}
.studio-page-clean .studio-generating-preview__glow{z-index:0;background:radial-gradient(ellipse at 70% 72%,rgba(28,113,230,.88) 0%,rgba(28,113,230,.54) 16%,transparent 43%),radial-gradient(ellipse at 57% 11%,rgba(192,131,159,.72) 0%,rgba(192,131,159,.4) 23%,transparent 54%),radial-gradient(ellipse at 29% 74%,rgba(198,121,104,.72) 0%,rgba(198,121,104,.34) 18%,transparent 49%),radial-gradient(ellipse at 103% 46%,rgba(50,185,199,.84) 0%,rgba(50,185,199,.42) 19%,transparent 48%),linear-gradient(118deg,#111416 5%,#1c1d26 38%,#131b26 100%);background-size:150% 150%;filter:blur(30px) saturate(112%);transform:translate3d(-7%,-3%,0) scale(1.08);animation:studio-generating-drift 7s ease-in-out infinite alternate}
.studio-page-clean .studio-generating-preview__wash{z-index:1;background:radial-gradient(ellipse at 63% 52%,rgba(253,244,238,.28),transparent 34%),radial-gradient(ellipse at 43% 87%,rgba(62,133,220,.35),transparent 40%),linear-gradient(115deg,rgba(9,11,14,.38),rgba(9,11,14,.03) 46%,rgba(6,8,12,.34));background-size:150% 150%;filter:blur(18px);mix-blend-mode:screen;transform:translate3d(2%,0,0) scale(1.1);animation:studio-generating-wash 8s ease-in-out infinite alternate}
.studio-page-clean .studio-generating-preview__edge{z-index:2;inset:0;background:linear-gradient(90deg,rgba(4,6,8,.52),transparent 28%,transparent 76%,rgba(4,6,8,.25)),linear-gradient(180deg,rgba(4,6,8,.18),transparent 35%,rgba(4,6,8,.42));box-shadow:inset 0 0 70px rgba(2,4,8,.48)}
.studio-page-clean .studio-generating-preview__progress{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;justify-content:flex-start;min-height:24px;padding:2px 9px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:rgba(71,75,96,.72);box-shadow:0 5px 16px rgba(0,0,0,.18);color:rgba(249,250,255,.92);font-size:12px;font-weight:500;line-height:18px;letter-spacing:.01em;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.25);backdrop-filter:blur(8px);animation:studio-generating-label 1.8s ease-in-out infinite}
.studio-page-clean .studio-generating-preview__progress::after{display:inline-block;width:1.25em;overflow:hidden;content:"…";animation:studio-generating-dots 1.25s steps(4,end) infinite}
@keyframes studio-generating-drift{0%{transform:translate3d(-8%,-4%,0) scale(1.08)}50%{transform:translate3d(9%,7%,0) scale(1.15)}100%{transform:translate3d(-2%,13%,0) scale(1.1)}}
@keyframes studio-generating-wash{0%{transform:translate3d(5%,-4%,0) scale(1.08) rotate(-2deg);opacity:.72}50%{transform:translate3d(-7%,5%,0) scale(1.16) rotate(2deg);opacity:.96}100%{transform:translate3d(4%,10%,0) scale(1.1) rotate(-1deg);opacity:.8}}
@keyframes studio-generating-label{0%,100%{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
@keyframes studio-generating-dots{0%{width:0}25%{width:.35em}50%{width:.7em}75%,100%{width:1.05em}}
@media (max-width:700px){.studio-page-clean .studio-generating-preview{min-height:200px}}
@media (prefers-reduced-motion:reduce){.studio-page-clean .studio-generating-preview__glow,.studio-page-clean .studio-generating-preview__wash,.studio-page-clean .studio-generating-preview__progress,.studio-page-clean .studio-generating-preview__progress::after{animation:none}}
@media (hover:none){.studio-page-clean .record-more-button,.studio-page-clean .canvas-card-more{opacity:1}}
@media (max-width:700px){.studio-page-clean .clean-results-header{align-items:stretch;flex-direction:column}.studio-page-clean .clean-results-filters{width:100%}.studio-page-clean .clean-results-filters input{width:100%;flex:1}.studio-page-clean .clean-model-panel,.studio-page-clean .clean-parameter-panel{left:8px;width:calc(100% - 16px)}.studio-page-clean .clean-task-list{margin-bottom:48px}}

/* Asset library follows the supplied MakerAI eight-region composition:
   compact group rail, toolbar, source/type tabs, search, empty state,
   pagination and footer actions. */
.clean-library-page .library-main{min-width:0}
.clean-library-page .library-group-rail{
  display:flex;flex:0 0 184px;flex-direction:column;gap:2px;
  min-width:184px;padding:16px 8px 14px;border-right:1px solid rgba(255,255,255,.08);
  background:#1a1a1c;
}
.clean-library-page .library-group-title{
  padding:0 8px 10px;color:#f1f2f4;font-size:13px;font-weight:650;line-height:20px;
}
.clean-library-page .library-rail-item{
  display:flex;align-items:center;gap:8px;min-width:0;min-height:34px;padding:0 8px;
  border-radius:6px;color:#b5b7bf;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;
}
.clean-library-page .library-rail-item svg{flex:0 0 15px;color:#8b8e97}
.clean-library-page .library-rail-item small{margin-left:auto;color:#777a83;font-size:10px}
.clean-library-page .library-rail-item:hover{background:rgba(255,255,255,.06);color:#f2f3f5}
.clean-library-page .library-rail-item.is-active{background:rgba(255,255,255,.09);color:#f4f5f6}
.clean-library-page .library-rail-item.is-active svg{color:#d9e8eb}
.clean-library-page .library-rail-create{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;margin-top:auto;
  border-radius:6px;background:#2b2b2f;color:#dadce0;font-size:12px;
}
.clean-library-page .library-rail-create:hover{background:#343438;color:#fff}
.clean-library-page .library-content{padding:0 0 84px}
.clean-library-page .library-content > div{max-width:none!important}
.clean-library-page .library-header-inner{max-width:none!important}
.clean-library-page .library-header{padding:0 16px!important;min-height:58px}
.clean-library-page .library-header-inner{min-height:58px;gap:10px}
.clean-library-page .library-title{min-width:0;flex:1 1 auto}
.clean-library-page .library-title h1{font-size:18px}
.clean-library-page .library-header-select,
.clean-library-page .library-batch-button,
.clean-library-page .library-action-primary{height:36px!important;border-radius:6px!important;font-size:12px!important}
.clean-library-page .library-header-select{min-width:120px}
.clean-library-page .library-action-primary{padding-inline:14px!important}
.clean-library-page .library-control-panel{margin:0;border:0!important;border-radius:0!important;padding:0 10px 0!important;background:transparent!important;box-shadow:none!important}
.clean-library-page .library-folder-tabs{display:none}
.clean-library-page .library-source-tabs{min-height:74px;padding:0 0 0 2px;align-items:center;gap:0;border-bottom:0;overflow-x:auto;scrollbar-width:none}
.clean-library-page .library-source-tabs::-webkit-scrollbar{display:none}
.clean-library-page .library-source-tabs > button{min-height:42px;padding:0 16px;border:0;border-bottom:2px solid transparent;border-radius:0;color:#8f929b;font-size:12px}
.clean-library-page .library-source-tabs > button{flex:0 0 auto;white-space:nowrap}
.clean-library-page .library-source-tabs > button:hover{color:#e5e7eb}
.clean-library-page .library-source-tabs > button.is-active{border-bottom-color:#f0f2f4;color:#f6f7f9;font-weight:650}
.clean-library-page .library-source-tabs > button span{margin-left:4px;color:#73767f;font-size:10px}
.clean-library-page .library-control-panel{position:relative}
.clean-library-page .library-control-panel > .flex{position:relative;display:block!important;height:0!important}
.clean-library-page .library-filter-tabs{display:none!important}
.clean-library-page .library-control-panel > .flex > .relative{position:absolute;top:8px;right:0;display:block;max-width:210px!important;min-width:0!important;margin:0}
.clean-library-page .library-control-panel > .flex > .relative input{height:34px!important;border:0!important;border-radius:5px!important;background:#252528!important;padding-left:34px!important;font-size:12px}
.clean-library-page .library-control-panel > .flex > .relative svg{left:10px!important}
.clean-library-page .library-control-panel > .flex > .ml-auto{display:none!important}
.clean-library-page .library-results{min-height:0!important;margin:0 0 0}
.clean-library-page .library-empty-state{min-height:calc(100dvh - 284px)!important;margin:0 10px;border:0!important;border-radius:0!important;background:#1b1b1d!important}
.clean-library-page .library-empty-state svg{width:32px;height:32px}
.clean-library-page .library-pagination{position:fixed!important;left:calc(var(--sidebar-width) + 184px);right:0;bottom:0;z-index:22;margin:0!important;border:0!important;border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;background:#1b1b1d!important;padding:10px 16px!important}
.clean-library-page .library-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.clean-library-page .library-page-size-value{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:34px;padding-inline:12px;border:0;border-radius:5px;background:#111114;color:#f0f1f3;font-size:12px}
.clean-library-page .library-pagination-center{display:flex;align-items:center;gap:8px;justify-content:center;font-size:11px;color:#989ba4}
.clean-library-page .library-pagination-total{margin-left:2px;white-space:nowrap}
.clean-library-page .library-pagination-center button{width:30px;padding-inline:0!important;justify-content:center}
.clean-library-page .library-footer-actions{display:flex;grid-column:3;align-items:center;justify-content:flex-end;gap:8px}
.clean-library-page .library-empty-state p{display:none}
.clean-library-page .library-footer-action{min-height:34px!important;height:34px!important;border-radius:5px!important;padding-inline:14px!important}
.clean-library-page .library-pagination button:not(.library-footer-action){height:34px!important;border-radius:5px!important}
.clean-library-page .library-pagination .library-footer-download{background:#888a8f;color:#18191b}
.clean-library-page .library-grid{padding:0 10px}
@media (max-width:800px){
  .clean-library-page .library-group-rail{flex-basis:148px;min-width:148px}
  .clean-library-page .library-header{padding-inline:10px!important}
  .clean-library-page .library-title{flex-basis:100%;order:0}
  .clean-library-page .library-header-inner{padding:8px 0;flex-wrap:wrap}
  .clean-library-page .library-header-select{margin-left:auto}
  .clean-library-page .library-pagination{left:calc(var(--sidebar-width) + 148px);grid-template-columns:1fr;grid-template-rows:auto auto}
  .clean-library-page .library-pagination-center{grid-column:1;grid-row:1;justify-content:center}
  .clean-library-page .library-footer-actions{grid-column:1;grid-row:2;justify-content:flex-end}
}
@media (max-width:600px){
  .clean-library-page .library-group-rail{flex-basis:132px;min-width:132px}
  .clean-library-page .library-pagination{left:calc(var(--sidebar-width) + 132px)}
  .clean-library-page .library-source-tabs > button{padding-inline:9px}
}
.studio-page-clean[data-active-nav="assets"][data-sidebar="collapsed"]{--sidebar-width:76px}
.studio-page-clean[data-active-nav="assets"][data-sidebar="collapsed"] .sidebar{padding-inline:18px 14px}
.studio-page-clean[data-embedded-page="true"][data-active-nav="assets"] .workspace{padding-top:0!important}
.studio-page-clean[data-embedded-page="true"][data-active-nav="assets"] .workspace-art,
.studio-page-clean[data-embedded-page="true"][data-active-nav="assets"] .account-tools{display:none!important}

/* Asset library stability pass: the group rail stays fixed while only the
   asset column scrolls, and the search row keeps its own layout space. */
.clean-library-page .library-group-rail{
  position:sticky;
  top:0;
  align-self:stretch;
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.clean-library-page .library-content{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.clean-library-page .library-control-panel > .flex{
  display:flex!important;
  height:auto!important;
  min-height:48px;
  align-items:center;
  gap:12px;
  padding:0 10px 12px!important;
}
.clean-library-page .library-control-panel > .flex > .relative{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  flex:1 1 320px;
  width:auto;
  max-width:520px!important;
  min-width:220px!important;
  margin:0!important;
}
.clean-library-page .library-control-panel > .flex > .relative input{
  height:40px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.045)!important;
  padding-left:38px!important;
  font-size:13px!important;
}
.clean-library-page .library-control-panel > .flex > .relative input:focus{
  border-color:rgba(185,242,245,.55)!important;
  background:rgba(255,255,255,.07)!important;
}
.clean-library-page .library-control-panel > .flex > .ml-auto{
  display:flex!important;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  margin-left:auto!important;
}
.clean-library-page .library-rail-error{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:4px 2px 8px;
  padding:9px 8px;
  border:1px solid rgba(251,113,133,.22);
  border-radius:8px;
  background:rgba(127,29,29,.18);
  color:rgba(254,205,211,.84);
  font-size:11px;
  line-height:16px;
}
.clean-library-page .library-rail-error button{
  width:max-content;
  padding:2px 7px;
  border:1px solid rgba(254,205,211,.25);
  border-radius:5px;
  background:rgba(254,205,211,.08);
  color:#ffe4e6;
  font-size:11px;
}
.clean-library-page .library-card-placeholder{
  background:
    radial-gradient(circle at 50% 35%, rgba(185,242,245,.08), transparent 42%),
    #29292b;
}
.clean-library-page .library-card-placeholder svg{
  opacity:.6;
}
.clean-library-page .library-preview-backdrop{
  overscroll-behavior:contain;
}
.clean-library-page .library-preview-dialog{
  animation:library-preview-in .18s ease-out both;
}
@keyframes library-preview-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:700px){
  .clean-library-page .library-control-panel > .flex{
    align-items:stretch;
    flex-wrap:wrap;
  }
  .clean-library-page .library-control-panel > .flex > .relative{
    flex:1 1 100%;
    min-width:0!important;
    max-width:none!important;
  }
  .clean-library-page .library-control-panel > .flex > .ml-auto{
    width:100%;
    margin-left:0!important;
    justify-content:flex-end;
  }
}

/* Final local workbench behavior: keep the generating preview aligned with
   the prompt column and keep the composer floating above the record feed. */
.studio-page-clean .studio-generating-preview{margin-left:0;margin-right:auto}
.studio-page-clean[data-task-record-view="true"] .task-feed + .composer{
  position:sticky;
  bottom:16px;
  z-index:20;
  margin-top:12px;
  margin-bottom:16px;
  backdrop-filter:blur(18px);
}

/* Task actions keep a stable hit area at every route width.  The label is
   allowed to shrink inside the button instead of pushing the row wider. */
.studio-page-clean .studio-task-action{box-sizing:border-box;min-width:112px;max-width:100%;min-height:44px;height:44px;flex:0 1 auto;justify-content:center;overflow:hidden;white-space:nowrap;line-height:1;text-align:center}
.studio-page-clean .studio-task-action>svg{flex:0 0 auto}
.studio-page-clean .studio-task-action>span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-page-clean .studio-task-download{box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.studio-page-clean .studio-task-download>svg{flex:0 0 auto}

/* Inline controls on the assets and API routes share the compact workbench
   scale. Long labels stay inside their rounded hit area. */
.clean-library-page :is(button,a)[class~="inline-flex"],
.clean-api-page :is(button,a)[class~="inline-flex"],
.clean-api-page button.glass-button{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;line-height:1.2}
.clean-library-page :is(button,a)[class~="inline-flex"]>svg,
.clean-api-page :is(button,a)[class~="inline-flex"]>svg,
.clean-api-page button.glass-button>svg{flex:0 0 auto}
.clean-api-page .api-key-form>button{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}

/* Reference thumbnails wrap inside the editor instead of creating a second
   horizontal scroll surface. The filter pills remain independently
   scrollable when the expanded panel is narrow. */
.studio-page-clean .references{flex-wrap:wrap;overflow-x:hidden;scrollbar-width:none}
.studio-page-clean .references::-webkit-scrollbar{display:none}
.studio-page-clean .reference-panel[data-expanded="true"] .references{width:100%;max-width:100%}
.studio-page-clean .upload-trigger[aria-disabled="true"]:not(:disabled){opacity:.68}
.studio-page-clean .upload-trigger[aria-disabled="true"]:not(:disabled) .stack-front{background:rgba(255,255,255,.045);color:#9b9da2}
.studio-page-clean .upload-trigger[aria-disabled="true"]:not(:disabled):hover .stack-front{background:rgba(255,255,255,.08);color:#d5d7da}

/* Record view keeps the feed readable without stretching each generated
   result edge to edge. The composer remains full width and sticky below it. */
.studio-page-clean[data-task-record-view="true"] .task-feed-card{
  /* Skip layout and paint work for records below the viewport. */
  content-visibility:auto;
  contain-intrinsic-size:520px;
  width:min(100%,860px);
  max-width:860px;
  margin-inline:auto;
}
.studio-page-clean[data-task-record-view="true"] .task-feed-card article{
  width:100%;
  max-width:860px!important;
}
@media (max-width:900px){
  .studio-page-clean[data-task-record-view="true"] .task-feed-card,
  .studio-page-clean[data-task-record-view="true"] .task-feed-card article{
    width:100%;
    max-width:100%!important;
  }
}

/* Task-record view must be in the final direct stylesheet because this file
   is loaded after the scoped clean tokens in the production shell. */
.studio-page-clean[data-task-record-view="true"] .hero,
.studio-page-clean[data-task-record-view="true"] .workspace-art{display:none}
.studio-page-clean[data-task-record-view="true"] .workspace{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#4a4a4a transparent;padding-top:68px;padding-bottom:16px}
.studio-page-clean[data-task-record-view="true"] .workspace::-webkit-scrollbar{width:8px}
.studio-page-clean[data-task-record-view="true"] .workspace::-webkit-scrollbar-thumb{border-radius:999px;background:#4a4a4a}
.studio-page-clean[data-task-record-view="true"] .account-tools{position:fixed;top:20px;right:20px;z-index:30}
.studio-page-clean[data-task-record-view="true"] .mode-stage{display:flex;flex:0 0 auto;flex-direction:column;width:min(var(--editor-width),100%);max-width:100%;min-height:0;margin:0 auto}
.studio-page-clean[data-task-record-view="true"] #generatePanel{display:flex;flex:0 0 auto;flex-direction:column;width:100%;max-width:100%;min-height:0}
.studio-page-clean[data-task-record-view="true"] .task-feed{flex:0 0 auto;width:100%;max-width:100%;min-height:0;margin:0 auto;padding:4px 0 28px;overflow:visible;align-content:start}
.studio-page-clean[data-task-record-view="true"] .task-feed-card{
  /* Skip layout and paint work for records below the viewport. */
  content-visibility:auto;
  contain-intrinsic-size:520px;width:min(100%,860px);max-width:860px;margin-inline:auto}
.studio-page-clean[data-task-record-view="true"] .task-feed-card article{width:100%;max-width:860px!important}
.studio-page-clean[data-task-record-view="true"] .task-feed + .composer{position:sticky;bottom:16px;z-index:20;flex:0 0 auto;margin-top:12px;margin-bottom:16px;backdrop-filter:blur(18px);box-shadow:0 22px 64px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.06)}
@media (max-width:800px){.studio-page-clean[data-task-record-view="true"] .workspace{padding-top:62px;padding-bottom:12px}.studio-page-clean[data-task-record-view="true"] .mode-stage{width:100%}.studio-page-clean[data-task-record-view="true"] .account-tools{top:12px;right:12px}}

/* The old in-content notice rail is removed from the Studio markup. The
   independent header channel stays in the page's top workspace band, with a
   fixed background image and no viewport-floating card. */
.studio-page-clean .studio-top-notice {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 44px;
  min-height: 44px;
  margin: 0;
  border-radius: 0;
  background-attachment: fixed;
  box-shadow: inset 0 -1px 0 rgba(42,122,197,.65), 0 8px 24px rgba(2,12,29,.22);
}
.studio-page-clean .studio-top-notice-main { padding-inline: 4px; }
.studio-page-clean .studio-top-notice-track { max-width: none; }
.studio-page-clean .studio-top-notice-text { line-height: 22px; }
.studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-track { display:block; overflow:hidden; white-space:nowrap; }
.studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-text { display:inline-block; min-width:max-content; animation:studio-top-notice-marquee var(--studio-notice-duration, 6s) linear infinite alternate; }
@keyframes studio-top-notice-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.studio-page-clean .studio-top-notice-close { margin-right: 2px; }

/* Reserve a full-width top band for the independent notice. The sidebar and
   work area both start below it, while the supplied blue background spans
   across both columns. The notice itself remains in the shell layout rather
   than floating over page content. */
.studio-page-clean-shell[data-top-notice-open="true"] {
  padding-top: 44px;
}
.studio-page-clean-shell[data-top-notice-open="true"] .sidebar {
  top: 44px;
  bottom: auto;
  height: calc(100dvh - 44px);
}
.studio-page-clean-shell[data-top-notice-open="true"] .workspace {
  min-height: calc(100dvh - 44px);
  padding-top: 24px;
}
.studio-page-clean-shell[data-top-notice-open="true"][data-task-record-view="true"] .account-tools {
  top: 64px;
}

/* Keep the account controls below the separate creation-page header notice.
   This override comes after the task-record and mobile rules above so the
   blue notice never hides the profile control on narrow screens or in the
   record view. */
.studio-page-clean .workspace[data-top-notice-open="true"] .account-tools { top:68px; }
@media (max-width:800px) {
  .studio-page-clean .workspace[data-top-notice-open="true"] .account-tools { top:68px; right:12px; }
}

/* Latest editor alignment pass: keep the clean shell compact while giving the
   task feed a little more horizontal breathing room. */
.studio-page-clean {
  --editor-width: 1080px;
}
.studio-page-clean .composer {
  min-width: 0;
  overflow-x: hidden;
}
.studio-page-clean .composer-header {
  min-width: 0;
  padding-right: 8px;
}
.studio-page-clean .composer-header-actions {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.studio-page-clean .composer-expand-toggle {
  order: 2;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
.studio-page-clean .composer-expand-toggle .icon {
  width: 13px;
  height: 13px;
}
.studio-page-clean .composer-expand-toggle {
  touch-action: none;
}
.studio-page-clean .composer-expand-toggle .composer-expand-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}
.studio-page-clean .reference-toggle {
  order: 1;
  min-height: 28px;
  height: 28px;
  padding-inline: 8px;
}
.studio-page-clean .reference-toggle .icon {
  width: 11px;
  height: 11px;
}
.studio-page-clean .reference-toolbar {
  align-items: center;
}
.studio-page-clean .reference-toolbar-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.studio-page-clean .reference-collapse-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #d3d5da;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.studio-page-clean .reference-collapse-icon:hover,
.studio-page-clean .reference-collapse-icon:focus-visible {
  border-color: rgba(197,239,245,.32);
  background: rgba(197,239,245,.12);
  color: #f4feff;
}
.studio-page-clean .reference-collapse-icon .icon {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}
.studio-page-clean .composer-inner,
.studio-page-clean .reference-panel,
.studio-page-clean .references {
  min-width: 0;
  overflow-x: hidden;
}
.studio-page-clean .parameter-tools {
  gap: 8px;
}
.studio-page-clean .tool-button {
  min-height: 30px;
  padding-inline: 7px;
  gap: 5px;
  font-size: 11px;
}
.studio-page-clean .tool-button .icon {
  width: 13px;
  height: 13px;
}
.studio-page-clean .tool-button .small-chevron {
  width: 10px;
  height: 10px;
}
.studio-page-clean .media-tabs [role="tab"] {
  appearance: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.studio-page-clean .media-tabs [role="tab"]:focus,
.studio-page-clean .media-tabs [role="tab"]:focus-visible {
  outline: 0;
  box-shadow: none;
}
.studio-page-clean .model-button {
  max-width: 260px;
}
.studio-page-clean .parameter-combo-button {
  gap: 6px;
}
.studio-page-clean .parameter-divider {
  color: #777d86;
}
.studio-page-clean .composer-actions {
  gap: 7px;
}
.studio-page-clean .clean-cost-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 0;
  font-size: 11px;
}
.studio-page-clean .clean-credit-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #06b6d4;
}
.studio-page-clean .clean-model-option {
  gap: 8px;
  padding: 7px 8px;
}
.studio-page-clean .clean-model-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  flex: 0 0 16px;
  color: #c5eff5;
}
.studio-page-clean .clean-model-icon .icon {
  width: 15px;
  height: 15px;
}
.studio-page-clean .clean-model-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-page-clean[data-task-record-view="true"] .task-feed-card {
  width: min(100%, 1080px);
  max-width: 1080px;
}
.studio-page-clean[data-task-record-view="true"] .task-feed-card article {
  width: 100%;
  max-width: 1080px !important;
}
.studio-page-clean .studio-task-action {
  min-width: 96px;
  min-height: 36px;
  height: 36px;
  padding-inline: 10px;
  font-size: 12px;
}
.studio-page-clean .studio-task-download {
  min-height: 36px;
  height: 36px;
  padding-inline: 10px;
  font-size: 12px;
}
.studio-page-clean:not([data-task-record-view="true"]) .workspace-record-button.is-selected {
  background: transparent;
  color: #aeb2bb;
}
@media (max-width: 800px) {
  .studio-page-clean .parameter-tools {
    gap: 6px;
  }
  .studio-page-clean .tool-button {
    min-height: 32px;
  }
  .studio-page-clean .model-button {
    max-width: none;
  }
  .studio-page-clean[data-task-record-view="true"] .task-feed-card,
  .studio-page-clean[data-task-record-view="true"] .task-feed-card article {
    width: 100%;
    max-width: 100% !important;
  }
}

/* Control popovers follow the clean reference layout: larger, easy-to-scan
   icons, compact model descriptions, and backend-provided option grids. */
.studio-page-clean .upload-trigger {
  flex-basis: 58px;
  width: 58px;
  height: 70px;
}
.studio-page-clean .upload-trigger .stack-card {
  left: 8px;
  top: 3px;
  width: 42px;
  height: 52px;
}
.studio-page-clean .upload-trigger .stack-front {
  gap: 4px;
}
.studio-page-clean .upload-trigger .stack-front .icon {
  width: 22px;
  height: 22px;
}
.studio-page-clean .upload-trigger .stack-front > span {
  font-size: 12px;
  line-height: 15px;
}
.studio-page-clean .tool-button {
  min-height: 34px;
  padding-inline: 8px;
  gap: 6px;
}
.studio-page-clean .tool-button > .icon:not(.small-chevron) {
  width: 18px;
  height: 18px;
}
.studio-page-clean .tool-button .small-chevron {
  width: 11px;
  height: 11px;
}
.studio-page-clean .clean-model-panel {
  width: min(520px, calc(100% - 32px));
  max-height: min(430px, calc(100dvh - 110px));
}
.studio-page-clean .clean-model-list {
  max-height: min(350px, calc(100dvh - 190px));
  gap: 4px;
}
.studio-page-clean .clean-model-option {
  align-items: flex-start;
  min-height: 58px;
  padding: 10px;
  gap: 10px;
}
.studio-page-clean .clean-model-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
}
.studio-page-clean .clean-model-icon .icon {
  width: 19px;
  height: 19px;
}
.studio-page-clean .clean-model-copy {
  gap: 3px;
  padding-top: 1px;
}
.studio-page-clean .clean-model-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.studio-page-clean .clean-model-title-mark {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: #35c7f0;
}
.studio-page-clean .clean-model-copy small {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  color: #a9abb2;
  font-size: 11px;
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.studio-page-clean .clean-model-price {
  align-self: flex-start;
  padding-top: 2px;
  font-size: 11px;
}
.studio-page-clean .clean-parameter-panel {
  width: min(390px, calc(100% - 32px));
  max-height: min(470px, calc(100dvh - 100px));
}
.studio-page-clean .clean-option-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: none;
  overflow: visible;
}
.studio-page-clean .clean-option-section {
  display: grid;
  gap: 8px;
}
.studio-page-clean .clean-option-heading {
  color: #aeb1b8;
  font-size: 11px;
  line-height: 16px;
}
.studio-page-clean .clean-option-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.studio-page-clean .clean-option-grid > button,
.studio-page-clean .clean-size-grid > button,
.studio-page-clean .clean-duration-grid > button {
  display: grid;
  min-width: 0;
  min-height: 42px;
  place-items: center;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: #dedfe3;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.studio-page-clean .clean-option-grid > button:hover,
.studio-page-clean .clean-option-grid > button.selected,
.studio-page-clean .clean-size-grid > button:hover,
.studio-page-clean .clean-size-grid > button.selected,
.studio-page-clean .clean-duration-grid > button:hover,
.studio-page-clean .clean-duration-grid > button.selected {
  border-color: rgba(197, 239, 245, .6);
  background: rgba(197, 239, 245, .13);
  color: #f3feff;
}
.studio-page-clean .clean-option-grid > button:active,
.studio-page-clean .clean-size-grid > button:active,
.studio-page-clean .clean-duration-grid > button:active {
  transform: translateY(1px);
}
.studio-page-clean .clean-ratio-glyph {
  display: block;
  width: 20px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .92;
}
.studio-page-clean .clean-ratio-glyph[data-ratio="9:16"],
.studio-page-clean .clean-ratio-glyph[data-ratio="3:4"] {
  width: 12px;
  height: 19px;
}
.studio-page-clean .clean-ratio-glyph[data-ratio="1:1"] {
  width: 16px;
  height: 16px;
}
.studio-page-clean .clean-ratio-glyph[data-ratio="4:3"] {
  width: 19px;
  height: 14px;
}
.studio-page-clean .clean-option-grid > button {
  gap: 4px;
}
.studio-page-clean .clean-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.studio-page-clean .clean-duration-control {
  display: grid;
  gap: 10px;
}
.studio-page-clean .clean-duration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #aeb1b8;
  font-size: 11px;
}
.studio-page-clean .clean-duration-header output {
  color: #f0f2f4;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.studio-page-clean .clean-duration-header output small {
  margin-left: 2px;
  color: #aeb1b8;
  font-size: 10px;
  font-weight: 500;
}
.studio-page-clean .clean-duration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: 270px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}
@media (max-width: 700px) {
  .studio-page-clean .clean-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .studio-page-clean .clean-model-panel,
  .studio-page-clean .clean-parameter-panel {
    left: 8px;
    width: calc(100% - 16px);
  }
}

/* Parameter layout refinement: the ratio/resolution sets contain three
   choices, so use the full panel width instead of leaving three empty columns.
   On compact workbench widths the model selector stays inline with the
   controls; controls wrap as a group so cost and submit actions remain visible. */
.studio-page-clean .clean-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.studio-page-clean .clean-option-grid > button {
  min-width: 0;
}
@media (max-width: 600px) {
  .studio-page-clean .parameter-tools {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
  }
  .studio-page-clean .tool-button.model-button {
    flex: 0 1 124px;
    flex-basis: 124px;
    width: auto;
    max-width: 124px;
    min-width: 0;
  }
  .studio-page-clean .tool-button.model-button .tool-label {
    min-width: 0;
    max-width: 86px;
  }
}

/* Final local editor guard (2026-10-03).
   Parameter/model popovers are rendered inside the composer so the existing
   click and keyboard logic stays untouched. When one is open, let it escape
   the editor's scroll viewport instead of clipping its title and option rows. */
.studio-page-clean .composer:has(.clean-floating-panel),
.studio-page-clean .composer:has(.clean-floating-panel) .composer-inner {
  overflow: visible !important;
}

.studio-page-clean .clean-model-panel,
.studio-page-clean .clean-parameter-panel {
  z-index: 80;
  max-height: min(520px, calc(100dvh - 92px));
}

/* The clean editor keeps the prompt readable without creating a tall empty
   lower half on the landing view. Expanded mode still owns its larger height. */
.studio-page-clean:not([data-task-record-view="true"]) .prompt-input {
  height: clamp(88px, 10vh, 104px);
}

.studio-page-clean:not([data-task-record-view="true"]) .composer:not(.is-expanded) .prompt-input {
  height: clamp(88px, 10vh, 104px);
}

/* Detail pass (2026-10-03): keep the clean editor's controls legible at the
   same scale as the reference page.  The earlier compact overrides made the
   parameter labels and credit amount too small, and the add-reference glyph
   was visually lost beside the stacked card. */
.studio-page-clean .parameter-tools {
  gap: 9px;
}

.studio-page-clean .parameter-tools .tool-button {
  min-height: 38px;
  padding-inline: 10px;
  gap: 7px;
  font-size: 14px;
  line-height: 1.2;
}

.studio-page-clean .parameter-tools .tool-button > .icon:not(.small-chevron) {
  width: 20px;
  height: 20px;
}

.studio-page-clean .parameter-tools .tool-button .small-chevron {
  width: 12px;
  height: 12px;
}

.studio-page-clean .clean-cost-label {
  gap: 5px;
  font-size: 13px;
  line-height: 1.2;
}

.studio-page-clean .clean-credit-icon,
.studio-page-clean .profile-credit-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #13cfe0;
  stroke-width: 2.2;
}

.studio-page-clean .profile-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.2;
}

/* The reference add control is an actual hit area, so enlarge the glyph
   without changing the surrounding reference-card geometry. */
.studio-page-clean .upload-trigger .stack-front .reference-add-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}

.studio-page-clean .announcement-bell-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.studio-page-clean .announcement-unread-dot {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid #1a1b1d;
  border-radius: 50%;
  background: #f05f63;
  box-shadow: 0 0 0 2px rgba(240, 95, 99, .15), 0 2px 7px rgba(240, 95, 99, .45);
  pointer-events: none;
}

@media (max-width: 800px) {
  .studio-page-clean .parameter-tools {
    gap: 6px;
  }

  .studio-page-clean .parameter-tools .tool-button {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 13px;
  }

  .studio-page-clean .parameter-tools .tool-button > .icon:not(.small-chevron) {
    width: 18px;
    height: 18px;
  }

  .studio-page-clean .clean-cost-label,
  .studio-page-clean .profile-credit {
    font-size: 12px;
  }
}
/* Open controls must escape the editor's scrolling viewport so their title,
   headings, and all option rows remain visible above the toolbar. */
.studio-page-clean .composer:has(.clean-floating-panel),
.studio-page-clean .composer:has(.clean-floating-panel) .composer-inner {
  overflow: visible;
}
/* Keep the open control panel above the toolbar instead of covering its
   model and parameter chips. The compact toolbar is taller after wrapping. */
.studio-page-clean .clean-model-panel,
.studio-page-clean .clean-parameter-panel {
  bottom: 50px;
}
@media (max-width: 600px) {
  .studio-page-clean .clean-model-panel,
  .studio-page-clean .clean-parameter-panel {
    bottom: 86px;
  }
}
/* The parameter panel uses a compact heading so it clears the media tabs
   while leaving a clean gap before the toolbar on narrow screens. */
.studio-page-clean .clean-parameter-panel .clean-floating-title {
  padding: 2px 6px 4px;
}
/* Asset/reference finishing pass (2026-10-04).
   Keep one clear upload action on the library route and make the reference
   strip read as a small stack of real media instead of a row of tiny chips. */
.clean-library-page {
  min-width: 0;
  min-height: 0;
}
.clean-library-page > main {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #586267 transparent;
}
.clean-library-page > main::-webkit-scrollbar { width: 9px; }
.clean-library-page > main::-webkit-scrollbar-track { background: transparent; }
.clean-library-page > main::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #586267;
  background-clip: padding-box;
}
.clean-library-page .library-control-panel .ml-auto { gap: 10px; }
.clean-library-page .library-action-primary {
  min-width: 132px;
  min-height: 44px;
  padding-inline: 18px !important;
  white-space: nowrap;
}
.clean-library-page .library-action-neutral,
.clean-library-page .library-action-danger,
.clean-library-page .library-filter {
  min-height: 40px;
  padding-inline: 13px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}
.clean-library-page .library-card-actions { gap: 10px; }
.clean-library-page .library-card-actions > :is(a, button) {
  min-height: 36px;
  padding-inline: 11px !important;
  border-radius: 10px !important;
}

/* Source switching is a compact category control.  Keep the descriptive
   copy available as a tooltip while the visible hit areas stay content-sized
   and separated instead of rendering as two oversized adjacent cards. */
.clean-library-page .library-source-switcher {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.clean-library-page .library-source-switcher > .library-source-tab {
  box-sizing: border-box;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 124px !important;
  max-width: 188px !important;
  min-height: 46px !important;
  height: 46px;
  gap: 12px;
  overflow: hidden;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}
.clean-library-page .library-source-switcher > .library-source-tab > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.clean-library-page .library-source-switcher > .library-source-tab > span:first-child > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
.clean-library-page .library-source-tab-desc {
  display: none !important;
}
.clean-library-page .library-source-switcher > .library-source-tab > span:last-child {
  flex: 0 0 auto;
  padding: 3px 7px;
  line-height: 18px;
}
.clean-library-page .library-source-switcher + .library-folder-panel {
  margin-top: 2px;
}
.clean-library-page .library-filter,
.clean-library-page .library-action-neutral,
.clean-library-page .library-action-danger,
.clean-library-page .library-action-primary {
  box-sizing: border-box;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clean-library-page .library-filter {
  flex: 0 0 auto;
}
.clean-library-page .library-card-actions {
  min-width: 0;
  gap: 12px !important;
}
.clean-library-page .library-card-actions > :is(a, button) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .clean-library-page .library-source-switcher {
    gap: 10px !important;
  }
  .clean-library-page .library-source-switcher > .library-source-tab {
    min-width: 116px !important;
    max-width: 160px !important;
  }
}

/* Library route viewport fix (2026-10-12).
   Keep the persistent shell and left group rail fixed while the right asset
   column owns the only vertical scroll surface. */
.studio-page-clean-shell[data-embedded-page="true"] .studio-route-content:has(> .clean-library-page) {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page > main {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page .library-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.studio-page-clean .reference-panel {
  position: relative;
  width: min(100%, 360px);
  max-width: min(100%, 360px);
}
.studio-page-clean .references {
  align-items: flex-start;
  gap: 8px;
  min-height: 88px;
  padding: 2px 4px 0 2px;
}
.studio-page-clean .reference-panel[data-expanded="false"] .references {
  flex-wrap: nowrap;
  overflow: visible;
}
.studio-page-clean .asset-item { width: 62px; height: 86px; }
.studio-page-clean .asset-item::before {
  left: 4px;
  width: 54px;
  height: 66px;
  border-radius: 10px;
}
.studio-page-clean .asset-preview {
  width: 58px;
  height: 68px;
  border-radius: 10px;
}
.studio-page-clean .asset-thumb .icon { width: 24px; height: 24px; }
.studio-page-clean .asset-label {
  max-width: 62px;
  margin-top: 2px;
  font-size: 11px;
  line-height: 16px;
}
.studio-page-clean .asset-remove {
  top: -4px;
  right: -3px;
  width: 25px;
  height: 25px;
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item + .asset-item { margin-left: -16px; }
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
  width: 116px;
  height: 86px;
  margin-left: 0;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview { width: 112px; height: 68px; }
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before { width: 108px; height: 66px; }
.studio-page-clean .reference-panel[data-expanded="true"] { width: 100%; max-width: 100%; }
.studio-page-clean .reference-panel[data-expanded="true"] .references { min-height: 0; }
.studio-page-clean .upload-trigger {
  flex: 0 0 72px;
  width: 72px;
  height: 82px;
  margin-left: 2px;
}
.studio-page-clean .upload-trigger .stack-card {
  left: 7px;
  top: 3px;
  width: 58px;
  height: 68px;
  border-radius: 12px;
}
.studio-page-clean .upload-trigger .stack-front { gap: 3px; }
.studio-page-clean .upload-trigger .stack-front .reference-add-icon {
  width: 34px;
  height: 34px;
  stroke-width: 2.25;
}
.studio-page-clean .upload-trigger .stack-front > span { font-size: 13px; line-height: 16px; }
@media (max-width: 600px) {
  .clean-library-page .library-action-primary { min-width: 120px; }
  .studio-page-clean .reference-panel { max-width: 100%; }
  .studio-page-clean .references { gap: 6px; }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item { width: 94px; }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview { width: 90px; }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before { width: 86px; }
}

/* Full viewport notice: keep the image bar above both fixed sidebar and work area. */
.studio-page-clean-shell[data-top-notice-open="true"] > .studio-top-notice {
  z-index: 50;
}

.studio-page-clean-shell[data-top-notice-open="true"] > .sidebar {
  top: 44px;
  height: calc(100dvh - 44px);
}

.studio-page-clean-shell[data-top-notice-open="true"] > .workspace {
  height: calc(100dvh - 44px);
  min-height: calc(100dvh - 44px);
  padding-top: 24px;
}

/* Header notice presentation: use the supplied fixed blue artwork as the
   entire band, with centered copy and only the dismiss control remaining. */
.studio-page-clean .studio-top-notice {
  border: 0;
  border-radius: 0;
  background-color: #102969;
  background-image: url('/studio-clean-assets/top-notice-background.jpg');
  background-position: right center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: none;
}
.studio-page-clean .studio-top-notice::after { display: none; }
.studio-page-clean .studio-top-notice-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 52px;
  text-align: center;
  cursor: default;
}
.studio-page-clean .studio-top-notice-track {
  flex: 0 1 auto;
  max-width: calc(100% - 104px);
  text-align: center;
}
.studio-page-clean .studio-top-notice-text {
  text-align: center;
}
.studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-track {
  flex: 1 1 auto;
  max-width: calc(100% - 104px);
  overflow: hidden;
  text-align: left;
}
.studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-text {
  width: max-content;
  max-width: none;
  overflow: visible;
  text-align: left;
  text-overflow: clip;
  animation: studio-top-notice-marquee var(--studio-notice-duration, 6s) linear infinite alternate;
}
@keyframes studio-top-notice-marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
.studio-page-clean .studio-top-notice-close {
  position: absolute;
  top: 50%;
  right: 12px;
  margin: 0;
  transform: translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-text {
    animation: none;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
  }
}

/* 2026-10-05 compact platform bell in the clean studio shell. */
.studio-page-clean .account-tools .announcement-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
}
.studio-page-clean .account-tools .announcement-button > .announcement-bell-wrap,
.studio-page-clean .account-tools .announcement-button > .icon {
  width: 16px;
  height: 16px;
}
.studio-page-clean .account-tools .announcement-button .announcement-unread-count,
.studio-page-clean .account-tools .announcement-button .announcement-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #1a1b1d;
  border-radius: 999px;
  background: #f05f63;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  box-shadow: 0 0 0 2px rgba(240, 95, 99, .15), 0 2px 7px rgba(240, 95, 99, .45);
  pointer-events: none;
}

/* Center the backend-configured popup without coupling it to the page-top notice. */
.platform-announcement-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vh, 44px) 20px;
  background: rgba(0, 0, 0, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: platform-announcement-fade-in .16s ease-out both;
}
.platform-announcement-panel {
  display: flex;
  width: min(760px, calc(100vw - 40px));
  max-height: min(88dvh, 820px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: #202020;
  color: #f0f1f3;
  box-shadow: 0 30px 100px rgba(0,0,0,.62);
  animation: platform-announcement-panel-in .24s cubic-bezier(.2, .75, .2, 1) both;
}
.platform-announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: #242424;
}
.platform-announcement-header h2 {
  margin: 0;
  color: #f4f5f6;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}
.platform-announcement-header p {
  margin: 6px 0 0;
  color: #aeb1b7;
  font-size: 13px;
  line-height: 1.5;
}
.platform-announcement-header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #aeb1b4;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.platform-announcement-header button:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.platform-announcement-list {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.platform-announcement-card {
  margin: 0 0 12px;
  padding: 16px 18px 17px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: #282828;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.platform-announcement-card:last-child { margin-bottom: 0; }
.platform-announcement-card-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.platform-announcement-card-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(197,239,245,.1);
  color: #b9eef0;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}
.platform-announcement-card-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #f1f2f4;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-announcement-card-meta time {
  color: #969ba3;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.platform-announcement-card-content {
  margin: 10px 0 0;
  color: #c2c3c7;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.platform-announcement-card img {
  display: block;
  width: 100%;
  max-height: 320px;
  margin-top: 12px;
  border-radius: 10px;
  object-fit: cover;
}
.platform-announcement-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid #b7dce4;
  border-radius: 9px;
  color: #2c7787;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.platform-announcement-card a:hover { background: rgba(197,239,245,.1); }
.platform-announcement-empty {
  padding: 48px 24px;
  color: #aeb1b4;
  font-size: 14px;
  text-align: center;
}
@keyframes platform-announcement-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes platform-announcement-panel-in {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .platform-announcement-overlay { padding: 16px 12px; }
  .platform-announcement-panel {
    width: calc(100vw - 24px);
    max-height: min(90dvh, 760px);
    border-radius: 16px;
  }
  .platform-announcement-header { padding: 18px 18px 14px; }
  .platform-announcement-header h2 { font-size: 19px; }
  .platform-announcement-header p { font-size: 12px; }
  .platform-announcement-list { padding: 12px; }
  .platform-announcement-card { padding: 13px 14px 14px; }
  .platform-announcement-card-content { font-size: 13px; }
  .platform-announcement-card img { max-height: 240px; }
  .platform-announcement-card-meta { grid-template-columns: auto minmax(0, 1fr); }
  .platform-announcement-card-meta time { grid-column: 2; }
}

/* Match the reference editor proportions while keeping responsive gutters. */
@media (min-width: 1200px) {
  .studio-page-clean { --editor-width: min(1200px, calc(100vw - 360px)); }
  .studio-page-clean:not([data-task-record-view="true"]) .prompt-input,
  .studio-page-clean:not([data-task-record-view="true"]) .composer:not(.is-expanded) .prompt-input {
    height: clamp(104px, 12vh, 128px);
  }
}


/* 2026-10-05 model/editor completion pass.
   Keep the clean page structure and business hooks, but make every control
   readable at the viewport edges and prevent the editor from painting under
   its toolbar. */
.studio-page-clean .clean-model-panel {
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100% - 24px));
  max-height: min(560px, calc(100dvh - 72px));
  overflow: hidden;
}
.studio-page-clean .clean-model-panel .clean-floating-title {
  flex: 0 0 auto;
  padding: 6px 8px 10px;
}
.studio-page-clean .clean-model-panel .clean-model-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: 0 4px 8px 1px;
}
.studio-page-clean .clean-model-panel .clean-model-option {
  min-height: 68px;
  align-items: flex-start;
  padding: 11px 10px;
}
.studio-page-clean .clean-model-panel .clean-model-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.studio-page-clean .clean-model-panel .clean-model-copy strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.studio-page-clean .clean-model-panel .clean-model-copy small {
  max-height: 48px;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
.studio-page-clean .clean-model-panel .clean-model-price {
  flex: 0 0 auto;
  min-width: max-content;
  padding-top: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Contenteditable must own its scroll area. Without overflow:auto, long
   prompts continue painting into the parameter row below it. */
.studio-page-clean .prompt-row {
  min-height: 0;
  align-items: stretch;
}
.studio-page-clean .studio-prompt-editor {
  box-sizing: border-box;
  min-height: 0;
  max-height: min(42vh, 360px);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overflow-wrap: anywhere;
  padding-bottom: 12px !important;
  scrollbar-gutter: stable;
}
.studio-page-clean .composer-inner {
  row-gap: 20px;
}
.studio-page-clean .composer-toolbar {
  position: relative;
  z-index: 4;
  min-height: 36px;
  padding-top: 3px;
}

/* Collapsed references are a genuine deck of thumbnails. Hover/expand keeps
   the existing readable row behavior. */
.studio-page-clean .reference-panel[data-expanded="false"] .references {
  flex-wrap: nowrap;
  gap: 0;
  overflow: visible;
  padding-left: 8px;
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item {
  width: 56px;
  height: 72px;
  margin-left: 0;
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item + .asset-item {
  margin-left: -24px !important;
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-preview {
  width: 50px;
  height: 58px;
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item:nth-child(odd) .asset-preview {
  transform: rotate(-5deg);
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item:nth-child(even) .asset-preview {
  transform: rotate(5deg);
}
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-label {
  position: relative;
  z-index: 5;
  max-width: 54px;
  font-size: 9px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item + .asset-item {
  margin-left: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger {
  margin-left: 8px;
}

/* Danger actions inherit a light Tailwind ring from the task card. Remove it
   on the dark workbench so delete/cancel controls do not show a white frame. */
.studio-page-clean .studio-task-action[class*="ring-red-100"] {
  border-color: transparent !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}

/* Dark dialog inputs need an explicit text fill because browser autofill and
   the global form theme can otherwise repaint typed names nearly black. */
.studio-page-clean .clean-dialog-field input {
  color: #f5f7f8 !important;
  -webkit-text-fill-color: #f5f7f8 !important;
  caret-color: #c5eff5;
  color-scheme: dark;
}
.studio-page-clean .clean-dialog-field input::placeholder {
  color: #aeb4bd !important;
  -webkit-text-fill-color: #aeb4bd !important;
  opacity: 1;
}

/* One scroll owner per surface keeps wheel/touch input smooth. */
.studio-page-clean .workspace {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
.studio-page-clean .task-feed,
.studio-page-clean .sidebar-scroll,
.studio-page-clean .clean-floating-list,
.studio-page-clean .clean-model-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  .studio-page-clean .clean-model-panel {
    width: calc(100% - 16px);
    max-height: min(520px, calc(100dvh - 76px));
  }
  .studio-page-clean .studio-prompt-editor {
    max-height: min(48vh, 300px);
  }
}

/* 2026-10-05 editor overlap fix.
   Model and parameter menus live beside the toolbar in the clean composer.
   Let them take layout space instead of being positioned against the
   composer-inner bottom, which used to cover the prompt and controls on
   narrow screens. */
.studio-page-clean .composer-controls {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.studio-page-clean .composer-controls .composer-toolbar {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
.studio-page-clean .composer-controls > .clean-model-panel,
.studio-page-clean .composer-controls > .clean-parameter-panel {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  align-self: flex-start;
  width: min(640px, 100%) !important;
  max-width: 100%;
  max-height: min(430px, calc(100dvh - 112px));
  margin: 0;
  overflow: hidden;
  transform: none;
  order: -1;
}
.studio-page-clean .composer-controls > .clean-model-panel .clean-model-list,
.studio-page-clean .composer-controls > .clean-parameter-panel .clean-option-list {
  min-height: 0;
  max-height: min(360px, calc(100dvh - 190px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.studio-page-clean .prompt-mention-chip,
.studio-page-clean [data-prompt-mention-text] {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100% - 8px);
  overflow: hidden;
  vertical-align: middle;
  flex-wrap: wrap;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.studio-page-clean .prompt-mention-token {
  flex: 0 0 auto;
  white-space: nowrap;
}
.studio-page-clean .prompt-mention-name {
  min-width: 0;
  max-width: min(14rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-page-clean .reference-panel[data-expanded="false"] .references {
  min-width: 0;
  max-width: 100%;
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item {
  z-index: calc(1 + var(--stack-index, 0));
}
.studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger {
  z-index: 100 !important;
}
.studio-page-clean .reference-overflow-trigger {
  position: relative;
  z-index: 90;
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  margin-left: -18px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(32,35,38,.96);
  color: #d9f5f7;
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.studio-page-clean .reference-overflow-trigger:hover,
.studio-page-clean .reference-overflow-trigger:focus-visible {
  z-index: 120;
  border-color: rgba(197,239,245,.45);
  background: rgba(58,71,75,.98);
  transform: translateY(-2px);
  outline: none;
}

/* 2026-10-05 final editor containment and reference stack guard.
   The prompt is the only scrolling surface; its grid parents must not become
   a second scroll container or let an inline resize paint into the toolbar. */
.studio-page-clean .composer-inner {
  min-height: 0;
  overflow: visible !important;
}
.studio-page-clean .composer-inner > .prompt-row {
  min-width: 0;
  min-height: 0;
  max-height: 360px;
  overflow: visible !important;
}
.studio-page-clean .studio-prompt-editor {
  box-sizing: border-box;
  min-width: 0;
  min-height: 72px;
  max-height: 360px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.studio-page-clean .reference-panel,
.studio-page-clean .references {
  min-width: 0;
  overflow: visible !important;
}

/* A collapsed reference strip is a real thumbnail deck. Cards keep a fixed
   hit area, overlap by a stable amount, and the upload action stays last. */
.studio-page-clean .reference-panel[data-expanded="false"] .references {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0 !important;
  min-height: 88px;
  width: max-content;
  max-width: none;
  padding: 2px 4px 0 8px;
  overflow: visible !important;
  isolation: isolate;
}
.studio-page-clean .reference-panel[data-expanded="false"] {
  width: max-content;
  max-width: min(360px, 100%);
  overflow: visible !important;
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item {
  position: relative;
  z-index: 1;
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  margin-left: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item + .asset-item {
  margin-left: -26px !important;
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-preview {
  width: 50px;
  height: 58px;
  transform: rotate(-6deg);
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item:nth-of-type(even) .asset-preview {
  transform: rotate(5deg);
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-item:nth-of-type(3n) .asset-preview {
  transform: rotate(-2deg);
}
.studio-page-clean .reference-panel[data-expanded="false"] .asset-label {
  position: relative;
  z-index: 5;
  display: block;
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 14px;
}
.studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger {
  position: relative;
  z-index: 24;
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  margin-left: -26px !important;
}

/* Hover expands the deck for selection while preserving the same panel and
   upload ordering. Leaving the panel returns to the compact stack. */
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
  width: min(360px, 100%);
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px !important;
  padding-left: 2px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] {
  width: min(360px, 100%);
  max-width: 100%;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
  flex-basis: 116px;
  width: 116px;
  height: 86px;
  margin-left: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item + .asset-item {
  margin-left: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
  width: 112px;
  height: 68px;
  transform: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before {
  width: 108px;
  height: 66px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
  flex-basis: 72px;
  width: 72px;
  height: 82px;
  margin-left: 8px !important;
}

@media (max-width: 700px) {
  .studio-page-clean .studio-prompt-editor {
    max-height: 300px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item {
    flex: 0 0 52px !important;
    width: 52px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item + .asset-item {
    margin-left: -22px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 72px;
    margin-left: -22px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
    flex-basis: 64px;
    width: 64px;
    height: 78px;
    margin-left: 6px !important;
  }
}

/* Final precedence for the collapsed thumbnail deck. */
.studio-page-clean .reference-panel[data-expanded="false"] {
  width: fit-content(360px) !important;
  max-width: 100% !important;
}
.studio-page-clean .reference-panel[data-expanded="false"] .references {
  width: fit-content(360px) !important;
  max-width: 100% !important;
}

/* Collapsed reference deck follows the supplied compact-card reference:
   thumbnails share one footprint, the last card sits above the stack, and
   the upload action becomes a small circular add control on the lower-right.
   Hovering the panel still switches to the readable expanded grid above. */
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
  min-height: 104px;
  padding: 2px 4px 0 8px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item {
  flex: 0 0 76px;
  width: 76px;
  height: 96px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item + .asset-item {
  margin-left: -60px !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-preview {
  width: 70px;
  height: 84px;
  border-radius: 9px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item::before {
  left: 4px;
  width: 64px;
  height: 80px;
  border-radius: 9px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="1"]) .asset-item:first-child .asset-preview {
  box-shadow:
    -8px 5px 0 -1px rgba(54,58,61,.92),
    -15px 9px 0 -3px rgba(40,43,46,.82),
    0 8px 18px rgba(0,0,0,.28);
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-label,
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-remove {
  display: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-top: 48px;
  margin-left: -26px !important;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: #3a3d40;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
  overflow: visible;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-card {
  display: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front {
  position: static;
  display: grid;
  width: auto;
  height: auto;
  transform: none !important;
  border: 0;
  background: transparent;
  color: #f1f3f4;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front .reference-add-icon {
  width: 24px;
  height: 24px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front > span {
  display: none;
}
.studio-page-clean .reference-overflow-trigger {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  margin-top: 54px;
  margin-left: -30px;
  border-radius: 50%;
  background: rgba(27,29,31,.94);
  font-size: 10px;
}

/* Hover expansion must not resize the grid's first column.  The prompt keeps
   its original x-position while the readable cards paint over the reserved
   reference area, matching the supplied spread-out reference interaction. */
.studio-page-clean .reference-panel[data-expanded="false"] {
  width: 176px !important;
  min-width: 176px;
  max-width: 176px !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 30;
  display: flex;
  width: min(360px, calc(100vw - var(--sidebar-width, 240px) - 32px));
  max-width: none;
  min-height: 104px;
  padding: 2px 4px 0 2px;
  background: transparent;
  overflow: visible !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger {
  display: none;
}
@media (max-width: 700px) {
  .studio-page-clean .reference-panel[data-expanded="false"] {
    width: 136px !important;
    min-width: 136px;
    max-width: 136px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
    width: min(300px, calc(100vw - 28px));
  }
}

/* Manual expand is the full reference view shown in the supplied reference:
   the toolbar stays above the assets, every image/video/audio card is visible,
   and the prompt is rendered below the asset row without losing its text. */
.studio-page-clean .reference-panel[data-expanded="true"] {
  width: 100% !important;
  max-width: none !important;
  gap: 10px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar {
  width: 100%;
  min-height: 30px;
  padding: 0 2px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-filters {
  gap: 18px;
  overflow: visible;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-filter {
  min-height: 28px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #e8eaed;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-filter:hover:not(:disabled),
.studio-page-clean .reference-panel[data-expanded="true"] .reference-filter[aria-pressed="true"] {
  background: transparent;
  color: #fff;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-filter span {
  color: #aeb3b9;
  font-variant-numeric: tabular-nums;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions {
  gap: 8px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .reference-clear {
  min-height: 28px;
  padding-inline: 8px;
  font-size: 12px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .references {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;
  padding: 0 2px 4px;
  overflow: visible !important;
}
.studio-page-clean .reference-panel[data-expanded="true"] .asset-item {
  flex: 0 0 98px;
  width: 98px;
  height: 120px;
  margin: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="true"] .asset-item::before {
  left: 4px;
  width: 90px;
  height: 92px;
  border-radius: 11px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .asset-preview {
  width: 94px;
  height: 96px;
  border-radius: 11px;
  transform: none !important;
}
.studio-page-clean .reference-panel .asset-preview .asset-thumb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.studio-page-clean .reference-panel .asset-preview .asset-thumb img,
.studio-page-clean .reference-panel .asset-preview .asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.studio-page-clean .reference-panel[data-expanded="true"] .asset-label {
  max-width: 96px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .asset-remove {
  top: -5px;
  right: -4px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger {
  flex: 0 0 98px;
  width: 98px;
  height: 112px;
  margin: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger .stack-card {
  left: 8px;
  top: 4px;
  width: 82px;
  height: 96px;
  border-radius: 12px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger .stack-front {
  gap: 5px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger .stack-front .reference-add-icon {
  width: 36px;
  height: 36px;
}
.studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger .stack-front > span {
  font-size: 13px;
  line-height: 18px;
}

/* Desktop files can be dropped directly onto the reference strip. The
   prompt and parameter columns keep their geometry while only this surface
   receives the drop affordance. */
.studio-page-clean .reference-panel[data-drag-active="true"] {
  outline: 1px solid rgba(148, 216, 212, .78);
  outline-offset: 4px;
  background: rgba(119, 195, 191, .08);
  border-radius: 16px;
}
.studio-page-clean .reference-panel[data-drag-active="true"]::after {
  content: "松开以上传素材";
  position: absolute;
  inset: 6px 10px auto auto;
  pointer-events: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 34, 42, .92);
  color: rgba(231, 252, 249, .95);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .02em;
}
@media (max-width: 700px) {
  .studio-page-clean .reference-panel[data-expanded="true"] .reference-filters {
    gap: 10px;
    flex-wrap: wrap;
  }
  .studio-page-clean .reference-panel[data-expanded="true"] .reference-filter {
    font-size: 13px;
  }
  .studio-page-clean .reference-panel[data-expanded="true"] .asset-item {
    flex-basis: 84px;
    width: 84px;
    height: 106px;
  }
  .studio-page-clean .reference-panel[data-expanded="true"] .asset-preview {
    width: 80px;
    height: 82px;
  }
  .studio-page-clean .reference-panel[data-expanded="true"] .asset-item::before {
    width: 76px;
    height: 78px;
  }
  .studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger {
    flex-basis: 84px;
    width: 84px;
    height: 98px;
  }
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="false"][data-count]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]
    ) > .prompt-row {
    width: 100%;
    justify-self: stretch;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])
    ) .reference-panel[data-hovered="true"] .references {
    width: 100%;
    max-width: 100%;
  }
}

/* Final compact interaction from the supplied reference:
   collapsed cards stay hidden behind the first preview; hovering reveals only
   the first preview, a dedicated expand card, and the add-material card.
   The prompt column keeps its reserved width while this row paints over it. */
.studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .reference-overflow-trigger {
  display: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: min(360px, calc(100vw - var(--sidebar-width, 240px) - 32px)) !important;
  max-width: none !important;
  min-height: 112px;
  padding: 2px 4px 0 2px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
  flex: 0 0 104px !important;
  width: 104px !important;
  height: 112px !important;
  margin: 0 !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
  width: 98px !important;
  height: 94px !important;
  border-radius: 11px;
  transform: rotate(-3deg) !important;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before {
  left: 4px;
  width: 92px;
  height: 90px;
  border-radius: 11px;
  transform: rotate(4deg);
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-label,
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-remove {
  display: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger {
  position: relative;
  z-index: 90;
  display: grid;
  flex: 0 0 92px;
  width: 92px;
  height: 100px;
  margin: 0 0 0 -28px !important;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #222527;
  box-shadow: 0 12px 24px rgba(0,0,0,.32);
  color: #eff2f3;
  transform: rotate(-5deg);
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger:hover,
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger:focus-visible {
  border-color: rgba(197,239,245,.5);
  background: #30383a;
  transform: translateY(-2px) rotate(-2deg);
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger .reference-expand-icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
  position: relative;
  z-index: 100;
  display: grid;
  flex: 0 0 86px;
  width: 86px;
  height: 100px;
  margin: 0 0 0 -26px !important;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #3a3d40;
  box-shadow: 0 12px 24px rgba(0,0,0,.32);
  overflow: visible;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-card {
  display: none;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front {
  position: static;
  display: grid;
  width: auto;
  height: auto;
  transform: none !important;
  border: 0;
  background: transparent;
  color: #f5f6f7;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front .reference-add-icon {
  width: 34px;
  height: 34px;
}
.studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front > span {
  font-size: 12px;
  line-height: 16px;
}
@media (max-width: 700px) {
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
    width: min(300px, calc(100vw - 28px)) !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
    flex-basis: 88px !important;
    width: 88px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
    width: 82px !important;
    height: 86px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger {
    flex-basis: 78px;
    width: 78px;
    height: 92px;
  }
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
    flex-basis: 74px;
    width: 74px;
    height: 92px;
  }
}
@media (hover: none) {
  .studio-page-clean .reference-panel[data-expanded="false"] {
    width: 136px !important;
    min-width: 136px;
    max-width: 136px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .references {
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 30;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: none !important;
    min-height: 104px;
    padding: 2px 4px 0 2px;
    overflow: visible !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .asset-item {
    flex: 0 0 88px !important;
    width: 88px !important;
    height: 100px !important;
    margin: 0 !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .asset-preview {
    width: 82px !important;
    height: 86px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .asset-label,
  .studio-page-clean .reference-panel[data-expanded="false"] .asset-remove {
    display: none;
  }
  .studio-page-clean .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .reference-overflow-trigger {
    display: grid !important;
    flex: 0 0 78px;
    width: 78px;
    height: 92px;
    margin: 0 0 0 -24px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger {
    display: grid;
    flex: 0 0 74px;
    width: 74px;
    height: 92px;
    margin: 0 0 0 -22px !important;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger .stack-card {
    display: none;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger .stack-front {
    position: static;
    display: grid;
    width: auto;
    height: auto;
    transform: none !important;
    border: 0;
    background: transparent;
    color: #f5f6f7;
  }
  .studio-page-clean .reference-panel[data-expanded="false"] .upload-trigger .stack-front > span {
    display: block;
    font-size: 11px;
    line-height: 15px;
  }
}

/* 2026-10-05 official editor form.
   The supplied reference keeps the prompt across the top of the editor and
   the parameter bar at the bottom. In the compact state the reference deck
   overlays the left side of that prompt area; only an explicit expand action
   changes the flow and adds the full material row. */
@media (min-width: 701px) {
  .studio-page-clean .composer-inner,
  .studio-page-clean .composer.is-reference-expanded .composer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: start;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    height: 88px;
    min-height: 88px;
    max-height: 88px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 4;
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
    align-self: start;
    box-sizing: border-box;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])
    ) > .prompt-row {
    padding-left: 86px;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="true"]
    ) > .prompt-row {
    grid-row: 2;
    padding-left: 0;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .references {
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 30;
    display: flex;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 0 !important;
    width: 222px !important;
    max-width: none !important;
    min-height: 80px;
    padding: 0 2px;
    overflow: visible !important;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 78px !important;
    margin: 0 !important;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
    width: 58px !important;
    height: 66px !important;
    border-radius: 9px;
    transform: rotate(-2deg) !important;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before {
    left: 3px;
    width: 54px;
    height: 62px;
    border-radius: 9px;
    transform: rotate(3deg);
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-label,
  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .asset-remove {
    display: none;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger {
    position: relative;
    z-index: 40;
    display: grid !important;
    flex: 0 0 50px;
    width: 50px;
    height: 68px;
    margin: 0 0 0 -12px !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: #292d30;
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
    color: #eef4f5;
    transform: rotate(-4deg);
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger .reference-expand-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
    position: relative;
    z-index: 50;
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    height: 68px;
    margin: 0 0 0 -10px !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: #3a3e41;
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
    overflow: visible;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-card {
    display: none;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front {
    position: static;
    display: grid;
    width: auto;
    height: auto;
    gap: 2px;
    transform: none !important;
    border: 0;
    background: transparent;
    color: #f5f7f8;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front .reference-add-icon {
    width: 27px;
    height: 27px;
  }

  .studio-page-clean .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front > span {
    display: block;
    font-size: 10px;
    line-height: 14px;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .references {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px;
    padding: 0 2px 4px;
    overflow: visible !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .asset-item {
    flex: 0 0 64px;
    width: 64px;
    height: 82px;
    margin: 0 !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .asset-preview {
    width: 58px;
    height: 66px;
    border-radius: 9px;
    transform: none !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .asset-item::before {
    left: 3px;
    width: 54px;
    height: 62px;
    border-radius: 9px;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .asset-label {
    max-width: 62px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 14px;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger {
    flex: 0 0 64px;
    width: 64px;
    height: 76px;
    margin: 0 !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .upload-trigger .stack-card {
    left: 5px;
    top: 3px;
    width: 54px;
    height: 66px;
  }
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner,
  .studio-page-clean .composer.is-reference-expanded .composer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: 84px;
    min-height: 84px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    justify-self: stretch;
    box-sizing: border-box;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])
    ) > .prompt-row {
    padding-left: 74px;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="true"]
    ) > .prompt-row {
    grid-row: 2;
    padding-left: 0;
  }
}

/* 2026-10-05 three-part composer layout.
   Keep the existing editor DOM and handlers, but give the workbench the three
   visual regions from the supplied reference: references on the left, the
   prompt on the right, and parameters across the bottom. */
@media (min-width: 701px) {
  .studio-page-clean .composer-inner,
  .studio-page-clean .composer.is-reference-expanded .composer-inner {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-rows: minmax(108px, auto) auto auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    align-items: stretch;
    padding: 14px 16px 12px !important;
  }

  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]),
  .studio-page-clean .composer.is-reference-expanded .composer-inner:has(.reference-panel[data-expanded="true"]) {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
  }

.studio-page-clean .composer-inner > .reference-panel,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"],
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 92px;
    height: auto;
    padding-left: 18px;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .references {
    width: max-content !important;
    max-width: none !important;
    min-height: 82px;
    padding: 5px 2px 0 14px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 66px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-preview {
    width: 46px !important;
    height: 56px !important;
    border-radius: 9px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item::before {
    left: 3px;
    width: 42px;
    height: 54px;
    border-radius: 9px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item + .asset-item {
    margin-left: -22px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 66px !important;
    margin-left: -18px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .references {
    width: max-content !important;
    min-height: 86px;
    padding-left: 14px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 72px !important;
    margin-left: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
    width: 54px !important;
    height: 60px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item::before {
    width: 50px;
    height: 58px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    min-height: 108px;
    padding-left: 8px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .reference-toolbar {
    width: 100%;
    min-width: 0;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    max-height: 142px;
    padding: 3px 0 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 88px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-preview {
    width: 66px !important;
    height: 68px !important;
    border-radius: 9px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item::before {
    width: 62px;
    height: 64px;
    border-radius: 9px;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 3;
    align-self: stretch;
    justify-self: stretch;
    width: 100% !important;
    min-width: 0;
    min-height: 92px;
    max-height: none;
    padding: 2px 0 0 !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .studio-prompt-editor {
    width: 100%;
    min-height: 92px;
    max-height: min(36vh, 300px) !important;
    padding: 2px 8px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .clean-prompt-placeholder {
    left: 0;
    right: 8px;
    top: 3px;
  }

  .studio-page-clean .composer-inner > .clean-upload-progress,
  .studio-page-clean .composer-inner > .composer-controls {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }

  .studio-page-clean .composer-inner > .clean-upload-progress {
    grid-row: 2 !important;
    padding-top: 0;
  }

  .studio-page-clean .composer-inner > .composer-controls {
    grid-row: 3 !important;
    align-self: end;
    margin-top: 0;
    padding-top: 2px;
  }

  .studio-page-clean .composer-inner:not(:has(.clean-upload-progress)) > .composer-controls {
    grid-row: 2 !important;
  }
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner,
  .studio-page-clean .composer.is-reference-expanded .composer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 10px !important;
    padding: 12px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"],
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px;
    padding-left: 14px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .references {
    padding-left: 10px !important;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .studio-prompt-editor {
    min-height: 96px;
    max-height: min(48vh, 300px) !important;
  }

  .studio-page-clean .composer-inner > .clean-upload-progress {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .studio-page-clean .composer-inner > .composer-controls {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}

/* Keep the asset picker fully inside the viewport. It opens below the prompt
   area and owns a bounded, touch-friendly scroll list instead of being clipped
   above the editor on shorter screens. */
.studio-page-clean .clean-asset-panel {
  z-index: 120 !important;
  top: calc(100% + 10px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: flex;
  flex-direction: column;
  width: min(460px, calc(100vw - 72px));
  max-width: calc(100vw - 72px);
  max-height: min(420px, calc(100dvh - 340px));
  min-height: 180px;
}

.studio-page-clean .clean-asset-panel .clean-floating-title,
.studio-page-clean .clean-asset-panel .clean-folder-row,
.studio-page-clean .clean-asset-panel .clean-load-more {
  flex: 0 0 auto;
}

.studio-page-clean .clean-asset-panel .clean-floating-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  .studio-page-clean .clean-asset-panel {
    top: calc(100% + 8px) !important;
    left: -8px !important;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(360px, calc(100dvh - 300px));
  }
}

@media (max-height: 700px) {
  .studio-page-clean .clean-asset-panel {
    max-height: min(320px, calc(100dvh - 280px));
  }
}

/* 2026-10-05 reference boundary and picker placement.
   The compact reference deck is allowed to overlap to the right, but its
   first card and the empty-state upload card must stay inside the editor's
   left edge. The asset picker is a below-editor list with its own scroll
   owner, so a long library cannot be clipped by the prompt row. */
.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] {
  box-sizing: border-box;
  overflow: visible !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .references {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger {
  margin-left: 0 !important;
  transform: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]) .references {
  padding-left: 18px !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]) .asset-item:first-child .asset-preview {
  transform-origin: center center;
}

.studio-page-clean .clean-asset-panel {
  position: absolute !important;
  inset: auto auto auto 0 !important;
  z-index: 120 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  width: min(460px, calc(100vw - 72px)) !important;
  max-width: calc(100vw - 72px) !important;
  min-height: 180px;
  max-height: min(420px, calc(100dvh - 24px)) !important;
  overflow: hidden !important;
}

.studio-page-clean .clean-asset-panel .clean-floating-list {
  min-width: 0;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.studio-page-clean .clean-asset-panel .clean-floating-option {
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger {
    margin-left: 0 !important;
  }

  .studio-page-clean .clean-asset-panel {
    left: 0 !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(420px, calc(100dvh - 24px)) !important;
  }
}

/* Match the three supplied reference states. This block intentionally sits at
   the end of the file so older editor-layout experiments cannot override it. */
@media (min-width: 701px) {
  /* Normal and hover states share one full-width prompt row. The reference
     deck overlays its left edge and never pushes the prompt or controls. */
  .studio-page-clean .composer-inner {
    position: relative;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(92px, auto) auto auto !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding: 12px 16px 12px !important;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    grid-column: 1 !important;
    grid-row: 1 !important;
    z-index: 3;
    width: 100% !important;
    min-width: 0;
    min-height: 92px;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])
    ) > .prompt-row {
    padding-left: 76px !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .studio-prompt-editor {
    min-width: 0;
    min-height: 72px;
    max-height: min(42vh, 360px) !important;
    padding: 2px 8px 10px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .clean-prompt-placeholder {
    left: 0;
    right: 8px;
    top: 3px;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])
    ) > .prompt-row .clean-prompt-placeholder {
    left: 76px;
  }

  /* Collapsed deck stays over the prompt and inside the composer boundary. */
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] {
    position: absolute !important;
    top: 8px !important;
    left: 2px !important;
    z-index: 12;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .references {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 0 !important;
    width: 84px !important;
    min-height: 82px;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Normal: one small preview and a circular add action. */
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 72px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-preview {
    width: 50px !important;
    height: 58px !important;
    border-radius: 8px;
    transform: rotate(-5deg) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-label,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-remove,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .reference-overflow-trigger {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    display: grid !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 40px 0 0 -16px !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: #3a3d40;
    box-shadow: 0 5px 14px rgba(0,0,0,.35);
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-card,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front > span {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front {
    position: static;
    display: grid;
    width: auto;
    height: auto;
    transform: none !important;
    border: 0;
    background: transparent;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .reference-add-icon {
    width: 20px;
    height: 20px;
  }

  /* Hover: only the first preview, expand card and add card are visible. */
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .references {
    width: 224px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-item {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 78px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-preview {
    width: 58px !important;
    height: 66px !important;
    border-radius: 9px;
    transform: rotate(-2deg) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-label,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .asset-remove {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .reference-overflow-trigger {
    display: grid !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 68px !important;
    margin: 0 0 0 -12px !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: #292d30;
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
    transform: rotate(-4deg);
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .reference-expand-icon {
    width: 22px;
    height: 22px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
    display: grid !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 68px !important;
    margin: 0 0 0 -10px !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: #3a3e41;
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-card {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front {
    position: static;
    display: grid;
    width: auto;
    height: auto;
    gap: 2px;
    transform: none !important;
    border: 0;
    background: transparent;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .reference-add-icon {
    width: 27px;
    height: 27px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front > span {
    display: block;
    font-size: 10px;
    line-height: 14px;
  }

  /* Expanded: toolbar and complete thumbnail list above the prompt. */
  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(72px, auto) auto auto !important;
    row-gap: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 4;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 4px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px;
    max-height: 96px;
    padding: 0 2px 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 64px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-preview {
    width: 46px !important;
    height: 52px !important;
    border-radius: 7px;
    transform: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-label {
    max-width: 52px;
    margin-top: 2px;
    font-size: 9px;
    line-height: 12px;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .upload-trigger {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 64px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .prompt-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 72px;
    padding: 0 !important;
  }

  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .prompt-row .studio-prompt-editor {
    min-height: 72px;
    padding-left: 0 !important;
  }

  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .prompt-row .clean-prompt-placeholder {
    left: 0;
  }

  .studio-page-clean .composer-inner > .composer-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-top: 2px;
  }

  .studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .composer-controls {
    grid-row: 3 !important;
  }

  .studio-page-clean .composer-inner:has(.clean-upload-progress) > .composer-controls {
    grid-row: 4 !important;
  }
}

/* Final interaction correction: collapsed cards stay in their own left
   column; only the hovered state becomes an overlay deck. */
@media (min-width: 701px) {
  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: minmax(92px, auto) auto auto !important;
    column-gap: 12px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    z-index: 2;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) > .prompt-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-left: 0 !important;
    z-index: 3;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) > .prompt-row .clean-prompt-placeholder {
    left: 0 !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"])
    ) > .prompt-row {
    padding-left: 0 !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"])
    ) > .prompt-row .clean-prompt-placeholder {
    left: 0 !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) > .composer-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item::before {
    background: #3a3d40 !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.24) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-preview {
    background: #303438 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.28) !important;
  }

  /* Legacy rules marked the stack-front as a hidden stack-card. Restore the
     actual plus/参考 control in both compact and hover states. */
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger .stack-front {
    display: grid !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] {
    position: absolute !important;
    top: 8px !important;
    left: 2px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    z-index: 12;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(92px, auto) auto auto !important;
    column-gap: 0 !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-left: 76px !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row .clean-prompt-placeholder {
    left: 76px !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .composer-controls {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger .stack-front {
    display: grid !important;
  }
}

/* Popovers are controls, not composer content. Keep them out of the grid so
   opening a model/parameter menu never changes editor height. */
.studio-page-clean .composer-controls {
  position: relative !important;
  overflow: visible !important;
}

.studio-page-clean .composer-controls > .clean-model-panel,
.studio-page-clean .composer-controls > .clean-parameter-panel {
  position: absolute !important;
  z-index: 160 !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column;
  width: min(640px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: min(430px, calc(100dvh - 150px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  order: initial !important;
}

.studio-page-clean .composer-controls > .clean-model-panel .clean-model-list,
.studio-page-clean .composer-controls > .clean-parameter-panel .clean-option-list {
  min-height: 0;
  max-height: min(350px, calc(100dvh - 220px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.studio-page-clean .composer-controls > .clean-model-panel {
  left: 0 !important;
}

.studio-page-clean .composer-controls > .clean-parameter-panel {
  left: 0 !important;
  width: min(520px, calc(100vw - 48px)) !important;
}

.studio-page-clean .composer-controls > .clean-asset-panel,
.studio-page-clean .composer-controls > .clean-mention-panel {
  position: absolute !important;
  z-index: 150 !important;
  top: calc(100% + 10px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column;
  width: min(460px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: min(420px, calc(100dvh - 220px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

.studio-page-clean .composer-controls > .clean-asset-panel .clean-floating-list,
.studio-page-clean .composer-controls > .clean-mention-panel .clean-floating-list {
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  .studio-page-clean .composer-controls > .clean-model-panel,
  .studio-page-clean .composer-controls > .clean-parameter-panel {
    right: 0 !important;
    left: auto !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    bottom: calc(100% + 8px) !important;
  }

  .studio-page-clean .composer-controls > .clean-asset-panel,
  .studio-page-clean .composer-controls > .clean-mention-panel {
    right: 0 !important;
    left: auto !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    top: calc(100% + 8px) !important;
  }
}

/* 2026-10-05 final compact reference cleanup.
   The normal state contains one real preview and one add affordance. The
   staggered back card is reserved for the hover deck; it must not read as a
   second black thumbnail behind the lead image while the prompt is idle. */
.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-preview {
  background: transparent !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger .stack-card {
  display: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger .stack-front {
  display: grid !important;
  place-items: center;
  background: transparent !important;
  color: #fff !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger .reference-add-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  stroke: currentColor !important;
}

@media (min-width: 701px) {
  /* Reserve enough horizontal space for the compact preview and add button.
     This keeps the prompt column visibly separate even when the preview is
     rotated by an older rule or the browser paints fractional pixels. */
  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) {
    position: relative !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .references {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding: 0 0 0 4px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-item {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 72px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .asset-preview {
    width: 50px !important;
    height: 58px !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 26px 0 0 6px !important;
    place-items: center;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"]:not([data-hovered="true"]) .upload-trigger {
    margin-left: 0 !important;
  }
}

/* Absolute final overrides (2026-10-05).
   These rules intentionally remain last: earlier clean-layout passes contain
   legacy compact widths and vertical reference scrolling. */
.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 78px !important;
  height: 78px !important;
  max-height: 78px !important;
  padding: 0 4px 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 70px !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-preview {
  width: 52px !important;
  height: 58px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item::before {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-label {
  max-width: 56px !important;
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 12px !important;
}

.studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .prompt-row {
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

.studio-page-clean .composer-inner:has(.reference-panel[data-expanded="true"]) > .prompt-row .studio-prompt-editor {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (min-width: 701px) {
  /* Keep one reserved reference column in both idle and hover states.
     Hover only fans cards out inside this column; the prompt never shifts. */
  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"]:not([data-hovered="true"])
    ) {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] {
    left: 2px !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row .clean-prompt-placeholder {
    left: 0 !important;
    right: 8px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item:first-child {
    position: relative !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    position: absolute !important;
    z-index: 30 !important;
    top: 34px !important;
    left: 42px !important;
    flex: none !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #111 !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
    position: relative !important;
    overflow: visible !important;
  }

  /* The toolbar has separate left/right groups. Reserve one row so the clear
     action cannot sit on top of the filter/category count. */
  .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 38px !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-filters {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 16px !important;
    white-space: nowrap !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-clear {
    position: static !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    row-gap: 10px !important;
  }
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item:first-child {
    position: relative !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    position: absolute !important;
    z-index: 30 !important;
    top: 34px !important;
    left: 42px !important;
    flex: none !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #111 !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
    position: relative !important;
    overflow: visible !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-height: 54px !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-filters {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }

  .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-left: auto !important;
  }
}
@media (min-width: 701px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .references {
    width: 64px !important;
    min-width: 64px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger {
    display: grid !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 64px !important;
    margin: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 10px !important;
    background: #23272a !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger .stack-card {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger .stack-front {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger .reference-add-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count="0"] .upload-trigger .stack-front > span {
    display: block !important;
    color: #f4f6f7 !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-preview,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item::before,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front {
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item::before {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-preview {
    box-shadow: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 26px 0 0 6px !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 50% !important;
    background: #111 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.35) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-card,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front > span {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front {
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .reference-add-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    stroke: currentColor !important;
  }
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* Mobile compact references use the same stable card footprint as desktop.
   Removing the old mobile rotation/oversize rules keeps the upload affordance
   attached to the visible lead thumbnail without changing the prompt row. */
@media (max-width: 700px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    height: 82px !important;
    max-height: 82px !important;
    padding: 2px 4px 0 18px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item {
    position: relative !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item + .asset-item {
    margin-left: -22px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-preview {
    width: 50px !important;
    height: 58px !important;
    border-radius: 8px !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-item::before {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-label,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .asset-remove,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .reference-overflow-trigger {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    position: absolute !important;
    z-index: 30 !important;
    top: 26px !important;
    left: 34px !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 50% !important;
    background: #111 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.35) !important;
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-card,
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front > span {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .stack-front {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    transform: none !important;
    transition: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger .reference-add-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    stroke: currentColor !important;
    transform: none !important;
  }
}

/* 2026-10-05 final reference/prompt alignment.
   Hovering the compact reference deck must only fan the cards out inside the
   reserved left column. The prompt column keeps the same origin and width in
   both states. */
@media (min-width: 701px) {
  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row .studio-prompt-editor {
    margin-left: 0 !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner:has(
      .reference-panel[data-expanded="false"][data-hovered="true"]
    ) > .prompt-row .clean-prompt-placeholder {
    left: 0 !important;
    right: 8px !important;
  }

  /* The add affordance is anchored to the lower-right edge of the lead
     thumbnail, matching the supplied reference image. */
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
    position: relative !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    position: absolute !important;
    left: 34px !important;
    top: 24px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }
}

/* Keep the expanded reference strip horizontal. Give the thumbnails breathing
   room above and below without changing prompt typography or introducing a
   vertical scroll owner. */
.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 10px 8px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  transform: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-preview {
  width: 52px !important;
  height: 54px !important;
  box-shadow: none !important;
  transform: none !important;
}

.studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-label {
  margin-top: 3px !important;
  line-height: 11px !important;
}

/* Keep the clear action in its own toolbar lane so it never covers the
   reference count or filter pills at narrower widths. */
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.studio-page-clean .reference-panel[data-expanded="true"] .reference-filters {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none;
}

.studio-page-clean .reference-panel[data-expanded="true"] .reference-filters::-webkit-scrollbar {
  display: none;
}

.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

.studio-page-clean .reference-panel[data-expanded="true"] .reference-clear {
  position: static !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* The asset-library popover owns vertical scrolling; separate rows so
   thumbnails and labels do not touch each other. */
.studio-page-clean .clean-asset-panel .clean-floating-list {
  gap: 8px !important;
  padding: 2px 2px 8px !important;
}

.studio-page-clean .clean-asset-panel .clean-floating-option {
  min-height: 52px !important;
  padding: 9px 10px !important;
}

@media (max-width: 700px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .references {
    position: relative !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"]):not([data-hovered="true"]) .upload-trigger {
    left: 34px !important;
    top: 24px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }
}

/* The older count-based rule is intentionally kept for the idle deck, but it
   must not win while the deck is hovered. IDs make this final state explicit
   in the cascade and keep the prompt origin stable. */
@media (min-width: 701px) {
  .studio-page-clean #composerBody:has(
      > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])[data-hovered="true"]
    ) > #promptRow {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }

  .studio-page-clean #composerBody:has(
      > .reference-panel[data-expanded="false"][data-count]:not([data-count="0"])[data-hovered="true"]
    ) > #promptRow .clean-prompt-placeholder {
    left: 0 !important;
    right: 8px !important;
  }
}


/* 2026-10-05 mobile reference deck final: keep prompt geometry stable,
   anchor the add control to the first thumbnail, and keep the expanded deck
   as a horizontal strip with breathing room. */
@media (max-width: 700px) {
  .studio-page-clean .composer-inner {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .references {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 104px !important;
    padding: 4px 4px 8px 4px !important;
    overflow: visible !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 92px !important;
    min-height: 92px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item + .asset-item {
    margin-left: -60px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-preview {
    width: 70px !important;
    height: 84px !important;
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.24) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .asset-item::before {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger {
    position: absolute !important;
    z-index: 60 !important;
    left: 38px !important;
    top: 48px !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 50% !important;
    background: #3a3d40 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.35) !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger .stack-card {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger .stack-front {
    position: static !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger .stack-front .reference-add-icon {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger .stack-front > span {
    display: none !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .reference-overflow-trigger {
    position: absolute !important;
    z-index: 65 !important;
    left: 76px !important;
    top: 42px !important;
    display: grid !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    place-items: center !important;
    border-radius: 12px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .reference-overflow-trigger .reference-expand-icon {
    width: 25px !important;
    height: 25px !important;
  }

  .studio-page-clean .composer-inner > .prompt-row {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .prompt-row .studio-prompt-editor {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 10px 8px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-gutter: stable !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-item {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .asset-preview {
    width: 52px !important;
    height: 48px !important;
    box-shadow: none !important;
    transform: none !important;
  }
}


/* 2026-10-05 reference toolbar obstruction final */
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar { position: relative !important; z-index: 140 !important; min-height: 42px !important; padding-right: 4px !important; overflow: visible !important; }
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions { position: relative !important; z-index: 150 !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; gap: 8px !important; margin-left: auto !important; padding-left: 8px !important; background: #1d1f20 !important; }
.studio-page-clean .reference-panel[data-expanded="true"] .reference-clear { position: relative !important; z-index: 151 !important; white-space: nowrap !important; }
.studio-page-clean .reference-panel[data-expanded="true"] .reference-collapse-icon { position: relative !important; z-index: 152 !important; display: grid !important; flex: 0 0 28px !important; width: 28px !important; height: 28px !important; margin: 0 !important; place-items: center !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 7px !important; background: #2b2e30 !important; color: #e9eef0 !important; overflow: hidden !important; }
.studio-page-clean .reference-panel[data-expanded="true"] .reference-collapse-icon .icon { width: 17px !important; height: 17px !important; transform: rotate(180deg) !important; }
@media (max-width: 700px) { .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar { min-height: 44px !important; padding-inline: 6px !important; } .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions { gap: 6px !important; padding-left: 6px !important; } .studio-page-clean .reference-panel[data-expanded="true"] .reference-clear { max-width: 112px !important; overflow: hidden !important; text-overflow: ellipsis !important; } }

/* 2026-10-05 expanded reference layout: full-width media row, stable prompt. */
@media (min-width: 701px) {
  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] {
    position: relative !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(32vh, 210px) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }

  .studio-page-clean .composer-inner > .reference-panel[data-expanded="true"] .references {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: min(25vh, 156px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }

  .studio-page-clean .composer-inner > .prompt-row,
  .studio-page-clean .composer-inner:has(> .reference-panel[data-expanded="true"]) > .prompt-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Keep every clean floating list inside the visible viewport. */
.studio-page-clean .clean-floating-panel {
  max-height: min(70vh, 520px) !important;
  overflow: hidden !important;
}
.studio-page-clean .clean-floating-panel .clean-floating-list,
.studio-page-clean .clean-floating-panel .clean-option-list {
  max-height: min(58vh, 420px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* The expanded reference toolbar must stay above the scrolling media strip. */
.studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar {
  position: relative !important;
  z-index: 200 !important;
}

/* 2026-10-05 diagonal collapse control and viewport-aware pickers */
.studio-page-clean .reference-collapse-diagonal-icon {
  width: 17px !important;
  height: 17px !important;
  transform: rotate(45deg) !important;
  stroke-width: 1.8 !important;
}
.studio-page-clean .clean-mention-panel,
.studio-page-clean .clean-asset-panel {
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  max-height: min(66vh, 520px) !important;
  overflow: hidden !important;
}
.studio-page-clean .clean-mention-panel .clean-floating-list,
.studio-page-clean .clean-asset-panel .clean-floating-list {
  max-height: min(52vh, 360px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
.studio-page-clean .reference-panel[data-expanded="true"] .references {
  max-height: min(30vh, 190px) !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

.studio-page-clean .clean-model-copy strong{display:flex;align-items:center;flex-wrap:wrap;gap:5px;line-height:16px}
.studio-page-clean .clean-model-name{min-width:0}
.studio-page-clean .clean-model-status{color:#8ed9c0;font-size:10px;font-weight:500;white-space:nowrap}
.studio-page-clean .clean-model-copy small{display:block;min-height:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-page-clean .clean-model-price{color:#7dd3df;font-weight:650;text-shadow:0 0 8px rgba(125,211,223,.18)}

.studio-page-clean .clean-model-title-row{display:grid;grid-template-columns:minmax(0,1fr) 86px 112px;align-items:center;gap:8px;min-width:0;min-height:15px}
.studio-page-clean .clean-model-title-row .clean-model-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.studio-page-clean .clean-model-title-row .clean-model-price{justify-self:end;align-self:center;text-align:right;color:#f0c86a;font-size:11px;font-weight:700;white-space:nowrap}
.studio-page-clean .clean-model-duration{display:flex;justify-content:center;min-width:86px}
.studio-page-clean .clean-model-duration .studio-duration-badge{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:16px;color:#45df7d;background:transparent;border:0;padding:0;font-size:10px;line-height:16px;white-space:nowrap}
.studio-page-clean .clean-model-duration .studio-duration-badge svg{width:14px;height:14px;color:#45df7d;stroke-width:2.8}
.studio-page-clean .clean-model-duration .studio-duration-label{display:none}
.studio-page-clean .clean-model-capability-row{display:flex;align-items:center;gap:6px;min-height:14px;margin-top:0;color:#aeb6ba;font-size:9px}
.studio-page-clean .clean-model-state{border:1px solid currentColor;padding:1px 6px;border-radius:999px;font-weight:600;line-height:12px;white-space:nowrap}
.studio-page-clean .clean-model-state.is-available{color:#83e2a8;background:rgba(45,170,95,.18)}
.studio-page-clean .clean-model-state.is-maintenance{color:#ffd36e;background:rgba(212,146,43,.12);border-color:#d8a948}
.studio-page-clean .clean-model-state.is-quota{color:#ffd36e;background:rgba(212,146,43,.12);border-color:#d8a948}
.studio-page-clean .clean-model-reference{border:1px solid rgba(220,184,92,.65);border-radius:999px;padding:1px 6px;color:#e1c56e;background:rgba(139,104,22,.16);line-height:12px;white-space:nowrap}
.studio-page-clean .clean-model-description{display:block;min-height:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9ca6aa;font-size:9px;line-height:12px}
.studio-page-clean .clean-model-capability-row{gap:6px;margin-top:2px}
.studio-page-clean .clean-model-state{border:1px solid currentColor;padding:2px 7px;line-height:14px;letter-spacing:.1px}
.studio-page-clean .clean-model-reference{border:1px solid rgba(220,184,92,.65);border-radius:999px;padding:2px 7px;color:#e1c56e;background:rgba(139,104,22,.16);line-height:14px}

/* Final model-row overrides: the panel defaults above are intentionally taller. */
.studio-page-clean .clean-model-panel .clean-model-option{position:relative !important;min-height:68px !important;height:68px !important;padding:8px 10px !important;align-items:center !important}
.studio-page-clean .clean-model-panel .clean-model-copy{align-self:center !important;gap:1px !important}
.studio-page-clean .clean-model-panel .clean-model-title-row{align-items:center !important;min-height:20px !important}
.studio-page-clean .clean-model-panel .clean-model-duration{position:absolute !important;left:calc(100% - 205px) !important;top:50% !important;transform:translateY(-50%) !important;align-self:center !important;align-items:center !important}
.studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-price{position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%) !important;display:flex !important;align-items:center !important;min-height:20px !important}
.studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge,.studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge svg{color:#45df7d !important}
.studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-price{align-self:center !important;color:#f0c86a !important}
.studio-page-clean .clean-model-panel .clean-model-capability-row{margin-top:1px !important;min-height:15px !important}
.studio-page-clean .clean-model-panel .clean-model-description{font-size:9px !important;line-height:12px !important;min-height:13px !important}
.studio-page-clean .clean-model-option{min-height:76px !important;height:76px !important}
.studio-page-clean .clean-model-panel .clean-model-option{min-height:76px !important;height:76px !important}
.studio-page-clean .clean-model-duration,.studio-page-clean .clean-model-duration *,.studio-page-clean .clean-model-duration svg{color:#45df7d !important;fill:none !important}

/* Floating asset/mention menus choose their side in React from the remaining
   viewport space. Keep the list bounded so a narrow screen never clips the
   first or last item; the list itself becomes the only scroll surface. */
.studio-page-clean .composer-controls > .clean-floating-panel{
  position:fixed !important;
  display:flex;
  flex-direction:column;
  left:var(--floating-left,12px) !important;
  top:var(--floating-top,12px) !important;
  right:auto !important;
  bottom:auto !important;
  width:var(--floating-width,min(520px,calc(100vw - 24px))) !important;
  max-height:min(460px,var(--floating-max-height,calc(100dvh - 32px)));
}
.studio-page-clean .composer-controls > .clean-floating-panel[data-placement="above"]{
  top:var(--floating-top,auto) !important;
  bottom:var(--floating-bottom,auto) !important;
}
.studio-page-clean .composer-controls > .clean-floating-panel[data-placement="below"]{
  top:var(--floating-top,auto) !important;
  bottom:var(--floating-bottom,auto) !important;
}
.studio-page-clean .composer-controls > .clean-floating-panel .clean-floating-list{
  min-height:0;
  max-height:min(310px,calc(var(--floating-max-height,100dvh) - 90px)) !important;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.studio-page-clean .clean-floating-option.is-unavailable{
  cursor:not-allowed;
  opacity:.48;
}
.studio-page-clean .clean-floating-option.is-unavailable:hover{
  background:transparent;
}

@media (max-width:700px){
  .studio-page-clean .composer-controls > .clean-floating-panel{
    position:fixed !important;
    left:var(--floating-left,12px) !important;
    right:auto !important;
    width:var(--floating-width,calc(100vw - 24px)) !important;
    max-width:none !important;
    border-radius:14px;
  }
  .studio-page-clean .composer-controls > .clean-floating-panel .clean-floating-list{
    max-height:min(280px,calc(var(--floating-max-height,100dvh) - 90px));
  }
}

/* 2026-10-06: make the model description line readable inside the taller row. */
.studio-page-clean .clean-model-panel .clean-model-description {
  font-size: 11px !important;
  line-height: 16px !important;
  min-height: 16px !important;
  color: #b7c1c5 !important;
}

/* 2026-10-06 mobile model-panel layout.
   Desktop keeps the compact three-column row above. On narrow screens the
   title and billing metadata must stay in normal flow so they cannot overlap
   the model name, status, reference count, or description. */
@media (max-width: 700px) {
  /* When the model menu is open, keep the mobile rail collapsed so it cannot
     cover the available model-list surface. The navigation remains present
     and the user can expand it again after closing the menu. */
  .studio-page-clean-shell.model-panel-open .sidebar {
    width: 64px !important;
    overflow: hidden !important;
  }

  .studio-page-clean .composer-controls > .clean-model-panel {
    right: auto !important;
    left: 50% !important;
    width: min(520px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    max-height: min(62dvh, 520px) !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-list {
    min-width: 0 !important;
    padding: 0 3px 6px 1px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-option,
  .studio-page-clean .clean-model-option {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px 8px !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-icon {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-copy {
    min-width: 0 !important;
    width: 0 !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
    padding-top: 0 !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name price"
      "duration duration" !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-name {
    grid-area: name !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-price {
    grid-area: price !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 46% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-duration {
    grid-area: duration !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: 14px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge {
    height: 14px !important;
    line-height: 14px !important;
    font-size: 9px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-capability-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px 5px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 2px !important;
    line-height: 12px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-state,
  .studio-page-clean .clean-model-panel .clean-model-reference {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-description {
    display: -webkit-box !important;
    min-height: 0 !important;
    max-height: 15px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }
}

@media (max-width: 420px) {
  .studio-page-clean .composer-controls > .clean-model-panel {
    width: calc(100vw - 72px) !important;
    max-width: calc(100vw - 72px) !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-icon {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .studio-page-clean .clean-model-panel .clean-model-option {
    padding: 6px 7px !important;
    gap: 6px !important;
  }
}

/* 2026-10-06 parameter/model placement.
   Every picker is positioned from its own trigger in React. Keep the panel
   attached to that viewport coordinate instead of letting older composer-grid
   rules move it to the left edge or reserve layout space over the reference
   strip. The list is the only scroll surface when the available side is short. */
.studio-page-clean .composer-controls > .clean-model-panel,
.studio-page-clean .composer-controls > .clean-parameter-panel,
.studio-page-clean .composer-controls > .clean-asset-panel,
.studio-page-clean .composer-controls > .clean-mention-panel {
  position: fixed !important;
  left: var(--floating-left, 12px) !important;
  top: var(--floating-top, 12px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(560px, var(--floating-max-height, calc(100dvh - 24px))) !important;
  overflow: hidden !important;
}

.studio-page-clean .composer-controls > .clean-model-panel {
  width: var(--floating-width, min(640px, calc(100vw - 24px))) !important;
}

.studio-page-clean .composer-controls > .clean-parameter-panel {
  width: var(--floating-width, min(390px, calc(100vw - 24px))) !important;
}

.studio-page-clean .composer-controls > .clean-asset-panel,
.studio-page-clean .composer-controls > .clean-mention-panel {
  width: var(--floating-width, min(520px, calc(100vw - 24px))) !important;
}

.studio-page-clean .composer-controls > .clean-model-panel .clean-model-list,
.studio-page-clean .composer-controls > .clean-parameter-panel .clean-option-list,
.studio-page-clean .composer-controls > .clean-asset-panel .clean-floating-list,
.studio-page-clean .composer-controls > .clean-mention-panel .clean-floating-list {
  min-height: 0 !important;
  max-height: max(1px, calc(var(--floating-max-height, 100dvh) - 76px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  .studio-page-clean .composer-controls > .clean-model-panel,
  .studio-page-clean .composer-controls > .clean-parameter-panel,
  .studio-page-clean .composer-controls > .clean-asset-panel,
  .studio-page-clean .composer-controls > .clean-mention-panel {
    max-width: calc(100vw - 16px) !important;
  }
}

/* The task-record/window view keeps the composer sticky and translucent.
   backdrop-filter creates a containing block for fixed descendants, which
   makes a picker jump to the lower-right of the editor instead of staying
   beside its trigger.  Remove that containing block only while a picker is
   open in the window view; the creation view and its visual treatment remain
   unchanged. */
.studio-page-clean[data-task-record-view="true"] .composer:has(.clean-floating-panel) {
  backdrop-filter: none !important;
}

/* Keep the lower-left theme control icon-only when the workbench rail is
   collapsed, in both the existing dark theme and Dreamina light. */
.studio-page-clean[data-sidebar="collapsed"] .theme-toggle {
  width: 36px;
  min-height: 36px;
  margin: 10px 2px 8px;
  padding: 0;
}

.studio-page-clean[data-sidebar="collapsed"] .theme-toggle__label {
  display: none;
}

/* Dreamina light workbench -------------------------------------------------
   Loaded after the incumbent clean-workbench rules so the light theme is a
   complete opt-in visual layer. No layout or interaction rules are changed. */
html.dreamina-light .studio-page-clean,
html.dreamina-light .studio-page-clean-shell {
  color-scheme: light !important;
  --page: #ffffff;
  --sidebar: #f8f9fa;
  --surface: #f8f9fa;
  --panel: #ffffff;
  --text: #1d2129;
  --secondary: #4e5969;
  --muted: #86909c;
  --line: #e5e6eb;
  --hover: #f2f3f5;
  --selected: #e8f1ff;
  --accent: #277efe;
  background: #ffffff !important;
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean-shell {
  border-color: #e5e6eb !important;
}

html.dreamina-light .studio-page-clean .sidebar {
  background: #f8f9fa !important;
  border-right: 1px solid #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: none !important;
}

html.dreamina-light .studio-page-clean .brand-name,
html.dreamina-light .studio-page-clean .nav-label,
html.dreamina-light .studio-page-clean .nav-item,
html.dreamina-light .studio-page-clean .group-toggle,
html.dreamina-light .studio-page-clean .record-button,
html.dreamina-light .studio-page-clean .local-label {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .brand-name,
html.dreamina-light .studio-page-clean .nav-item.active,
html.dreamina-light .studio-page-clean .workspace-record-label,
html.dreamina-light .studio-page-clean .task-record-label {
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .nav-item:hover,
html.dreamina-light .studio-page-clean .group-toggle:hover,
html.dreamina-light .studio-page-clean .group-items > button:hover,
html.dreamina-light .studio-page-clean .record-button:hover,
html.dreamina-light .studio-page-clean .icon-button:hover {
  background: #f2f3f5 !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .nav-item.active,
html.dreamina-light .studio-page-clean .nav-item.active:hover {
  background: #e8f1ff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .nav-item.active > .icon,
html.dreamina-light .studio-page-clean .nav-item.active svg {
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .nav-item:not(.active) > .icon,
html.dreamina-light .studio-page-clean .group-toggle .icon,
html.dreamina-light .studio-page-clean .icon-button,
html.dreamina-light .studio-page-clean .workspace-record-icon,
html.dreamina-light .studio-page-clean .canvas-record-icon {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .workspace-record-meta,
html.dreamina-light .studio-page-clean .task-record-status,
html.dreamina-light .studio-page-clean .group-empty,
html.dreamina-light .studio-page-clean .local-label {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .workspace-record-button.is-selected,
html.dreamina-light .studio-page-clean .task-record-button.is-selected {
  background: #e8f1ff !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .workspace,
html.dreamina-light .studio-page-clean .studio-route-content,
html.dreamina-light .studio-page-clean .mode-stage {
  background: #ffffff !important;
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .workspace-art {
  opacity: 0.10 !important;
  mix-blend-mode: multiply;
}

html.dreamina-light .studio-page-clean .account-tools {
  border-color: #e5e6eb !important;
  background: rgba(248, 249, 250, 0.96) !important;
  box-shadow: 0 6px 18px rgba(29, 33, 41, 0.06) !important;
}

html.dreamina-light .studio-page-clean .account-tools .icon-button,
html.dreamina-light .studio-page-clean .profile-button {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .account-tools .icon-button:hover,
html.dreamina-light .studio-page-clean .profile-button:hover {
  background: #f2f3f5 !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .profile-avatar {
  border-color: #b9d4ff !important;
  background: #e8f1ff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .profile-copy strong {
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .profile-copy small,
html.dreamina-light .studio-page-clean .profile-credit {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .hero h1,
html.dreamina-light .studio-page-clean .hero .title-accent {
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
  background: none !important;
}

html.dreamina-light .studio-page-clean .mode-switch {
  background: #f2f3f5 !important;
  border: 1px solid #e5e6eb !important;
}

html.dreamina-light .studio-page-clean .mode-switch button {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .mode-switch button[aria-selected="true"] {
  background: #277efe !important;
  color: #ffffff !important;
}

html.dreamina-light .studio-page-clean .mode-switch button[aria-selected="false"]:hover {
  background: #e5e6eb !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .composer {
  border: 1px solid #e5e6eb !important;
  background: #f8f9fa !important;
  box-shadow: 0 12px 32px rgba(29, 33, 41, 0.06), inset 0 1px 0 #ffffff !important;
}

html.dreamina-light .studio-page-clean .composer:hover,
html.dreamina-light .studio-page-clean .composer:focus-within {
  box-shadow: 0 14px 36px rgba(29, 33, 41, 0.09), 0 0 0 2px rgba(39, 126, 254, 0.08) !important;
}

html.dreamina-light .studio-page-clean .composer-material {
  opacity: 0.025 !important;
}

html.dreamina-light .studio-page-clean .composer-header,
html.dreamina-light .studio-page-clean .composer-inner,
html.dreamina-light .studio-page-clean .reference-panel,
html.dreamina-light .studio-page-clean .references,
html.dreamina-light .studio-page-clean .composer-controls {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .media-tabs {
  border-bottom: 1px solid #e5e6eb !important;
}

html.dreamina-light .studio-page-clean .media-tabs [role="tab"] {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .media-tabs [role="tab"][aria-selected="true"] {
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor,
html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
}

html.dreamina-light .studio-page-clean .tool-button,
html.dreamina-light .studio-page-clean .model-button,
html.dreamina-light .studio-page-clean .parameter-combo-button,
html.dreamina-light .studio-page-clean .reference-toggle,
html.dreamina-light .studio-page-clean .composer-expand-toggle {
  border-color: #e5e6eb !important;
  background: #ffffff !important;
  color: #4e5969 !important;
  box-shadow: none !important;
}

html.dreamina-light .studio-page-clean .tool-button:hover,
html.dreamina-light .studio-page-clean .model-button:hover,
html.dreamina-light .studio-page-clean .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle[aria-expanded="true"] {
  border-color: #b9d4ff !important;
  background: #eef5ff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .upload-trigger,
html.dreamina-light .studio-page-clean .asset-preview,
html.dreamina-light .studio-page-clean .asset-item,
html.dreamina-light .studio-page-clean .reference-overflow-trigger {
  border-color: #e5e6eb !important;
  background: #f2f3f5 !important;
  color: #4e5969 !important;
  box-shadow: none !important;
}

html.dreamina-light .studio-page-clean .upload-trigger:hover,
html.dreamina-light .studio-page-clean .reference-overflow-trigger:hover {
  border-color: #b9d4ff !important;
  background: #eef5ff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  border-color: #277efe !important;
  background: #277efe !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(39, 126, 254, 0.22) !important;
}

html.dreamina-light .studio-page-clean .submit-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .generate-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .composer-submit:hover:not(:disabled),
html.dreamina-light .studio-page-clean .submit-action:hover:not(:disabled) {
  background: #1768df !important;
}

html.dreamina-light .studio-page-clean .clean-floating-panel,
html.dreamina-light .studio-page-clean .clean-dialog {
  border-color: #e5e6eb !important;
  background: #f8f9fa !important;
  color: #4e5969 !important;
  box-shadow: 0 20px 56px rgba(29, 33, 41, 0.16) !important;
}

html.dreamina-light .studio-page-clean .clean-floating-title,
html.dreamina-light .studio-page-clean .clean-dialog-header h2 {
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-floating-title button,
html.dreamina-light .studio-page-clean .clean-dialog-header button {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .clean-floating-title button:hover,
html.dreamina-light .studio-page-clean .clean-dialog-header button:hover {
  background: #e5e6eb !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-floating-option,
html.dreamina-light .studio-page-clean .clean-model-option,
html.dreamina-light .studio-page-clean .clean-option-grid > button,
html.dreamina-light .studio-page-clean .clean-size-grid > button,
html.dreamina-light .studio-page-clean .clean-duration-grid > button {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .clean-floating-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option.selected,
html.dreamina-light .studio-page-clean .clean-option-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-size-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-duration-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-option-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-size-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-duration-grid > button.selected {
  border-color: #b9d4ff !important;
  background: #e8f1ff !important;
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-model-copy strong,
html.dreamina-light .studio-page-clean .clean-option-heading,
html.dreamina-light .studio-page-clean .clean-floating-option strong {
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-model-copy small,
html.dreamina-light .studio-page-clean .clean-floating-option small,
html.dreamina-light .studio-page-clean .clean-cost-label,
html.dreamina-light .studio-page-clean .clean-model-price {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .clean-model-price,
html.dreamina-light .studio-page-clean .clean-credit-icon,
html.dreamina-light .studio-page-clean .profile-credit-icon {
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .clean-overlay,
html.dreamina-light .studio-page-clean .clean-operation-backdrop {
  background: rgba(29, 33, 41, 0.38) !important;
}

html.dreamina-light .studio-page-clean .clean-task-card,
html.dreamina-light .studio-page-clean .task-feed-card {
  border-color: #e5e6eb !important;
  background: #f8f9fa !important;
  color: #4e5969 !important;
  box-shadow: 0 8px 24px rgba(29, 33, 41, 0.05) !important;
}

html.dreamina-light .studio-page-clean .clean-task-card article,
html.dreamina-light .studio-page-clean .task-feed-card article {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .clean-task-card .bg-white,
html.dreamina-light .studio-page-clean .clean-task-card .bg-white\/70,
html.dreamina-light .studio-page-clean .task-feed-card .bg-white,
html.dreamina-light .studio-page-clean .task-feed-card .bg-white\/70 {
  background: #ffffff !important;
}

html.dreamina-light .studio-page-clean .clean-task-card .text-slate-950,
html.dreamina-light .studio-page-clean .clean-task-card .text-slate-900,
html.dreamina-light .studio-page-clean .clean-task-card .text-slate-800,
html.dreamina-light .studio-page-clean .clean-task-card .text-slate-700,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-950,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-900,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-800,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-700 {
  color: #1d2129 !important;
}

html.dreamina-light .studio-page-clean .clean-task-card .text-slate-500,
html.dreamina-light .studio-page-clean .clean-task-card .text-slate-400,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-500,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-400 {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .studio-top-notice,
html.dreamina-light .studio-page-clean .studio-announcement {
  border-color: #b9d4ff !important;
  background: #eef5ff !important;
  color: #1d2129 !important;
  box-shadow: 0 6px 18px rgba(39, 126, 254, 0.10) !important;
}

html.dreamina-light .studio-page-clean .studio-top-notice-icon,
html.dreamina-light .studio-page-clean .studio-announcement-icon {
  border-color: #b9d4ff !important;
  background: #e8f1ff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .studio-top-notice-position,
html.dreamina-light .studio-page-clean .studio-announcement-position {
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .studio-top-notice-close,
html.dreamina-light .studio-page-clean .studio-announcement-close {
  color: #86909c !important;
}

html.dreamina-light .studio-page-clean .studio-top-notice-close:hover,
html.dreamina-light .studio-page-clean .studio-announcement-close:hover {
  background: #dceaff !important;
  color: #277efe !important;
}

html.dreamina-light .studio-page-clean .theme-toggle {
  margin: 10px 0 8px;
  flex: 0 0 auto;
}

html.dreamina-light .studio-page-clean[data-sidebar="collapsed"] .theme-toggle {
  width: 36px;
  min-height: 36px;
  margin: 10px 2px 8px;
  padding: 0;
}

html.dreamina-light .studio-page-clean[data-sidebar="collapsed"] .theme-toggle__label {
  display: none;
}

html.dreamina-light .studio-page-clean .studio-page-clean-shell,
html.dreamina-light .studio-page-clean .clean-library-page,
html.dreamina-light .studio-page-clean .clean-api-page {
  background: #ffffff !important;
  color: #4e5969 !important;
}

html.dreamina-light .studio-page-clean .clean-library-page :is(
  .library-control-panel,
  .library-folder-panel,
  .library-results,
  .library-pagination,
  .library-card,
  .library-empty-state,
  .library-source-tab,
  .library-filter,
  .library-notice
),
html.dreamina-light .studio-page-clean .clean-api-page :is(
  .api-summary-panel,
  .api-key-panel,
  .api-model-panel,
  .api-log-panel,
  .api-code-block,
  .api-model-card
) {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 8px 24px rgba(29, 33, 41, 0.05) !important;
}

html.dreamina-light .studio-page-clean .clean-library-page .library-card-preview,
html.dreamina-light .studio-page-clean .clean-api-page .api-code-block {
  background: #f2f3f5 !important;
}

html.dreamina-light .studio-page-clean ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dreamina-light .studio-page-clean ::-webkit-scrollbar-track {
  background: #f8f9fa;
}

html.dreamina-light .studio-page-clean ::-webkit-scrollbar-thumb {
  border: 2px solid #f8f9fa;
  border-radius: 999px;
  background: #c9cdd4;
}

html.dreamina-light .studio-page-clean ::-webkit-scrollbar-thumb:hover {
  background: #aeb4bf;
}

/* Dreamina light workbench polish: keep the editor's live material shader
   visible, but tint it with a light blue/teal palette instead of removing the
   dynamic layer. */
html.dreamina-light .studio-page-clean .composer-material {
  display: block !important;
  opacity: .16 !important;
  mix-blend-mode: multiply;
}
html.dreamina-light .studio-page-clean .composer {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
  box-shadow: 0 16px 36px rgba(29,33,41,.08), inset 0 1px 0 #ffffff !important;
}
html.dreamina-light .studio-page-clean .composer-header {
  background: #f8f9fa !important;
  border-bottom-color: #e5e6eb !important;
}
html.dreamina-light .studio-page-clean .composer-inner {
  background: #ffffff !important;
}
html.dreamina-light .studio-page-clean .prompt-row,
html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor {
  background: #ffffff !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
}
html.dreamina-light .studio-page-clean .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger {
  background: #f2f3f5 !important;
  border: 1px solid #e5e6eb !important;
  color: #1d2129 !important;
  box-shadow: 0 5px 14px rgba(29,33,41,.07) !important;
}
html.dreamina-light .studio-page-clean .upload-trigger:hover,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger:hover {
  background: #e8f1ff !important;
  border-color: #b9d4ff !important;
  color: #1768df !important;
  box-shadow: 0 8px 18px rgba(39,126,254,.13) !important;
}
html.dreamina-light .studio-page-clean .upload-trigger .stack-card,
html.dreamina-light .studio-page-clean .upload-trigger .stack-front {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .upload-trigger .reference-add-icon {
  color: #277efe !important;
  stroke: currentColor !important;
}
html.dreamina-light .studio-page-clean .asset-preview,
html.dreamina-light .studio-page-clean .asset-item,
html.dreamina-light .studio-page-clean .reference-overflow-trigger {
  background: #f2f3f5 !important;
  border-color: #e5e6eb !important;
  box-shadow: 0 4px 12px rgba(29,33,41,.07) !important;
}
html.dreamina-light .studio-page-clean .tool-button,
html.dreamina-light .studio-page-clean .model-button,
html.dreamina-light .studio-page-clean .parameter-combo-button,
html.dreamina-light .studio-page-clean .reference-toggle,
html.dreamina-light .studio-page-clean .composer-expand-toggle {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 1px 2px rgba(29,33,41,.03) !important;
}
html.dreamina-light .studio-page-clean .tool-button:hover,
html.dreamina-light .studio-page-clean .model-button:hover,
html.dreamina-light .studio-page-clean .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle[aria-expanded="true"] {
  background: #e8f1ff !important;
  border-color: #b9d4ff !important;
  color: #1768df !important;
  box-shadow: 0 4px 12px rgba(39,126,254,.10) !important;
}
html.dreamina-light .studio-page-clean .clean-floating-panel,
html.dreamina-light .studio-page-clean .clean-dialog,
html.dreamina-light .studio-page-clean .clean-model-panel,
html.dreamina-light .studio-page-clean .clean-parameter-panel,
html.dreamina-light .studio-page-clean .clean-asset-panel,
html.dreamina-light .studio-page-clean .clean-mention-panel {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 20px 56px rgba(29,33,41,.16) !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option,
html.dreamina-light .studio-page-clean .clean-model-option,
html.dreamina-light .studio-page-clean .clean-option-list > button,
html.dreamina-light .studio-page-clean .clean-option-grid > button,
html.dreamina-light .studio-page-clean .clean-size-grid > button,
html.dreamina-light .studio-page-clean .clean-duration-grid > button {
  color: #4e5969 !important;
  border-color: transparent !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option.selected,
html.dreamina-light .studio-page-clean .clean-option-list > button:hover,
html.dreamina-light .studio-page-clean .clean-option-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-size-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-duration-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-option-list > button.selected,
html.dreamina-light .studio-page-clean .clean-option-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-size-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-duration-grid > button.selected {
  background: #e8f1ff !important;
  border-color: #b9d4ff !important;
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-floating-title,
html.dreamina-light .studio-page-clean .clean-dialog-header h2,
html.dreamina-light .studio-page-clean .clean-model-copy strong,
html.dreamina-light .studio-page-clean .clean-floating-option strong {
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-copy small,
html.dreamina-light .studio-page-clean .clean-floating-option small,
html.dreamina-light .studio-page-clean .clean-cost-label {
  color: #86909c !important;
}
html.dreamina-light .studio-page-clean .clean-model-price,
html.dreamina-light .studio-page-clean .clean-credit-icon,
html.dreamina-light .studio-page-clean .profile-credit-icon {
  color: #277efe !important;
}
html.dreamina-light .studio-page-clean .clean-results-filters input,
html.dreamina-light .studio-page-clean .clean-results-filters select,
html.dreamina-light .studio-page-clean .clean-dialog-field input {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-results-filters input::placeholder,
html.dreamina-light .studio-page-clean .clean-dialog-field input::placeholder {
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
}
html.dreamina-light .studio-page-clean .clean-results-filters input:focus,
html.dreamina-light .studio-page-clean .clean-results-filters select:focus,
html.dreamina-light .studio-page-clean .clean-dialog-field input:focus {
  border-color: #277efe !important;
  box-shadow: 0 0 0 3px rgba(39,126,254,.14) !important;
}
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  background: #277efe !important;
  border-color: #277efe !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(39,126,254,.22) !important;
}
html.dreamina-light .studio-page-clean .submit-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .generate-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .composer-submit:hover:not(:disabled),
html.dreamina-light .studio-page-clean .submit-action:hover:not(:disabled) {
  background: #1768df !important;
  border-color: #1768df !important;
  transform: translateY(-1px);
}
/* Light-mode generation preview: retain motion, but use readable blue/teal
   surfaces instead of the old near-black wash. */
html.dreamina-light .studio-page-clean .studio-generating-preview {
  border-color: #b9d4ff !important;
  background: #e8f1ff !important;
  box-shadow: 0 16px 40px rgba(39,126,254,.14), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
html.dreamina-light .studio-page-clean .studio-generating-preview__glow {
  background:
    radial-gradient(ellipse at 72% 72%, rgba(39,126,254,.75) 0%, rgba(39,126,254,.34) 22%, transparent 53%),
    radial-gradient(ellipse at 54% 15%, rgba(123,97,255,.55) 0%, rgba(123,97,255,.18) 24%, transparent 56%),
    radial-gradient(ellipse at 28% 74%, rgba(47,183,168,.52) 0%, rgba(47,183,168,.16) 22%, transparent 51%),
    linear-gradient(118deg, #edf5ff 0%, #dceaff 45%, #e7f8f5 100%) !important;
  filter: blur(24px) saturate(115%) !important;
}
html.dreamina-light .studio-page-clean .studio-generating-preview__wash {
  background:
    radial-gradient(ellipse at 63% 52%, rgba(255,255,255,.76), transparent 34%),
    radial-gradient(ellipse at 43% 87%, rgba(39,126,254,.20), transparent 40%),
    linear-gradient(115deg, rgba(255,255,255,.20), rgba(255,255,255,.62) 46%, rgba(232,241,255,.22)) !important;
  mix-blend-mode: normal !important;
  filter: blur(16px) !important;
}
html.dreamina-light .studio-page-clean .studio-generating-preview__edge {
  background: linear-gradient(90deg, rgba(29,33,41,.18), transparent 28%, transparent 76%, rgba(29,33,41,.08)), linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%, rgba(39,126,254,.10)) !important;
  box-shadow: inset 0 0 50px rgba(39,126,254,.12) !important;
}
html.dreamina-light .studio-page-clean .studio-generating-preview__progress {
  border-color: rgba(39,126,254,.22) !important;
  background: rgba(39,126,254,.88) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(29,33,41,.20) !important;
  box-shadow: 0 6px 18px rgba(39,126,254,.20) !important;
}
html.dreamina-light .studio-page-clean .clean-overlay,
html.dreamina-light .studio-page-clean .clean-operation-backdrop {
  background: rgba(29,33,41,.38) !important;
}
html.dreamina-light .studio-page-clean ::-webkit-scrollbar-track { background: #f8f9fa !important; }
html.dreamina-light .studio-page-clean ::-webkit-scrollbar-thumb { background: #c9cdd4 !important; border-color: #f8f9fa !important; }
html.dreamina-light .studio-page-clean ::-webkit-scrollbar-thumb:hover { background: #aeb4bf !important; }


/* Embedded subpage override: the shared route skin is intentionally dark by
   default; Dreamina light must win with a higher specificity than that skin. */
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .studio-page-clean-subpage,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-api-page,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-account-page {
  background: #ffffff !important;
  color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(input, textarea, select) {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
  box-shadow: 0 1px 2px rgba(29,33,41,.03) !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(input, textarea, select)::placeholder {
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(input, textarea, select):focus {
  border-color: #277efe !important;
  box-shadow: 0 0 0 3px rgba(39,126,254,.14) !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  [class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"],
  [class*="bg-neutral-50"], [class*="bg-neutral-100"], [class*="bg-stone-50"],
  [class*="bg-stone-100"], [class*="bg-slate-50"], [class*="bg-slate-100"],
  [class*="bg-zinc-50"], [class*="bg-zinc-100"], [class*="bg-surface/"],
  [class*="bg-elevated/"]
) {
  background-color: #f8f9fa !important;
  color: #4e5969 !important;
  border-color: #e5e6eb !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-card-preview, .api-code-block, .api-model-card, .account-stat-card,
  [class*="bg-[#f6f8fb]"], [class*="bg-slate-100"], [class*="bg-zinc-100"]
) {
  background-color: #f2f3f5 !important;
  border-color: #e5e6eb !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(button, a) {
  color: #4e5969 !important;
  -webkit-text-fill-color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-primary, .api-key-submit, .account-recharge-submit,
  .account-logout, [class~="bg-primary"], [class*="bg-blue-"]
) {
  background: #277efe !important;
  border-color: #277efe !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(39,126,254,.20) !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-primary, .api-key-submit, .account-recharge-submit,
  .account-logout, [class~="bg-primary"], [class*="bg-blue-"]
):hover:not(:disabled) {
  background: #1768df !important;
  border-color: #1768df !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-neutral, .library-action-danger, .library-filter,
  .library-folder-create, .library-card-actions > :is(a, button),
  .glass-button, .api-doc-link, .api-result-link, .api-copy-button,
  .account-action, .account-icon-button
) {
  background: #f2f3f5 !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  -webkit-text-fill-color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-neutral, .library-action-danger, .library-filter,
  .library-folder-create, .library-card-actions > :is(a, button),
  .glass-button, .api-doc-link, .api-result-link, .api-copy-button,
  .account-action, .account-icon-button
):hover:not(:disabled) {
  background: #e5e6eb !important;
  border-color: #c9cdd4 !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  h1, h2, h3, h4, strong, [class*="text-slate-950"], [class*="text-slate-900"],
  [class*="text-slate-800"], [class*="text-slate-700"]
) {
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  p, label, small, [class*="text-slate-600"], [class*="text-slate-500"],
  [class*="text-slate-400"], [class*="text-text-secondary"], [class*="text-text-muted"]
) {
  color: #4e5969 !important;
  -webkit-text-fill-color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-notice, .api-notice, .account-notice-panel
) {
  background: #eef5ff !important;
  border-color: #b9d4ff !important;
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-header, .api-page-header, .account-profile-card, .account-profile-balance-card
) {
  background: #f8f9fa !important;
  background-image: linear-gradient(135deg, rgba(39,126,254,.07), transparent 52%) !important;
  border-color: #e5e6eb !important;
}

/* Final Dreamina contrast pass for embedded pages. The shared route skin has
   high-priority dark text rules; reset descendants first, then apply semantic
   title/muted/action colors below so no child component remains washed out. */
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content * {
  color: #4e5969 !important;
  -webkit-text-fill-color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  h1, h2, h3, h4, h5, h6, strong, b, th,
  .api-section-title, .library-card-title, .account-stat-value,
  .account-balance-card, .api-model-card strong
) {
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .text-primary, [class*="text-primary"], [class*="text-blue-"],
  [class*="text-cyan-"], [class*="text-sky-"], [class*="text-teal-"]
) {
  color: #1768df !important;
  -webkit-text-fill-color: #1768df !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  small, .text-text-muted, [class*="text-slate-400"], [class*="text-gray-400"],
  [class*="text-zinc-400"], [class*="text-neutral-400"],
  .library-card-meta, .api-model-card small, .account-stat-label
) {
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  svg, svg *, [role="img"]
) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-primary, .api-key-submit, .account-recharge-submit,
  .account-logout, [class~="bg-primary"], [class*="bg-blue-"]
),
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-primary, .api-key-submit, .account-recharge-submit,
  .account-logout, [class~="bg-primary"], [class*="bg-blue-"]
) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .library-action-neutral, .library-action-danger, .library-filter,
  .library-folder-create, .library-card-actions > :is(a, button),
  .glass-button, .api-doc-link, .api-result-link, .api-copy-button,
  .account-action, .account-icon-button
) * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content :is(
  .api-page-header .text-primary, .library-header .text-primary
) {
  color: #1768df !important;
  -webkit-text-fill-color: #1768df !important;
}

/* --------------------------------------------------------------------------
   Dreamina light atmosphere pass (2026-10-07)
   Keep the existing layout/DOM and dark theme intact.  This layer only adds
   coordinated light gradients, depth, and restrained motion to the light
   theme; all colors remain legible on the approved Dreamina palette.
   -------------------------------------------------------------------------- */
html.dreamina-light {
  --dreamina-surface: #ffffff;
  --dreamina-panel: #f8f9fa;
  --dreamina-soft: #f2f6fc;
  --dreamina-blue: #277efe;
  --dreamina-indigo: #6877f5;
  --dreamina-teal: #35b7ad;
  --dreamina-border: #e5e6eb;
  --dreamina-title: #1d2129;
  --dreamina-body: #4e5969;
  --dreamina-muted: #86909c;
  color-scheme: light;
}

@keyframes dreamina-light-flow {
  0%, 100% { background-position: 0% 0%, 100% 12%, 42% 100%; }
  50% { background-position: 14% 9%, 86% 2%, 58% 88%; }
}

@keyframes dreamina-light-breathe {
  0%, 100% { opacity: .22; transform: scale(1); }
  50% { opacity: .34; transform: scale(1.035); }
}

@keyframes dreamina-button-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html.dreamina-light body {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(70rem 34rem at 4% -8%, rgba(39,126,254,.10), transparent 62%),
    radial-gradient(54rem 32rem at 96% 4%, rgba(104,119,245,.08), transparent 60%),
    radial-gradient(50rem 30rem at 56% 108%, rgba(53,183,173,.07), transparent 62%) !important;
  background-attachment: fixed !important;
}

html.dreamina-light .studio-page-clean,
html.dreamina-light .studio-page-clean-shell {
  position: relative !important;
  isolation: isolate !important;
  background-color: #ffffff !important;
  background-image:
    radial-gradient(54rem 26rem at 0% 0%, rgba(39,126,254,.105), transparent 66%),
    radial-gradient(46rem 28rem at 100% 0%, rgba(104,119,245,.08), transparent 65%),
    radial-gradient(38rem 24rem at 50% 100%, rgba(53,183,173,.065), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,255,.86) 45%, rgba(248,253,252,.9)) !important;
  background-size: 135% 135%, 125% 125%, 120% 120%, 100% 100% !important;
  animation: dreamina-light-flow 30s ease-in-out infinite alternate !important;
}

html.dreamina-light .studio-page-clean::before,
html.dreamina-light .studio-page-clean-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(32rem 18rem at 26% 24%, rgba(39,126,254,.07), transparent 72%),
    radial-gradient(28rem 16rem at 78% 68%, rgba(104,119,245,.055), transparent 72%),
    radial-gradient(30rem 16rem at 54% 88%, rgba(53,183,173,.055), transparent 74%) !important;
  filter: blur(16px) !important;
  animation: dreamina-light-breathe 16s ease-in-out infinite !important;
}

html.dreamina-light .studio-page-clean .workspace,
html.dreamina-light .studio-page-clean .studio-route-content,
html.dreamina-light .studio-page-clean .mode-stage {
  background-color: rgba(255,255,255,.74) !important;
  background-image:
    linear-gradient(140deg, rgba(255,255,255,.72), rgba(246,250,255,.60) 48%, rgba(245,252,251,.68)) !important;
}

/* Main composer: the shader stays visible through a layered, tinted surface. */
html.dreamina-light .studio-page-clean .composer {
  background-color: rgba(248,249,250,.86) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(238,245,255,.82) 48%, rgba(236,250,248,.82)) !important;
  border-color: rgba(190,207,230,.82) !important;
  box-shadow: 0 18px 42px rgba(52,86,132,.14), 0 2px 0 rgba(255,255,255,.82) inset !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}
html.dreamina-light .studio-page-clean .composer:hover,
html.dreamina-light .studio-page-clean .composer:focus-within {
  border-color: rgba(126,164,224,.9) !important;
  box-shadow: 0 22px 48px rgba(52,86,132,.18), 0 0 0 3px rgba(39,126,254,.10) !important;
}
html.dreamina-light .studio-page-clean .composer-material {
  display: block !important;
  opacity: .28 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(112%) contrast(102%) !important;
  pointer-events: none !important;
}
html.dreamina-light .studio-page-clean .composer-header {
  background: linear-gradient(135deg, rgba(248,251,255,.92), rgba(239,247,255,.86) 54%, rgba(241,252,250,.88)) !important;
  border-bottom-color: rgba(190,207,230,.78) !important;
}
html.dreamina-light .studio-page-clean .composer-inner {
  background-color: rgba(248,251,255,.56) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.64), rgba(232,242,255,.44) 52%, rgba(232,249,246,.48)) !important;
  border-color: rgba(190,207,230,.68) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
}
html.dreamina-light .studio-page-clean .prompt-row,
html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(242,247,255,.72)) !important;
  border-color: rgba(190,207,230,.72) !important;
  color: var(--dreamina-title) !important;
  -webkit-text-fill-color: var(--dreamina-title) !important;
  box-shadow: 0 3px 14px rgba(68,106,161,.07) inset !important;
}
html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: var(--dreamina-muted) !important;
  -webkit-text-fill-color: var(--dreamina-muted) !important;
}

/* Coordinated controls: blue action, cool secondary, and clear selected state. */
html.dreamina-light .studio-page-clean .tool-button,
html.dreamina-light .studio-page-clean .model-button,
html.dreamina-light .studio-page-clean .parameter-combo-button,
html.dreamina-light .studio-page-clean .reference-toggle,
html.dreamina-light .studio-page-clean .composer-expand-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.9)) !important;
  border-color: #c8d8ec !important;
  color: var(--dreamina-body) !important;
  box-shadow: 0 3px 10px rgba(59,96,145,.08) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
html.dreamina-light .studio-page-clean .tool-button:hover,
html.dreamina-light .studio-page-clean .model-button:hover,
html.dreamina-light .studio-page-clean .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-expand-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #eaf3ff, #e8f8f5) !important;
  border-color: #8fb8ed !important;
  color: #1768df !important;
  box-shadow: 0 6px 14px rgba(39,126,254,.14) !important;
  transform: translateY(-1px) !important;
}
html.dreamina-light .studio-page-clean .upload-trigger,
html.dreamina-light .studio-page-clean .reference-overflow-trigger,
html.dreamina-light .studio-page-clean .asset-item,
html.dreamina-light .studio-page-clean .asset-preview {
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(237,245,255,.88)) !important;
  border-color: #bfd2e9 !important;
  color: #315274 !important;
  box-shadow: 0 5px 14px rgba(62,103,154,.10) !important;
}
html.dreamina-light .studio-page-clean .upload-trigger:hover,
html.dreamina-light .studio-page-clean .reference-overflow-trigger:hover {
  background: linear-gradient(145deg, #eaf3ff, #e9faf7) !important;
  border-color: #7faee9 !important;
  color: #1768df !important;
}
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  background: linear-gradient(115deg, #277efe 0%, #4d8eff 46%, #6877f5 100%) !important;
  background-size: 180% 180% !important;
  border-color: #277efe !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 9px 22px rgba(39,126,254,.27), 0 1px 0 rgba(255,255,255,.34) inset !important;
  animation: dreamina-button-sheen 8s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .submit-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .generate-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .composer-submit:hover:not(:disabled),
html.dreamina-light .studio-page-clean .submit-action:hover:not(:disabled) {
  background: linear-gradient(115deg, #1768df 0%, #397fe9 46%, #5b68e5 100%) !important;
  box-shadow: 0 12px 26px rgba(39,126,254,.33), 0 1px 0 rgba(255,255,255,.34) inset !important;
  transform: translateY(-1px) !important;
}

/* Picker / dialog surfaces inherit the same cool layered depth. */
html.dreamina-light .studio-page-clean .clean-floating-panel,
html.dreamina-light .studio-page-clean .clean-dialog,
html.dreamina-light .studio-page-clean .clean-model-panel,
html.dreamina-light .studio-page-clean .clean-parameter-panel {
  background-color: rgba(248,251,255,.96) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,244,255,.94) 56%, rgba(237,250,247,.94)) !important;
  border-color: #bfd2e9 !important;
  box-shadow: 0 22px 60px rgba(48,78,120,.20), 0 1px 0 rgba(255,255,255,.9) inset !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option,
html.dreamina-light .studio-page-clean .clean-model-option,
html.dreamina-light .studio-page-clean .clean-option-grid > button,
html.dreamina-light .studio-page-clean .clean-size-grid > button,
html.dreamina-light .studio-page-clean .clean-duration-grid > button {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,247,255,.88)) !important;
  border-color: #d2dfef !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option.selected,
html.dreamina-light .studio-page-clean .clean-option-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-size-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-duration-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-option-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-size-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-duration-grid > button.selected {
  background: linear-gradient(135deg, #eaf3ff, #e8f8f5) !important;
  border-color: #8fb8ed !important;
}

/* Shared secondary pages: each route gets the same blue/teal atmosphere. */
html.dreamina-light .studio-page-clean .clean-library-page,
html.dreamina-light .studio-page-clean .clean-api-page,
html.dreamina-light .studio-page-clean .clean-account-page {
  background-color: rgba(255,255,255,.68) !important;
  background-image:
    radial-gradient(34rem 18rem at 0% 0%, rgba(39,126,254,.09), transparent 70%),
    radial-gradient(32rem 20rem at 100% 12%, rgba(104,119,245,.075), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(247,251,255,.72) 52%, rgba(245,252,250,.82)) !important;
}
html.dreamina-light .studio-page-clean .clean-library-page :is(.library-control-panel,.library-folder-panel,.library-results,.library-pagination,.library-card,.library-empty-state,.library-source-tab,.library-filter,.library-notice),
html.dreamina-light .studio-page-clean .clean-api-page :is(.api-summary-panel,.api-key-panel,.api-model-panel,.api-log-panel,.api-code-block,.api-model-card),
html.dreamina-light .studio-page-clean .clean-account-page :is(.account-profile-card,.account-profile-balance-card,.account-stat-card,.account-action-panel,.account-notice-panel) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.92), rgba(242,247,255,.84) 58%, rgba(239,250,247,.84)) !important;
  border-color: #d1deee !important;
  box-shadow: 0 10px 28px rgba(52,86,132,.09) !important;
}
html.dreamina-light .studio-page-clean .clean-library-page .library-header,
html.dreamina-light .studio-page-clean .clean-api-page .api-page-header,
html.dreamina-light .studio-page-clean .clean-account-page .account-profile-card {
  background-image: linear-gradient(115deg, #eaf3ff, #f2f6ff 48%, #e8f8f5) !important;
  border-color: #bcd2eb !important;
}
html.dreamina-light .studio-page-clean .clean-library-page .library-card-preview,
html.dreamina-light .studio-page-clean .clean-api-page .api-code-block {
  background-image: linear-gradient(135deg, #edf4ff, #f2f8ff 54%, #ecfaf7) !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice,
html.dreamina-light .studio-page-clean .studio-announcement,
html.dreamina-light .studio-page-clean .library-notice,
html.dreamina-light .studio-page-clean .api-notice,
html.dreamina-light .studio-page-clean .account-notice-panel {
  background-image: linear-gradient(110deg, #eaf3ff, #f1f5ff 52%, #e9faf7) !important;
  border-color: #a9c8ee !important;
  box-shadow: 0 8px 20px rgba(39,126,254,.11) !important;
}

/* The top notice uses the supplied fixed artwork, not the generic notice
   gradient used by embedded page callouts. */
html.dreamina-light .studio-page-clean .studio-top-notice {
  background-color: #102969 !important;
  background-image: url('/studio-clean-assets/top-notice-background.jpg') !important;
  background-position: right center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-text {
  color: #e9f4ff !important;
  -webkit-text-fill-color: #e9f4ff !important;
  text-shadow: 0 1px 12px rgba(12,37,95,.32) !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-close {
  color: #dbeaff !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-close:hover {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

/* The prompt editor should read as a soft surface, not a browser focus box. */
html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor,
html.dreamina-light .studio-page-clean .prompt-row {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .prompt-input:focus,
html.dreamina-light .studio-page-clean .studio-prompt-editor:focus,
html.dreamina-light .studio-page-clean .prompt-row:focus-within {
  outline: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(125,173,233,.24) !important;
}

/* Parameters need a stronger surface contrast than the editor background. */
html.dreamina-light .studio-page-clean .composer-inner .tool-button,
html.dreamina-light .studio-page-clean .composer-inner button.tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background: linear-gradient(135deg, #e8f1ff 0%, #dceaff 52%, #ddf5f0 100%) !important;
  background-image: linear-gradient(135deg, #e8f1ff 0%, #dceaff 52%, #ddf5f0 100%) !important;
  border-color: #a8c5e7 !important;
  color: #2f4e73 !important;
  box-shadow: 0 4px 12px rgba(55,96,148,.12), 0 1px 0 rgba(255,255,255,.86) inset !important;
}
html.dreamina-light .studio-page-clean .composer-inner .model-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #d7e8ff 0%, #cfe1ff 54%, #d1f2eb 100%) !important;
  background-image: linear-gradient(135deg, #d7e8ff 0%, #cfe1ff 54%, #d1f2eb 100%) !important;
  border-color: #78a9df !important;
  color: #155fc2 !important;
}

/* Keep both glyphs visible in the lower-left switch: black moon and white sun. */
.theme-toggle__icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
}
.theme-toggle__icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease, background-color 160ms ease;
}
.theme-toggle__moon { color: #111827 !important; background: rgba(17,24,39,.10); }
.theme-toggle__sun { color: #ffffff !important; background: #f7b84b; }
.theme-toggle__icon:not(.is-active) { opacity: .62; }
.theme-toggle__icon.is-active { opacity: 1; transform: scale(1.08); }
html.dreamina-light .theme-toggle__moon { color: #111827 !important; background: rgba(17,24,39,.12); }
html.dreamina-light .theme-toggle__sun { color: #ffffff !important; background: #f2b544; }
html:not(.dreamina-light) .theme-toggle__moon { color: #111827 !important; background: rgba(255,255,255,.78); }
html:not(.dreamina-light) .theme-toggle__sun { color: #ffffff !important; background: rgba(255,190,76,.56); }

@media (prefers-reduced-motion: reduce) {
  html.dreamina-light .studio-page-clean,
  html.dreamina-light .studio-page-clean-shell,
  html.dreamina-light .studio-page-clean::before,
  html.dreamina-light .studio-page-clean-shell::before,
  html.dreamina-light .studio-page-clean .submit-button,
  html.dreamina-light .studio-page-clean .generate-button,
  html.dreamina-light .studio-page-clean .composer-submit,
  html.dreamina-light .studio-page-clean .submit-action {
    animation: none !important;
  }
}

/* Specificity guard: the legacy reference rules are deliberately very
   specific.  Keep the light-theme gradient visible on every editor control. */
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger {
  background: linear-gradient(145deg, #ffffff 0%, #edf4ff 55%, #eaf9f6 100%) !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #edf4ff 55%, #eaf9f6 100%) !important;
  border-color: #bfd2e9 !important;
  color: #315274 !important;
  box-shadow: 0 5px 14px rgba(62,103,154,.10) !important;
}
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel .upload-trigger:hover,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger:hover {
  background: linear-gradient(145deg, #eaf3ff 0%, #e7f8f5 100%) !important;
  background-image: linear-gradient(145deg, #eaf3ff 0%, #e7f8f5 100%) !important;
  border-color: #7faee9 !important;
  color: #1768df !important;
}
html.dreamina-light .studio-page-clean .composer-inner > .tool-button,
html.dreamina-light .studio-page-clean .composer-inner > .composer-toolbar .tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 56%, #ecfaf7 100%) !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #eff6ff 56%, #ecfaf7 100%) !important;
  border-color: #c8d8ec !important;
  color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean .composer-inner .model-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #eaf3ff 0%, #e6f8f4 100%) !important;
  background-image: linear-gradient(135deg, #eaf3ff 0%, #e6f8f4 100%) !important;
  border-color: #8fb8ed !important;
  color: #1768df !important;
}

/* Final contrast lift: visible color choreography without turning the light
   workspace into a saturated canvas. */
html.dreamina-light body {
  background-image:
    radial-gradient(70rem 34rem at 4% -8%, rgba(39,126,254,.145), transparent 62%),
    radial-gradient(54rem 32rem at 96% 4%, rgba(104,119,245,.115), transparent 60%),
    radial-gradient(50rem 30rem at 56% 108%, rgba(53,183,173,.105), transparent 62%) !important;
}
html.dreamina-light .studio-page-clean,
html.dreamina-light .studio-page-clean-shell {
  background-image:
    radial-gradient(54rem 26rem at 0% 0%, rgba(39,126,254,.15), transparent 66%),
    radial-gradient(46rem 28rem at 100% 0%, rgba(104,119,245,.12), transparent 65%),
    radial-gradient(38rem 24rem at 50% 100%, rgba(53,183,173,.105), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,249,255,.84) 45%, rgba(244,252,250,.88)) !important;
}
html.dreamina-light .studio-page-clean .workspace,
html.dreamina-light .studio-page-clean .studio-route-content,
html.dreamina-light .studio-page-clean .mode-stage {
  background-image:
    radial-gradient(42rem 22rem at 8% 0%, rgba(39,126,254,.08), transparent 70%),
    radial-gradient(38rem 22rem at 94% 8%, rgba(104,119,245,.07), transparent 70%),
    linear-gradient(140deg, rgba(255,255,255,.76), rgba(245,249,255,.68) 50%, rgba(244,252,250,.72)) !important;
}
html.dreamina-light .studio-page-clean .composer-material {
  opacity: .34 !important;
}
html.dreamina-light .studio-page-clean .composer-inner .tool-button,
html.dreamina-light .studio-page-clean .composer-inner button.tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background-image: linear-gradient(135deg, #ffffff 0%, #edf5ff 54%, #eaf9f6 100%) !important;
}

/* Final correction pass requested from the local screenshot (2026-10-07). */
@keyframes dreamina-title-shimmer-final {
  0%, 100% { background-position: 0% 50%; opacity: .9; }
  50% { background-position: 100% 50%; opacity: 1; }
}
@keyframes dreamina-title-lift-final {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes dreamina-action-glow-final {
  0%, 100% { box-shadow: 0 8px 18px rgba(39,126,254,.22), 0 1px 0 rgba(255,255,255,.38) inset; filter: saturate(100%); }
  50% { box-shadow: 0 13px 28px rgba(39,126,254,.38), 0 1px 0 rgba(255,255,255,.52) inset; filter: saturate(116%); }
}

/* Remove the bright browser-like blue outline from the prompt editor. */
html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor,
html.dreamina-light .studio-page-clean .prompt-row,
html.dreamina-light .studio-page-clean .prompt-row:focus-within,
html.dreamina-light .studio-page-clean .prompt-input:focus,
html.dreamina-light .studio-page-clean .studio-prompt-editor:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Use the supplied notice artwork for the full-width top announcement. */
html.dreamina-light .studio-page-clean .studio-top-notice {
  background-color: #102969 !important;
  background-image: url('/studio-clean-assets/top-notice-background.jpg') !important;
  background-position: right center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-text {
  color: #eef6ff !important;
  -webkit-text-fill-color: #eef6ff !important;
  text-shadow: 0 1px 12px rgba(7,26,75,.42) !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-close {
  color: #eef6ff !important;
}
html.dreamina-light .studio-page-clean .studio-top-notice-close:hover {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

/* Make the title and generate control visibly alive while keeping geometry fixed. */
html.dreamina-light .studio-page-clean .hero h1 {
  animation: dreamina-title-lift-final 6s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .hero h1 .title-accent {
  display: inline-block !important;
  background: linear-gradient(110deg, #1d2129 0%, #277efe 36%, #6877f5 58%, #35b7ad 78%, #1d2129 100%) !important;
  background-size: 240% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: dreamina-title-shimmer-final 4.8s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  animation: dreamina-button-sheen 3.6s ease-in-out infinite, dreamina-action-glow-final 2.8s ease-in-out infinite !important;
}

/* Stronger parameter-chip contrast so controls do not disappear into the
   editor's pale surface. */
html.dreamina-light .studio-page-clean .composer-inner .tool-button,
html.dreamina-light .studio-page-clean .composer-inner button.tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background: linear-gradient(135deg, #dfeeff 0%, #cfe2ff 54%, #d3f4ed 100%) !important;
  background-image: linear-gradient(135deg, #dfeeff 0%, #cfe2ff 54%, #d3f4ed 100%) !important;
  border-color: #91b7e2 !important;
  color: #294c75 !important;
  box-shadow: 0 5px 14px rgba(55,96,148,.14), 0 1px 0 rgba(255,255,255,.88) inset !important;
}
html.dreamina-light .studio-page-clean .composer-inner .model-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #cde3ff 0%, #bed8ff 54%, #c1eee5 100%) !important;
  background-image: linear-gradient(135deg, #cde3ff 0%, #bed8ff 54%, #c1eee5 100%) !important;
  border-color: #6e9fd8 !important;
  color: #155fc2 !important;
}

/* Show both theme glyphs at once: black moon and white sun. */
.theme-toggle__icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 48px !important;
}
.theme-toggle__icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease !important;
}
.theme-toggle__moon,
html.dreamina-light .theme-toggle__moon,
html:not(.dreamina-light) .theme-toggle__moon {
  color: #111111 !important;
  background: rgba(17,17,17,.12) !important;
}
.theme-toggle__sun,
html.dreamina-light .theme-toggle__sun,
html:not(.dreamina-light) .theme-toggle__sun {
  color: #ffffff !important;
  background: #f1b443 !important;
}
.theme-toggle__icon:not(.is-active) { opacity: .72 !important; }
.theme-toggle__icon.is-active { opacity: 1 !important; transform: scale(1.08) !important; }

@media (prefers-reduced-motion: reduce) {
  html.dreamina-light .studio-page-clean .hero h1,
  html.dreamina-light .studio-page-clean .hero h1 .title-accent,
  html.dreamina-light .studio-page-clean .submit-button,
  html.dreamina-light .studio-page-clean .generate-button,
  html.dreamina-light .studio-page-clean .composer-submit,
  html.dreamina-light .studio-page-clean .submit-action {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Light-theme compatibility pass (2026-10-07)
   Match the dark theme's quiet hierarchy.  This block is color-only except
   for disabling visual effects that create a containing block for fixed
   parameter panels; no layout, dimensions, or placement are changed here.
   -------------------------------------------------------------------------- */
html.dreamina-light .studio-page-clean .composer,
html.dreamina-light .studio-page-clean .composer-inner,
html.dreamina-light .studio-page-clean .clean-floating-panel,
html.dreamina-light .studio-page-clean .clean-dialog,
html.dreamina-light .studio-page-clean .clean-model-panel,
html.dreamina-light .studio-page-clean .clean-parameter-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Do not let the light-only border change the editor's box geometry. Use an
   inset color instead, like the dark theme's 1px inset highlight. */
html.dreamina-light .studio-page-clean .composer {
  border: 0 !important;
  background: #f7f9fc !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.76), rgba(243,247,252,.74) 50%, rgba(241,249,247,.72)) !important;
  box-shadow: inset 0 0 0 1px rgba(155,179,209,.32), 0 12px 32px rgba(48,73,106,.08) !important;
}
html.dreamina-light .studio-page-clean .composer:hover,
html.dreamina-light .studio-page-clean .composer:focus-within {
  box-shadow: inset 0 0 0 1px rgba(133,163,201,.45), 0 14px 36px rgba(48,73,106,.11) !important;
}
html.dreamina-light .studio-page-clean .composer-inner {
  background: transparent !important;
  background-image: none !important;
}

/* Prompt area: quiet, readable, and visually subordinate to the editor frame. */
html.dreamina-light .studio-page-clean .prompt-row,
html.dreamina-light .studio-page-clean .prompt-input,
html.dreamina-light .studio-page-clean .studio-prompt-editor {
  background: transparent !important;
  background-image: none !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: #98a2b3 !important;
  -webkit-text-fill-color: #98a2b3 !important;
}

/* Controls mirror dark mode's low-contrast chips instead of bright cards. */
html.dreamina-light .studio-page-clean .composer-inner .tool-button,
html.dreamina-light .studio-page-clean .composer-inner button.tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background: rgba(242,244,247,.78) !important;
  background-image: none !important;
  border-color: rgba(185,195,208,.58) !important;
  color: #526277 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .composer-inner .model-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle[aria-expanded="true"] {
  background: rgba(226,235,247,.88) !important;
  background-image: none !important;
  border-color: rgba(126,158,198,.68) !important;
  color: #315d93 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"][data-hovered="true"] .upload-trigger,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"]:not([data-hovered="true"]) .upload-trigger {
  background: rgba(242,244,247,.78) !important;
  background-image: none !important;
  border-color: rgba(185,195,208,.58) !important;
  color: #526277 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel .upload-trigger:hover,
html.dreamina-light .studio-page-clean .composer-inner > .reference-panel[data-expanded="false"] .upload-trigger:hover {
  background: rgba(226,235,247,.88) !important;
  background-image: none !important;
  border-color: rgba(126,158,198,.68) !important;
  color: #315d93 !important;
}

/* Keep the primary action legible but not oversized or luminous. */
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  background: #277efe !important;
  background-image: none !important;
  border-color: #277efe !important;
  box-shadow: 0 6px 14px rgba(39,126,254,.18) !important;
  animation: none !important;
}
html.dreamina-light .studio-page-clean .submit-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .generate-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .composer-submit:hover:not(:disabled),
html.dreamina-light .studio-page-clean .submit-action:hover:not(:disabled) {
  background: #1768df !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(39,126,254,.22) !important;
}

/* Keep the existing title color hierarchy; no animated gradient text in the
   quiet light palette. */
html.dreamina-light .studio-page-clean .hero h1,
html.dreamina-light .studio-page-clean .hero h1 .title-accent {
  animation: none !important;
}
html.dreamina-light .studio-page-clean .hero h1 .title-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #1d2129 !important;
  color: #1d2129 !important;
}

/* Parameter/model popovers: only recolor the existing surfaces. Position,
   size, and fixed anchoring remain owned by the original rules. */
html.dreamina-light .studio-page-clean .clean-floating-panel,
html.dreamina-light .studio-page-clean .clean-dialog,
html.dreamina-light .studio-page-clean .clean-model-panel,
html.dreamina-light .studio-page-clean .clean-parameter-panel {
  background: #f8f9fa !important;
  background-image: none !important;
  border-color: #e5e6eb !important;
  box-shadow: 0 16px 48px rgba(31,46,67,.14), 0 1px 0 rgba(255,255,255,.86) inset !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option,
html.dreamina-light .studio-page-clean .clean-model-option,
html.dreamina-light .studio-page-clean .clean-option-grid > button,
html.dreamina-light .studio-page-clean .clean-size-grid > button,
html.dreamina-light .studio-page-clean .clean-duration-grid > button {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .clean-floating-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-option.selected,
html.dreamina-light .studio-page-clean .clean-option-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-size-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-duration-grid > button:hover,
html.dreamina-light .studio-page-clean .clean-option-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-size-grid > button.selected,
html.dreamina-light .studio-page-clean .clean-duration-grid > button.selected {
  background: #eef5ff !important;
  background-image: none !important;
  border-color: #b9d4ff !important;
  color: #1d2129 !important;
}

/* Quiet palette alignment with the dark theme: keep the live material subtle
   so the editor and chips do not become the visual focal point. */
html.dreamina-light .studio-page-clean .composer-material {
  opacity: .075 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(88%) contrast(98%) !important;
}
html.dreamina-light .studio-page-clean .composer {
  background-color: rgba(247,249,252,.94) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.88), rgba(244,247,251,.86) 50%, rgba(242,248,246,.88)) !important;
}
html.dreamina-light .studio-page-clean .composer-inner {
  background-color: rgba(248,250,252,.84) !important;
  background-image: none !important;
}
html.dreamina-light .studio-page-clean .composer-inner .tool-button,
html.dreamina-light .studio-page-clean .composer-inner button.tool-button,
html.dreamina-light .studio-page-clean .composer-inner .model-button,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle {
  background: rgba(242,244,247,.58) !important;
  background-image: none !important;
  border-color: rgba(185,195,208,.46) !important;
  color: #5b687a !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .composer-inner .model-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .parameter-combo-button:hover,
html.dreamina-light .studio-page-clean .composer-inner .reference-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle:hover,
html.dreamina-light .studio-page-clean .composer-inner .composer-expand-toggle[aria-expanded="true"] {
  background: rgba(228,236,246,.72) !important;
  background-image: none !important;
  border-color: rgba(126,158,198,.58) !important;
  color: #315d93 !important;
}
html.dreamina-light .studio-page-clean .hero h1,
html.dreamina-light .studio-page-clean .hero h1 .title-accent,
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  animation: none !important;
}

/* 2026-10-07: restore a restrained light-theme motion signature and increase
   model-list contrast. This block deliberately changes color/animation only;
   picker geometry, spacing, and positioning remain owned by prior rules. */
@keyframes dreamina-title-shimmer-restored {
  0%, 100% { background-position: 0% 50%; opacity: .94; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes dreamina-action-glow-restored {
  0%, 100% {
    box-shadow: 0 6px 14px rgba(39,126,254,.16), 0 1px 0 rgba(255,255,255,.3) inset;
    filter: saturate(100%);
  }
  50% {
    box-shadow: 0 8px 18px rgba(39,126,254,.24), 0 1px 0 rgba(255,255,255,.4) inset;
    filter: saturate(108%);
  }
}

/* Cool neutral panel with readable model metadata and consistent semantic
   colors: green for average time/availability, amber for credits/maintenance. */
html.dreamina-light .studio-page-clean .clean-model-panel {
  background-color: #f7f9fc !important;
  background-image: none !important;
  border-color: #d7e0eb !important;
  color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-floating-title {
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e1e7ef !important;
  color: #4e5969 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option.selected {
  background: #edf4ff !important;
  background-image: none !important;
  border-color: #a9c8f2 !important;
  color: #27384e !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option:disabled {
  opacity: 1 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-icon {
  background-color: #eaf2ff !important;
  color: #356eaf !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-name,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy strong {
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy small,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-description {
  color: #536174 !important;
  -webkit-text-fill-color: #536174 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-price {
  color: #825900 !important;
  -webkit-text-fill-color: #825900 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge svg,
html.dreamina-light .studio-page-clean .clean-model-panel .studio-duration-value {
  color: #177344 !important;
  -webkit-text-fill-color: #177344 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-available {
  color: #176b43 !important;
  background: #e7f5eb !important;
  border-color: #9fcdb0 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-maintenance,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-quota {
  color: #805800 !important;
  background: #fff5d9 !important;
  border-color: #dfc36e !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-reference {
  color: #526174 !important;
  background: #eef2f7 !important;
  border-color: #cbd6e3 !important;
}

/* A slow moving accent keeps the page title alive without changing its flow.
   The primary action gets a visible but quiet blue/indigo sheen. */
html.dreamina-light .studio-page-clean .hero h1 {
  animation: dreamina-title-lift-final 6s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .hero h1 .title-accent {
  background: linear-gradient(110deg, #1d2129 0%, #277efe 36%, #6877d8 58%, #218f86 78%, #1d2129 100%) !important;
  background-size: 240% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: dreamina-title-shimmer-restored 5.4s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .submit-button,
html.dreamina-light .studio-page-clean .generate-button,
html.dreamina-light .studio-page-clean .composer-submit,
html.dreamina-light .studio-page-clean .submit-action {
  background: linear-gradient(112deg, #277efe 0%, #4d8bea 48%, #596fd8 100%) !important;
  background-size: 210% 100% !important;
  background-position: 0% 50% !important;
  border-color: #2771e7 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  animation: dreamina-button-sheen 4.6s ease-in-out infinite, dreamina-action-glow-restored 3.6s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .submit-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .generate-button:hover:not(:disabled),
html.dreamina-light .studio-page-clean .composer-submit:hover:not(:disabled),
html.dreamina-light .studio-page-clean .submit-action:hover:not(:disabled) {
  background: linear-gradient(112deg, #1e6fe8 0%, #3f7fe0 48%, #4f63cf 100%) !important;
  background-size: 210% 100% !important;
  border-color: #1f68d4 !important;
}

@media (prefers-reduced-motion: reduce) {
  html.dreamina-light .studio-page-clean .hero h1,
  html.dreamina-light .studio-page-clean .hero h1 .title-accent,
  html.dreamina-light .studio-page-clean .submit-button,
  html.dreamina-light .studio-page-clean .generate-button,
  html.dreamina-light .studio-page-clean .composer-submit,
  html.dreamina-light .studio-page-clean .submit-action {
    animation: none !important;
  }
  html.dreamina-light .studio-page-clean .hero h1 {
    transform: none !important;
  }
}

/* White theme-only finishing pass (2026-10-07).
   The dark theme intentionally remains at the previous visual baseline. */
@keyframes dreamina-light-tab-label-visible {
  0%, 100% {
    color: #ffffff;
    text-shadow: 0 0 0 rgba(255,255,255,0);
  }
  36% {
    color: #d7fbff;
    text-shadow: 0 0 10px rgba(105,224,255,.68), 0 0 20px rgba(87,149,255,.22);
  }
  70% {
    color: #eee7ff;
    text-shadow: 0 0 9px rgba(178,151,255,.58), 0 0 18px rgba(118,99,224,.18);
  }
}
@keyframes dreamina-light-heading-chroma {
  0%, 100% {
    text-shadow: 0 0 0 rgba(75,153,255,0), 0 0 0 rgba(55,183,173,0);
  }
  42% {
    text-shadow: 0 0 12px rgba(75,153,255,.18), 0 0 24px rgba(53,183,173,.1);
  }
  74% {
    text-shadow: 0 0 12px rgba(134,102,232,.18), 0 0 24px rgba(239,111,143,.08);
  }
}

html.dreamina-light .studio-page-clean .mode-switch button[aria-selected="true"] {
  animation: dreamina-light-tab-label-visible 4.2s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .hero h1 {
  animation: dreamina-title-lift-final 6s ease-in-out infinite,
             dreamina-light-heading-chroma 5.6s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean #generateButton svg,
html.dreamina-light .studio-page-clean #generateButton .icon {
  animation: dreamina-submit-icon-roll 2.8s ease-in-out infinite,
             dreamina-light-heading-chroma 4.6s ease-in-out infinite !important;
}
html.dreamina-light .studio-page-clean .workspace-record-icon .icon {
  color: inherit !important;
  fill: currentColor !important;
}
html.dreamina-light .studio-page-clean .workspace-record-icon {
  background: linear-gradient(135deg, #e6efff 0%, #e0f8f3 100%) !important;
  border-color: #b5d0ef !important;
  color: #2a6ebd !important;
  box-shadow: 0 4px 12px rgba(52,104,170,.14) !important;
}

/* Light model picker: stronger hierarchy for title, capability counts,
   average duration, credits, and availability state. */
html.dreamina-light .studio-page-clean .clean-model-panel {
  background: #f7f9fc !important;
  background-image: linear-gradient(145deg, rgba(235,243,255,.98), rgba(247,244,255,.96) 58%, rgba(239,251,248,.96)) !important;
  border-color: #c9d7e8 !important;
  box-shadow: 0 16px 48px rgba(31,46,67,.14), 0 1px 0 rgba(255,255,255,.9) inset !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-floating-title {
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option {
  background: rgba(255,255,255,.9) !important;
  border-color: #d8e1ec !important;
  color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option:hover,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-option.selected {
  background: linear-gradient(135deg, #e8f2ff, #f0ebff 58%, #e6f8f3) !important;
  border-color: #99bde8 !important;
  color: #17253a !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-icon {
  background: linear-gradient(135deg, #deedff, #e4f8f2) !important;
  border-color: #b9d0eb !important;
  color: #2d6eb9 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-name,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy strong {
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-copy small,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-description {
  color: #536174 !important;
  -webkit-text-fill-color: #536174 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-price {
  color: #825900 !important;
  -webkit-text-fill-color: #825900 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-duration .studio-duration-badge svg,
html.dreamina-light .studio-page-clean .clean-model-panel .studio-duration-value {
  color: #177344 !important;
  -webkit-text-fill-color: #177344 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-available {
  color: #176b43 !important;
  background: #e7f5eb !important;
  border-color: #9fcdb0 !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-maintenance,
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-state.is-quota {
  color: #805800 !important;
  background: #fff5d9 !important;
  border-color: #dfc36e !important;
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-reference {
  color: #42358f !important;
  -webkit-text-fill-color: #42358f !important;
  background: #e5eaff !important;
  border-color: #a8a9e2 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.92) inset !important;
  font-weight: 600 !important;
}

/* Only the white theme receives the extra rainbow atmosphere. */
html.dreamina-light .studio-page-clean,
html.dreamina-light .studio-page-clean-shell,
html.dreamina-light .studio-page-clean-subpage,
html.dreamina-light .clean-library-page,
html.dreamina-light .clean-api-page,
html.dreamina-light .clean-account-page {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(54rem 28rem at 0% 0%, rgba(39,126,254,.17), transparent 66%),
    radial-gradient(46rem 26rem at 100% 4%, rgba(122,99,243,.15), transparent 64%),
    radial-gradient(34rem 20rem at 18% 46%, rgba(239,111,143,.09), transparent 72%),
    radial-gradient(32rem 18rem at 84% 42%, rgba(238,173,62,.085), transparent 72%),
    radial-gradient(42rem 24rem at 52% 100%, rgba(42,186,170,.14), transparent 68%),
    linear-gradient(140deg, rgba(255,255,255,.94), rgba(246,250,255,.88) 48%, rgba(244,252,250,.91)) !important;
  background-size: 135% 135%, 125% 125%, 120% 120%, 120% 120%, 120% 120%, 100% 100% !important;
  animation: dreamina-light-atmosphere 28s ease-in-out infinite alternate !important;
}

html.dreamina-light .theme-toggle {
  background: linear-gradient(135deg, #ffffff 0%, #edf5ff 52%, #eaf9f6 100%) !important;
  color: #315274 !important;
  border-color: #b8cde6 !important;
  box-shadow: 0 4px 14px rgba(61,104,157,.16) !important;
}
html.dreamina-light .theme-toggle__moon {
  color: #18304d !important;
  background: #d6e6fb !important;
  box-shadow: 0 0 0 1px #9ebce2, 0 2px 8px rgba(61,104,157,.16) !important;
}
html.dreamina-light .theme-toggle__sun {
  color: #fffdf2 !important;
  background: #d4972d !important;
  box-shadow: 0 0 0 1px #e8bd72, 0 2px 8px rgba(173,119,31,.16) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.dreamina-light .studio-page-clean .mode-switch button[aria-selected="true"],
  html.dreamina-light .studio-page-clean .hero h1,
  html.dreamina-light .studio-page-clean #generateButton svg,
  html.dreamina-light .studio-page-clean #generateButton .icon,
  html.dreamina-light .studio-page-clean,
  html.dreamina-light .studio-page-clean-shell,
  html.dreamina-light .studio-page-clean-subpage,
  html.dreamina-light .clean-library-page,
  html.dreamina-light .clean-api-page,
  html.dreamina-light .clean-account-page {
    animation: none !important;
  }
}

/* Light-theme task actions (2026-10-07).
   Keep the dark workbench untouched, but give the light task feed controls
   a real foreground/background pair instead of inheriting dark-theme text
   on a dark button.  The same tokens cover edit, regenerate, delete, and
   download actions so the row reads as one deliberate control group. */
html.dreamina-light .studio-page-clean .studio-task-action,
html.dreamina-light .studio-page-clean .studio-task-download {
  border: 1px solid #d7dce5 !important;
  background: #f2f3f5 !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
  box-shadow: 0 1px 2px rgba(29, 33, 41, 0.08) !important;
}

html.dreamina-light .studio-page-clean .studio-task-action > svg,
html.dreamina-light .studio-page-clean .studio-task-download > svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

html.dreamina-light .studio-page-clean .studio-task-action:hover:not(:disabled),
html.dreamina-light .studio-page-clean .studio-task-download:hover:not(:disabled) {
  border-color: #b8c3d2 !important;
  background: #e6eaf0 !important;
  color: #17253a !important;
  -webkit-text-fill-color: #17253a !important;
  box-shadow: 0 4px 10px rgba(39, 64, 94, 0.12) !important;
}

html.dreamina-light .studio-page-clean .studio-task-action:focus-visible,
html.dreamina-light .studio-page-clean .studio-task-download:focus-visible {
  outline: 3px solid rgba(39, 126, 254, 0.24) !important;
  outline-offset: 2px;
}

html.dreamina-light .studio-page-clean .studio-task-action[class*="ring-red-100"] {
  border-color: #f0b5b1 !important;
  background: #fff1f0 !important;
  color: #c93636 !important;
  -webkit-text-fill-color: #c93636 !important;
  box-shadow: 0 1px 2px rgba(207, 60, 72, 0.08) !important;
}

html.dreamina-light .studio-page-clean .studio-task-action[class*="ring-red-100"]:hover:not(:disabled) {
  border-color: #e58b86 !important;
  background: #ffe4e1 !important;
  color: #a92d2d !important;
  -webkit-text-fill-color: #a92d2d !important;
}

html.dreamina-light .studio-page-clean .studio-task-download[disabled] {
  border-color: #e1e5eb !important;
  background: #f7f8fa !important;
  color: #86909c !important;
  -webkit-text-fill-color: #86909c !important;
  box-shadow: none !important;
}

html.dreamina-light .studio-page-clean .studio-task-download[class*="border-cyan-200"] {
  border-color: #a7c8f0 !important;
  background: #eef6ff !important;
  color: #2166c7 !important;
  -webkit-text-fill-color: #2166c7 !important;
}

html.dreamina-light .studio-page-clean .studio-task-download[class*="border-cyan-200"]:hover:not(:disabled) {
  border-color: #78a9df !important;
  background: #deedff !important;
  color: #174f9f !important;
  -webkit-text-fill-color: #174f9f !important;
}

/* Metadata in the light task feed must stay readable against white cards.
   Keep the existing spacing and hierarchy; only raise the foreground
   contrast and align semantic status/error colors with the light palette. */
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-500,
html.dreamina-light .studio-page-clean .task-feed-card .text-slate-400 {
  color: #536174 !important;
  -webkit-text-fill-color: #536174 !important;
}

html.dreamina-light .studio-page-clean .task-feed-card .text-red-600 {
  color: #c93636 !important;
  -webkit-text-fill-color: #c93636 !important;
}

html.dreamina-light .studio-page-clean .task-feed-card .text-cyan-700,
html.dreamina-light .studio-page-clean .task-feed-card .text-sky-700 {
  color: #2166c7 !important;
  -webkit-text-fill-color: #2166c7 !important;
}

html.dreamina-light .studio-page-clean .task-feed-card .bg-red-50.text-red-700 {
  border: 1px solid #f0b5b1 !important;
  background: #fff1f0 !important;
  color: #c93636 !important;
  -webkit-text-fill-color: #c93636 !important;
}

html.dreamina-light .studio-page-clean .task-feed-card .bg-emerald-50.text-emerald-700 {
  border: 1px solid #a7d4b9 !important;
  background: #ecf8ef !important;
  color: #176b43 !important;
  -webkit-text-fill-color: #176b43 !important;
}

html.dreamina-light .studio-page-clean .task-feed-card .bg-blue-50.text-blue-700 {
  border: 1px solid #a7c8f0 !important;
  background: #eef6ff !important;
  color: #2166c7 !important;
  -webkit-text-fill-color: #2166c7 !important;
}

/* Generating state: an authored, bounded motion treatment that keeps the
   preview frame fixed while making the in-progress state unmistakable. */
.studio-page-clean .studio-generating-preview__pulse,
.studio-page-clean .studio-generating-preview__scan {
  position: absolute;
  pointer-events: none;
  contain: paint;
  will-change: transform, opacity;
}

.studio-page-clean .studio-generating-preview__pulse {
  z-index: 1;
  inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(143, 222, 255, 0.12) 18%,
      transparent 57%
    );
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.46;
  transform: translate3d(-8%, 4%, 0) scale(0.82);
  animation: studio-generating-pulse 3.2s ease-in-out infinite;
}

.studio-page-clean .studio-generating-preview__scan {
  z-index: 3;
  top: -44%;
  bottom: -44%;
  left: -46%;
  width: 31%;
  min-width: 72px;
  transform: rotate(17deg) translate3d(0, 0, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(130, 231, 255, 0.06) 25%,
    rgba(217, 250, 255, 0.56) 50%,
    rgba(130, 231, 255, 0.1) 76%,
    transparent 100%
  );
  filter: blur(10px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: studio-generating-scan 3.8s cubic-bezier(0.2, 0.72, 0.25, 1)
    infinite;
}

.studio-page-clean .studio-generating-preview__edge {
  z-index: 2;
  animation: studio-generating-edge 3.2s ease-in-out infinite;
}

.studio-page-clean .studio-generating-preview__progress {
  animation:
    studio-generating-label 1.8s ease-in-out infinite,
    studio-generating-label-glint 3.8s ease-in-out infinite;
}

@keyframes studio-generating-pulse {
  0%,
  100% {
    opacity: 0.24;
    transform: translate3d(-12%, 7%, 0) scale(0.78);
  }
  50% {
    opacity: 0.72;
    transform: translate3d(12%, -8%, 0) scale(1.26);
  }
}

@keyframes studio-generating-scan {
  0% {
    opacity: 0;
    transform: rotate(17deg) translate3d(-10%, 0, 0);
  }
  12%,
  68% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: rotate(17deg) translate3d(470%, 0, 0);
  }
}

@keyframes studio-generating-edge {
  0%,
  100% {
    opacity: 0.82;
    box-shadow: inset 0 0 70px rgba(2, 4, 8, 0.48);
  }
  50% {
    opacity: 1;
    box-shadow:
      inset 0 0 88px rgba(2, 4, 8, 0.58),
      inset 0 0 24px rgba(137, 222, 255, 0.1);
  }
}

@keyframes studio-generating-label-glint {
  0%,
  74%,
  100% {
    filter: brightness(1);
  }
  84% {
    filter: brightness(1.18);
  }
}

html.dreamina-light
  .studio-page-clean
  .studio-generating-preview__pulse {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(105, 185, 255, 0.2) 22%,
      transparent 58%
    );
  opacity: 0.42;
}

html.dreamina-light
  .studio-page-clean
  .studio-generating-preview__scan {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(39, 126, 254, 0.08) 25%,
    rgba(255, 255, 255, 0.88) 50%,
    rgba(39, 126, 254, 0.12) 76%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .studio-page-clean .studio-generating-preview__pulse,
  .studio-page-clean .studio-generating-preview__scan,
  .studio-page-clean .studio-generating-preview__edge,
  .studio-page-clean .studio-generating-preview__progress {
    animation: none !important;
  }
}

html.no-motion
  .studio-page-clean
  .studio-generating-preview__pulse,
html.no-motion
  .studio-page-clean
  .studio-generating-preview__scan,
html.no-motion
  .studio-page-clean
  .studio-generating-preview__edge,
html.no-motion
  .studio-page-clean
  .studio-generating-preview__progress {
  animation: none !important;
}

/* Local light-theme asset library alignment. Keep this scoped so the dark
   workbench remains unchanged while the Dreamina light surface uses its own
   semantic palette and the reference eight-column grid. */
html.sunrise-light .clean-library-page,
html.dreamina-light .clean-library-page {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #eef5ff 100%) !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-main,
html.dreamina-light .clean-library-page .library-main {
  background: transparent !important;
}
html.sunrise-light .clean-library-page .library-header,
html.dreamina-light .clean-library-page .library-header {
  background: linear-gradient(110deg, rgba(248,249,250,.96), rgba(238,245,255,.92)) !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-title h1,
html.dreamina-light .clean-library-page .library-title h1 {
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-group-rail,
html.dreamina-light .clean-library-page .library-group-rail {
  background: rgba(248,249,250,.96) !important;
  border-color: #e5e6eb !important;
}
html.sunrise-light .clean-library-page .library-group-title,
html.dreamina-light .clean-library-page .library-group-title {
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-rail-item,
html.dreamina-light .clean-library-page .library-rail-item {
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-rail-item svg,
html.dreamina-light .clean-library-page .library-rail-item svg {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-rail-item:hover,
html.dreamina-light .clean-library-page .library-rail-item:hover {
  background: #f2f3f5 !important;
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-rail-item.is-active,
html.dreamina-light .clean-library-page .library-rail-item.is-active {
  background: #e8f1ff !important;
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-rail-item.is-active svg,
html.dreamina-light .clean-library-page .library-rail-item.is-active svg {
  color: #277efe !important;
}
html.sunrise-light .clean-library-page .library-rail-create,
html.dreamina-light .clean-library-page .library-rail-create {
  background: #ffffff !important;
  border: 1px solid #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-rail-create:hover,
html.dreamina-light .clean-library-page .library-rail-create:hover {
  background: #e8f1ff !important;
  border-color: #b9d4ff !important;
  color: #1768df !important;
}
html.sunrise-light .clean-library-page .library-content,
html.dreamina-light .clean-library-page .library-content {
  background: transparent !important;
}
html.sunrise-light .clean-library-page .library-control-panel,
html.dreamina-light .clean-library-page .library-control-panel {
  background: rgba(248,249,250,.94) !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 8px 24px rgba(29,33,41,.05) !important;
}
html.sunrise-light .clean-library-page .library-source-tabs,
html.dreamina-light .clean-library-page .library-source-tabs {
  background: transparent !important;
  border-color: #e5e6eb !important;
}
html.sunrise-light .clean-library-page .library-source-tabs > button,
html.dreamina-light .clean-library-page .library-source-tabs > button {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-source-tabs > button:hover,
html.dreamina-light .clean-library-page .library-source-tabs > button:hover {
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-source-tabs > button.is-active,
html.dreamina-light .clean-library-page .library-source-tabs > button.is-active {
  border-bottom-color: #277efe !important;
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-control-panel > .flex > .relative input,
html.dreamina-light .clean-library-page .library-control-panel > .flex > .relative input {
  background: #ffffff !important;
  border: 1px solid #e5e6eb !important;
  color: #1d2129 !important;
  box-shadow: 0 1px 2px rgba(29,33,41,.03) !important;
}
html.sunrise-light .clean-library-page .library-control-panel > .flex > .relative input::placeholder,
html.dreamina-light .clean-library-page .library-control-panel > .flex > .relative input::placeholder {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-control-panel > .flex > .relative svg,
html.dreamina-light .clean-library-page .library-control-panel > .flex > .relative svg {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-header-select,
html.sunrise-light .clean-library-page .library-batch-button,
html.dreamina-light .clean-library-page .library-header-select,
html.dreamina-light .clean-library-page .library-batch-button {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-action-primary,
html.dreamina-light .clean-library-page .library-action-primary {
  background: #277efe !important;
  border-color: #277efe !important;
  color: #ffffff !important;
}
html.sunrise-light .clean-library-page .library-results,
html.dreamina-light .clean-library-page .library-results {
  background: transparent !important;
}
html.sunrise-light .clean-library-page .library-empty-state,
html.dreamina-light .clean-library-page .library-empty-state {
  background: rgba(255,255,255,.82) !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 8px 24px rgba(29,33,41,.04) !important;
}
html.sunrise-light .clean-library-page .library-empty-state svg,
html.dreamina-light .clean-library-page .library-empty-state svg {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-empty-state :is(div,p),
html.dreamina-light .clean-library-page .library-empty-state :is(div,p) {
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-grid,
html.dreamina-light .clean-library-page .library-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
html.sunrise-light .clean-library-page .library-card,
html.dreamina-light .clean-library-page .library-card {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 6px 18px rgba(29,33,41,.04) !important;
}
html.sunrise-light .clean-library-page .library-card:hover,
html.dreamina-light .clean-library-page .library-card:hover {
  border-color: #b9d4ff !important;
  box-shadow: 0 10px 22px rgba(39,126,254,.10) !important;
}
html.sunrise-light .clean-library-page .library-card-preview,
html.dreamina-light .clean-library-page .library-card-preview {
  background: #f2f3f5 !important;
}
html.sunrise-light .clean-library-page .library-card :is(strong,.library-card-title),
html.dreamina-light .clean-library-page .library-card :is(strong,.library-card-title) {
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-card small,
html.dreamina-light .clean-library-page .library-card small {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-pagination,
html.dreamina-light .clean-library-page .library-pagination {
  background: rgba(248,249,250,.97) !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-page-size-value,
html.dreamina-light .clean-library-page .library-page-size-value {
  background: #ffffff !important;
  border: 1px solid #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-pagination-center,
html.dreamina-light .clean-library-page .library-pagination-center,
html.sunrise-light .clean-library-page .library-pagination-total,
html.dreamina-light .clean-library-page .library-pagination-total {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-footer-action,
html.dreamina-light .clean-library-page .library-footer-action {
  background: #f2f3f5 !important;
  border: 1px solid #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-footer-action:hover:not(:disabled),
html.dreamina-light .clean-library-page .library-footer-action:hover:not(:disabled) {
  background: #e8f1ff !important;
  border-color: #b9d4ff !important;
  color: #1768df !important;
}
html.sunrise-light .clean-library-page .library-footer-download,
html.dreamina-light .clean-library-page .library-footer-download {
  background: #277efe !important;
  border-color: #277efe !important;
  color: #ffffff !important;
}
html.sunrise-light .clean-library-page .library-modal-actions,
html.dreamina-light .clean-library-page .library-modal-actions {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
}
html.sunrise-light .clean-library-page .library-modal-button,
html.dreamina-light .clean-library-page .library-modal-button {
  width: 96px !important;
  min-width: 96px !important;
}
html.sunrise-light .clean-library-page > .fixed.inset-0,
html.dreamina-light .clean-library-page > .fixed.inset-0 {
  background: rgba(29,33,41,.38) !important;
}
html.sunrise-light .clean-library-page > .fixed.inset-0 > div,
html.dreamina-light .clean-library-page > .fixed.inset-0 > div {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 20px 60px rgba(29,33,41,.18) !important;
}
html.sunrise-light .clean-library-page > .fixed.inset-0 :is(.text\[\#f0f0f2\], .text\[\#f5f5f6\]),
html.dreamina-light .clean-library-page > .fixed.inset-0 :is(.text\[\#f0f0f2\], .text\[\#f5f5f6\]) {
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page > .fixed.inset-0 input,
html.dreamina-light .clean-library-page > .fixed.inset-0 input {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
}
@media (max-width: 1400px) {
  html.sunrise-light .clean-library-page .library-grid,
  html.dreamina-light .clean-library-page .library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 1050px) {
  html.sunrise-light .clean-library-page .library-grid,
  html.dreamina-light .clean-library-page .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  html.sunrise-light .clean-library-page .library-grid,
  html.dreamina-light .clean-library-page .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* sunrise-light is the persisted light-theme name in the local app. Mirror
   the Dreamina palette there as well so the default light route cannot fall
   back to the dark embedded-workbench layer. */
html.sunrise-light .studio-page-clean,
html.sunrise-light .studio-page-clean-shell,
html.sunrise-light .studio-page-clean-shell[data-embedded-page="true"] {
  --page: #ffffff;
  --sidebar: #f8f9fa;
  --surface: #f8f9fa;
  --panel: #ffffff;
  --text: #1d2129;
  --secondary: #4e5969;
  --muted: #86909c;
  --line: #e5e6eb;
  --hover: #f2f3f5;
  --selected: #e8f1ff;
  --accent: #277efe;
  background: #ffffff !important;
  color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean .sidebar {
  background: #f8f9fa !important;
  border-right: 1px solid #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: none !important;
}
html.sunrise-light .studio-page-clean .brand-name,
html.sunrise-light .studio-page-clean .nav-label,
html.sunrise-light .studio-page-clean .nav-item,
html.sunrise-light .studio-page-clean .group-toggle,
html.sunrise-light .studio-page-clean .record-button,
html.sunrise-light .studio-page-clean .local-label {
  color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean .nav-item.active,
html.sunrise-light .studio-page-clean .workspace-record-label,
html.sunrise-light .studio-page-clean .task-record-label {
  color: #1d2129 !important;
}
html.sunrise-light .studio-page-clean .nav-item:hover,
html.sunrise-light .studio-page-clean .group-toggle:hover,
html.sunrise-light .studio-page-clean .group-items > button:hover,
html.sunrise-light .studio-page-clean .record-button:hover,
html.sunrise-light .studio-page-clean .icon-button:hover {
  background: #f2f3f5 !important;
  color: #1d2129 !important;
}
html.sunrise-light .studio-page-clean .nav-item.active {
  background: #e8f1ff !important;
  color: #1768df !important;
}
html.sunrise-light .studio-page-clean .studio-route-content > .clean-library-page,
html.dreamina-light .studio-page-clean .studio-route-content > .clean-library-page {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #eef5ff 100%) !important;
  color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #eef5ff 100%) !important;
  color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page .library-main,
html.dreamina-light .studio-page-clean-shell[data-embedded-page="true"] .studio-route-content > .clean-library-page .library-main {
  background: transparent !important;
}

/* Light asset dialogs and always-visible selection controls. */
html.sunrise-light .clean-library-page .library-modal-backdrop,
html.dreamina-light .clean-library-page .library-modal-backdrop {
  background: rgba(29,33,41,.38) !important;
}
html.sunrise-light .clean-library-page .library-modal-shell,
html.dreamina-light .clean-library-page .library-modal-shell {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  box-shadow: 0 20px 60px rgba(29,33,41,.18) !important;
}
html.sunrise-light .clean-library-page .library-modal-shell > :is(div,header,section),
html.dreamina-light .clean-library-page .library-modal-shell > :is(div,header,section) {
  border-color: #e5e6eb !important;
}
html.sunrise-light .clean-library-page .library-modal-shell .library-modal-actions,
html.dreamina-light .clean-library-page .library-modal-shell .library-modal-actions {
  background: #f8f9fa !important;
  border-color: #e5e6eb !important;
}
html.sunrise-light .clean-library-page .library-modal-shell :is(.text\[\#f0f0f2\], .text\[\#f5f5f6\]),
html.dreamina-light .clean-library-page .library-modal-shell :is(.text\[\#f0f0f2\], .text\[\#f5f5f6\]) {
  color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-modal-shell :is(.text\[\#a3a4aa\], .text\[\#b7bac2\], .text\[\#858890\]),
html.dreamina-light .clean-library-page .library-modal-shell :is(.text\[\#a3a4aa\], .text\[\#b7bac2\], .text\[\#858890\]) {
  color: #86909c !important;
}
html.sunrise-light .clean-library-page .library-modal-shell input,
html.dreamina-light .clean-library-page .library-modal-shell input {
  background: #ffffff !important;
  border-color: #e5e6eb !important;
  color: #1d2129 !important;
  -webkit-text-fill-color: #1d2129 !important;
}
html.sunrise-light .clean-library-page .library-modal-cancel,
html.dreamina-light .clean-library-page .library-modal-cancel {
  background: #f2f3f5 !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .clean-library-page .library-modal-submit,
html.dreamina-light .clean-library-page .library-modal-submit {
  background: #277efe !important;
  border-color: #277efe !important;
  color: #ffffff !important;
}
html.sunrise-light .clean-library-page .library-card-preview[role="button"]:focus-visible,
html.dreamina-light .clean-library-page .library-card-preview[role="button"]:focus-visible {
  outline: 2px solid #277efe;
  outline-offset: -2px;
}

/* Final light-theme modal specificity fix: the legacy embedded-page compatibility
   selectors are more specific than the first library modal rule. Keep the modal
   surfaces in the Dreamina palette without changing the dark theme or layout. */
html.sunrise-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell,
html.dreamina-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-actions,
html.dreamina-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-actions {
  background-color: #f8f9fa !important;
  background-image: none !important;
  border-color: #e5e6eb !important;
}
html.sunrise-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-cancel,
html.dreamina-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-cancel {
  background-color: #f2f3f5 !important;
  background-image: none !important;
  border-color: #e5e6eb !important;
  color: #4e5969 !important;
  -webkit-text-fill-color: #4e5969 !important;
}
html.sunrise-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-submit,
html.dreamina-light .studio-page-clean .studio-page-clean-subpage.clean-library-page .library-modal-shell .library-modal-submit {
  background-color: #277efe !important;
  background-image: none !important;
  border-color: #277efe !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep the rail fill continuous behind the fixed pagination footer. The fixed
   pseudo-element only occupies the rail column, so it cannot cover content. */
.clean-library-page .library-group-rail {
  --library-rail-width: 184px;
}
html:not(.sunrise-light):not(.dreamina-light) .clean-library-page .library-group-rail {
  --library-rail-fill: #1a1a1c;
  background: var(--library-rail-fill) !important;
}
html:not(.sunrise-light):not(.dreamina-light) .clean-library-page .library-group-rail::after,
html.sunrise-light .clean-library-page .library-group-rail::after,
html.dreamina-light .clean-library-page .library-group-rail::after {
  content: "";
  position: fixed;
  left: var(--sidebar-width);
  bottom: 0;
  z-index: 21;
  width: var(--library-rail-width);
  height: 55px;
  pointer-events: none;
  background: var(--library-rail-fill, #1a1a1c);
  border-right: 1px solid rgba(255,255,255,.08);
}
html.sunrise-light .clean-library-page .library-group-rail,
html.dreamina-light .clean-library-page .library-group-rail {
  --library-rail-width: 184px;
  --library-rail-fill: rgba(248,249,250,.96);
}
@media (max-width: 800px) {
  .clean-library-page .library-group-rail,
  html.sunrise-light .clean-library-page .library-group-rail,
  html.dreamina-light .clean-library-page .library-group-rail {
    --library-rail-width: 148px;
  }
}
@media (max-width: 600px) {
  .clean-library-page .library-group-rail,
  html.sunrise-light .clean-library-page .library-group-rail,
  html.dreamina-light .clean-library-page .library-group-rail {
    --library-rail-width: 132px;
  }
}
html.sunrise-light .clean-library-page .library-group-rail::after,
html.dreamina-light .clean-library-page .library-group-rail::after {
  background: rgba(248,249,250,.96);
  border-right-color: #e5e6eb;
}
/* Top independent announcement motion: messages enter from below and settle gently. */
.studio-page-clean .studio-top-notice-text,
.studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-text {
  animation: studio-top-notice-rise 1.35s cubic-bezier(.22,1,.36,1) both !important;
  transform-origin: center bottom;
}
@keyframes studio-top-notice-rise {
  from { opacity: 0; transform: translateY(100%); }
  70% { opacity: 1; transform: translateY(-3%); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page-clean .studio-top-notice-text,
  .studio-page-clean .studio-top-notice[data-overflow="true"] .studio-top-notice-text {
    animation: none !important;
    transform: none;
  }
}

/* Billing unit distinction: per-second rates use the existing green duration color;
   per-item/fixed rates retain the established gold price color. */
.studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-price.is-per-second {
  color: #45df7d !important;
  -webkit-text-fill-color: #45df7d !important;
  text-shadow: 0 0 8px rgba(69, 223, 125, .18);
}
html.dreamina-light .studio-page-clean .clean-model-panel .clean-model-title-row .clean-model-price.is-per-second {
  color: #177344 !important;
  -webkit-text-fill-color: #177344 !important;
  text-shadow: none;
}

/* Mobile task and parameter resilience: keep errors readable and popovers usable in short viewports. */
.studio-page-clean .task-card-expired__error{display:-webkit-box;max-width:100%;overflow:hidden;overflow-wrap:break-word;word-break:normal;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.studio-page-clean .task-card-expired__content{min-width:0;overflow:hidden}
.studio-page-clean .task-card-expired__model{max-width:min(42vw,260px)}
.studio-page-clean .task-card-failed__error{display:-webkit-box;max-width:100%;overflow:hidden;overflow-wrap:break-word;word-break:normal;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.studio-page-clean .task-card-failed__content{min-width:0;overflow:hidden}
.studio-page-clean .task-card-failed__model{max-width:min(42vw,260px)}
.studio-page-clean .clean-floating-panel{max-height:min(72dvh,520px);overflow-y:auto;overscroll-behavior:contain}
.studio-page-clean .clean-floating-panel .clean-floating-list,.studio-page-clean .clean-floating-panel .clean-model-list{max-height:min(48dvh,320px);overflow-y:auto}
@media (max-width:700px){
  .studio-page-clean .task-feed-card,.studio-page-clean .task-feed-card article{width:100%;max-width:100%!important;min-width:0}
  .studio-page-clean .task-feed-card article > div:first-child{width:100%;min-width:0}
  .studio-page-clean .task-card-failed__inner,.studio-page-clean .task-card-expired__inner{align-items:flex-start;padding:12px 10px;gap:8px}
  .studio-page-clean .task-card-expired__error{display:-webkit-box;max-width:100%;overflow:hidden;overflow-wrap:break-word;word-break:normal;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.studio-page-clean .task-card-expired__content{min-width:0;overflow:hidden}
.studio-page-clean .task-card-expired__model{max-width:min(42vw,260px)}
.studio-page-clean .task-card-failed__error{font-size:12px;line-height:18px;-webkit-line-clamp:4}
  .studio-page-clean .task-card-failed__model,.studio-page-clean .task-card-expired__model{max-width:38vw;white-space:nowrap}
  .studio-page-clean .task-card-failed__actions,.studio-page-clean .task-card-expired__actions{width:100%;gap:6px}
  .studio-page-clean .task-feed-card .text-xs{min-width:0}
  .studio-page-clean .task-feed-card .font-mono{white-space:nowrap}
  .studio-page-clean .task-card-failed__actions > *, .studio-page-clean .task-card-expired__actions > *{min-height:38px;flex:1 1 30%;white-space:nowrap}
  .studio-page-clean .clean-model-panel,.studio-page-clean .clean-parameter-panel{left:8px;right:8px;width:auto;max-height:min(68dvh,420px);padding:7px}
  .studio-page-clean .clean-parameter-panel .clean-option-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:min(42dvh,270px);overflow-y:auto;padding-bottom:2px}
  .studio-page-clean .clean-parameter-panel .clean-option-list > button{min-height:44px;padding:8px 7px;font-size:13px;line-height:18px}
  .studio-page-clean .clean-floating-title{min-height:36px;padding:3px 5px 7px;font-size:14px}
  .studio-page-clean .clean-model-option{min-height:54px;padding:7px 8px}
  .studio-page-clean .clean-model-copy strong{font-size:13px;line-height:18px}
  .studio-page-clean .clean-model-copy small,.studio-page-clean .clean-model-price{font-size:11px;line-height:16px}
  .studio-page-clean .task-feed-card .task-card-failed__inner,.studio-page-clean .task-feed-card .task-card-expired__inner{width:100%}
}

/* Light auth/editor correction: SVG shading and reference controls were still
   using dark surfaces. Color-only rules keep picker and composer geometry. */
html.dreamina-light .studio-page-clean .composer,
html.dreamina-light .studio-page-clean .composer:hover,
html.dreamina-light .studio-page-clean .composer:focus-within {
  box-shadow: inset 0 0 0 1px rgba(155,179,209,.30), 0 10px 28px rgba(64,92,132,.07) !important;
}
html.dreamina-light .studio-page-clean .composer-mask #maskShade {
  fill: #e6edf6;
  fill-opacity: .45;
}
html.dreamina-light .studio-page-clean .composer-mask #maskStroke {
  stroke: #b8c9df;
  stroke-opacity: .3;
}
html.dreamina-light .studio-page-clean .composer-inner,
html.dreamina-light .studio-page-clean .prompt-row,
html.dreamina-light .studio-page-clean .prompt-row:focus-within,
html.dreamina-light .studio-page-clean .studio-prompt-editor,
html.dreamina-light .studio-page-clean .studio-prompt-editor:focus {
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .studio-prompt-editor {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  caret-color: #277efe !important;
}
html.dreamina-light .studio-page-clean .clean-prompt-placeholder {
  color: #6b7686 !important;
  -webkit-text-fill-color: #6b7686 !important;
}
html.dreamina-light .studio-page-clean .reference-panel[data-expanded="true"] .reference-toolbar-actions {
  background: #f5f8fc !important;
}
html.dreamina-light .studio-page-clean .reference-panel .reference-filter,
html.dreamina-light .studio-page-clean .reference-panel .reference-filter span {
  color: #637083 !important;
  -webkit-text-fill-color: #637083 !important;
}
html.dreamina-light .studio-page-clean .reference-panel .reference-filter:hover:not(:disabled),
html.dreamina-light .studio-page-clean .reference-panel .reference-filter[aria-pressed="true"],
html.dreamina-light .studio-page-clean .reference-panel .reference-filter[aria-pressed="true"] span {
  background-color: #e7effb !important;
  color: #315d93 !important;
  -webkit-text-fill-color: #315d93 !important;
}
html.dreamina-light .studio-page-clean .reference-panel .reference-clear,
html.dreamina-light .studio-page-clean .reference-panel .reference-collapse-icon {
  background: #eef2f7 !important;
  border-color: #d8e1ec !important;
  color: #526277 !important;
  -webkit-text-fill-color: #526277 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .reference-panel .reference-clear:hover:not(:disabled),
html.dreamina-light .studio-page-clean .reference-panel .reference-collapse-icon:hover {
  background: #e4ecf7 !important;
  color: #315d93 !important;
  -webkit-text-fill-color: #315d93 !important;
}
html.dreamina-light .studio-page-clean #composerBody .reference-panel .asset-preview,
html.dreamina-light .studio-page-clean #composerBody .reference-panel .asset-item::before {
  box-shadow: 0 3px 9px rgba(64,92,132,.10) !important;
}
html.dreamina-light .studio-page-clean .reference-panel .asset-label {
  color: #637083 !important;
  -webkit-text-fill-color: #637083 !important;
}
html.dreamina-light .studio-page-clean .studio-prompt-editor .prompt-mention-chip {
  background: #eaf2ff !important;
  border-color: #ccdcf2 !important;
  color: #315d93 !important;
  -webkit-text-fill-color: #315d93 !important;
  box-shadow: none !important;
}
html.dreamina-light .studio-page-clean .studio-prompt-editor .prompt-mention-chip:hover {
  background: #dfeaff !important;
  border-color: #b5ccec !important;
}
html.dreamina-light .studio-page-clean .studio-prompt-editor .prompt-mention-token {
  color: #315d93 !important;
  -webkit-text-fill-color: #315d93 !important;
}
html.dreamina-light .studio-page-clean .studio-prompt-editor .prompt-mention-name {
  color: #526277 !important;
  -webkit-text-fill-color: #526277 !important;
}
html.dreamina-light .studio-page-clean .profile-button--guest {
  background: rgba(248,250,255,.95) !important;
  border-color: #d9e5f7 !important;
  color: #315d93 !important;
}
html.dreamina-light .studio-page-clean .profile-button--guest:hover {
  background: #edf4ff !important;
  border-color: #b9d3f5 !important;
}
html.dreamina-light .studio-page-clean .profile-button--guest .profile-avatar {
  color: #277efe !important;
  background: #e5efff !important;
}
html.dreamina-light .studio-page-clean .profile-button--guest strong {
  color: #315d93 !important;
  -webkit-text-fill-color: #315d93 !important;
}
html.dreamina-light .studio-page-clean .profile-button--guest small {
  color: #637083 !important;
  -webkit-text-fill-color: #637083 !important;
}

/* Embedded pages keep their existing authenticated layout. Guests need the
   same visible login entry as the studio, above the empty personal surface. */
.studio-page-clean-shell[data-embedded-page="true"][data-guest="true"] .workspace.workspace-embedded {
  padding-top: 0 !important;
}
.studio-page-clean-shell[data-embedded-page="true"][data-guest="true"] .account-tools--guest-embedded {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-height: 56px;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: 8px 20px;
}
.studio-page-clean-shell[data-embedded-page="true"][data-guest="true"] .account-tools--guest-embedded .profile-copy small {
  display: none;
}

/* Video upscale is a focused processing surface: the reference video stays
   full-width, while the toolbar contains only the model selector and submit
   action. Keep this override last so the normal three-part editor rules never
   reintroduce a prompt column or frame parameters. */
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 0 !important;
  row-gap: 10px !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel,
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"],
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--upscale-reference-height, 104px) !important;
  min-height: 104px !important;
  max-height: none !important;
  padding: 0 !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .references,
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .references {
  width: 100% !important;
  min-height: 104px !important;
  max-width: 100% !important;
  padding: 0 2px 4px !important;
  height: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .asset-item,
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .asset-item {
  flex: 0 0 118px !important;
  width: 118px !important;
  height: 104px !important;
  margin: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .asset-preview,
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .asset-preview {
  width: 112px !important;
  height: 92px !important;
  border-radius: 12px !important;
  transform: none !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .reference-overflow-trigger,
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .reference-overflow-trigger,
.studio-page-clean[data-media="upscale"] .reference-toolbar {
  display: none !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .upscale-editor-note {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0;
  margin: 0;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .composer-controls {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .composer-controls .parameter-tools {
  flex: 1 1 auto;
  min-width: 0;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .composer-controls .model-button {
  max-width: min(460px, 100%);
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .composer-controls .clean-cost-label {
  display: inline-flex;
}
.studio-page-clean .upscale-editor-note {
  align-items: center;
  gap: 8px;
  color: #aeb4bd;
  font-size: 12px;
}
.studio-page-clean .upscale-editor-note > svg {
  width: 16px;
  height: 16px;
  color: #c5eff5;
}
@media (max-width: 700px) {
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    padding: 12px !important;
  }
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel,
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"],
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] {
    min-height: 96px !important;
  }
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .references,
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .references {
    min-height: 96px !important;
  }
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .asset-item,
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .asset-item {
    flex-basis: 104px !important;
    width: 104px !important;
    height: 96px !important;
  }
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="false"] .asset-preview,
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel[data-expanded="true"] .asset-preview {
    width: 98px !important;
    height: 84px !important;
  }
}

html.dreamina-light .studio-page-clean[data-media="upscale"] .upscale-editor-note > svg {
  color: #277efe;
}
html.dreamina-light .studio-page-clean[data-media="upscale"] .upscale-editor-note {
  color: #637083;
}

/* Upscale references are a dedicated video strip. Keep the add card after
   every video and out of the normal stacked-reference positioning rules. */
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger {
  order: 999 !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 118px !important;
  width: 118px !important;
  height: 104px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger .stack-card {
  display: none !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger .stack-front {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  color: #eef3f7 !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger .reference-add-icon {
  width: 30px !important;
  height: 30px !important;
  color: #eef3f7 !important;
  stroke: currentColor !important;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger .reference-add-icon path {
  stroke: currentColor !important;
}
html.dreamina-light .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger {
  background: #edf3fa !important;
  border-color: #cfdae8 !important;
}
html.dreamina-light .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger .reference-add-icon {
  color: #315d93 !important;
}
@media (max-width: 700px) {
  .studio-page-clean[data-media="upscale"] #composerBody.composer-inner > #referencePanel.reference-panel .references > .upload-trigger {
    flex-basis: 104px !important;
    width: 104px !important;
    height: 96px !important;
  }
}

.studio-page-clean .clean-duration-label {
  align-self: center;
  margin-right: 6px;
  color: #62e6bc;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.studio-page-clean .clean-duration-label.is-pending {
  color: #f0c674;
}
.studio-page-clean .clean-duration-label.is-over-limit {
  color: #ff8f8f;
}
.studio-page-clean[data-media="upscale"] #composerBody.composer-inner > .upscale-editor-note {
  align-self: start !important;
  min-height: 18px !important;
  line-height: 18px !important;
}
.studio-page-clean[data-media="upscale"] .upscale-editor-note > svg {
  flex: 0 0 16px !important;
}
.studio-page-clean[data-media="upscale"] .upscale-editor-note > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html.dreamina-light .studio-page-clean .clean-duration-label {
  color: #138a68;
}
html.dreamina-light .studio-page-clean .clean-duration-label.is-pending {
  color: #9a6800;
}
html.dreamina-light .studio-page-clean .clean-duration-label.is-over-limit {
  color: #c23b3b;
}