@font-face {
  font-family: "Comfortaa";
  src: url("../font/Comfortaa-VariableFont_wght.ttf") format("truetype");
}
#app-body {
    font-family: "Comfortaa";
    background: #efefef;
    background-image: url(' ../assets/gao-bkgnd.png');
    background-size: cover;
    color: #333;
    display: block;
    flex-direction: row;
    height: 100dvh;
    z-index: 0;
}
#render-layer {
    position: absolute;
    right: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100dvh;
    display: inline-block;
    overflow: hidden;
    z-index: 2;
}
#touch-layer {
    position: absolute;
    right: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100dvh;
    display: inline-block;
    overflow: hidden;
    z-index: 3;
}
#neck-side {

    position: absolute;
    right: 0;
    top: 0;
    background: #0000;
    height: 90vh;  
    flex: 0, 1;
    z-index: 5;
    opacity: 0.2;
}
#ux {
    position: absolute;
    top: 0;
    right: 0;
    width: 66vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}
#ux > * {
    pointer-events: auto;
}
.pluck-float {
    position: absolute;
    z-index: 50;
    left: 0.5em;
    bottom: calc(1.5em + env(safe-area-inset-bottom, 0px));
    background: #111118;
    border-radius: 0.5em;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}
.pluck-float-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ffffff22;
}
.pluck-float-title {
    flex: 1;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    color: #ffffffcc;
    cursor: grab;
}
.pluck-float-title:active { cursor: grabbing; }
.pluck-float-btns {
    display: flex;
    align-items: center;
}
.pluck-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
    background: transparent;
    border: none;
    color: #ffffffbb;
    font-size: 0.85em;
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}
.pluck-float-btn:hover { color: #fff; background: #ffffff11; }
.pluck-float-btn .icon { width: 0.9em; height: 0.9em; }
.pluck-float--minimized .pluck-float-body { display: none; }
.pluck-float--pad .p-pad { aspect-ratio: 1 / 1.5; }
.pluck-float-body {
    display: flex;
    align-items: stretch;
    padding: 0.3em 0.25em;
    gap: 0.25em;
}
#cam-frames {
    position: absolute;
    bottom: calc(1.5em + env(safe-area-inset-bottom, 0px));
    left: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    z-index: 50;
}
.cam-frame-btn {
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 600;
    color: #ffffffaa;
    background: #000000bb;
    border: 1px solid transparent;
    border-radius: 1em;
    padding: 0.2em 0.6em;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color 0.12s, border-color 0.12s;
}
.cam-frame-btn:hover { color: #fff; }
.cam-frame-btn--active {
    color: #fff;
    border-color: #ffffff55;
}
#app-stamp {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    font-weight: bold;
    font-size: 0.82em;
    color: #fff;
    z-index: 50;
    background: #000000cc;
    border-radius: 1em;
    padding: 0.25em 0.65em;
    display: flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
    transition: background 0.15s;
}
#app-stamp:hover { background: #000000ee; }

