/* OP33 UI layer
   Consolidates the previous patch/final-polish/theme/mac hotfix styles into one maintained stylesheet. */

/* Fixed transport and global layout */
.transport-shell{
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:auto;
  width:100%;
  transform:none;
  z-index:50;
}

.app-shell{padding-top:calc(112px + env(safe-area-inset-top))}
.status-strip{display:none}
.main-grid{margin-top:24px!important}
.main-grid,.side-panel,.side-panel label,.trim-panel,.two-column-fields,.sequencer-tools{min-width:0}
.side-panel{overflow:hidden}
.side-panel input,.side-panel button,.side-panel select,.trim-panel,.mic-button,.selected-pad-load-button{max-width:100%;width:100%}

.project-logo{
  display:block;
  width:min(180px,28vw);
  height:auto;
  filter:brightness(0) saturate(100%) invert(49%) sepia(97%) saturate(1541%) hue-rotate(344deg) brightness(98%) contrast(91%);
}
body[data-theme=field] .project-logo{filter:none}
body[data-theme=operator] .project-logo{filter:brightness(0) invert(1)}
body[data-theme=operator] .selected-pad-load-button,
body[data-theme=operator] .selected-pad-load-button span{color:#fff!important}
body[data-theme=field] .transport-shell{border-width:1px!important}

/* Transport controls */
.transport-shell>.bpm-control{align-self:center;transform:translateY(-9px);justify-items:start}
.transport-shell>.step-readout{display:none!important}
.transport-shell .round-button{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  min-height:56px!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  font-size:1.35rem!important;
}
.transport-shell .round-button.record,
.transport-shell .round-button.record.hot{
  position:relative!important;
  background:var(--panel)!important;
  color:transparent!important;
  font-size:0!important;
  overflow:hidden!important;
}
.transport-shell .round-button.record::before,
.transport-shell .round-button.record.hot::before{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:20px!important;
  height:20px!important;
  border-radius:999px!important;
  background:var(--hot)!important;
  transform:translate(-50%,-50%)!important;
  display:block!important;
}
.transport-shell .round-button.record.hot::before{width:24px!important;height:24px!important}
.transport-shell .pill{
  height:56px!important;
  min-height:56px!important;
  padding:0 24px!important;
  border-radius:28px!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.transport-shell #loopBtn,.transport-shell #snapBtn,.transport-shell #metronomeBtn{min-width:56px!important}
.transport-shell #bpmDetectBtn{min-width:116px!important}
.transport-shell #settingsBtn{width:56px!important;min-width:56px!important;padding:0!important;font-size:1.45rem!important}
.transport-shell .numeric-control input,.transport-shell .select-control select{height:56px!important;min-height:56px!important;line-height:1!important}
.transport-shell .switch-bank,.transport-shell .transport-buttons{align-items:center!important}
.transport-shell .metronome-volume-control input{height:auto!important;min-height:0!important;width:110px;padding:0}
.transport-volume-stack{display:grid!important;gap:5px!important;min-width:190px!important;align-self:center!important}
.transport-volume-stack .numeric-control{min-width:190px!important;margin:0!important;gap:2px!important}
.transport-volume-stack .numeric-control input{height:auto!important;min-height:0!important}
.master-volume-control{min-width:190px!important}
.master-volume-control input{height:auto!important;min-height:0!important}

input[type=range]{accent-color:var(--hot)}
body[data-theme=field] input[type=range]{accent-color:#ff6b4a}
body[data-theme=operator] input[type=range]{accent-color:#51d39a}
body[data-theme=candy] input[type=range]{accent-color:#ff5b2f;box-shadow:none!important;border:0!important;background:transparent!important}

/* Side panel and pad controls */
.two-column-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.selected-pad-title-row{display:flex;align-items:center;gap:8px;margin:0 0 2px}
.selected-pad-title-row h2{margin:0;min-width:0;flex:1}
.pad-name-edit-button{
  appearance:none;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 80%,var(--panel));
  color:var(--muted);
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:999px;
  font-weight:900;
  display:grid;
  place-items:center;
  line-height:1;
  cursor:pointer;
  padding:0!important;
}
.pad-name-edit-button:hover{color:var(--ink);border-color:var(--hot)}
.pad-name-inline-input{width:100%;max-width:100%;box-sizing:border-box;font-size:1.65rem;font-weight:900;letter-spacing:-.06em;margin:0 0 4px}
.pad-name-inline-input[hidden]{display:none!important}
.selected-pad-load-button{display:block;text-align:center}
.selected-pad-load-button input{position:absolute;inset:0;opacity:0;cursor:pointer}
.side-panel .panel-actions{display:none!important}

.pad-source-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pad-source-buttons .panel-button{width:100%!important;max-width:none!important;min-width:0!important;padding-left:6px!important;padding-right:6px!important}

.pad-card-no-controls{min-height:auto;align-content:start}
.pad-card-no-controls .pad-face{min-height:112px}
.pad-card .pad-face{padding-right:50px}
.pad-card-actions{position:absolute;right:18px;top:18px;display:grid;gap:4px;z-index:3}
.pad-mini-toggle{
  width:24px;
  height:24px;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-radius:8px;
  background:color-mix(in srgb,var(--paper) 42%,transparent);
  color:color-mix(in srgb,var(--ink) 62%,transparent);
  padding:0;
  font-size:.66rem;
  font-weight:900;
  line-height:1;
  backdrop-filter:blur(6px);
}
.pad-mini-toggle:hover{border-color:var(--hot);color:var(--ink);background:color-mix(in srgb,var(--paper) 72%,transparent)}
.pad-mini-toggle.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Collapsible FX/trim panels */
.sound-control-panel,.trim-panel{
  display:grid;
  gap:9px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--paper) 78%,var(--panel));
  padding:6px 0 2px;
  overflow:hidden;
}
.sound-control-panel summary,.trim-panel summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.sound-control-panel summary::-webkit-details-marker,.trim-panel summary::-webkit-details-marker{display:none}
.sound-control-panel summary::after,.trim-panel summary::after{content:'+';float:right;font-size:1rem;line-height:.75;color:var(--ink)}
.sound-control-panel[open] summary::after,.trim-panel[open] summary::after{content:'−'}
.sound-control-panel label,.trim-panel label{display:grid;gap:5px;padding:0 12px 10px}
.sound-control-panel label span,.trim-panel label span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.sound-control-panel input,.trim-panel input{width:100%;accent-color:var(--hot)}
.fx-reset-button{margin:0 12px 12px!important;width:calc(100% - 24px)!important;max-width:none!important}
#sampleDurationText{display:none!important}
.waveform-trimmer,.trim-panel .waveform-trimmer{
  display:block;
  height:72px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--paper) 84%,var(--panel));
  touch-action:none;
  margin-left:12px!important;
  margin-right:12px!important;
  width:calc(100% - 24px)!important;
  box-sizing:border-box;
}
.sample-trim-readout,.trim-panel .sample-trim-readout{
  display:block;
  margin:8px 18px 12px!important;
  width:calc(100% - 36px)!important;
  box-sizing:border-box;
  text-align:left;
  font-size:.76rem!important;
  font-weight:500!important;
  letter-spacing:.01em;
  color:var(--muted)!important;
}
.trim-panel .two-column-fields[hidden],.trim-panel [hidden]{display:none!important}

