:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#28302f;background:#f6f7f8;font-size:14px;--bg:#f6f7f8;--panel:#fff;--text:#28302f;--muted:#717a7a;--line:#e3e7e6;--accent:#276f66;--soft:#edf5f1;--coral:#d88881;--field:#f8f9f9;--stage:#e9edec;color-scheme:light}
*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:inherit;border:1px solid transparent;border-radius:6px;background:transparent;min-height:36px;padding:7px 10px;transition:background .16s ease-out,color .16s ease-out}button:hover{background:var(--soft)}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}svg{width:18px;height:18px;flex-shrink:0}h1,h2,p{margin:0}h1{font-size:18px;font-weight:650}h2{font-size:14px;font-weight:650}small{font-size:11px}input,select,textarea{color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:5px;min-width:0}select,input:not([type=checkbox]):not([type=range]):not([type=file]){width:100%;min-height:37px;padding:8px 10px}textarea{resize:vertical;width:100%;line-height:1.7;padding:10px}input[type=checkbox],input[type=range]{accent-color:var(--accent)}input[type=range]{width:100%;margin:4px 0 13px}output{font-family:Consolas,monospace;font-size:12px;color:var(--accent)}[hidden]{display:none!important}.icon-button{width:36px;height:36px;min-height:36px;padding:8px;flex-shrink:0}.icon-button.small{width:28px;height:28px;min-height:28px;padding:5px}.small svg{width:15px;height:15px}.inline-tools{display:flex;align-items:center;gap:2px}.badge{font-size:10px;border:1px solid var(--line);border-radius:3px;white-space:nowrap;padding:2px 5px;color:var(--muted);font-weight:400}.primary{background:var(--accent);color:#fff;min-height:44px;padding:10px 17px}.primary:hover{background:#205c55}.swatch{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.coral{background:var(--coral)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.prototype-bar{height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;background:#293330;color:#e4e9e5;font-size:11px}.prototype-bar>span{display:flex;align-items:center;gap:8px}.demo-dot{width:6px;height:6px;background:#e5b178;border-radius:50%}.layout-picker{display:flex;gap:4px}.layout-picker button{color:#b8c4bd;font-size:12px;min-height:30px;padding:4px 13px}.layout-picker button[aria-pressed=true]{color:#fff;background:#52655b}.layout-picker button:hover{background:#425149}.prototype-end{opacity:.7}.app-header{height:66px;display:flex;align-items:center;gap:52px;background:var(--panel);border-bottom:1px solid var(--line);padding:0 24px}.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}.brand>svg{width:28px;height:28px;color:var(--accent)}.brand strong{font-family:"Microsoft YaHei",sans-serif;font-size:22px;font-weight:650}.brand span{font-family:Consolas,monospace;font-size:11px;color:var(--muted);margin:6px 0 0 4px}.app-header nav{display:flex;align-self:stretch;gap:22px}.app-header nav button{border-radius:0;padding:0 6px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent}.app-header nav .nav-active{color:var(--accent);border-bottom-color:var(--accent)}.header-tools{margin-left:auto;display:flex;gap:12px;align-items:center}.header-tools>button:first-child{font-size:12px}.header-tools>button:first-child svg{color:#a77638;width:16px}.avatar{width:30px;height:30px;border-radius:50%;background:#f4ddd9;color:#8d5c57;display:grid;place-items:center;font-size:12px}
.workspace{display:grid;grid-template-columns:294px minmax(320px,1fr) 296px;grid-template-rows:minmax(320px,1fr) 193px;grid-template-areas:"inspector canvas chat" "inspector composer chat";height:calc(100dvh - 108px);min-height:680px}.inspector{grid-area:inspector;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.panel-heading{display:flex;align-items:center;gap:8px;min-height:55px;padding:12px 20px;border-bottom:1px solid var(--line)}.panel-heading h2{display:flex;gap:8px;align-items:center}.panel-heading h2 svg{color:var(--accent);width:16px}.panel-heading .status-label{margin-left:auto;font-size:10px;color:var(--muted)}.panel-heading>.icon-button{margin-left:auto}.inspector .panel-heading .inspector-toggle{display:none}.inspector-scroll{padding:0 20px;overflow:auto;scrollbar-width:thin}.settings-section{padding:17px 0;border-bottom:1px solid var(--line)}.settings-section:last-child{border-bottom:0}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;margin:0 0 9px;gap:10px;min-height:19px}.tiny-indicator{font-size:10px;font-weight:400;color:var(--muted)}.mode-switch{display:flex;padding:3px;border:1px solid var(--line);background:var(--field);border-radius:6px;margin-top:13px}.mode-switch button{flex:1;min-height:29px;padding:4px 9px;font-size:12px;color:var(--muted)}.mode-switch button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px #0000000e}.mode-switch svg{width:14px}.preset-summary{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:10px;color:var(--muted);line-height:1.6}.preset-summary .badge{margin-left:auto}.ratios{display:flex;gap:7px}.ratios button{flex:1;min-width:0;flex-direction:column;border:1px solid var(--line);font-size:11px;padding:10px 4px;gap:5px;height:81px}.ratios button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent)}.ratios small{font-size:10px;opacity:.7}.ratio-icon{display:block;border:1.4px solid currentColor;width:17px;height:22px;border-radius:2px}.ratio-icon.square{width:20px;height:20px;margin:1px}.ratio-icon.landscape{width:24px;height:17px;margin:2.5px 0}.count-label{margin:13px 0 0}.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px}.stepper button{width:31px;height:31px;min-height:31px;padding:6px}.stepper svg{width:14px}.stepper #count{width:33px;padding:0;text-align:center;min-height:30px;border:0;background:transparent;appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.upload-zone{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;border:1px dashed #b9c9c3;border-radius:5px;margin-top:10px;padding:15px 8px;font-size:12px;cursor:pointer;color:var(--muted)}.upload-zone:hover{background:var(--soft)}.upload-zone small{width:100%;text-align:center;font-size:10px;color:var(--muted)}#reference-preview{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:11px}#reference-preview img{width:47px;height:52px;object-fit:cover;border-radius:4px}#reference-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.reference-strength{margin-top:15px}.inspector-footer{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px;padding:14px 20px;margin-top:auto;border-top:1px solid var(--line)}.inspector-footer svg{width:14px;height:14px}.advanced-only .field-label:not(:first-child){margin-top:14px}
.canvas-area{grid-area:canvas;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 25px 10px;flex-shrink:0}.canvas-heading h1{font-size:16px}.canvas-heading>div>span{font-size:10px;color:var(--muted);display:block;margin-top:5px}.canvas-heading .inspector-toggle{display:none}.art-stage{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:7px 24px 0}.art-wrap{min-height:0;height:100%;max-width:100%;position:relative;display:flex;justify-content:center}.art-wrap>img{height:100%;width:100%;max-width:100%;object-fit:contain;display:block;box-shadow:0 9px 30px #223b2e1a;background:var(--stage)}.art-badge{position:absolute;bottom:10px;left:10px;background:#ffffffeb;border:1px solid #ffffff55;color:#536159;border-radius:4px;padding:4px 7px;display:flex;align-items:center;gap:5px;font-size:10px}.art-badge svg{width:12px;height:12px}.image-tools{display:flex;gap:3px;align-items:center;height:42px;flex-shrink:0;font-size:11px;color:var(--muted);margin-top:7px}.image-tools .icon-button{height:30px;min-height:30px;width:30px;padding:6px}.image-tools svg{width:15px;height:15px}.tool-divider{height:15px;width:1px;background:var(--line);margin:0 9px}.filmstrip{display:flex;justify-content:center;gap:8px;padding:5px 20px 12px;height:64px;flex-shrink:0}.filmstrip button{padding:2px;width:44px;min-height:46px;border-radius:4px;border:1px solid transparent}.filmstrip button.selected{border-color:var(--accent)}.filmstrip img{width:100%;height:100%;object-fit:cover;border-radius:2px}.filmstrip .cloud-thumb{border:1px dashed #b8c5c0;color:var(--muted);width:44px}.filmstrip .cloud-thumb svg{width:17px}.composer{grid-area:composer;background:var(--panel);border-top:1px solid var(--line);padding:11px 24px 14px;display:flex;flex-direction:column;min-width:0}.composer-top{display:flex;align-items:center;gap:15px}.prompt-tabs{display:flex;gap:13px}.prompt-tabs button{font-size:12px;padding:4px 0;min-height:28px;border-radius:0;border-bottom:2px solid transparent;color:var(--muted)}.prompt-tabs button[aria-pressed=true]{color:var(--text);border-bottom-color:var(--accent)}.check-label{display:flex;gap:5px;align-items:center;white-space:nowrap;font-size:11px;color:var(--muted);margin-left:auto}.composer-presets{display:none;gap:6px;align-items:center;font-size:11px}.composer-presets button{font-size:11px;padding:0;min-height:28px}.composer-presets svg{width:13px}.composer>textarea{border:0;background:transparent;padding:9px 0 3px;font-size:13px;resize:none;flex:1;min-height:48px;outline-offset:0}.composer-bottom{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:7px}.composer-bottom>span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}.composer-bottom>span svg{width:13px;height:13px}.price{border-left:1px solid #ffffff40;padding-left:11px;margin-left:6px;font-size:11px;white-space:nowrap}.chat-panel{grid-area:chat;border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0;min-width:0}.chat-panel .panel-heading{padding:10px 15px}.chat-panel .badge{font-size:9px}.chat-panel .panel-heading h2{font-size:13px}.chat-messages{flex:1;overflow:auto;padding:18px 17px}.chat-context{display:flex;align-items:center;gap:11px;padding-bottom:19px;border-bottom:1px solid var(--line);margin-bottom:20px}.chat-context img{width:40px;height:51px;object-fit:cover;border-radius:4px}.chat-context strong{display:block;font-size:11px;font-weight:500}.chat-context span{display:block;color:var(--muted);font-size:10px;margin-top:5px}.message{font-size:12px;line-height:1.8;margin-bottom:18px;overflow-wrap:anywhere}.message-author{font-size:10px;color:var(--muted);display:block;margin-bottom:7px}.message p{white-space:pre-wrap}.message.user{background:var(--soft);padding:10px 12px;border-radius:6px}.message .apply-chat{border:1px solid var(--line);font-size:11px;margin-top:9px;min-height:31px}.chat-suggestions{display:flex;align-items:flex-start;gap:7px;flex-direction:column;margin-top:16px}.chat-suggestions button{border:1px solid var(--line);font-size:11px;min-height:31px;padding:5px 10px;text-align:left}#chat-form{border-top:1px solid var(--line);padding:14px 16px}#chat-form textarea{background:var(--field);font-size:12px;resize:none}#chat-form>div{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:9px;color:var(--muted)}.send-button{background:var(--accent);color:#fff;width:30px;height:30px;min-height:30px}.send-button:hover{background:#205c55}.no-chat .workspace{grid-template-columns:294px minmax(320px,1fr);grid-template-areas:"inspector canvas" "inspector composer"}.no-chat .chat-panel{display:none}#generation-state{position:absolute;inset:0;background:#213b32bd;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:12px}#generation-state svg{width:25px;height:25px;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#favorite-image[aria-pressed=true]{color:#b35f61;background:#f9e9e8}
body[data-layout=canvas]{--bg:#222625;--panel:#2d3230;--text:#eef1ee;--muted:#a6b3ab;--line:#434c46;--accent:#a7d4bd;--soft:#394b40;--field:#272d29;--stage:#222625;color-scheme:dark;color:var(--text);background:var(--bg)}body[data-layout=canvas] .prototype-bar{background:#17211c}body[data-layout=canvas] .app-header{background:#282e2a}body[data-layout=canvas] .brand>svg{color:#c2d7c8}body[data-layout=canvas] .workspace{grid-template-columns:minmax(320px,1fr) 302px;grid-template-rows:minmax(320px,1fr) 195px;grid-template-areas:"canvas inspector" "composer inspector";padding:0 0 0 58px;position:relative}body[data-layout=canvas] .workspace:before{content:"";position:absolute;left:28px;top:30px;bottom:30px;border-left:1px solid var(--line)}body[data-layout=canvas] .inspector{border-left:1px solid var(--line);border-right:0}body[data-layout=canvas] .inspector .panel-heading .inspector-toggle{display:flex}body[data-layout=canvas] .status-label{display:none}body[data-layout=canvas] .canvas-heading{padding:20px 34px 10px}body[data-layout=canvas] .canvas-heading .inspector-toggle{display:flex}body[data-layout=canvas] .canvas-heading h1{font-size:18px}body[data-layout=canvas] .art-stage{padding-top:2px}body[data-layout=canvas] .art-wrap>img{box-shadow:0 10px 38px #0005}body[data-layout=canvas] .filmstrip{padding-bottom:8px;height:60px}body[data-layout=canvas] .composer{margin:0 34px 18px;padding:10px 20px 12px;border:1px solid var(--line);border-radius:7px}body[data-layout=canvas] .composer-presets{display:flex}body[data-layout=canvas] .primary,body[data-layout=canvas] .send-button{background:#b5d7c3;color:#1d3928}body[data-layout=canvas] .primary:hover{background:#cae5d5}body[data-layout=canvas] .price{border-left-color:#52715d}body[data-layout=canvas] .chat-panel{position:absolute;right:318px;top:63px;bottom:216px;width:304px;border:1px solid var(--line);border-radius:7px;z-index:5;box-shadow:0 15px 50px #0005}body[data-layout=canvas] .chat-panel .panel-heading{background:var(--panel);border-radius:7px 7px 0 0}body[data-layout=canvas].inspector-hidden .workspace{grid-template-columns:1fr;grid-template-areas:"canvas" "composer";padding-right:58px}body[data-layout=canvas].inspector-hidden .inspector{display:none}body[data-layout=canvas].inspector-hidden .chat-panel{right:78px}body[data-layout=canvas] .mode-switch button[aria-pressed=true]{background:#435348}.art-badge{color:#324b3f}
#library-view{padding:32px 40px;max-width:1600px;margin:auto}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:20px}.library-heading h1{font-size:22px}.library-heading p{font-size:12px;color:var(--muted);margin-top:9px}.library-heading .mode-switch{margin:0;min-width:210px}#library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}.library-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}.library-item .library-image{width:100%;height:280px;background:var(--stage);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.library-item img{width:100%;height:100%;object-fit:contain}.library-item .library-caption{padding:12px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.library-caption small{color:var(--muted)}.library-image .primary{min-height:35px;font-size:12px}.cloud-caption{font-size:12px;color:var(--muted)}dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0;width:min(680px,calc(100% - 28px));max-height:85dvh;box-shadow:0 20px 90px #0003}dialog::backdrop{background:#17261f80}.dialog-heading{position:sticky;top:0;z-index:1;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--line)}.dialog-heading h2{font-size:17px}#dialog-content{padding:22px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog-note{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:16px}.dialog-field{display:block;margin-top:15px}.dialog-field>span{font-size:12px;display:block;margin-bottom:7px}.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap;margin-bottom:18px}.admin-tabs button{font-size:12px}.admin-tabs button.active{background:var(--soft);color:var(--accent)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px}.admin-wide{grid-column:1/-1}.admin-switch{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.admin-switch input{width:17px;height:17px}.channel-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.channel-row div{flex:1;min-width:0}.channel-row strong{font-size:13px;font-weight:500}.channel-row small{display:block;margin-top:6px;color:var(--muted);overflow-wrap:anywhere}.channel-row>.badge{font-size:10px}.code-area{font-family:Consolas,monospace;font-size:11px;min-height:110px;word-break:break-all}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);background:#263e31;color:#fff;padding:11px 18px;font-size:12px;border:1px solid #749a7d;border-radius:6px;max-width:calc(100% - 32px);z-index:20;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 5px 20px #0002;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.workspace{grid-template-columns:318px minmax(320px,1fr) 330px}.no-chat .workspace{grid-template-columns:318px minmax(320px,1fr)}.inspector-scroll{padding:0 24px}.composer{padding-left:32px;padding-right:32px}}
@media(max-width:1190px){.workspace{grid-template-columns:276px minmax(300px,1fr);grid-template-areas:"inspector canvas" "inspector composer"}.chat-panel{position:fixed;right:20px;top:170px;bottom:220px;width:288px;border:1px solid var(--line);border-radius:7px;z-index:5;box-shadow:0 12px 40px #0002}.no-chat .workspace{grid-template-columns:276px minmax(300px,1fr)}.app-header{gap:28px}.prototype-end{display:none!important}body[data-layout=canvas] .workspace{padding-left:0}body[data-layout=canvas] .workspace:before{display:none}body[data-layout=canvas] .chat-panel{right:315px;top:63px;width:280px}.workspace{min-height:680px}}
@media(max-width:760px){.prototype-bar{padding:5px 12px;height:70px;justify-content:center;flex-direction:column;gap:1px}.prototype-bar>span{font-size:10px}.layout-picker button{min-height:30px}.app-header{height:60px;padding:0 13px;gap:14px}.brand strong{font-size:18px}.brand>svg{width:24px}.brand span,.desktop-label{display:none}.app-header nav{gap:9px}.app-header nav button{font-size:11px;gap:5px}.app-header nav svg{width:15px}.header-tools{gap:2px}.header-tools #balance-button{gap:4px;padding:5px}.header-tools #balance-button svg{width:13px}.avatar{display:none}.workspace,.no-chat .workspace,body[data-layout=canvas] .workspace,body[data-layout=canvas].inspector-hidden .workspace{height:auto;min-height:0;display:flex;flex-direction:column;padding:0}.canvas-area{order:0;min-height:420px;height:55dvh}.canvas-heading{padding:16px 17px 8px}.canvas-heading .inspector-toggle{display:flex}.canvas-heading>div>span{font-size:10px}.art-stage{padding:3px 20px 0}.filmstrip{height:56px;padding-bottom:6px}.filmstrip button{min-height:42px}.composer,body[data-layout=canvas] .composer{order:1;min-height:210px;margin:0;padding:12px 18px;border-radius:0;border-left:0;border-right:0}.composer-top{gap:10px}.composer-bottom>span{max-width:125px;font-size:10px;line-height:1.5}.composer .primary{padding:10px 12px;gap:5px;font-size:12px}.composer .price{padding-left:8px;margin-left:2px;font-size:10px}.inspector,body[data-layout=canvas] .inspector{order:2;border:0;display:flex}.inspector .panel-heading .inspector-toggle{display:none!important}.inspector-scroll{overflow:visible;padding:0 19px}.settings-section{padding:17px 0}.settings-section:first-child .mode-switch{max-width:240px}.ratios{max-width:370px}.upload-zone{min-height:95px}.inspector-footer{margin-top:10px}.chat-panel,body[data-layout=canvas] .chat-panel,body[data-layout=canvas].inspector-hidden .chat-panel{position:fixed;inset:145px 12px 16px;width:auto;z-index:8;border:1px solid var(--line);border-radius:7px;max-height:calc(100dvh - 160px)}body[data-layout=canvas] .canvas-heading{padding:16px 17px 8px}body[data-layout=canvas] .composer-presets{display:none}#library-view{padding:25px 16px}.library-heading{flex-wrap:wrap}.library-heading h1{font-size:20px}#library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.library-item .library-image{height:200px}.library-caption{flex-wrap:wrap;gap:7px}.admin-grid{grid-template-columns:1fr}.admin-wide{grid-column:auto}.icon-button{min-height:40px;width:40px;height:40px}.library-item .primary{font-size:11px;padding:7px}.mode-switch button{min-height:36px}#dialog-content{padding:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
