:root{color-scheme:dark;font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif;--bg: #06070c;--panel-border: rgba(255, 255, 255, .12);--text: #f5f7fb;--muted: rgba(245, 247, 251, .72);--accent: #55a5ff;--accent-strong: #2c7dff;--danger: #ff7c7c;--shadow: 0 20px 48px rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:var(--bg);color:var(--text);overflow-x:hidden}button,input{font:inherit}button{border:0;background:none;color:inherit}.app-shell{position:relative;min-height:100vh;isolation:isolate}.app-bg{position:fixed;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transform:scale(1.05);filter:saturate(.9) contrast(.95);z-index:-3}.app-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#020408ad,#0204086b 45%,#020408b3),radial-gradient(circle at 50% 20%,rgba(31,66,115,.18),transparent 42%);z-index:-2}.page{min-height:100vh;padding:calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom))}.hero{width:min(100%,560px);margin:0 auto}.hero-copy{padding:0 4px 12px}.eyebrow{margin:0;color:#ffffffad;font-size:13px;letter-spacing:0}.glass-card{position:relative;padding:18px 16px 16px;border:1px solid var(--panel-border);border-radius:24px;background:linear-gradient(180deg,#ffffff1f,#ffffff0f);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}.editor-card{overflow:hidden}.field{display:flex;align-items:center;min-height:56px;padding:0 16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#06080e61;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.field:focus-within{border-color:#55a5ffcc;box-shadow:0 0 0 4px #55a5ff29}.field-error{border-color:#ff7c7cc7}.field input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:18px;font-weight:600}.field input::placeholder{color:#f5f7fb61}.preview-frame{padding:8px 4px 18px}.preview-shell{position:relative;aspect-ratio:1 / 1;border-radius:28px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.1),transparent 40%),linear-gradient(145deg,#11141ceb,#1a1e27e0);overflow:hidden}.preview-panel{position:relative;width:100%;height:calc(100% - 74px);border-radius:0;overflow:hidden;background:linear-gradient(180deg,#ffffff0a,#fff0),#11151d;box-shadow:inset 0 0 0 1px #ffffff0f}.preview-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.preview-glow{position:absolute;inset:auto 8% 8% auto;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,#ffffff3d,#fff0);filter:blur(16px);pointer-events:none}.preview-name{position:absolute;left:26px;bottom:26px;max-width:calc(100% - 52px);font-size:clamp(30px,6.8vw,52px);font-weight:800;line-height:1;letter-spacing:0;text-shadow:0 8px 24px rgba(0,0,0,.34)}.generate-btn,.back-btn{width:100%;min-height:54px;border-radius:18px;font-weight:700;letter-spacing:0;cursor:pointer;transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease}.generate-btn{margin-top:4px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));box-shadow:0 14px 28px #2c7dff47;color:#f8fbff}.generate-btn:hover,.back-btn:hover{transform:translateY(-1px)}.generate-btn:disabled{cursor:not-allowed;opacity:.76;box-shadow:none}.back-btn{margin-top:16px;border:1px solid rgba(255,255,255,.36);color:#f6fbff;background:#ffffff14}.generate-btn:focus-visible,.back-btn:focus-visible,.swatch-item:focus-visible,.field input:focus-visible{outline:3px solid rgba(85,165,255,.5);outline-offset:2px}.swatch-rail{margin-top:12px}.swatch-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:0}.swatch-item{display:block;padding:0;border-radius:999px;overflow:hidden;background:#04070d59;border:2px solid rgba(255,255,255,.08);aspect-ratio:1 / 1}.swatch-item img{display:block;width:100%;height:100%;object-fit:cover}.swatch-item.active{border-color:#55a5ffeb;box-shadow:0 0 0 3px #55a5ff2e}.result-card{padding-top:20px;text-align:center}.result-preview{aspect-ratio:1 / 1;border-radius:28px;overflow:hidden;background:#0a0c128f;border:1px solid rgba(255,255,255,.12)}.result-image{display:block;width:100%;height:100%;object-fit:cover}.save-tip{margin:18px 0 0;color:#f5f7fbd6;font-size:14px}