:root{--bg:#06111f;--bg2:#0a1b33;--panel:#101b31;--panel2:#151b30;--line:rgba(255,255,255,.10);--text:#f4f7fb;--muted:#9fb1c9;--cyan:#27ffd0;--cyan2:#13d8ff;--danger:#ff5370;--ok:#27ffd0;--shadow:0 24px 80px rgba(0,0,0,.42)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 15% 5%,rgba(39,255,208,.13),transparent 30%),linear-gradient(135deg,var(--bg),#070913 70%);color:var(--text);min-height:100vh}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#050914;border-right:1px solid var(--line);padding:26px 20px;position:sticky;top:0;height:100vh}.brand{font-size:34px;font-weight:900;letter-spacing:-1.5px;margin-bottom:38px}.brand span{color:var(--cyan)}nav{display:grid;gap:10px}nav a{padding:14px 14px;border-radius:14px;color:#dbe7f5;text-decoration:none;font-weight:800}.active,nav a:hover{background:rgba(39,255,208,.11);color:var(--cyan)}.side-note{position:absolute;bottom:24px;left:20px;right:20px;color:var(--muted);background:linear-gradient(135deg,rgba(39,255,208,.12),rgba(19,216,255,.07));border:1px solid var(--line);padding:16px;border-radius:18px;line-height:1.45}.main{padding:34px;overflow:hidden}.hero{display:flex;justify-content:space-between;gap:24px;align-items:stretch;margin-bottom:26px;padding:30px;border-radius:28px;background:linear-gradient(135deg,rgba(14,39,65,.95),rgba(9,12,27,.96));box-shadow:var(--shadow);border:1px solid var(--line)}.eyebrow{color:var(--cyan);font-weight:900;text-transform:uppercase;letter-spacing:.18em;margin:0 0 8px}.hero h1{font-size:48px;line-height:1;margin:0 0 12px;letter-spacing:-2px}.hero p{font-size:18px;color:#c9d8ea;margin:0;max-width:760px}.hero-card{min-width:230px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.05);padding:22px;display:grid;align-content:center;gap:8px}.hero-card strong{font-size:42px;color:var(--cyan)}.hero-card span{color:var(--muted);font-weight:700}.grid{display:grid;grid-template-columns:minmax(420px,580px) 1fr;gap:24px;align-items:start}.panel{background:linear-gradient(180deg,rgba(16,27,49,.96),rgba(10,17,32,.96));border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow)}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.panel-title h2{font-size:24px;margin:0}.panel-title small{color:var(--muted);font-weight:700}label{display:block;font-weight:900;margin:18px 0 8px;color:#f4f7fb}input,textarea,select{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);color:var(--text);border-radius:16px;padding:15px 16px;font:inherit;outline:none}select option{color:#101828}textarea{min-height:140px;resize:vertical;line-height:1.5}input:focus,textarea:focus,select:focus{border-color:rgba(39,255,208,.75);box-shadow:0 0 0 4px rgba(39,255,208,.10)}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.segmented input{display:none}.segmented label{margin:0;text-align:center;border:1px solid var(--line);border-radius:999px;padding:12px 10px;background:rgba(255,255,255,.055);cursor:pointer}.segmented input:checked+label{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#04101c;border-color:transparent}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preset-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.preset-row button,.generate,.download{border:0;border-radius:16px;padding:13px 14px;font-weight:900;cursor:pointer}.preset-row button{background:rgba(255,255,255,.06);color:#dce9f6;border:1px solid var(--line);text-align:left}.preset-row button:hover{border-color:rgba(39,255,208,.55);color:var(--cyan)}.generate{width:100%;margin-top:22px;background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#03111b;font-size:17px;padding:17px}.generate:disabled{opacity:.5;cursor:not-allowed}.message{margin-top:14px;color:var(--muted);font-weight:800}.message.error{color:var(--danger)}.playlist{min-height:520px}.track{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:16px}.track-head{display:flex;justify-content:space-between;gap:12px}.track h3{margin:0 0 6px;font-size:19px}.track p{margin:0;color:var(--muted);font-weight:700}.badge{font-size:12px;text-transform:uppercase;font-weight:900;border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.08);height:max-content}.badge.completed{color:#03111b;background:var(--ok)}.badge.failed{background:rgba(255,83,112,.18);color:#ff8ea2}.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan2))}audio{width:100%;margin:8px 0 12px}.download{display:inline-block;background:rgba(39,255,208,.12);color:var(--cyan);border:1px solid rgba(39,255,208,.35);text-decoration:none}.waiting{color:var(--muted);font-weight:800;padding:10px 0}details{margin-top:12px;color:var(--muted)}summary{cursor:pointer;font-weight:900}pre{white-space:pre-wrap;background:rgba(0,0,0,.25);padding:14px;border-radius:14px;max-height:220px;overflow:auto}.empty{color:var(--muted);padding:38px;text-align:center;border:1px dashed var(--line);border-radius:20px}@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid{grid-template-columns:1fr}.hero{flex-direction:column}.hero h1{font-size:38px}}@media(max-width:640px){.main{padding:16px}.segmented,.two-cols,.preset-row{grid-template-columns:1fr}.hero{padding:22px}.panel{padding:18px}}