/* ── overlay de configuration ── */
#config-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #2d1b4ecc 0%, #0a0a1aee 70%);
    z-index: 200;
    opacity: 1;
    transition: opacity 0.4s ease;
    overflow-y: auto;
    padding: 2em 1em;
}
#config-overlay.hidden { opacity: 0; pointer-events: none; }
.config-overlay-icon {
    width: min(18vw, 18vh);
    height: auto;
    margin-bottom: 1.5em;
    opacity: 0.85;
    filter: drop-shadow(0 0 1.5em #7c3aed66);
}
.config-overlay-close {
    position: fixed;
    top: 1em;
    right: 1em;
    background: none;
    border: none;
    color: #ffffff88;
    font-size: 1.8em;
    cursor: pointer;
    line-height: 1;
    padding: 0.1em 0.4em;
    transition: color 0.15s;
}
.config-overlay-close:hover { color: #fff; }
.config-overlay-card {
    background: #ffffff0f;
    border: 1px solid #ffffff18;
    border-radius: 1em;
    padding: 1.5em 2em;
    min-width: min(320px, 88vw);
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.config-section-title {
    font-size: 0.78em;
    font-weight: bold;
    color: #ffffff66;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0.8em 0 0.3em;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.config-section-title:first-child { margin-top: 0; }
.settings-link--active {
    background: #ffffff22;
    opacity: 1;
}
.config-tuning-title {
    font-size: 0.78em;
    color: #ffffff66;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0.6em 0 0.2em;
}
.config-tuning-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.15em 0;
}
.config-tuning-label {
    font-size: 0.8em;
    color: #ffffff88;
    width: 1em;
    text-align: right;
    flex-shrink: 0;
}
.config-tuning-select {
    background: #ffffff0f;
    border: 1px solid #ffffff22;
    border-radius: 0.4em;
    color: #fff;
    font-size: 0.85em;
    padding: 0.2em 0.4em;
    cursor: pointer;
}
.config-about-text {
    font-size: 0.82em;
    color: #ffffff88;
    margin: 0;
    line-height: 1.5;
}
.p-pad {
    position: relative;
    background: #fff2;
    border-radius: 0.5em;
    width: 2.6em;
    aspect-ratio: 1 / 2.5;
    flex-shrink: 0;
}
.p-pad-iv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1em;
    color: #ffffff66;
    pointer-events: none;
    line-height: 1;
}
.p-pad-iv.icon-nit-root {
    color: #ffffffcc;
    font-size: 1.3em;
}
.p-pad-note {
    position: absolute;
    bottom: 0.3em;
    right: 0.35em;
    font-size: 0.62em;
    color: #ffffffcc;
    text-shadow: 0 0 0.3em #000;
    line-height: 1;
    pointer-events: none;
}
.sub-tool {
    padding: 0.25em;
    width: 100%;
}
.sub-tool > div {
    padding: 0.25em;
    width: 100%;
}

#rollkeys-side {
    display: block;

    min-height: 100vh;
    background: #000;
    wwidth: 1.8em;
    max-width: 3vh;
    padding: 0em;
    font-weight: bold;
    z-index: -5;
}
.pressed {
    background: #fff;
    color: #000;


}
#neck-board {
    position:relative;
    margin: 2vh;
    margin-left: 0;
    margin: 0vh;
    min-width: 22vh;
    height: Calc(96vh - 0em);
    height: 100vh;
    background: #3220;
    display: flex;

}

.chord-sets-container {
    display: flex;
    flex-direction: column;
    max-height: 16em;
    overflow-y: auto;
}
.chord-set-active { flex-shrink: 0; }
.chord-set-header {
    display: flex;
    align-items: center;
    padding: 0.4em 0.6em;
    user-select: none;
}
.chord-set-name {
    flex: 1;
    font-size: 0.85em;
    font-weight: bold;
    outline: none;
    min-width: 0;
    cursor: text;
    color: #333;
}
.chord-set-del {
    color: #bbb;
    font-size: 1em;
    line-height: 1;
    padding: 0 0.2em;
    cursor: pointer;
}
.chord-set-del:active { color: #e44; }
.chord-set-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding: 0.2em 0.6em 0.5em;
}
.chord-sets-collapsed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.4em 0.6em;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
}
.chord-set-pill {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.65em;
    background: #000000cc;
    border: none;
    border-radius: 1em;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.82em;
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s;
}
.chord-set-pill:hover { opacity: 1; }
.chord-set-pill--add { opacity: 0.45; }

.computed-string-container {
    display: inline-block;
    width: 14.28%;
    width: 3vh;

    height: 101%;
    margin: O;
    overflow: hidden;
}
.case-string {
    position: absolute;
    top: 0;
    left: Calc(50% - 0.15em);
    height: 100%;
    width: 0.3em;
    background: #9990;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(72,68,68,1) 4%, rgba(218,218,218,1) 47%, rgba(247,254,255,1) 63%, rgba(255,211,154,1) 67%, rgba(164,164,164,1) 94%, rgba(154,154,154,1) 97%, rgba(0,0,0,1) 100%); 
}
.case {
    position: relative;
    display: block;
    background: #4d3700;
    background: #e5b819;
    background: #b6763eff;
    border: none;
    boorder-top: 3px solid #fff;
    boorder-bottom: 1px solid #333;
    display: block;
    font-family: sans-serif;
    font-size: 7pt;
    color: #aaa;
    padding: 0;
    line-height: 1em;
    z-index: 0;

}
.neck-print {
    position: absolute;
    color: #fff;
}
.neck-top {
    position: relative;
    display: block;
    background: #444;
    border: none;
    boorder-top: 3px solid #fff;
    boorder-bottom: 1px solid #333;
    display: block;
    font-family: sans-serif;
    font-size: 7pt;
    color: #aaa;
    padding: 0;
    line-height: 1em;
    z-index: 0;

}
.case:hover {
    bbackground: #865;

}
.case:hover > div.marker {
    opacity: 1.0 !important;
}


