:root{
  --bg:#07090d;
  --surface:#0d1118;
  --surface2:#111722;
  --surface3:#151d2a;
  --line:#242d3c;
  --line2:#303b4c;
  --text:#edf3fb;
  --muted:#8390a3;
  --gold:#f2bd52;
  --blue:#69a7ff;
  --green:#55d69e;
  --red:#ff6666;
  --shadow:0 18px 60px rgba(0,0,0,.32);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,input,textarea{font:inherit}

button{color:inherit}

.mms-app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% -20%,rgba(63,111,184,.15),transparent 38%),
    var(--bg);
}

.mms-topbar{
  height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:rgba(8,11,16,.96);
  position:relative;
  z-index:10;
}

.mms-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.mms-logo{
  width:40px;
  height:40px;
  border:1px solid rgba(242,189,82,.5);
  background:linear-gradient(145deg,#2a2111,#111318);
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
}

.mms-kicker,.eyebrow,.label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.mms-title{
  font-size:18px;
  font-weight:800;
  margin-top:2px;
}

.mms-project-identity{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:210px;
  justify-content:center;
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--muted);
}

.project-name{
  margin-top:3px;
  font-size:13px;
  font-weight:700;
  color:#b9c3d1;
}

.mms-command-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.btn{
  border:1px solid var(--line2);
  border-radius:8px;
  padding:9px 13px;
  font-weight:800;
  cursor:pointer;
  background:var(--surface2);
}

.btn:hover:not(:disabled){
  border-color:#4d5d73;
}

.btn.primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#17120a;
}

.btn.ghost{
  background:transparent;
}

.btn.full{width:100%}

button:disabled{
  cursor:not-allowed;
  opacity:.42;
}

.mms-main{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:260px minmax(560px,1fr) 300px;
}

.mms-left-rail,
.mms-right-rail{
  background:var(--surface);
  min-height:calc(100vh - 72px);
}

.mms-left-rail{
  border-right:1px solid var(--line);
}

.mms-right-rail{
  border-left:1px solid var(--line);
}

.rail-tabs,.right-tabs{
  height:48px;
  display:flex;
  border-bottom:1px solid var(--line);
}

.rail-tab,.right-tab{
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}

.rail-tab.active,.right-tab.active{
  color:var(--gold);
  box-shadow:inset 0 -2px var(--gold);
}

.left-panel,.right-panel{
  display:none;
  padding:16px;
}

.left-panel.active,.right-panel.active{
  display:block;
}

.panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}

.panel-heading h2,
.jahcore-head h2{
  margin:4px 0 0;
  font-size:16px;
}

.icon-btn{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
  font-size:20px;
  cursor:pointer;
}

.drop-zone{
  width:100%;
  min-height:112px;
  border:1px dashed #39465b;
  border-radius:10px;
  background:#0b1018;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:14px;
  cursor:pointer;
}

.drop-zone strong{
  font-size:12px;
}

.drop-zone span{
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.drop-zone.dragging{
  border-color:var(--gold);
  background:#15130e;
}

.asset-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.asset-item{
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
}

.asset-name{
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.asset-meta{
  color:var(--muted);
  font-size:10px;
  margin-top:5px;
}

.empty-small{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.mms-workspace{
  min-width:0;
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  background:#090c11;
}

.workspace-toolbar{
  height:48px;
  flex:none;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  background:#0c1016;
}

.tool-group{
  display:flex;
  gap:4px;
}

.tool{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  border-radius:6px;
  padding:7px 9px;
  font-size:11px;
  cursor:pointer;
}

.tool.active{
  background:var(--surface3);
  border-color:var(--line2);
  color:var(--text);
}

.workspace-readout{
  border-left:1px solid var(--line);
  padding-left:12px;
  display:flex;
  align-items:baseline;
  gap:5px;
  font-size:10px;
  color:var(--muted);
}

.workspace-readout strong{
  color:var(--text);
  font-size:12px;
}

.timeline-ruler{
  height:34px;
  flex:none;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  color:#657184;
  font-size:9px;
  background:#090d13;
}

.timeline{
  position:relative;
  flex:1;
  min-height:380px;
  overflow:auto;
  background:
    linear-gradient(to right,transparent 99px,rgba(255,255,255,.025) 100px),
    linear-gradient(to bottom,transparent 79px,rgba(255,255,255,.025) 80px),
    #090c11;
  background-size:100px 100%,100% 80px;
}

.timeline-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
}

.timeline-empty-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface2);
  border:1px solid var(--line2);
  color:var(--gold);
  font-size:23px;
  margin-bottom:15px;
}

