/* SolAudioLab V8.0.15 Drum Machine Lower Panel Height Alignment */
.drum-shell{display:grid;gap:12px}.drum-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,360px);gap:16px;align-items:end}.tagline{color:var(--green);font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}.drum-title{margin:0;font-size:clamp(42px,8vw,86px);line-height:.82;letter-spacing:-.09em;font-weight:1000}.drum-sub{color:var(--muted);line-height:1.5;max-width:810px;margin:14px 0 0;font-size:14px}.hero-badge{border:1px solid rgba(66,211,107,.25);background:rgba(66,211,107,.08);border-radius:14px;padding:12px;color:#bcffc9;font-size:12px;line-height:1.45;box-shadow:var(--inset)}.hero-badge strong{display:block;color:var(--green);letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px}.intro-counter{margin-top:10px}
.setup-head,.editor-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.setup-card h2,.editor-head h2{margin:0;color:var(--text);letter-spacing:-.05em}.setup-head p,.editor-head p,.hint-line{color:var(--muted);font-size:12px;line-height:1.45;margin:7px 0 0}.setup-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) 120px 135px minmax(240px,1.2fr) minmax(160px,.8fr) 170px;gap:10px;align-items:end;margin-top:14px}.input-row,.compact-input{display:grid;gap:5px}.input-row label,.choice-row label,.compact-input label,.pattern-name span{color:var(--dim);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.input-row input,.input-row select,.pattern-name input,.compact-input input{min-width:0;width:100%;border:1px solid var(--line-soft);background:#0f1318;color:var(--text);border-radius:12px;padding:10px 11px;font-size:15px;font-weight:850;outline:none;box-shadow:var(--inset)}.input-row input:focus,.input-row select:focus,.pattern-name input:focus,.compact-input input:focus{border-color:var(--green)}
.segmented{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}.segmented button{border:1px solid var(--line-soft);background:#11151a;color:var(--muted);border-radius:10px;padding:8px 10px;font-size:12px;font-weight:950;cursor:pointer;box-shadow:var(--inset)}.segmented button.active{color:#fff;border-color:#ff5260;background:linear-gradient(180deg,#ff3040,#93000a)}.btn{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#303743,#171b22);color:var(--text);font-weight:950;letter-spacing:.035em;text-transform:uppercase;padding:10px;cursor:pointer;box-shadow:var(--inset)}.btn:hover{border-color:#ff5260}.btn.small{font-size:11px;padding:8px}.btn.green{background:linear-gradient(180deg,#45c765,#176b2d);border-color:#60e280}.btn.ghost{opacity:.82}.btn.copied{border-color:#60e280;color:#9bffb3}.create-btn{min-height:44px}
.machine-app{display:grid;gap:12px}.topbar{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(380px,1.25fr) minmax(270px,.9fr);gap:12px;align-items:end;position:sticky;top:8px;z-index:20}.pattern-name{display:grid;gap:5px}.transport{display:grid;grid-template-columns:84px minmax(92px,1fr) repeat(4,45px);gap:7px;align-items:stretch}.bpm-box{border:1px solid var(--line-soft);background:#0f1318;border-radius:13px;padding:7px;text-align:center;box-shadow:var(--inset)}.bpm-box span{display:block;color:var(--dim);font-size:9px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.bpm-box strong{display:block;color:var(--green);font-size:30px;line-height:.95;letter-spacing:-.08em}.play-btn{border:1px solid #ff5260;background:linear-gradient(180deg,#ff3040,#93000a);color:#fff;border-radius:14px;font-size:20px;font-weight:1000;cursor:pointer;box-shadow:var(--inset)}.play-btn.playing{border-color:#60e280;background:linear-gradient(180deg,#45c765,#176b2d)}.mini-btn{border:1px solid var(--line-soft);border-radius:12px;background:#11151a;color:var(--text);font-weight:1000;cursor:pointer;box-shadow:var(--inset)}.top-settings{display:grid;grid-template-columns:100px 1fr;gap:8px;align-items:end}.compact-input input[type=range]{padding:0;accent-color:var(--accent-2)}.compact-input b{color:var(--green)}
.bar-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.bar-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}.bar-tab{flex:0 0 auto;border:1px solid var(--line-soft);background:#11151a;color:var(--muted);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:950;cursor:pointer;box-shadow:var(--inset)}.bar-tab.active{color:#fff;border-color:#ff5260;background:rgba(224,0,18,.28)}.bar-tab.playing{outline:2px solid rgba(66,211,107,.35)}.bar-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.rows-panel{margin-top:12px;border:1px solid var(--line-soft);background:#0f1318;border-radius:14px;padding:10px}.rows-panel-head{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:950;margin-bottom:9px}.row-toggles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.row-toggle{border:1px solid var(--line-soft);background:#11151a;border-radius:11px;padding:8px;color:var(--text);font-size:12px;font-weight:850;display:flex;align-items:center;gap:7px}.landscape-note{display:none;color:#ffd6a6;border:1px solid rgba(255,190,90,.25);background:rgba(255,190,90,.08);border-radius:12px;padding:8px 10px;margin-top:10px;font-size:12px;line-height:1.4}
.sequencer-frame{margin-top:13px;overflow-x:auto;border:1px solid var(--line-soft);border-radius:16px;background:#0d1014;box-shadow:var(--inset)}.step-header,.track-grid{min-width:var(--grid-width,760px)}.step-header{display:grid;grid-template-columns:132px repeat(var(--steps),minmax(34px,1fr));gap:4px;position:sticky;top:0;z-index:3;background:#0d1014;padding:10px 10px 7px;border-bottom:1px solid var(--line-soft)}.corner-cell{color:var(--dim);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;align-self:center}.step-cell{color:var(--dim);font-size:10px;font-weight:950;text-align:center;border-radius:8px;padding:5px 2px;background:#11151a}.step-cell.beat{color:var(--green)}.step-cell.playing{background:rgba(66,211,107,.2);color:#fff}.track-scroll{max-height:min(56vh,548px);overflow-y:auto;padding:8px 10px 10px}.track-grid{display:grid;gap:5px}.track-row{display:grid;grid-template-columns:132px repeat(var(--steps),minmax(34px,1fr));gap:4px}.track-name{position:sticky;left:0;z-index:2;border:1px solid var(--line-soft);background:#131820;color:var(--text);border-radius:10px;padding:8px;font-size:11px;font-weight:950;line-height:1.1;display:grid;align-content:center;box-shadow:var(--inset)}.step-button{min-height:36px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#10141a;cursor:pointer;box-shadow:var(--inset);position:relative}.step-button:hover{border-color:rgba(255,255,255,.28)}.step-button.on{border-color:rgba(255,82,96,.65);background:radial-gradient(circle at 60% 12%,rgba(255,255,255,.18),transparent 34%),linear-gradient(180deg,#f03241,#7c0009)}.step-button.playing-column{box-shadow:0 0 0 2px rgba(66,211,107,.28),inset 0 1px 0 rgba(255,255,255,.08);border-color:rgba(66,211,107,.55)}
.overview{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:10px}.overview-title,.panel-title,.saved-title{color:var(--dim);font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase;margin-bottom:7px}.overview-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}.overview-bar{border:1px solid var(--line-soft);background:#11151a;border-radius:10px;padding:8px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:900}.overview-bar.active{border-color:#ff5260;color:#fff}.overview-dots{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;margin-top:6px}.overview-dot{height:5px;border-radius:999px;background:#252b34}.overview-dot.on{background:#ff5260}.lower-panels{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(320px,1.05fr);gap:12px}.panel-title{font-size:12px;margin:0}.preset-grid,.save-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.preset-btn{text-align:left;border:1px solid var(--line-soft);background:#11151a;color:var(--text);border-radius:13px;padding:10px;cursor:pointer;box-shadow:var(--inset)}.preset-btn:hover{border-color:#ff5260}.preset-btn strong{display:block;font-size:13px;font-weight:1000}.preset-btn span{display:block;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.32}.saved-box{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}.saved-list{display:grid;gap:7px;margin-top:8px}.saved-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;border:1px solid var(--line-soft);background:#11151a;border-radius:12px;padding:8px}.saved-name{min-width:0;color:var(--text);font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-empty{color:var(--muted);font-size:12px;line-height:1.45}.seo-section{color:var(--muted);font-size:13.5px;line-height:1.6}.seo-section h2,.seo-section h3{color:var(--text);letter-spacing:-.045em}.mobile-transport{display:none}
@media(max-width:1160px){.setup-grid,.topbar{grid-template-columns:1fr}.transport{grid-template-columns:84px minmax(120px,1fr) repeat(4,45px)}.bar-strip,.lower-panels{grid-template-columns:1fr}.bar-actions{justify-content:flex-start}}@media(max-width:840px){.drum-hero{grid-template-columns:1fr}.row-toggles{grid-template-columns:repeat(2,minmax(0,1fr))}.landscape-note{display:block}.top-settings{grid-template-columns:1fr}.preset-grid,.save-grid{grid-template-columns:1fr}}@media(max-width:760px){.drum-title{font-size:clamp(42px,16vw,64px)}.drum-shell{padding-bottom:88px}.topbar{position:static}.transport{grid-template-columns:74px minmax(90px,1fr) repeat(4,40px)}.mini-btn{min-height:44px}.step-header,.track-grid{min-width:calc(132px + var(--steps) * 39px)}.track-scroll{max-height:48vh}.step-button{min-height:40px}.mobile-transport{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;display:grid;grid-template-columns:74px minmax(0,1fr) 52px 52px;gap:7px;padding:8px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:radial-gradient(circle at 90% 0%,rgba(224,0,18,.19),transparent 42%),linear-gradient(180deg,rgba(31,36,44,.97),rgba(13,16,20,.98));box-shadow:0 18px 38px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(10px)}.mobile-bpm{border:1px solid var(--line-soft);border-radius:13px;background:#0f1318;box-shadow:var(--inset);padding:7px;display:grid;align-content:center;text-align:center}.mobile-bpm span{color:var(--dim);font-size:9px;font-weight:1000;letter-spacing:.12em;text-transform:uppercase}.mobile-bpm strong{display:block;color:var(--green);font-size:24px;font-weight:1000;line-height:.9;letter-spacing:-.07em;margin-top:3px}.mobile-play,.mobile-step{border:1px solid var(--line);border-radius:14px;color:#fff;font-weight:1000;cursor:pointer;box-shadow:var(--inset)}.mobile-play{background:linear-gradient(180deg,#ff3040,#93000a);border-color:#ff5260;font-size:19px}.mobile-play.playing{background:linear-gradient(180deg,#45c765,#176b2d);border-color:#60e280}.mobile-step{background:linear-gradient(180deg,#303743,#171b22);font-size:20px}}@media(max-width:430px){.transport{grid-template-columns:72px 1fr 38px 38px}.transport .mini-btn:nth-of-type(4),.transport .mini-btn:nth-of-type(5){display:none}.track-name{font-size:10px}.step-header,.track-grid{min-width:calc(118px + var(--steps) * 38px)}.step-header,.track-row{grid-template-columns:118px repeat(var(--steps),minmax(34px,1fr))}}


/* V8.0.1 Drum Machine sound/playhead fix */
.step-button.playing-column::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 11px;
  border: 2px solid rgba(66,211,107,.54);
  pointer-events: none;
}

.step-cell.playing {
  background: rgba(66,211,107,.26);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(66,211,107,.32);
}


/* V8.0.2 Drum Machine step advance fix */
.bar-tab.playing {
  outline: 2px solid rgba(66,211,107,.45);
  color: #ffffff;
}

.step-button.playing-column {
  border-color: rgba(66,211,107,.65);
}




/* V8.0.3 Mobile Focus Layout */
.mobile-focus-toolbar,
.mobile-drawer,
.mobile-editor-strip,
.nav-toggle-btn {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .drum-shell {
    gap: 8px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 78px;
  }

  .site-nav {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    margin: 0 -2px;
    border-radius: 14px;
    background:
      radial-gradient(circle at 90% 0%, rgba(224,0,18,.13), transparent 45%),
      linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98));
  }

  .nav-toggle-btn {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
  }

  .site-links {
    display: none !important;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 52vh;
    overflow-y: auto;
    padding-top: 7px;
  }

  body.mobile-nav-open .site-links {
    display: grid !important;
  }

  .site-links a {
    min-height: 36px;
    display: grid;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: #11151a;
    font-size: 11px;
    font-weight: 950;
  }

  .mobile-intro {
    padding: 10px;
    max-height: 128px;
    overflow: hidden;
  }

  .mobile-intro .hero-badge,
  .mobile-intro .intro-counter,
  .mobile-intro .drum-sub,
  .mobile-intro .tagline {
    display: none;
  }

  .mobile-intro .drum-title {
    font-size: 38px;
    letter-spacing: -0.08em;
  }

  .mobile-focus-toolbar {
    position: sticky;
    top: 57px;
    z-index: 110;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background:
      radial-gradient(circle at 0% 0%, rgba(66,211,107,.11), transparent 42%),
      linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98));
    box-shadow: 0 10px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07);
  }

  .mobile-panel-btn {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: linear-gradient(180deg, #2b313b, #151a20);
    color: var(--text);
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .03em;
    text-transform: uppercase;
    min-height: 34px;
    cursor: pointer;
    box-shadow: var(--inset);
  }

  .mobile-panel-btn.active,
  .mobile-panel-btn[aria-expanded="true"] {
    border-color: #60e280;
    color: #b8ffc7;
    background: linear-gradient(180deg, #224d2e, #122519);
  }

  .mobile-drawer {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 104px;
    z-index: 150;
    display: block;
    max-height: calc(100vh - 190px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background:
      radial-gradient(circle at 95% 0%, rgba(224,0,18,.15), transparent 45%),
      linear-gradient(180deg, rgba(31,36,44,.99), rgba(13,16,20,.99));
    box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .mobile-drawer[hidden] {
    display: none;
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px;
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-drawer-head strong {
    color: var(--green);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 242px);
    overflow-y: auto;
    padding: 8px;
  }

  .mobile-drawer-content {
    display: block !important;
    margin: 0;
    border-radius: 12px;
    box-shadow: none;
  }

  .mobile-drawer-content.tool-panel,
  .mobile-drawer-content.setup-card {
    padding: 10px;
  }

  .machine-app {
    gap: 8px;
  }

  /* Mobile main view: keep only the editor visible. */
  .topbar,
  .bar-strip,
  .lower-panels,
  .seo-section,
  .mobile-info-section,
  .setup-card {
    display: none;
  }

  .editor-panel {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 202px);
    padding: 8px;
    margin: 0;
    overflow: hidden;
  }

  .mobile-editor-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    margin-bottom: 7px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: #0f1318;
    box-shadow: var(--inset);
  }

  .mobile-editor-strip span {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-editor-strip span:last-child {
    color: var(--green);
  }

  .editor-head {
    display: none;
  }

  .landscape-note,
  .overview,
  .overview-box {
    display: none;
  }

  .sequencer-frame {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 14px;
  }

  .step-header,
  .track-grid {
    min-width: 0 !important;
    width: 100% !important;
  }

  .step-header {
    grid-template-columns: 78px repeat(var(--steps), minmax(0, 1fr)) !important;
    gap: 2px;
    padding: 7px 5px 5px;
  }

  .corner-cell {
    font-size: 9px;
    letter-spacing: .05em;
  }

  .step-cell {
    min-width: 0;
    padding: 4px 0;
    font-size: clamp(7px, 2.4vw, 10px);
    border-radius: 6px;
  }

  .track-scroll {
    max-height: none;
    flex: 1 1 auto;
    height: calc(100vh - 308px);
    min-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
    overscroll-behavior: contain;
  }

  .track-grid {
    gap: 4px;
  }

  .track-row {
    grid-template-columns: 78px repeat(var(--steps), minmax(0, 1fr)) !important;
    gap: 2px;
  }

  .track-name {
    left: 0;
    min-width: 0;
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 9px;
    letter-spacing: -0.02em;
    line-height: 1.05;
    word-break: keep-all;
  }

  .step-button {
    min-width: 0;
    min-height: 34px;
    border-radius: 7px;
  }

  .step-button.on {
    border-color: rgba(255,82,96,.72);
  }

  .mobile-drawer .setup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 10px;
  }

  .mobile-drawer .setup-head {
    display: grid;
    gap: 8px;
  }

  .mobile-drawer .topbar,
  .mobile-drawer .bar-strip,
  .mobile-drawer .lower-panels,
  .mobile-drawer .setup-card {
    display: block;
  }

  .mobile-drawer .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .mobile-drawer .transport {
    grid-template-columns: 74px minmax(90px,1fr) repeat(4, 40px);
  }

  .mobile-drawer .bar-strip {
    display: grid;
    gap: 9px;
  }

  .mobile-drawer .bar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
  }

  .mobile-drawer .bar-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
  }

  .mobile-drawer .bar-tab {
    text-align: center;
    padding: 9px 5px;
  }

  .mobile-drawer .rows-panel {
    display: block;
    margin-top: 0;
  }

  .mobile-drawer .row-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-drawer .preset-grid,
  .mobile-drawer .save-grid {
    grid-template-columns: 1fr;
  }

  .mobile-drawer .lower-panels {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mobile-transport {
    bottom: 7px;
    left: 7px;
    right: 7px;
    grid-template-columns: 70px minmax(0, 1fr) 50px 50px;
    border-radius: 16px;
    padding: 7px;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .mobile-intro {
    display: none;
  }

  .mobile-focus-toolbar {
    top: 52px;
  }

  .editor-panel {
    min-height: calc(100vh - 170px);
  }

  .track-scroll {
    height: calc(100vh - 248px);
    min-height: 160px;
  }

  .step-button {
    min-height: 30px;
  }

  .mobile-drawer {
    top: 96px;
    max-height: calc(100vh - 174px);
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 224px);
  }
}



/* V8.0.4 Mobile drawer close fix */
@media (max-width: 760px) {
  .editor-panel > .rows-panel:not(.mobile-drawer-content) {
    display: none !important;
  }

  .mobile-drawer .rows-panel.mobile-drawer-content {
    display: block !important;
  }
}


/* V8.0.5 Drum Machine auto bar follow fix */
.bar-tab.active.playing {
  border-color: #60e280;
  background: linear-gradient(180deg, rgba(66,211,107,.34), rgba(17,80,35,.42));
}


/* V8.0.6 Track playhead highlight fix */
.step-button.playing-column {
  border-color: rgba(66,211,107,.85) !important;
  box-shadow:
    0 0 0 2px rgba(66,211,107,.34),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.step-button.playing-column::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 2px solid rgba(66,211,107,.56);
  pointer-events: none;
}




/* V8.0.7 Mobile Drawer / NEW / INFO / Track Order Fix */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  html,
  body {
    overflow-x: hidden;
  }

  body.drawer-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .mobile-panel-btn[data-mobile-panel="setup"] {
    border-color: rgba(96,226,128,.44);
  }

  .mobile-drawer {
    top: 64px !important;
    left: 6px;
    right: 6px;
    max-height: calc(100vh - 86px) !important;
    border: 1px solid rgba(255,255,255,.28);
    background:
      radial-gradient(circle at 96% 0%, rgba(96,226,128,.17), transparent 40%),
      radial-gradient(circle at 0% 0%, rgba(255,255,255,.12), transparent 38%),
      linear-gradient(180deg, rgba(52,59,70,.99), rgba(30,36,45,.99));
    box-shadow:
      0 24px 58px rgba(0,0,0,.66),
      0 0 0 2px rgba(96,226,128,.12),
      inset 0 1px 0 rgba(255,255,255,.14);
    overscroll-behavior: contain;
  }

  .mobile-drawer::before {
    content: "SETTING MODE";
    position: absolute;
    top: 10px;
    right: 86px;
    z-index: 2;
    color: rgba(184,255,199,.5);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .16em;
    pointer-events: none;
  }

  .mobile-drawer-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background:
      linear-gradient(180deg, rgba(68,76,90,.99), rgba(42,49,61,.99));
    border-bottom: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
  }

  .drawer-title-wrap {
    display: grid;
    gap: 2px;
  }

  .drawer-title-wrap span,
  #mobileDrawerModeLabel {
    color: rgba(184,255,199,.62);
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .drawer-title-wrap strong,
  #mobileDrawerTitle {
    color: #ffffff;
    font-size: 15px;
    font-weight: 1000;
    letter-spacing: -.02em;
  }

  #mobileDrawerClose,
  .mobile-drawer-head .btn {
    border-color: rgba(255,255,255,.32);
    background: linear-gradient(180deg, #f23d4a, #8b0009);
    color: #fff;
    min-width: 70px;
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 142px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  .mobile-drawer-content,
  .mobile-drawer-content.tool-panel,
  .mobile-drawer-content.setup-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 40%),
      linear-gradient(180deg, rgba(59,67,81,.94), rgba(37,44,55,.94));
    border-color: rgba(255,255,255,.18);
  }

  .mobile-drawer .input-row input,
  .mobile-drawer .input-row select,
  .mobile-drawer .pattern-name input,
  .mobile-drawer .compact-input input {
    background: #171d25;
    border-color: rgba(255,255,255,.2);
  }

  .mobile-drawer .segmented button,
  .mobile-drawer .preset-btn,
  .mobile-drawer .row-toggle,
  .mobile-drawer .saved-item {
    background: #202734;
    border-color: rgba(255,255,255,.17);
  }

  .mobile-drawer .setup-head h2::before {
    content: "NEW ";
    color: #9bffb3;
  }

  .mobile-drawer .setup-head p {
    color: rgba(235,240,247,.76);
  }

  .mobile-info-extra {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .mobile-info-extra h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    letter-spacing: -.04em;
  }

  .mobile-info-extra p {
    margin: 0;
    color: rgba(235,240,247,.78);
    font-size: 12px;
    line-height: 1.45;
  }

  .mobile-info-extra strong {
    color: #9bffb3;
  }

  .editor-panel > .rows-panel:not(.mobile-drawer-content) {
    display: none !important;
  }

  .mobile-drawer .rows-panel.mobile-drawer-content {
    display: block !important;
  }
}

