:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#f5f6f8;color:#141821}
*{box-sizing:border-box}body{margin:0}.shell{max-width:1050px;margin:0 auto;padding:38px 20px 80px}
header{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:26px}
h1{font-size:42px;letter-spacing:-1.5px;margin:4px 0 8px}h2{margin-top:0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.7px;color:#626b7a}.sub,.hint{color:#69717f}
.stepbar{display:flex;gap:8px;flex-wrap:wrap}.step{padding:8px 11px;border-radius:999px;background:#e8eaf0;font-size:12px;font-weight:700}.step.active{background:#171a21;color:white}
.card{background:white;border:1px solid #e5e7eb;border-radius:18px;padding:28px;box-shadow:0 8px 30px rgba(20,24,33,.06)}.hidden{display:none!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:14px;margin-bottom:14px}
input,select,textarea{border:1px solid #d6d9e0;border-radius:10px;padding:12px 13px;font:inherit;background:white}input:focus,select:focus,textarea:focus{outline:2px solid #aeb7ff;border-color:#6574d8}
fieldset{border:1px solid #e0e2e7;border-radius:14px;margin:16px 0;padding:18px}legend{font-weight:800;padding:0 8px}.checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:12px}.checks label{display:flex;flex-direction:row;align-items:center;margin:0;font-weight:550}
button{border:0;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}.primary{background:#171a21;color:white}.secondary{background:#eef0f4;color:#252a34}.actions{display:flex;justify-content:space-between;margin-top:20px}
.personRow{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.remove{background:#fff1f1;color:#a12828;margin-bottom:14px}
.pronCard{border:1px solid #e1e3e8;border-radius:14px;padding:18px;margin:14px 0}.pronTitle{display:flex;justify-content:space-between;align-items:center}.option{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid #e5e7eb;padding:10px;border-radius:10px;margin:8px 0}.listen{background:#eef0f4;padding:8px 11px}.customPron{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:10px}.verifyLine{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:12px}
.subOptions{margin-left:24px}
.chatHeader{display:flex;justify-content:space-between}.badge{background:#ecf0ff;color:#3848a6;border-radius:999px;padding:7px 11px;height:max-content;font-weight:800;font-size:12px}
.chatLog{min-height:300px;max-height:560px;overflow:auto;padding:8px 0}.bubble{max-width:80%;padding:12px 14px;border-radius:14px;margin:10px 0;white-space:pre-wrap}.assistant{background:#f0f1f4}.user{background:#171a21;color:white;margin-left:auto}.composer{display:grid;grid-template-columns:1fr auto;gap:10px;border-top:1px solid #eee;padding-top:16px}.composer textarea{resize:vertical}
.bubble.typing{padding:14px 16px}.typing-dots{display:inline-flex;gap:4px}.typing-dots span{width:6px;height:6px;border-radius:50%;background:#9096a3;animation:typingBlink 1.4s infinite ease-in-out both}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingBlink{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}
.alert{background:#fff8db;border:1px solid #efd87a;border-radius:12px;padding:14px;margin-bottom:10px}.result{white-space:pre-wrap;background:#101217;color:#e9ecf2;border-radius:12px;padding:16px;overflow:auto;transition:background .2s,color .2s}.result.loading{background:#1c1f26;color:#9aa1b0}.result.success{background:#0f3320;color:#8ff0b0;border:1px solid #2e7d4f}.result.error{background:#3a1414;color:#ffb4b4;border:1px solid #7a2e2e}.toast{position:fixed;right:20px;bottom:20px;background:#171a21;color:#fff;padding:12px 16px;border-radius:10px}
.modalBackdrop{position:fixed;inset:0;background:rgba(15,17,23,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modalCard{background:white;border-radius:18px;padding:30px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(20,24,33,.25);text-align:center}
.modalIcon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px;font-weight:800}
.modalCard.success .modalIcon{background:#e6f7ec;color:#1f8a4c}.modalCard.failed .modalIcon{background:#fdeaea;color:#c23434}.modalCard.pending .modalIcon{background:#fff4d6;color:#9a6b00}
.modalCard h3{margin:0 0 8px;font-size:20px}.modalActions{justify-content:center;flex-wrap:wrap}
#statusCard{text-align:center}#statusCard b{font-size:18px;letter-spacing:.5px}.spinner{width:34px;height:34px;border-radius:50%;border:4px solid #e5e7eb;border-top-color:#171a21;margin:18px auto;animation:spin 1s linear infinite}.spinner.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}
a.secondary{display:inline-flex;align-items:center;padding:12px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.orderList{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.orderRow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:1px solid #e5e7eb;border-radius:12px;text-decoration:none;color:inherit;background:#fafbfc;transition:border-color .15s}
.orderRow:hover{border-color:#aeb7ff}
.orderRowMain{display:flex;flex-direction:column;gap:2px}
.orderRowMeta{display:flex;align-items:center;gap:12px}
.orderStatus{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:#eef0f4}
.orderRow.status-success .orderStatus{background:#e6f7ec;color:#1f8a4c}
.orderRow.status-failed .orderStatus{background:#fdeaea;color:#c23434}
.orderRow.status-pending .orderStatus{background:#fff4d6;color:#9a6b00}
.songOutput{display:flex;flex-direction:column;gap:18px;margin-top:22px;text-align:left}
.mediaPanel{display:flex;flex-direction:column;gap:18px;text-align:left}
.mediaItem{border:1px solid #e5e7eb;border-radius:14px;padding:16px;background:#fafbfc}
.mediaItem .hint{margin:0 0 10px;font-weight:700}
.mediaPlayer{width:100%;display:block;border-radius:10px;background:#101217}
audio.mediaPlayer{background:transparent}
.mediaActions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.mediaActions a.secondary,.mediaActions button.secondary{padding:9px 14px;font-size:13px}
.mediaTabbar{margin-top:22px}
.mediaTabbar .step{cursor:pointer}
.tabPanel{margin-top:18px;text-align:left}
#notReadyState{text-align:center}
#notReadyState .hint{margin-bottom:16px}
@media(max-width:760px){header{display:block}.stepbar{margin-top:18px}.grid2{grid-template-columns:1fr}.personRow,.customPron{grid-template-columns:1fr}.composer{grid-template-columns:1fr}h1{font-size:34px}}
.reviewHead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.reviewHead span{padding:.4rem .7rem;border-radius:999px;background:#f1f3f5;font-size:.85rem}.option{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.8rem;border:1px solid #e7e8ec;border-radius:12px;margin:.55rem 0}.option small{display:block;margin-top:.25rem;color:#707582}.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}#authBox{display:flex;gap:.5rem;align-items:center}.chatlog{min-height:220px;max-height:460px;overflow:auto;padding:.75rem 0}.bubble{padding:.8rem 1rem;border-radius:14px;margin:.5rem 0;white-space:pre-wrap}.bubble.assistant{background:#f5f6f8}.bubble.user{background:#111;color:white;margin-left:12%}.toast{position:fixed;right:20px;bottom:20px;max-width:460px;background:#111;color:white;padding:.8rem 1rem;border-radius:10px;z-index:10}.hidden{display:none!important}textarea{width:100%;box-sizing:border-box}