:root{--bg:#f6fbff;--text:#10233f;--muted:#5c708f;--faint:#8da3bd;--primary:#1677ff;--primary-strong:#075ee8;--cyan:#30c8ff;--violet:#a9b8ff;--success:#12b981;--danger:#e5484d;--glass:#ffffffb8;--glass-strong:#ffffffdb;--glass-soft:#ffffff7a;--border:#76a4e052;--shadow:0 24px 70px #2767b829;--shadow-soft:0 14px 38px #3675c81f;--radius-lg:28px;--radius-md:20px;--radius-sm:14px;--font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;color:var(--text);font:16px/1.5 var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 12%,#3eb7ff57,#0000 32%),radial-gradient(circle at 78% 6%,#a8bbff61,#0000 30%),radial-gradient(circle at 70% 82%,#43d3ff3d,#0000 34%),linear-gradient(135deg,#fff 0%,#eef8ff 44%,#f8fbff 100%);min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.7}.app-shell{min-height:100vh;padding:22px;position:relative;overflow:hidden}.ambient{filter:blur(16px);opacity:.62;pointer-events:none;border-radius:999px;position:fixed}.ambient-a{background:#35b2ff3d;width:360px;height:360px;top:-120px;left:-70px}.ambient-b{background:#8ea4ff38;width:440px;height:440px;top:-100px;right:9vw}.ambient-c{background:#20cdff2e;width:420px;height:420px;bottom:4vh;right:-140px}.workspace{z-index:1;grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr);gap:18px;max-width:1480px;min-height:calc(100vh - 44px);margin:0 auto;display:grid;position:relative}.panel,.glass-block{background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(24px)saturate(1.35);position:relative}.panel{overflow:hidden}.glass-block{flex:none;overflow:visible}.panel:before,.glass-block:before,.model-card:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#fffffff2,#0000);height:1px;position:absolute;inset:0 0 auto}.panel{border-radius:var(--radius-lg);padding:22px}.create-panel{scrollbar-gutter:stable;flex-direction:column;gap:14px;max-height:calc(100vh - 44px);display:flex;overflow:hidden auto}.create-panel>*{flex-shrink:0}.results-panel{flex-direction:column;gap:16px;min-height:620px;display:flex}.topbar,.results-header,.api-row,.url-row{align-items:center;gap:10px;display:flex}.topbar,.results-header{justify-content:space-between}h1,h2{letter-spacing:0;margin:0}h1{color:#071d3b;font-size:30px;font-weight:760}h2{font-size:22px;font-weight:720}.glass-block{border-radius:var(--radius-md);min-height:max-content;padding:16px}.glass-block.compact{gap:12px;display:grid}.api-block{order:1}.mode-block{order:2}.mode-edit .reference-block{order:3}.mode-edit .prompt-block{order:4}.mode-edit .model-block{order:5}.mode-edit .ratio-block{order:6}.mode-edit .parameter-block{order:7}.mode-edit .generate-block{order:8}.prompt-block{order:3}.model-block{order:4}.ratio-block{order:5}.reference-block{order:6}.parameter-block{order:7}.generate-block{order:8}.section-title,.field-label{color:var(--muted);margin-bottom:10px;font-size:13px;font-weight:700;display:block}.field-label.stack{margin:0}.input,.textarea,.select{width:100%;color:var(--text);background:#ffffffad;border:1px solid #6ca1e252;border-radius:16px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.input,.select{min-height:46px;padding:0 14px}.textarea{resize:vertical;min-height:132px;padding:14px}.input:focus,.textarea:focus,.select:focus{background:#ffffffeb;border-color:#1677ffbd;box-shadow:0 0 0 4px #1677ff21}.api-row .input{flex:1;min-width:0}.api-row{grid-template-columns:minmax(0,1fr) 46px auto;align-items:center;display:grid}.button,.icon-button,.chip,.segment,.model-card,.mini-button,.tab,.thumb,.main-image-button{color:var(--text);border:0;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}.button{background:linear-gradient(135deg, var(--primary), var(--cyan));color:#fff;white-space:nowrap;border-radius:16px;min-height:46px;padding:0 18px;font-weight:730;box-shadow:0 16px 32px #1677ff38}.button:hover,.model-card:hover,.thumb:hover,.icon-button:hover,.chip:hover,.segment:hover{transform:translateY(-1px)}.button.ghost,.icon-button,.chip,.segment,.mini-button{color:#123761;box-shadow:none;background:#fff9;border:1px solid #70a3e047}.icon-button{border-radius:16px;flex:none;place-items:center;width:46px;height:46px;display:grid}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:21px;height:21px}.language-switch,.segmented{background:0 0;border:0;border-radius:0;gap:6px;padding:0;display:inline-flex}.segmented{width:100%;min-height:46px}.segmented .segment{min-width:0}.segmented.small{width:auto;margin-bottom:10px}.chip,.segment{border-radius:14px;min-height:34px;padding:0 13px;font-size:13px;font-weight:690;box-shadow:0 8px 20px #2069be0f}.segment{flex:1;min-height:40px}.chip.active,.segment.active,.tab.active{color:#fff;background:linear-gradient(135deg,#1677ff,#39c2ff);box-shadow:0 10px 20px #1677ff2e}.model-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(82px,auto);gap:10px;display:grid}.model-card{text-align:left;background:#ffffff8f;border:1px solid #71a3e047;border-radius:20px;flex-direction:column;justify-content:center;gap:4px;min-height:82px;padding:14px;display:flex;overflow:visible}.model-card.active{background:#e8f6ffeb;border-color:#1677ffb8;box-shadow:0 16px 34px #1677ff29}.model-provider,.model-id,.inline-note,.fixed-field em,.error-box span{color:var(--muted);font-size:12px}.model-card strong{font-size:16px;line-height:1.25}.model-id{word-break:break-word;line-height:1.25}.tag-row{flex-wrap:wrap;gap:5px;margin-top:auto;display:flex}.tag-row span{color:#0d5fc4;background:#218fff1a;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:700}.inline-note{background:#e4f5ffc7;border-radius:14px;margin-top:10px;padding:10px 12px}.inline-note.soft{margin:0 0 12px}.upload-box{color:#0d5fc4;background:#f3faffb8;border:1px dashed #1677ff6b;border-radius:18px;place-items:center;min-height:78px;margin-top:4px;font-weight:720;display:grid}.upload-box input{display:none}.url-row .input{flex:1;min-width:0}.reference-list{gap:8px;margin-top:12px;display:grid}.reference-item{background:#ffffff94;border-radius:16px;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;display:grid}.reference-item img{object-fit:cover;background:#eef7ff;border-radius:12px;width:48px;height:48px}.reference-item span{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mini-button{color:#0d5fc4;border-radius:12px;min-height:32px;padding:0 10px}.parameter-grid{grid-template-columns:1fr;align-items:start;gap:12px;display:grid}.parameter-card{background:0 0;border:0;border-radius:0;gap:10px;padding:0;display:grid}.parameter-label{color:var(--muted);font-size:13px;font-weight:760}.option-grid{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;display:grid}.option-card{color:#123761;background:#ffffff9e;border:1px solid #70a3e03d;border-radius:14px;min-height:42px;padding:8px 10px;font-weight:740;box-shadow:0 8px 20px #2069be0f}.option-card:hover{border-color:#1677ff6b;transform:translateY(-1px)}.option-card.active{color:#fff;background:linear-gradient(135deg,#1677ff,#39c2ff);border-color:#1677ffb8;box-shadow:0 12px 24px #1677ff33}.visual-option{align-content:center;place-items:center;gap:7px;min-height:76px;display:grid}.size-icon{color:#1677ff;background:#1677ff14;border:2px solid;border-radius:8px;place-items:center;font-size:12px;font-weight:820;display:grid;box-shadow:inset 0 1px #ffffffe6}.visual-option.active .size-icon{color:#fff;background:#ffffff2e}.square-shape{width:34px;height:34px}.landscape-shape{width:46px;height:31px}.portrait-shape{width:31px;height:46px}.wide-shape{width:52px;height:30px}.tall-shape{width:30px;height:52px}.auto-shape{border-radius:12px;width:38px;height:38px}.option-caption{color:inherit;font-size:12px;font-weight:800;line-height:1}.ratio-option{justify-content:center;align-items:center;gap:8px;display:inline-flex}.ratio-icon{color:#1677ff;background:#1677ff14;border:2px solid;border-radius:5px;flex:none;display:inline-block}.ratio-option.active .ratio-icon{color:#fff;background:#ffffff2e}.fixed-field{background:#ffffff8f;border:1px solid #70a3e038;border-radius:16px;gap:2px;min-height:70px;padding:12px;display:grid}.fixed-field span{color:var(--muted);font-size:13px;font-weight:700}.fixed-field .parameter-label{font-weight:760}.fixed-field strong{font-size:17px}.generate{border-radius:19px;width:min(360px,100%);min-height:54px;font-size:16px}.generate-block{display:none}.desktop-generate-dock{flex:none;justify-content:center;align-items:center;padding:2px 0 0;display:flex}.timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.timeline-step{min-height:58px;color:var(--muted);text-align:center;background:#ffffff80;border:1px solid #70a3e033;border-radius:17px;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:13px;font-weight:720;display:flex}.timeline-step span{background:#b8cae2;border-radius:999px;width:9px;height:9px}.timeline-step.active{color:#0d5fc4;background:#e7f6ffe6}.timeline-step.active span{background:var(--primary);box-shadow:0 0 0 5px #1677ff1f}.timeline-step.current span{animation:1.1s ease-in-out infinite pulse}.image-stage{background:linear-gradient(135deg,#ffffffb8,#e6f6ff8f),radial-gradient(circle at 30% 20%,#1677ff24,#0000 34%);border:1px solid #77a8e442;border-radius:26px;flex:1;place-items:center;min-height:420px;display:grid;overflow:hidden}.main-image-button{background:0 0;place-items:center;width:100%;height:100%;padding:18px;display:grid}.main-image-button img{object-fit:contain;border-radius:20px;max-width:100%;max-height:64vh;box-shadow:0 28px 90px #1a54a438}.idle-state{text-align:center;color:var(--muted);place-items:center;gap:10px;padding:24px;display:grid}.idle-state strong{color:var(--text);font-size:20px}.idle-state p{margin:0}.idle-orbit{background:radial-gradient(circle at 32% 24%,#fffffff5,#0000 34%),linear-gradient(135deg,#1677ff2e,#37c7ff47);border:1px solid #76a4e057;border-radius:30px;width:94px;height:94px;box-shadow:inset 0 1px #fffffff2,0 24px 50px #1677ff2e}.error-box{color:#8d1d24;background:#ffeceedb;border:1px solid #e5484d2e;border-radius:18px;padding:14px}.thumb-section{gap:10px;display:grid}.thumb-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.thumb{aspect-ratio:1;background:#ffffff94;border:1px solid #70a3e03d;border-radius:16px;padding:3px;overflow:hidden}.thumb.active{border-color:var(--primary);box-shadow:0 0 0 4px #1677ff1f}.thumb img{object-fit:cover;border-radius:12px;width:100%;height:100%}.mobile-tabs{display:none}.preview-modal{z-index:20;-webkit-backdrop-filter:blur(26px)saturate(1.25);background:#e7f3ff8a;grid-template-rows:auto 1fr;gap:14px;padding:22px;display:grid;position:fixed;inset:0}.preview-toolbar{background:var(--glass-strong);border:1px solid var(--border);max-width:min(820px,100%);box-shadow:var(--shadow-soft);border-radius:22px;justify-self:center;align-items:center;gap:12px;padding:10px;display:flex}.preview-toolbar label{color:var(--muted);align-items:center;gap:10px;font-weight:700;display:flex}.preview-canvas{cursor:grab;place-items:center;min-height:0;display:grid;overflow:hidden}.preview-canvas:active{cursor:grabbing}.preview-canvas img{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:24px;max-width:82vw;max-height:78vh;transition:transform 60ms linear;box-shadow:0 32px 110px #1a54a452}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(1.35)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=1120px){.workspace{grid-template-columns:1fr 1fr}.model-grid,.parameter-grid{grid-template-columns:1fr}}@media (width<=820px){.app-shell{padding:12px 12px 82px}.workspace{min-height:calc(100vh - 94px);display:block}.panel{min-height:calc(100vh - 106px);max-height:none;padding:16px}.create-panel{overflow:visible}.results-panel,.workspace.show-results .create-panel{display:none}.workspace.show-results .results-panel{display:flex}.topbar,.api-row,.url-row,.preview-toolbar{align-items:stretch}.api-row,.url-row{flex-wrap:wrap}.api-row{grid-template-columns:1fr 46px}.api-row .button{grid-column:1/-1}.api-row .input,.url-row .input{flex-basis:100%}.model-grid,.parameter-grid{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.image-stage{min-height:360px}.thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-tabs{z-index:12;border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px);background:#ffffffd1;border-radius:24px;grid-template-columns:1fr 1fr;gap:8px;padding:8px;display:grid;position:fixed;bottom:12px;left:12px;right:12px}.tab{background:0 0;border-radius:18px;min-height:48px;font-weight:760}.preview-modal{padding:12px}.desktop-generate-dock{display:none}.generate-block{width:100%;display:block}.generate{width:100%}.preview-toolbar{flex-wrap:wrap}}@media (width<=520px){h1{font-size:25px}.topbar{flex-direction:column;align-items:flex-start}.language-switch{width:100%}.chip{flex:1}.thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
