:root {
  --bg: #080b12;
  --panel: rgba(16,22,33,.92);
  --panel-2: rgba(24,31,44,.92);
  --text: #f7f9ff;
  --muted: #8f9aae;
  --line: rgba(255,255,255,.08);
  --accent: #635bff;
  --cyan: #16d9ff;
  --pink: #ff3cc7;
  --green: #5ef38c;
  --orange: #ff9c38;
  --red: #ff405d;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 80% 0%, rgba(85,126,255,.16), transparent 30%),
linear-gradient(135deg,#05070c 0%,#111827 58%,#edf4ff 180%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;background:rgba(5,8,14,.88);border-right:1px solid var(--line);backdrop-filter:blur(24px);display:flex;flex-direction:column;z-index:20}
.brand{display:flex;gap:12px;align-items:center;padding:8px 10px 22px}
.brand-mark{font-size:40px;font-weight:900;line-height:1;background:linear-gradient(90deg,var(--cyan),var(--accent),var(--pink));-webkit-background-clip:text;color:transparent}
.brand strong{display:block;font-size:25px;letter-spacing:.03em}
.brand span{font-size:11px;color:var(--muted)}
nav{display:flex;flex-direction:column;gap:5px}
.nav-item{border:0;background:transparent;color:var(--muted);text-align:left;padding:11px 12px;border-radius:11px;display:flex;gap:10px;align-items:center}
.nav-item:hover,.nav-item.active{color:white;background:linear-gradient(90deg,rgba(99,91,255,.95),rgba(99,91,255,.32))}
.sidebar-footer{margin-top:auto;display:grid;gap:10px}
.sidebar-footer button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px;border-radius:12px}
.sidebar-footer small{color:var(--muted);text-align:center}
.main{min-width:0}
.topbar{height:68px;position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(7,10,16,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.transport,.session{display:flex;align-items:center;gap:8px}
.transport button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:white}
.transport .play{color:var(--green)}
.transport .record{color:var(--red)}
#timeDisplay{min-width:126px;font-variant-numeric:tabular-nums}
.session label,.session select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px}
.session input{width:58px;background:transparent;color:inherit;border:0}
.mobile-menu{display:none}
.page-host{padding:24px;max-width:1600px;margin:auto}
.page-title{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}
.page-title h1{font-size:28px;margin:0}
.page-title p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:linear-gradient(145deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 14px}
.metric{font-size:30px;font-weight:800}
.muted{color:var(--muted)}
.waveform{height:180px;border-radius:14px;background:
linear-gradient(180deg,transparent 49%,rgba(255,255,255,.08) 50%,transparent 51%),
repeating-linear-gradient(90deg,rgba(20,217,255,.05) 0 1px,transparent 1px 20px),
radial-gradient(ellipse at center,rgba(99,91,255,.45),transparent 60%);position:relative;overflow:hidden}
.waveform::after{content:"";position:absolute;inset:25% 3%;background:linear-gradient(90deg,var(--cyan),var(--pink));clip-path:polygon(0 49%,4% 35%,8% 57%,12% 24%,16% 66%,20% 38%,24% 52%,28% 20%,32% 70%,36% 44%,40% 53%,44% 31%,48% 64%,52% 42%,56% 50%,60% 17%,64% 76%,68% 35%,72% 58%,76% 27%,80% 69%,84% 43%,88% 55%,92% 33%,96% 61%,100% 49%,100% 52%,96% 67%,92% 45%,88% 59%,84% 47%,80% 73%,76% 31%,72% 62%,68% 39%,64% 80%,60% 21%,56% 54%,52% 46%,48% 68%,44% 35%,40% 57%,36% 48%,32% 74%,28% 24%,24% 56%,20% 42%,16% 70%,12% 28%,8% 61%,4% 39%,0 52%);filter:drop-shadow(0 0 14px rgba(22,217,255,.7))}
.meters{display:flex;align-items:end;gap:8px;height:180px}
.meter{flex:1;border-radius:8px;background:#070b10;position:relative;overflow:hidden}
.meter i{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(var(--red),var(--orange),var(--green));height:var(--level,55%);transition:.2s}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:10px 14px;border-radius:11px}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.danger{background:rgba(255,64,93,.14);color:#ff8193}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.device-list,.preset-list{display:grid;gap:8px}
.list-row{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px}
.status{color:var(--green);font-size:12px}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pad{min-height:105px;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:white;font-weight:700;background:linear-gradient(135deg,var(--pad1,#35205e),var(--pad2,#784cff));box-shadow:inset 0 1px rgba(255,255,255,.14)}
.pad.active{transform:scale(.97);filter:brightness(1.5);box-shadow:0 0 28px var(--pad2,#784cff)}
.xy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.xy-pad{aspect-ratio:1.4;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line);background:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
radial-gradient(circle at 50% 50%,rgba(99,91,255,.2),transparent 45%);
background-size:25% 25%,25% 25%,100% 100%}
.xy-dot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--dot,var(--cyan));box-shadow:0 0 25px var(--dot,var(--cyan));transform:translate(-50%,-50%);left:50%;top:50%}
.keyboard{display:flex;height:220px;position:relative;padding:0 6px}
.key.white{flex:1;border:1px solid #111;background:linear-gradient(#fff,#cbd3df);border-radius:0 0 7px 7px;color:#111;display:flex;align-items:end;justify-content:center;padding-bottom:14px}
.key.black{position:absolute;width:5.2%;height:62%;background:linear-gradient(#273040,#030407);border-radius:0 0 5px 5px;z-index:2}
.key.active{background:linear-gradient(var(--cyan),var(--accent));color:white;box-shadow:0 0 25px var(--cyan)}
.faders{display:grid;grid-template-columns:repeat(8,minmax(62px,1fr));gap:10px}
.channel{text-align:center;padding:12px 8px;background:rgba(255,255,255,.035);border-radius:13px;border:1px solid var(--line)}
.channel input[type=range]{writing-mode:vertical-lr;direction:rtl;height:220px;width:28px;accent-color:var(--green)}
.knob{width:54px;height:54px;border-radius:50%;margin:0 auto 12px;background:conic-gradient(var(--cyan) var(--value,45%),#202938 0);position:relative}
.knob::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#111722}
.loop-editor{position:relative}
.loop-selection{position:absolute;top:0;bottom:0;left:22%;width:45%;border:2px solid var(--cyan);background:rgba(22,217,255,.12);border-radius:9px}
.loop-handle{position:absolute;top:-7px;width:14px;height:14px;background:var(--cyan);border-radius:50%}
.loop-handle.left{left:-7px}.loop-handle.right{right:-7px}
.automation canvas{width:100%;height:330px;background:#0a1019;border-radius:14px;border:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field{display:grid;gap:6px}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--text)}
.field textarea{min-height:90px;resize:vertical}
.widget-editor{display:grid;grid-template-columns:220px 1fr 280px;gap:14px}
.widget-palette,.inspector{display:grid;gap:8px;align-content:start}
.stage{min-height:520px;border:1px dashed rgba(255,255,255,.24);border-radius:16px;padding:14px;background:rgba(0,0,0,.13);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:110px;gap:10px}
.stage-item{display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(99,91,255,.45),rgba(22,217,255,.18));border:1px solid var(--line)}
.light-progress body{}
body.lightish{--bg:#dfe8f5;--panel:rgba(247,250,255,.92);--panel-2:rgba(220,230,244,.92);--text:#10151f;--muted:#5d6878;--line:rgba(10,25,45,.12);background:linear-gradient(135deg,#0b111d 0%,#9aaec9 48%,#eef5ff 100%)}
body.lightish .sidebar,body.lightish .topbar{background:rgba(11,17,29,.88);color:white}
body.lightish .sidebar{--text:#fff;--muted:#aeb9ca}
@media(max-width:1050px){.app-shell{grid-template-columns:86px 1fr}.brand div:last-child,.nav-item span,.sidebar-footer small{display:none}.brand{justify-content:center}.nav-item{justify-content:center;font-size:20px}.grid.three{grid-template-columns:1fr 1fr}.widget-editor{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-270px;width:250px;transition:.25s}.sidebar.open{left:0}.brand div:last-child,.nav-item span,.sidebar-footer small{display:block}.nav-item{justify-content:flex-start;font-size:16px}.mobile-menu{display:block;border:0;background:transparent;color:white;font-size:22px}.topbar{padding:0 10px}.session{display:none}.page-host{padding:14px}.grid.two,.grid.three{grid-template-columns:1fr}.pads{grid-template-columns:repeat(3,1fr)}.pad{min-height:88px}.xy-grid{grid-template-columns:1fr}.faders{overflow-x:auto;grid-template-columns:repeat(8,76px)}.widget-editor{display:block}.widget-palette,.inspector{margin-bottom:12px}.stage{grid-template-columns:repeat(2,1fr)}}