/* The two side columns follow the supplied reference layouts. The central workspace keeps its existing style. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{grid-template-columns:270px minmax(0,1fr) 430px;max-width:none}

/* Left: compact, searchable model directory. */
.sidebar{background:#fff;border-right:1px solid #efedf5;color:#4b4860}
.sidebar .brand{height:84px;padding:0 18px;border-bottom:1px solid #f0edf6}
.sidebar .brand-mark{width:42px;height:42px;background:linear-gradient(145deg,#8a75ef,#b292fa);box-shadow:0 7px 16px #a38aef55}
.sidebar .brand strong{color:#292841;font-size:18px}
.sidebar .brand small{color:#aba8b9;font-size:11px}
.sidebar-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:13px 9px 12px;border-bottom:1px solid #f0edf6}
.sidebar-shortcut{border:0;border-radius:11px;background:transparent;color:#918ca3;min-height:58px;padding:7px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:700}
.sidebar-shortcut svg{width:19px;height:19px}
.sidebar-shortcut:hover{background:#f7f4ff;color:#795fd9}
.sidebar-shortcut.active{background:#f0ebff;color:#785ed7}
.sidebar-shortcut:focus-visible,.resource-tab:focus-visible,.resource-card:focus-visible,.history-actions button:focus-visible{outline:2px solid #9e8cff;outline-offset:2px}
.resource-toolbar{padding:12px 10px 7px;flex:none}
.resource-tabs{display:flex;justify-content:space-between;gap:2px;background:#f8f6fc;border-radius:10px;padding:3px}
.resource-tab{border:0;background:transparent;color:#9691a6;padding:7px 6px;border-radius:7px;font-size:11px;white-space:nowrap;min-width:0}
.resource-tab.active{background:#e8defd;color:#775bd2;font-weight:800;box-shadow:0 0 0 1px #d8c7f6}
.resource-tab:hover:not(.active){color:#795fd9;background:#f0ebfb}
.resource-controls{display:flex;gap:6px;margin-top:12px}
.resource-controls select,.resource-search{height:34px;border:1px solid #e7e2f0;border-radius:8px;background:#fff;color:#625d75;font-size:11px;outline:0}
.resource-controls select{width:88px;padding:0 5px;flex:none}
.resource-search{flex:1;min-width:0;display:flex;align-items:center;gap:3px;padding:0 7px}
.resource-search span{font-size:18px;color:#a88edc;line-height:1}
.resource-search input{border:0;outline:0;background:transparent;color:#403b57;width:100%;min-width:0;font-size:11px}
.resource-search input::placeholder{color:#b2adbe}
.resource-count{display:flex;justify-content:space-between;color:#8e88a3;font-size:11px;padding:13px 3px 5px;font-weight:700}
.resource-count span:last-child{font-weight:400;color:#aaa4b8}
.resource-list{padding:0 10px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ddd6ee transparent;min-height:0;flex:1}
.resource-card{background:#fff;border:1px solid #eee9f4;border-radius:11px;padding:11px 10px 10px;margin:5px 0 8px;cursor:pointer;box-shadow:0 3px 12px #30205808;transition:background .2s,border-color .2s,transform .2s}
.resource-card:hover{background:#fcfaff;border-color:#cbbbee;transform:translateY(-1px)}
.resource-card.selected{background:#faf7ff;border-color:#bba9ee;box-shadow:0 0 0 2px #a58bec1a}
.resource-card-head{display:flex;align-items:center;gap:8px}
.resource-card-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:18px;flex:none}
.resource-card-head strong{font-size:13px;color:#4b485e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.resource-official{font-size:10px;color:#8e73d7;background:#f2edff;border:1px solid #e2d8fa;padding:3px 5px;border-radius:4px;white-space:nowrap}
.resource-pin{border:0;background:transparent;color:#b6aacd;font-size:18px;line-height:1;padding:2px;flex:none}
.resource-pin:hover,.resource-pin[aria-pressed="true"]{color:#d3a444}
.resource-card p{color:#9f9aad;font-size:11px;line-height:1.45;margin:8px 0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resource-card-footer{display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:10px;color:#aaa4b8}
.resource-card-footer a{color:#856bd6;font-weight:700;white-space:nowrap}
.resource-card-footer a:hover{text-decoration:underline;color:#644ac0}
.resource-empty{padding:22px 8px;color:#aaa4b8;text-align:center;line-height:1.6;font-size:12px}
.selected-model-label{display:inline-block!important;margin-top:8px!important;padding:5px 8px;border-radius:7px;background:#f4efff;color:#856bd6!important;font-size:11px!important;font-weight:700}
.sidebar .sidebar-bottom{width:calc(100% - 20px);border:1px solid #ede4ff;background:#f5f0ff;color:#5b4a9a;margin:8px 10px 12px;padding:10px;cursor:pointer;text-align:left;flex:none}
.sidebar .sidebar-bottom:hover{background:#eee6ff}
.sidebar .sidebar-bottom strong{color:#5b4a9a;font-size:11px}
.sidebar .sidebar-bottom span{color:#9b90b8;font-size:10px}
.sidebar .sidebar-bottom svg{width:16px;height:16px;transform:rotate(-90deg);color:#9b8abb;margin-left:auto}
.tiny-mascot{background:#bcaaf2}

/* Right: a split result and prompt history layout. */
.history-panel{min-height:100vh;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;min-width:0;background:#faf9fd;border-left:1px solid #ebe7f4;transition:box-shadow .3s,transform .25s}
.history-panel.highlight{box-shadow:inset 0 0 0 3px #b6a0f4}
.history-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;border-bottom:1px solid #eeeaf5;background:#fff;flex:none}
.history-kicker{display:block;color:#ac9bd9;letter-spacing:1.5px;font-size:9px;font-weight:800;margin-bottom:5px}
.history-header h2{margin:0;color:#37334c;font-size:17px;line-height:1}
.history-header h2 span{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:7px;background:#efeafb;color:#8b70d4;font-size:10px;margin-left:5px;vertical-align:2px}
.history-close{display:none}
.history-tools{display:flex;align-items:center;gap:6px;padding:13px 12px 11px;border-bottom:1px solid #efebf5;flex:none;background:#fff}
.history-filter{border:1px solid #e9e4f2;border-radius:8px;background:#fff;color:#928da5;font-size:10px;padding:7px 8px;white-space:nowrap}
.history-filter.active{background:#eee9fb;border-color:#d9cff3;color:#785dc8;font-weight:700}
.history-tools select{margin-left:auto;max-width:105px;min-width:82px;height:30px;border:1px solid #e9e4f2;border-radius:8px;background:#fff;color:#7e798e;font-size:10px;padding:0 4px}
.history-list{min-height:0;flex:1;overflow-y:auto;padding:14px 12px 24px;scrollbar-width:thin;scrollbar-color:#d8d0ed transparent}
.history-empty-card,.history-record{background:#fff;border:1px solid #ebe7f2;border-radius:13px;padding:12px;margin-bottom:11px;box-shadow:0 5px 16px #3e2d6108}
.history-empty-card>strong{display:block;color:#534d68;font-size:13px;margin-bottom:5px}
.history-empty-card>p{color:#a6a0b4;font-size:11px;line-height:1.5;margin:0 0 13px}
.history-record-head{display:flex;justify-content:space-between;align-items:center;padding:1px 2px 11px;gap:8px}
.history-record-head strong{color:#4c465e;font-size:12px}
.history-record-head time{color:#aaa4b7;font-size:10px}
.history-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:149px}
.history-preview,.history-prompt{border-radius:9px;padding:10px;min-width:0;overflow:hidden}
.history-preview{background:radial-gradient(circle at 65% 32%,#fdf5ff 0 18%,transparent 19%),linear-gradient(135deg,#e3ddff,#f8dfef);color:#7760b6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}
.history-preview .preview-spark{font-size:28px;line-height:1}
.history-preview b{font-size:11px;line-height:1.3}
.history-preview small{font-size:9px;color:#a392c3;line-height:1.3}
.history-prompt{background:#f7f5fb;display:flex;flex-direction:column}
.history-prompt span{color:#80798e;font-size:10px;font-weight:700;border-bottom:1px solid #e8e3f1;padding-bottom:7px}
.history-prompt p{color:#777184;font-size:11px;line-height:1.55;margin:9px 0 0;overflow-wrap:anywhere;overflow-y:auto;scrollbar-width:thin}
.history-prompt.placeholder p{color:#a9a3b3}
.history-actions{display:flex;gap:6px;padding:10px 1px 0;flex-wrap:wrap}
.history-actions button{border:1px solid #e6dff5;border-radius:7px;background:#fbf9ff;color:#8066c8;font-size:10px;padding:5px 7px}
.history-actions button:hover{background:#eee8fc}
.history-actions button[aria-pressed="true"]{color:#b77b45;background:#fff5e7;border-color:#f1dfc2}
.history-jump{display:none;align-items:center;gap:6px;border:1px solid #e7e0f7;border-radius:9px;background:#faf8ff;color:#8166d4;font-size:11px;font-weight:700;padding:8px 10px}
.history-jump svg{width:15px;height:15px}

/* Keep profile as an on-demand drawer so the right column can show history. */
.profile-panel{position:fixed;top:0;right:0;width:285px;max-width:92vw;height:100vh;min-height:0;z-index:31;transform:translateX(100%);transition:transform .25s;box-shadow:-15px 0 30px #27204015}
.profile-panel.open{transform:translateX(0)}
.profile-close{display:grid;background:transparent;color:#7c758b;width:32px;height:32px}
.profile-top-star{display:none}
.scrim:not([hidden]){display:block;position:fixed;inset:0;background:#1c173a55;z-index:30}

@media(max-width:1450px){.app-shell{grid-template-columns:252px minmax(0,1fr) 375px}.content-wrap{padding-left:27px;padding-right:27px}.topbar{padding-left:27px;padding-right:27px}}
@media(max-width:1180px){.app-shell{grid-template-columns:252px minmax(0,1fr)}.history-panel{position:fixed;right:0;top:0;width:min(440px,94vw);z-index:31;transform:translateX(100%);box-shadow:-15px 0 30px #27204015}.history-panel.open{transform:translateX(0)}.history-close{display:grid;width:30px;height:30px;background:#f5f1ff;color:#836bc5;border-radius:8px}.history-jump{display:flex}.history-list{padding-bottom:20px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{width:270px;z-index:31}.sidebar.open{transform:translateX(0)}.content-wrap{padding-left:16px;padding-right:16px}.topbar{padding-left:17px;padding-right:17px}.topbar-right{gap:8px}.history-jump{padding:7px;font-size:0}.history-jump svg{width:17px;height:17px}.history-header{height:62px}.history-split{min-height:138px}}

.generation-result{margin-top:18px;padding:17px;background:#faf8ff;border:1px solid #e8e0f7;border-radius:14px;color:#544a6b;overflow-wrap:anywhere}
.generation-result>strong{display:block;margin-bottom:10px;font-size:13px}
.generation-result .result-text{white-space:pre-wrap;line-height:1.7;margin:0;font-size:13px}
.generation-result img,.generation-result video{display:block;max-width:100%;max-height:420px;border-radius:10px;margin:10px 0}
.generation-result audio{width:min(100%,500px);display:block;margin:10px 0}
.generation-result small{display:block;line-height:1.5}
.generation-result a,.history-preview a{color:#735dc1;font-weight:700;font-size:11px;text-decoration:none;margin-top:8px}
.history-preview img{width:100%;height:100%;max-height:132px;object-fit:cover;border-radius:6px}
.history-preview .result-text{font-size:10px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;text-align:left;white-space:pre-wrap;margin:0}
.history-preview small{overflow-wrap:anywhere}
.generate-button:disabled{opacity:.65;cursor:wait;transform:none}

/* The left directory follows the current dub999.com sidebar structure while retaining this site's light palette. */
.app-shell{grid-template-columns:270px minmax(0,1fr) 430px}
.sidebar{width:270px;overflow:hidden}
.sidebar .brand{height:90px;padding:0 13px 0 18px;gap:10px;flex:none}
.brand-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 4px 13px #b8aad255;flex:none}
.brand-copy{min-width:0;flex:1}
.sidebar .brand strong{font-size:17px;color:#287f94;white-space:nowrap}
.sidebar .brand small{font-size:10px;white-space:nowrap}
.sidebar-collapse{height:31px;width:31px;border:1px solid #e4dff0;border-radius:50%;background:#f6f4fb;color:#807695;font-size:24px;line-height:24px;flex:none;cursor:pointer}
.sidebar-shortcuts{height:84px;padding:9px 9px 10px;gap:3px}
.sidebar-shortcut{min-height:57px;font-size:10px;padding:5px 1px;gap:4px}
.sidebar-shortcut svg{width:19px;height:19px}
.resource-toolbar{padding:9px 10px 7px;border-bottom:1px solid #f0edf6}
.resource-tabs{height:39px;align-items:center;background:#f7f5fa}
.resource-tab{font-size:11px;padding:6px 3px}
.resource-controls{margin-top:12px;gap:6px}
.resource-controls select,.resource-search{height:32px}
.resource-controls select{width:84px;font-size:10px}
.resource-search{border-color:#e2d9f0;background:#fbf9ff}
.resource-list{padding:8px 10px 12px;scrollbar-color:#d8d0e8 transparent}
.resource-card{height:78px;padding:8px 9px;margin:4px 0;position:relative;border:1px solid transparent;box-shadow:none;border-radius:10px;display:flex;align-items:center;background:transparent}
.resource-card:hover{background:#f8f5fd;border-color:#efe7fa;transform:none}
.resource-card.selected{background:#f2eef9;border:1px solid #e6dcf5;box-shadow:none}
.resource-card-head{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.resource-icon-wrap{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.resource-card-logo{width:35px;height:35px;border-radius:9px;background:#f1edf8;color:#9078cf;overflow:hidden;font-size:20px}
.resource-card-logo img{width:100%;height:100%;object-fit:contain}
.resource-pin{position:absolute;z-index:1;left:-4px;top:-3px;width:17px;height:17px;border:1px solid #d6cdec;border-radius:5px;background:#fff;color:#8575ac;font-size:0;padding:0;display:grid;place-items:center;overflow:visible}
.resource-pin::before{content:'◇';font-size:14px;line-height:1}
.resource-pin[aria-label^="取消"]::before{content:'◆';color:#c49431}
.resource-pin:hover{background:#fff4d8}
.resource-new{position:absolute;top:-4px;right:-10px;background:#ff7b89;color:#fff;border-radius:5px;padding:1px 3px;font-size:8px;line-height:1;font-weight:800;box-shadow:0 2px 4px #c85b7744}
.resource-info{flex:1;min-width:0}
.resource-name-row{display:flex;align-items:center;gap:5px;min-width:0;margin-bottom:4px}
.resource-name-row strong{color:#454052;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.resource-official{font-size:9px;padding:2px 4px;color:#21a580;background:#e7f9f2;border-color:#bcead8;flex:none}
.resource-official[data-type="chat"]{color:#25a6b7;background:#e9fafe;border-color:#c2eaf1}
.resource-official[data-type="image"]{color:#b573c7;background:#faeefd;border-color:#eddbf3}
.resource-official[data-type="video"]{color:#b78445;background:#fff6e7;border-color:#f2dfbd}
.resource-official[data-type="audio"]{color:#279c72;background:#e7f9f0;border-color:#bfe9d3}
.resource-card p{font-size:10px;line-height:1.35;margin:0;color:#9a93a7;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resource-remove{position:absolute;right:10px;bottom:3px;border:0;background:transparent;color:#9a84c9;font-size:9px;cursor:pointer}
.resource-add{display:block;width:calc(100% - 16px);margin:14px 8px;border:1px dashed #cfc3e6;border-radius:9px;padding:10px;background:#faf8fe;color:#7c67ad;cursor:pointer;font-size:11px}
.resource-empty,.resource-loading{font-size:11px;color:#aaa3b7;text-align:center;padding:14px 5px}
.sidebar .sidebar-bottom{height:59px;margin:7px 10px 13px;padding:8px 10px;border-color:#e7d2a6;background:#fff9e9;border-radius:10px}
.sidebar .sidebar-bottom strong{font-size:12px;color:#816338}
.sidebar .sidebar-bottom span{font-size:9px;color:#aa9470;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px}
.sidebar-login-icon{width:35px;height:35px;border:1px solid #dcb756;border-radius:50%;display:grid;place-items:center;color:#b5872e;font-size:23px;flex:none}
.sidebar .sidebar-bottom svg{color:#bd8d34}
.model-picker{width:min(530px,calc(100vw - 36px));max-height:min(620px,85vh);padding:0;border:1px solid #ebe4f4;border-radius:17px;background:#fff;color:#454052;box-shadow:0 20px 60px #39285a44}
.model-picker::backdrop{background:#28203588;backdrop-filter:blur(3px)}
.model-picker-header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #eee9f4}
.model-picker-header strong{font-size:16px}
.model-picker-header button{border:0;background:#f6f3fa;border-radius:8px;width:29px;height:29px;font-size:19px;color:#857993;cursor:pointer}
.model-picker>input{display:block;width:calc(100% - 34px);height:38px;margin:15px 17px;border:1px solid #e5dff0;border-radius:9px;padding:0 11px;outline:0;background:#faf9fc;color:#494258}
.model-picker-list{height:min(465px,calc(85vh - 130px));overflow:auto;padding:2px 17px 17px}
.model-picker-item{display:grid;grid-template-columns:minmax(0,1fr) 48px;text-align:left;gap:3px 9px;width:100%;padding:10px 9px;border:0;border-radius:9px;background:#fff;color:#4c445b;cursor:pointer}
.model-picker-item:hover{background:#f7f4fb}
.model-picker-item strong{font-size:12px;grid-column:1}
.model-picker-item small{font-size:10px;line-height:1.35;color:#9991a5;grid-column:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.model-picker-item span{grid-column:2;grid-row:1/3;align-self:center;color:#6d91a1;background:#eef7f9;border-radius:20px;padding:4px 5px;text-align:center;font-size:10px}
.app-shell.sidebar-collapsed{grid-template-columns:56px minmax(0,1fr) 430px}
.sidebar-collapsed .sidebar{width:56px}
.sidebar-collapsed .brand{padding:0 12px}
.sidebar-collapsed .brand-logo,.sidebar-collapsed .brand-copy,.sidebar-collapsed .sidebar-shortcuts,.sidebar-collapsed .resource-toolbar,.sidebar-collapsed .resource-list,.sidebar-collapsed .sidebar-bottom{display:none}
.sidebar-collapsed .sidebar-collapse{display:block}
@media(max-width:1450px){.app-shell{grid-template-columns:270px minmax(0,1fr) 375px}.app-shell.sidebar-collapsed{grid-template-columns:56px minmax(0,1fr) 375px}}
@media(max-width:1180px){.app-shell{grid-template-columns:270px minmax(0,1fr)}.app-shell.sidebar-collapsed{grid-template-columns:56px minmax(0,1fr)}}
@media(max-width:720px){.sidebar{width:270px}.app-shell.sidebar-collapsed{display:block}.sidebar-collapsed .sidebar{width:56px}}

/* Keep the existing controls, arranged as a single composer below model selection. */
.prompt-composer{max-width:960px;margin:27px auto 0}
.prompt-composer .field-heading{margin:0 0 9px;padding:0 2px}
.prompt-composer .prompt-box{min-height:190px;border:1px solid #ded7ee;border-radius:18px;background:#fbfaff;box-shadow:0 12px 28px #5f4c9d0b;overflow:hidden}
.prompt-composer .prompt-box:focus-within{border-color:#9e8be2;box-shadow:0 0 0 3px #a994ed1f,0 12px 28px #5f4c9d0b}
.composer-input-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:14px;padding:16px 17px 7px;min-height:134px}
.composer-mode-icon{width:48px;height:66px;border:1px dashed #cfc2e7;border-radius:9px;background:#f1ecfb;color:#9178cf;display:grid;place-items:center;font-size:23px;line-height:1;transform:rotate(-5deg)}
.prompt-composer .prompt-box textarea{height:110px;min-height:110px;max-height:300px;padding:2px 0 0;background:transparent;font-size:13px;line-height:1.65;resize:vertical}
.prompt-composer .prompt-footer{min-height:55px;padding:6px 13px 12px 17px;gap:9px;align-items:center}
.prompt-composer .selected-model-label{margin:0!important;max-width:min(65%,390px);border:1px solid #e1d9f2;background:#f1ecfb;padding:8px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;cursor:pointer}
.prompt-composer .selected-model-label:hover{border-color:#bba8e8;background:#ebe4fb}
.composer-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.prompt-composer .clear-button{padding:7px 3px;font-size:11px}
.prompt-composer .generate-button{width:41px;height:41px;min-height:41px;padding:0;display:grid;place-items:center;flex:none;border-radius:50%;box-shadow:0 5px 13px #8b73e43d}
.prompt-composer .generate-button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prompt-composer .generate-button .button-arrow{width:19px;height:19px;margin:0;transform:rotate(-90deg)}
.prompt-composer .generate-button:disabled{cursor:not-allowed}
.prompt-composer .action-row{margin-top:9px;padding:0 2px}
@media(max-width:720px){.prompt-composer{margin-top:22px}.composer-input-row{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:14px 13px 5px;min-height:134px}.composer-mode-icon{width:39px;height:55px;font-size:19px}.prompt-composer .prompt-footer{padding:6px 11px 11px}.prompt-composer .selected-model-label{max-width:calc(100% - 95px)}.prompt-composer .generate-button{width:39px;height:39px;min-height:39px}}

/* The center follows the reference's open canvas and bottom composer. */
.main-content{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f8f8fc}
.main-content .topbar{height:68px;flex:none;background:#f8f8fc;border-bottom:0;padding:0 26px}
.main-content .topbar-left{gap:10px}
.main-content .history-jump{display:inline-flex;font-size:12px;background:#eee9fb;border-color:#e1d8f6;color:#7358c1;padding:9px 14px}
.main-content .history-jump:hover{background:#e5dcf8}
.model-canvas{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;margin:0;padding:0 24px 15px}
.model-stage{min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:28px;padding:clamp(28px,5vh,66px) 18px 24px;scrollbar-width:thin}
.stage-icon{width:104px;height:104px;display:grid;place-items:center;flex:none;filter:drop-shadow(0 12px 18px #8f80c52e)}
.stage-icon img{display:block;width:94px;height:94px;object-fit:contain}
.stage-icon img[hidden],.stage-icon span[hidden]{display:none}
.stage-icon span{font-size:76px;line-height:1;color:#8e74e7}
.stage-description{max-width:600px;width:100%;margin:0;padding:17px 20px;border:1px solid #d9cfee;border-radius:11px;background:#fff;color:#5b536c;font-size:13px;line-height:1.8;box-shadow:0 8px 26px #74699b0b}
.model-stage .generation-result{max-width:760px;width:100%;margin:0 0 12px}
.model-canvas .workspace-section{flex:none;width:min(100%,980px);margin:0 auto}
.model-canvas .workspace-body{padding:0;background:transparent}
.model-canvas .prompt-composer{margin:0;max-width:none}
.model-canvas .prompt-composer .field-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.model-canvas .prompt-composer .prompt-box{min-height:158px;background:#fff;border-radius:16px;box-shadow:0 12px 28px #4d3d7a14}
.model-canvas .composer-input-row{min-height:105px;padding:15px 17px 3px}
.model-canvas .prompt-composer .prompt-box textarea{height:92px;min-height:92px}
.model-canvas .prompt-composer .prompt-footer{min-height:52px;padding-bottom:11px}
.composer-count{font-size:10px;color:#aaa4b9;white-space:nowrap}
.model-canvas .prompt-composer .action-row{margin-top:7px}
.model-canvas .prompt-composer .action-hint{font-size:10px}
.main-content .secondary-view{width:100%;flex:1;min-height:0;overflow-y:auto}
@media(max-width:720px){.main-content .topbar{height:62px;padding:0 16px}.model-canvas{padding:0 12px 12px}.model-stage{padding:32px 3px 16px;gap:18px}.stage-icon{width:78px;height:78px}.stage-icon img{width:74px;height:74px}.stage-icon span{font-size:59px}.stage-description{font-size:12px;padding:13px 14px}.model-canvas .composer-input-row{padding:13px 11px 3px;min-height:101px}.model-canvas .prompt-composer .prompt-box textarea{height:89px;min-height:89px}.composer-count{display:none}}

/* Image composer: the reference controls live together while using this site's light palette. */
#createView{width:100%;max-width:1180px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.composer-shell{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:end}
.composer-side-tools{display:flex;flex-direction:column;gap:7px;padding-bottom:11px}
.composer-side-tools button{width:34px;height:34px;border:1px solid #ddd5ef;border-radius:11px;background:#fff;color:#8973ca;font-size:18px;display:grid;place-items:center;box-shadow:0 3px 9px #5b4b8f0d;cursor:pointer}
.composer-side-tools button:hover,.composer-side-tools button.active{border-color:#9d86e2;background:#eee8ff;color:#755bd2}
.composer-side-tools button:disabled{opacity:.35;cursor:not-allowed}
.prompt-composer .prompt-box{min-width:0}
.composer-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px 0}
.prompt-composer .composer-topline .selected-model-label{max-width:65%;font-size:11px}
.composer-price{font-size:10px;color:#9d87b7;background:#f3effa;border-radius:14px;padding:5px 8px;white-space:nowrap}
.prompt-composer .composer-input-row{grid-template-columns:auto minmax(0,1fr);gap:13px;padding-top:14px;min-height:112px}
.reference-zone{display:flex;align-items:flex-start;gap:7px;max-width:235px;overflow-x:auto;padding:2px 3px 7px;scrollbar-width:thin}
.reference-add{width:54px;min-width:54px;height:66px;border:1px dashed #c9bce7;border-radius:9px;background:#f5f1fd;color:#9074d5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform:rotate(-5deg);cursor:pointer}
.reference-add span{font-size:24px;line-height:1}
.reference-add small{font-size:9px;color:#9185b0;white-space:nowrap}
.reference-add:disabled{opacity:.5;cursor:not-allowed}
.reference-preview{display:flex;gap:6px}
.reference-thumb{position:relative;width:57px;height:66px;flex:none;border:1px solid #e7def4;border-radius:8px;overflow:hidden;background:#fff}
.reference-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.reference-thumb button{position:absolute;top:1px;right:1px;width:17px;height:17px;padding:0;border:0;border-radius:50%;background:#5c4d75d9;color:white;line-height:16px;cursor:pointer}
.prompt-composer .composer-input-row textarea{min-height:83px;height:83px;max-height:300px}
.composer-model-hint{margin:0 17px 12px;padding-left:1px;color:#9f99ae;font-size:10px;line-height:1.55}
.composer-parameter-bar{display:flex;align-items:end;gap:6px;flex-wrap:wrap;padding:4px 15px 12px}
.composer-parameter-bar label{display:flex;flex-direction:column;gap:3px;font-size:9px;color:#a7a0b5}
.composer-parameter-bar select{max-width:147px;min-height:29px;border:1px solid #e4def0;border-radius:7px;background:#f7f5fb;color:#5d5471;font-size:11px;font-weight:600;padding:0 7px;cursor:pointer;outline:0}
.composer-parameter-bar select:focus{border-color:#9d86e2}
.prompt-composer .prompt-footer{border-top:1px solid #f0ecf7;padding-top:9px}
.composer-meta{display:flex;align-items:center;gap:10px;min-width:0}
.composer-count{font-size:10px;color:#aaa4b9;white-space:nowrap}
.composer-ai{border:1px solid #dfd6f0;border-radius:8px;background:#f7f2ff;color:#8066c9;font-size:10px;font-weight:700;padding:6px 8px;white-space:nowrap;cursor:pointer}
.composer-ai:hover{background:#efe6ff}
.composer-ai:disabled{opacity:.6;cursor:wait}
.prompt-composer.expanded .prompt-box textarea{height:240px;max-height:50vh}
.prompt-composer.expanded .composer-input-row{min-height:250px}
@media(max-width:720px){.composer-shell{grid-template-columns:minmax(0,1fr);gap:5px}.composer-side-tools{flex-direction:row;padding:0;justify-content:flex-end}.composer-side-tools:first-child{justify-content:flex-start}.composer-side-tools button{width:29px;height:29px;font-size:15px}.composer-topline{padding:10px 11px 0}.composer-price{font-size:9px}.prompt-composer .composer-input-row{padding:11px;gap:8px}.reference-zone{max-width:115px}.reference-add{width:45px;min-width:45px;height:56px}.reference-thumb{width:46px;height:56px}.prompt-composer .composer-input-row textarea{font-size:12px}.composer-parameter-bar{padding:4px 10px 10px}.composer-parameter-bar select{max-width:120px}.composer-model-hint{margin:0 11px 10px}.composer-count{display:block}}

/* Keep the center clear and dock the compact composer to its bottom edge. */
.main-content .topbar{display:none}
#createView.model-canvas{width:100%;max-width:none;flex:1;min-height:0;overflow:hidden;margin:0;padding:0 24px 13px}
#createView .model-stage{flex:1;min-height:0;overflow-y:auto;align-items:stretch;padding:24px 0}
#createView .model-stage .generation-result{width:min(100%,980px);max-width:980px;margin:0 auto}
#createView .workspace-section{width:min(100%,980px);margin:0 auto;flex:none}
#createView .prompt-composer{margin:0;max-width:none}
#createView .prompt-composer .field-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#createView .prompt-composer .prompt-box{min-height:0;border-radius:13px;background:#fff}
#createView .composer-shell{grid-template-columns:32px minmax(0,1fr) 32px;gap:7px}
#createView .composer-side-tools{gap:5px;padding-bottom:7px}
#createView .composer-side-tools button{width:32px;height:32px;border-radius:9px;font-size:16px}
#createView .composer-topline{height:31px;padding:6px 11px 0}
#createView .prompt-composer .composer-topline .selected-model-label{font-size:10px;padding:4px 7px;max-width:55%}
#createView .composer-price{font-size:11px;padding:4px 6px;max-width:54%;overflow:hidden;text-overflow:ellipsis}
#createView .composer-input-row{min-height:76px;padding:8px 11px 2px;gap:10px;align-items:start}
#createView .reference-zone{max-width:170px;padding-bottom:3px}
#createView .reference-add{width:43px;min-width:43px;height:53px}
#createView .reference-add span{font-size:18px}
#createView .reference-add small{font-size:8px}
#createView .reference-thumb{width:43px;height:53px}
#createView .composer-mode-icon{width:37px;height:48px;font-size:17px}
#createView .prompt-composer .composer-input-row textarea{height:66px;min-height:66px;max-height:180px;font-size:12px;line-height:1.45;resize:none}
#createView .composer-model-hint{display:none}
#createView .composer-parameter-bar{gap:5px;padding:2px 10px 7px;flex-wrap:wrap}
#createView .composer-parameter-bar label{font-size:0;gap:0}
#createView .composer-parameter-bar select{min-height:26px;max-width:132px;padding:0 5px;font-size:10px}
#createView .prompt-composer .prompt-footer{min-height:39px;padding:5px 10px 6px;border-top:0}
#createView .composer-ai{padding:5px 6px;font-size:9px}
#createView .prompt-composer .clear-button{font-size:10px}
#createView .prompt-composer .generate-button{width:31px;height:31px;min-height:31px}
#createView .prompt-composer .generate-button .button-arrow{width:16px;height:16px}
#createView .prompt-composer .action-row{margin-top:4px}
#createView .prompt-composer .action-hint{font-size:9px}
#createView .prompt-composer.expanded .composer-input-row{min-height:190px}
#createView .prompt-composer.expanded .prompt-box textarea{height:180px;max-height:50vh}
.prompt-composer.channel-open .prompt-box{overflow:visible;position:relative;z-index:20}
.channel-control{position:relative;flex:none}
.channel-trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:26px;padding:0 6px;border:1px solid #e4def0;border-radius:7px;background:#f7f5fb;color:#5d5471;font-size:10px;font-weight:700;cursor:pointer}
.channel-trigger:hover,.channel-trigger[aria-expanded="true"]{border-color:#a994e8;background:#f0ebfc}
.channel-popover[hidden]{display:none}
.channel-popover{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;width:min(420px,calc(100vw - 32px));max-height:min(540px,68vh);overflow-y:auto;padding:14px;border:1px solid #ded5f4;border-radius:15px;background:#fff;box-shadow:0 18px 46px #47377b35;color:#3e355b;font-size:12px;line-height:1.4}
.channel-heading,.channel-list-heading,.channel-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.channel-heading strong{font-size:14px}
.channel-heading span{color:#8b7eab;font-size:11px}
.channel-help{margin:9px 0 12px;color:#746795}
.channel-help summary{cursor:pointer;color:#7b60c4}
.channel-help p{margin:7px 0 0}
.channel-strategies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.channel-strategy{min-height:47px;padding:7px 9px;border:1px solid #ece7f5;border-radius:9px;background:#faf9fd}
.channel-strategy.current{border-color:#9c82e7;background:#f2edff}
.channel-strategy strong,.channel-strategy small{display:block}
.channel-strategy strong{font-size:11px}
.channel-strategy small{margin-top:3px;color:#9288a7;font-size:10px}
.channel-disclaimer{margin:10px 1px;color:#817694;font-size:11px}
.channel-list-heading{padding:8px 1px;border-top:1px solid #eee9f7;font-weight:700}
.channel-list-heading span{color:#8e7dbc;font-size:11px}
.channel-groups{display:grid;gap:6px}
.channel-group{padding:9px 10px;border:1px solid #eeeaf5;border-radius:10px;background:#fcfbff}
.channel-group-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.channel-group-head span{flex:none;color:#7c70a0;font-size:10px}
.channel-group-rate{margin-top:4px;color:#b77a25;font-size:11px;font-weight:700}
.channel-group-notes{margin:5px 0 0;color:#92869e;font-size:10px}
@media(max-width:720px){#createView.model-canvas{padding:0 11px 10px}#createView .composer-shell{grid-template-columns:minmax(0,1fr);gap:4px}#createView .composer-side-tools{flex-direction:row;padding:0;justify-content:flex-end}#createView .composer-side-tools:first-child{justify-content:flex-start}#createView .composer-side-tools button{width:27px;height:27px;font-size:14px}#createView .composer-topline{padding:5px 8px 0}#createView .composer-input-row{padding:7px 8px 2px}#createView .reference-zone{max-width:100px}#createView .composer-parameter-bar{padding:2px 8px 6px}#createView .prompt-composer .prompt-footer{padding:4px 8px 5px}}
@media(max-width:1180px){.main-content{position:relative}.main-content .topbar{display:flex;position:absolute;top:10px;right:10px;z-index:2;width:auto;height:auto;padding:0;background:transparent;border:0}.main-content .topbar-left,.main-content .breadcrumb,.main-content .status-pill{display:none}.main-content .history-jump{font-size:0;padding:8px}.main-content .history-jump svg{width:17px;height:17px}.main-content .topbar-right{gap:6px}}
@media(max-width:720px){.main-content .topbar{left:11px;right:11px;justify-content:space-between}.main-content .topbar-left{display:flex}.main-content .breadcrumb{display:none}.main-content .mobile-menu{display:grid}}

.test-login-dialog{width:min(380px,calc(100vw - 32px));padding:0;border:1px solid #e7dff2;border-radius:17px;background:#fff;color:#3f3953;box-shadow:0 20px 60px #39285a44}
.test-login-dialog::backdrop{background:#28203588;backdrop-filter:blur(3px)}
.test-login-dialog form{padding:20px}
.test-login-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.test-login-heading strong{font-size:17px}
.test-login-heading button{border:0;background:#f4f0fa;border-radius:8px;width:28px;height:28px;color:#817295;font-size:21px;line-height:1;cursor:pointer}
.test-login-dialog form>p{color:#9b93aa;font-size:11px;line-height:1.5;margin:8px 0 16px}
.test-login-dialog label{display:block;color:#635a73;font-size:12px;font-weight:700;margin:12px 0 6px}
.test-login-dialog input{display:block;width:100%;height:39px;border:1px solid #e3dced;border-radius:9px;padding:0 10px;background:#fbfaff;color:#3f3953;outline:0}
.test-login-dialog input:focus{border-color:#9b83e3;box-shadow:0 0 0 3px #a994ed1f}
.test-login-dialog .test-login-error{min-height:17px;margin:8px 0;color:#c34f63;font-size:11px}
.test-login-submit{width:100%;height:39px;border:0;border-radius:9px;background:#8e74e7;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.test-login-submit:disabled{opacity:.65;cursor:wait}