:root{--bg:#0e1015;--panel:#171a21;--ink:#e8eaed;--mut:#9aa0aa;--line:#262b34;--acc:#6ea8fe;--acc2:#7ee2a8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,'PingFang SC','Helvetica Neue',Arial,sans-serif}
.top{text-align:center;padding:26px 16px 6px}
.top h1{margin:0;font-size:22px;letter-spacing:.5px}
.sub{color:var(--mut);font-size:13px;margin-top:6px}
.stage{display:flex;gap:46px;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:26px 16px}

/* 手机 */
.phone{width:300px;background:#0a0c10;border:2px solid #2a2f3a;border-radius:36px;padding:12px 10px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.notch{width:90px;height:6px;background:#2a2f3a;border-radius:6px;margin:2px auto 10px}
.screen.app{background:var(--panel);border-radius:26px;padding:16px;min-height:560px}
.apphead{font-size:16px;font-weight:600;margin-bottom:12px}
#desc{width:100%;height:74px;background:#0e1116;border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:10px;font-size:13px;resize:none;font-family:inherit;line-height:1.5}
#desc:focus{outline:none;border-color:var(--acc)}
.row{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.mic{font-size:18px;opacity:.7;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.chip{background:#0e1116;border:1px solid var(--line);color:var(--mut);border-radius:16px;padding:5px 10px;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--acc);color:var(--ink)}
button{cursor:pointer;font-family:inherit}
.primary{width:100%;background:linear-gradient(135deg,#6ea8fe,#8a7bfe);border:0;color:#fff;border-radius:12px;padding:12px;font-size:15px;font-weight:600;margin-top:4px}
.primary:disabled{opacity:.5;cursor:default}
.ghost{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:7px 10px;font-size:12px}
.ghost.wide{width:100%;margin-top:8px}
.cast{margin-top:12px;background:linear-gradient(135deg,#7ee2a8,#4fc3f7);color:#06210f}
.ai{margin:14px 0;background:#0e1116;border:1px dashed #34406a;border-radius:12px;padding:10px}
.aih{font-size:11px;color:var(--acc);margin-bottom:7px}
.aitags{display:flex;flex-wrap:wrap;gap:6px}
.aitags span{background:#1a1f29;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11px;color:var(--ink)}
.cand{margin:14px 0}
.candh{font-size:12px;color:var(--acc2);margin-bottom:8px}
.candrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.candcard{border:1px solid var(--line);border-radius:12px;padding:5px;text-align:center;background:#0e1116;transition:.15s}
.candcard.click{cursor:pointer}
.candcard.click:hover{border-color:var(--acc);transform:translateY(-2px)}
.candcard.pending{opacity:.55}
.candcard.sel{border-color:var(--acc2);box-shadow:0 0 0 2px rgba(126,226,168,.35)}
.candcard img{width:100%;height:76px;object-fit:cover;border-radius:8px;background:#fff}
.candcard .cap{font-size:10px;color:var(--mut);margin-top:4px;line-height:1.3}
.preview{margin:14px 0;text-align:center}
.preview img{width:172px;height:172px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#fff}
.edit{margin:12px 0;background:#0e1116;border:1px solid var(--line);border-radius:12px;padding:10px}
.edith{font-size:11px;color:var(--acc2);margin-bottom:8px}
.edit label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--mut);margin:6px 0;gap:8px}
.edit select{flex:1;max-width:160px;min-width:0;text-overflow:ellipsis;background:#171a21;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit}
.edit select:focus{outline:none;border-color:var(--acc)}
.status{color:var(--mut);font-size:12px;margin-top:9px;min-height:16px}

/* 生成 loading(萌系) */
.loading{padding:16px 8px 6px;text-align:center}
.spinner{width:62px;height:62px;margin:4px auto 14px;border-radius:50%;position:relative;
  background:conic-gradient(from 0deg,#6ea8fe,#8a7bfe,#7ee2a8,#6ea8fe);
  -webkit-mask:radial-gradient(closest-side,transparent 68%,#000 70%);
          mask:radial-gradient(closest-side,transparent 68%,#000 70%);
  animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinEmoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.loadingText{font-size:13px;color:var(--ink);font-weight:500;min-height:18px}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.steps{display:flex;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.steps i{font-style:normal;font-size:10px;color:var(--mut);background:#0e1116;border:1px solid var(--line);border-radius:10px;padding:3px 9px;transition:.3s}
.steps i.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6ea8fe,#8a7bfe)}
.steps i.done{color:var(--acc2);border-color:rgba(126,226,168,.4)}

/* 设备 */
.deviceWrap{text-align:center}
.device{width:360px;height:360px;border-radius:50%;background:radial-gradient(circle at 50% 32%,#272c35,#0a0c10);border:10px solid #1b1f27;display:flex;align-items:center;justify-content:center;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 34px rgba(0,0,0,.65)}
.round{width:300px;height:300px;border-radius:50%;overflow:hidden;position:relative;background:#000;display:flex;align-items:center;justify-content:center}
.round img{width:100%;height:100%;object-fit:cover;display:none}
.round img[src]{display:block}
.hint{color:#55606e;font-size:13px}
.devlabel{color:var(--mut);font-size:12px;margin-top:14px}
.filmstrip{display:flex;gap:3px;justify-content:center;margin:12px auto 0;flex-wrap:nowrap;min-height:34px}
.filmstrip img{width:34px;height:34px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.devsub{color:var(--mut);font-size:11px;margin-top:8px;max-width:340px;margin-left:auto;margin-right:auto}

/* 样例 */
.samples{max-width:920px;margin:6px auto 70px;padding:0 16px}
.samh{color:var(--mut);font-size:13px;margin-bottom:12px;text-align:center}
.samrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;min-height:40px}
.samcard{width:132px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;cursor:pointer;text-align:center;transition:.15s}
.samcard:hover{border-color:var(--acc);transform:translateY(-3px)}
.samcard img{width:100%;height:116px;object-fit:cover;border-radius:10px;background:#fff}
.samcard .cap{font-size:11px;color:var(--mut);margin-top:6px;line-height:1.4}
.empty{color:var(--mut);font-size:13px}
.voicewrap{flex:1;max-width:160px;display:flex;align-items:center;gap:6px}
.voicewrap select{flex:1;max-width:none;min-width:0;text-overflow:ellipsis}
.audition{background:#171a21;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 7px;font-size:12px;cursor:pointer;line-height:1}
.audition:hover{border-color:var(--acc)}
.audition:active{transform:scale(.94)}