.timeline-empty h1{
  margin:0;
  font-size:22px;
}

.timeline-empty p{
  max-width:440px;
  margin:10px 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.foundation-note{
  margin-top:18px;
  color:#596679;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.track-row{
  height:92px;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:160px 1fr;
}

.track-header{
  padding:12px;
  background:#0c1118;
  border-right:1px solid var(--line);
}

.track-label{
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-wave{
  margin:12px;
  border-radius:6px;
  border:1px solid #30415b;
  background:
    linear-gradient(
      90deg,
      rgba(105,167,255,.12),
      rgba(105,167,255,.30),
      rgba(105,167,255,.12)
    );
  position:relative;
  overflow:hidden;
}

.track-wave:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(255,255,255,.25);
}

.transport{
  height:74px;
  flex:none;
  border-top:1px solid var(--line);
  background:#0c1016;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 18px;
}

.transport-left{
  display:flex;
  gap:6px;
}

.transport-btn{
  width:38px;
  height:38px;
  border-radius:8px;
  border:1px solid var(--line2);
  background:var(--surface2);
}

.transport-btn.main{
  color:var(--gold);
}

.transport-btn.record{
  color:var(--red);
}

.transport-clock{
  text-align:center;
}

.clock-main{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;
  letter-spacing:.05em;
}

.clock-sub{
  display:block;
  margin-top:3px;
  font-size:9px;
  color:var(--muted);
}

.transport-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.transport-label,.db{
  font-size:9px;
  color:var(--muted);
}

.transport-right input{
  width:100px;
}

.effect-card,.ai-card{
  width:100%;
  margin-bottom:8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface2);
  padding:11px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}

.effect-card span,.ai-card span{
  color:var(--muted);
  font-size:10px;
}

.effect-card strong,.ai-card strong{
  font-size:12px;
}

.channel-strip{
  display:grid;
  grid-template-columns:25px 1fr;
  gap:12px;
  padding:12px 0;
}

.channel-meter{
  width:18px;
  height:170px;
  background:#070a0f;
  border:1px solid var(--line);
  border-radius:5px;
  position:relative;
  overflow:hidden;
}

.meter-fill{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:0;
  background:var(--green);
}

.channel-controls label{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:17px;
}

.channel-controls input{
  width:100%;
  display:block;
  margin-top:7px;
}

.channel-buttons{
  display:flex;
  gap:6px;
}

.channel-buttons button{
  width:30px;
  height:30px;
  border-radius:6px;
  border:1px solid var(--line2);
  background:var(--surface2);
}

.jahcore-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.jahcore-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#2a2111,#111318);
  color:var(--gold);
  border:1px solid rgba(242,189,82,.4);
  font-weight:900;
}

.jahcore-message{
  padding:12px;
  border:1px solid var(--line);
  background:var(--surface2);
  border-radius:9px;
  color:#b8c2d0;
  font-size:12px;
  line-height:1.55;
  margin-bottom:10px;
}

.right-panel textarea{
  width:100%;
  height:100px;
  resize:none;
  border-radius:9px;
  border:1px solid var(--line);
  background:#080b10;
  color:var(--text);
  padding:10px;
  margin-bottom:8px;
}

@media(max-width:1100px){
  .mms-main{
    grid-template-columns:220px minmax(500px,1fr);
  }

  .mms-right-rail{
    display:none;
  }
}

@media(max-width:780px){
  .mms-topbar{
    grid-template-columns:1fr auto;
  }

  .mms-project-identity{
    display:none;
  }

  .mms-main{
    grid-template-columns:1fr;
  }

  .mms-left-rail{
    display:none;
  }

  .transport{
    grid-template-columns:auto 1fr;
  }

  .transport-right{
    display:none;
  }
}

/* ==========================================================
   PHASE 1 PART 2 — PROJECT + REAL ASSET BINDING
   ========================================================== */

