:root{font-family:Inter,Segoe UI,Microsoft YaHei,system-ui,sans-serif;color:#171916;background:#f4f4f1;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #171916;--muted: #73766f;--line: #dcded8;--soft-line: #e8e9e4;--surface: #ffffff;--canvas: #e9e9e5;--coral: #ef5b45;--coral-dark: #d74634;--blue: #396bd8;--green: #26845d}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f4f4f1}button,input,textarea,select{font:inherit;letter-spacing:0}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(57,107,216,.22);outline-offset:2px}.app-shell{min-height:100vh}.topbar{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fffffff0;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--ink);border-radius:7px}.brand>span:last-child{display:grid;gap:1px}.brand strong{font-size:16px;line-height:1.1}.brand small{color:var(--muted);font-size:9px;font-weight:700}.topbar-actions,.canvas-meta{display:flex;align-items:center;gap:8px}.connection-state{min-height:34px;padding:0 11px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:#fafaf8;color:var(--muted);font-size:12px;font-weight:650}.status-dot{width:7px;height:7px;border-radius:50%;background:#9b9e96}.connection-state.ready{color:#1f6d4e;background:#f1faf5;border-color:#cde8da}.connection-state.ready .status-dot{background:var(--green);box-shadow:0 0 0 3px #26845d1f}.icon-button,.bare-icon{flex:0 0 auto;display:inline-grid;place-items:center;border:0;background:transparent;cursor:pointer}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:7px;background:#fff}.icon-button:hover{border-color:#b9bbb4;background:#f8f8f5}.icon-button.light{background:#fff}.icon-button.dark{color:#fff;border-color:var(--ink);background:var(--ink)}.studio-layout{min-height:calc(100vh - 68px);display:grid;grid-template-columns:386px minmax(430px,1fr) 292px;background:var(--surface)}.control-panel,.history-panel{min-width:0;background:var(--surface)}.control-panel{padding:22px 24px 16px;border-right:1px solid var(--line);overflow-y:auto}.history-panel{display:flex;flex-direction:column;border-left:1px solid var(--line)}.panel-heading,.canvas-toolbar,.history-heading,.section-label-row,.count-row,.dialog-header,.dialog-footer{display:flex;align-items:center;justify-content:space-between}.panel-heading{margin-bottom:18px}.eyebrow{display:block;margin-bottom:4px;color:var(--coral-dark);font-size:9px;font-weight:800}h1,h2,p{margin:0}h1,h2{letter-spacing:0}h1{font-size:22px;line-height:1.15}h2{font-size:17px;line-height:1.2}.model-badge{padding:6px 9px;color:var(--blue);background:#eef3ff;border:1px solid #d8e2fb;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:700}.control-section{padding:15px 0;border-top:1px solid var(--soft-line)}.prompt-section{padding-top:0;border-top:0}.field-label{color:#3f423d;font-size:12px;font-weight:750}.section-label-row>span:last-child{color:#a0a39c;font-size:10px}textarea,.text-input,.secret-input,.select-wrap{width:100%;border:1px solid var(--line);border-radius:7px;background:#fafaf8}textarea{min-height:112px;margin-top:9px;padding:13px 14px;resize:vertical;color:var(--ink);line-height:1.7}textarea:hover,.text-input:hover,.secret-input:hover,.select-wrap:hover{border-color:#bec0ba}.preset-list{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}.preset-button{min-height:30px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#62665f;font-size:11px;font-weight:650;cursor:pointer}.preset-button:hover{color:var(--coral-dark);border-color:#e7b9b0;background:#fff8f6}.size-grid{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.size-option{min-width:0;min-height:72px;padding:10px 7px;display:grid;justify-items:center;align-content:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}.size-option:hover{border-color:#b8bab4}.size-option.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#f7f7f4}.size-option>span:last-child{min-width:0;display:grid;gap:2px}.size-option strong{font-size:10px;white-space:nowrap}.size-option small{color:var(--muted);font-size:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.ratio-icon{display:block;border:1.5px solid currentColor;color:#8d9089}.selected .ratio-icon{color:var(--coral-dark)}.ratio-1024x1024{width:18px;height:18px}.ratio-1536x1024{width:23px;height:16px}.ratio-1024x1536{width:15px;height:22px}.two-column-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-wrap{height:40px;margin-top:8px;position:relative;display:flex;align-items:center}.select-wrap select{width:100%;height:100%;padding:0 35px 0 11px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px;font-weight:650}.select-wrap svg{position:absolute;right:10px;pointer-events:none;color:var(--muted)}.count-row>span{display:grid;gap:3px}.count-row>span small{color:var(--muted);font-size:10px}.stepper{height:36px;display:grid;grid-template-columns:34px 36px 34px;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}.stepper button{width:34px;height:34px;display:grid;place-items:center;border:0;background:#fff;cursor:pointer}.stepper button:hover:not(:disabled){background:#f3f3f0}.stepper button:disabled{color:#c3c5bf}.stepper span{text-align:center;font-size:12px;font-weight:750}.generate-button{width:100%;min-height:48px;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:#fff;font-weight:750;cursor:pointer;position:sticky;bottom:0;z-index:2;box-shadow:0 -10px #fff}.generate-button:hover{background:#2b2e29}.generate-button.is-generating{color:var(--ink);background:#fff}.canvas-panel{min-width:0;display:flex;flex-direction:column;background:var(--canvas)}.canvas-toolbar{min-height:72px;padding:0 22px;border-bottom:1px solid #d2d3ce;background:#f4f4f1eb}.canvas-meta>span{padding:5px 7px;border:1px solid #d0d1cc;border-radius:5px;background:#ffffffb8;color:#72756e;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;font-weight:700}.canvas-stage{flex:1;min-height:0;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;overflow:auto;background-image:linear-gradient(#dadbd6 1px,transparent 1px),linear-gradient(90deg,#dadbd6 1px,transparent 1px);background-size:24px 24px}.artboard{height:min(calc(100vh - 205px),760px);max-width:100%;min-height:260px;position:relative;overflow:hidden;border:1px solid #cccdc7;border-radius:5px;background:#fff;box-shadow:0 18px 45px #17191621}.canvas-stage.has-strip .artboard{height:min(calc(100vh - 278px),680px)}.artboard>img{width:100%;height:100%;display:block;object-fit:cover}.sample-label{position:absolute;top:12px;left:12px;padding:5px 7px;border-radius:4px;color:#fff;background:#171916c2;font-size:9px;font-weight:750}.generation-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:8px;color:#fff;background:#10120fbd}.generation-overlay strong{font-size:14px}.generation-overlay small{color:#ffffffb3;font-size:11px}.spinner{width:28px;height:28px;margin-bottom:3px;border:2px solid rgba(255,255,255,.28);border-top-color:var(--coral);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-strip{max-width:100%;display:flex;gap:8px;overflow-x:auto}.result-strip button{width:58px;height:58px;padding:2px;position:relative;flex:0 0 auto;border:1px solid #bdbfb8;border-radius:5px;background:#fff;cursor:pointer}.result-strip button.active{border-color:var(--coral-dark);box-shadow:0 0 0 1px var(--coral-dark)}.result-strip img{width:100%;height:100%;display:block;object-fit:cover;border-radius:2px}.result-strip span{width:16px;height:16px;position:absolute;right:3px;bottom:3px;display:grid;place-items:center;border-radius:3px;color:#fff;background:#171916b8;font-size:8px}.history-heading{min-height:72px;padding:0 18px;border-bottom:1px solid var(--line)}.history-list{padding:12px;display:grid;align-content:start;gap:7px;overflow-y:auto;flex:1}.history-item{min-width:0;height:70px;padding:5px;display:flex;align-items:center;gap:3px;border:1px solid var(--soft-line);border-radius:7px;background:#fff}.history-item:hover{border-color:#cbcdc6;background:#fafaf8}.history-main{min-width:0;flex:1;padding:0;display:flex;align-items:center;gap:9px;border:0;background:transparent;text-align:left;cursor:pointer}.history-main img{width:54px;height:58px;flex:0 0 auto;object-fit:cover;border-radius:4px;background:var(--canvas)}.history-main>span{min-width:0;display:grid;gap:7px}.history-main strong{overflow:hidden;color:#42453f;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.history-main small{color:#969991;font-size:9px;white-space:nowrap}.history-delete{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#aaada6;cursor:pointer}.history-delete:hover{color:#b53e31;background:#fff0ed}.history-empty{min-height:210px;display:grid;place-content:center;justify-items:center;gap:9px;color:#999c95}.history-empty>span{width:42px;height:42px;display:grid;place-items:center;border:1px dashed #c8cac3;border-radius:50%}.history-empty strong{font-size:11px;font-weight:650}.history-footer{min-height:46px;padding:0 18px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);color:#8c8f88;font-size:10px}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#11131094}.dialog{width:min(460px,100%);border:1px solid #d3d4ce;border-radius:8px;background:#fff;box-shadow:0 24px 70px #0a0c0940}.dialog-header{min-height:76px;padding:0 22px;border-bottom:1px solid var(--soft-line)}.dialog-body{padding:22px;display:grid;gap:9px}.dialog-body .field-label:not(:first-child){margin-top:10px}.text-input{height:42px;padding:0 12px;color:var(--ink)}.secret-input{height:42px;padding:0 10px;display:flex;align-items:center;gap:8px;color:#858880}.secret-input input{min-width:0;height:100%;flex:1;border:0;outline:0;background:transparent;color:var(--ink)}.bare-icon{width:30px;height:30px;color:#7e817a}.checkbox-row{margin-top:12px;display:flex;align-items:center;gap:10px;cursor:pointer}.checkbox-row>input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox{width:19px;height:19px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #c8cac3;border-radius:4px;color:transparent;background:#fff}.checkbox-row input:checked+.custom-checkbox{color:#fff;border-color:var(--blue);background:var(--blue)}.checkbox-row>span:last-child{display:grid;gap:2px}.checkbox-row strong{font-size:11px}.checkbox-row small{color:var(--muted);font-size:9px}.dialog-footer{min-height:70px;padding:0 22px;justify-content:flex-end;gap:9px;border-top:1px solid var(--soft-line)}.button{min-height:40px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer}.button.secondary{border:1px solid var(--line);background:#fff}.button.primary{color:#fff;border:1px solid var(--ink);background:var(--ink)}.button:disabled{cursor:not-allowed;opacity:.45}.toast{max-width:min(420px,calc(100vw - 32px));position:fixed;left:50%;bottom:24px;z-index:40;padding:11px 14px;transform:translate(-50%);border:1px solid #333630;border-radius:7px;color:#fff;background:#171916f5;box-shadow:0 12px 30px #17191638;font-size:12px;text-align:center}@media(max-width:1240px){.studio-layout{grid-template-columns:360px minmax(420px,1fr)}.history-panel{grid-column:1 / -1;min-height:240px;border-top:1px solid var(--line);border-left:0}.history-list{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}}@media(min-width:1241px){.studio-layout{height:calc(100vh - 68px);min-height:620px}}@media(max-width:820px){.topbar{height:60px;padding:0 14px}.connection-state{width:34px;padding:0;justify-content:center;font-size:0}.studio-layout{min-height:calc(100vh - 60px);display:block}.control-panel{padding:22px 18px;border-right:0}.generate-button{position:static;box-shadow:none}.canvas-panel{min-height:620px;border-top:1px solid var(--line)}.canvas-stage{min-height:540px;padding:22px 16px}.artboard{width:min(100%,520px);height:auto;min-height:0}.canvas-stage.has-strip .artboard{height:auto}.history-list{grid-template-columns:1fr}}@media(max-width:480px){.brand small{display:none}.panel-heading{margin-bottom:20px}.size-grid{gap:6px}.size-option{min-height:68px;padding-inline:3px}.size-option strong{font-size:9px}.canvas-toolbar{padding:0 14px}.canvas-meta>span{display:none}.canvas-panel{min-height:540px}.canvas-stage{min-height:460px}.dialog-backdrop{padding:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}