#chord-list{list-style:none;padding:0;margin-top:15px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}#chord-list li{position:relative;border:1px solid var(--al-border-color-light);margin-bottom:8px;background-color:var(--al-list-item-bg);cursor:pointer;display:flex;flex-direction:column;border-radius:6px;transition:background-color .2s ease,box-shadow .2s ease;color:var(--al-text-color);box-sizing:border-box}#chord-list li:hover{background-color:var(--al-list-item-hover-bg);box-shadow:0 1px 3px var(--al-container-shadow)}.chord-item-top-row{display:flex;justify-content:space-between;align-items:center;width:100%}.chord-order-indicator{position:absolute;top:5px;left:5px;visibility:hidden;z-index:1;font-weight:700;color:var(--al-text-color-light);text-align:left;font-size:.85em}#chord-list li .delete-chord-btn{position:absolute;bottom:0;right:0;z-index:2;background-color:transparent;color:var(--button-danger-bg);border:none;padding:2px 4px;font-size:1.1em;font-weight:700;line-height:1;cursor:pointer;border-radius:3px}#chord-list li .delete-chord-btn:hover{color:var(--button-danger-bg);text-shadow:0 0 6px var(--button-danger-glow-color),0 0 10px var(--button-danger-glow-color);box-shadow:none!important;border:none!important}.chord-item-display{width:100%;max-height:90px;display:flex;align-items:center;justify-content:center;margin-top:0}#chord-list li .chord-name-span{color:var(--al-text-color);text-align:center;font-weight:500;width:100%;margin-top:5px;font-size:.9em;word-break:break-all}#chord-list li.selected{background-color:var(--al-list-item-selected-bg);border-left:4px solid var(--al-list-item-selected-border);font-weight:500;color:var(--al-text-color)}#chord-list li.dragging{opacity:.5;background-color:var(--dragging-bg)}.drag-ghost{position:absolute;z-index:1000;opacity:.75;pointer-events:none;box-sizing:border-box;border:1px solid var(--al-border-color-light);background-color:var(--al-list-item-bg);color:var(--al-text-color);border-radius:6px;padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.drag-ghost .chord-item-display{width:60px;height:80px;display:flex;align-items:center;justify-content:center}.drag-ghost .chord-name-span{color:var(--al-text-color);flex-grow:1;text-align:center;font-size:1em}.drag-ghost .chord-order-indicator{font-weight:700;color:var(--al-text-color-light);margin-right:10px;min-width:20px;text-align:right;align-self:center;padding-left:2px}.drag-ghost .delete-chord-btn{display:none}#chord-list li.drag-over-placeholder-left{border-left:3px dashed var(--placeholder-border-accent, var(--placeholder-border))}#chord-list li.drag-over-placeholder-right{border-right:3px dashed var(--placeholder-border-accent, var(--placeholder-border))}[data-theme=dark] #chord-list li .chord-item-display svg{filter:none!important}.chord-item-display svg text{font-size:.4em;transform:translateY(0);dominant-baseline:hanging}@media (max-width: 1000px){#chord-list{grid-template-columns:repeat(5,1fr)}}@media (max-width: 768px){#chord-list{grid-template-columns:repeat(4,1fr);gap:8px}.chord-item-display{max-height:90px}#chord-list li .chord-name-span{font-size:.9em}}#chord-list li.placeholder-add-chord{border:2px dashed var(--al-list-item-selected-border, #007bff);background-color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 15%,transparent);display:flex;justify-content:center;align-items:center;cursor:default;min-height:80px;transition:background-color .2s ease,border-color .2s ease}#chord-list li.placeholder-add-chord:hover{background-color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 25%,transparent);box-shadow:none;transform:none}.plus-sign-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.plus-sign-icon{font-size:2.5em;font-weight:700;color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 80%,black 20%);line-height:1;transition:color .2s ease}#chord-list li.fading-out{opacity:0;transition:opacity .3s ease-out}input[type=text],input[type=number],input[type=file],select{padding:8px 12px;border:1px solid var(--input-border);border-radius:4px;font-size:.9em;color:var(--input-text);background-color:var(--input-bg);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,background-color .3s ease,color .3s ease;margin:5px 0;box-sizing:border-box}input[type=text]:focus,input[type=number]:focus,input[type=file]:focus,select:focus{border-color:var(--input-focus-border);outline:0;box-shadow:0 0 0 .2rem var(--input-focus-shadow)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:max-content;height:20px;background:transparent;cursor:pointer;margin:10px 0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:20px;background:var(--slider-track-bg, #ddd);border-radius:5px;border:1px solid var(--slider-track-border, #bbb)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-5px;height:30px;width:15px;background:var(--slider-thumb-bg, #555);border-radius:5px;border:1px solid var(--slider-thumb-border, #333);cursor:grab}input[type=range]:active::-webkit-slider-thumb{background:var(--slider-thumb-active-bg, #777);cursor:grabbing}input[type=range]::-moz-range-track{width:100%;height:12px;background:var(--slider-track-bg, #ddd);border-radius:5px;border:1px solid var(--slider-track-border, #bbb)}input[type=range]::-moz-range-thumb{height:18px;width:18px;background:var(--slider-thumb-bg, #555);border-radius:50%;border:1px solid var(--slider-thumb-border, #333);cursor:grab}input[type=range]:active::-moz-range-thumb{background:var(--slider-thumb-active-bg, #777);cursor:grabbing}input[type=range]::-ms-track{width:100%;height:12px;background:transparent;border-color:transparent;border-width:8px 0;color:transparent;cursor:pointer}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:var(--slider-track-bg, #ddd);border:1px solid var(--slider-track-border, #bbb);border-radius:5px}input[type=range]::-ms-thumb{margin-top:1px;height:18px;width:18px;background:var(--slider-thumb-bg, #555);border-radius:50%;border:1px solid var(--slider-thumb-border, #333);cursor:grab}input[type=range]:active::-ms-thumb{background:var(--slider-thumb-active-bg, #777);cursor:grabbing}.current-chord-section{position:relative}.interactive-diagram-area{position:relative;height:410px;margin-bottom:20px}[data-theme=dark] #chord-display svg{filter:none!important;pointer-events:none}#chord-display{border:1px solid var(--al-border-color-light);padding:15px;background-color:#fff;border-radius:6px;box-shadow:inset 0 1px 3px var(--al-container-shadow);position:absolute;top:0;left:50%;transform:translate(-50%);width:332px;height:392px;z-index:2;box-sizing:border-box;filter:none!important;pointer-events:none}[data-theme=dark] #chord-display{background-color:#fff;border-color:#ddd;box-shadow:inset 0 1px 3px #00000014}#chord-display svg{pointer-events:none}.chord-editor>h3{color:var(--al-heading-color)}#interactive-fretboard-input{padding:10px;border:1px solid var(--al-border-color);border-radius:4px;background-color:var(--al-interactive-fretboard-bg);position:absolute;top:50px;left:51%;transform:translate(-50%);width:248px;height:auto;min-height:270px;z-index:1;opacity:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}.fretboard-controls,.fretboard-grid{display:flex;justify-content:space-around;width:100%;max-width:280px;box-sizing:border-box}.fretboard-controls{border-bottom:2px solid var(--al-fretboard-nut-color);padding-bottom:2.5px;margin-bottom:5px}.string-control,.string-column{display:flex;flex-direction:column;align-items:center;flex:1;padding:0 3px}.fret-marker{display:flex;justify-content:center;align-items:center;width:100%;height:20px;border-radius:3px;border:1px solid var(--al-fret-marker-border);padding:8.4px 0;cursor:pointer;font-size:.8em;font-weight:700;background-color:var(--al-fret-marker-bg);color:var(--al-text-color);-webkit-user-select:none;user-select:none}.fret-marker.mute{border:none;background:none}.fret-marker.open{border:1px dashed var(--al-fret-marker-open-border)}.fret-marker.fret{position:relative;border-top:1px solid var(--al-fret-marker-line)}.string-column>.fret-marker.fret:first-child{border-top:none}.fret-marker:hover{background-color:var(--al-fret-marker-hover-bg)}.fret-marker.selected{background-color:var(--al-fret-marker-selected-bg);color:var(--al-fret-marker-selected-text);border-color:var(--al-fret-marker-selected-border)}.fret-marker.open.selected{border:1px solid var(--al-fret-marker-selected-border);background-color:var(--al-fret-marker-open-selected-bg);color:var(--al-fret-marker-open-selected-text)}.fret-marker.mute.selected{color:var(--al-fret-marker-mute-selected-text)}.string-state-toggle.is-x{position:relative;top:1px}.chord-editor label{display:inline-block;margin-right:10px;margin-bottom:10px;color:var(--al-text-color)}[data-theme=dark] .chord-editor label{color:#f0f0f0}.chord-editor input[type=text],.chord-editor input[type=number]{padding:8px 12px;border:1px solid var(--al-input-border);border-radius:4px;font-size:.9em;color:var(--al-input-text);background-color:var(--al-input-bg);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;margin:5px 0;box-sizing:border-box}.chord-editor input[type=text]:focus,.chord-editor input[type=number]:focus{border-color:var(--al-input-focus-border);outline:0;box-shadow:0 0 0 .2rem var(--al-input-focus-shadow)}.chord-editor input[type=text]{width:auto;min-width:40px}.chord-editor input[type=number]{width:auto;min-width:60px}#chord-name{position:absolute;top:120px;left:50%;transform:translate(-50%);width:calc(100% - 40px);max-width:280px;z-index:10;background-color:#fff;border:none;text-align:center;font-size:1.5em;font-weight:700;color:var(--al-heading-color, #333);box-shadow:none;outline:none}#chord-name:focus{outline:none}.fret-text-inputs{display:flex;flex-wrap:nowrap;justify-content:space-around;width:max-content;padding:8px 10px;margin-top:0;border-radius:4px;position:absolute;bottom:60px;left:52%;transform:translate(-50%);z-index:3}.fret-text-inputs label{display:flex;align-items:baseline;margin-right:8px}.fret-text-inputs label:last-child{margin-right:0}.fret-text-inputs .string-text-input{width:28px;height:28px;text-align:center;font-size:.9em;padding:2px;border:1px solid var(--al-input-border);border-radius:3px;background-color:var(--al-input-bg);color:var(--al-input-text)}.fret-text-inputs .string-text-input:focus{border-color:var(--al-input-focus-border);box-shadow:0 0 0 .1rem var(--al-input-focus-shadow)}.chord-meta-controls>div:first-child{display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-direction:column}.chord-meta-controls input[type=text],.chord-meta-controls input[type=number]{padding:6px 10px;border:1px solid var(--al-input-border);border-radius:4px;font-size:.9em;color:var(--al-input-text);background-color:var(--al-input-bg);box-sizing:border-box}.chord-meta-controls input[type=text]:focus,.chord-meta-controls input[type=number]:focus{border-color:var(--al-input-focus-border);outline:0;box-shadow:0 0 0 .2rem var(--al-input-focus-shadow)}#position{width:max-content}.chord-name-wrapper{height:0;padding:0;margin:0;border:none;position:relative}.chord-meta-controls{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px}.position-and-actions-wrapper{display:flex;justify-content:flex-start;align-items:center;gap:15px;width:80%}.interactive-fretboard-input .fret-marker.is-drag-source{box-shadow:0 0 8px 2px var(--al-fret-marker-selected-bg)}.interactive-fretboard-input .fret-marker.is-drag-hover-note{background-color:var(--al-fret-marker-hover-bg);outline:2px dashed var(--al-fret-marker-selected-border);outline-offset:-2px}.interactive-fretboard-input .fret-marker.is-drag-path-barre-segment{background-color:var(--al-fret-marker-selected-bg)!important;opacity:.6}.prediction-popup{position:absolute;top:100px;right:calc(50% - 320px);left:auto;transform:none;background-color:var(--interactive-bg);border:1px solid var(--border-color-light);border-radius:12px;padding:15px;box-shadow:0 4px 20px #0003;z-index:1050;width:auto;max-width:90%;max-height:300px;overflow-y:auto}.prediction-popup-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;border-bottom:1px solid var(--border-color-light);padding-bottom:8px}.prediction-popup-header h4{margin:0 30px 0 0;font-size:1.1em;color:var(--text-color-primary)}#close-prediction-popup{position:absolute;top:0;right:0;font-size:1.2em;padding:.2em .5em;line-height:1;background:transparent;border:none;color:var(--modal-close-text);cursor:pointer}#close-prediction-popup:hover{color:var(--modal-close-hover-text)}#prediction-list{list-style:none;padding:0;margin:0;column-count:2;column-gap:20px}#prediction-list li{padding:9px 5px;border-bottom:1px solid var(--border-color-extralight);cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text-color-secondary);transition:background-color .2s ease;break-inside:avoid-column}#prediction-list li:last-child{border-bottom:none}#prediction-list li:hover{background-color:var(--hover-background-color);color:var(--text-color-primary)}@media (max-width: 768px){.prediction-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);right:auto;width:auto;max-width:90%;padding:20px;box-shadow:0 5px 15px #0000004d}.prediction-popup-header h4{font-size:1.2em}#prediction-list li{padding:12px 8px;font-size:1em}#prediction-list .accept-prediction-btn{padding:6px 10px;font-size:1em}}