.asset-button{
  width:100%;
  text-align:left;
  color:var(--text);
  cursor:pointer;
}

.asset-button:hover{
  border-color:#42516a;
  background:#141b26;
}

.asset-state{
  margin-top:6px;
  color:var(--green);
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}

.track-row{
  cursor:pointer;
}

.track-row.selected .track-header{
  box-shadow:
    inset 3px 0 var(--gold);
  background:#111722;
}

.track-row.selected .track-wave{
  border-color:
    rgba(242,189,82,.6);
}

.real-audio-clip{
  position:absolute;
  inset:7px;
  border-radius:5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 11px;
  color:#dce9fb;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(105,167,255,.11) 0,
      rgba(105,167,255,.31) 2px,
      rgba(105,167,255,.08) 4px,
      rgba(105,167,255,.20) 6px,
      transparent 8px,
      transparent 12px
    );

  border:
    1px solid
    rgba(105,167,255,.23);

  overflow:hidden;
  font-size:10px;
  font-weight:800;
}

.real-audio-clip span:first-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.real-audio-clip span:last-child{
  flex:none;
  color:#a8bad1;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

/* ==========================================================
   PHASE 1 PART 3 — MULTITRACK + SYNC TRANSPORT
   ========================================================== */

.track-controls{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.track-control{
  width:28px;
  height:28px;
  border:1px solid var(--line2);
  background:var(--surface2);
  border-radius:6px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.track-control.active{
  color:#17120a;
  background:var(--gold);
  border-color:var(--gold);
}

.track-gain-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
}

.track-gain-wrap input{
  min-width:55px;
  width:100%;
}

.transport{
  position:relative;
}

.transport-seek-wrap{
  position:absolute;
  left:18px;
  right:18px;
  top:-8px;
  height:14px;
}

.session-seek{
  width:100%;
  height:4px;
  cursor:pointer;
}

/* ==========================================================
   PHASE 1 PART 3 — MULTITRACK + SYNC TRANSPORT
   ========================================================== */

.track-controls{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.track-control{
  width:28px;
  height:28px;
  border:1px solid var(--line2);
  background:var(--surface2);
  border-radius:6px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.track-control.active{
  color:#17120a;
  background:var(--gold);
  border-color:var(--gold);
}

.track-gain-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
}

.track-gain-wrap input{
  min-width:55px;
  width:100%;
}

.transport{
  position:relative;
}

.transport-seek-wrap{
  position:absolute;
  left:18px;
  right:18px;
  top:-8px;
  height:14px;
}

.session-seek{
  width:100%;
  height:4px;
  cursor:pointer;
}

/* ==========================================================
   PHASE 1 PART 3 — MULTITRACK + SYNC TRANSPORT
   ========================================================== */

.track-controls{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.track-control{
  width:28px;
  height:28px;
  border:1px solid var(--line2);
  background:var(--surface2);
  border-radius:6px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.track-control.active{
  color:#17120a;
  background:var(--gold);
  border-color:var(--gold);
}

.track-gain-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
}

.track-gain-wrap input{
  min-width:55px;
  width:100%;
}

.transport{
  position:relative;
}

.transport-seek-wrap{
  position:absolute;
  left:18px;
  right:18px;
  top:-8px;
  height:14px;
}

.session-seek{
  width:100%;
  height:4px;
  cursor:pointer;
}

/* ==========================================================
   PHASE 1 PART 4 — WAVEFORM + TIMELINE EDITING
   ========================================================== */

.waveform-track-row{
  min-height:120px;
  height:auto;
}

.timeline-lane{
  min-height:96px;
  margin:10px;
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
}

.waveform-clip{
  position:absolute;
  top:10px;
  height:64px;
  min-width:80px;
  border-radius:7px;
  border:1px solid rgba(105,167,255,.45);
  background:#101b29;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.waveform-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.waveform-clip-label{
  position:absolute;
  left:8px;
  top:5px;
  right:8px;
  z-index:2;
  color:#e8f0fb;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

.timeline-playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:var(--gold);
  box-shadow:0 0 8px rgba(242,189,82,.55);
  pointer-events:none;
  z-index:5;
}

.timeline-editor-controls{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.timeline-editor-controls label{
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.timeline-editor-controls input{
  display:block;
  width:100%;
  margin-top:4px;
  padding:5px;
  border:1px solid var(--line2);
  border-radius:5px;
  background:#090d13;
  color:var(--text);
  font-size:10px;
}

/* ==========================================================
   PHASE 1 PART 5 — MIXER DSP GRAPH
   ========================================================== */

.track-pan-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:9px;
}

.track-pan-wrap input{
  min-width:55px;
  width:100%;
}

.track-controls{
  flex-wrap:wrap;
}

.meter-fill{
  transition:height .06s linear;
}

#masterVolume{
  accent-color:var(--gold);
}

/* ==========================================================
   PHASE 1 PART 6 — RECORDING INPUT
   ========================================================== */

.recording-panel-block{
  border-bottom:1px solid var(--line);
  padding:16px;
}

.studio-select{
  width:100%;
  margin-top:10px;
  padding:9px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#090d13;
  color:var(--text);
}

.record-option{
  margin-top:12px;
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:11px;
}

.recording-status{
  margin-top:10px;
  padding:9px;
  border-radius:7px;
  border:1px solid var(--line);
  background:#0a0e14;
  color:var(--muted);
  font-size:10px;
}

.recording-status[data-mode="ready"]{
  color:var(--green);
}

.recording-status[data-mode="recording"]{
  color:var(--red);
}

.recording-status[data-mode="error"]{
  color:var(--red);
}

.transport-btn.record.recording{
  background:var(--red);
  color:white;
  border-color:var(--red);
  animation:mms-record-pulse 1s infinite;
}

@keyframes mms-record-pulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,102,102,.4);
  }

  50%{
    box-shadow:0 0 0 6px rgba(255,102,102,0);
  }
}

/* ==========================================================
   PHASE 1 PART 7 — SESSION RESTORE / MEDIA RELINK
   ========================================================== */

.saved-project-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.saved-project-card{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface2);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.saved-project-card:hover{
  border-color:#46566f;
  background:#141c27;
}

.saved-project-card strong{
  font-size:12px;
}

.saved-project-card span{
  color:var(--muted);
  font-size:10px;
}

.saved-project-card small{
  color:var(--gold);
  font-size:9px;
  font-weight:800;
}

.asset-relink-required{
  margin-top:6px;
  color:var(--gold);
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}

.waveform-clip.relink-required{
  border-color:rgba(242,189,82,.72);
  background:#1c1810;
}

.waveform-clip.relink-required
.waveform-canvas{
  opacity:.2;
}

.clip-relink-button{
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:4;
  padding:5px 8px;
  border:1px solid rgba(242,189,82,.55);
  border-radius:5px;
  background:#17130c;
  color:var(--gold);
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.clip-relink-button:hover{
  background:#241d0e;
}

/* ==========================================================
   PHASE 3 PART 2 — REAL-TIME EFFECT CHAIN
   ========================================================== */

.track-effects-panel{
  padding:16px;
}

.effects-empty{
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0a0e14;
  color:var(--muted);
  font-size:11px;
}

.effects-chain-toolbar{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:12px;
}

.effect-chain-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.effect-card{
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface2);
  padding:10px;
}

.effect-card.disabled{
  opacity:.55;
}

.effect-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}