/* Sequencer */
.sequencer-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sequencer-tools .numeric-control{width:92px}
.sequencer-tools .panel-button{width:auto;max-width:none}
.sequencer-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}
.sequencer-heading .step-readout{margin-left:auto!important;display:flex!important;align-items:baseline!important;gap:4px!important;min-width:auto!important;white-space:nowrap!important}
.sequencer-heading .step-readout strong{font-size:1.45rem!important;letter-spacing:-.05em!important}
.lane-label,.step-index-label{position:sticky;left:0;z-index:4}
.step-index-label{display:grid;place-items:center;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:0;text-transform:none}
.step-index-cell{min-height:28px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--paper) 76%,var(--panel));font-size:.7rem;font-weight:800;color:var(--muted)}
.step-cell.selected-column,.step-index-cell.selected{outline:0;box-shadow:inset 0 0 0 2px var(--hot)}
.step-cell.playhead,.step-index-cell.playhead{outline:0;box-shadow:inset 0 0 0 4px var(--blue)}
.step-cell.selected-column.playhead,.step-index-cell.selected.playhead{box-shadow:inset 0 0 0 4px var(--blue),inset 0 0 0 7px color-mix(in srgb,var(--hot) 76%,transparent)}
body[data-theme=pop] .pad-card.selected{outline-color:color-mix(in srgb,var(--hot) 82%,transparent)}

