:root{--bg:#0d1015;--panel:#171b22;--panel2:#202631;--line:#303847;--text:#f5f7fb;--muted:#9aa5b4;--accent:#6ee7b7;--accent2:#34d399;--danger:#fb7185}
    *{box-sizing:border-box}html,body{margin:0;min-height:100%}
    body{background:linear-gradient(180deg,#0b0e13,#11151c);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    .app{width:95vw;max-width:1380px;margin:0 auto;padding:14px 0 42px}
    h1{margin:0;font-size:clamp(26px,4vw,44px);line-height:1.05}.subtitle{color:var(--muted);margin:4px 0 4px;font-size:13px}.release-note{margin:0 0 4px;color:var(--muted);font-size:12px}.site-nav-link{display:inline-block;margin-bottom:7px;color:#9bd9c0;font-size:12px;text-decoration:none}.site-nav-link:hover{text-decoration:underline}.brand-link{color:#9bd9c0;font-size:12px;text-decoration:none}.brand-link:hover{text-decoration:underline}.test-release-badge{display:inline-block;margin-left:7px;vertical-align:middle;border:1px solid #527469;border-radius:999px;padding:4px 8px;color:#b9f3db;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
    .app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:4px}
    .app-title-block{min-width:0}
    .top-language-picker{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--muted);font-size:12px;padding-top:2px}
    .top-language-picker select{width:auto;min-width:112px;min-height:34px;padding:5px 28px 5px 9px;background:#0f1319;color:var(--text);border:1px solid var(--line);border-radius:9px}

    .panel{background:rgba(23,27,34,.97);border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0}
    .section-title{font-weight:800;margin:0 0 8px;font-size:14px}
    .control-groups{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
    .control-group{border:1px solid var(--line);border-radius:12px;padding:9px;background:#12171e;min-width:0}
    .control-group:nth-of-type(1){grid-column:span 3}.control-group:nth-of-type(2){grid-column:span 3}.control-group:nth-of-type(3){grid-column:span 6}.control-group:nth-of-type(4){grid-column:span 6}.control-group:nth-of-type(5){grid-column:span 6}
    .control-group-title{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none}
    .control-group-title::-webkit-details-marker{display:none}.control-group-title::after{content:"▾";float:right;color:var(--muted)}.control-group:not([open]) .control-group-title::after{transform:rotate(-90deg)}.control-group[open] .control-group-title{margin-bottom:7px}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}
    .control-group:nth-of-type(3) .grid,.control-group:nth-of-type(4) .grid,.control-group:nth-of-type(5) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    label{display:grid;gap:4px;color:var(--muted);font-size:11px;min-width:0}
    input,select,button{font:inherit}input,select{width:100%;min-width:0;min-height:38px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:#0f1319;color:var(--text);font-size:14px}
    button{min-height:38px;border:1px solid var(--line);border-radius:9px;padding:7px 11px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:14px}
    button:hover{filter:brightness(1.08)}button:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}
    button.primary{background:var(--accent2);color:#062017;border-color:transparent;font-weight:800}button.stop{background:#3a1c25;border-color:#633040}
    .small-btn{min-width:36px;padding:5px 8px!important;font-size:18px;font-weight:800}.stepper{display:grid;grid-template-columns:36px 1fr 36px;gap:5px;align-items:center}
    .value{min-height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:#0f1319;color:var(--text);font-weight:800;font-size:15px}
    .volrow{display:grid;grid-template-columns:minmax(70px,1fr) auto;align-items:center;gap:6px}.volrow input{min-height:30px;padding:0}
    .progression-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end;margin-top:9px}
    .buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.transport{position:relative}.transport button{flex:0 1 auto}
    .now{text-align:center;padding:14px 10px}.now-label{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:11px}
    .now-chord{font-size:clamp(54px,10vw,106px);font-weight:900;color:var(--accent);line-height:1;margin:8px 0 4px}
    .now-notes{margin-top:2px;font-size:14px;color:var(--muted);min-height:20px}.next-chord{font-size:16px;color:var(--muted)}
    .beat-info{display:flex;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap}.beat-dot{width:11px;height:11px;border-radius:50%;background:#374151;border:1px solid #4b5563}.beat-dot.active{background:var(--accent);border-color:var(--accent)}
    .chord-grid{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin;justify-content:center}.chord-card{flex:0 0 auto;min-width:78px;padding:10px 8px;text-align:center;border:1px solid var(--line);border-radius:10px;background:#11161d;font-weight:800;font-size:20px}
    .chord-card.active{background:var(--accent);color:#062017;border-color:transparent;transform:translateY(-1px)}.chord-note-label{display:block;margin-top:4px;font-size:11px;font-weight:600;color:var(--muted)}.chord-card.active .chord-note-label{color:#174535}
    .status,.hint{color:var(--muted);font-size:12px;line-height:1.4}.status{min-height:18px;margin-top:7px}
    dialog{width:min(760px,calc(100% - 20px));max-height:82%;border:1px solid var(--line);border-radius:16px;background:#151a21;color:var(--text);padding:0;box-shadow:0 22px 80px #0008}
    dialog::backdrop{background:#0009}.dialog-head{position:sticky;top:0;background:#151a21;border-bottom:1px solid var(--line);padding:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;z-index:2}
    .dialog-head h2{font-size:18px;margin:0}.dialog-body{padding:12px}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}
    .preset{min-height:60px;text-align:left}.preset strong{display:block}.preset small{display:block;color:var(--muted);margin-top:2px;line-height:1.25}
    .selected-preset{margin-top:7px;color:var(--accent);font-size:12px}.saved-item{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
    .saved-item:last-child{border-bottom:0}.saved-name{font-weight:800}.saved-meta{font-size:11px;color:var(--muted);margin-top:2px}.saved-empty{color:var(--muted);padding:8px 0}
    @media(max-width:980px){
      .app{width:96vw}
      .control-group:nth-of-type(1),.control-group:nth-of-type(2){grid-column:span 6}
      .control-group:nth-of-type(3),.control-group:nth-of-type(4),.control-group:nth-of-type(5){grid-column:span 12}
    }
    @media(max-width:640px){
      .app{width:96vw;padding:8px 0 74px}
      .app-header{align-items:center;gap:8px}
      .top-language-picker{gap:5px;font-size:10px;padding-top:0}
      .top-language-picker select{min-width:96px;max-width:118px;min-height:32px;font-size:12px;padding:4px 24px 4px 7px}.panel{padding:9px;margin:7px 0;border-radius:12px}h1{font-size:26px}.subtitle{margin-bottom:8px;font-size:12px}
      .control-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
      .control-group,.control-group:nth-of-type(1),.control-group:nth-of-type(2),.control-group:nth-of-type(3),.control-group:nth-of-type(4),.control-group:nth-of-type(5){grid-column:span 1}
      .control-group:nth-of-type(3){grid-column:span 2}.control-group{padding:7px}.control-group-title{font-size:10px}
      .grid,.control-group:nth-of-type(3) .grid,.control-group:nth-of-type(4) .grid,.control-group:nth-of-type(5) .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
      .control-group:nth-of-type(1) .grid,.control-group:nth-of-type(2) .grid{grid-template-columns:1fr}
      label{font-size:10px}input,select,button{min-height:36px;font-size:13px}.small-btn{min-width:34px;font-size:17px}.stepper{grid-template-columns:34px 1fr 34px}.value{min-height:36px;font-size:14px}
      .progression-row{grid-template-columns:1fr auto;gap:6px}.progression-row button{padding-left:10px;padding-right:10px}
      .transport{position:sticky;bottom:6px;z-index:20;background:rgba(15,19,25,.95);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:6px;margin-left:-2px;margin-right:-2px}
      .transport button{flex:1 1 calc(25% - 6px);min-width:0;padding-left:7px;padding-right:7px}
      .now{padding:12px 8px}.now-chord{font-size:clamp(52px,18vw,84px)}.next-chord{font-size:14px}
      .chord-card{min-width:70px;padding:8px 7px;font-size:18px}.preset-grid{grid-template-columns:1fr}
    }
    @media(max-width:390px){
      .app{width:97vw}.control-groups{grid-template-columns:1fr 1fr}
      .control-group:nth-of-type(3),.control-group:nth-of-type(4),.control-group:nth-of-type(5){grid-column:span 2}
      .control-group:nth-of-type(3) .grid,.control-group:nth-of-type(4) .grid,.control-group:nth-of-type(5) .grid{grid-template-columns:1fr 1fr}
      .transport button{font-size:12px}
    }

    .main-panel{padding:10px 12px}
    .top-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
    .top-actions button{min-width:0}
    .preset-summary{margin-top:10px;padding:8px 0;border-top:1px solid var(--line)}
    .preset-summary-title{font-size:13px;font-weight:800;color:var(--text)}
    .preset-summary-progression{margin-top:3px;color:var(--muted);font-size:13px;white-space:nowrap;overflow-x:auto;padding-bottom:2px}
    .custom-play-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}
    .custom-play-row button{padding-left:14px;padding-right:14px}
    #controlsDialog .control-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    #controlsDialog .control-group,#controlsDialog .control-group:nth-of-type(1),#controlsDialog .control-group:nth-of-type(2),#controlsDialog .control-group:nth-of-type(3),#controlsDialog .control-group:nth-of-type(4),#controlsDialog .control-group:nth-of-type(5){grid-column:span 1}
    #controlsDialog .control-group:nth-of-type(3){grid-column:span 2}
    #controlsDialog .control-group .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    @media(max-width:640px){
      .top-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
      .top-actions button{font-size:12px;padding:6px 4px}
      .preset-summary{margin-top:8px}
      .preset-summary-title{font-size:12px}
      .preset-summary-progression{font-size:12px}
      .custom-play-row{grid-template-columns:minmax(0,1fr) auto}
      #controlsDialog{width:calc(100% - 14px);max-height:88%}
      #controlsDialog .control-groups{grid-template-columns:1fr}
      #controlsDialog .control-group,#controlsDialog .control-group:nth-of-type(1),#controlsDialog .control-group:nth-of-type(2),#controlsDialog .control-group:nth-of-type(3),#controlsDialog .control-group:nth-of-type(4),#controlsDialog .control-group:nth-of-type(5){grid-column:span 1}
      #controlsDialog .control-group .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:390px){
      .top-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
      .top-actions #openControls{grid-column:span 2}
    }

    .preset-summary-head{display:flex;align-items:center;gap:8px;justify-content:flex-start;min-width:0;flex-wrap:wrap}
    .preset-summary-head .preset-summary-title{min-width:0}
    .preset-summary-head #choosePreset{flex:0 0 auto;white-space:nowrap}
    .now-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-content:center;column-gap:18px;max-width:560px;margin:0 auto}
    .now-main .now-chord{text-align:right;margin:8px 0}
    .now-details{text-align:left;display:grid;gap:4px;align-content:center}
    .now-details .now-notes{margin:0;min-height:0}
    .now-details .next-chord{margin:0}
    .now-details .beat-info{justify-content:flex-start;margin-top:2px}
    @media(max-width:640px){
      .preset-summary-head{gap:6px;justify-content:space-between;flex-wrap:nowrap}
      .preset-summary-head #choosePreset{font-size:11px;padding:6px 8px}
      .now-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;max-width:100%}
      .now-main .now-chord{font-size:clamp(50px,18vw,78px)}
      .now-details{gap:3px}
      .now-details .now-notes,.now-details .next-chord{font-size:13px}
    }
    @media(max-width:390px){
      .preset-summary-head{align-items:flex-start}
      .preset-summary-head #choosePreset{white-space:normal;text-align:center;line-height:1.15}
    }

    .now-four-col{
      display:grid;
      grid-template-columns:minmax(105px,.85fr) minmax(150px,1.25fr) minmax(125px,1fr) minmax(105px,.85fr);
      align-items:center;
      justify-content:center;
      column-gap:12px;
      max-width:900px;
      margin:0 auto;
    }
    .quick-controls{display:grid;gap:6px}
    .quick-controls button{
      width:100%;
      min-height:36px;
      padding:6px 8px;
      font-size:12px;
      white-space:normal;
      line-height:1.2
    }
    .now-four-col .now-chord{text-align:right;margin:8px 0}
    .now-four-col .now-details{text-align:left}
    .now-four-col .now-details .beat-info{justify-content:flex-start}
    @media(max-width:640px){
      .now-four-col{
        grid-template-columns:minmax(62px,.72fr) minmax(104px,1.25fr) minmax(86px,1fr) minmax(68px,.78fr);
        column-gap:6px;
        max-width:100%;
      }
      .quick-controls{gap:4px}
      .quick-controls button{
        min-height:32px;
        padding:4px 5px;
        font-size:10px
      }
      .now-four-col .now-chord{
        font-size:clamp(44px,14vw,68px);
      }
      .now-four-col .now-details .now-notes,
      .now-four-col .now-details .next-chord{font-size:12px}
    }

    .preset-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    .preset-actions button{white-space:nowrap}
    @media(max-width:640px){
      .preset-summary-head{align-items:center}
      .preset-actions{margin-left:auto;justify-content:flex-end;gap:5px}
      .preset-actions button{font-size:10px;padding:6px 7px;white-space:normal;line-height:1.15}
    }

    .number-value{width:100%;text-align:center;padding:4px 2px;-moz-appearance:textfield}
    .number-value::-webkit-outer-spin-button,.number-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .key-value{padding:4px 2px;text-align:center;text-align-last:center}
    #controlsDialog #styleGroup{grid-column:span 2}
    @media(max-width:640px){#controlsDialog #styleGroup{grid-column:span 1}}

    #controlsDialog #jamGroup{grid-column:1/-1}
    @media(max-width:640px){
      #controlsDialog #tempoGroup,
      #controlsDialog #keyGroup{grid-column:span 1}
    }

    #controlsDialog #advancedGroup{grid-column:span 1}
    @media(max-width:640px){#controlsDialog #labelsGroup{grid-column:span 1}}

    .inline-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
    #controlsDialog #mixGroup,
    #controlsDialog #advancedGroup{grid-column:span 1}
    @media(max-width:640px){
      #controlsDialog #mixGroup,
      #controlsDialog #labelsGroup{grid-column:span 1}
    }

    .now-four-col .now-chord{
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:clip;
    }
    .now-four-col .now-details{
      min-width:0;
    }
    @media(max-width:640px){
      .now-four-col .now-chord{
        font-size:clamp(40px,13vw,64px);
      }
    }

    /* Keep Now Playing as four distinct columns */
    .now-main.now-four-col{
      display:grid !important;
      grid-template-columns:minmax(92px,.8fr) minmax(160px,1.35fr) minmax(130px,1.05fr) minmax(92px,.8fr) !important;
      grid-template-areas:"left chord details right";
      align-items:center;
      column-gap:14px;
      max-width:940px;
      margin:0 auto;
    }
    .now-main.now-four-col .quick-left{grid-area:left}
    .now-main.now-four-col .now-chord{
      grid-area:chord;
      text-align:right;
      justify-self:stretch;
      white-space:nowrap;
      overflow:visible;
    }
    .now-main.now-four-col .now-details{
      grid-area:details;
      text-align:left;
      justify-self:stretch;
    }
    .now-main.now-four-col .quick-right{grid-area:right}

    @media(max-width:640px){
      .now-main.now-four-col{
        grid-template-columns:minmax(58px,.68fr) minmax(110px,1.35fr) minmax(88px,1fr) minmax(62px,.72fr) !important;
        column-gap:6px;
      }
      .now-main.now-four-col .now-chord{
        font-size:clamp(40px,13vw,62px);
      }
    }

    /* Mobile progression: wrap chords instead of horizontal scrolling */
    @media(max-width:640px) and (orientation:portrait){
      .progression{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        overflow-x:visible;
        gap:6px;
      }
      .progression .chord-card{
        flex:0 0 auto;
      }
    }

    /* Mobile progression: wrap the actual chord grid into visible rows */
    @media(max-width:640px) and (orientation:portrait){
      .chord-grid{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-content:flex-start;
        overflow-x:auto !important; /* fallback only */
        overflow-y:visible !important;
        white-space:normal !important;
        gap:6px;
        width:100%;
        max-width:100%;
      }
      .chord-grid .chord-card{
        flex:0 0 auto;
        min-width:64px;
        max-width:calc(25% - 6px);
      }
    }

    .style-picker{width:100%}
    .style-picker-label{font-weight:700;margin-bottom:7px}
    .style-buttons{display:flex;flex-wrap:wrap;gap:6px}
    .style-buttons button{
      padding:7px 10px;
      border-radius:999px;
      font-size:12px;
      line-height:1;
      white-space:nowrap;
    }
    .style-buttons button.active{
      background:var(--accent);
      color:#062017;
      border-color:transparent;
    }
    @media(max-width:640px){
      .style-buttons{gap:5px}
      .style-buttons button{padding:6px 8px;font-size:11px}
    }

    /* Let style buttons use available width naturally; wrap only when needed */
    .style-buttons{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      gap:6px;
    }
    .style-buttons button{
      flex:0 0 auto;
    }

    /* Give Style preset the full controls-dialog width */
    #controlsDialog #styleGroup{
      grid-column:1 / -1 !important;
    }

    /* Style preset content should use the full width inside its group */
    #controlsDialog #styleGroup > .grid{
      display:block !important;
    }
    #controlsDialog #styleGroup .style-picker{
      width:100% !important;
    }

    .style-family-buttons{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-bottom:8px;
      padding-bottom:8px;
      border-bottom:1px solid var(--line);
    }
    .style-family-buttons button{
      flex:0 0 auto;
      padding:7px 11px;
      border-radius:999px;
      font-size:12px;
      line-height:1;
      white-space:nowrap;
    }
    .style-family-buttons button.active{
      background:var(--accent);
      color:#062017;
      border-color:transparent;
    }
    @media(max-width:640px){
      .style-family-buttons{gap:5px}
      .style-family-buttons button{padding:6px 9px;font-size:11px}
    }

    .substyle-buttons{
      margin-top:8px;
      padding-top:8px;
      border-top:1px solid var(--line);
    }
    .substyle-buttons:empty{
      display:none !important;
    }

    .lead-scale-info{
      margin-top:8px;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:8px;
      font-size:12px;
      font-weight:700;
      line-height:1.35;
    }
    .lead-scale-info[hidden]{display:none !important}
    @media(max-width:640px){
      .lead-scale-info{font-size:11px;padding:7px 8px}
    }

    /* v52: performance-first refactor */
    .performance-header .top-actions{margin-bottom:10px}
    .template-summary-card{
      border-top:1px solid var(--line);
      padding-top:10px;
      display:grid;
      gap:4px;
    }
    .template-eyebrow{
      color:var(--muted);
      font-size:10px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.12em;
    }
    .template-summary-card .preset-summary-title{
      font-size:18px;
      font-weight:900;
    }
    .main-lead-scale{
      margin-top:3px;
      color:var(--accent);
      font-size:12px;
      font-weight:750;
    }
    .main-lead-scale[hidden]{display:none!important}

    .refactor-controls{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }
    #controlsDialog #styleGroup,
    #controlsDialog #jamGroup,
    #controlsDialog #bandGroup{
      grid-column:1/-1!important;
    }
    #controlsDialog #mixGroup,
    #controlsDialog #advancedGroup{
      grid-column:span 1!important;
    }
    .template-control-body{display:grid;gap:12px}
    .template-progression-row{
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:center;
      padding-top:10px;
      border-top:1px solid var(--line);
    }
    .template-progression-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:6px;
    }
    .mini-section-title{
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      margin-bottom:7px;
    }
    .band-sections{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .band-section{
      min-width:0;
      padding:10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:rgba(255,255,255,.015);
    }
    .band-section .grid{grid-template-columns:1fr}
    .jam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .progression-panel .section-title{margin-bottom:8px}

    @media(max-width:800px){
      .jam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .band-sections{grid-template-columns:1fr}
    }
    @media(max-width:640px){
      .refactor-controls{grid-template-columns:1fr}
      #controlsDialog #styleGroup,
      #controlsDialog #jamGroup,
      #controlsDialog #bandGroup,
      #controlsDialog #mixGroup,
      #controlsDialog #advancedGroup{grid-column:1!important}
      .template-progression-row{align-items:flex-start;flex-direction:column}
      .template-progression-actions{justify-content:flex-start}
      .jam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .template-summary-card .preset-summary-title{font-size:16px}
      .main-lead-scale{font-size:11px}
    }

    .progression-panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }
    .progression-panel-head .section-title{margin-bottom:0}
    .progression-panel-head button{white-space:nowrap}

    .progression-dialog-body{
      display:grid;
      gap:14px;
    }
    .progression-dialog-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .progression-custom-box{
      padding-top:12px;
      border-top:1px solid var(--line);
    }
    .progression-custom-box label{
      display:grid;
      gap:6px;
    }
    @media(max-width:640px){
      .progression-panel-head{
        align-items:center;
      }
      .progression-panel-head button{
        font-size:11px;
        padding:6px 8px;
      }
    }

    /* v55 progression controls */
    .progression-panel-head{
      display:flex;
      align-items:center;
      justify-content:flex-start !important;
      gap:8px;
      margin-bottom:8px;
    }
    .progression-panel-head .section-title{margin:0}
    .progression-panel-head button{
      margin:0;
      white-space:nowrap;
    }

    .progression-dialog-body{display:grid;gap:16px}
    .progression-choice-section{display:grid;gap:9px}
    .progression-choice-section + .progression-choice-section{
      padding-top:14px;
      border-top:1px solid var(--line);
    }
    .progression-choice-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
    }
    .progression-preset-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:7px;
    }
    .progression-custom-box{
      padding:10px;
      border:1px solid var(--line);
      border-radius:9px;
      background:rgba(255,255,255,.015);
    }
    .other-progression-grid{
      margin-top:4px;
      max-height:42vh;
      overflow-y:auto;
      padding-right:3px;
    }
    @media(max-width:640px){
      .progression-preset-grid{grid-template-columns:1fr}
      .other-progression-grid{max-height:38vh}
      .progression-panel-head button{font-size:10px;padding:5px 7px}
    }

    /* v58: explicit Style -> Substyle hierarchy */
    .style-level-head{
      display:flex;
      align-items:baseline;
      gap:8px;
      margin-bottom:8px;
    }
    .style-level-head strong{
      font-size:13px;
      font-weight:900;
    }
    .style-level-head span{
      color:var(--muted);
      font-size:11px;
    }
    .substyle-area{
      margin-top:12px;
      padding-top:11px;
      border-top:1px solid var(--line);
    }
    .substyle-head{margin-bottom:8px}

    #controlsDialog .substyle-buttons{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
      gap:7px;
      width:100%;
    }
    #controlsDialog .substyle-buttons .substyle-card{
      min-width:0;
      text-align:left;
      border-radius:9px;
      padding:9px 10px;
      display:grid;
      gap:3px;
      align-content:center;
      background:rgba(255,255,255,.025);
    }
    #controlsDialog .substyle-buttons .substyle-card strong{
      font-size:12px;
      line-height:1.2;
    }
    #controlsDialog .substyle-buttons .substyle-card small{
      display:block;
      color:var(--muted);
      font-size:9px;
      line-height:1.25;
      white-space:normal;
    }
    #controlsDialog .substyle-buttons .substyle-card.active{
      border-color:var(--accent);
      box-shadow:0 0 0 1px var(--accent) inset;
    }
    #controlsDialog .substyle-buttons .substyle-card.active small{
      color:inherit;
      opacity:.82;
    }
    @media(max-width:640px){
      #controlsDialog .substyle-buttons{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .style-level-head{
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
      }
    }

    /* v59: make selected Substyle clearly readable in dark mode */
    #controlsDialog .substyle-buttons .substyle-card.active{
      background:var(--accent) !important;
      border-color:var(--accent) !important;
      color:#08110e !important;
      box-shadow:none !important;
    }
    #controlsDialog .substyle-buttons .substyle-card.active strong{
      color:#08110e !important;
    }
    #controlsDialog .substyle-buttons .substyle-card.active small{
      color:#17352b !important;
      opacity:1 !important;
    }

    /* v62: universal 4-bars-per-row form layout */
    .form-label{
      margin:-2px 0 8px;
      color:var(--muted);
      font-size:11px;
      font-weight:750;
    }
    .auto-arrange-controls{display:flex;align-items:center;gap:7px;margin:8px 0}
    .auto-arrange-controls label{font-size:11px;color:var(--muted);white-space:nowrap}
    .auto-arrange-controls select{min-width:150px;flex:1}
    .auto-arrange-controls button{white-space:nowrap}
    .arrangement-sections{display:grid;gap:6px}
    .arrangement-row{
      display:grid;
      grid-template-columns:80px minmax(90px,.55fr) minmax(150px,1.6fr) 72px auto;
      align-items:center;
      gap:6px;
      padding:6px;
      border:1px solid var(--line);
      border-radius:9px;
      background:rgba(255,255,255,.015);
    }
    .arrangement-row select{min-width:0;width:100%;padding:6px 5px;font-size:11px}
    .arrangement-row strong{font-size:11px;white-space:nowrap}
    .arrangement-row-controls{display:flex;gap:4px}
    .arrangement-row-controls button{min-width:28px;padding:5px 6px;font-size:12px}
    @media(max-width:640px){
      .auto-arrange-controls{flex-wrap:wrap}
      .auto-arrange-controls select{min-width:0;flex:1 1 160px}
      .arrangement-row{grid-template-columns:1fr 1fr;align-items:stretch}
      .arrangement-row strong{grid-column:1 / -1}
      .arrangement-row select:nth-of-type(2){grid-column:1 / -1}
      .arrangement-row-controls{justify-content:flex-end}
    }
    .progression-panel .chord-grid{
      display:grid !important;
      grid-template-columns:repeat(4,minmax(0,1fr)) !important;
      overflow:visible !important;
      white-space:normal !important;
      width:100%;
      gap:6px;
    }
    .progression-panel .chord-card{
      position:relative;
      min-width:0 !important;
      max-width:none !important;
      width:auto !important;
      padding:9px 5px 7px;
      text-align:center;
    }
    .progression-panel .bar-number{
      position:absolute;
      top:3px;
      left:5px;
      color:var(--muted);
      font-size:8px;
      font-weight:800;
      line-height:1;
    }
    .progression-panel .bar-chord{
      margin-top:4px;
    }

    /* Row breaks themselves show the 4-bar phrasing, so no extra separators are needed. */
    .progression-panel .chord-grid[data-bars="12"] .chord-card.phrase-start{
      margin-left:0;
    }
    .progression-panel .chord-grid[data-bars="12"] .chord-card.phrase-start::before{
      display:none;
    }

    /* v68: compact 4-bar rows */
    .progression-panel .chord-grid{
      grid-template-columns:repeat(4,78px) !important;
      justify-content:center !important;
      width:auto !important;
      max-width:100%;
    }
    .progression-panel .chord-card{
      width:auto !important;
      min-width:78px !important;
      max-width:78px !important;
    }

    @media(max-width:640px){
      .progression-panel .chord-grid{
        grid-template-columns:repeat(4,64px) !important;
      }
      .progression-panel .chord-card{
        min-width:64px !important;
        max-width:64px !important;
      }
    }