:root{--bg: #0b0e14;--panel: #141922;--panel-2: #1a2030;--line: #242c3b;--text: #e8ecf4;--muted: #8b93a7;--accent: #7c5cff;--accent-2: #5b8cff;--ok: #34d399;--warn: #fbbf24;--radius: 16px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#1a1436 0%,var(--bg) 60%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.shell{min-height:100%;display:flex;flex-direction:column;max-width:960px;margin:0 auto;padding:20px 20px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;flex-wrap:wrap}.logo{font-size:16px;letter-spacing:.5px;color:var(--muted)}.logo b{color:var(--accent)}.step-pill{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:#ffffff05}.stage{flex:1}.footnote{margin-top:32px;font-size:12px;color:#4d566a;text-align:center;line-height:1.7}h1{font-size:34px;line-height:1.25;margin:8px 0 14px;letter-spacing:-.6px}h2{font-size:26px;margin:0 0 10px;letter-spacing:-.4px}.lede{color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 26px}.lede b{color:var(--text)}.hint{font-size:13px;color:#5d6675;text-align:center;margin:12px 0 0}.alert{background:#fbbf2414;border:1px solid rgba(251,191,36,.28);color:#f0d38a;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.7;margin:14px 0}.alert.soft{background:#7c5cff14;border-color:#7c5cff4d;color:#c3b6ff}.alert code{font-size:12px;color:#ffd9a0;word-break:break-all}button{font-family:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}.primary{display:block;width:100%;margin-top:26px;padding:17px 20px;font-size:17px;font-weight:600;color:#fff;border:0;border-radius:14px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);transition:transform .12s ease,filter .2s ease}.primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.primary.as-link{text-decoration:none;text-align:center}.ghost{background:#ffffff0a;border:1px solid var(--line);color:var(--text);border-radius:11px;padding:11px 18px;font-size:14px}.ghost:hover:not(:disabled){background:#ffffff14}.ghost.wide{width:100%;margin-top:20px}input{width:100%;padding:14px 16px;font-size:15px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:12px;outline:none;font-family:inherit}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff26}input::placeholder{color:#5d6675}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tcard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);transition:border-color .18s ease,transform .18s ease,background .18s ease}.tcard:hover{transform:translateY(-2px);border-color:#3a4358}.tcard.active{border-color:var(--accent);background:linear-gradient(180deg,#7c5cff1f,#7c5cff08);box-shadow:0 0 0 3px #7c5cff1f}.temoji{font-size:26px}.tname{font-size:15px;font-weight:600}.tdesc{font-size:12px;color:var(--muted);line-height:1.6}.custom{margin-top:22px}.custom label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}.generating{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46vh}.orb{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));filter:blur(1px);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}.gen-text{font-size:17px;margin:26px 0 0;color:var(--text)}.pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.pane-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}.pane-head .ghost{padding:6px 12px;font-size:13px;border-radius:8px}.stage-frame{width:100%;height:62vh;min-height:420px;border:0;display:block;background:#fff}.code-wrap{margin-top:14px}.code-wrap summary{cursor:pointer;font-size:13px;color:var(--muted);padding:8px 0}.code-wrap pre{background:#0a0d13;border:1px solid var(--line);border-radius:12px;padding:16px;max-height:320px;overflow:auto;font-size:12px;line-height:1.6;color:#9fe8b8;white-space:pre-wrap;word-break:break-all}.refine{margin-top:24px}.refine-title{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:10px}.badge-ok{font-size:12px;color:var(--ok)}.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:10px 16px;font-size:14px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;transition:border-color .18s ease,background .18s ease}.chip:hover:not(:disabled){border-color:var(--accent);background:#7c5cff1a}.actions{display:flex;gap:12px;margin-top:28px}.actions .ghost{flex:0 0 auto}.actions .primary{flex:1;margin-top:0}.done{text-align:center}.card-preview{margin:24px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel)}.card-preview img{width:100%;display:block}.save-box{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}.save-box.ok{border-color:#34d39966}.save-title{font-size:17px;font-weight:600;margin-bottom:8px}.save-sub{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 16px}.save-box input{margin-bottom:12px}.course-cta{display:flex;flex-direction:column;gap:6px;text-align:left;margin-top:18px;padding:20px 22px;border-radius:var(--radius);border:1px solid rgba(124,92,255,.35);background:linear-gradient(160deg,#7c5cff21,#5b8cff0a);text-decoration:none;color:var(--text);transition:border-color .18s ease,transform .18s ease}.course-cta:hover{border-color:var(--accent);transform:translateY(-1px)}.cc-k{font-size:12px;color:#b9a8ff;letter-spacing:1px}.cc-t{font-size:17px;font-weight:700}.cc-d{font-size:13px;color:var(--muted)}@media (max-width: 640px){.shell{padding:16px 16px 32px}h1{font-size:27px}h2{font-size:21px}.cards{grid-template-columns:1fr}.tcard{flex-direction:row;align-items:center;gap:12px}.temoji{font-size:22px}.tdesc{display:none}.stage-frame{height:52vh;min-height:340px}.actions{flex-direction:column-reverse}.actions .primary{width:100%}}