:root{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#14243a;background:#f4f7fb;font-synthesis:none;--blue:#2879f6;--action:#1d61d8;--ink:#14243a;--muted:#5b6b81;--border:#d7e2ef}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:var(--action);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:0}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #2879f6;outline-offset:4px}main{max-width:1440px;margin:auto;padding:0 48px}.masthead{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:20px}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);font-size:18px;font-weight:750;white-space:nowrap}.brand:hover{text-decoration:none}.brand strong{font-weight:450;margin-left:7px;font-size:15px;color:var(--muted)}.brand-symbol{width:29px;height:31px;position:relative;display:block}.brand-symbol i{position:absolute;background:var(--blue);border-radius:3px;width:11px;height:24px;left:0;top:4px}.brand-symbol i:nth-child(2){width:15px;height:11px;left:14px;top:0}.brand-symbol i:nth-child(3){width:15px;height:11px;left:14px;top:14px}.header-links{display:flex;gap:24px;align-items:center;font-size:13px}.header-links>a:first-child{color:var(--muted)}.login-link{border:1px solid var(--border);padding:9px 16px;border-radius:8px;background:white}.intro{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:58px 0 44px}.eyebrow{font-size:13px;color:var(--action);margin:0 0 18px;font-weight:600}h1{font-size:clamp(34px,4.25vw,58px);line-height:1.15;letter-spacing:-.035em;font-weight:650;margin:0}.intro-copy{font-size:15px;color:var(--muted);line-height:1.85;margin:20px 0 0}.intro-aside{display:flex;align-items:center;gap:26px;margin-right:45px}.intro-aside p{font-size:13px;color:var(--muted);line-height:1.9}.sample-mark{position:relative;width:104px;height:104px;transform:rotate(-8deg);display:block}.sample-mark i{position:absolute;background:#2879f6;border-radius:13px;width:40px;height:89px;left:0;top:0}.sample-mark i:nth-child(2){width:59px;height:52px;left:48px;top:0}.workspace{display:grid;grid-template-columns:minmax(310px,410px) minmax(0,1fr);gap:24px;align-items:start}.panel{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.section-heading h2,.section-heading h3{margin:0}.section-heading>span{font-size:12px;color:var(--muted)}h2{font-size:19px;font-weight:650;letter-spacing:-.02em}h3{font-size:16px;font-weight:650}form{display:grid;gap:18px}label{font-size:13px;font-weight:550;display:block;color:#2d405b;min-width:0}.optional{font-weight:400;color:var(--muted);margin-left:5px;font-size:11px}input,select,textarea{width:100%;display:block;min-width:0;border:1px solid var(--border);border-radius:8px;padding:11px 12px;margin-top:8px;background:#fff;color:var(--ink);font-size:13px;line-height:1.5;transition:border-color .15s}input:focus,select:focus,textarea:focus{outline:2px solid #e3edff;border-color:#2879f6}textarea{resize:vertical;min-height:92px}input::placeholder,textarea::placeholder{color:#7d8ca0}input[type=file]{font-size:12px;overflow:hidden;padding:8px}input[type=file]::file-selector-button{background:#eef4ff;color:var(--action);border:0;border-radius:4px;padding:6px 9px;margin-right:8px;font:inherit}input[type=checkbox]{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--action)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-help{display:block;font-size:12px;color:var(--muted);line-height:1.7;font-weight:400;margin:7px 0 0;overflow-wrap:anywhere}.mode-note{font-size:12px;line-height:1.8;padding:12px 14px;background:#f0f5ff;border-left:2px solid #2879f6;color:#38577e;margin:-3px 0 0}.primary,.secondary,.button-link{min-height:42px;border-radius:8px;font-size:13px;font-weight:550;padding:11px 16px;display:inline-flex;justify-content:center;align-items:center;gap:14px;text-decoration:none}.primary{background:var(--action);color:#fff}.primary:hover{background:#164fb5}.secondary{background:#f0f5fc;color:#244b83;border:1px solid #dce7f5}.secondary:hover{background:#e4edfa}.button-link{background:#e8f0ff;color:#174b9e}.text-button{font-size:12px;color:var(--action);padding:8px;background:transparent;border-radius:6px}.text-button:hover{background:#edf4ff}#generate{width:100%;justify-content:space-between;margin-top:2px}.form-note{text-align:center;color:var(--muted);font-size:11px;line-height:1.7;margin:-8px 0 0}details{border-top:1px solid #e8eef5;border-bottom:1px solid #e8eef5;padding:12px 0}summary{font-size:12px;color:var(--muted);cursor:pointer}.details-body{display:grid;gap:14px;padding:15px 0 3px}.result{min-width:0;padding:28px}.status{padding:12px 15px;border-radius:8px;font-size:12px;line-height:1.7;color:#415e85;background:#f1f6fd;overflow-wrap:anywhere}.status[data-state=failed],.status[data-state=uncertain]{background:#fff2e8;color:#8e431c}.empty-preview{min-height:455px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.empty-preview h3{font-size:19px;margin:32px 0 6px;font-weight:550}.empty-preview>p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}.empty-symbol{position:relative;width:93px;height:95px;transform:rotate(-9deg)}.empty-symbol i{position:absolute;width:70px;height:78px;left:0;top:0;border:1.5px solid #b9cef3;border-radius:12px;background:#eaf2ff}.empty-symbol i:nth-child(2){left:22px;top:17px;background:white;box-shadow:0 8px 28px #244a8010}.preview-tags{display:flex;gap:8px;margin-top:27px;flex-wrap:wrap;justify-content:center}.preview-tags span{border:1px solid #e2eaf4;border-radius:5px;color:#697e99;font-size:11px;padding:5px 9px}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 12px}#work-name{font-size:13px;font-weight:550;overflow-wrap:anywhere}.background-controls{display:flex;gap:3px;background:#f0f4f9;padding:3px;border-radius:6px;flex:none}.background-controls button{background:transparent;border-radius:4px;padding:5px 8px;font-size:10px;color:var(--muted)}.background-controls button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #14243a15}.preview-stage{border:1px solid #e3eaf3;border-radius:12px;min-height:380px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}.preview-stage[data-background=dark]{background:#14243a;border-color:#14243a}.preview-stage[data-background=grid]{background:repeating-conic-gradient(#e6ebf1 0 25%,#fff 0 50%) 0/18px 18px}#preview{display:block;max-width:100%;width:100%;max-height:540px;min-height:150px;object-fit:contain;padding:24px}.quality{font-size:12px;line-height:1.7;color:var(--muted);white-space:pre-line}.download-panel{border-top:1px solid #e3eaf3;padding-top:24px;margin-top:24px}.download-panel .section-heading{margin-bottom:16px}.purchase-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}.purchase-controls select,.credit-controls select{width:auto;max-width:100%;margin:0;flex:1;min-width:120px}#price-label{font-weight:600;color:var(--action)}.check-label{display:flex;align-items:flex-start;gap:9px;line-height:1.7;font-size:12px;font-weight:450;margin-top:22px}#exports{border-top:1px solid #edf1f6;margin-top:18px}.export-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.export-buttons button{min-height:38px;padding:8px 12px;font-size:12px}.admin-note{font-size:12px;color:var(--muted);margin:20px 0 0;line-height:1.8}.credits{border-top:1px solid #e3eaf3;padding-top:24px;margin-top:24px}.credits .section-heading{margin-bottom:8px}.credit-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.history-section{padding-top:42px}.history-section .section-heading{margin-bottom:20px}.history{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.history-item{min-width:0;border:1px solid var(--border);background:#fff;border-radius:12px;overflow:hidden}.history-open{width:100%;text-align:left;background:transparent;padding:0;color:var(--ink)}.history-thumb{display:block;width:100%;height:140px;object-fit:contain;background:#fff;padding:12px;border-bottom:1px solid #edf1f6}.history-placeholder{height:140px;background:#eef4fd;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;border-bottom:1px solid #e4ecf7}.history-copy{padding:14px 14px 8px;display:block}.history-name{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-meta{display:block;font-size:11px;color:var(--muted);line-height:1.8;margin-top:5px}.history-bottom{padding:0 8px 7px;text-align:right}.history-bottom button{font-size:11px;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#70829b;padding:32px 0;margin-top:36px;border-top:1px solid var(--border)}[hidden]{display:none!important}@media(min-width:1250px){.editor{padding:30px}.result{padding:30px}}@media(max-width:1000px){main{padding:0 28px}.intro-aside{margin-right:0;gap:15px}.intro-aside p{display:none}.workspace{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}.panel{padding:22px}.history{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-toolbar{align-items:flex-start;flex-direction:column}.preview-stage{min-height:320px}}@media(max-width:760px){main{padding:0 16px}.masthead{height:76px}.brand{font-size:16px}.brand strong{font-size:12px;margin-left:4px}.header-links{gap:10px;font-size:11px}.header-links>a:first-child{display:none}.login-link{padding:8px 12px}.intro{padding:34px 0 30px;gap:15px}.intro-aside{display:none}h1{font-size:39px}.intro-copy{font-size:13px;line-height:1.8}.eyebrow{font-size:12px;margin-bottom:14px}.workspace{grid-template-columns:1fr;gap:18px}.panel{padding:22px 18px;border-radius:16px}.section-heading{margin-bottom:20px}.empty-preview{min-height:340px;padding:30px 8px}.empty-preview h3{font-size:17px}.preview-stage{min-height:280px}#preview{padding:14px;max-height:430px}.preview-toolbar{flex-direction:row;align-items:center}.history{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.history-thumb,.history-placeholder{height:120px}.history-section{padding-top:32px}button,.primary,.secondary,.button-link{min-height:44px}.text-button{padding:8px}.background-controls button{min-height:32px}.purchase-controls{align-items:stretch}.purchase-controls .primary{flex:1}.export-buttons{display:grid;grid-template-columns:1fr 1fr}.export-buttons button:last-child{grid-column:1/-1}.credit-controls{display:grid;grid-template-columns:1fr 1fr}.credit-controls select{width:100%;min-width:0}.credit-controls button,.credit-controls a{grid-column:1/-1}footer{flex-direction:column;gap:8px;padding:24px 0;margin-top:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.brand{min-width:0}.brand-symbol,.brand-logo{flex-shrink:0}.brand-logo{display:block;max-width:80px;max-height:38px;object-fit:contain}.brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.header-links{flex-shrink:0}

.style-discovery{border-top:1px solid #e3eaf3;padding-top:17px}.style-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.style-heading h3{font-size:13px;margin:0}.style-heading>span{font-size:10px;color:var(--muted)}.style-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.style-card{padding:11px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;text-align:left;color:var(--ink);min-height:66px}.style-card strong{display:block;font-size:13px;font-weight:600}.style-card span{display:block;font-size:10px;line-height:1.7;color:var(--muted);margin-top:4px}.style-card:hover,.style-card[aria-pressed=true]{background:#edf4ff;border-color:#2879f6}.type-sample{padding:24px 12px 12px;text-align:center;border:1px dashed var(--border);border-radius:8px;overflow-wrap:anywhere;background:#fafcff}.type-sample>span{font-size:30px;font-weight:600;line-height:1.6}.type-sample>p{font-size:10px;color:var(--muted);margin:12px 0 0}

.starter-controls{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.starter-controls .secondary{margin-bottom:1px;white-space:nowrap}.palette-lock{margin-top:0}.palette-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.palette-choice{display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--border);border-radius:6px;padding:8px 4px;background:#fff;min-height:38px}.palette-choice .swatch{width:10px;height:20px;border-radius:2px;flex-shrink:0}.palette-choice>span:last-child{font-size:10px;color:var(--muted);margin-left:2px}.palette-choice:hover,.palette-choice[aria-pressed=true]{background:#edf4ff;border-color:#2879f6}.history-bottom{display:flex;justify-content:space-between;gap:4px}.history-bottom .text-button:first-child{color:var(--action)}

.auth-links{display:flex;align-items:center;gap:12px}.register-link{color:var(--action);font-weight:600}.member-label{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px}.member-access{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 26px;margin:0 0 24px;background:#fff;border:1px solid var(--border);border-radius:12px}.member-access h2{font-size:16px;margin:0 0 7px}.member-access p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.member-access nav{display:flex;gap:8px;flex-shrink:0}@media(max-width:760px){.auth-links{gap:8px}.register-link{font-size:11px}.member-label{max-width:80px}.member-access{align-items:flex-start;flex-direction:column;padding:18px}.member-access nav{width:100%;flex-wrap:wrap}.member-access nav a{flex:1;white-space:nowrap}}

.generation-progress{margin:18px 0;padding:24px;border:1px solid #dce7f8;border-radius:14px;background:linear-gradient(135deg,#f5f8ff,#fff)}.generation-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.generation-eyebrow{font-size:11px;letter-spacing:.08em;color:var(--muted)}.generation-heading h3{font-size:20px;font-weight:600;line-height:1.5;margin:5px 0 0}.generation-elapsed{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);white-space:nowrap}.generation-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:23px 0 12px}.generation-track>span{height:7px;border-radius:8px;background:#e1e8f2;overflow:hidden;position:relative}.generation-track>[data-state=done]{background:var(--blue)}.generation-track>[data-state=active]{background:#b8cff7}.generation-track>[data-state=active]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#2879f6,transparent);animation:generation-shimmer 1.8s ease-in-out infinite}.generation-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0;margin:0}.generation-steps li{font-size:11px;color:#8190a6;line-height:1.6}.generation-steps [data-state=active]{color:var(--action);font-weight:600}.generation-steps [data-state=done]{color:#344b70}.generation-detail{font-size:13px;color:#4b6282;line-height:1.9;margin:22px 0 0}.generation-note{font-size:11px;line-height:1.8;color:#7a889d;margin:8px 0 0}.generation-progress[data-tone=success]{background:#f3faf6;border-color:#cfe7d8}.generation-progress[data-tone=success] .generation-track>span{background:#36835c}.generation-progress[data-tone=warning]{background:#fffbf1;border-color:#eddfb9}.generation-progress[data-tone=warning] .generation-heading h3{color:#86621e}.generation-progress[data-tone=error]{background:#fff7f5;border-color:#eed4cd}.generation-progress[data-tone=error] .generation-heading h3{color:#a34432}.generation-progress[data-tone=warning] .generation-track>[data-state=active]::after,.generation-progress[data-tone=error] .generation-track>[data-state=active]::after{animation:none;opacity:.35}@keyframes generation-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media(max-width:760px){.generation-progress{padding:18px 15px}.generation-heading{align-items:flex-start;flex-direction:column;gap:8px}.generation-heading h3{font-size:18px}.generation-steps li{font-size:10px}.generation-detail{font-size:12px}.generation-track{gap:5px}.generation-steps{gap:5px}}@media(prefers-reduced-motion:reduce){.generation-track>[data-state=active]::after{animation:none;opacity:.65}}