.effect-card-title{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:900;
}

.effect-order-controls{
  display:flex;
  gap:4px;
}

.effect-mini-btn{
  border:1px solid var(--line2);
  border-radius:5px;
  background:#0a0f16;
  color:var(--muted);
  padding:4px 6px;
  cursor:pointer;
  font-size:9px;
}

.effect-mini-btn:hover{
  color:var(--text);
  border-color:#53627a;
}

.effect-remove-btn{
  color:var(--red);
}

.effect-param{
  display:grid;
  grid-template-columns:105px minmax(0,1fr) 48px;
  align-items:center;
  gap:7px;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
}

.effect-param input[type="range"]{
  width:100%;
}

.effect-param-value{
  color:var(--text);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.effect-chain-bypassed .effect-card{
  opacity:.45;
}

.effect-status-live{
  color:var(--green);
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
}

/* ==========================================================
   PHASE 3 PART 5 — AUTOMATION LANES
   ========================================================== */

.automation-panel{
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
}

.automation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.automation-empty{
  border:1px dashed var(--line2);
  border-radius:8px;
  padding:10px;
  color:var(--muted);
  font-size:10px;
}

.automation-lane-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.automation-lane{
  border:1px solid var(--line);
  border-radius:8px;
  background:#080d14;
  overflow:hidden;
}

.automation-lane-head{
  display:grid;
  grid-template-columns:minmax(100px,1fr) 90px 72px auto;
  gap:6px;
  align-items:center;
  padding:7px;
  border-bottom:1px solid var(--line);
}

.automation-lane-track{
  position:relative;
  height:54px;
  background:
    linear-gradient(
      to bottom,
      transparent 49%,
      rgba(255,255,255,.06) 50%,
      transparent 51%
    );
}

.automation-keyframe{
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #9bbcff;
  background:#1d5eff;
  cursor:pointer;
}

.automation-keyframe-time{
  position:absolute;
  top:3px;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:8px;
}

.automation-lane-controls{
  display:flex;
  gap:4px;
}

.automation-value-editor{
  width:72px;
}

/* ==========================================================
   PHASE 3 PART 5 — AUTOMATION LANES
   ========================================================== */

.automation-panel{
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
}

.automation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.automation-empty{
  border:1px dashed var(--line2);
  border-radius:8px;
  padding:10px;
  color:var(--muted);
  font-size:10px;
}

.automation-lane-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.automation-lane{
  border:1px solid var(--line);
  border-radius:8px;
  background:#080d14;
  overflow:hidden;
}

.automation-lane-head{
  display:grid;
  grid-template-columns:minmax(100px,1fr) 90px 72px auto;
  gap:6px;
  align-items:center;
  padding:7px;
  border-bottom:1px solid var(--line);
}

.automation-lane-track{
  position:relative;
  height:54px;
  background:
    linear-gradient(
      to bottom,
      transparent 49%,
      rgba(255,255,255,.06) 50%,
      transparent 51%
    );
}

.automation-keyframe{
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #9bbcff;
  background:#1d5eff;
  cursor:pointer;
}

.automation-keyframe-time{
  position:absolute;
  top:3px;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:8px;
}

.automation-lane-controls{
  display:flex;
  gap:4px;
}

.automation-value-editor{
  width:72px;
}

/* ==========================================================
   PHASE 3 PART 5 — AUTOMATION LANES
   ========================================================== */

.automation-panel{
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
}

.automation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.automation-empty{
  border:1px dashed var(--line2);
  border-radius:8px;
  padding:10px;
  color:var(--muted);
  font-size:10px;
}

.automation-lane-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.automation-lane{
  border:1px solid var(--line);
  border-radius:8px;
  background:#080d14;
  overflow:hidden;
}

.automation-lane-head{
  display:grid;
  grid-template-columns:minmax(100px,1fr) 90px 72px auto;
  gap:6px;
  align-items:center;
  padding:7px;
  border-bottom:1px solid var(--line);
}

.automation-lane-track{
  position:relative;
  height:54px;
  background:
    linear-gradient(
      to bottom,
      transparent 49%,
      rgba(255,255,255,.06) 50%,
      transparent 51%
    );
}

.automation-keyframe{
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #9bbcff;
  background:#1d5eff;
  cursor:pointer;
}

.automation-keyframe-time{
  position:absolute;
  top:3px;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:8px;
}

.automation-lane-controls{
  display:flex;
  gap:4px;
}

.automation-value-editor{
  width:72px;
}

/* ==========================================================
   PHASE 4 PART 2 — EDIT HISTORY
   ========================================================== */

.edit-history-panel{
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
}

.edit-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.edit-history-actions{
  display:flex;
  gap:7px;
}

.edit-history-status{
  margin-top:8px;
  color:var(--muted);
  font-size:10px;
}

.edit-history-actions button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* AIOS Mad Mix Studio — Phase 5 Arrangement */
.arrangement-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:10px 0;
}