/* draw fret */
div.case:before {
    position: absolute;
    bottom: 0;
    left: 0;       
    display: inline-block;
    content: "."; 
    height: 3px;
    width: 100%;
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 43%, rgba(252,252,252,1) 47%, rgba(247,254,255,1) 63%, rgba(154,219,255,1) 67%, rgba(162,178,187,1) 70%, rgba(164,164,164,1) 83%, rgba(0,0,0,1) 100%); 
    overflow: hidden;
}
div.touch {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    overflow: hidden;
    background: #fffc;
    transform: translate(-50%, -50%);
    border: 3px solid #000;
    border-radius: 15px;
    z-index: 2;
}
div.marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    overflow: hidden;
    background: #fffc;
    transform: translate(-50%, -50%);
    border: 3px solid #000;
    border-radius: 15px;
    z-index:9;
}
div.touch.mute {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 5px;
    overflow: hidden;
    background: #f60;
    transform: translate(-50%, -50%);
    border: 3px solid #000;
    border-radius: 0px;
    z-index: 2;
}
.neck-helper {
    color: #fff;
    font-size: 0,25em;
}



#navbar {
    position: relative;
    width:100vw;
    height:3em;
    display: flex;
    background: #fff;
    align-items: center;
    overflow: hidden;
}              

div.navbtn {
    font-family: sans-serif;
    background: #ddd;
    disfplay: inline-block;
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0.25em;
    border-radius: 1.5em;

}
div.navicon > img{
    width:80vw;
    height: auto;

}


div#strum-btn {
    position: absolute;

    bottom: 1.7em;
    left: 5%;
    display: block;
    width: 90%;

    font-family: sans-serif;
    background: #fff5;
    padding: 0em;
    line-height: 2em;
    font-size: 1em;
    text-align: center;
    border-radius: 0.3em;
    box-shadow: inset 0 0 0.3em #000;

}


.missing {
    color: #d00;
    text-decoration: line-through;
}
.score {
    font-size: 0.7em;
    color: #eee;
    position: absolute;
    top:0.5em;
    right: 0.5em;
    display: none;
}
.chord-guess {
    position: relative;
    margin-top: 0.2em;
    margin-right: 0em;
    opacity: 0.4;
    padding: 0em;
    display: block;
}
.chord-guess:first-child {
    opacity: 1.0;
    display: block;
    margin-left: 0em;
    margin-right: 0em;

}
.chord-guess:first-child > div.chord-guess-desc {
   
   display: block;
}
.chord-guess:first-child > div.chord-guess-intervals {
   
   display: block;
}

.chord-guess-intervals {
    display: none;
    font-size: 0.75em;
    margin-left: 0em;
    font-style: italic;
}
.chord-guess-title {
     display: block;
     margin: 0em;
     padding: 0;
     

}
.chord-guess-desc {
     display: none;
     font-size: 0.75em;
     line-height: 1.5em;
     margin-top: 0.05em;
}
div.pinned-chord {
    display: inline-block;
    background: #eeee;
    padding: 0.3em;
    width: 7em;
    font-size: 0.85em;
    overflow: hidden;
    height: 2.5em;
    border: 2px solid #333;
    border-radius: 0.3em;
    margin-top: 0.2em;
    margin-right: 0.2em;
}

.pin-btn {
    
    position: relative;
   
    ppadding: 0.25em;
    color: #aaa;
    line-height: 1em;
    font-size: 1em;
}
.pin-btn.blast{
    color: #000;
}
.chord-unknown {
    font-style: italic;
    opacity: 0.55;
    font-size: 0.9em;
}
div.statebar {
    display: block;
    width: 100%;
    position: absolute;
    right: 0%;
    bottom: 0.4em;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0em;
    text-align: center;
    color: #000;
    text-shadow: #0000 0em 0em 0.1em;
}


