:root{color-scheme:dark;--bg:#090e1b;--panel:#121b2d;--border:#273551;--muted:#98a8c4;--blue:#014ef7;--text:#f3f7ff}*{box-sizing:border-box}body{background:radial-gradient(ellipse at top right,#142c60 0,transparent 45%),var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif;margin:0}.app{max-width:940px;margin:auto;padding:26px 18px}header{display:flex;align-items:center;gap:14px;margin:4px 0 25px}.mark{border-radius:14px;background:var(--blue);width:50px;height:50px;display:grid;place-items:center;font-size:22px;flex:none}h1{font-size:25px;line-height:1.2;margin:0}header p{margin:5px 0 0;color:var(--muted)}.tag{margin-left:auto;font-size:12px;color:#b4c9ff;border:1px solid #42649b;padding:6px 9px;border-radius:20px}.panel{padding:23px;margin-bottom:18px;background:rgba(18,27,45,.94);border:1px solid var(--border);border-radius:17px;box-shadow:0 15px 30px #0001}.section-title,.line,.actionrow,.keyrow{display:flex;gap:10px;align-items:center}.section-title,.line{justify-content:space-between}h2{font-size:17px;margin:0 0 12px}.section-title h2{margin:0}a{color:#8cb3ff;text-decoration:none}a:hover{text-decoration:underline}.hint{color:var(--muted);font-size:13px}input,select,textarea{width:100%;background:#091324;color:#f4f6ff;border:1px solid #354764;border-radius:9px;padding:12px;font:inherit;outline:none}textarea{resize:vertical;min-height:150px}input:focus,select:focus,textarea:focus{border-color:#6491ff;box-shadow:0 0 0 2px #014ef730}.keyrow input{flex:1;min-width:0}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:19px 0}label{display:block;font-size:13px;color:#b7c7e0}label select,label input{margin-top:7px}.field{margin-bottom:15px}button,.button{cursor:pointer;border:0;border-radius:9px;padding:11px 15px;font:inherit;font-weight:600;white-space:nowrap}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--blue);color:white}.primary:hover{background:#2368ff;text-decoration:none}.secondary{background:#22304b;color:#d9e4f9;border:1px solid #384b70}.secondary:hover{background:#2b3d5e}.small{padding:7px 10px;font-size:12px}.actionrow{margin-top:22px;flex-wrap:wrap}.status{padding:12px 14px;background:#0b1527;border:1px solid #293753;border-radius:8px;margin-top:15px;color:#aec7f6;white-space:pre-wrap}.status.error{color:#ffb2ae;border-color:#6b303b}details{margin-top:13px}details summary{cursor:pointer;color:#dbe6ff}details li{margin:6px 0}audio{display:block;width:100%;margin:15px 0 20px}footer{color:#7e91ae;text-align:center;font-size:12px;padding:7px 0 20px}@media(max-width:600px){.app{padding:14px 10px}header{flex-wrap:wrap}.tag{margin-left:0}.panel{padding:16px}.settings{grid-template-columns:1fr}.keyrow{flex-wrap:wrap}.keyrow input{flex-basis:100%}.section-title{align-items:start;gap:15px}.section-title a{font-size:12px}}

/* v2 visual refinements */
:root{--bg:#080c17;--panel:#131a2a;--border:#2d3850;--muted:#9ba9c2;--blue:#014ef7;--text:#f8faff}
body{background:radial-gradient(ellipse 70% 33% at 75% -12%,#1d3d84 0%,transparent 100%),#080c17;letter-spacing:-.012em}
.app{max-width:980px;padding-top:36px}
header{margin-bottom:28px}
header h1{font-size:28px;font-weight:750;letter-spacing:-.045em}
header p{font-size:14px}
.mark{width:54px;height:54px;background:linear-gradient(145deg,#2675ff,#014ef7);box-shadow:0 9px 25px #014ef744}
.panel{border-radius:19px;box-shadow:0 12px 38px #00000017;background:linear-gradient(160deg,#161f31,#111929);padding:26px;margin-bottom:17px}
h2{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.02em}
.section-title h2{margin:0}
.step{display:inline-grid;place-items:center;color:#8eb5ff;background:#19305c;border:1px solid #294774;font-size:11px;border-radius:8px;width:28px;height:28px;font-weight:750}
.tag{letter-spacing:.09em;text-transform:uppercase;font-size:10px}
input,textarea,select{background:#0d1422;border:1px solid #36435c;border-radius:10px}
textarea{line-height:1.75}
label{font-size:13px;font-weight:650}
.settings{gap:18px}
.primary{background:linear-gradient(125deg,#014ef7,#3178ff);box-shadow:0 5px 13px #014ef729}
.button:hover{transform:translateY(-1px)}
.mini-tag{display:inline-block;margin-left:4px;font-size:10px;color:#a5b7d5;font-weight:400}
.voice-control{display:flex;gap:8px;margin-top:7px;align-items:stretch}
.voice-control select{margin:0;min-width:0;flex:1}
.preview-button{display:flex;align-items:center;gap:8px;background:#173363;color:#dceaff;border:1px solid #3864a2;min-width:112px;justify-content:center;padding:10px 12px;font-size:13px}
.preview-button:hover{background:#214476}
#previewSymbol{font-size:13px}
.voice-preview-panel{border:1px solid #304361;background:linear-gradient(120deg,#102139,#121c2f);border-radius:12px;padding:17px;margin:-3px 0 18px}
.voice-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:start}
.voice-preview-heading strong{display:block;font-size:15px}
.voice-preview-heading span{display:block;margin-top:2px;font-size:12px;color:#a7b9d6}
.voice-preview-heading .small-note{max-width:180px;text-align:right;font-size:11px;color:#90a4c7}
.voice-preview-panel .hint{margin-bottom:0}
.voice-preview-panel audio{margin:11px 0 3px;height:38px}
@media(max-width:600px){.panel{padding:18px}.voice-preview-heading .small-note{display:none}.preview-button{min-width:100px}.app{padding-top:15px}}