.arrangement-toolbar label{
  display:flex;
  align-items:center;
  gap:6px;
}

.arrangement-toolbar input[type="number"]{
  width:82px;
}

.arrangement-status{
  opacity:.76;
  font-size:.85rem;
}

.timeline-marker-lane{
  position:relative;
  min-height:26px;
  margin-bottom:6px;
}

.timeline-session-marker{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-size:.72rem;
  white-space:nowrap;
}

/* AIOS Mad Mix Studio — Phase 5 Structural Clip Editing */
.clip-structural-controls{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.clip-structural-controls button{
  cursor:pointer;
}

/* AIOS Mad Mix Studio — Phase 5 Pre-launch Reliability */
.session-reliability-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  font-size:.82rem;
  opacity:.82;
}

.session-reliability-status[data-state="error"]{
  font-weight:700;
}

.session-reliability-status[data-state="saving"]{
  font-weight:600;
}

/* LIVE_SESSION_TRACKS_PANEL_POLISH_V1 */

.session-track-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.session-track-item{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  padding:10px;
  text-align:left;
  cursor:pointer;
}

.session-track-item:hover{
  border-color:rgba(212,175,55,.45);
}

.session-track-item.selected{
  border-color:#d4af37;
  box-shadow:0 0 0 1px rgba(212,175,55,.18);
  background:rgba(212,175,55,.07);
}