@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .mobile-intro {
    display: none;
  }

  .mobile-focus-toolbar {
    display: grid;
    top: 52px;
  }

  .mobile-drawer {
    top: 58px !important;
    max-height: calc(100vh - 72px) !important;
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 126px) !important;
  }

  .editor-panel {
    min-height: calc(100vh - 170px);
  }

  .track-scroll {
    height: calc(100vh - 248px);
    min-height: 160px;
  }

  .step-button {
    min-height: 30px;
  }
}





/* V8.0.8 NEW / INFO drawer behavior fix */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  body.drawer-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }

  .mobile-drawer {
    top: 48px !important;
    max-height: calc(100vh - 58px) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 108px) !important;
    min-height: min(68vh, 520px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-content {
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-drawer .mobile-info-extra {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 24px;
  }

  .mobile-drawer .hero-card,
  .mobile-drawer .mobile-info-section,
  .mobile-drawer [data-mobile-source="info"] {
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-drawer .setup-card {
    max-height: none !important;
  }
}

@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .mobile-drawer {
    top: 42px !important;
    max-height: calc(100vh - 50px) !important;
  }

  .mobile-drawer-body {
    max-height: calc(100vh - 98px) !important;
    min-height: calc(100vh - 112px);
  }
}





/* V8.0.9 Phone landscape menu + playhead grid alignment fix
   Scope: visual layout only. Playback, NEW, INFO, sound and track order are unchanged. */

/* A. Phone landscape must behave like the mobile focus layout, even when CSS width is wide. */
@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  html,
  body {
    overflow-x: hidden;
  }

  .drum-shell {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 82px !important;
  }

  /* Top site navigation: collapse links behind MENU in phone landscape. */
  .site-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 94% 0%, rgba(224,0,18,.16), transparent 42%),
      linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .site-brand {
    min-width: 0 !important;
  }

  .site-brand .brand-text,
  .brand-text {
    font-size: 24px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .nav-toggle-btn {
    display: inline-flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #2b313b, #141920) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    box-shadow: var(--inset) !important;
  }

  .site-links {
    display: none !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: 42vh !important;
    overflow-y: auto !important;
    padding-top: 8px !important;
  }

  body.mobile-nav-open .site-links {
    display: grid !important;
  }

  .site-links a {
    min-height: 34px !important;
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 10px !important;
    background: #10151b !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: .06em !important;
    text-decoration: none !important;
  }

  .site-links a.active {
    color: #fff !important;
    background: linear-gradient(180deg, var(--red), var(--red-dark)) !important;
    border-color: rgba(255,255,255,.22) !important;
  }

  /* Hide intro card in landscape focus mode so the editor gets the vertical space. */
  .mobile-intro {
    display: none !important;
  }

  /* Toolbar: prevent browser default white buttons. */
  .mobile-focus-toolbar {
    position: sticky !important;
    top: 58px !important;
    z-index: 110 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(66,211,107,.11), transparent 42%),
      linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  .mobile-panel-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #2b313b, #151a20) !important;
    color: #f2f5f9 !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    min-height: 38px !important;
    cursor: pointer !important;
    box-shadow: var(--inset) !important;
    padding: 0 4px !important;
  }

  .mobile-panel-btn.active,
  .mobile-panel-btn[aria-expanded="true"],
  .mobile-panel-btn[data-mobile-panel="setup"] {
    border-color: rgba(96,226,128,.55) !important;
  }

  .mobile-panel-btn.active,
  .mobile-panel-btn[aria-expanded="true"] {
    color: #b8ffc7 !important;
    background: linear-gradient(180deg, #224d2e, #122519) !important;
  }

  /* Editor takes priority. */
  .machine-app {
    gap: 8px !important;
  }

  .editor-panel {
    padding: 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .editor-head,
  .landscape-note,
  .overview,
  .overview-box {
    display: none !important;
  }

  .mobile-editor-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 7px 8px !important;
    margin-bottom: 7px !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 12px !important;
    background: #0f1318 !important;
    box-shadow: var(--inset) !important;
  }
}