/* Modals */
.bpm-detector-modal,.settings-modal,.sample-library-modal,.keyboard-sampler-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.38);
  padding:20px;
}
.settings-modal,.sample-library-modal{z-index:85}
.bpm-detector-modal[hidden],.settings-modal[hidden],.sample-library-modal[hidden],.keyboard-sampler-modal[hidden]{display:none}
.bpm-detector-card,.settings-card,.sample-library-card,.keyboard-sampler-card{
  border:1px solid var(--line);
  border-radius:28px;
  background:color-mix(in srgb,var(--paper) 90%,white 10%);
  box-shadow:var(--shadow);
  padding:18px;
  display:grid;
  gap:12px;
}
.bpm-detector-card,.settings-card{width:min(420px,100%)}
.sample-library-card{width:min(560px,100%)}
.keyboard-sampler-card{width:min(720px,100%)}
.bpm-detector-card h2,.settings-heading h2,.sample-library-heading h2,.keyboard-sampler-heading h2{margin:0;font-size:2rem;line-height:.95;letter-spacing:-.05em}
.bpm-detector-card p,.sample-library-help,.keyboard-sampler-status{margin:0;color:var(--muted);font-weight:700}
.bpm-detector-card strong{font-size:2.5rem;letter-spacing:-.06em}
.bpm-detector-actions,.keyboard-sampler-actions{display:flex;gap:8px;flex-wrap:wrap}
.settings-heading,.sample-library-heading,.keyboard-sampler-heading{display:flex;align-items:start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.settings-heading .panel-button,.sample-library-heading .panel-button,.keyboard-sampler-heading .panel-button{width:auto}
.settings-card .select-control,.sample-library-category-label{display:grid;gap:7px}
.settings-card .select-control select,.sample-library-category-select{width:100%;max-width:none}
.simple-sample-library-card{grid-template-rows:auto auto auto auto auto!important;max-height:none!important;overflow:visible!important}
.simple-sample-library-list{display:grid!important;gap:8px!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important}
.simple-sample-library-list .sample-library-row{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;border:1px solid var(--line)!important;border-radius:14px!important;background:color-mix(in srgb,var(--paper) 82%,var(--panel))!important;padding:12px 14px!important;box-shadow:none!important}
.simple-sample-library-list .sample-library-row strong{font-size:.96rem!important;letter-spacing:0!important;text-transform:none!important}
.simple-sample-library-list .sample-library-row span{font-size:.72rem!important;font-weight:900!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--muted)!important}
.simple-sample-library-list .sample-library-row:hover,.simple-sample-library-list .sample-library-row:focus,.simple-sample-library-list .sample-library-row.selected{outline:0!important;background:color-mix(in srgb,var(--paper) 82%,var(--panel))!important;box-shadow:inset 0 0 0 2px var(--hot)!important}
.sample-library-use-button{width:100%!important;max-width:none!important}

