:root{--accent:#0878e8;--accent-dark:#0063c7;--bg:#f5f5f7;--panel:rgba(255,255,255,.86);--ink:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.09);--soft:#eaf4ff;--danger:#d73a2f;--green:#168557;--shadow:0 18px 55px rgba(20,37,63,.08);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 4%,rgba(184,218,255,.72),transparent 27%),radial-gradient(circle at 8% 35%,rgba(234,221,255,.48),transparent 26%),var(--bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:650;text-decoration:none;color:var(--ink)}.brand img{width:34px;height:34px}.eyebrow{font-size:11px;letter-spacing:2.3px;color:var(--accent);font-weight:700}.button{border:0;border-radius:999px;padding:11px 18px;font-weight:600;transition:.2s}.button.primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(8,120,232,.2)}.button.primary:hover{background:var(--accent-dark);transform:translateY(-1px)}.button.secondary{border:1px solid var(--line);background:rgba(255,255,255,.64);color:var(--ink)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-right:7px}@keyframes spin{to{transform:rotate(360deg)}}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(440px,1.1fr) minmax(400px,.9fr)}.auth-story{position:relative;overflow:hidden;padding:44px 56px;color:#fff;background:#161c25 url('multi-image-logo-reference.png') center/cover}.auth-story:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,17,28,.92),rgba(9,17,28,.18)),linear-gradient(0deg,rgba(9,17,28,.78),transparent 52%)}.auth-story>*{position:relative;z-index:1}.brand-light{color:#fff}.story-copy{position:absolute;left:8%;bottom:19%;max-width:630px}.story-copy h1{font-size:clamp(46px,6vw,82px);line-height:1.08;letter-spacing:-4px;margin:15px 0 24px}.story-copy h1 em{color:#78baff;font-style:normal}.story-copy>p:last-child{max-width:540px;font-size:17px;line-height:1.8;color:#e6ecf3}.story-proof{position:absolute;bottom:7%;left:8%;display:flex;gap:28px;font-size:12px;color:#d9e0e8}.story-proof span:before{content:"✓";color:#7fc1ff;margin-right:7px}.auth-panel{display:grid;place-items:center;padding:40px}.auth-card{width:min(410px,100%)}.mobile-brand{display:none}.auth-card h2{font-size:36px;letter-spacing:-1.5px;margin:8px 0}.auth-card>p:not(.eyebrow,.form-error){color:var(--muted);margin:0 0 29px}.segmented{display:flex;padding:4px;background:#e9e9ed;border-radius:999px;margin-bottom:24px}.segmented button{flex:1;border:0;background:transparent;padding:9px;border-radius:999px;color:var(--muted)}.segmented button.active{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.08)}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:17px}.field span{font-size:12px;font-weight:600}.field input,.code-row input{width:100%;padding:13px 14px;border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:11px;outline:0}.field input:focus,.code-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(8,120,232,.1)}.code-row{display:flex;gap:8px;margin:-4px 0 17px}.code-row input{min-width:0}.code-row button{white-space:nowrap}.auth-submit{width:100%;display:flex;justify-content:space-between;margin-top:8px}.auth-legal{display:block;text-align:center;color:#999;line-height:1.6;margin-top:18px}.form-error{color:#a92e25;background:#fff0ee;border:1px solid #f3c1bb;border-radius:9px;padding:9px 11px;font-size:12px}
.app-topbar{height:64px;position:sticky;top:0;z-index:20;display:flex;align-items:center;padding:0 28px;gap:28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(22px)}.app-nav{display:flex;align-items:center;gap:4px;flex:1}.app-nav button{border:0;background:transparent;padding:9px 13px;border-radius:999px;color:var(--muted)}.app-nav button.active{background:var(--soft);color:var(--accent);font-weight:600}.app-nav i{font-style:normal;font-size:10px;background:rgba(8,120,232,.1);border-radius:20px;padding:2px 6px}.app-nav .clean-entry{color:var(--accent)}.top-actions{display:flex;align-items:center;gap:9px}.credit-pill{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px;white-space:nowrap}.credit-pill:first-letter{color:var(--accent)}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,#147ee8,#6b64ef 55%,#ee5b91);font-weight:650}.account-copy{display:grid;max-width:120px}.account-copy b{font-size:11px}.account-copy span{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}.logout,.mobile-menu{border:0;background:transparent;color:var(--muted);font-size:18px}.mobile-menu{display:none}.workspace{max-width:1240px;margin:auto}.page{display:none}.page.active{display:block}.studio-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:44px 34px 24px}.studio-head h1,.works-head h1{font-size:34px;letter-spacing:-1.5px;margin:0 0 8px}.studio-head p,.works-head p{color:var(--muted);margin:0;font-size:14px}.platform-ready{font-size:13px;color:var(--muted)}.mode-tabs{width:max-content;display:flex;padding:4px;margin:0 34px 26px;border-radius:999px;background:rgba(230,230,235,.85)}.mode-tabs button{border:0;background:transparent;border-radius:999px;padding:9px 22px;color:var(--muted)}.mode-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.single-studio{padding:0 34px}.prompt-box,.pane,.hot-card{background:var(--panel);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);backdrop-filter:blur(24px)}.prompt-box{border-radius:24px;padding:18px}.prompt-main{display:flex;gap:14px}.reference-trigger{width:74px;height:74px;flex:0 0 auto;border:1px dashed #bdc3cc;border-radius:14px;background:rgba(245,247,250,.8);font-size:25px;color:var(--accent)}.prompt-field{position:relative;display:block;flex:1}.prompt-field textarea{width:100%;height:84px;resize:none;border:0;outline:0;background:transparent;padding:6px 5px 23px;line-height:1.6}.prompt-field small{position:absolute;right:4px;bottom:4px;color:#aaa;font-size:10px}.prompt-field i{font-style:normal}.prompt-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}.tool-chip{border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:8px 12px;color:var(--ink)}.tool-chip.active{color:var(--accent);border-color:rgba(8,120,232,.45)}.single-generate{margin-left:auto}.single-options{display:grid;grid-template-columns:repeat(2,minmax(220px,330px));gap:10px;margin:14px 0 34px}.select-card{padding:11px 14px;background:var(--panel);border:1px solid rgba(255,255,255,.85);border-radius:16px}.select-card span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.select-card select{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}
.suite-layout{display:grid;grid-template-columns:1.03fr .97fr;gap:20px;padding:0 34px 32px}.pane{border-radius:24px;padding:22px;min-width:0}.pane h2{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;margin:0 0 16px}.step-no{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--accent);font-size:12px}.dropzone{height:200px;border:1.5px dashed #bec5ce;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(250,250,252,.72);transition:.2s}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--soft)}.upload-icon{font-size:29px;color:var(--accent);margin-bottom:7px}.dropzone small{color:var(--muted);margin:6px 0 13px}.reference-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.reference-item{height:72px;position:relative;overflow:hidden;border-radius:11px;background:#ddd}.reference-item img{width:100%;height:100%;object-fit:cover}.reference-item button{position:absolute;right:4px;top:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff}.reference-item span{position:absolute;inset:auto 0 0;padding:12px 5px 4px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:8px;white-space:nowrap;overflow:hidden}.reference-actions{display:flex;justify-content:space-between;gap:10px;margin-top:11px;color:var(--muted);font-size:12px}.text-button{border:0;background:transparent;color:var(--accent);white-space:nowrap}.section-title{display:flex;justify-content:space-between;margin:21px 0 9px;font-size:13px;font-weight:600}.section-title em{font-style:normal;color:var(--accent);font-size:11px;font-weight:500}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.settings-grid label{padding:10px;background:var(--bg);border-radius:12px}.settings-grid span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.settings-grid select{width:100%;border:0;background:transparent;outline:0;font-size:12px}.suite-copy{width:100%;min-height:84px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg);resize:vertical;outline:0}.suite-choice{display:flex;gap:10px}.suite-choice button{flex:1;text-align:left;border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--bg)}.suite-choice button.active{border-color:var(--accent);background:var(--soft)}.suite-choice strong,.suite-choice small{display:block}.suite-choice small{color:var(--muted);font-size:10px;margin-top:4px}.canvas{min-height:418px;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f4f5f7 10px,#f4f5f7 20px)}.empty-canvas,.generating,.failed-state{min-height:418px;display:grid;place-content:center;text-align:center;padding:28px}.empty-canvas .wand{font-size:30px;color:var(--accent)}.empty-canvas h3,.generating h3,.failed-state h3{margin:14px 0 4px;font-size:16px}.empty-canvas p,.generating p,.failed-state p{margin:0;color:var(--muted);font-size:12px}.canvas-meta{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 0;font-size:11px;color:var(--muted)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#aaa;margin-right:6px}.status-dot.pending,.status-dot.running{background:#e9a22d;box-shadow:0 0 0 4px rgba(233,162,45,.14)}.status-dot.completed{background:var(--green)}.status-dot.failed{background:var(--danger)}.generate-button{width:100%;margin-top:13px}.generate-button i{font-style:normal;opacity:.72;font-size:10px;margin-left:6px}.safe-note{text-align:center;color:var(--muted);font-size:11px}.generation-orbit{width:75px;height:75px;margin:auto;position:relative;display:grid;place-items:center;border:1px solid #bfc5cd;border-radius:50%;color:var(--accent)}.generation-orbit i{position:absolute;width:11px;height:11px;background:var(--accent);border-radius:50%;left:0;top:32px;transform-origin:37px 5px;animation:spin 2s linear infinite}.progress{width:210px;height:2px;background:#d7dbe0;margin:18px auto;overflow:hidden}.progress i{display:block;width:40%;height:100%;background:var(--accent);animation:progress 1.5s ease infinite}@keyframes progress{from{transform:translateX(-100%)}to{transform:translateX(350%)}}.failed-state>span{margin:auto;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#fff0ee;color:var(--danger);font-size:24px}.failed-state .button{margin:16px auto}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:3px;min-height:418px}.result-card{position:relative;min-height:205px;background:#e4e6e9}.result-card img{width:100%;height:100%;display:block;object-fit:contain;cursor:zoom-in}.result-card>div{position:absolute;inset:auto 7px 7px;display:flex;gap:4px;align-items:center}.result-card>div span{margin-right:auto;color:#fff;text-shadow:0 1px 4px #000;font-size:10px}.result-card button{border:0;border-radius:999px;background:rgba(20,22,25,.72);color:#fff;padding:6px 8px;font-size:9px}.result-loading{display:grid;place-items:center;grid-column:1/-1;color:var(--muted)}
.inspiration{padding:18px 34px 55px}.inspiration-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}.inspiration-head h2{margin:0 0 5px;font-size:20px}.inspiration-head p{margin:0;color:var(--muted);font-size:12px}.hot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.hot-card{border-radius:20px;padding:0;overflow:hidden;text-align:left;color:var(--ink);transition:.2s}.hot-card:hover{transform:translateY(-3px)}.hot-image{position:relative;aspect-ratio:1.25;display:grid;place-items:center;background:linear-gradient(145deg,#ffe7d5,#ffc3a7)}.hot-image.shoe{background:linear-gradient(145deg,#dff5ff,#a8d8f3)}.hot-image.dress{background:linear-gradient(145deg,#f7e3ff,#d7b5ef)}.hot-image.bottle{background:linear-gradient(145deg,#e5f6da,#bfe1a7)}.hot-image span{position:absolute;left:10px;top:10px;padding:4px 7px;border-radius:7px;background:var(--accent);color:#fff;font-size:10px}.hot-image b{font-size:39px}.hot-card>div:last-child{padding:12px}.hot-card strong,.hot-card small{display:block}.hot-card strong{font-size:13px}.hot-card small{margin-top:4px;color:var(--muted);font-size:10px}
.works-head{display:flex;justify-content:space-between;align-items:end;padding:52px 34px 28px}.filter-row{display:flex;gap:5px;padding:0 34px 20px}.filter-row button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 14px;color:var(--muted)}.filter-row button.active{background:var(--ink);color:#fff}.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:17px;padding:0 34px 60px}.work-card{overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:var(--shadow)}.work-cover{aspect-ratio:1.25;position:relative;background:#e5e7ea;overflow:hidden}.work-cover>img{width:100%;height:100%;object-fit:cover}.work-placeholder{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted)}.work-placeholder span{font-size:27px}.status-badge{position:absolute;left:9px;top:9px;padding:4px 8px;border-radius:999px;background:rgba(20,22,25,.76);color:#fff;font-size:9px}.status-badge.completed{background:rgba(22,133,87,.88)}.status-badge.failed{background:rgba(190,50,40,.88)}.work-copy{padding:13px}.work-copy p{height:42px;overflow:hidden;margin:0 0 8px;font-size:12px;line-height:1.7}.work-copy>span{font-size:9px;color:var(--muted)}.work-copy>div{display:flex;gap:6px;margin-top:12px}.work-copy button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 10px;font-size:9px}.work-copy .open-work{background:var(--accent);border-color:var(--accent);color:#fff}.library-empty{text-align:center;padding:110px 20px}.library-empty>span{font-size:40px}.library-empty p{color:var(--muted)}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;padding:10px 17px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;box-shadow:var(--shadow)}.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:30px;background:rgba(10,12,15,.9)}.modal>button{position:absolute;right:25px;top:20px;border:0;background:transparent;color:#fff;font-size:35px}.modal img{max-width:90vw;max-height:86vh;object-fit:contain}.modal a{position:absolute;right:30px;bottom:25px;text-decoration:none}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-story{display:none}.auth-panel{min-height:100vh}.mobile-brand{display:flex;margin-bottom:50px}.app-topbar{padding:0 17px}.app-nav{position:absolute;left:12px;right:12px;top:60px;padding:10px;background:rgba(255,255,255,.96);border-radius:16px;box-shadow:var(--shadow);display:none;flex-wrap:wrap}.app-nav.open{display:flex}.mobile-menu{display:block}.account-copy{display:none}.top-actions{margin-left:auto}.suite-layout{grid-template-columns:1fr}.studio-head{align-items:flex-start}.platform-ready{display:none}.hot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.app-topbar{gap:10px}.app-brand span{display:none}.credit-pill{font-size:10px}.studio-head,.works-head{padding:30px 18px 20px}.studio-head h1,.works-head h1{font-size:28px}.mode-tabs{margin:0 18px 20px}.single-studio,.suite-layout{padding-left:18px;padding-right:18px}.prompt-main{display:block}.reference-trigger:first-child{width:55px;height:55px;margin-bottom:8px}.single-options,.settings-grid{grid-template-columns:1fr}.single-generate{width:100%}.inspiration{padding:16px 18px 40px}.inspiration-head .button{display:none}.hot-grid{grid-template-columns:1fr 1fr;gap:9px}.suite-choice{display:grid}.works-head{align-items:flex-start}.filter-row,.works-grid{padding-left:18px;padding-right:18px}.works-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.result-card{min-height:300px}}
.prompt-tools .reference-trigger{width:auto;height:auto;flex:initial;border-style:solid;border-color:var(--line);border-radius:999px;background:var(--bg);padding:8px 12px;color:var(--ink);font-size:inherit}
/* Dutu brand palette: preserve the prototype layout with the established coral-red identity. */
:root{--accent:#ee513b;--accent-dark:#cd321f;--soft:#fff0ed;--shadow:0 18px 55px rgba(93,44,31,.09)}
body{background:radial-gradient(circle at 85% 4%,rgba(255,207,195,.62),transparent 27%),radial-gradient(circle at 8% 35%,rgba(255,229,204,.46),transparent 26%),var(--bg)}
.button.primary{box-shadow:0 8px 22px rgba(238,81,59,.22)}
.auth-story:after{background:linear-gradient(105deg,rgba(30,15,12,.92),rgba(49,20,13,.3)),linear-gradient(0deg,rgba(32,14,10,.82),transparent 52%)}
.story-copy h1 em{color:#ff765f}.story-proof span:before{color:#ff8a75}
.field input:focus,.code-row input:focus{box-shadow:0 0 0 3px rgba(238,81,59,.1)}
.app-nav i{background:rgba(238,81,59,.1)}
.avatar{background:linear-gradient(135deg,#ff785f,#ee513b 55%,#be2f22)}
.tool-chip.active{border-color:rgba(238,81,59,.45)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}