:root {
      --bg: #ffffff;
      --panel: #ffffff;
      --ink: #202739;
      --muted: #7b8496;
      --line: #cfeeff;
      --line-strong: #6ec7f5;
      --axis: #f7fbff;
      --green: #63d072;
      --orange: #f4aa42;
      --blue: #5b62df;
      --yellow-note: #e9d074;
      --red-note: #f15d65;
      --blue-note: #5351dd;
      --green-note: #62cb76;
      --purple-note: #9861e4;
      --shadow: none;
      --cell: 101px;
      --beat-width: 101px;
      --row-height: 81px;
      --visible-cols: 16;
      --tile-radius: 8px;
      --drum-row-height: 44px;
      --axis-width: 72px;
      --topbar-height: 54px;
      --jianpu-height: 56px;
      --bottom-nav-height: 144px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
      overflow-x: hidden;
      overflow-y: hidden;
    }

    button, select, input, textarea { font: inherit; }

    .app {
      height: 100vh;
      min-height: 0;
      width: 100%;
      max-width: 100vw;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      background: #eef3f7;
      overflow-x: hidden;
    }

    .songmaker-topbar {
      height: var(--topbar-height);
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr) auto;
      align-items: center;
      padding: 0 18px;
      border-bottom: 1px solid #edf3f7;
      background: #fff;
      color: #111827;
      flex: 0 0 auto;
      order: 1;
    }
    .top-left,
    .top-right {
      display: flex;
      align-items: center;
      gap: 18px;
      color: #777;
      font-size: 16px;
      font-weight: 700;
    }
    .top-left { justify-content: flex-start; }
    .top-right { justify-content: flex-end; }
    .top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      flex-wrap: nowrap;
    }
    .top-action-btn {
      min-width: 84px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 12px;
      border: 1px solid #e3eaf2;
      border-radius: 13px;
      background: #ffffff;
      color: #334155;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }
    .top-action-btn span {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      line-height: 1;
    }
    .top-action-btn .top-action-icon {
      font-size: 17px;
    }
    .top-action-btn:hover {
      border-color: #9ed8f5;
      background: #f1f9ff;
    }
    .top-action-btn:focus-visible,
    .tool-btn:focus-visible,
    .icon-btn:focus-visible,
    .select-pill:focus-within,
    .bpm-box:focus-within {
      outline: 3px solid rgba(32, 174, 242, 0.24);
      outline-offset: 2px;
      border-color: #58c6f5;
    }
    .top-action-btn.danger:hover {
      border-color: #fecaca;
      background: #fff1f2;
      color: #e11d48;
    }
    .top-action-btn input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .song-title {
      text-align: center;
      letter-spacing: 0.18em;
      font-size: 17px;
      font-weight: 900;
    }
    .song-title-logo {
      display: block;
      height: 58px;
      width: auto;
      max-width: min(360px, 32vw);
      object-fit: contain;
      filter: drop-shadow(0 7px 10px rgba(6, 92, 128, 0.18));
      transform: translateY(1px);
      user-select: none;
      -webkit-user-drag: none;
    }
    @media (max-width: 1280px) {
      .song-title-logo {
        height: 50px;
        max-width: min(300px, 28vw);
      }
    }
    .top-icon {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #222;
      font-size: 22px;
    }

    .toolbar {
      min-height: var(--bottom-nav-height);
      max-height: 30vh;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      gap: 6px;
      row-gap: 6px;
      flex-wrap: wrap;
      padding: 8px 16px 10px;
      border: 0;
      border-top: 1px solid #edf3f7;
      border-radius: 0;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
      flex: 0 0 auto;
      order: 3;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .toolbar > * { flex: 0 0 auto; }
    .toolbar-row {
      width: min(100%, 1540px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      row-gap: 6px;
      flex-wrap: wrap;
    }
    .toolbar-group {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 54px;
      padding: 5px 8px;
      border: 1px solid #e4edf5;
      border-radius: 16px;
      background: rgba(248, 251, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .transport-group {
      flex: 0 0 auto;
      min-height: 62px;
      padding: 0 8px;
      border-color: #cdeefe;
      background: rgba(239, 249, 255, 0.92);
    }
    .sound-group {
      flex: 1 1 550px;
      min-width: min(550px, 100%);
      border-color: #cdeefe;
      background: rgba(239, 249, 255, 0.92);
    }
    .edit-group {
      flex: 0 1 auto;
      border-color: #e3e9f1;
      background: rgba(255, 255, 255, 0.94);
    }
    .utility-group {
      flex: 0 1 auto;
      border-color: #ecedf3;
      background: rgba(250, 251, 255, 0.9);
      opacity: 0.92;
    }

    .jianpu-panel {
      height: var(--jianpu-height);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 18px;
      border-bottom: 1px solid #edf3f7;
      background: #fbfdff;
      flex: 0 0 auto;
      order: 2;
      overflow-x: hidden;
      overflow-y: visible;
    }
    .jianpu-label {
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
    }
    .jianpu-input {
      flex: 1 1 360px;
      min-width: 240px;
      max-width: 620px;
      height: 40px;
      padding: 8px 14px;
      border: 1px solid #dbe8f2;
      border-radius: 14px;
      outline: 0;
      resize: none;
      color: var(--ink);
      background: #fff;
      font-size: 15px;
      font-weight: 700;
      line-height: 22px;
    }
    .jianpu-input:focus {
      border-color: #20aef2;
      box-shadow: 0 0 0 3px rgba(32, 174, 242, 0.12);
    }
    .jianpu-help {
      flex: 1 1 220px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow-x: hidden;
      overflow-y: visible;
      text-overflow: ellipsis;
    }
    .page-controls {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      white-space: nowrap;
    }
    .page-label {
      min-width: 158px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid #dbe8f2;
      border-radius: 999px;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 2px 8px rgba(32, 174, 242, 0.08);
    }
    .page-btn {
      height: 38px;
      min-width: 72px;
      padding: 0 12px;
      font-size: 13px;
    }
    .page-btn.add {
      border-color: #19a8f4;
      background: #19a8f4;
      color: #fff;
    }
    .page-btn.delete {
      border-color: #fecaca;
      background: #fff7f7;
      color: #dc2626;
    }
    .page-btn.delete:hover {
      border-color: #fb7185;
      background: #fff1f2;
      color: #be123c;
    }
    .page-btn:disabled {
      opacity: 0.45;
      cursor: default;
      transform: none;
    }
    .tool-btn.generate {
      background: #19a8f4;
      border-color: #19a8f4;
      color: #fff;
    }
    .tool-btn.generate:hover { background: #0f96dc; }

    .tool-btn, .select-pill, .bpm-box, .icon-btn {
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #e7edf3;
      border-radius: 999px;
      background: #ffffff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: none;
    }

    .tool-btn {
      min-width: 94px;
      padding: 0 15px;
      cursor: pointer;
      transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    }

    .tool-btn:hover, .icon-btn:hover {
      transform: translateY(-1px);
      border-color: #b9c2cf;
      background: #ffffff;
    }

    .tool-btn.play {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      padding: 0;
      background: #19a8f4;
      color: #fff;
      border-color: #19a8f4;
      font-size: 0;
      position: relative;
    }
    .tool-btn.play::before {
      content: "▶";
      font-size: 26px;
      line-height: 1;
      margin-left: 5px;
    }
    .tool-btn.play.playing {
      background: #ff6b6b;
      border-color: #ff6b6b;
    }
    .tool-btn.play.playing::before {
      content: "■";
      margin-left: 0;
      font-size: 24px;
    }

    .tool-btn.export {
      border-color: #f1bf66;
      background: var(--orange);
      color: #fff;
    }
    .tool-btn.export:hover { background: #e0a830; }

    .tool-btn.share {
      border-color: #51c96a;
      background: var(--green);
      color: #fff;
    }
    .tool-btn.share:hover { background: #52b862; }
    .tool-btn.ai-accompany {
      border-color: #19a8f4;
      background: #19a8f4;
      color: #fff;
      min-width: 150px;
      font-size: 15px;
      font-weight: 900;
    }
    .tool-btn.ai-accompany:hover { background: #0f96dc; }
    .tool-btn.muted {
      background: #64748b;
      border-color: #64748b;
      color: #fff;
    }

    .tool-btn.group { background: #fff; }
    .tool-btn.group.active {
      background: #202739;
      color: #fff;
    }
    .tool-btn.group.selected-mode {
      background: #ff6b6b;
      color: #fff;
      border-color: #ff6b6b;
    }
    .tool-btn.danger-action {
      border-color: #fecaca;
      color: #dc2626;
      background: #fff7f7;
    }

    .icon-btn {
      width: 44px;
      padding: 0;
      color: #8d96a8;
      cursor: pointer;
      font-size: 18px;
    }
    .icon-btn:disabled { opacity: 0.42; cursor: default; }

    .select-pill {
      min-width: 0;
      max-width: 100%;
      padding: 0 13px;
    }
    .select-pill select {
      min-width: 0;
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
      font-size: 14px;
      text-overflow: ellipsis;
    }
    .sound-group .select-pill:first-child { flex: 1 1 220px; max-width: 260px; }
    .sound-group .select-pill:nth-child(2) { flex: 0 1 170px; max-width: 190px; }
    .utility-group .select-pill { flex: 0 1 150px; max-width: 170px; }

    .bpm-box {
      gap: 8px;
      min-width: 268px;
      padding: 0 13px;
    }
    .bpm-box label { color: var(--muted); font-size: 13px; font-weight: 800; }
    .bpm-box input {
      width: 58px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-weight: 900;
      text-align: center;
      font-size: 15px;
    }
    .bpm-box .bpm-slider {
      width: 120px;
      height: 28px;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      cursor: pointer;
      touch-action: pan-y;
    }
    .bpm-slider::-webkit-slider-runnable-track {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, #9bd8ff, #ffd8a8);
      box-shadow: inset 0 1px 2px rgba(59, 130, 246, 0.16);
    }
    .bpm-slider::-webkit-slider-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 3px solid #fff;
      background: #36a9f4;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
      -webkit-appearance: none;
      margin-top: -8px;
    }
    .bpm-slider::-moz-range-track {
      height: 8px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #9bd8ff, #ffd8a8);
    }
    .bpm-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 3px solid #fff;
      background: #36a9f4;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
    }
    .zoom-box {
      gap: 6px;
      padding: 0 10px;
      background: #eef8ff;
      border-color: #bfe7fb;
    }
    .zoom-box label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .zoom-box input {
      width: 86px;
      accent-color: var(--blue);
    }
    .zoom-box span {
      min-width: 42px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      text-align: right;
    }
    .jianpu-panel .zoom-box {
      height: 42px;
      margin-right: 4px;
      box-shadow: 0 2px 8px rgba(32, 174, 242, 0.08);
    }

    .spacer {
      width: 1px;
      height: 30px;
      background: var(--line);
      margin: 0 2px;
    }

    .workspace {
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 0;
      border: 0;
      border-radius: 0;
      background: #eef3f7;
      box-shadow: var(--shadow);
      overflow: hidden;
      flex: 0 0 auto;
      order: 2;
      height: calc(100vh - var(--topbar-height) - var(--jianpu-height) - var(--bottom-nav-height));
      padding: 12px 0 12px;
    }

    .score-scroll {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: visible;
      background: transparent;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .workspace > .score-scroll {
      overflow-y: auto;
      align-items: flex-start;
    }

    .score {
      width: calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      max-width: 100%;
      display: grid;
      grid-template-columns: var(--axis-width) calc(var(--visible-cols) * var(--beat-width));
      padding: 0 0 0 0;
      position: relative;
      background: #ffffff;
      border: 1px solid #dbe4ec;
      border-bottom: 0;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .measure-ruler {
      grid-column: 2;
      display: grid;
      grid-template-columns: repeat(4, calc(var(--beat-width) * 4));
      height: 28px;
      color: #9aa9b7;
      font-size: 13px;
      font-weight: 800;
      text-align: left;
    }
    .measure-ruler span {
      padding-left: 6px;
      border-left: 2px solid #78c9f6;
    }

    .pitch-axis {
      display: grid;
      grid-template-rows: repeat(21, var(--row-height));
      border: 0;
      border-right: 0;
      border-radius: 0;
      overflow: hidden;
      background: #f8fbfd;
    }

    .axis-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #d8effc;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }
    .axis-cell strong {
      margin-right: 4px;
      color: var(--ink);
      font-size: 18px;
    }
    .axis-cell:last-child { border-bottom: 0; }

    .grid-wrap { position: relative; }

    .grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(var(--visible-cols), var(--beat-width));
      grid-template-rows: repeat(21, var(--row-height));
      border: 0;
      border-radius: 0;
      overflow: hidden;
      background: #fff;
    }

    .cell {
      position: relative;
      width: auto;
      height: auto;
      margin: 6px 2px;
      border: 1px solid #d7e0e8;
      border-radius: 8px;
      background-color: #ffffff;
      transition: background 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
      cursor: pointer;
      user-select: none;
    }
    .cell:hover {
      background-color: #f3fbff;
      box-shadow: inset 0 0 0 2px #20aef2;
      z-index: 2;
    }
    .cell.measure-alt,
    .drum-cell.measure-alt {
      background-color: #f6f6f6;
    }
    .cell.measure-start {
      border-left-color: #7fb4d5;
      box-shadow: inset 2px 0 0 #7fb4d5;
    }
    .cell.playing-col {
      background-color: #e8f4ff !important;
    }

    .playback-cursor {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #ff6b6b, #ff8e8e);
      z-index: 20;
      pointer-events: none;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
      transition: left 0.08s linear;
      display: none;
    }
    .playback-cursor.active { display: block; }

    .note.playing {
      animation: notePulse 0.3s ease;
      box-shadow: 0 0 12px rgba(255, 107, 107, 0.6), 0 3px 8px rgba(28,35,52,0.18) !important;
      border-color: #ff6b6b !important;
      z-index: 15;
    }
    @keyframes notePulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    .selection-box {
      position: absolute;
      border: 2px dashed #5b62df;
      background: rgba(91, 98, 223, 0.12);
      z-index: 30;
      pointer-events: none;
      border-radius: 4px;
      display: none;
    }
    .selection-box.active { display: block; }

    .note {
      position: absolute;
      height: var(--row-height);
      min-width: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(32, 39, 57, 0.14);
      border-radius: 6px;
      color: #0b1220;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 1px 2px rgba(28, 35, 52, 0.12);
      box-sizing: border-box;
      z-index: 5;
      cursor: pointer;
      transition: transform 0.1s ease;
    }
    .note:hover { transform: translateY(-1px); z-index: 10; }
    .note.yellow { background: #ff9f0a; }
    .note.red { background: #ff4056; color: #101010; }
    .note.blue { background: #3b82f6; color: #ffffff; }
    .note.green { background: #32d46a; }
    .note.purple { background: #9b5de5; color: #ffffff; }
    .note .side-mark {
      position: absolute;
      left: -3px;
      top: 4px;
      bottom: 4px;
      width: 3px;
      border-radius: 999px;
      background: #0b9cff;
    }

    .note .note-num {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .note .note-dot {
      position: absolute;
      left: 50%;
      width: 4px;
      height: 4px;
      margin-left: -2px;
      border-radius: 50%;
      background: var(--drum-hit-ink, #ffffff);
      opacity: 0.9;
    }
    .note .note-dot.high {
      top: -7px;
    }
    .note .note-dot.low {
      bottom: -7px;
    }

    /* 音符拖拽手柄 */
    .note .resize-handle {
      position: absolute;
      right: -4px;
      top: 4px;
      bottom: 4px;
      width: 10px;
      cursor: col-resize;
      border-radius: 3px;
      background: rgba(255,255,255,0.6);
      border: 1px solid rgba(0,0,0,0.15);
      z-index: 20;
    }
    .note .resize-handle::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 20%;
      bottom: 20%;
      width: 2px;
      border-radius: 1px;
      background: rgba(0,0,0,0.3);
    }
    .note .resize-handle:hover {
      background: rgba(255,255,255,0.9);
      border-color: rgba(0,0,0,0.4);
    }

    .rhythm-popup {
      position: fixed;
      z-index: 2000;
      display: none;
      width: 188px;
      padding: 8px;
      border: 1px solid #d6e0ea;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    }
    .rhythm-popup.active { display: block; }
    .rhythm-popup-title {
      margin: 0 0 6px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }
    .rhythm-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .rhythm-option {
      height: 34px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #0f172a;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }
    .rhythm-option:hover,
    .rhythm-option.active {
      border-color: #0b9cff;
      background: #e6f6ff;
      color: #0077c8;
    }
    .rhythm-delete {
      width: 100%;
      height: 34px;
      margin-top: 7px;
      border: 1px solid #fecaca;
      border-radius: 8px;
      background: #fff1f2;
      color: #e11d48;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }
    .rhythm-delete:hover {
      background: #ffe4e6;
      border-color: #fb7185;
    }
    .selection-action-popup {
      position: fixed;
      z-index: 2100;
      display: none;
      width: 150px;
      padding: 8px;
      border: 1px solid #d6e0ea;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
    }
    .selection-action-popup.active { display: block; }
    .selection-action-title {
      margin: 0 0 7px;
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }
    .selection-action-delete {
      width: 100%;
      height: 38px;
      border: 1px solid #fecaca;
      border-radius: 9px;
      background: #fff1f2;
      color: #e11d48;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }
    .selection-action-delete:hover {
      background: #ffe4e6;
      border-color: #fb7185;
    }

    .drum-section {
      padding: 8px 0 0;
      border-top: 0;
      background-color: transparent;
      flex: 0 0 auto;
    }
    .drum-section .score-scroll {
      overflow-y: hidden;
    }
    .grid.show-eighth .cell,
    .drum-grid.show-eighth .drum-cell {
      background-image:
        linear-gradient(to right, transparent calc(50% - 1px), rgba(91, 98, 223, 0.24) calc(50% - 1px), rgba(91, 98, 223, 0.24) calc(50% + 1px), transparent calc(50% + 1px));
    }
    .grid.show-sixteenth .cell,
    .drum-grid.show-sixteenth .drum-cell {
      background-image:
        linear-gradient(to right, transparent calc(25% - 1px), rgba(91, 98, 223, 0.16) calc(25% - 1px), rgba(91, 98, 223, 0.16) calc(25% + 1px), transparent calc(25% + 1px)),
        linear-gradient(to right, transparent calc(50% - 1px), rgba(91, 98, 223, 0.28) calc(50% - 1px), rgba(91, 98, 223, 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to right, transparent calc(75% - 1px), rgba(91, 98, 223, 0.16) calc(75% - 1px), rgba(91, 98, 223, 0.16) calc(75% + 1px), transparent calc(75% + 1px));
    }
    .drum-title {
      display: none;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 900;
    }
    .drum-grid-wrap {
      display: grid;
      grid-template-columns: var(--axis-width) calc(var(--visible-cols) * var(--beat-width));
      width: calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      max-width: 100%;
      background: #ffffff;
      border: 1px solid #dbe4ec;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
      overflow: hidden;
    }
    .drum-axis {
      display: grid;
      grid-template-rows: repeat(3, var(--drum-row-height));
      border: 0;
      border-right: 0;
      border-radius: 0;
      overflow: hidden;
      background: #f8fbfd;
    }
    .drum-axis div {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #d8effc;
      color: var(--muted);
      font-size: 14px;
      font-weight: 900;
    }
    .drum-axis div:last-child { border-bottom: 0; }

    .drum-grid {
      display: grid;
      grid-template-columns: repeat(var(--visible-cols), var(--beat-width));
      grid-template-rows: repeat(3, var(--drum-row-height));
      border: 0;
      border-radius: 0;
      overflow: hidden;
      background: #fff;
    }
    .drum-cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 3px 2px;
      border: 1px solid #d7e0e8;
      border-radius: 8px;
      color: #b7c0cc;
      font-size: 16px;
      background-color: #fff;
      cursor: pointer;
      transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    }

    .drum-hit-marker {
      position: absolute;
      top: 50%;
      left: var(--hit-position);
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255, 255, 255, 0.82);
      border-radius: 50%;
      background: var(--drum-hit-color, #42bce9);
      color: var(--drum-hit-ink, #ffffff);
      font-size: 11px;
      line-height: 1;
      pointer-events: none;
      box-shadow: 0 2px 5px rgba(40, 94, 122, 0.16);
    }

    @media (max-width: 620px) {
      .drum-hit-marker {
        width: 17px;
        height: 17px;
        font-size: 9px;
      }
    }
    .drum-cell:hover {
      background-color: #f3f8ff;
      color: #8aa8d6;
      box-shadow: inset 0 0 0 2px rgba(32, 174, 242, 0.22);
    }
    .drum-cell.measure-start {
      border-left-color: #7fb4d5;
      box-shadow: inset 2px 0 0 #7fb4d5;
    }
    .drum-cell.on.kick { background-color: #e6f0ff; color: var(--blue-note); }
    .drum-cell.on.snare { background-color: #fff1d9; color: var(--orange); }
    .drum-cell.on.hat { background-color: #eef8ef; color: var(--green); }
    .drum-cell.on.stomp { background-color: #e8f0ff; color: #4f46e5; }
    .drum-cell.on.clap { background-color: #fff1d9; color: #d97706; }
    .drum-cell.on.pat { background-color: #e8f8ee; color: #22a06b; }
    .drum-cell.on.shaker { background-color: #fff7d6; color: #b7791f; }
    .drum-cell.on.woodblock { background-color: #f4ecff; color: #7c3aed; }
    .drum-cell.on.triangle { background-color: #e6fbff; color: #0891b2; }
    .drum-cell.on.djembe-low { background-color: #ffe8d8; color: #c2410c; }
    .drum-cell.on.djembe-slap { background-color: #fde2e8; color: #be123c; }
    .drum-cell.on.djembe-tone { background-color: #ede9fe; color: #6d28d9; }
    .drum-cell.playing-col { background-color: #e8f4ff !important; }

    .status-tip {
      position: absolute;
      right: 18px;
      top: -36px;
      width: min(420px, calc(100vw - 36px));
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 14px;
      border: 1px solid #f3d9b6;
      border-radius: 999px;
      background: #fff9ed;
      color: #d08335;
      font-size: 13px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(32, 39, 57, 0.45);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modal-overlay.active { display: flex; }
    .modal-box {
      background: #fff;
      border-radius: 18px;
      padding: 28px 32px;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(35, 45, 64, 0.2);
    }
    .modal-box h3 { margin: 0 0 12px; font-size: 20px; }
    .modal-box p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
    .modal-box button {
      padding: 10px 24px;
      border: 0;
      border-radius: 999px;
      background: var(--blue);
      color: #fff;
      font-weight: 800;
      cursor: pointer;
    }
    .accompany-modal-box {
      max-width: 640px;
    }
    .accompany-hint {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
      font-weight: 700;
    }
    .accompany-options {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .accompany-option {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #dbe8f2;
      border-radius: 14px;
      background: #f8fbff;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }
    .accompany-option:hover {
      border-color: #19a8f4;
      background: #eef8ff;
    }
    .accompany-option strong {
      display: block;
      margin-bottom: 4px;
      color: #0f172a;
      font-size: 16px;
    }
    .accompany-option span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }
    .accompany-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .accompany-actions button {
      background: #e8eef5;
      color: #334155;
    }
    .key-analysis-section {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 16px;
    }
    .key-analysis-label {
      font-size: 13px;
      font-weight: 800;
      color: #0369a1;
      margin-bottom: 6px;
    }
    .key-analysis-result {
      font-size: 15px;
      font-weight: 700;
      color: #0c4a6e;
      margin-bottom: 10px;
    }
    .key-mode-selector {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .key-mode-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      margin-right: 4px;
    }
    .key-mode-btn {
      padding: 5px 12px;
      border: 1px solid #7dd3fc;
      border-radius: 20px;
      background: #fff;
      color: #0369a1;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
    }
    .key-mode-btn:hover {
      background: #e0f2fe;
    }
    .key-mode-btn.active {
      background: #0ea5e9;
      border-color: #0ea5e9;
      color: #fff;
    }
    .grid,
    .cell,
    .note,
    .resize-handle,
    .selection-box,
    .drum-cell {
      touch-action: none;
    }

    .score-scroll,
    .toolbar,
    .jianpu-panel {
      touch-action: pan-x pan-y;
    }

    @media (max-width: 1000px) {
      :root {
        --bottom-nav-height: 390px;
      }
      body {
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .app {
        width: 100vw;
        min-width: 0;
        height: 100svh;
        min-height: 0;
      }
      .songmaker-topbar {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        padding: 0 12px;
      }
      .top-left,
      .top-right {
        gap: 10px;
        font-size: 13px;
      }
      .song-title {
        font-size: 15px;
        letter-spacing: 0.12em;
      }
      .jianpu-panel {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
      }
      .jianpu-input {
        min-width: 260px;
      }
      .workspace {
        height: calc(100svh - var(--topbar-height) - var(--jianpu-height) - var(--bottom-nav-height));
        padding-bottom: 0;
      }
      .toolbar {
        min-height: var(--bottom-nav-height);
        max-height: 48vh;
        padding: 10px 12px;
      }
      .toolbar-row {
        justify-content: flex-start;
      }
      .toolbar-group {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
      }
      .top-actions {
        gap: 4px;
        flex-wrap: wrap;
        max-width: 260px;
      }
      .top-action-btn {
        min-width: 68px;
        height: 34px;
        padding: 0 8px;
      }
      .top-action-btn span {
        font-size: 12px;
      }
      .top-action-btn .top-action-icon {
        font-size: 15px;
      }
      .score,
      .drum-grid-wrap {
        width: calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
        max-width: 100%;
      }
      .modal-box {
        width: min(92vw, 520px);
      }
    }

    /* 原版白底增强：保留原来的白色/浅蓝风格，只增加轻微立体质感。 */
    body {
      background:
        radial-gradient(circle at 18% 0%, rgba(32, 174, 242, 0.07), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
    }

    .app {
      background: linear-gradient(180deg, #f7fbff 0%, #eef3f7 100%);
    }

    .songmaker-topbar,
    .jianpu-panel {
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    }

    .top-action-btn,
    .tool-btn,
    .select-pill,
    .bpm-box,
    .icon-btn {
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 23, 42, 0.07);
    }

    .top-action-btn:hover,
    .tool-btn:hover,
    .icon-btn:hover {
      border-color: #9ed8f5;
      background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 6px 16px rgba(32, 174, 242, 0.13);
    }

    .tool-btn.play,
    .tool-btn.generate,
    .tool-btn.ai-accompany {
      background: linear-gradient(180deg, #35c6ff 0%, #19a8f4 62%, #0e86c8 100%);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -4px 0 rgba(7, 91, 143, 0.18), 0 8px 20px rgba(25, 168, 244, 0.24);
    }

    .tool-btn.play.playing {
      background: linear-gradient(180deg, #ff8a8a 0%, #ff6b6b 62%, #e24d57 100%);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.36), 0 8px 20px rgba(255, 107, 107, 0.24);
    }

    .jianpu-input,
    .score,
    .drum-grid-wrap,
    .modal-box,
    .rhythm-popup,
    .selection-action-popup {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 28px rgba(15, 23, 42, 0.08);
    }

    .cell,
    .drum-cell {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(15, 23, 42, 0.035);
    }

    .cell:hover,
    .drum-cell:hover {
      box-shadow: inset 0 0 0 2px rgba(32, 174, 242, 0.42), 0 3px 10px rgba(32, 174, 242, 0.12);
    }

    .note {
      border-color: rgba(32, 39, 57, 0.10);
      border-radius: 10px;
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), inset 0 -4px 0 rgba(15, 23, 42, 0.10), 0 6px 14px rgba(15, 23, 42, 0.16);
      text-shadow: 0 1px 0 rgba(15, 23, 42, 0.16);
    }

    .note:hover {
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -4px 0 rgba(15, 23, 42, 0.10), 0 8px 18px rgba(15, 23, 42, 0.18);
    }

    .note.yellow {
      background: linear-gradient(180deg, #ffba37 0%, #ff9f0a 62%, #e07d00 100%);
    }

    .note.blue {
      background: linear-gradient(180deg, #58a5ff 0%, #3b82f6 62%, #2563d8 100%);
    }

    .note.green {
      background: linear-gradient(180deg, #5eea88 0%, #32d46a 62%, #21a954 100%);
    }

    .note.red {
      background: linear-gradient(180deg, #ff6f7d 0%, #ff4056 62%, #dd2f45 100%);
    }

    .note.purple {
      background: linear-gradient(180deg, #b07aff 0%, #9b5de5 62%, #7c3ac7 100%);
    }

    .drum-cell.on.kick,
    .drum-cell.on.snare,
    .drum-cell.on.hat,
    .drum-cell.on.stomp,
    .drum-cell.on.clap,
    .drum-cell.on.pat,
    .drum-cell.on.shaker,
    .drum-cell.on.woodblock,
    .drum-cell.on.triangle,
    .drum-cell.on.djembe-low,
    .drum-cell.on.djembe-slap,
    .drum-cell.on.djembe-tone {
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.68), inset 0 -3px 0 rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.08);
    }

    .toolbar {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
    }

    /* 教学色板：中高音按 1-7 同音同色；低音/AI 伴奏统一绿色支撑色。 */
    .note.do {
      background: linear-gradient(180deg, #ff7f8f 0%, #f04f64 62%, #d63d52 100%);
      color: #ffffff;
    }

    .note.re {
      background: linear-gradient(180deg, #ffb45f 0%, #ff8f2f 62%, #df6f17 100%);
      color: #ffffff;
    }

    .note.mi {
      background: linear-gradient(180deg, #ffd95b 0%, #f5bd22 62%, #d99b00 100%);
      color: #273142;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .note.fa {
      background: linear-gradient(180deg, #60dfc9 0%, #20bda7 62%, #139882 100%);
      color: #ffffff;
    }

    .note.sol {
      background: linear-gradient(180deg, #58a5ff 0%, #3b82f6 62%, #2563d8 100%);
      color: #ffffff;
    }

    .note.la {
      background: linear-gradient(180deg, #9a8cff 0%, #7867e8 62%, #5a45c8 100%);
      color: #ffffff;
    }

    .note.si {
      background: linear-gradient(180deg, #ff91cf 0%, #e95cac 62%, #c83d8d 100%);
      color: #ffffff;
    }

    .note.support {
      background: linear-gradient(180deg, #65e08a 0%, #32c869 62%, #229c50 100%);
      color: #ffffff;
    }

    /* 最终视觉覆盖层：让第一步布局和第二步马卡龙风格一起生效。 */
    :root {
      --sidebar-width: 306px;
      --topbar-height: 76px;
      --bottom-nav-height: 104px;
    }

    .songmaker-topbar {
      height: var(--topbar-height);
      grid-template-columns: 278px minmax(0, 1fr) auto;
      background: rgba(255, 255, 255, 0.88);
      border-bottom: 1px solid rgba(205, 226, 237, 0.74);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 26px rgba(30, 74, 108, 0.075);
    }

    .song-title {
      font-size: 24px;
      font-weight: 950;
      color: #24384d;
      letter-spacing: 0.075em;
    }

    .top-center .page-btn,
    .top-center .page-label,
    .songmaker-topbar .top-action-btn {
      height: 46px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 950;
    }

    .top-center .page-controls {
      gap: 10px;
    }

    .top-center .page-label {
      min-width: 162px;
      color: #324558;
    }

    .top-center .page-btn.add,
    .side-panel .ai-accompany {
      border-color: rgba(20, 166, 226, 0.86);
      background: linear-gradient(180deg, #4fd2ff 0%, #21b9f2 58%, #1097d7 100%);
      color: #fff;
      text-shadow: 0 1px 0 rgba(18, 91, 136, 0.25);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -4px 0 rgba(5, 102, 151, 0.13), 0 12px 24px rgba(33, 185, 242, 0.30);
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      background: linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 300px, transparent 560px);
    }

    .side-panel {
      padding: 26px 18px 22px 20px;
      background:
        radial-gradient(circle at 9% 8%, rgba(116, 211, 249, 0.34), transparent 32%),
        radial-gradient(circle at 35% 92%, rgba(182, 230, 252, 0.36), transparent 38%),
        linear-gradient(180deg, #dff5ff 0%, #f6fcff 68%, #ffffff 100%);
      border-right: 1px solid rgba(195, 223, 237, 0.9);
      box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72), 10px 0 34px rgba(42, 97, 128, 0.08);
    }

    .side-panel-heading {
      margin-bottom: 16px;
      color: #2c4056;
      font-size: 21px;
      font-weight: 950;
    }

    .side-panel .toolbar-group {
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(216, 235, 245, 0.92);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 30px rgba(39, 78, 103, 0.10);
    }

    .side-panel .select-pill,
    .side-panel .tool-btn,
    .side-panel .zoom-box {
      height: 58px;
      min-height: 58px;
      border-radius: 999px;
      border-color: rgba(218, 232, 241, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.96) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -2px 0 rgba(40, 92, 120, 0.035), 0 9px 19px rgba(38, 78, 105, 0.09);
    }

    .side-select {
      display: grid;
      grid-template-columns: 44px minmax(62px, auto) minmax(0, 1fr);
      gap: 10px;
      justify-content: stretch;
      padding: 0 14px 0 10px;
    }

    .side-control-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: linear-gradient(180deg, #effaff 0%, #d8f2ff 100%);
      color: #329ed3;
      font-size: 20px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 9px rgba(50, 158, 211, 0.16);
    }

    .side-control-title {
      color: #293a4e;
      font-size: 17px;
      font-weight: 950;
      white-space: nowrap;
    }

    .side-select select {
      color: #425369;
      font-size: 16px;
      font-weight: 900;
      text-align: right;
      text-align-last: right;
    }

    .side-zoom {
      display: grid;
      grid-template-columns: 44px 44px minmax(0, 1fr) 50px;
      gap: 8px;
      align-items: center;
      padding: 0 14px 0 10px;
    }

    .side-zoom label,
    .side-zoom span {
      color: #293a4e;
      font-size: 15px;
      font-weight: 950;
    }

    .main-stage {
      grid-template-rows: minmax(0, 1fr) var(--bottom-nav-height);
      background: radial-gradient(circle at 76% 10%, rgba(205, 239, 255, 0.22), transparent 30%), linear-gradient(180deg, #f8fcff 0%, #eef8fd 100%);
    }

    .main-stage .workspace {
      padding: 16px 18px 8px;
    }

    .score,
    .drum-grid-wrap {
      border-color: rgba(203, 224, 235, 0.92);
      background: rgba(255, 255, 255, 0.76);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 16px 36px rgba(35, 77, 101, 0.10);
    }

    .measure-ruler {
      height: 32px;
      background: linear-gradient(180deg, rgba(229, 247, 255, 0.82), rgba(244, 251, 255, 0.9));
      color: #5c7084;
      font-size: 15px;
      font-weight: 950;
    }

    .axis-cell,
    .drum-axis div {
      background: rgba(241, 249, 253, 0.68);
      color: #536779;
      font-size: 15px;
      font-weight: 950;
    }

    .cell,
    .drum-cell {
      border-color: rgba(196, 216, 228, 0.96);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 248, 252, 0.92) 100%);
    }

    .main-stage .toolbar {
      min-height: var(--bottom-nav-height);
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(16px);
      border-top-color: rgba(207, 227, 239, 0.86);
      box-shadow: 0 -12px 28px rgba(36, 78, 103, 0.08);
    }

    .main-stage .toolbar-group,
    .main-stage .bpm-box,
    .main-stage .tool-btn,
    .main-stage .icon-btn {
      font-size: 16px;
      font-weight: 950;
    }

    .main-stage .tool-btn.play {
      width: 68px;
      height: 68px;
    }

    @media (max-width: 1100px) {
      :root {
        --sidebar-width: 246px;
        --bottom-nav-height: 128px;
      }

      .songmaker-topbar {
        grid-template-columns: 210px minmax(0, 1fr) auto;
      }

      .song-title {
        font-size: 19px;
      }
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 176px;
      }

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

    /* Absolute last top-bar sizing fix for 1280px classroom displays. */
    .songmaker-topbar {
      grid-template-columns: 278px minmax(0, 1fr) auto;
    }

    .top-center .page-btn {
      min-width: 52px;
      padding-left: 7px;
      padding-right: 7px;
      font-size: 13px;
    }

    .top-center .page-btn.add {
      min-width: 82px;
    }

    .top-center .page-btn.delete {
      min-width: 58px;
    }

    .top-center .page-label {
      min-width: 128px;
      padding-left: 8px;
      padding-right: 8px;
      font-size: 13px;
    }

    /* Final display lock: requested sidebar width and 4-measure middle-register view. */
    @media (min-width: 761px) {
      :root {
        --sidebar-width: 300px;
        --jianpu-height: 0px;
      }

      .songmaker-topbar {
        grid-template-columns: minmax(390px, 1fr) auto minmax(390px, 1fr);
      }

      .main-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background: linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 300px, transparent 520px);
      }

      .side-panel {
        width: var(--sidebar-width);
        padding-left: 18px;
        padding-right: 16px;
      }

      .side-panel .toolbar-group {
        padding-left: 12px;
        padding-right: 12px;
      }

      .side-control {
        grid-template-columns: 40px minmax(60px, auto) minmax(0, 1fr);
        gap: 8px;
      }

      .main-stage .workspace {
        padding-left: 14px;
        padding-right: 14px;
      }

      .workspace > .score-scroll {
        justify-content: flex-start;
      }

      .score,
      .drum-grid-wrap {
        max-width: none;
      }

      .workspace .score-scroll,
      .drum-section .score-scroll {
        justify-content: flex-start;
        align-items: flex-start;
      }

      .score,
      .drum-grid-wrap {
        width: calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
        min-width: calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
        flex: 0 0 calc(var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      }

      .score,
      .drum-grid-wrap {
        grid-template-columns: var(--axis-width) calc(var(--visible-cols) * var(--beat-width));
      }

      .grid,
      .drum-grid {
        grid-template-columns: repeat(var(--visible-cols), var(--beat-width));
      }
    }

    @media (max-width: 760px) {
      .main-layout {
        grid-template-columns: 1fr;
      }

      .side-panel {
        width: auto;
      }
    }

    /* Absolute final Xiaoyin override: must stay at file end to beat legacy duplicates. */
    .xiaoyin-assistant::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }

    .xiaoyin-bubble {
      width: 260px !important;
      min-height: 104px !important;
      gap: 16px !important;
      padding: 20px 23px 19px 25px !important;
    }

    .xiaoyin-bubble strong {
      font-size: 23px !important;
      line-height: 1.2 !important;
    }

    .xiaoyin-bubble span {
      min-height: 32px !important;
      padding: 8px 15px !important;
      border: 1px solid rgba(5, 89, 122, 0.58) !important;
      background: linear-gradient(180deg, #0b8fbd 0%, #006c92 100%) !important;
      color: #ffffff !important;
      font-size: 17px !important;
      font-weight: 950 !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      text-shadow: 0 1px 1px rgba(0, 47, 70, 0.38) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 15px rgba(0, 108, 146, 0.22) !important;
    }

    @media (min-width: 761px) {
      .xiaoyin-assistant {
        width: 388px !important;
        min-height: 246px !important;
      }

      .xiaoyin-bubble {
        left: 128px !important;
        bottom: 164px !important;
        width: 260px !important;
      }
    }

    /* Modern final lock: keep the visual refresh after legacy final overrides. */
    :root {
      --bg: #f3f6fa;
      --panel: #ffffff;
      --ink: #172033;
      --muted: #687487;
      --line: #dce5ee;
      --line-strong: #9fb2c6;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --brand: #2563eb;
      --brand-hover: #1d4ed8;
      --brand-soft: #e8f0ff;
      --danger: #dc2626;
      --danger-soft: #fff1f2;
      --focus-ring: rgba(37, 99, 235, 0.22);
      --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.06);
      --topbar-height: 72px;
      --bottom-nav-height: 112px;
      --sidebar-width: 344px;
      --pitch-band-active: #2563eb;
      --pitch-band-active-soft: rgba(37, 99, 235, 0.08);
      --pitch-band-divider: rgba(37, 99, 235, 0.24);
    }

    .app {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
    }

    .songmaker-topbar,
    .main-stage .toolbar {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: var(--line) !important;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
      background: transparent !important;
    }

    .side-panel {
      width: var(--sidebar-width) !important;
      padding: 20px 16px 190px !important;
      background: #f8fafc !important;
      border-right: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .side-panel .toolbar-group,
    .main-stage .toolbar-group,
    .page-controls,
    .drum-duration-controls {
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: none !important;
    }

    .tool-btn,
    .select-pill,
    .bpm-box,
    .icon-btn,
    .drum-duration-btn,
    .key-mode-btn {
      border-radius: 10px !important;
      border-color: var(--line) !important;
      background: #ffffff !important;
      color: var(--ink) !important;
      box-shadow: none !important;
      text-shadow: none !important;
      font-weight: 700 !important;
    }

    .page-btn.add,
    .tool-btn.ai-accompany,
    .tool-btn.play,
    .drum-duration-btn.active,
    .key-mode-btn.active {
      border-color: var(--brand) !important;
      background: var(--brand) !important;
      color: #ffffff !important;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
    }

    .page-btn.delete,
    .tool-btn.danger-action,
    .clear-work-btn,
    .rhythm-delete,
    .selection-action-delete,
    #deleteAccompanyBtn {
      border-color: #fecdd3 !important;
      background: var(--danger-soft) !important;
      color: var(--danger) !important;
    }

    .side-control-icon,
    .btn-symbol {
      width: 30px !important;
      height: 30px !important;
      border-radius: 8px !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    .score,
    .drum-grid-wrap {
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: var(--shadow-subtle) !important;
    }

    .measure-ruler,
    .pitch-band-corner,
    .pitch-band-nav,
    .pitch-axis,
    .drum-axis,
    .axis-cell,
    .drum-axis div {
      background: #f8fafc !important;
      color: #64748b !important;
      box-shadow: none !important;
    }

    .pitch-band-btn {
      background: #ffffff !important;
      color: #64748b !important;
      box-shadow: none !important;
    }

    .pitch-band-btn.active,
    .score[data-active-pitch-band="high"] .axis-cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .axis-cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .axis-cell.pitch-row-low {
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      box-shadow: inset 3px 0 0 var(--brand) !important;
    }

    .cell,
    .drum-cell {
      margin: 4px 1px !important;
      border-radius: 6px !important;
      border-color: #e5edf5 !important;
      background: #ffffff !important;
      box-shadow: none !important;
    }

    .cell.measure-alt,
    .drum-cell.measure-alt {
      background: #f8fafc !important;
    }

    .cell:hover,
    .drum-cell:hover,
    .cell.track-hover,
    .drum-cell.track-hover {
      background: #eef5ff !important;
      border-color: #93b4f7 !important;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
    }

    .note {
      border-radius: 8px !important;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
      text-shadow: none !important;
    }

    .note.do,
    .note.red { background: #ee5267 !important; color: #ffffff !important; }
    .note.re { background: #f59e0b !important; color: #1f2937 !important; }
    .note.mi,
    .note.yellow { background: #f7c948 !important; color: #1f2937 !important; }
    .note.fa,
    .note.green,
    .note.support { background: #36b86a !important; color: #ffffff !important; }
    .note.sol,
    .note.blue { background: #3b82f6 !important; color: #ffffff !important; }
    .note.la,
    .note.purple { background: #8b5cf6 !important; color: #ffffff !important; }
    .note.si { background: #ec4899 !important; color: #ffffff !important; }

    .drum-hit-marker::after {
      background: var(--drum-hit-ink, #ffffff) !important;
    }

    .xiaoyin-assistant {
      left: 18px !important;
      bottom: 14px !important;
      width: 308px !important;
      min-height: 176px !important;
    }

    .xiaoyin-avatar {
      width: 136px !important;
      height: 140px !important;
      filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.12)) !important;
    }

    .xiaoyin-avatar img {
      width: 134px !important;
    }

    .xiaoyin-bubble {
      left: 112px !important;
      bottom: 106px !important;
      width: 196px !important;
      min-height: 82px !important;
      padding: 14px 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px 14px 14px 6px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: var(--shadow-subtle) !important;
    }

    .xiaoyin-bubble strong {
      color: #172033 !important;
      font-size: 17px !important;
    }

    .xiaoyin-bubble span {
      min-height: 28px !important;
      padding: 7px 12px !important;
      border-color: rgba(37, 99, 235, 0.14) !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      font-size: 13px !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 172px;
        --sidebar-width: 100%;
        --pitch-band-nav-width: 42px;
      }

      .main-layout {
        grid-template-columns: 1fr !important;
      }

      .side-panel {
        width: 100% !important;
        max-height: 172px !important;
        padding: 10px 12px !important;
      }

      .xiaoyin-assistant {
        display: none !important;
      }
    }

    /* Modern workspace polish: visual and layout refresh only. */
    :root {
      --bg: #f3f6fa;
      --panel: #ffffff;
      --ink: #172033;
      --muted: #687487;
      --line: #dce5ee;
      --line-strong: #9fb2c6;
      --axis: #f8fafc;
      --green: #2fbf72;
      --orange: #f59e0b;
      --blue: #2563eb;
      --yellow-note: #f7c948;
      --red-note: #ee5267;
      --blue-note: #3b82f6;
      --green-note: #36b86a;
      --purple-note: #8b5cf6;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --surface-muted: #eef3f7;
      --brand: #2563eb;
      --brand-hover: #1d4ed8;
      --brand-soft: #e8f0ff;
      --danger: #dc2626;
      --danger-soft: #fff1f2;
      --warning-soft: #fff7ed;
      --focus-ring: rgba(37, 99, 235, 0.22);
      --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.06);
      --shadow-float: 0 18px 42px rgba(15, 23, 42, 0.12);
      --tile-radius: 8px;
      --topbar-height: 72px;
      --bottom-nav-height: 112px;
      --sidebar-width: 344px;
      --pitch-band-active: #2563eb;
      --pitch-band-active-soft: rgba(37, 99, 235, 0.08);
      --pitch-band-divider: rgba(37, 99, 235, 0.24);
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
      letter-spacing: 0;
    }

    .app {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
    }

    .songmaker-topbar {
      height: var(--topbar-height) !important;
      padding: 0 20px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      border-bottom: 1px solid rgba(220, 229, 238, 0.95) !important;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
    }

    .song-title-logo {
      height: 50px;
      max-width: min(320px, 28vw);
      filter: none;
      transform: none;
    }

    .page-controls {
      gap: 6px !important;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface-soft);
      box-shadow: none;
    }

    .page-label {
      height: 38px !important;
      min-width: 136px !important;
      border-radius: 10px !important;
      border-color: transparent !important;
      background: transparent !important;
      color: #475569 !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    .tool-btn,
    .select-pill,
    .bpm-box,
    .icon-btn,
    .drum-duration-btn,
    .key-mode-btn {
      border-radius: 10px !important;
      border-color: var(--line) !important;
      background: var(--surface) !important;
      color: var(--ink) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .tool-btn,
    .select-pill,
    .bpm-box,
    .icon-btn {
      min-height: 44px;
    }

    .tool-btn:hover,
    .icon-btn:hover,
    .select-pill:hover,
    .bpm-box:hover,
    .drum-duration-btn:hover,
    .key-mode-btn:hover {
      transform: none !important;
      border-color: #b8c6d6 !important;
      background: #f8fafc !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    }

    .top-action-btn:focus-visible,
    .tool-btn:focus-visible,
    .icon-btn:focus-visible,
    .select-pill:focus-within,
    .bpm-box:focus-within,
    .drum-duration-btn:focus-visible,
    .key-mode-btn:focus-visible,
    .pitch-band-btn:focus-visible {
      outline: 3px solid var(--focus-ring) !important;
      outline-offset: 2px !important;
      border-color: var(--brand) !important;
    }

    .page-btn {
      height: 38px !important;
      min-width: 64px !important;
      padding: 0 11px !important;
      font-size: 13px !important;
    }

    .page-btn.add,
    .tool-btn.ai-accompany,
    .tool-btn.generate {
      border-color: var(--brand) !important;
      background: var(--brand) !important;
      color: #ffffff !important;
      text-shadow: none !important;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
    }

    .page-btn.add:hover,
    .tool-btn.ai-accompany:hover,
    .tool-btn.generate:hover {
      background: var(--brand-hover) !important;
      border-color: var(--brand-hover) !important;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
    }

    .page-btn.delete,
    .tool-btn.danger-action,
    .clear-work-btn,
    .rhythm-delete,
    .selection-action-delete,
    #deleteAccompanyBtn {
      border-color: #fecdd3 !important;
      background: var(--danger-soft) !important;
      color: var(--danger) !important;
      box-shadow: none !important;
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
      background: transparent !important;
    }

    .side-panel {
      width: var(--sidebar-width) !important;
      padding: 20px 16px 190px !important;
      background: #f8fafc !important;
      border-right: 1px solid var(--line) !important;
      box-shadow: none !important;
      overflow: visible;
    }

    .side-panel-heading {
      margin: 0 0 14px !important;
      color: #111827 !important;
      font-size: 18px !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
    }

    .side-panel .toolbar-group {
      gap: 10px !important;
      padding: 12px !important;
      margin-bottom: 12px !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: none !important;
    }

    .side-panel .select-pill,
    .side-panel .tool-btn,
    .side-panel .zoom-box {
      height: 48px !important;
      min-height: 48px !important;
      border-radius: 10px !important;
      background: #ffffff !important;
    }

    .side-select {
      grid-template-columns: 34px 54px minmax(0, 1fr) !important;
      gap: 8px !important;
      padding: 0 10px !important;
      justify-content: stretch !important;
    }

    .side-control-icon,
    .btn-symbol {
      width: 30px !important;
      height: 30px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 8px !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      box-shadow: none !important;
    }

    .side-control-title {
      color: #334155 !important;
      font-size: 14px !important;
      font-weight: 800 !important;
    }

    .side-select select {
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      text-align: right;
      text-align-last: right;
    }

    .side-panel #muteAccompanyBtn {
      color: #334155 !important;
      background: #f8fafc !important;
    }

    .xiaoyin-assistant {
      left: 18px !important;
      bottom: 14px !important;
      width: 308px !important;
      min-height: 176px !important;
      background: transparent !important;
    }

    .xiaoyin-avatar {
      width: 136px !important;
      height: 140px !important;
      filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.12)) !important;
    }

    .xiaoyin-avatar img {
      width: 134px !important;
    }

    .xiaoyin-bubble {
      left: 112px !important;
      bottom: 106px !important;
      width: 196px !important;
      min-height: 82px !important;
      gap: 10px !important;
      padding: 14px 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px 14px 14px 6px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: var(--shadow-subtle) !important;
    }

    .xiaoyin-bubble strong {
      color: #172033 !important;
      font-size: 17px !important;
      font-weight: 800 !important;
    }

    .xiaoyin-bubble span {
      min-height: 28px !important;
      padding: 7px 12px !important;
      border: 1px solid rgba(37, 99, 235, 0.14) !important;
      border-radius: 999px !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    .xiaoyin-name {
      left: 24px !important;
      bottom: 0 !important;
      color: #334155 !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .main-stage {
      grid-template-rows: minmax(0, 1fr) var(--bottom-nav-height) !important;
      background: #edf2f7 !important;
    }

    .main-stage .workspace {
      padding: 14px 16px 10px !important;
      background: transparent !important;
    }

    .workspace > .score-scroll,
    .drum-section .score-scroll {
      justify-content: flex-start !important;
      overflow-x: auto !important;
      overflow-y: auto !important;
      scrollbar-color: #cbd5e1 transparent;
    }

    .score,
    .drum-grid-wrap {
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: var(--shadow-subtle) !important;
      overflow: hidden;
    }

    .score {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .drum-grid-wrap {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      border-top: 0 !important;
    }

    .pitch-band-corner,
    .pitch-band-nav,
    .pitch-axis,
    .drum-axis {
      background: #f8fafc !important;
    }

    .measure-ruler {
      height: 30px !important;
      background: #f8fafc !important;
      color: #64748b !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      border-bottom: 1px solid var(--line);
    }

    .measure-ruler span {
      border-left: 2px solid #94a3b8 !important;
    }

    .axis-cell,
    .drum-axis div {
      border-bottom: 1px solid #e2e8f0 !important;
      background: #f8fafc !important;
      color: #64748b !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }

    .axis-cell strong {
      color: #172033 !important;
      font-size: 16px !important;
    }

    .grid,
    .drum-grid {
      background: #ffffff !important;
    }

    .cell,
    .drum-cell {
      margin: 4px 1px !important;
      border-radius: 6px !important;
      border-color: #e5edf5 !important;
      background: #ffffff !important;
      box-shadow: none !important;
      transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .cell.measure-alt,
    .drum-cell.measure-alt {
      background: #f8fafc !important;
    }

    .cell.measure-start,
    .drum-cell.measure-start {
      border-left-color: #94a3b8 !important;
      box-shadow: inset 2px 0 0 #94a3b8 !important;
    }

    .cell.pitch-band-start,
    .axis-cell.pitch-band-start {
      border-top-color: rgba(37, 99, 235, 0.22) !important;
      box-shadow: inset 0 2px 0 rgba(37, 99, 235, 0.18) !important;
    }

    .cell.pitch-row-high {
      background: #fffdf7 !important;
    }

    .cell.pitch-row-mid {
      background: #ffffff !important;
    }

    .cell.pitch-row-low {
      background: #f8fffb !important;
    }

    .cell:hover,
    .drum-cell:hover,
    .cell.track-hover,
    .drum-cell.track-hover {
      background: #eef5ff !important;
      border-color: #93b4f7 !important;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
      z-index: 2;
    }

    .cell.track-has-content,
    .drum-cell.track-has-content {
      background: #f4f8ff !important;
    }

    .axis-cell.track-has-content,
    .drum-axis div.track-has-content {
      background: #edf4ff !important;
      color: #1d4ed8 !important;
      box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.38) !important;
    }

    .score[data-active-pitch-band="high"] .cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .cell.pitch-row-low {
      background: #edf4ff !important;
      border-color: #93b4f7 !important;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22) !important;
    }

    .score[data-active-pitch-band="high"] .axis-cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .axis-cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .axis-cell.pitch-row-low {
      background: #e8f0ff !important;
      color: #1d4ed8 !important;
      box-shadow: inset 3px 0 0 var(--brand) !important;
    }

    .pitch-band-btn {
      border-color: var(--line) !important;
      background: #ffffff !important;
      color: #64748b !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    .pitch-band-btn:hover {
      background: #f1f5f9 !important;
      color: #1d4ed8 !important;
      box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.24) !important;
    }

    .pitch-band-btn.active {
      background: #e8f0ff !important;
      color: #1d4ed8 !important;
      box-shadow: inset 4px 0 0 var(--brand) !important;
    }

    .note {
      border: 1px solid rgba(15, 23, 42, 0.12) !important;
      border-radius: 8px !important;
      color: #0f172a;
      font-size: 16px !important;
      font-weight: 800 !important;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
      text-shadow: none !important;
      transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease !important;
    }

    .note::before {
      content: none !important;
    }

    .note:hover {
      transform: translateY(-1px) !important;
      border-color: rgba(37, 99, 235, 0.36) !important;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14) !important;
    }

    .note.selected {
      outline: 3px solid rgba(37, 99, 235, 0.26) !important;
      outline-offset: 2px !important;
      border-color: var(--brand) !important;
    }

    .note.playing {
      animation: none !important;
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 4px 12px rgba(15, 23, 42, 0.14) !important;
    }

    .note.yellow,
    .note.mi {
      background: #f7c948 !important;
      color: #1f2937 !important;
    }

    .note.red,
    .note.do {
      background: #ee5267 !important;
      color: #ffffff !important;
    }

    .note.blue,
    .note.sol {
      background: #3b82f6 !important;
      color: #ffffff !important;
    }

    .note.green,
    .note.fa,
    .note.support {
      background: #36b86a !important;
      color: #ffffff !important;
    }

    .note.purple,
    .note.la {
      background: #8b5cf6 !important;
      color: #ffffff !important;
    }

    .note.re {
      background: #f59e0b !important;
      color: #1f2937 !important;
    }

    .note.si {
      background: #ec4899 !important;
      color: #ffffff !important;
    }

    .note .side-mark {
      width: 3px !important;
      background: rgba(255, 255, 255, 0.72) !important;
    }

    .note .resize-handle {
      background: rgba(255, 255, 255, 0.62) !important;
      box-shadow: none !important;
    }

    .selection-box {
      border: 2px solid var(--brand) !important;
      background: rgba(37, 99, 235, 0.1) !important;
      border-radius: 6px !important;
    }

    .playback-cursor {
      width: 2px !important;
      background: #ef4444 !important;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12) !important;
      border-radius: 999px !important;
    }

    .drum-section {
      padding-top: 8px !important;
    }

    .drum-title {
      min-height: 42px !important;
      padding: 0 4px 8px !important;
      color: #172033 !important;
      font-size: 15px !important;
      font-weight: 800 !important;
    }

    .drum-duration-controls {
      padding: 4px !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: #ffffff !important;
      box-shadow: none !important;
    }

    .drum-duration-btn {
      height: 32px !important;
      min-width: 54px !important;
      padding: 0 10px !important;
      font-size: 13px !important;
    }

    .drum-duration-btn.active,
    .key-mode-btn.active {
      border-color: var(--brand) !important;
      background: var(--brand) !important;
      color: #ffffff !important;
    }

    .drum-hit-marker {
      border-radius: 999px !important;
      box-shadow: none !important;
      font-size: 0 !important;
    }

    .drum-hit-marker::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: currentColor;
    }

    .main-stage .toolbar {
      min-height: var(--bottom-nav-height) !important;
      padding: 12px 18px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      border-top: 1px solid var(--line) !important;
      box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04), 0 -14px 28px rgba(15, 23, 42, 0.06) !important;
    }

    .main-stage .toolbar-row {
      gap: 10px !important;
      justify-content: center !important;
      align-items: center !important;
    }

    .main-stage .toolbar-group {
      min-height: 56px !important;
      padding: 7px !important;
      border-radius: 12px !important;
      border: 1px solid var(--line) !important;
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    .transport-group {
      background: #eef5ff !important;
      border-color: #cfe0ff !important;
    }

    .main-stage .tool-btn,
    .main-stage .icon-btn,
    .main-stage .bpm-box {
      font-size: 14px !important;
      font-weight: 700 !important;
    }

    .main-stage .tool-btn.play {
      width: 58px !important;
      height: 58px !important;
      border-radius: 14px !important;
      background: var(--brand) !important;
      border-color: var(--brand) !important;
      color: #ffffff !important;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24) !important;
    }

    .main-stage .tool-btn.play:hover {
      background: var(--brand-hover) !important;
    }

    .tool-btn.play.playing {
      background: #ef4444 !important;
      border-color: #ef4444 !important;
      box-shadow: 0 10px 22px rgba(239, 68, 68, 0.22) !important;
    }

    .tool-btn.group.active,
    .tool-btn.group.selected-mode {
      background: #172033 !important;
      border-color: #172033 !important;
      color: #ffffff !important;
    }

    .bpm-box {
      min-width: 250px !important;
      padding: 0 12px !important;
      background: #ffffff !important;
    }

    .bpm-box label,
    .zoom-box label {
      color: #64748b !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    .bpm-box input {
      color: #172033 !important;
      font-weight: 800 !important;
    }

    .bpm-slider::-webkit-slider-runnable-track,
    .bpm-slider::-moz-range-track {
      background: #dbeafe !important;
      box-shadow: none !important;
    }

    .bpm-slider::-webkit-slider-thumb,
    .bpm-slider::-moz-range-thumb {
      background: var(--brand) !important;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.24) !important;
    }

    .zoom-box {
      min-width: 200px !important;
      background: #ffffff !important;
    }

    .zoom-box input {
      accent-color: var(--brand);
    }

    .status-tip {
      color: #475569 !important;
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      border-radius: 999px !important;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    .rhythm-popup,
    .selection-action-popup,
    .modal-box,
    .ai-loading-card {
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #ffffff !important;
      box-shadow: var(--shadow-float) !important;
      color: var(--ink) !important;
    }

    .rhythm-option,
    .accompany-option,
    .accompany-actions button,
    #modalClose,
    .welcome-start-btn {
      border-radius: 10px !important;
      box-shadow: none !important;
    }

    .rhythm-option.active,
    .accompany-option:hover {
      border-color: var(--brand) !important;
      background: var(--brand-soft) !important;
      color: #1d4ed8 !important;
    }

    .welcome-start-overlay {
      background: rgba(15, 23, 42, 0.42) !important;
      backdrop-filter: blur(8px);
    }

    .welcome-start-card {
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      background: #ffffff !important;
      box-shadow: var(--shadow-float) !important;
    }

    @media (min-width: 761px) and (max-width: 1320px) {
      :root {
        --sidebar-width: 312px;
        --bottom-nav-height: 126px;
      }

      .songmaker-topbar {
        grid-template-columns: minmax(280px, 1fr) auto minmax(300px, 1fr) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
      }

      .song-title-logo {
        height: 44px;
        max-width: min(260px, 24vw);
      }

      .page-controls {
        gap: 4px !important;
        padding: 5px;
      }

      .page-btn {
        min-width: 54px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
      }

      .page-label {
        min-width: 112px !important;
      }

      .main-stage .toolbar-row {
        flex-wrap: wrap !important;
      }

      .xiaoyin-assistant {
        width: 278px !important;
      }

      .xiaoyin-bubble {
        left: 94px !important;
        width: 184px !important;
      }
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 172px;
        --sidebar-width: 100%;
        --pitch-band-nav-width: 42px;
      }

      .songmaker-topbar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px 12px !important;
      }

      .song-title-logo {
        height: 44px;
        max-width: min(280px, 80vw);
      }

      .page-controls {
        width: 100%;
        justify-content: center;
        overflow-x: auto;
      }

      .main-layout {
        grid-template-columns: 1fr !important;
      }

      .side-panel {
        width: 100% !important;
        max-height: 172px !important;
        padding: 10px 12px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        overflow: auto !important;
      }

      .side-panel .toolbar-group {
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 8px !important;
      }

      .side-panel .select-pill,
      .side-panel .tool-btn {
        min-width: 158px !important;
        height: 46px !important;
      }

      .xiaoyin-assistant {
        display: none !important;
      }

      .main-stage .workspace {
        padding: 10px 10px 8px !important;
      }

      .main-stage .toolbar {
        padding: 10px !important;
        overflow-y: auto !important;
      }

      .main-stage .toolbar-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }

      .bpm-box {
        min-width: 224px !important;
      }

      .zoom-box {
        min-width: 180px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Drum duration editor: quarter by default, eighth visible, sixteenth tucked under more. */
    .drum-title {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 10px !important;
      min-height: 42px !important;
      padding: 0 10px 6px !important;
    }

    .drum-duration-controls {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex: 0 0 auto;
      touch-action: manipulation;
    }

    .drum-duration-btn {
      height: 34px;
      min-width: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 11px;
      border: 1px solid rgba(185, 213, 228, 0.95);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
      color: #426176;
      font-size: 13px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 12px rgba(48, 104, 134, 0.08);
      list-style: none;
      white-space: nowrap;
    }

    .drum-duration-btn:hover,
    .drum-duration-btn.active {
      border-color: #42bce9;
      background: linear-gradient(180deg, #e8f9ff 0%, #d8f2ff 100%);
      color: #0d86be;
    }

    .drum-hit-marker {
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: calc(var(--hit-left) + 4px);
      width: calc(var(--hit-width) - 8px);
      min-width: 14px;
      height: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: none;
      border: 1px solid rgba(255, 255, 255, 0.88);
      border-radius: 10px;
      background: var(--drum-hit-color, #42bce9);
      color: var(--drum-hit-ink, #ffffff);
      font-size: 13px;
      line-height: 1;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 8px rgba(40, 94, 122, 0.16);
    }

    .drum-hit-marker.drum-len-quarter {
      border-radius: 11px;
      font-size: 15px;
    }

    .drum-hit-marker.drum-len-eighth {
      border-radius: 9px;
      font-size: 12px;
    }

    .drum-hit-marker.drum-len-sixteenth {
      border-radius: 8px;
      font-size: 10px;
    }

    /* Lightweight AI accompaniment loading state for low-spec classroom PCs. */
    .ai-loading-overlay {
      z-index: 1200;
      background: rgba(31, 91, 112, 0.22);
    }

    .ai-loading-card {
      width: min(620px, calc(100vw - 40px));
      min-height: 340px;
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      align-items: center;
      gap: 24px;
      padding: 30px 34px;
      border: 2px solid rgba(131, 220, 232, 0.72);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 20px 54px rgba(38, 103, 123, 0.2);
    }

    .ai-loading-robot-wrap {
      width: 230px;
      height: 240px;
      display: grid;
      place-items: center;
      overflow: visible;
    }

    .ai-loading-robot {
      display: block;
      width: 230px;
      height: 230px;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      user-select: none;
      -webkit-user-drag: none;
      animation: aiThinkingBreath 1.8s ease-in-out infinite;
    }

    .ai-loading-copy {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .ai-loading-kicker {
      color: #1ca4b9;
      font-size: 16px;
      font-weight: 950;
    }

    .ai-loading-copy h3 {
      margin: 0;
      color: #21465c;
      font-size: 23px;
      line-height: 1.2;
      font-weight: 950;
    }

    .ai-loading-copy p {
      min-height: 24px;
      margin: 0;
      color: #537286;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 800;
    }

    .ai-loading-progress {
      width: 100%;
      height: 9px;
      overflow: hidden;
      border-radius: 999px;
      background: #dff5f8;
    }

    .ai-loading-progress span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #42c7d9, #72dfc8);
      transform-origin: left center;
      transform: scaleX(0);
      animation: aiLoadingProgress 2.25s ease-out forwards;
    }

    .ai-loading-steps {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ai-loading-steps span {
      padding: 5px 9px;
      border: 1px solid #c9edf1;
      border-radius: 999px;
      color: #4f8691;
      background: #f3fcfd;
      font-size: 13px;
      font-weight: 900;
    }

    .ai-loading-steps span.active {
      border-color: #73d7df;
      color: #147b8b;
      background: #ddf7f8;
    }

    @keyframes aiThinkingBreath {
      0%, 100% { opacity: 0.92; }
      50% { opacity: 1; }
    }

    @keyframes aiLoadingProgress {
      0% { transform: scaleX(0); }
      100% { transform: scaleX(1); }
    }

    @media (max-width: 620px) {
      .ai-loading-card {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 470px;
        text-align: center;
      }

      .ai-loading-robot-wrap {
        width: 220px;
        height: 220px;
      }

      .ai-loading-robot {
        width: 220px;
        height: 220px;
      }

      .ai-loading-copy {
        width: 100%;
      }

      .ai-loading-steps {
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-loading-robot,
      .ai-loading-progress span {
        animation: none;
      }

      .ai-loading-progress span {
        transform: scaleX(1);
      }
    }

    /* Final Xiaoyin bubble tuning: larger, higher, clearer, no floating music note. */
    .xiaoyin-assistant::after {
      content: none;
      display: none;
      animation: none;
    }

    .xiaoyin-bubble {
      width: 246px;
      min-height: 94px;
      gap: 13px;
      padding: 18px 21px 17px 23px;
    }

    .xiaoyin-bubble strong {
      font-size: 22px;
      line-height: 1.18;
    }

    .xiaoyin-bubble span {
      min-height: 30px;
      padding: 7px 14px;
      font-size: 16px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    @media (min-width: 761px) {
      .xiaoyin-assistant {
        width: 374px;
        min-height: 236px;
      }

      .xiaoyin-bubble {
        left: 132px;
        bottom: 152px;
        width: 246px;
      }
    }

    /* Welcome start gate: touch-first entry that unlocks Xiaoyin's voice. */
    .welcome-start-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 30% 18%, rgba(174, 221, 255, 0.52), transparent 36%),
        linear-gradient(135deg, rgba(255, 250, 239, 0.96), rgba(235, 247, 255, 0.96));
      transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .welcome-start-overlay.hidden {
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
    }

    .welcome-start-card {
      width: min(520px, calc(100vw - 48px));
      min-height: 420px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 18px;
      padding: 34px 30px 32px;
      border: 1px solid rgba(161, 210, 238, 0.78);
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 24px 60px rgba(88, 139, 171, 0.2);
      text-align: center;
    }

    .welcome-start-avatar {
      width: min(230px, 50vw);
      filter: drop-shadow(0 18px 20px rgba(37, 116, 154, 0.18));
      user-select: none;
      -webkit-user-drag: none;
    }

    .welcome-start-copy {
      display: grid;
      gap: 8px;
    }

    .welcome-start-kicker {
      color: #1f8dbc;
      font-size: 17px;
      font-weight: 900;
    }

    .welcome-start-copy h1 {
      margin: 0;
      color: #24384d;
      font-size: clamp(34px, 5vw, 50px);
      font-weight: 950;
      letter-spacing: 0;
    }

    .welcome-start-copy p {
      margin: 0;
      color: #5d7185;
      font-size: clamp(18px, 2.5vw, 24px);
      font-weight: 800;
    }

    .welcome-start-btn {
      min-width: 220px;
      min-height: 64px;
      padding: 0 34px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffd36b 0%, #ff9f43 100%);
      box-shadow: 0 14px 24px rgba(255, 159, 67, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.58);
      color: #fff;
      font-size: 24px;
      font-weight: 950;
      cursor: pointer;
      touch-action: manipulation;
    }

    .welcome-start-btn:active {
      transform: translateY(1px);
      box-shadow: 0 8px 16px rgba(255, 159, 67, 0.24), inset 0 2px 0 rgba(255, 255, 255, 0.5);
    }

    .welcome-start-btn:focus-visible {
      outline: 4px solid rgba(50, 164, 220, 0.28);
      outline-offset: 4px;
    }

    @media (max-width: 760px) {
      .welcome-start-card {
        min-height: 360px;
        padding: 28px 22px;
      }

      .welcome-start-btn {
        min-width: 190px;
        min-height: 58px;
        font-size: 21px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .welcome-start-overlay,
      .welcome-start-btn {
        transition: none;
      }

      .welcome-start-btn:active {
        transform: none;
      }
    }

    /* Final Xiaoyin readability pass for classroom touch displays. */
    .xiaoyin-bubble {
      width: 238px;
      min-height: 84px;
      gap: 9px;
      padding: 16px 19px 15px 22px;
      border: 2px solid rgba(154, 210, 236, 0.96);
      border-radius: 26px 26px 26px 10px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.98), 0 18px 30px rgba(37, 99, 132, 0.16);
      z-index: 4;
    }

    .xiaoyin-bubble strong {
      color: #193a52;
      font-size: 21px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .xiaoyin-bubble span {
      align-self: flex-start;
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid rgba(18, 139, 190, 0.42);
      background: linear-gradient(180deg, #56c7ee 0%, #1d9bd2 100%);
      color: #ffffff;
      font-size: 16px;
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 1px 1px rgba(8, 75, 112, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 16px rgba(28, 148, 198, 0.2);
    }

    @media (min-width: 761px) {
      .xiaoyin-assistant {
        width: 358px;
      }

      .xiaoyin-bubble {
        left: 126px;
        bottom: 124px;
      }
    }

    /* Final Xiaoyin spotlight: bigger, frameless, and more inviting on classroom touch screens. */
    @media (min-width: 761px) {
      :root {
        --sidebar-width: 400px;
      }

      .main-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background:
          radial-gradient(circle at 86px calc(100% - 92px), rgba(80, 220, 205, 0.26), transparent 138px),
          linear-gradient(90deg, rgba(210, 244, 255, 0.68) 0, rgba(247, 252, 255, 0.78) 400px, transparent 640px);
      }

      .side-panel {
        width: var(--sidebar-width);
        padding-bottom: 238px;
        overflow: visible;
      }

      .xiaoyin-assistant {
        left: 22px;
        bottom: 12px;
        width: 364px;
        min-height: 226px;
        overflow: visible;
      }

      .xiaoyin-assistant::before {
        content: "";
        position: absolute;
        left: -8px;
        bottom: 12px;
        width: 210px;
        height: 142px;
        border-radius: 50%;
        background:
          radial-gradient(circle at 42% 46%, rgba(255, 255, 255, 0.72), rgba(154, 245, 222, 0.26) 54%, rgba(45, 193, 224, 0.06) 78%, transparent 100%);
        filter: blur(1px);
        pointer-events: none;
      }

      .xiaoyin-assistant::after {
        content: "♪";
        position: absolute;
        left: 146px;
        bottom: 178px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        color: #20bfe6;
        font-size: 22px;
        font-weight: 950;
        box-shadow: 0 8px 18px rgba(42, 173, 204, 0.20);
        pointer-events: none;
      }

      .xiaoyin-avatar {
        left: 0;
        bottom: 4px;
        width: 216px;
        height: 208px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        filter: drop-shadow(0 20px 18px rgba(17, 111, 145, 0.22));
      }

      .xiaoyin-avatar img {
        width: 212px;
      }

      .xiaoyin-bubble {
        left: 164px;
        bottom: 142px;
        width: 198px;
        min-height: 70px;
        padding: 12px 17px 12px 20px;
        border-color: rgba(124, 211, 238, 0.95);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 252, 255, 0.98) 100%);
        box-shadow:
          inset 0 2px 0 rgba(255, 255, 255, 0.98),
          0 16px 28px rgba(32, 165, 206, 0.18),
          0 0 0 4px rgba(67, 207, 238, 0.10);
      }

      .xiaoyin-bubble strong {
        font-size: 18px;
        color: #1f3d54;
      }

      .xiaoyin-bubble span {
        width: fit-content;
        padding: 4px 9px;
        border-radius: 999px;
        background: linear-gradient(180deg, #3fd3ff 0%, #18aee6 100%);
        color: #ffffff;
        font-size: 14px;
        box-shadow: 0 6px 12px rgba(24, 174, 230, 0.22);
      }

      .xiaoyin-name {
        left: 48px;
        bottom: 0;
        padding: 7px 13px;
        background: rgba(255, 255, 255, 0.94);
        color: #21637a;
        font-size: 14px;
        box-shadow: 0 8px 18px rgba(35, 124, 148, 0.16);
      }
    }

    @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
      .xiaoyin-assistant::after {
        animation: xiaoyinSpark 2.8s ease-in-out infinite;
      }
    }

    @keyframes xiaoyinSpark {
      0%, 100% {
        transform: translateY(0) rotate(-6deg);
        opacity: 0.86;
      }
      50% {
        transform: translateY(-7px) rotate(7deg);
        opacity: 1;
      }
    }

    /* Xiaoyin assistant: touch-first AI accompaniment entry. */
    @media (min-width: 761px) {
      :root {
        --sidebar-width: 340px;
      }

      .songmaker-topbar {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
      }

      .main-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background: linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 340px, transparent 570px);
      }

      .side-panel {
        position: relative;
        width: var(--sidebar-width);
        padding-bottom: 172px;
        overflow: visible;
      }
    }

    .xiaoyin-assistant {
      position: absolute;
      left: 18px;
      bottom: 14px;
      width: 250px;
      min-height: 146px;
      border: 0;
      padding: 0;
      background: transparent;
      color: #26384c;
      cursor: pointer;
      touch-action: manipulation;
      z-index: 28;
      -webkit-tap-highlight-color: transparent;
    }

    .xiaoyin-avatar {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 122px;
      height: 128px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      border-radius: 32px;
      background: radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.92), rgba(211, 247, 255, 0.42) 62%, rgba(109, 205, 246, 0.16) 100%);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(32, 137, 183, 0.18);
      transform-origin: 50% 90%;
      transition: transform 0.16s ease, filter 0.16s ease;
    }

    .xiaoyin-avatar img {
      width: 118px;
      height: auto;
      display: block;
      transform: translateY(2px);
      pointer-events: none;
      user-select: none;
    }

    .xiaoyin-bubble {
      position: absolute;
      left: 92px;
      bottom: 82px;
      width: 190px;
      min-height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding: 11px 16px 11px 20px;
      border: 1px solid rgba(187, 224, 240, 0.95);
      border-radius: 22px 22px 22px 8px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 26px rgba(34, 95, 128, 0.13);
      text-align: left;
      white-space: normal;
      pointer-events: none;
    }

    .xiaoyin-bubble::before {
      content: "";
      position: absolute;
      left: 7px;
      bottom: -8px;
      width: 18px;
      height: 18px;
      border-left: 1px solid rgba(187, 224, 240, 0.95);
      border-bottom: 1px solid rgba(187, 224, 240, 0.95);
      background: rgba(255, 255, 255, 0.94);
      transform: rotate(-18deg);
      border-bottom-left-radius: 5px;
    }

    .xiaoyin-bubble strong {
      position: relative;
      color: #234058;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.1;
    }

    .xiaoyin-bubble span {
      position: relative;
      color: #1e9ed6;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.1;
    }

    .xiaoyin-name {
      position: absolute;
      left: 16px;
      bottom: 2px;
      min-width: 88px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
      color: #2d5268;
      font-size: 13px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(35, 92, 122, 0.10);
      pointer-events: none;
    }

    .xiaoyin-assistant:hover .xiaoyin-avatar,
    .xiaoyin-assistant:focus-visible .xiaoyin-avatar {
      transform: translateY(-3px) scale(1.035);
      filter: drop-shadow(0 8px 12px rgba(28, 164, 215, 0.18));
    }

    .xiaoyin-assistant:active .xiaoyin-avatar {
      transform: translateY(1px) scale(0.985);
    }

    .xiaoyin-assistant:focus-visible {
      outline: 3px solid rgba(33, 185, 242, 0.42);
      outline-offset: 8px;
      border-radius: 32px;
    }

    @media (min-width: 761px) and (max-width: 1180px) {
      :root {
        --sidebar-width: 328px;
      }

      .xiaoyin-bubble {
        left: 82px;
        width: 174px;
      }
    }

    @media (max-width: 760px) {
      .xiaoyin-assistant {
        position: fixed;
        left: 12px;
        bottom: 12px;
        width: 172px;
        min-height: 104px;
      }

      .xiaoyin-avatar {
        width: 82px;
        height: 88px;
        border-radius: 24px;
      }

      .xiaoyin-avatar img {
        width: 82px;
      }

      .xiaoyin-bubble {
        left: 62px;
        bottom: 52px;
        width: 132px;
        min-height: 48px;
        padding: 8px 10px 8px 14px;
        border-radius: 18px 18px 18px 7px;
      }

      .xiaoyin-bubble strong {
        font-size: 14px;
      }

      .xiaoyin-bubble span {
        font-size: 12px;
      }

      .xiaoyin-name {
        display: none;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      .xiaoyin-avatar img {
        animation: xiaoyinFloat 3.6s ease-in-out infinite;
      }

      .xiaoyin-bubble {
        animation: xiaoyinBubbleIn 0.42s ease-out both;
      }
    }

    @keyframes xiaoyinFloat {
      0%, 100% { transform: translateY(2px); }
      50% { transform: translateY(-3px); }
    }

    @keyframes xiaoyinBubbleIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Final display lock: match the requested red-box sidebar and keep the 4-measure middle view readable. */
    @media (min-width: 761px) {
      :root {
        --sidebar-width: 300px;
        --jianpu-height: 0px;
      }

      .songmaker-topbar {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
      }

      .main-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      }

      .side-panel {
        width: var(--sidebar-width);
        padding-left: 18px;
        padding-right: 16px;
      }

      .main-stage .workspace {
        padding-left: 14px;
        padding-right: 14px;
      }

      .workspace > .score-scroll {
        justify-content: flex-start;
      }

      .score,
      .drum-grid-wrap {
        max-width: none;
      }
    }

    @media (max-width: 760px) {
      .main-layout {
        grid-template-columns: 1fr;
      }

      .side-panel {
        width: auto;
      }
    }

    /* Final override: match the requested red-box sidebar width and keep the 4-measure score visible. */
    :root {
      --sidebar-width: 300px;
      --jianpu-height: 0px;
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .side-panel {
      width: var(--sidebar-width);
      padding-left: 18px;
      padding-right: 16px;
    }

    .main-stage .workspace {
      padding-left: 14px;
      padding-right: 14px;
    }

    .workspace > .score-scroll {
      justify-content: flex-start;
    }

    .score {
      max-width: none;
    }

    /* Final classroom viewport fit: red-box sidebar width and full 4-measure default view. */
    :root {
      --sidebar-width: 300px;
      --jianpu-height: 0px;
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .side-panel {
      width: var(--sidebar-width);
      padding-left: 18px;
      padding-right: 16px;
    }

    .main-stage .workspace {
      padding-left: 14px;
      padding-right: 14px;
    }

    .workspace > .score-scroll {
      justify-content: flex-start;
    }

    .score {
      max-width: none;
    }

    @media (max-width: 1100px) {
      :root {
        --sidebar-width: 260px;
      }
    }

    /* Bottom-right view controls: keep destructive clear separate and visible. */
    .main-stage .toolbar-row.primary-row {
      justify-content: flex-start;
      align-items: center;
      gap: 12px;
    }

    .main-stage .view-actions {
      margin-left: auto;
      flex: 0 0 auto;
      min-height: 58px;
      padding: 7px 10px;
      gap: 10px;
      border-color: rgba(236, 220, 220, 0.95);
      background: rgba(255, 255, 255, 0.9);
    }

    .clear-work-btn {
      height: 48px;
      min-width: 94px;
      border-radius: 999px;
      border: 1px solid rgba(230, 85, 85, 0.76);
      background: linear-gradient(180deg, #ff7b7b 0%, #ef4444 100%);
      color: #ffffff;
      font-size: 16px;
      font-weight: 950;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 8px 18px rgba(239, 68, 68, 0.22);
    }

    .clear-work-btn:hover {
      border-color: rgba(220, 38, 38, 0.9);
      background: linear-gradient(180deg, #ff6868 0%, #dc2626 100%);
      transform: translateY(-1px);
    }

    .bottom-zoom {
      display: grid;
      grid-template-columns: 34px 38px 128px 48px;
      align-items: center;
      gap: 8px;
      height: 48px;
      min-height: 48px;
      min-width: 270px;
      padding: 0 12px 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(207, 227, 239, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 255, 0.96));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 18px rgba(38, 78, 105, 0.08);
    }

    .bottom-zoom .side-control-icon {
      width: 30px;
      height: 30px;
      border-radius: 12px;
      font-size: 16px;
    }

    .bottom-zoom label,
    .bottom-zoom span {
      color: #293a4e;
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .bottom-zoom input {
      width: 100%;
      min-width: 0;
    }

    .side-panel > .zoom-box {
      display: none;
    }

    @media (max-width: 1280px) {
      .bottom-zoom {
        grid-template-columns: 30px 34px 94px 44px;
        min-width: 220px;
      }

      .clear-work-btn {
        min-width: 82px;
      }
    }

    @media (max-width: 980px) {
      .main-stage .toolbar-row.primary-row {
        flex-wrap: wrap;
      }

      .main-stage .view-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
      }
    }

    /* Playback performance polish: keep the guide clear without scaling notes during play. */
    .playback-cursor {
      left: 0 !important;
      will-change: transform;
      transition: transform 0.08s linear;
    }

    .note.playing {
      animation: none !important;
      transform: none !important;
      border-color: rgba(255, 255, 255, 0.98) !important;
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.72),
        0 0 0 5px rgba(66, 184, 239, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -5px 0 rgba(23, 43, 71, 0.10),
        0 8px 16px rgba(38, 76, 112, 0.18) !important;
    }

    /* Track hierarchy polish: empty rows recede, rows with music stay clear. */
    .axis-cell.track-empty,
    .drum-axis div.track-empty {
      color: rgba(83, 103, 121, 0.56);
      background: linear-gradient(180deg, rgba(247, 252, 255, 0.42), rgba(241, 249, 253, 0.34));
    }

    .axis-cell.track-has-content,
    .drum-axis div.track-has-content {
      color: #294058;
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.82), transparent 34%),
        linear-gradient(180deg, rgba(236, 249, 255, 0.92), rgba(216, 241, 253, 0.88));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset -3px 0 0 rgba(84, 181, 230, 0.26);
    }

    .cell.track-empty,
    .drum-cell.track-empty {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(244, 250, 253, 0.46));
      border-color: rgba(203, 220, 231, 0.58);
    }

    .cell.track-has-content,
    .drum-cell.track-has-content {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(237, 248, 254, 0.96) 100%);
      border-color: rgba(184, 211, 226, 0.98);
    }

    .cell.track-hover,
    .drum-cell.track-hover {
      background:
        linear-gradient(180deg, rgba(238, 249, 255, 0.98), rgba(219, 242, 254, 0.98)) !important;
      border-top-color: rgba(70, 176, 229, 0.54);
      border-bottom-color: rgba(70, 176, 229, 0.54);
    }

    .axis-cell.track-hover,
    .drum-axis div.track-hover {
      color: #1f74a5;
      background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.92), transparent 34%),
        linear-gradient(180deg, rgba(222, 246, 255, 0.98), rgba(197, 235, 253, 0.96));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset -4px 0 0 rgba(49, 172, 230, 0.42),
        0 6px 14px rgba(50, 158, 211, 0.10);
    }

    /* Note jelly polish: readable colorful melody blocks with clear hover and selected states. */
    .note {
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 12px;
      color: #ffffff;
      font-size: 19px;
      font-weight: 950;
      text-shadow: 0 1px 2px rgba(24, 45, 69, 0.22);
      overflow: visible;
      transform-origin: center center;
      transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        border-color 0.14s ease,
        filter 0.14s ease;
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.38),
        inset 0 -5px 0 rgba(23, 43, 71, 0.12),
        0 7px 14px rgba(38, 76, 112, 0.18);
    }

    .note::before {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: 6px;
      height: 32%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
      pointer-events: none;
    }

    .note:hover {
      transform: translateY(-2px) scale(1.035);
      z-index: 25;
      border-color: rgba(255, 255, 255, 0.92);
      filter: saturate(1.06) brightness(1.03);
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.82),
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -5px 0 rgba(23, 43, 71, 0.11),
        0 12px 22px rgba(38, 76, 112, 0.23);
    }

    .note.selected {
      z-index: 28;
      border-color: rgba(255, 255, 255, 1);
      box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.96),
        0 0 0 7px rgba(66, 184, 239, 0.46),
        inset 0 2px 0 rgba(255, 255, 255, 0.50),
        inset 0 -5px 0 rgba(23, 43, 71, 0.12),
        0 14px 26px rgba(38, 76, 112, 0.26);
    }

    .note.playing {
      animation: notePulse 0.3s ease;
      border-color: rgba(255, 255, 255, 1) !important;
      box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.94),
        0 0 18px rgba(255, 115, 115, 0.58),
        inset 0 2px 0 rgba(255, 255, 255, 0.50),
        inset 0 -5px 0 rgba(23, 43, 71, 0.12),
        0 14px 26px rgba(38, 76, 112, 0.25) !important;
    }

    .note.do {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 32%),
        linear-gradient(180deg, #ff8ba0 0%, #f65170 58%, #d93c59 100%);
    }

    .note.re {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.40), transparent 32%),
        linear-gradient(180deg, #ffc07b 0%, #ff9444 58%, #e07222 100%);
    }

    .note.mi {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.48), transparent 32%),
        linear-gradient(180deg, #ffe178 0%, #f8c63b 58%, #dc9f10 100%);
      color: #344056;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
    }

    .note.fa {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 32%),
        linear-gradient(180deg, #72e8d2 0%, #28c6ad 58%, #159b86 100%);
    }

    .note.sol {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 32%),
        linear-gradient(180deg, #66b4ff 0%, #3f8cf4 58%, #2666d2 100%);
    }

    .note.la {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 32%),
        linear-gradient(180deg, #aa9dff 0%, #7f70ee 58%, #5e48c9 100%);
    }

    .note.si {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.42), transparent 32%),
        linear-gradient(180deg, #ffa1d8 0%, #eb67b3 58%, #c74392 100%);
    }

    .note.support {
      background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.40), transparent 32%),
        linear-gradient(180deg, #77e79a 0%, #38c96e 58%, #249d51 100%);
      color: #ffffff;
    }

    .note .side-mark {
      left: 5px;
      top: 8px;
      bottom: 8px;
      width: 3px;
      background: rgba(255, 255, 255, 0.72);
      opacity: 0.85;
    }

    .note .resize-handle {
      right: -5px;
      top: 10px;
      bottom: 10px;
      width: 12px;
      border: 1px solid rgba(255, 255, 255, 0.54);
      background: rgba(255, 255, 255, 0.46);
      box-shadow: 0 2px 5px rgba(23, 43, 71, 0.12);
    }

    .note .resize-handle::after {
      background: rgba(63, 79, 101, 0.42);
    }

    /* Absolute last top-bar sizing fix for 1280px classroom displays. */
    .songmaker-topbar {
      grid-template-columns: 278px minmax(0, 1fr) auto;
    }

    .top-center .page-btn {
      min-width: 52px;
      padding-left: 7px;
      padding-right: 7px;
      font-size: 13px;
    }

    .top-center .page-btn.add {
      min-width: 82px;
    }

    .top-center .page-btn.delete {
      min-width: 58px;
    }

    .top-center .page-label {
      min-width: 128px;
      font-size: 13px;
      padding-left: 8px;
      padding-right: 8px;
    }

    /* Visual repair pass: readability and no-overlap fixes after browser review. */
    .songmaker-topbar {
      padding-left: 24px;
      padding-right: 12px;
    }

    .top-center {
      padding: 0 8px;
    }

    .top-center .page-controls {
      gap: 6px;
    }

    .top-center .page-btn {
      min-width: 52px;
      padding: 0 7px;
      font-size: 13px;
    }

    .top-center .page-btn.add {
      min-width: 82px;
    }

    .top-center .page-btn.delete {
      min-width: 58px;
      font-size: 13px;
    }

    .top-center .page-label {
      min-width: 128px;
      padding: 0 8px;
      font-size: 13px;
    }

    .songmaker-topbar .top-actions {
      gap: 5px;
    }

    .songmaker-topbar .top-action-btn {
      min-width: 60px;
      padding: 0 7px;
      font-size: 13px;
    }

    .songmaker-topbar .top-action-btn .top-action-icon {
      font-size: 15px;
    }

    .side-panel {
      overflow-y: hidden;
    }

    .side-panel .toolbar-group {
      margin-bottom: 12px;
    }

    .side-panel .select-pill,
    .side-panel .tool-btn,
    .side-panel .zoom-box {
      transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
    }

    .side-panel .select-pill:hover,
    .side-panel .tool-btn:hover,
    .side-panel .zoom-box:hover {
      transform: translateY(-1px);
      border-color: rgba(91, 185, 230, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 12px 24px rgba(33, 185, 242, 0.14);
    }

    .side-panel .ai-accompany {
      border-color: rgba(20, 166, 226, 0.86);
      background: linear-gradient(180deg, #4fd2ff 0%, #21b9f2 58%, #1097d7 100%) !important;
      color: #ffffff !important;
      font-size: 17px;
      font-weight: 950;
      text-shadow: 0 1px 0 rgba(18, 91, 136, 0.25);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -4px 0 rgba(5, 102, 151, 0.13), 0 12px 24px rgba(33, 185, 242, 0.30) !important;
    }

    .tool-btn.play {
      font-size: 0 !important;
    }

    .tool-btn.play::before {
      font-size: 30px;
    }

    .tool-btn.play.playing::before {
      font-size: 26px;
    }

    .score,
    .drum-grid-wrap {
      border-radius: 14px;
    }

    .score {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .drum-grid-wrap {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    /* 第二步融合视觉：参考马卡龙图，提升功能组层次、字体和可读性。 */
    :root {
      --sidebar-width: 306px;
      --topbar-height: 76px;
      --bottom-nav-height: 104px;
      --macaron-bg: #f7fbff;
      --macaron-blue: #21b9f2;
      --macaron-blue-deep: #1097d7;
      --macaron-line: #d9ebf4;
      --macaron-text: #273548;
      --macaron-muted: #6d7c8d;
    }

    body {
      background:
        radial-gradient(circle at 11% 8%, rgba(109, 205, 246, 0.24), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f2f9fd 100%);
      color: var(--macaron-text);
      font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    }

    .app {
      background:
        linear-gradient(90deg, rgba(198, 238, 255, 0.46) 0, rgba(247, 252, 255, 0.9) 23%, #f8fcff 100%);
    }

    .songmaker-topbar {
      border-bottom: 1px solid rgba(205, 226, 237, 0.74);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 26px rgba(30, 74, 108, 0.075);
    }

    .song-title {
      font-size: 24px;
      line-height: 1;
      letter-spacing: 0.075em;
      color: #24384d;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .top-center .page-controls {
      gap: 10px;
    }

    .top-center .page-btn,
    .top-center .page-label,
    .songmaker-topbar .top-action-btn {
      height: 46px;
      border-radius: 999px;
      border-color: rgba(218, 232, 241, 0.92);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 252, 255, 0.94) 100%);
      color: #526173;
      font-size: 15px;
      font-weight: 950;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 8px 20px rgba(31, 81, 115, 0.09);
    }

    .top-center .page-btn.add {
      border-color: rgba(20, 166, 226, 0.86);
      background: linear-gradient(180deg, #4fd2ff 0%, var(--macaron-blue) 58%, var(--macaron-blue-deep) 100%);
      color: #ffffff;
      text-shadow: 0 1px 0 rgba(18, 91, 136, 0.24);
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -4px 0 rgba(5, 102, 151, 0.13),
        0 10px 22px rgba(33, 185, 242, 0.28);
    }

    .top-center .page-btn.delete {
      border-color: rgba(254, 205, 211, 0.95);
      background: linear-gradient(180deg, #fffefe 0%, #fff2f2 100%);
      color: #e05a68;
    }

    .top-center .page-label {
      min-width: 162px;
      color: #324558;
      font-size: 14px;
    }

    .songmaker-topbar .top-action-btn {
      min-width: 76px;
      padding: 0 11px;
      font-size: 14px;
    }

    .main-layout {
      background:
        linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 300px, transparent 560px);
    }

    .side-panel {
      padding: 26px 18px 22px 20px;
      border-right: 1px solid rgba(195, 223, 237, 0.9);
      background:
        radial-gradient(circle at 9% 8%, rgba(116, 211, 249, 0.34), transparent 32%),
        radial-gradient(circle at 35% 92%, rgba(182, 230, 252, 0.36), transparent 38%),
        linear-gradient(180deg, #dff5ff 0%, #f6fcff 68%, #ffffff 100%);
      box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.72),
        10px 0 34px rgba(42, 97, 128, 0.08);
    }

    .side-panel-heading {
      margin: 0 0 16px;
      padding-left: 8px;
      color: #2c4056;
      font-size: 21px;
      line-height: 1.2;
      font-weight: 950;
      letter-spacing: 0.02em;
    }

    .side-panel .toolbar-group {
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(216, 235, 245, 0.92);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 14px 30px rgba(39, 78, 103, 0.10);
    }

    .side-panel .select-pill,
    .side-panel .tool-btn,
    .side-panel .zoom-box {
      min-height: 58px;
      border: 1px solid rgba(218, 232, 241, 0.95);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.96) 100%);
      color: var(--macaron-text);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 0 rgba(40, 92, 120, 0.035),
        0 9px 19px rgba(38, 78, 105, 0.09);
    }

    .side-panel .select-pill:hover,
    .side-panel .tool-btn:hover,
    .side-panel .zoom-box:hover {
      border-color: rgba(102, 194, 236, 0.72);
      background: linear-gradient(180deg, #ffffff 0%, #edf9ff 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 12px 24px rgba(33, 185, 242, 0.15);
    }

    .side-select {
      display: grid;
      grid-template-columns: 44px minmax(62px, auto) minmax(0, 1fr);
      justify-content: stretch;
      gap: 10px;
      padding: 0 14px 0 10px;
    }

    .side-control-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: linear-gradient(180deg, #effaff 0%, #d8f2ff 100%);
      color: #329ed3;
      font-size: 20px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 4px 9px rgba(50, 158, 211, 0.16);
    }

    .side-control-title {
      min-width: 0;
      color: #293a4e;
      font-size: 17px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .side-select select {
      min-width: 0;
      height: 100%;
      color: #425369;
      font-size: 16px;
      font-weight: 900;
      text-align: right;
      text-align-last: right;
    }

    .side-zoom {
      height: 58px;
      min-height: 58px;
      padding: 0 14px 0 10px;
      display: grid;
      grid-template-columns: 44px 44px minmax(0, 1fr) 50px;
      gap: 8px;
      align-items: center;
    }

    .side-zoom label,
    .side-zoom span {
      color: #293a4e;
      font-size: 15px;
      font-weight: 950;
    }

    .side-zoom input {
      width: 100%;
      accent-color: var(--macaron-blue);
    }

    .side-panel .ai-accompany {
      min-height: 58px;
      border-color: rgba(20, 166, 226, 0.86);
      background: linear-gradient(180deg, #4fd2ff 0%, var(--macaron-blue) 58%, var(--macaron-blue-deep) 100%);
      color: #ffffff;
      font-size: 17px;
      font-weight: 950;
      text-shadow: 0 1px 0 rgba(18, 91, 136, 0.25);
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.42),
        inset 0 -4px 0 rgba(5, 102, 151, 0.13),
        0 12px 24px rgba(33, 185, 242, 0.30);
    }

    .side-panel #muteAccompanyBtn {
      font-size: 16px;
      font-weight: 950;
    }

    .main-stage {
      background:
        radial-gradient(circle at 76% 10%, rgba(205, 239, 255, 0.22), transparent 30%),
        linear-gradient(180deg, #f8fcff 0%, #eef8fd 100%);
    }

    .main-stage .workspace {
      padding: 16px 18px 8px;
    }

    .score,
    .drum-grid-wrap {
      border-color: rgba(203, 224, 235, 0.92);
      background: rgba(255, 255, 255, 0.76);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 16px 36px rgba(35, 77, 101, 0.10);
    }

    .measure-ruler {
      height: 32px;
      background: linear-gradient(180deg, rgba(229, 247, 255, 0.82), rgba(244, 251, 255, 0.9));
      color: #5c7084;
      font-size: 15px;
      font-weight: 950;
    }

    .axis-cell,
    .drum-axis div {
      background: rgba(241, 249, 253, 0.68);
      color: #536779;
      font-size: 15px;
      font-weight: 950;
    }

    .axis-cell strong {
      font-size: 19px;
    }

    .cell,
    .drum-cell {
      border-color: rgba(196, 216, 228, 0.96);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 248, 252, 0.92) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -2px 0 rgba(30, 72, 100, 0.035);
    }

    .cell.measure-alt,
    .drum-cell.measure-alt {
      background:
        linear-gradient(180deg, rgba(252, 254, 255, 0.92) 0%, rgba(236, 247, 253, 0.92) 100%);
    }

    .main-stage .toolbar {
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(16px);
      border-top-color: rgba(207, 227, 239, 0.86);
      box-shadow: 0 -12px 28px rgba(36, 78, 103, 0.08);
    }

    .main-stage .toolbar-group,
    .main-stage .bpm-box,
    .main-stage .tool-btn,
    .main-stage .icon-btn {
      font-size: 16px;
      font-weight: 950;
    }

    .main-stage .bpm-box {
      min-width: 176px;
    }

    .main-stage .bpm-box label {
      font-size: 15px;
      color: #68798c;
    }

    .main-stage .bpm-box input {
      font-size: 18px;
    }

    .main-stage .tool-btn.play {
      width: 68px;
      height: 68px;
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.43),
        inset 0 -4px 0 rgba(5, 102, 151, 0.14),
        0 14px 26px rgba(33, 185, 242, 0.32);
    }

    .status-tip {
      color: #b8782f;
      font-size: 14px;
      font-weight: 950;
      background: rgba(255, 250, 239, 0.94);
      box-shadow: 0 8px 20px rgba(185, 120, 47, 0.10);
    }

    /* 第一步布局骨架：左侧编曲设置、顶部小节翻页、底部播放编辑。 */
    :root {
      --sidebar-width: 288px;
      --topbar-height: 72px;
      --jianpu-height: 0px;
      --bottom-nav-height: 96px;
    }

    .app {
      display: grid;
      grid-template-rows: var(--topbar-height) minmax(0, 1fr);
      background: linear-gradient(180deg, #f8fcff 0%, #eef7fc 100%);
    }

    .songmaker-topbar {
      height: var(--topbar-height);
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
      padding: 0 22px 0 28px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
      order: 0;
      z-index: 20;
    }

    .top-left {
      justify-content: flex-start;
      gap: 0;
    }

    .song-title {
      text-align: left;
      letter-spacing: 0.08em;
      font-size: 22px;
      font-weight: 950;
      color: #243244;
      white-space: nowrap;
    }

    .top-center {
      min-width: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 18px;
    }

    .top-center .page-controls {
      margin-left: 0;
      justify-content: center;
      gap: 6px;
    }

    .top-center .page-btn,
    .top-center .page-label {
      height: 42px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 16px rgba(15, 23, 42, 0.07);
    }

    .top-center .page-label {
      min-width: 142px;
      background: #ffffff;
    }

    .top-center .page-btn {
      min-width: 62px;
      padding: 0 10px;
    }

    .top-center .page-btn.add {
      min-width: 92px;
    }

    .top-center .page-btn.delete {
      min-width: 76px;
    }

    .songmaker-topbar .top-actions {
      gap: 6px;
    }

    .songmaker-topbar .top-action-btn {
      min-width: 70px;
      padding: 0 9px;
    }

    .main-layout {
      min-height: 0;
      display: grid;
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      order: 1;
      overflow: hidden;
    }

    .side-panel {
      min-height: 0;
      padding: 24px 18px;
      border-right: 1px solid rgba(181, 216, 235, 0.72);
      background:
        radial-gradient(circle at 24% 8%, rgba(103, 202, 247, 0.24), transparent 32%),
        linear-gradient(180deg, #e9f8ff 0%, #f8fdff 100%);
      box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
      overflow-y: auto;
    }

    .side-panel-heading {
      margin: 0 0 18px;
      padding: 0 8px;
      color: #304156;
      font-size: 18px;
      font-weight: 950;
      letter-spacing: 0.04em;
    }

    .side-panel .toolbar-group,
    .side-panel .zoom-box {
      width: 100%;
      margin-bottom: 14px;
      border-color: rgba(203, 226, 239, 0.95);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(44, 92, 119, 0.10);
    }

    .side-panel .toolbar-group {
      min-height: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
      padding: 14px;
    }

    .side-panel .sound-group,
    .side-panel .utility-group {
      flex: none;
      min-width: 0;
      opacity: 1;
    }

    .side-panel .select-pill,
    .side-panel .tool-btn {
      width: 100%;
      min-width: 0;
      max-width: none;
      height: 48px;
      flex: 0 0 auto;
      justify-content: center;
    }

    .side-panel .sound-group .select-pill:first-child,
    .side-panel .sound-group .select-pill:nth-child(2),
    .side-panel .utility-group .select-pill {
      flex: 0 0 auto;
      max-width: none;
    }

    .side-panel .select-pill select {
      text-align: center;
      text-align-last: center;
    }

    .side-panel .ai-accompany {
      min-width: 0;
    }

    .side-zoom {
      height: 54px;
      padding: 0 14px;
      justify-content: space-between;
    }

    .side-zoom input {
      flex: 1 1 auto;
      width: auto;
      min-width: 88px;
    }

    .main-stage {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) var(--bottom-nav-height);
      overflow: hidden;
      background: #f4f9fc;
    }

    .main-stage .workspace {
      height: auto;
      min-height: 0;
      order: initial;
      padding: 14px 16px 8px;
      overflow: hidden;
      background: transparent;
    }

    .main-stage .toolbar {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      min-height: var(--bottom-nav-height);
      max-height: none;
      order: initial;
      padding: 12px 18px;
      border-top: 1px solid rgba(218, 232, 241, 0.95);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.065);
      overflow: visible;
    }

    .main-stage .toolbar-row {
      width: 100%;
      justify-content: center;
      gap: 12px;
      flex-wrap: nowrap;
    }

    .main-stage .transport-group,
    .main-stage .edit-group {
      flex: 0 0 auto;
    }

    .main-stage .transport-group {
      min-height: 64px;
      padding: 0 14px;
    }

    .main-stage .edit-group {
      min-height: 58px;
      padding: 7px 12px;
    }

    .main-stage .status-tip {
      right: 18px;
      top: -34px;
    }

    .score-scroll,
    .side-panel,
    .toolbar {
      touch-action: pan-x pan-y;
    }

    @media (max-width: 1100px) {
      :root {
        --sidebar-width: 230px;
        --bottom-nav-height: 126px;
      }

      .songmaker-topbar {
        grid-template-columns: 210px minmax(0, 1fr) auto;
        padding: 0 12px;
      }

      .song-title {
        font-size: 18px;
      }

      .top-center .page-controls {
        gap: 6px;
      }

      .top-center .page-label {
        min-width: 148px;
      }

      .top-actions {
        max-width: 300px;
        flex-wrap: wrap;
      }

      .main-stage .toolbar-row {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 176px;
      }

      .songmaker-topbar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px;
        padding: 10px 12px;
      }

      .top-left,
      .top-center,
      .top-right {
        justify-content: center;
        padding: 0;
      }

      .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .side-panel {
        max-height: 168px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(181, 216, 235, 0.72);
      }

      .side-panel-heading {
        display: none;
      }

      .side-panel .toolbar-group,
      .side-panel .zoom-box {
        margin-bottom: 8px;
      }

      .side-panel .toolbar-group {
        flex-direction: row;
        overflow-x: auto;
      }

      .side-panel .select-pill,
      .side-panel .tool-btn {
        min-width: 170px;
      }
    }

    /* Final macaron polish override. Keep this at the end so older layout rules cannot win. */
    :root {
      --sidebar-width: 306px;
      --topbar-height: 76px;
      --bottom-nav-height: 104px;
    }

    .songmaker-topbar {
      height: var(--topbar-height);
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid rgba(205, 226, 237, 0.74);
      box-shadow: 0 10px 26px rgba(30, 74, 108, 0.075);
    }

    .song-title {
      font-size: 24px;
      font-weight: 950;
      color: #24384d;
      letter-spacing: 0.075em;
    }

    .top-center .page-controls {
      gap: 10px;
    }

    .top-center .page-btn,
    .top-center .page-label,
    .songmaker-topbar .top-action-btn {
      height: 46px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 950;
    }

    .top-center .page-label {
      min-width: 162px;
    }

    .top-center .page-btn.add,
    .side-panel .ai-accompany {
      border-color: rgba(20, 166, 226, 0.86);
      background: linear-gradient(180deg, #4fd2ff 0%, #21b9f2 58%, #1097d7 100%);
      color: #fff;
      text-shadow: 0 1px 0 rgba(18, 91, 136, 0.25);
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42), inset 0 -4px 0 rgba(5, 102, 151, 0.13), 0 12px 24px rgba(33, 185, 242, 0.30);
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      background: linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 300px, transparent 560px);
    }

    .side-panel {
      padding: 26px 18px 22px 20px;
      background:
        radial-gradient(circle at 9% 8%, rgba(116, 211, 249, 0.34), transparent 32%),
        radial-gradient(circle at 35% 92%, rgba(182, 230, 252, 0.36), transparent 38%),
        linear-gradient(180deg, #dff5ff 0%, #f6fcff 68%, #ffffff 100%);
      border-right: 1px solid rgba(195, 223, 237, 0.9);
      box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72), 10px 0 34px rgba(42, 97, 128, 0.08);
    }

    .side-panel-heading {
      margin-bottom: 16px;
      color: #2c4056;
      font-size: 21px;
      font-weight: 950;
    }

    .side-panel .toolbar-group {
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(216, 235, 245, 0.92);
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 30px rgba(39, 78, 103, 0.10);
    }

    .side-panel .select-pill,
    .side-panel .tool-btn,
    .side-panel .zoom-box {
      height: 58px;
      min-height: 58px;
      border-radius: 999px;
      border-color: rgba(218, 232, 241, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.96) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -2px 0 rgba(40, 92, 120, 0.035), 0 9px 19px rgba(38, 78, 105, 0.09);
    }

    .side-select {
      display: grid;
      grid-template-columns: 44px minmax(62px, auto) minmax(0, 1fr);
      gap: 10px;
      justify-content: stretch;
      padding: 0 14px 0 10px;
    }

    .side-control-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: linear-gradient(180deg, #effaff 0%, #d8f2ff 100%);
      color: #329ed3;
      font-size: 20px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 9px rgba(50, 158, 211, 0.16);
    }

    .side-control-title {
      color: #293a4e;
      font-size: 17px;
      font-weight: 950;
      white-space: nowrap;
    }

    .side-select select {
      color: #425369;
      font-size: 16px;
      font-weight: 900;
      text-align: right;
      text-align-last: right;
    }

    .side-zoom {
      display: grid;
      grid-template-columns: 44px 44px minmax(0, 1fr) 50px;
      gap: 8px;
      align-items: center;
      padding: 0 14px 0 10px;
    }

    .side-zoom label,
    .side-zoom span {
      color: #293a4e;
      font-size: 15px;
      font-weight: 950;
    }

    .main-stage {
      grid-template-rows: minmax(0, 1fr) var(--bottom-nav-height);
      background: radial-gradient(circle at 76% 10%, rgba(205, 239, 255, 0.22), transparent 30%), linear-gradient(180deg, #f8fcff 0%, #eef8fd 100%);
    }

    .main-stage .workspace {
      padding: 16px 18px 8px;
    }

    .score,
    .drum-grid-wrap {
      border-color: rgba(203, 224, 235, 0.92);
      background: rgba(255, 255, 255, 0.76);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 16px 36px rgba(35, 77, 101, 0.10);
    }

    .measure-ruler {
      height: 32px;
      background: linear-gradient(180deg, rgba(229, 247, 255, 0.82), rgba(244, 251, 255, 0.9));
      color: #5c7084;
      font-size: 15px;
      font-weight: 950;
    }

    .axis-cell,
    .drum-axis div {
      background: rgba(241, 249, 253, 0.68);
      color: #536779;
      font-size: 15px;
      font-weight: 950;
    }

    .cell,
    .drum-cell {
      border-color: rgba(196, 216, 228, 0.96);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 248, 252, 0.92) 100%);
    }

    .main-stage .toolbar {
      min-height: var(--bottom-nav-height);
      background: rgba(255, 255, 255, 0.78);
      border-top-color: rgba(207, 227, 239, 0.86);
      box-shadow: 0 -12px 28px rgba(36, 78, 103, 0.08);
    }

    .main-stage .toolbar-group,
    .main-stage .bpm-box,
    .main-stage .tool-btn,
    .main-stage .icon-btn {
      font-size: 16px;
      font-weight: 950;
    }

    .main-stage .tool-btn.play {
      width: 68px;
      height: 68px;
    }

    /* Final display lock: Xiaoyin assistant sidebar and 4-measure middle-register view. */
    @media (min-width: 761px) {
      :root {
        --sidebar-width: 380px;
        --jianpu-height: 0px;
        --bottom-nav-height: 104px;
      }

      .songmaker-topbar {
        grid-template-columns: minmax(390px, 1fr) auto minmax(390px, 1fr);
      }

      .main-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        background: linear-gradient(90deg, rgba(210, 244, 255, 0.62) 0, rgba(247, 252, 255, 0.72) 380px, transparent 620px);
      }

      .side-panel {
        position: relative;
        width: var(--sidebar-width);
        padding-left: 18px;
        padding-right: 16px;
        padding-bottom: 218px;
        overflow: visible;
      }

      .side-panel .toolbar-group {
        padding-left: 12px;
        padding-right: 12px;
      }

      .side-control {
        grid-template-columns: 40px minmax(60px, auto) minmax(0, 1fr);
        gap: 8px;
      }

      .main-stage .workspace {
        padding-left: 14px;
        padding-right: 14px;
      }

      .workspace > .score-scroll {
        justify-content: flex-start;
      }

      .score,
      .drum-grid-wrap {
        max-width: none;
      }

      .top-left {
        justify-content: flex-start;
        min-width: 0;
      }

      .top-center {
        justify-content: center;
        min-width: 0;
        padding: 0 16px;
      }

      .top-right {
        justify-content: flex-end;
        min-width: 0;
      }

      .song-title {
        text-align: center;
        color: #24384d;
        font-size: 26px;
        font-weight: 950;
        letter-spacing: 0.08em;
        white-space: nowrap;
      }

      .songmaker-topbar .top-actions {
        justify-content: flex-start;
        gap: 7px;
      }

      .songmaker-topbar .page-controls {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        margin-left: 0;
      }

      .songmaker-topbar .page-btn {
        min-width: 52px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
      }

      .songmaker-topbar .page-btn.add {
        min-width: 82px;
      }

      .songmaker-topbar .page-btn.delete {
        min-width: 58px;
      }

      .songmaker-topbar .page-label {
        min-width: 128px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
      }

      .songmaker-topbar .top-action-btn {
        min-width: 70px;
        padding-left: 9px;
        padding-right: 9px;
      }

      .xiaoyin-assistant {
        left: 24px;
        bottom: 16px;
        width: 332px;
        min-height: 208px;
      }

      .xiaoyin-avatar {
        width: 182px;
        height: 184px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        filter: drop-shadow(0 18px 18px rgba(25, 113, 151, 0.18));
      }

      .xiaoyin-avatar img {
        width: 178px;
      }

      .xiaoyin-bubble {
        left: 144px;
        bottom: 132px;
        width: 194px;
      }

      .xiaoyin-name {
        left: 36px;
        bottom: 0;
      }
    }

    @media (min-width: 761px) and (max-width: 1320px) {
      .songmaker-topbar {
        grid-template-columns: minmax(335px, 1fr) auto minmax(350px, 1fr);
        padding-left: 14px;
        padding-right: 14px;
      }

      .song-title {
        font-size: 23px;
      }

      .songmaker-topbar .top-actions,
      .songmaker-topbar .page-controls {
        gap: 5px;
      }

      .songmaker-topbar .top-action-btn {
        min-width: 58px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
      }

      .songmaker-topbar .page-label {
        min-width: 112px;
      }
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 176px;
      }

      .songmaker-topbar {
        grid-template-columns: 1fr;
      }

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

      .side-panel {
        width: auto;
      }
    }

    /* Pitch range navigation: compact rail beside the pitch axis. */
    :root {
      --pitch-band-nav-width: 46px;
      --pitch-band-nav-height: 360px;
      --pitch-band-active: #129fda;
      --pitch-band-active-soft: rgba(33, 185, 242, 0.12);
      --pitch-band-divider: rgba(18, 159, 218, 0.42);
    }

    .score {
      width: calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      min-width: calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      flex: 0 0 calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      grid-template-columns: var(--pitch-band-nav-width) var(--axis-width) calc(var(--visible-cols) * var(--beat-width));
    }

    .pitch-band-corner {
      grid-column: 1;
      grid-row: 1;
      background: #f8fbfd;
      border-bottom: 1px solid #dbe8f0;
    }

    .score > .measure-ruler {
      grid-column: 3;
    }

    .pitch-band-nav {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 35;
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      width: var(--pitch-band-nav-width);
      height: var(--pitch-band-nav-height);
      padding: 0;
      background: #f8fbfd;
      border-right: 1px solid #dbe8f0;
    }

    .pitch-band-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 100%;
      min-height: 44px;
      width: 100%;
      height: 100%;
      border: 0;
      border-bottom: 1px solid #dbe8f0;
      border-radius: 0;
      background: #ffffff;
      color: #506175;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .pitch-band-btn:first-child {
      border-top-left-radius: 14px;
    }

    .pitch-band-btn:last-child {
      border-bottom: 0;
    }

    .pitch-band-btn:hover,
    .pitch-band-btn:focus-visible {
      color: #086f9e;
      background: #eefaff;
      box-shadow: inset 3px 0 0 rgba(18, 159, 218, 0.38);
      outline: none;
    }

    .pitch-band-btn.active {
      background: #e9f8ff;
      color: #075c84;
      box-shadow: inset 4px 0 0 var(--pitch-band-active), inset 0 0 0 1px rgba(18, 159, 218, 0.18);
    }

    .score > .pitch-axis {
      grid-column: 2;
      grid-row: 2;
      position: sticky;
      left: var(--pitch-band-nav-width);
      z-index: 34;
    }

    .score > .grid-wrap {
      grid-column: 3;
      grid-row: 2;
    }

    .axis-cell.pitch-band-start,
    .cell.pitch-band-start {
      border-top-color: var(--pitch-band-divider);
      box-shadow: inset 0 2px 0 var(--pitch-band-divider);
    }

    .cell.pitch-row-high {
      background-color: #fffdf5;
    }

    .cell.pitch-row-mid {
      background-color: #f8fcff;
    }

    .cell.pitch-row-low {
      background-color: #f7fff9;
    }

    .score[data-active-pitch-band="high"] .cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .cell.pitch-row-low {
      border-color: rgba(18, 159, 218, 0.56);
      background-color: var(--pitch-band-active-soft);
      box-shadow: inset 0 0 0 2px rgba(33, 185, 242, 0.18);
    }

    .score[data-active-pitch-band="high"] .axis-cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .axis-cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .axis-cell.pitch-row-low {
      background: #e9f8ff;
      color: #075c84;
      box-shadow: inset 3px 0 0 var(--pitch-band-active);
    }

    @media (max-width: 760px) {
      :root {
        --pitch-band-nav-width: 42px;
      }

      .pitch-band-nav {
        width: var(--pitch-band-nav-width);
      }

      .pitch-band-btn {
        min-width: 100%;
      }
    }

    /* Continuous timeline: one horizontal scrollbar controls the full song width. */
    .workspace > .score-scroll,
    .drum-section .score-scroll {
      overflow-x: auto;
      justify-content: flex-start;
      min-width: 0;
      max-width: 100%;
      width: 100%;
    }

    .main-stage,
    .workspace,
    .drum-section {
      min-width: 0;
      max-width: 100%;
    }

    .drum-grid-wrap {
      width: calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      min-width: calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      flex: 0 0 calc(var(--pitch-band-nav-width) + var(--axis-width) + (var(--visible-cols) * var(--beat-width)));
      grid-template-columns: var(--pitch-band-nav-width) var(--axis-width) calc(var(--visible-cols) * var(--beat-width));
    }

    .drum-axis {
      grid-column: 2;
      position: sticky;
      left: var(--pitch-band-nav-width);
      z-index: 34;
    }

    .drum-grid-wrap > .grid-wrap {
      grid-column: 3;
    }

    /* Absolute final Xiaoyin override: this block is intentionally last. */
    .xiaoyin-assistant::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }

    .xiaoyin-bubble {
      width: 260px !important;
      min-height: 104px !important;
      gap: 16px !important;
      padding: 20px 23px 19px 25px !important;
    }

    .xiaoyin-bubble strong {
      font-size: 23px !important;
      line-height: 1.2 !important;
    }

    .xiaoyin-bubble span {
      min-height: 32px !important;
      padding: 8px 15px !important;
      border: 1px solid rgba(34, 174, 196, 0.28) !important;
      background: linear-gradient(180deg, #42c7d9 0%, #21afc4 100%) !important;
      color: #ffffff !important;
      font-size: 17px !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      text-shadow: 0 1px 1px rgba(7, 96, 112, 0.24) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 7px 14px rgba(33, 175, 196, 0.16) !important;
    }

    @media (min-width: 761px) {
      .xiaoyin-assistant {
        width: 388px !important;
        min-height: 246px !important;
      }

      .xiaoyin-bubble {
        left: 128px !important;
        bottom: 164px !important;
        width: 260px !important;
      }
    }

    /* Modern visual lock at true file end. */
    :root {
      --bg: #f3f6fa;
      --panel: #ffffff;
      --ink: #172033;
      --muted: #687487;
      --line: #dce5ee;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --brand: #2563eb;
      --brand-soft: #e8f0ff;
      --danger: #dc2626;
      --danger-soft: #fff1f2;
      --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.06);
      --topbar-height: 72px;
      --bottom-nav-height: 112px;
      --sidebar-width: 344px;
      --pitch-band-active: #2563eb;
      --pitch-band-active-soft: rgba(37, 99, 235, 0.08);
      --pitch-band-divider: rgba(37, 99, 235, 0.24);
    }

    .app {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
    }

    .songmaker-topbar,
    .main-stage .toolbar {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: var(--line) !important;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
    }

    .main-layout {
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
      background: transparent !important;
    }

    .side-panel {
      width: var(--sidebar-width) !important;
      padding: 20px 16px 190px !important;
      background: #f8fafc !important;
      border-right: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .side-panel .toolbar-group,
    .main-stage .toolbar-group,
    .page-controls,
    .drum-duration-controls {
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: none !important;
    }

    .tool-btn,
    .select-pill,
    .bpm-box,
    .icon-btn,
    .drum-duration-btn,
    .key-mode-btn {
      border-radius: 10px !important;
      border-color: var(--line) !important;
      background: #ffffff !important;
      color: var(--ink) !important;
      box-shadow: none !important;
      text-shadow: none !important;
      font-weight: 700 !important;
    }

    .page-btn.add,
    .tool-btn.ai-accompany,
    .tool-btn.play,
    .drum-duration-btn.active,
    .key-mode-btn.active {
      border-color: var(--brand) !important;
      background: var(--brand) !important;
      color: #ffffff !important;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
    }

    .page-btn.delete,
    .tool-btn.danger-action,
    .clear-work-btn,
    .rhythm-delete,
    .selection-action-delete,
    #deleteAccompanyBtn {
      border-color: #fecdd3 !important;
      background: var(--danger-soft) !important;
      color: var(--danger) !important;
    }

    .side-control-icon,
    .btn-symbol {
      width: 30px !important;
      height: 30px !important;
      border-radius: 8px !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    .score,
    .drum-grid-wrap {
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--surface) !important;
      box-shadow: var(--shadow-subtle) !important;
    }

    .measure-ruler,
    .pitch-band-corner,
    .pitch-band-nav,
    .pitch-axis,
    .drum-axis,
    .axis-cell,
    .drum-axis div {
      background: #f8fafc !important;
      color: #64748b !important;
      box-shadow: none !important;
    }

    .pitch-band-btn {
      background: #ffffff !important;
      color: #64748b !important;
      box-shadow: none !important;
    }

    .pitch-band-btn.active,
    .score[data-active-pitch-band="high"] .axis-cell.pitch-row-high,
    .score[data-active-pitch-band="mid"] .axis-cell.pitch-row-mid,
    .score[data-active-pitch-band="low"] .axis-cell.pitch-row-low {
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      box-shadow: inset 3px 0 0 var(--brand) !important;
    }

    .cell,
    .drum-cell {
      margin: 4px 1px !important;
      border-radius: 6px !important;
      border-color: #e5edf5 !important;
      background: #ffffff !important;
      box-shadow: none !important;
    }

    .cell.measure-alt,
    .drum-cell.measure-alt {
      background: #f8fafc !important;
    }

    .cell:hover,
    .drum-cell:hover,
    .cell.track-hover,
    .drum-cell.track-hover {
      background: #eef5ff !important;
      border-color: #93b4f7 !important;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
    }

    .note {
      border-radius: 8px !important;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
      text-shadow: none !important;
    }

    .note.do,
    .note.red { background: #ee5267 !important; color: #ffffff !important; }
    .note.re { background: #f59e0b !important; color: #1f2937 !important; }
    .note.mi,
    .note.yellow { background: #f7c948 !important; color: #1f2937 !important; }
    .note.fa,
    .note.green,
    .note.support { background: #36b86a !important; color: #ffffff !important; }
    .note.sol,
    .note.blue { background: #3b82f6 !important; color: #ffffff !important; }
    .note.la,
    .note.purple { background: #8b5cf6 !important; color: #ffffff !important; }
    .note.si { background: #ec4899 !important; color: #ffffff !important; }

    .drum-hit-marker::after {
      background: var(--drum-hit-ink, #ffffff) !important;
    }

    .xiaoyin-assistant {
      left: 18px !important;
      bottom: 14px !important;
      width: 308px !important;
      min-height: 176px !important;
    }

    .xiaoyin-avatar {
      width: 136px !important;
      height: 140px !important;
      filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.12)) !important;
    }

    .xiaoyin-avatar img {
      width: 134px !important;
    }

    .xiaoyin-bubble {
      left: 112px !important;
      bottom: 106px !important;
      width: 196px !important;
      min-height: 82px !important;
      padding: 14px 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px 14px 14px 6px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: var(--shadow-subtle) !important;
    }

    .xiaoyin-bubble strong {
      color: #172033 !important;
      font-size: 17px !important;
    }

    .xiaoyin-bubble span {
      min-height: 28px !important;
      padding: 7px 12px !important;
      border-color: rgba(37, 99, 235, 0.14) !important;
      background: var(--brand-soft) !important;
      color: var(--brand) !important;
      font-size: 13px !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    @media (max-width: 760px) {
      :root {
        --topbar-height: 132px;
        --bottom-nav-height: 172px;
        --sidebar-width: 100%;
        --pitch-band-nav-width: 42px;
      }

      .main-layout {
        grid-template-columns: 1fr !important;
      }

      .side-panel {
        width: 100% !important;
        max-height: 172px !important;
        padding: 10px 12px !important;
      }

      .xiaoyin-assistant {
        display: none !important;
      }
    }

    /* True final pitch-band rail override: keep the register switcher visible while the pitch grid scrolls. */
    :root {
      --pitch-band-nav-width: 64px;
    }

    .score {
      overflow: visible !important;
    }

    .score > .grid-wrap {
      overflow: hidden;
    }

    .pitch-band-corner {
      position: sticky;
      left: 0;
      z-index: 72;
      width: var(--pitch-band-nav-width);
    }

    .pitch-band-nav {
      position: sticky !important;
      top: 0;
      left: 0;
      z-index: 70;
      width: var(--pitch-band-nav-width) !important;
      background: #f8fafc !important;
      border-right: 1px solid var(--line) !important;
    }

    .pitch-band-btn {
      min-width: 100%;
      min-height: 48px;
      padding: 0 6px;
      font-size: 14px;
      line-height: 1.1;
      white-space: nowrap;
      writing-mode: horizontal-tb;
    }

    .score > .pitch-axis,
    .drum-axis {
      left: var(--pitch-band-nav-width) !important;
    }

    @media (max-width: 760px) {
      :root {
        --pitch-band-nav-width: 58px;
      }

      .pitch-band-btn {
        font-size: 13px;
        padding: 0 4px;
      }
    }

    /* AI Xiaoyin assistant card final override: turn the mascot into a compact AI tool entry. */
    .xiaoyin-assistant {
      position: relative !important;
      left: auto !important;
      bottom: auto !important;
      width: 100% !important;
      min-height: 112px !important;
      display: grid !important;
      grid-template-columns: 68px minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      gap: 8px 13px !important;
      margin-top: auto !important;
      padding: 14px !important;
      border: 1px solid rgba(37, 99, 235, 0.16) !important;
      border-radius: 8px !important;
      background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%) !important;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
      color: #172033 !important;
      text-align: left !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
    }

    .xiaoyin-assistant::before,
    .xiaoyin-assistant::after {
      content: none !important;
      display: none !important;
    }

    .xiaoyin-avatar {
      position: relative !important;
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
      width: 68px !important;
      height: 68px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid rgba(37, 99, 235, 0.14) !important;
      border-radius: 8px !important;
      background: #ffffff !important;
      box-shadow: none !important;
      filter: none !important;
      overflow: hidden !important;
    }

    .xiaoyin-avatar img {
      width: 76px !important;
      height: auto !important;
      transform: translateY(4px) !important;
      animation: none !important;
      filter: none !important;
    }

    .xiaoyin-bubble {
      position: static !important;
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: auto !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      text-align: left !important;
      animation: none !important;
    }

    .xiaoyin-bubble::before {
      content: none !important;
      display: none !important;
    }

    .xiaoyin-bubble strong {
      color: #172033 !important;
      font-size: 17px !important;
      font-weight: 900 !important;
      line-height: 1.18 !important;
      letter-spacing: 0 !important;
    }

    .xiaoyin-bubble span {
      width: fit-content !important;
      min-height: 32px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 12px !important;
      border: 1px solid #2563eb !important;
      border-radius: 8px !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    .xiaoyin-name {
      position: static !important;
      grid-column: 2 !important;
      grid-row: 2 !important;
      min-width: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #526173 !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.35 !important;
      pointer-events: none !important;
      white-space: normal !important;
    }

    .xiaoyin-assistant:hover,
    .xiaoyin-assistant:focus-visible {
      border-color: rgba(37, 99, 235, 0.34) !important;
      background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%) !important;
      box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14) !important;
    }

    .xiaoyin-assistant:hover .xiaoyin-avatar,
    .xiaoyin-assistant:focus-visible .xiaoyin-avatar,
    .xiaoyin-assistant:active .xiaoyin-avatar {
      transform: none !important;
      filter: none !important;
    }

    .xiaoyin-assistant:active {
      transform: translateY(1px) !important;
    }

    .xiaoyin-assistant:focus-visible {
      outline: 3px solid rgba(37, 99, 235, 0.28) !important;
      outline-offset: 3px !important;
    }

    @media (min-width: 761px) and (max-width: 1180px) {
      .xiaoyin-assistant {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        min-height: 104px !important;
        padding: 12px !important;
      }

      .xiaoyin-avatar {
        width: 58px !important;
        height: 58px !important;
      }

      .xiaoyin-avatar img {
        width: 68px !important;
      }

      .xiaoyin-bubble strong {
        font-size: 15px !important;
      }
    }

    @media (max-width: 760px) {
      .xiaoyin-assistant {
        display: none !important;
      }
    }

    /* AI identity asset final polish: use the new symbol as a product UI mark, not a mascot render. */
    .welcome-start-avatar {
      width: min(176px, 44vw) !important;
      border-radius: 28px !important;
      filter: drop-shadow(0 18px 22px rgba(37, 99, 235, 0.14)) !important;
    }

    .ai-loading-card {
      grid-template-columns: 188px minmax(0, 1fr) !important;
      min-height: 292px !important;
      gap: 28px !important;
      border: 1px solid rgba(37, 99, 235, 0.16) !important;
      border-radius: 18px !important;
      box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16) !important;
    }

    .ai-loading-robot-wrap {
      width: 172px !important;
      height: 172px !important;
      border: 1px solid rgba(37, 99, 235, 0.12) !important;
      border-radius: 24px !important;
      background: #f8fbff !important;
      overflow: visible !important;
    }

    .ai-loading-robot {
      width: 148px !important;
      height: 148px !important;
      object-fit: contain !important;
      animation: aiThinkingBreath 1.8s ease-in-out infinite !important;
    }

    .ai-loading-kicker {
      color: #2563eb !important;
    }

    .xiaoyin-avatar img {
      width: 52px !important;
      transform: none !important;
    }

    @media (max-width: 620px) {
      .ai-loading-card {
        grid-template-columns: 1fr !important;
        min-height: 430px !important;
      }

      .ai-loading-robot-wrap {
        width: 160px !important;
        height: 160px !important;
      }

      .ai-loading-robot {
        width: 138px !important;
        height: 138px !important;
      }
    }

    /* 2D Xiaoyin mascot final override: restore the lower-left companion position without a card frame. */
    .side-panel {
      position: relative !important;
      padding-bottom: 224px !important;
    }

    .xiaoyin-assistant {
      position: absolute !important;
      left: 16px !important;
      right: auto !important;
      bottom: 16px !important;
      width: 318px !important;
      min-height: 174px !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #172033 !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
      text-align: left !important;
      overflow: visible !important;
    }

    .xiaoyin-avatar {
      position: absolute !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 138px !important;
      height: 138px !important;
      display: block !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      filter: drop-shadow(0 14px 18px rgba(37, 99, 235, 0.15)) !important;
      overflow: visible !important;
    }

    .xiaoyin-avatar img {
      width: 138px !important;
      height: 138px !important;
      display: block !important;
      transform: none !important;
      animation: none !important;
      filter: none !important;
    }

    .xiaoyin-bubble {
      position: absolute !important;
      left: 108px !important;
      bottom: 92px !important;
      width: 198px !important;
      min-height: 72px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      gap: 8px !important;
      padding: 13px 15px 13px 17px !important;
      border: 1px solid rgba(37, 99, 235, 0.14) !important;
      border-radius: 18px 18px 18px 7px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10) !important;
      text-align: left !important;
      pointer-events: none !important;
    }

    .xiaoyin-bubble::before {
      content: "" !important;
      position: absolute !important;
      left: 10px !important;
      bottom: -7px !important;
      width: 15px !important;
      height: 15px !important;
      display: block !important;
      border-left: 1px solid rgba(37, 99, 235, 0.14) !important;
      border-bottom: 1px solid rgba(37, 99, 235, 0.14) !important;
      border-radius: 0 0 0 4px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      transform: rotate(-16deg) !important;
    }

    .xiaoyin-bubble strong {
      color: #172033 !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      line-height: 1.14 !important;
      letter-spacing: 0 !important;
    }

    .xiaoyin-bubble span {
      width: fit-content !important;
      min-height: 30px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 11px !important;
      border: 1px solid #2563eb !important;
      border-radius: 8px !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      text-shadow: none !important;
      box-shadow: none !important;
    }

    .xiaoyin-name {
      display: none !important;
    }

    .xiaoyin-assistant:hover,
    .xiaoyin-assistant:focus-visible {
      background: transparent !important;
      box-shadow: none !important;
    }

    .xiaoyin-assistant:hover .xiaoyin-avatar,
    .xiaoyin-assistant:focus-visible .xiaoyin-avatar {
      transform: translateY(-3px) !important;
      filter: drop-shadow(0 18px 22px rgba(37, 99, 235, 0.2)) !important;
    }

    .xiaoyin-assistant:active .xiaoyin-avatar {
      transform: translateY(1px) scale(0.985) !important;
    }

    .xiaoyin-assistant:focus-visible {
      outline: 3px solid rgba(37, 99, 235, 0.28) !important;
      outline-offset: 5px !important;
      border-radius: 24px !important;
    }

    @media (prefers-reduced-motion: no-preference) {
      .xiaoyin-avatar img {
        animation: xiaoyinFloat 3.8s ease-in-out infinite !important;
      }
    }

    @media (min-width: 761px) and (max-width: 1180px) {
      .xiaoyin-assistant {
        width: 286px !important;
        min-height: 160px !important;
      }

      .xiaoyin-avatar,
      .xiaoyin-avatar img {
        width: 122px !important;
        height: 122px !important;
      }

      .xiaoyin-bubble {
        left: 96px !important;
        bottom: 82px !important;
        width: 178px !important;
      }
    }

    @media (max-width: 760px) {
      .xiaoyin-assistant {
        position: fixed !important;
        left: 12px !important;
        bottom: 12px !important;
        width: 222px !important;
        min-height: 116px !important;
        display: block !important;
        z-index: 260 !important;
      }

      .xiaoyin-avatar,
      .xiaoyin-avatar img {
        width: 88px !important;
        height: 88px !important;
      }

      .xiaoyin-bubble {
        left: 72px !important;
        bottom: 58px !important;
        width: 140px !important;
        min-height: 54px !important;
        padding: 9px 10px 9px 12px !important;
      }

      .xiaoyin-bubble strong {
        font-size: 14px !important;
      }

      .xiaoyin-bubble span {
        min-height: 26px !important;
        padding: 0 9px !important;
        font-size: 12px !important;
      }
    }

    /* Bottom control bar final pass: move structure editing down, strengthen play, and use text undo. */
    .songmaker-topbar .page-controls {
      gap: 8px !important;
    }

    .songmaker-topbar .page-controls .page-btn {
      min-width: 72px !important;
    }

    .main-stage .toolbar-row.primary-row {
      justify-content: center !important;
      align-items: center !important;
      gap: 10px !important;
    }

    .main-stage .structure-group {
      flex: 0 0 auto !important;
      min-height: 56px !important;
      padding: 7px !important;
      border: 1px solid rgba(37, 99, 235, 0.16) !important;
      border-radius: 12px !important;
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    .main-stage .structure-group #addPageBtn {
      min-width: 118px !important;
      height: 44px !important;
      border-color: #2563eb !important;
      border-radius: 10px !important;
      background: #ffffff !important;
      color: #1d4ed8 !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    .main-stage .structure-group #addPageBtn:hover,
    .main-stage .structure-group #addPageBtn:focus-visible {
      background: #eef5ff !important;
      border-color: #1d4ed8 !important;
    }

    .main-stage .tool-btn.play {
      position: relative !important;
      width: 66px !important;
      min-width: 66px !important;
      height: 66px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: #2563eb !important;
      color: #ffffff !important;
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28) !important;
      font-size: 0 !important;
      overflow: hidden !important;
    }

    .main-stage .tool-btn.play::before {
      content: "" !important;
      position: absolute !important;
      left: 27px !important;
      top: 21px !important;
      width: 0 !important;
      height: 0 !important;
      border-top: 12px solid transparent !important;
      border-bottom: 12px solid transparent !important;
      border-left: 18px solid #ffffff !important;
      margin: 0 !important;
    }

    .main-stage .tool-btn.play::after {
      content: none !important;
    }

    .main-stage .tool-btn.play.playing {
      background: #0f172a !important;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.26) !important;
    }

    .main-stage .tool-btn.play.playing::before,
    .main-stage .tool-btn.play.playing::after {
      content: "" !important;
      position: absolute !important;
      top: 21px !important;
      width: 7px !important;
      height: 24px !important;
      border: 0 !important;
      border-radius: 2px !important;
      background: #ffffff !important;
    }

    .main-stage .tool-btn.play.playing::before {
      left: 24px !important;
    }

    .main-stage .tool-btn.play.playing::after {
      left: 37px !important;
    }

    .main-stage .tool-btn.play:hover,
    .main-stage .tool-btn.play:focus-visible {
      transform: translateY(-1px) !important;
      background: #1d4ed8 !important;
    }

    .main-stage .tool-btn.play.playing:hover,
    .main-stage .tool-btn.play.playing:focus-visible {
      background: #111827 !important;
    }

    .main-stage .undo-action {
      min-width: 68px !important;
      height: 44px !important;
      padding: 0 16px !important;
      border: 1px solid #d6e0ec !important;
      border-radius: 10px !important;
      background: #ffffff !important;
      color: #334155 !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    .main-stage .undo-action:hover,
    .main-stage .undo-action:focus-visible {
      border-color: #93b4f7 !important;
      background: #eef5ff !important;
      color: #1d4ed8 !important;
    }

    .main-stage .undo-action:disabled {
      border-color: #e2e8f0 !important;
      background: #f8fafc !important;
      color: #94a3b8 !important;
      cursor: not-allowed !important;
      transform: none !important;
    }

    @media (max-width: 1180px) {
      .main-stage .tool-btn.play {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
      }

      .main-stage .tool-btn.play::before {
        left: 25px !important;
        top: 19px !important;
        border-top-width: 11px !important;
        border-bottom-width: 11px !important;
        border-left-width: 17px !important;
      }

      .main-stage .tool-btn.play.playing::before,
      .main-stage .tool-btn.play.playing::after {
        top: 19px !important;
        height: 22px !important;
      }

      .main-stage .tool-btn.play.playing::before {
        left: 22px !important;
      }

      .main-stage .tool-btn.play.playing::after {
        left: 34px !important;
      }
    }

    @media (max-width: 760px) {
      .main-stage .toolbar-row.primary-row {
        flex-wrap: wrap !important;
      }

      .main-stage .structure-group {
        flex: 1 1 126px !important;
      }

      .main-stage .structure-group #addPageBtn {
        width: 100% !important;
      }
    }

    /* Bottom toolbar overflow fix: allow a compact two-line control band when the editor width is narrow. */
    :root {
      --bottom-nav-height: 148px;
    }

    .main-stage .toolbar {
      overflow: hidden !important;
    }

    .main-stage .toolbar-row.primary-row {
      max-width: 100% !important;
      min-width: 0 !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-content: center !important;
      gap: 8px !important;
    }

    .main-stage .transport-group,
    .main-stage .edit-group,
    .main-stage .structure-group,
    .main-stage .view-actions {
      max-width: 100% !important;
    }

    .main-stage .transport-group {
      flex: 1 1 308px !important;
    }

    .main-stage .edit-group {
      flex: 1 1 438px !important;
    }

    .main-stage .structure-group {
      flex: 0 0 136px !important;
    }

    .main-stage .view-actions {
      flex: 0 1 404px !important;
    }

    .main-stage .bpm-box {
      flex: 1 1 206px !important;
      min-width: 206px !important;
    }

    .main-stage .bpm-slider {
      width: 96px !important;
    }

    @media (min-width: 1500px) {
      :root {
        --bottom-nav-height: 112px;
      }

      .main-stage .toolbar-row.primary-row {
        flex-wrap: nowrap !important;
        justify-content: center !important;
      }
    }

    @media (max-width: 760px) {
      :root {
        --bottom-nav-height: 196px;
      }
    }