.small-2 {
  font-size: 0.6em;
  line-height: 0.6em;
}

.it {
    position: relative;
    font-weight: bold;
    font-size: 2em;
    padding: 0 !important;
    margin: 0!important;
}
.it:before {
    padding: 0 !important;
    margin: 0!important;
}
.it:after {
    content: "A#";
    color: #333;
    font-size: 0.3em;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    content: "C#";
    padding: 0 !important;
    margin: 0!important;
}
.itv {
    display: inline-block;
    background-image: url("../assets/svgintervals/it-b7.svg");
    background-size: cover;
    height: 2.9em;
    width: 2.9em;
    text-align: center;
    font-size: 1em;
    font-weight: 800 !important;
    line-height: 2.9em;
    padding: 0;
    margin: 0;
}
.itv:first-child{
  padding-left: -1.5em;
}

.nitv {
    display: inline-block;
    background-image: url("../assets/svgintervals/nit-5.svg");
    background-size: cover;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 0em;
    font-weight: 800 !important;
    line-height: 0em;
    padding: 0;
    margin: 0;
}
.fitv {
    position: absolute;
    display: inline-block;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
    margin: 0;
    color: #000;
    color: #fff;
    background: #0000;
    z-index: 100;
}
.fitvbkgd {
  
  position: absolute;
    display: inline-block;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
    margin: 0;
    color: #fff0;
    background: #a400da;
    background: #666;

    
    z-index: 50;
    border-radius: 40%;
}
.fitvbkgd.red {
  
  position: absolute;
    display: inline-block;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
    margin: 0;
    color: #fff0;
    background: #a400da;
    background: #d00;

    
    z-index: 50;
    border-radius: 40%;
}


.itv-2 {
    background-image: url("../assets/svgintervals/it-2.svg");
 
}
.itv-b2 {
    background-image: url("../assets/svgintervals/it-b2.svg");
 
}
.itv-3 {
    background-image: url("../assets/svgintervals/it-3.svg");
 
}
.itv-b3 {
    background-image: url("../assets/svgintervals/it-b3.svg");
 
}
.itv-4 {
    background-image: url("../assets/svgintervals/it-4.svg");
 
}
.itv-b5 {
    background-image: url("../assets/svgintervals/it-b5.svg");
 
}
.itv-m5 {
    background-image: url("../assets/svgintervals/it-m5.svg");
 
}
.itv-5 {
    background-image: url("../assets/svgintervals/it-5.svg");
 
}
.itv-6 {
    background-image: url("../assets/svgintervals/it-6.svg");
 
}
.itv-b7 {
    background-image: url("../assets/svgintervals/it-b7.svg");
 
}
.itv-7 {
    background-image: url("../assets/svgintervals/it-7.svg");
 
}
.itv-root {
    background-image: url("../assets/svgintervals/it-R.svg");
 
}






.nitv-2 {
    background-image: url("../assets/svgintervals/nit-2.svg");
 
}
.nitv-b2 {
    background-image: url("../assets/svgintervals/nit-b2.svg");
 
}
.nitv-3 {
    background-image: url("../assets/svgintervals/nit-3.svg");
 
}
.nitv-b3 {
    background-image: url("../assets/svgintervals/nit-b3.svg");
 
}
.nitv-4 {
    background-image: url("../assets/svgintervals/nit-4.svg");
 
}
.nitv-b5 {
    background-image: url("../assets/svgintervals/nit-b5.svg");
 
}
.nitv-m5 {
    background-image: url("../assets/svgintervals/nit-m5.svg");
 
}
.nitv-5 {
    background-image: url("../assets/svgintervals/nit-5.svg");
 
}
.itv-6 {
    background-image: url("../assets/svgintervals/nit-6.svg");
 
}
.nitv-b7 {
    background-image: url("../assets/svgintervals/nit-b7.svg");
 
}
.nitv-7 {
    background-image: url("../assets/svgintervals/nit-7.svg");
 
}
.nitv-root {
    background-image: url("../assets/svgintervals/nit-R.svg");
 
}
.nitv-undefined {
    background-image: url("../assets/svgintervals/it-5.svg");
 
}

