:root{color-scheme:light;--ink:#151923;--muted:#747b8b;--line:#e7eaf0;--surface:#fff;--canvas:#f6f7fb;--blue:#4658d8;--blue-dark:#3345c1;--soft-blue:#eff1ff;--green:#13845b;--red:#b73a42;--shadow:0 18px 55px rgba(26,36,71,.07)}
*{box-sizing:border-box}html{min-width:320px;background:var(--canvas)}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 70% 360px at 50% -190px,#e5e9ff 0,transparent 100%),var(--canvas);color:var(--ink);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid rgba(70,88,216,.25);outline-offset:3px}[hidden]{display:none!important}.shell{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:25px 0 36px}.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;margin-bottom:66px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;letter-spacing:-.03em;text-decoration:none}.brand img{width:37px;height:37px}.top-actions{display:flex;align-items:center;gap:15px}.model-tag{border:1px solid #e2e5ef;background:rgba(255,255,255,.72);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:600;color:#51596a}.pulse-dot{display:inline-block;width:7px;height:7px;background:#33a67b;border-radius:50%;margin:0 7px 1px 0;box-shadow:0 0 0 3px #e0f3ec}.tag-divider{padding:0 5px;color:#afb4bf}.quiet-button{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:8px 5px}.hero{text-align:center;max-width:680px;margin:0 auto 42px}.eyebrow{font-size:10px;line-height:1.3;letter-spacing:.17em;font-weight:700;color:var(--blue)}h1,h2,p{margin-top:0}.hero h1,.login-card h1{font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(42px,6vw,64px);letter-spacing:-.065em;line-height:.99;font-weight:700;margin:13px 0 16px}.hero h1 span,.login-card h1 span{color:var(--blue)}.intro{font-size:16px;line-height:1.65;color:#646c7d;max-width:570px;margin:0 auto}.workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:20px;align-items:stretch}.composer,.result-card,.login-card,.message-panel{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.composer{padding:25px 26px 20px}.field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}label,.field-title{font-size:13px;font-weight:700;color:#252b38}.counter{font-size:11px;color:#999fad;font-variant-numeric:tabular-nums}textarea{display:block;width:100%;min-height:140px;resize:vertical;border:1px solid #e2e5ec;border-radius:12px;padding:14px 15px;background:#fcfcfe;color:var(--ink);font-size:14px;line-height:1.6;transition:border-color .18s,box-shadow .18s}textarea::placeholder{color:#a5aab6}textarea:focus{outline:none;border-color:#929deb;box-shadow:0 0 0 3px rgba(70,88,216,.1)}.prompt-hint{font-size:11px;color:#969cab;margin:8px 1px 19px}.reference-block{border-top:1px solid #eff0f4;border-bottom:1px solid #eff0f4;padding:16px 0}.reference-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.field-title{display:flex;align-items:center;gap:8px}.optional{font-size:9px;letter-spacing:.08em;color:#9298a6;background:#f2f3f6;border-radius:4px;padding:4px 5px}.reference-head p{margin:5px 0 0;color:#9096a3;font-size:11px}.upload-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #dfe2ea;background:#fff;border-radius:9px;padding:9px 12px;color:#303647;font-weight:600;font-size:12px;white-space:nowrap;transition:.18s}.upload-button:hover,.secondary-button:hover{border-color:#aeb5e8;background:#f9f9ff}.upload-button span{font-size:17px;line-height:10px;color:var(--blue)}.image-preview{display:flex;align-items:center;gap:11px;margin-top:14px;padding:8px 34px 8px 8px;background:#f8f9fc;border:1px solid #eceef3;border-radius:10px;position:relative;min-height:62px}.image-preview img{width:48px;height:48px;object-fit:cover;border-radius:6px;background:#fff}.image-details{display:flex;min-width:0;flex-direction:column;gap:4px;font-size:11px;color:#596170}.image-details span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px;font-weight:600}.image-details span:last-child{color:#9298a5}.remove-button{position:absolute;right:8px;top:8px;width:25px;height:25px;border:0;border-radius:50%;background:#eceef4;color:#626978;font-size:19px;line-height:1}.controls-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:19px}.quality-control{display:flex;flex-direction:column;gap:7px}.quality-control label{font-size:11px;color:#777e8c}.quality-control select{appearance:none;border:1px solid #e2e5ec;border-radius:8px;background:#fff;color:#343a48;font-weight:600;font-size:12px;padding:10px 33px 10px 11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23747b8b' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:0 16px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;box-shadow:0 5px 12px rgba(70,88,216,.2);transition:background .18s,transform .18s,box-shadow .18s}.primary-button:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 8px 17px rgba(70,88,216,.25)}.primary-button:disabled{opacity:.56;cursor:wait;transform:none}.generate-button{min-width:155px}.button-arrow{font-size:15px}.privacy-note{margin:14px 0 0;text-align:center;font-size:10px;color:#8d94a2}.privacy-note span{font-size:14px;vertical-align:-1px;margin-right:3px}.result-card{padding:24px 24px 20px;display:flex;flex-direction:column;min-height:437px}.result-header{display:flex;justify-content:space-between;align-items:center}.result-header h2{font-family:Manrope,sans-serif;font-size:18px;letter-spacing:-.03em;margin:4px 0 0}.result-badge{font-size:10px;letter-spacing:.07em;font-weight:700;color:#555fc4;background:var(--soft-blue);padding:6px 8px;border-radius:6px}.empty-state,.progress-state,.error-state{margin:auto 0;display:flex;align-items:center;flex-direction:column;text-align:center;padding:24px 12px}.empty-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#f2f3ff,#f7f8ff);border:1px solid #ebedfa;margin-bottom:16px}.empty-icon svg{width:48px;height:48px;fill:none;stroke:#7f89dc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.empty-state p{margin:0 0 5px;font-size:13px;font-weight:700}.empty-state span{color:#949aa8;font-size:11px}.progress-state{width:100%;min-height:275px}.loader-ring{width:36px;height:36px;border:3px solid #e7e9f7;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:19px}@keyframes spin{to{transform:rotate(360deg)}}.progress-state strong{font-size:14px}.progress-state p{max-width:260px;color:#878e9c;font-size:11px;line-height:1.55;margin:7px 0 20px}.progress-track{height:4px;background:#eef0f6;border-radius:4px;overflow:hidden;width:min(220px,80%)}.progress-track span{height:100%;width:36%;display:block;border-radius:4px;background:linear-gradient(90deg,#5869e7,#a6afff);animation:travel 1.6s ease-in-out infinite alternate}@keyframes travel{to{transform:translateX(180%)}}.icon-stage{display:grid;place-items:center;flex:1;min-height:245px;margin:16px 0 12px;border:1px solid #eceef4;border-radius:14px;background-color:#fff;background-image:linear-gradient(45deg,#f7f8fb 25%,transparent 25%),linear-gradient(-45deg,#f7f8fb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f8fb 75%),linear-gradient(-45deg,transparent 75%,#f7f8fb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.icon-stage img{width:min(76%,250px);height:min(76%,250px);object-fit:contain;filter:drop-shadow(0 5px 12px rgba(30,35,50,.07))}.output-meta{display:flex;justify-content:space-between;gap:12px;color:#7d8492;font-size:10px}.output-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#39a97d;margin-right:5px}.output-actions{display:flex;gap:9px;margin-top:15px}.output-actions .primary-button{flex:1}.output-actions .secondary-button{padding:0 12px}.error-state{min-height:275px}.error-symbol{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#fff0f0;color:var(--red);font-weight:700;margin-bottom:14px}.error-state strong{font-size:14px}.error-state p{max-width:280px;max-height:104px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#8d5d61;font-size:11px;line-height:1.55;margin:8px 0 16px}.footer{display:flex;justify-content:space-between;color:#9399a6;font-size:10px;padding:19px 3px 0}.footer strong{color:#626a7b;font-weight:600}.login-card{max-width:440px;margin:30px auto 0;padding:34px}.login-card h1{font-size:43px;margin:12px 0}.login-card .intro{font-size:14px;margin:0 0 25px}.login-card form{display:flex;flex-direction:column;gap:9px}.login-card label{font-size:12px}.login-card input{border:1px solid #e1e4eb;border-radius:9px;padding:12px 13px;font-size:13px}.full-button{width:100%;margin-top:8px}.inline-error{font-size:12px;color:var(--red);margin:13px 0 0}.message-panel{max-width:660px;margin:40px auto;padding:25px;display:flex;gap:16px}.message-panel .status-mark{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f0f2ff;color:var(--blue);font-weight:700}.message-panel h1{font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.04em;margin:2px 0 9px}.message-panel p{font-size:13px;line-height:1.65;color:#697181;margin:0 0 7px}.message-panel code{font-size:11px;background:#f0f1f5;padding:2px 4px;border-radius:4px}.message-panel .small-note{font-size:11px;color:#969cab}.setup-footer{text-align:center;padding:22px;color:#8d94a2;font-size:11px}
@media(max-width:800px){.shell{width:min(680px,calc(100% - 32px));padding-top:18px}.topbar{margin-bottom:45px}.workspace{grid-template-columns:1fr}.result-card{min-height:390px}.icon-stage{min-height:260px}.hero{margin-bottom:30px}}
@media(max-width:520px){.shell{width:calc(100% - 24px);padding-top:12px}.topbar{height:43px;margin-bottom:34px}.brand{font-size:13px;gap:7px}.brand img{width:33px;height:33px}.model-tag{font-size:10px;padding:7px 9px}.top-actions{gap:8px}.quiet-button{font-size:11px}.hero h1{font-size:47px}.intro{font-size:14px}.composer,.result-card{padding:19px 17px;border-radius:16px}.workspace{gap:13px}.controls-row{align-items:stretch;flex-direction:column}.quality-control select{width:100%}.generate-button{width:100%;min-height:46px}.result-card{min-height:365px}.footer{font-size:9px}.login-card{padding:26px 21px}.login-card h1{font-size:39px}.message-panel{padding:20px 17px;margin:24px auto}.reference-head p{max-width:220px;font-size:10px}.upload-button{font-size:11px;padding:8px 9px}}
@media(max-width:360px){.hero h1{font-size:41px}.model-tag{font-size:9px}.composer,.result-card{padding:16px 13px}.footer{flex-direction:column;gap:6px}.output-actions{flex-direction:column}.output-actions .primary-button,.output-actions .secondary-button{min-height:42px}}