:root {
  --bg: #0b1020;
  --panel: #141b34;
  --panel-2: #10162b;
  --line: #273252;
  --text: #eef3ff;
  --muted: #aab6d6;
  --accent: #7ea6ff;
  --accent-2: #a78bfa;
  --ok: #50c878;
  --warn: #f4b942;
  --danger: #ff6b6b;
  --radius: 18px;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, sans-serif; background:linear-gradient(180deg,#09101f 0%,#0d1428 100%); color:var(--text); min-height:100vh; }
.wrap { width:min(1380px,calc(100% - 24px)); margin:24px auto 48px; display:grid; gap:18px; }
.hero,.panel { background:rgba(20,27,52,.9); border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 40px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.hero { padding:22px 24px; }
.hero h1 { margin:0 0 8px; font-size:clamp(1.6rem,2.7vw,2.4rem); }
.hero p,.muted { color:var(--muted); }
.top-row { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; }
.panel { padding:18px; }
.panel h2,.panel h3 { margin:0 0 12px; }
.full-width { width:100%; }
.row-head,.channel-row { display:grid; grid-template-columns:112px 92px minmax(120px,1fr) 84px minmax(120px,1fr) 110px 110px 74px; gap:10px; align-items:center; }
.row-head { padding:0 8px 8px; color:var(--muted); font-size:.85rem; }
.channel-row,.support-row,.timeline-block { padding:12px 10px; margin-bottom:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); }
.band-name{font-weight:700}.band-range{display:block;font-size:.75rem;color:var(--muted);margin-top:3px}
input[type="number"],input[type="text"],select{width:100%;border-radius:12px;border:1px solid #32406a;background:#0c1225;color:var(--text);padding:10px 12px;font-size:.95rem}
input[type="range"]{width:100%}
.range-stack{display:grid;gap:6px}.slider-label{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted)}
.lr-stack{display:grid;gap:4px}
.toggle-wrap{display:flex;justify-content:center;align-items:center}
.switch{position:relative;width:54px;height:30px;display:inline-block}.switch input{display:none}.switch .slider{position:absolute;inset:0;border-radius:999px;background:#283354;transition:.2s ease;border:1px solid #3a4a7a;cursor:pointer}.switch .slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s ease}.switch input:checked + .slider{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.switch input:checked + .slider::before{transform:translateX(24px)}
.mini-grid,.tri-grid{display:grid;gap:12px}.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tri-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.label{font-size:.88rem;color:var(--muted);margin-bottom:6px;display:block}
.actions,.timeline-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.timeline-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-actions.three{grid-template-columns:repeat(3,minmax(0,1fr))}.timeline-actions.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.timeline-save-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px;align-items:end}.align-end{align-self:end}
button{appearance:none;border:0;border-radius:14px;padding:12px 14px;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .12s ease,opacity .12s ease}button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}.secondary{background:#223052;color:var(--text);border:1px solid #354775}.danger{background:#4a2028;color:#ffd9df;border:1px solid #70404c}.warn{background:#46361d;color:#ffdd9d;border:1px solid #705525}
.status{padding:12px 14px;border-radius:14px;background:#10172f;border:1px solid var(--line);color:var(--muted);font-size:.92rem}.status strong{color:var(--text)}
details{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel-2)}summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;user-select:none}summary::-webkit-details-marker{display:none}.drawer-content{padding:0 16px 16px;color:var(--muted);font-size:.92rem}
.generated-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}.generated-row:first-child{border-top:0}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 10px;font-size:.8rem;background:#18213f;border:1px solid #2f3d67;color:var(--muted);margin:4px 6px 0 0}
.support-main{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 74px;gap:12px;align-items:center}
.support-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.hidden{display:none!important}
.timeline-block-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.timeline-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.block-band-row{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px;display:grid;gap:8px}
.block-band-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.block-band-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.small{font-size:.8rem;color:var(--muted)} .tip{display:flex;align-items:end}
.footer-note{margin-top:12px;font-size:.8rem;color:var(--muted);line-height:1.5}
.inline-code{background:#0c1225;border:1px solid #32406a;padding:2px 6px;border-radius:8px;color:#d7e5ff}
.mt14{margin-top:14px}.mb12{margin-bottom:12px}
@media (max-width: 1280px){.row-head,.channel-row{grid-template-columns:112px 92px minmax(100px,1fr) 84px minmax(100px,1fr) 96px 96px 74px;}}
@media (max-width: 1200px){.timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.support-main{grid-template-columns:1fr 1fr 1fr 1fr 74px;}}
@media (max-width: 1080px){.top-row{grid-template-columns:1fr;}}
@media (max-width: 860px){.row-head{display:none}.channel-row,.support-main,.support-secondary,.mini-grid,.tri-grid,.actions,.timeline-actions,.timeline-grid,.block-band-values,.timeline-save-row{grid-template-columns:1fr}.timeline-block-header{flex-direction:column;align-items:flex-start}}

.studio-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.builder-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.studio-copy{margin:0 0 12px}
.panel-subsection{padding-top:6px}
@media (max-width: 860px){.studio-actions,.builder-card-grid{grid-template-columns:1fr}}


.advanced-editor-hidden{display:none}
.footer-disclaimer{padding-top:16px;padding-bottom:16px}
.footer-disclaimer-copy{font-size:.9rem;color:var(--muted);line-height:1.6}
.floating-feedback-btn{position:fixed;right:18px;bottom:18px;z-index:40;background:#223052;color:var(--text);border:1px solid #354775;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.modal-shell{position:fixed;inset:0;background:rgba(4,8,18,.7);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal-card{width:min(620px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.modal-card p{color:var(--muted)}
.modal-steps ul{margin:8px 0 0 18px;color:var(--text)}
.modal-actions{margin-top:14px}
textarea{width:100%;border-radius:12px;border:1px solid #32406a;background:#0c1225;color:var(--text);padding:12px;font-size:.95rem;resize:vertical}
.listening-mode{position:fixed;inset:0;background:rgba(5,9,20,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:55}
.listening-mode-card{width:min(460px,100%);text-align:center;background:rgba(20,27,52,.92);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.listening-kicker{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.listening-time{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;margin-bottom:18px}
body.listening-mode-active .wrap{filter:blur(6px) saturate(.75);pointer-events:none;user-select:none}
body.listening-mode-active{overflow:hidden}
.support-main{grid-template-columns:1.1fr 1fr 1fr 88px}
.support-secondary{display:none}
@media (max-width: 860px){.floating-feedback-btn{left:12px;right:12px;bottom:12px}.support-main{grid-template-columns:1fr}}

.listening-controls{margin-top:18px;display:grid;gap:16px}
.listening-volume-wrap{text-align:left;background:rgba(11,17,35,.45);border:1px solid var(--line);border-radius:18px;padding:14px}
.listening-actions{justify-content:center;flex-wrap:wrap}
.listening-actions button{min-width:150px}
#sessionDurationGroup {
  display: none;
}
.listening-mode-card {
  --bw-progress: 0%;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(20,27,52,.92), rgba(20,27,52,.92)) padding-box,
    conic-gradient(from -90deg, rgba(78,214,255,.95) 0 var(--bw-progress), rgba(53,71,117,.55) var(--bw-progress) 100%) border-box;
}
.listening-time {
  font-size: clamp(1rem, 2vw, 1.55rem);
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 10px;
}
.listening-meta {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 auto 14px;
  max-width: 30ch;
}
.listening-mode-card.is-end-state {
  --bw-progress: 100%;
}