/* B. Strict grid alignment for the playhead column.
   Header and track rows must share the exact same label width, gap and side padding. */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .sequencer-frame {
    overflow-x: hidden !important;
  }

  .step-header,
  .track-grid {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .step-header,
  .track-row {
    --track-label-width-mobile: 78px;
    display: grid !important;
    grid-template-columns: var(--track-label-width-mobile) repeat(var(--steps), minmax(0, 1fr)) !important;
    column-gap: 2px !important;
    row-gap: 0 !important;
    box-sizing: border-box !important;
  }

  .step-header {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .track-scroll {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .corner-cell,
  .track-name,
  .step-cell,
  .step-button {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .step-button.playing-column::after {
    inset: -1px !important;
  }
}

/* Same alignment when JS flags a touch/mobile-focus screen. */
body.mobile-focus-active .sequencer-frame {
  overflow-x: hidden !important;
}

body.mobile-focus-active .step-header,
body.mobile-focus-active .track-grid {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.mobile-focus-active .step-header,
body.mobile-focus-active .track-row {
  --track-label-width-mobile: 78px;
  grid-template-columns: var(--track-label-width-mobile) repeat(var(--steps), minmax(0, 1fr)) !important;
  column-gap: 2px !important;
  box-sizing: border-box !important;
}

body.mobile-focus-active .step-header {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

body.mobile-focus-active .track-scroll {
  padding-left: 5px !important;
  padding-right: 5px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}





/* V8.0.11 SAVE / LOAD split */
@media (max-width: 760px), (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .mobile-focus-toolbar {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .mobile-panel-btn {
    font-size: 9px !important;
    letter-spacing: .04em !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .mobile-panel-btn[data-mobile-panel="save"],
  .mobile-panel-btn[data-mobile-panel="load"] {
    border-color: rgba(96,226,128,.4) !important;
  }

  .load-inline-hint {
    margin-top: 10px;
    padding: 8px 9px;
    border: 1px solid rgba(96,226,128,.24);
    border-radius: 10px;
    background: rgba(96,226,128,.08);
    color: #b8ffc7;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobile-drawer .save-load-panel.save-panel-mode-save .load-inline-hint {
    opacity: .72;
  }

  .mobile-drawer .save-load-panel.save-panel-mode-load .load-inline-hint {
    opacity: 1;
  }
}

body.mobile-focus-active .mobile-focus-toolbar {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

body.mobile-focus-active .mobile-panel-btn {
  font-size: 9px !important;
  letter-spacing: .04em !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}





/* V8.0.12 Phone landscape focus mode
   Purpose: a phone in landscape must not fall back to the desktop layout just because CSS width is wide.
   Scope: layout detection/visibility only. Sequencer grid, playhead, audio and save/load logic are unchanged. */

body.mobile-focus-active {
  overflow-x: hidden !important;
}

/* Site navigation collapses behind MENU in JS-detected mobile focus mode. */
body.mobile-focus-active .site-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(224,0,18,.16), transparent 42%),
    linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.mobile-focus-active .site-brand {
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.mobile-focus-active .nav-toggle-btn {
  display: inline-flex !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #2b313b, #141920) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: var(--inset) !important;
}

body.mobile-focus-active .site-links {
  display: none !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-height: 42vh !important;
  overflow-y: auto !important;
  padding-top: 8px !important;
}

body.mobile-focus-active.mobile-nav-open .site-links {
  display: grid !important;
}

body.mobile-focus-active .site-links a {
  min-height: 34px !important;
  display: grid !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 10px !important;
  background: #10151b !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
}

body.mobile-focus-active .site-links a.active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--red), var(--red-dark)) !important;
}

/* Main phone work mode: keep the editor, hide desktop panels. */
body.mobile-focus-active .drum-shell {
  gap: 8px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 82px !important;
}

body.phone-landscape-focus .mobile-intro,
body.phone-landscape-focus .seo-section,
body.phone-landscape-focus .mobile-info-section,
body.phone-landscape-focus .lower-panels,
body.phone-landscape-focus .machine-app > .topbar,
body.phone-landscape-focus .machine-app > .bar-strip,
body.phone-landscape-focus .drum-shell > .setup-card:not(.mobile-drawer-content) {
  display: none !important;
}

body.mobile-focus-active .mobile-focus-toolbar {
  position: sticky !important;
  top: 58px !important;
  z-index: 110 !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(66,211,107,.11), transparent 42%),
    linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.mobile-focus-active .mobile-panel-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2b313b, #151a20) !important;
  color: #f2f5f9 !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  min-height: 38px !important;
  cursor: pointer !important;
  box-shadow: var(--inset) !important;
  padding: 0 2px !important;
}

body.mobile-focus-active .mobile-panel-btn.active,
body.mobile-focus-active .mobile-panel-btn[aria-expanded="true"] {
  color: #b8ffc7 !important;
  background: linear-gradient(180deg, #224d2e, #122519) !important;
  border-color: rgba(96,226,128,.55) !important;
}

body.mobile-focus-active .mobile-panel-btn[data-mobile-panel="setup"],
body.mobile-focus-active .mobile-panel-btn[data-mobile-panel="save"],
body.mobile-focus-active .mobile-panel-btn[data-mobile-panel="load"] {
  border-color: rgba(96,226,128,.42) !important;
}

/* The editor becomes the main screen. */
body.mobile-focus-active .machine-app {
  gap: 8px !important;
}

body.mobile-focus-active .editor-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 202px) !important;
  padding: 8px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.phone-landscape-focus .editor-panel {
  min-height: calc(100vh - 172px) !important;
}

body.mobile-focus-active .editor-head,
body.mobile-focus-active .landscape-note,
body.mobile-focus-active .overview,
body.mobile-focus-active .overview-box {
  display: none !important;
}

body.mobile-focus-active .mobile-editor-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  margin-bottom: 7px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 12px !important;
  background: #0f1318 !important;
  box-shadow: var(--inset) !important;
}

body.mobile-focus-active .sequencer-frame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  border-radius: 14px !important;
}

body.mobile-focus-active .track-scroll {
  max-height: none !important;
  flex: 1 1 auto !important;
  height: calc(100vh - 252px) !important;
  min-height: 160px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 5px !important;
  overscroll-behavior: contain !important;
}

body.phone-landscape-focus .track-scroll {
  height: calc(100vh - 248px) !important;
}

/* Drawer content must remain visible even though source panels are hidden in the background. */
body.mobile-focus-active .mobile-drawer .mobile-drawer-content {
  display: block !important;
}

body.mobile-focus-active .mobile-drawer .topbar.mobile-drawer-content {
  display: grid !important;
}

body.mobile-focus-active .mobile-drawer .bar-strip.mobile-drawer-content {
  display: grid !important;
}

body.mobile-focus-active .mobile-drawer .lower-panels.mobile-drawer-content,
body.mobile-focus-active .mobile-drawer .tool-panel.mobile-drawer-content,
body.mobile-focus-active .mobile-drawer .setup-card.mobile-drawer-content,
body.mobile-focus-active .mobile-drawer .seo-section.mobile-drawer-content,
body.mobile-focus-active .mobile-drawer .mobile-info-section.mobile-drawer-content {
  display: block !important;
}

body.mobile-focus-active .mobile-transport {
  position: fixed !important;
  z-index: 130 !important;
  left: 7px !important;
  right: 7px !important;
  bottom: 7px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 50px 50px !important;
  gap: 8px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(224,0,18,.32), transparent 38%),
    linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
}





/* V8.0.13 Mobile transport style fix
   V8.0.12 correctly detects phone landscape, but the child styles for BPM/PLAY/-/+ were still
   mainly inside max-width:760px. Force those styles whenever JS marks mobile focus mode. */

body.mobile-focus-active .site-footer,
body.phone-landscape-focus .site-footer {
  display: none !important;
}

body.mobile-focus-active .mobile-transport {
  position: fixed !important;
  z-index: 130 !important;
  left: 7px !important;
  right: 7px !important;
  bottom: 7px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 50px 50px !important;
  gap: 8px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(224,0,18,.32), transparent 38%),
    linear-gradient(180deg, rgba(31,36,44,.98), rgba(13,16,20,.98)) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.mobile-focus-active .mobile-bpm {
  border: 1px solid var(--line-soft) !important;
  border-radius: 13px !important;
  background: #0f1318 !important;
  box-shadow: var(--inset) !important;
  padding: 7px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.mobile-focus-active .mobile-bpm span {
  display: block !important;
  color: var(--dim) !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.mobile-focus-active .mobile-bpm strong {
  display: block !important;
  color: var(--green) !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: .95 !important;
  letter-spacing: -.07em !important;
  margin-top: 4px !important;
}

body.mobile-focus-active .mobile-play,
body.mobile-focus-active .mobile-step {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: var(--inset) !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

body.mobile-focus-active .mobile-play {
  background: linear-gradient(180deg, #ff3040, #93000a) !important;
  border-color: #ff5260 !important;
  font-size: 19px !important;
  letter-spacing: .12em !important;
}

body.mobile-focus-active .mobile-play.playing {
  background: linear-gradient(180deg, #45c765, #176b2d) !important;
  border-color: #60e280 !important;
}

body.mobile-focus-active .mobile-step {
  background: linear-gradient(180deg, #303743, #171b22) !important;
  border-color: rgba(255,255,255,.14) !important;
  font-size: 20px !important;
  letter-spacing: .02em !important;
}

body.mobile-focus-active .mobile-step:active,
body.mobile-focus-active .mobile-play:active {
  transform: translateY(1px) !important;
}

/* Keep the landscape phone transport compact without returning to browser default controls. */
body.phone-landscape-focus .mobile-transport {
  grid-template-columns: 68px minmax(0, 1fr) 48px 48px !important;
  gap: 7px !important;
  padding: 7px !important;
}

body.phone-landscape-focus .mobile-play,
body.phone-landscape-focus .mobile-step {
  min-height: 46px !important;
}

body.phone-landscape-focus .mobile-bpm strong {
  font-size: 23px !important;
}



/* V8.0.13 PC density polish
   Keeps the mobile drawer workflow intact and makes the desktop page feel like a tool, not a manual page. */
@media (min-width: 761px) {
  .drum-shell {
    gap: 10px;
  }

  .drum-hero {
    padding: 16px 18px;
    gap: 14px;
    align-items: center;
  }

  .drum-title {
    font-size: clamp(48px, 6.1vw, 72px);
    line-height: .86;
  }

  .drum-sub {
    margin-top: 7px;
    max-width: 760px;
    font-size: 13px;
    line-height: 1.36;
  }

  .hero-badge {
    min-height: 0;
    padding: 11px 12px;
    line-height: 1.3;
  }

  .intro-counter {
    margin-top: 8px;
  }

  .mobile-info-extra {
    display: none !important;
  }

  .setup-card,
  .tool-panel {
    border-radius: 15px;
  }

  .setup-card {
    padding: 14px;
  }

  .setup-head {
    align-items: center;
  }

  .setup-head h2,
  .editor-head h2 {
    font-size: 22px;
  }

  .setup-head p,
  .editor-head p {
    font-size: 12px;
    line-height: 1.32;
  }

  .setup-grid {
    gap: 8px;
    margin-top: 10px;
  }

  .setup-grid input,
  .setup-grid select {
    min-height: 38px;
    padding: 8px 9px;
  }

  .segmented button {
    min-height: 34px;
    padding: 7px 10px;
  }

  .create-btn {
    min-height: 44px;
  }

  .machine-app {
    gap: 9px;
  }

  .topbar {
    gap: 9px;
    top: 8px;
    padding: 12px;
    grid-template-columns: minmax(180px, .82fr) minmax(340px, 1.12fr) minmax(220px, .76fr);
  }

  .bar-strip {
    padding: 11px 12px;
    gap: 9px;
  }

  .bar-tab {
    padding: 7px 11px;
  }

  .editor-panel {
    padding: 14px;
  }

  .editor-head {
    align-items: center;
  }

  .sequencer-frame {
    margin-top: 9px;
    border-radius: 14px;
  }

  .step-header {
    padding: 8px 8px 6px;
  }

  .track-scroll {
    max-height: min(46vh, 430px);
    padding: 7px 8px 8px;
  }

  .track-grid {
    gap: 4px;
  }

  .track-row {
    gap: 4px;
  }

  .track-name {
    padding: 7px;
    border-radius: 9px;
  }

  .step-button {
    min-height: 31px;
    border-radius: 8px;
  }

  .overview {
    margin-top: 9px;
    padding-top: 8px;
  }

  .lower-panels {
    gap: 10px;
  }

  .preset-grid {
    gap: 7px;
  }

  .save-grid {
    gap: 7px;
  }

  .saved-list {
    gap: 7px;
  }

  .seo-section {
    margin-top: 0;
  }
}

@media (min-width: 761px) and (max-width: 1160px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .track-scroll {
    max-height: min(44vh, 390px);
  }
}


/* V8.0.14 mobile header consistency fix
   Drum Machine previously overrode the global mobile navigation into a hidden MENU-style nav.
   This restores the same visible, wrapping text-link navigation used by the other SolAudioLab tools.
   The drum-specific mobile focus toolbar remains separate below the site nav. */
@media (max-width: 760px) {
  .drum-shell .site-nav,
  body.mobile-focus-active .drum-shell .site-nav {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 10px 9px !important;
    margin: 0 0 10px !important;
    border-radius: 14px !important;
    border: 1px solid var(--line) !important;
    background: linear-gradient(180deg, rgba(35,40,50,0.96), rgba(24,28,35,0.98)) !important;
    box-shadow: var(--shadow), var(--inset) !important;
  }

  .drum-shell .site-brand,
  body.mobile-focus-active .drum-shell .site-brand {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: var(--text) !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -0.05em !important;
    white-space: nowrap !important;
  }

  .drum-shell .site-brand span,
  body.mobile-focus-active .drum-shell .site-brand span {
    color: var(--accent-2) !important;
  }

  .drum-shell .nav-toggle-btn,
  body.mobile-focus-active .drum-shell .nav-toggle-btn {
    display: none !important;
  }

  .drum-shell .site-links,
  body.mobile-focus-active .drum-shell .site-links,
  body.mobile-nav-open .drum-shell .site-links,
  body.mobile-focus-active.mobile-nav-open .drum-shell .site-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    gap: 7px 12px !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }

  .drum-shell .site-links a,
  body.mobile-focus-active .drum-shell .site-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: 3px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(242,244,247,0.72) !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    letter-spacing: .025em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .drum-shell .site-links a.active,
  body.mobile-focus-active .drum-shell .site-links a.active {
    color: #fff !important;
    background: transparent !important;
  }

  .drum-shell .site-links a.active::after,
  body.mobile-focus-active .drum-shell .site-links a.active::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--accent-2);
  }

  body.mobile-nav-open {
    overflow: auto;
  }

  .mobile-focus-toolbar,
  body.mobile-focus-active .mobile-focus-toolbar {
    top: 0 !important;
  }
}

@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  .drum-shell .site-nav,
  body.mobile-focus-active .drum-shell .site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 9px !important;
    margin: 0 0 8px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(35,40,50,0.96), rgba(24,28,35,0.98)) !important;
    box-shadow: var(--shadow), var(--inset) !important;
  }

  .drum-shell .site-links,
  body.mobile-focus-active .drum-shell .site-links,
  body.mobile-focus-active.mobile-nav-open .drum-shell .site-links {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-focus-toolbar,
  body.mobile-focus-active .mobile-focus-toolbar {
    top: 0 !important;
  }
}


/* V8.0.15 Drum Machine lower panel height alignment
   The Presets panel should read its row height from the neighboring Save / TXT / Share panel on PC. */
@media (min-width: 761px) {
  .lower-panels {
    align-items: stretch !important;
  }

  .lower-panels > .tool-panel {
    height: 100%;
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lower-panels > .tool-panel[data-mobile-source="presets"] .preset-grid {
    flex: 1 1 auto;
    align-content: start;
  }

  .lower-panels > .tool-panel[data-mobile-source="save"] {
    min-height: 100%;
  }

  .lower-panels > .tool-panel[data-mobile-source="save"] .saved-box {
    margin-top: 14px;
  }
}

@media (min-width: 1161px) {
  .lower-panels {
    grid-auto-rows: 1fr;
  }
}


/* SolAudioLab Mobile Alignment V1 - Drum Machine
   Keep the special mobile focus editor intact; only tighten shared spacing tokens. */
@media (max-width: 760px) {
  .drum-shell {
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .drum-hero,
  .machine-app,
  .topbar,
  .bar-strip,
  .lower-panels,
  .setup-grid,
  .row-toggles,
  .preset-grid,
  .save-grid {
    gap: 8px;
  }

  .setup-card,
  .editor-panel,
  .tool-panel,
  .mobile-drawer,
  .mobile-focus-toolbar,
  .mobile-transport {
    border-radius: var(--at-mobile-panel-radius, 15px);
    box-sizing: border-box;
  }
}

@media (max-width: 430px) {
  .drum-shell {
    padding-left: 7px;
    padding-right: 7px;
  }

  .drum-hero,
  .machine-app,
  .topbar,
  .bar-strip,
  .lower-panels,
  .setup-grid,
  .row-toggles,
  .preset-grid,
  .save-grid {
    gap: 7px;
  }

  .setup-card,
  .editor-panel,
  .tool-panel,
  .mobile-drawer,
  .mobile-focus-toolbar,
  .mobile-transport {
    border-radius: var(--at-mobile-panel-radius, 14px);
  }
}


/* SolAudioLab Mobile Alignment V2 - Drum Machine normal mobile frame alignment
   Focus/landscape editor modes keep their own tighter workspace. */
@media (max-width: 760px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell {
    padding-left: var(--at-mobile-frame-pad-x, 10px) !important;
    padding-right: var(--at-mobile-frame-pad-x, 10px) !important;
    gap: var(--at-mobile-gap, 10px) !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell > .site-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 430px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell {
    padding-left: var(--at-mobile-frame-pad-x, 9px) !important;
    padding-right: var(--at-mobile-frame-pad-x, 9px) !important;
    gap: var(--at-mobile-gap, 9px) !important;
  }
}


/* SolAudioLab Mobile Alignment V3 - Drum Machine mobile intro polish
   Keep the INFO text in the drawer, but do not let it appear clipped inside the top card. */
@media (max-width: 760px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .mobile-info-extra {
    display: none !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    font-size: clamp(38px, 11vw, 50px);
    line-height: .86;
    letter-spacing: -0.085em;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-focus-toolbar {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    padding: 11px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    font-size: clamp(36px, 11vw, 46px);
  }
}


/* SolAudioLab Mobile Alignment V12 - Drum Machine mobile gap balance
   Keep mobile focus/landscape editor modes intact, but make the normal mobile
   first screen match the other tools' spacing rhythm. */
@media (max-width: 760px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell {
    gap: 8px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell > .site-nav {
    margin-bottom: 0 !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    padding: 10px 12px 11px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    margin: 0 0 8px !important;
    font-size: clamp(36px, 10.5vw, 48px) !important;
    line-height: .9 !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .howto,
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) [class*="how"] {
    margin-top: 8px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-focus-toolbar {
    margin-top: 0 !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .machine-app {
    gap: 8px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .editor-panel {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .drum-shell {
    gap: 7px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    padding: 9px 10px 10px !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    margin-bottom: 7px !important;
    font-size: clamp(34px, 10.5vw, 44px) !important;
  }

  body:not(.mobile-focus-active):not(.phone-landscape-focus) .machine-app,
  body:not(.mobile-focus-active):not(.phone-landscape-focus) .mobile-focus-toolbar {
    gap: 7px !important;
  }
}


/* SolAudioLab Mobile Alignment V13 - Drum Machine compact intro hard fix
   V12 was scoped away from the real mobile state. This pass applies to normal
   portrait mobile and mobile-focus-active, while still keeping drawer content usable.
   Top intro becomes a compact title card; detailed help stays in the INFO drawer. */
@media (max-width: 760px) {
  body:not(.phone-landscape-focus) .drum-shell {
    gap: 7px !important;
    padding-left: var(--at-mobile-frame-pad-x, 10px) !important;
    padding-right: var(--at-mobile-frame-pad-x, 10px) !important;
  }

  body:not(.phone-landscape-focus) .drum-shell > .site-nav {
    margin-bottom: 0 !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    display: block !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 9px 11px 10px !important;
    margin: 0 !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) > div {
    margin: 0 !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .tagline,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-sub,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .hero-badge,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .intro-counter,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .mobile-info-extra {
    display: none !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(34px, 10.2vw, 44px) !important;
    line-height: .92 !important;
    letter-spacing: -0.085em !important;
  }

  body:not(.phone-landscape-focus) .mobile-focus-toolbar {
    margin-top: 0 !important;
    top: 0 !important;
  }

  body:not(.phone-landscape-focus) .machine-app {
    gap: 7px !important;
  }

  body:not(.phone-landscape-focus) .editor-panel {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  body:not(.phone-landscape-focus) .drum-shell {
    gap: 6px !important;
    padding-left: var(--at-mobile-frame-pad-x, 9px) !important;
    padding-right: var(--at-mobile-frame-pad-x, 9px) !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    padding: 8px 10px 9px !important;
  }

  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    font-size: clamp(32px, 10vw, 42px) !important;
  }

  body:not(.phone-landscape-focus) .mobile-focus-toolbar,
  body:not(.phone-landscape-focus) .machine-app {
    gap: 6px !important;
  }
}


/* SolAudioLab Mobile Alignment V14 - Drum Machine portrait title snap
   In portrait mobile, the title card should not stop half-clipped above the
   toolbar. Keep the compact title card fully visible. Landscape/focus editing
   keeps the title hidden/scrolled away for maximum workspace. */
@media (max-width: 760px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .drum-shell {
    min-height: auto !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-focus-toolbar {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin-top: 0 !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .editor-panel {
    min-height: calc(100vh - 250px) !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 356px) !important;
    min-height: 180px !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .editor-panel {
    min-height: calc(100vh - 242px) !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 346px) !important;
    min-height: 170px !important;
  }
}

/* Keep the intended compact workspace for phone landscape. */
@media (max-width: 1024px) and (max-height: 620px) and (orientation: landscape) {
  body.phone-landscape-focus .mobile-intro {
    display: none !important;
  }
}


/* SolAudioLab Mobile Alignment V15 - Drum Machine title compact balance
   Middle ground after V13/V14: the title must not stop half-clipped, but the
   portrait intro card should be compact enough to keep the editor close. */
@media (max-width: 760px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .drum-shell,
  body:not(.phone-landscape-focus) .drum-shell {
    gap: 6px !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content),
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    min-height: 0 !important;
    max-height: none !important;
    padding: 7px 10px 8px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    margin: 0 !important;
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: .96 !important;
    letter-spacing: -0.075em !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-focus-toolbar,
  body:not(.phone-landscape-focus) .mobile-focus-toolbar {
    margin-top: 0 !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .machine-app,
  body:not(.phone-landscape-focus) .machine-app {
    gap: 6px !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .editor-panel {
    min-height: calc(100vh - 220px) !important;
    padding-top: 7px !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 324px) !important;
    min-height: 200px !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content),
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) {
    padding: 6px 9px 7px !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title,
  body:not(.phone-landscape-focus) .mobile-intro:not(.mobile-drawer-content) .drum-title {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .editor-panel {
    min-height: calc(100vh - 212px) !important;
  }

  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 314px) !important;
    min-height: 190px !important;
  }
}

/* SolAudioLab Mobile Alignment V33 - Drum Machine mobile bar access
   Bar navigation is a frequent action, so mobile keeps Bar 1-8 and bar edit actions
   on the main editor strip instead of hiding them behind the BARS panel. */
body.mobile-focus-active .mobile-focus-toolbar {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

body.mobile-focus-active .mobile-panel-btn[data-mobile-panel="bars"],
body:not(.phone-landscape-focus) .mobile-panel-btn[data-mobile-panel="bars"] {
  display: none !important;
}

body.mobile-focus-active .mobile-editor-strip.mobile-bar-access {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  align-items: stretch !important;
  padding: 6px !important;
  margin-bottom: 7px !important;
}

.mobile-inline-bar-tabs {
  display: grid;
  grid-template-columns: repeat(var(--bar-count, 4), minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.mobile-inline-bar-tab {
  min-width: 0 !important;
  padding: 0 !important;
  min-height: 28px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

.mobile-inline-bar-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.mobile-bar-action {
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, #252b34, #11161c);
  color: var(--text);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: var(--inset);
}

.mobile-bar-action:active,
.mobile-inline-bar-tab:active {
  transform: translateY(1px);
}

.mobile-bar-action.danger {
  color: #ffd5d8;
  border-color: rgba(255,82,96,.34);
}

@media (max-width: 430px) {
  body.mobile-focus-active .mobile-editor-strip.mobile-bar-access {
    gap: 5px !important;
    padding: 5px !important;
  }

  .mobile-inline-bar-tabs,
  .mobile-inline-bar-actions {
    gap: 3px;
  }

  .mobile-inline-bar-tab,
  .mobile-bar-action {
    min-height: 27px !important;
    font-size: 9px !important;
    border-radius: 9px !important;
  }

  .mobile-bar-action:nth-child(3) {
    font-size: 8px !important;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 356px) !important;
    min-height: 170px !important;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  body.mobile-focus-active:not(.phone-landscape-focus) .track-scroll {
    height: calc(100vh - 346px) !important;
    min-height: 160px !important;
  }
}