.red {
    color: #c00;

}
/* ── Catalog ─────────────────────────────────────────────── */
.catalog-header { display: none; }
.catalog-section-title {
    font-weight: bold;
    font-size: 0.95em;
    padding: 0.6em 0.5em 0.3em;
    color: #333;
    border-top: 2px solid #ccc;
    margin-top: 0.5em;
}
.catalog-position-row {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #e8e8e8;
}
.catalog-pos-label {
    flex-shrink: 0;
    width: 2em;
    text-align: center;
    font-size: 0.85em;
    font-weight: 900;
    color: #555;
    padding: 0.5em 0.2em 0;
    position: sticky;
    left: 0;
    background: #f0f0f0;
    z-index: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-pos-cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.35em;
    padding: 0.35em 0.4em;
    flex: 1;
    scrollbar-width: none;
}
.catalog-pos-cards::-webkit-scrollbar { display: none; }
.catalog-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding: 0.3em 0.5em 0.1em;
}
.catalog-pill {
    font-size: 0.78em;
    padding: 0.2em 0.45em;
    border-radius: 1em;
    border: none;
    color: #888;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, color 0.1s;
}
.catalog-pill:hover { color: #333; }
.catalog-pill--active,
.catalog-pill--active:hover {
    background: #000000cc;
    color: #fff;
    font-weight: 600;
}
.catalog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.2em 0.5em 0.5em;
}
.catalog-filters select {
    font-family: inherit;
    font-size: 0.8em;
    padding: 0.2em 0.4em;
    border: 1px solid #bbb;
    border-radius: 0.3em;
    background: #fff;
}
.catalog-filters label {
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.25em;
}
.catalog-positions {
    overflow-y: auto;
    max-height: 18em;
}
.catalog-pos-cards .voicing-card {
    flex-shrink: 0;
}
.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.3em 0.5em 0.5em;
}
.voicing-card {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.4em;
    padding: 0.35em 0.5em;
    cursor: pointer;
    min-width: 5em;
    text-align: center;
    transition: background 0.15s;
}
.voicing-card:active {
    background: #e0e8ff;
}
.vc-frets {
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #222;
}
.vc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em;
    padding: 0;
    min-height: 0;
}
.vc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58em;
}
.vc-badge .icon {
    width: 1.6em;
    height: 1.6em;
}
.catalog-legend {
    margin-top: 0.6em;
    padding: 0.5em 0.6em;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}