/* Keyboard sampler */
.keyboard-sampler-status{min-height:2.1em}
.keyboard-sampler-keys{
  --white-keys:8;
  position:relative;
  height:210px;
  border:1px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel) 70%,#000 4%);
  padding:10px;
  overflow:hidden;
  touch-action:none;
}
.keyboard-key{position:absolute;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);cursor:pointer;user-select:none;padding:0;text-align:center}
.keyboard-key strong{position:absolute;left:0;right:0;bottom:42px;font-size:1.34rem;font-weight:950;line-height:1;letter-spacing:-.04em}
.keyboard-key span{position:absolute;left:0;right:0;bottom:22px;font-size:.68rem;font-weight:500;line-height:1;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.keyboard-key.white{z-index:1;bottom:10px;left:calc(10px + var(--key-left) * ((100% - 20px) / var(--white-keys)));width:calc((100% - 20px) / var(--white-keys));height:180px;border-radius:0 0 16px 16px;background:color-mix(in srgb,#fff 82%,var(--paper));color:var(--ink)}
.keyboard-key.black{z-index:2;top:10px;left:calc(10px + var(--key-left) * ((100% - 20px) / var(--white-keys)));width:calc((100% - 20px) / var(--white-keys) * .58);height:112px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:color-mix(in srgb,var(--ink) 94%,#000);color:var(--paper)}
.keyboard-key.black strong{top:42px;bottom:auto;font-size:1.05rem}
.keyboard-key.black span{bottom:22px;color:color-mix(in srgb,var(--paper) 64%,transparent);font-weight:500}
.keyboard-key.active{box-shadow:inset 0 0 0 4px var(--hot);transform:translateY(3px)}
.keyboard-key.black.active{transform:translateX(-50%) translateY(3px)}
body[data-theme=operator] .keyboard-sampler-card{background:#343230!important;border-color:rgba(246,240,221,.22)!important}
body[data-theme=operator] .keyboard-sampler-keys{background:#242321!important;border-color:rgba(246,240,221,.24)!important}
body[data-theme=operator] .keyboard-key.white{background:#e5dfcf!important;color:#1f1f1d!important;border-color:#242321!important}
body[data-theme=operator] .keyboard-key.white strong,body[data-theme=operator] .keyboard-key.white span{color:#1f1f1d!important}
body[data-theme=operator] .keyboard-key.black{background:#141413!important;color:#f6f0dd!important;border-color:#f6f0dd!important}
body[data-theme=operator] .keyboard-key.black strong,body[data-theme=operator] .keyboard-key.black span{color:#f6f0dd!important}
body[data-theme=operator] .keyboard-key.active{box-shadow:inset 0 0 0 4px var(--hot)!important}

/* Export buttons */
.export-sample-button{width:100%!important;max-width:none!important}

/* Candy Lab theme */
body[data-theme=candy]{
  --ink:#1c1b1f;
  --muted:#615d55;
  --paper:#f4ead1;
  --panel:#efe2be;
  --deep:#d9cba8;
  --line:rgba(28,27,31,.22);
  --hot:#ff5b2f;
  --mint:#00c28a;
  --blue:#355cff;
  --shadow:0 14px 34px rgba(28,27,31,.13);
  background:#f4ead1;
}
body[data-theme=candy] .transport-shell,body[data-theme=candy] .pad-grid-shell,body[data-theme=candy] .sequencer-shell,body[data-theme=candy] .side-panel{background:#f7edcf;border:2px solid #1c1b1f;box-shadow:7px 7px 0 #1c1b1f}
body[data-theme=candy] .round-button,body[data-theme=candy] .pill,body[data-theme=candy] .panel-button,body[data-theme=candy] .file-button,body[data-theme=candy] input:not([type=range]),body[data-theme=candy] select{border:2px solid #1c1b1f;box-shadow:3px 3px 0 #1c1b1f}
body[data-theme=candy] .round-button:active,body[data-theme=candy] .pill:active,body[data-theme=candy] .panel-button:active,body[data-theme=candy] .file-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1c1b1f}
body[data-theme=candy] .pad-card{border:2px solid #1c1b1f;box-shadow:5px 5px 0 #1c1b1f}
body[data-theme=candy] .pad-card:nth-child(4n+1){background:#ffcf4a}
body[data-theme=candy] .pad-card:nth-child(4n+2){background:#ff8a5b}
body[data-theme=candy] .pad-card:nth-child(4n+3){background:#6ee7b7}
body[data-theme=candy] .pad-card:nth-child(4n+4){background:#90a8ff}
body[data-theme=candy] .pad-face{background:#fff7df;border:2px solid #1c1b1f;box-shadow:inset 0 -5px 0 rgba(28,27,31,.12)}
body[data-theme=candy] .pad-key,body[data-theme=candy] .lane-label strong{background:#1c1b1f;color:#f4ead1}
body[data-theme=candy] .step-cell.active,body[data-theme=candy] .round-button.hot{background:#ff5b2f;color:#f4ead1}
body[data-theme=candy] .transport-shell .round-button.record,body[data-theme=candy] .transport-shell .round-button.record.hot{background:#f7edcf!important}
body[data-theme=candy] .export-sample-button,body[data-theme=candy] .export-loop-button,body[data-theme=candy] .export-data-button{background:#6ee7b7;color:#1c1b1f}

@media(max-width:1040px){.app-shell{padding-top:calc(224px + env(safe-area-inset-top))}}
@media(max-width:760px){.main-grid{grid-template-columns:1fr}.two-column-fields{grid-template-columns:1fr}.sequencer-tools .numeric-control,.sequencer-tools .panel-button{width:100%}.keyboard-sampler-keys{height:180px}.keyboard-key.white{height:150px}.keyboard-key.black{height:96px}.keyboard-key strong{bottom:36px;font-size:1.08rem}.keyboard-key.black strong{top:34px;font-size:.92rem}.keyboard-key span{bottom:18px}.keyboard-key.black span{bottom:18px}}