:root{
  --bg:#0b0f14;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --accent1: #00e5ff;
  --accent2: #b388ff;
  --muted: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#071019 0%, #0b0f14 100%);
  color:#e8eef6; -webkit-font-smoothing:antialiased;
}
.page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px}
.card{width:100%;max-width:980px;background:var(--card);border-radius:16px;padding:28px;backdrop-filter: blur(8px) saturate(120%);box-shadow:0 6px 30px rgba(1,6,12,0.6);border:1px solid var(--glass-border)}
.card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.title{font-size:20px;margin:0}
.subtitle{margin:0;color:var(--muted);font-size:13px}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column}
.field.small{flex:1}
.row{display:flex;gap:12px}
label.label{font-size:12px;color:var(--muted);margin-bottom:6px}
textarea,select,input[type="range"],select{background:transparent;border:1px solid var(--glass-border);color:inherit;padding:10px;border-radius:8px}
textarea{min-height:68px;resize:vertical}
.select-with-action{display:flex;gap:8px}
button{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#041018;border:0;padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s}
button:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(75,0,130,0.12)}
.model-status{font-size:12px;color:var(--muted);margin-top:6px}
.advanced{border-top:1px solid var(--glass-border);padding-top:12px;margin-top:6px}
.advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:10px 0}
.adv-row{display:flex;flex-direction:column;gap:6px}
.actions{display:flex;align-items:center;gap:12px;margin-top:6px}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);border-top-color:var(--accent1);animation:spin 1s linear infinite}
.hidden{display:none}
.status{color:var(--muted);font-size:13px}
.output{margin-top:18px}
.section-title{margin:0 0 8px 0;color:var(--muted);font-size:14px}
#player{width:100%;background:transparent;border-radius:10px}
.btn-link{display:inline-block;margin-top:8px;color:var(--accent1);text-decoration:none}
.footer{margin-top:18px;color:var(--muted);font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.row{flex-direction:column}.card{padding:18px}}