.catalog-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.72em;
    color: #555;
}
.badge-ordered  { color: #6d28d9; }
.badge-nomute   { color: #065f46; }
.badge-triad    { color: #991b1b; }
.badge-complete { color: #92400e; }
.badge-unique   { color: #1e40af; }
.badge-none     { color: #6b7280; }
.catalog-badge-row { border-bottom: 1px solid #e5e7eb; }
.catalog-badge-pill { padding: 0.2em 0.35em; }
.catalog-badge-pill .vc-badge { font-size: 0.85em; pointer-events: none; }
.catalog-badge-pill.catalog-pill--active .vc-badge { color: #fff; }
/* vc-span conservé pour compatibilité éventuelle */
.vc-span {
    font-size: 0.65em;
    color: #888;
    margin-top: 0.15em;
}
.vc-del {
    position: absolute;
    top: 0.1em;
    right: 0.25em;
    font-size: 0.75em;
    color: #bbb;
    line-height: 1;
    cursor: pointer;
}
.vc-del:active { color: #e44; }

#onair-chord {
    flex-shrink: 0;
    padding: 0.6em 0.75em 0.4em;
}

/* ── UXStack ─────────────────────────────────────────────────────────────── */
#ux-collapsed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.5em 0.6em;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
#ux-expanded {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(1.5em + env(safe-area-inset-bottom, 0px));
}
.ux-panel { border-top: 1px solid #e8e8e8; }
.ux-panel:first-child { border-top: none; }
@keyframes ux-panel-enter {
    from { opacity: 0; transform: scaleY(0.94) translateY(-8px); }
    to   { opacity: 1; transform: scaleY(1)    translateY(0);    }
}
.ux-panel--entering {
    transform-origin: top;
    animation: ux-panel-enter 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* ── SVG mask icons (dom-utils ic()) ─────────────────────────────────────── */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.ux-panel-header {
    display: flex;
    align-items: center;
    padding: 0.4em 0.5em 0.4em 0.6em;
    font-size: 0.9em;
    user-select: none;
}
.ux-panel-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex: 1;
    font-weight: 600;
    color: #1a1a1a;
    padding: 0.1em 0;
}
.ux-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.1em;
}
.ux-panel-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.4em;
    color: #555;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.ux-panel-action-btn:hover { background: #f0f0f0; color: #111; }
.ux-panel-action-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.ux-panel-btn {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.65em;
    background: #000000cc;
    border: none;
    border-radius: 1em;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.82em;
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s;
}
.ux-panel-btn:hover { opacity: 1; }

.catalog-toggle {
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
}

/* ─── Partitions ──────────────────────────────────────────────────────────── */
#partitions-content {
    background: #f8f8f8;
}

/* ── pills partitions ── */
.part-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    padding: 0.4em 0.5em 0.3em;
}
.part-pill {
    padding: 0.25em 0.65em;
    background: #000000cc;
    border: none;
    border-radius: 1em;
    font-family: inherit;
    font-size: 0.82em;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s;
}
.part-pill:hover  { opacity: 0.7; }
.part-pill.active { opacity: 1; }
.part-pill--add   { opacity: 0.3; }
.part-pill--add:hover { opacity: 0.6; }

/* ── nom éditable ── */
.partition-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.2em;
}
.partition-name {
    font-weight: bold;
    outline: none;
    min-width: 2em;
    cursor: text;
}
.partition-name-del {
    opacity: 0.3;
    cursor: pointer;
    font-size: 0.85em;
}
.partition-name-del:hover { opacity: 1; }

/* ── contrôles ── */
.partition-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
    padding: 0.35em 0.6em;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}
.partition-bpm-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    overflow: hidden;
}
.partition-bpm-btn {
    border: none;
    background: #e8e8e8;
    font-size: 1.1em;
    padding: 0.15em 0.55em;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
}
.partition-bpm-btn:hover { background: #d0d0d0; }
.partition-bpm-display {
    font-size: 0.85em;
    font-family: monospace;
    font-weight: bold;
    padding: 0.15em 0.5em;
    min-width: 2.8em;
    text-align: center;
    background: #fff;
    cursor: pointer;
    user-select: none;
}
.partition-play-btn,
.partition-loop-btn {
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 0.3em;
    cursor: pointer;
    font-size: 1em;
    padding: 0.2em 0.55em;
    line-height: 1;
    font-family: inherit;
}
.partition-play-btn:hover,
.partition-loop-btn:hover  { background: #ddd; }
.partition-loop-btn.active { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; }
.part-io-btn {
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 0.3em;
    cursor: pointer;
    padding: 0.2em 0.4em;
    font-size: 0.85em;
    line-height: 1;
    font-family: inherit;
    color: #555;
}
.part-io-btn:hover { background: #ddd; }

/* ── sélecteur de division ── */
.part-div-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    overflow: hidden;
    margin-left: auto;
}
.part-div-label {
    font-size: 0.7em;
    color: #999;
    padding: 0 0.4em;
    border-right: 1px solid #ccc;
    background: #f5f5f5;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.part-div-btn {
    border: none;
    border-left: 1px solid #ccc;
    background: #eee;
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.part-div-btn:hover  { background: #ddd; }
.part-div-btn.active { background: #ede9fe; color: #7c3aed; }

/* ── éditeur (scrollable) ── */
.partition-editor {
    overflow-x: auto;
    background: #fff;
}

/* ── barre de durée ── */
.part-dur-bar {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 0.3em;
}
.part-dur-btn {
    border: none;
    border-left: 1px solid #ccc;
    background: #f5f5f5;
    font-family: inherit;
    font-size: 0.78em;
    padding: 0.15em 0.55em;
    cursor: pointer;
    line-height: 1;
    color: #555;
}
.part-dur-label {
    font-size: 0.7em;
    color: #999;
    padding: 0 0.4em;
    border-right: 1px solid #ccc;
    background: #f5f5f5;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.part-dur-btn:first-child { border-left: none; }
.part-dur-btn:hover  { background: #ddd; }
.part-dur-btn.active { background: #ede9fe; color: #7c3aed; font-weight: bold; }

/* ── séquenceur — grille CSS unifiée ── */
.part-seq-grid {
    display: grid;
    /* grid-template-columns défini en JS : repeat(N, minmax(0.85em, 3rem)) */
    grid-template-rows: 3em 1.4em repeat(6, 1.1em) 1.4em;
    border-bottom: 1px solid #ddd;
}

/* rangée 1 — accords (main manche) */
.part-ctrack-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    padding: 0.15em 0.1em;
    border-right: 1px solid #ddd0f5;
    border-bottom: 2px solid #c4b0e8;
    cursor: pointer;
    overflow: hidden;
    background: #f3eeff;
    transition: background 0.08s;
}
.part-ctrack-cell.beat-start   { border-left: 1px solid #a890d8; }
.part-ctrack-cell.chord-active { background: #ede5ff; }
.part-ctrack-cell.chord-start  { background: #e4d5ff; }
.part-ctrack-cell:not(.chord-start):hover { background: #e8dcff; }
.part-chord-name-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.72em;
    font-weight: bold;
    color: #5b21b6;
    white-space: nowrap;
    overflow: hidden;
    max-height: 100%;
}

/* rangée 2 — marqueur fin de séquence */
.part-ctrack-delim-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e0e0e0;
    border-bottom: 2px solid #c8c8c8;
    cursor: pointer;
    font-size: 0.7em;
    color: #bbb;
    background: #efefef;
    transition: background 0.08s, color 0.08s;
}
.part-ctrack-delim-cell.beat-start   { border-left: 1px solid #b8b8b8; }
.part-ctrack-delim-cell.delim-active { color: #7c3aed; background: #ddd5f5; }
.part-ctrack-delim-cell:not(.delim-active):hover { background: #e4e0f5; color: #9966cc; }

/* rangées 3–8 — picking (main chevalet) */
.part-cell {
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #ffffff;
    transition: background 0.08s;
    touch-action: none;
    cursor: pointer;
}
.part-cell.beat-start        { border-left: 1px solid #b8b8b8; }
.part-cell:hover             { background: #ddd8f8; }

/* barre de note — par-dessus la click zone, pointer-events none */
.part-note-bar {
    background: #7c3aed;
    border-radius: 0.15em;
    margin: 1px;
    pointer-events: none;
    z-index: 1;
}
.part-note-bar.out-of-range { opacity: 0.3; }

/* rangée 9 — règle de mesure */
.part-ruler-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    color: #aaa;
    border-right: 1px solid #ececec;
    background: #f5f5f5;
}
.part-ruler-cell.beat-start { border-left: 1px solid #b8b8b8; }

/* playhead — toutes les cellules de la colonne */
.part-ctrack-cell.playhead,
.part-ctrack-delim-cell.playhead,
.part-cell.playhead,
.part-ruler-cell.playhead { background: rgba(124, 58, 237, 0.08); }
/* supprimé : .part-cell.active n'existe plus (note bar gère la couleur) */

/* hors-durée (après le premier délimitateur) */
.part-ctrack-cell.out-of-range,
.part-ctrack-delim-cell.out-of-range,
.part-cell.out-of-range,
.part-ruler-cell.out-of-range { opacity: 0.3; }

/* ─── Paramètres ─────────────────────────────────────────────────────────── */
.ux-panel-content:has(.settings-link) {
    display: flex;
    flex-direction: column;
    padding: 0.2em 0.75em 0.6em;
}
.settings-link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0;
    background: none;
    border: none;
    color: #555;
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s, color 0.15s;
}
.settings-link:hover { opacity: 1; color: #222; }
.settings-link--danger { color: #c0392b; }
.settings-link--danger:hover { color: #a02020; opacity: 1; }
/* dans l'overlay sombre */
#config-overlay .settings-link { color: #ffffffcc; }
#config-overlay .settings-link:hover { color: #fff; }
#config-overlay .settings-link--danger { color: #ff8080; }
#config-overlay .settings-link--danger:hover { color: #ffaaaa; }

/* ─── Écoute ─────────────────────────────────────────────────────────────── */
#ecoute-content {
    display: flex;
    flex-direction: column;
    padding: 0.2em 0.75em 0.6em;
}
#ecoute-note {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.3em 0 0.1em;
}
.en-note {
    font-size: 2em;
    font-weight: 700;
    color: #111;
    min-width: 2.8em;
    letter-spacing: -0.02em;
}
.en-cents {
    font-size: 0.8em;
    color: #aaa;
}
.en-cents--good { color: #27ae60; }
.en-cents--warn { color: #d68910; }
.en-cents--bad  { color: #c0392b; }
/* aiguille accordeur */
#ecoute-needle {
    position: relative;
    height: 4px;
    background: #00000012;
    border-radius: 2px;
    margin: 0.8em 0 0.6em;
    overflow: visible;
}
.en-grad {
    position: absolute;
    top: -3px;
    width: 1px;
    transform: translateX(-50%);
    background: #00000030;
    height: 10px;
}
.en-grad-bound  { height: 10px; background: #00000055; }
.en-grad-zone   { height: 10px; background: #27ae6099; }
.en-grad-center { height: 16px; top: -6px; width: 2px; background: #000000aa; }
#ecoute-needle-cursor {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 12px;
    background: #333;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left 0.08s linear;
    left: 50%;
}
#ecoute-canvas {
    width: 100%;
    height: 56px;
    margin-top: 0.2em;
    border-radius: 0.4em;
    background: none;
    display: block;
}

/* ─── Notation ───────────────────────────────────────────────────────────── */
#notation-content {
    padding: 0.2em 0.75em 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.reperes-section-title {
    font-size: 0.72em;
    color: #777;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-top: 0.4em;
}
.reperes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 0.75em;
}
.reperes-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    font-size: 1.1em;
    width: 4.5em;
    text-align: center;
}
.reperes-cell-icon {
    width: 2em;
    height: 2em;
    background-color: #333;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
}
.reperes-cell-label {
    font-size: 0.62em;
    color: #555;
    font-weight: bold;
    letter-spacing: 0.03em;
}
.reperes-cell-name {
    font-size: 0.58em;
    color: #111;
    font-weight: 100;
    line-height: 1.2;
}
.reperes-badges {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.reperes-badge-item {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-size: 0.82em;
}
.reperes-badge-sym {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: #444;
}
.reperes-badge-label { color: #111; font-weight: 100; }

/* version stamp */
.app-version {
    font-size: 0.85em;
    opacity: 0.75;
    font-family: monospace;
    letter-spacing: 0.05em;
}

/* ── PanelMultipads ──────────────────────────────────────────────────────── */
.mp-content {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    padding: 0.6em 0.8em;
}
.mp-save-wrap {
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: #0001;
    border-radius: 0.5em;
    padding: 0.5em 0.6em;
}
.mp-pad-count {
    font-size: 0.78em;
    opacity: 0.6;
    white-space: nowrap;
}
.mp-name-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #0003;
    background: transparent;
    font-family: inherit;
    font-size: 0.88em;
    padding: 0.2em 0.3em;
    outline: none;
    min-width: 0;
}
.mp-save-btn {
    padding: 0.3em 0.8em;
    border: none;
    border-radius: 0.4em;
    background: #333;
    color: #fff;
    font-family: inherit;
    font-size: 0.82em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.mp-save-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.mp-empty {
    font-size: 0.82em;
    opacity: 0.45;
    text-align: center;
    padding: 0.8em 0;
}
.mp-scene-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.mp-scene-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    background: #0001;
    border-radius: 0.5em;
    padding: 0.4em 0.6em;
}
.mp-scene-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.mp-scene-name {
    font-size: 0.88em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-scene-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}
.mp-chord-pill {
    font-size: 0.72em;
    background: #0002;
    border-radius: 0.3em;
    padding: 0.15em 0.45em;
    white-space: nowrap;
}
.mp-scene-actions {
    display: flex;
    gap: 0.3em;
    flex-shrink: 0;
    align-items: center;
}
.mp-btn {
    padding: 0.25em 0.65em;
    border: none;
    border-radius: 0.35em;
    background: #333;
    color: #fff;
    font-family: inherit;
    font-size: 0.78em;
    cursor: pointer;
    white-space: nowrap;
}
.mp-btn--del {
    background: transparent;
    color: #c44;
    font-size: 0.9em;
    padding: 0.2em 0.4em;
}