.session-track-number{
  font-size:11px;
  font-weight:900;
  opacity:.65;
}

.session-track-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.session-track-body strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.session-track-body small{
  opacity:.62;
}

.session-track-state{
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.7;
}

.session-track-item.selected
.session-track-state{
  color:#d4af37;
  opacity:1;
}

/* TIMELINE_EDITOR_SURFACE_POLISH_V1 */

.waveform-clip{
  cursor:grab;
  user-select:none;
  touch-action:none;
  transition:
    box-shadow .15s ease,
    border-color .15s ease,
    transform .08s ease;
}

.track-row.selected .waveform-clip{
  border-color:#d4af37;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.22),
    0 10px 28px rgba(0,0,0,.28);
}

.waveform-clip:hover{
  border-color:rgba(212,175,55,.7);
}

.waveform-clip.dragging{
  cursor:grabbing;
  z-index:20;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.45),
    0 14px 34px rgba(0,0,0,.4);
}

.selected-clip-editor-surface{
  margin:8px 12px 12px;
  padding:10px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:12px;
  background:
    rgba(212,175,55,.035);
}

.selected-clip-editor-surface
.timeline-editor-controls{
  margin:0;
  padding:0;
}

.selected-clip-editor-surface
.clip-structural-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.selected-clip-editor-surface
.clip-structural-controls button{
  min-height:32px;
  padding:7px 12px;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}

.selected-clip-editor-surface
.clip-structural-controls button:last-child{
  border-color:rgba(255,90,90,.45);
}

.track-row.selected .track-header{
  border-color:rgba(212,175,55,.35);
}

.track-row{
  margin-bottom:10px;
}

.timeline-lane{
  position:relative;
  overflow:visible;
}

/* MAD_MIX_EDITOR_UX_POLISH_V2 */

#saveProjectButton.dirty{
  border-color:#d4af37;
  box-shadow:0 0 0 1px rgba(212,175,55,.22);
}

.mixer-track-status{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-size:12px;
  opacity:.7;
}

.mixer-track-status.active{
  border-color:rgba(212,175,55,.32);
  background:rgba(212,175,55,.045);
  opacity:1;
}

.mixer-track-status strong{
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.mixer-track-status span{
  font-size:11px;
  opacity:.7;
}

/* Make the selected clip editor feel like one compact tool surface. */

.selected-clip-editor-surface{
  margin:6px 10px 10px;
  padding:9px 10px;
  border:1px solid rgba(212,175,55,.3);
  border-radius:10px;
  background:rgba(13,13,13,.92);
}

.selected-clip-editor-surface
.timeline-editor-controls{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(112px,1fr)
    );
  align-items:end;
  gap:8px;
}

.selected-clip-editor-surface
.timeline-editor-controls label{
  margin:0;
  min-width:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
}

.selected-clip-editor-surface
.timeline-editor-controls input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.selected-clip-editor-surface
.clip-structural-controls{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  width:100%;
  margin:9px 0 0;
}

.selected-clip-editor-surface
.clip-structural-controls button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(212,175,55,.42);
  border-radius:8px;
  background:#171717;
  color:#f5f5f5 !important;
  font-size:11px;
  font-weight:900;
  line-height:1;
  opacity:1 !important;
  visibility:visible !important;
  cursor:pointer;
}

.selected-clip-editor-surface
.clip-structural-controls button:hover{
  border-color:#d4af37;
  background:rgba(212,175,55,.1);
}

.selected-clip-editor-surface
.clip-structural-controls button:last-child{
  border-color:rgba(255,100,100,.5);
}

.selected-clip-editor-surface
.clip-structural-controls button:last-child:hover{
  border-color:rgba(255,100,100,.95);
  background:rgba(255,80,80,.08);
}

.track-row.selected{
  border:1px solid rgba(212,175,55,.22);
  border-radius:12px;
}

.track-row.selected .track-header{
  border-color:transparent;
  background:rgba(212,175,55,.035);
}

.track-row.selected .waveform-clip{
  border-color:#d4af37;
}

.timeline-lane{
  min-height:90px;
}

.waveform-clip{
  min-height:72px;
}

/* GOVERNED_PROJECT_MANAGEMENT_UI_V1 */

.project-management-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}

.project-management-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.project-management-info strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.project-management-info span{
  font-size:11px;
  opacity:.68;
}

.project-management-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex-shrink:0;
}

.project-action{
  min-height:32px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:#171717;
  color:#f5f5f5;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.project-action:hover{
  border-color:#d4af37;
}

.project-action.open{
  border-color:rgba(212,175,55,.5);
}

.project-action.delete{
  border-color:rgba(255,90,90,.45);
}

.project-action.delete:hover{
  border-color:rgba(255,90,90,.95);
  background:rgba(255,90,90,.08);
}

/* PROJECTS_GOVERNED_MANAGEMENT_VISIBILITY_V1 */

.server-project-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.server-project-list .project-management-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:12px;
}

.server-project-list .project-management-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:7px;
}

.server-project-list .project-action{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
}

.server-project-list .project-action.open{
  border-color:rgba(212,175,55,.72);
}

.server-project-list .project-action.rename{
  border-color:rgba(120,180,255,.42);
}

.server-project-list .project-action.delete{
  border-color:rgba(255,90,90,.58);
}


/* ==========================================================
   PHASE 1 LIVE PROFILE + WORKSPACE V1
   ========================================================== */

.phase1-status{
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface2);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-bottom:14px;
}

.phase1-status[data-state="ready"]{
  color:var(--text);
}

.phase1-status[data-state="error"]{
  border-color:#6d3434;
}

.phase1-profile-summary{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.phase1-profile-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(242,189,82,.4);
  background:linear-gradient(145deg,#2a2111,#111318);
  color:var(--gold);
  font-weight:900;
}

.phase1-profile-summary strong,
.phase1-profile-summary span{
  display:block;
}

.phase1-profile-summary span{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.phase1-form{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-bottom:14px;
}

.phase1-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.phase1-form input{
  width:100%;
  height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#080b10;
  color:var(--text);
  padding:0 10px;
}

.phase1-workspace-card,
.phase1-device-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface2);
}

/* ==========================================================
   PHASE 1 STUDIO AUTH UI V1
   ========================================================== */

.studio-auth-panel{
  margin-bottom:14px;
}

.studio-auth-entry,
.studio-auth-session{
  border:1px solid var(--line);
  background:var(--surface2);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
}

.studio-auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:12px;
}

.studio-auth-tab{
  border:1px solid var(--line2);
  background:#0b0f15;
  color:var(--muted);
  min-height:34px;
  border-radius:7px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}

.studio-auth-tab.active{
  color:var(--gold);
  border-color:rgba(242,189,82,.45);
  background:#17140e;
}

.studio-auth-view{
  display:none;
  flex-direction:column;
  gap:10px;
}

.studio-auth-view.active{
  display:flex;
}

.studio-auth-view label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.studio-auth-view input{
  width:100%;
  height:38px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#080b10;
  color:var(--text);
  padding:0 10px;
}

.studio-auth-message{
  margin-top:11px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.studio-auth-message[data-state="error"]{
  color:#ef9999;
}

.studio-auth-message[data-state="success"]{
  color:#9fd0a5;
}

.studio-auth-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.studio-auth-user strong,
.studio-auth-user span{
  display:block;
}

.studio-auth-user span{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.mad-mix-auth-locked{
  opacity:.55;
}