:root {
    --accent: #43dfe7;
    --accent-soft: rgba(67, 223, 231, 0.16);
    --border-subtle: #ececf71f;
    --chord-card-height-u: 10;
    --chord-card-width-u: 9;
    --chords-gutter: 100px;
    --chords-max: 1850px;
    --color-bg: #2a282d;
    --color-fg: #efeffc;
    --delete-btn-nudge-up: 1em;
    --delete-btn-nudge-x: 1em;
    --diagram-dot-size: .5;
    --diagram-footer-offset: .05;
    --diagram-footer-row-h: .2;
    --diagram-fret-label-col-w: .37;
    --diagram-fret-label-font-scale: .45;
    --diagram-fret-label-translate-x: -.1;
    --diagram-fret-label-translate-y: .0;
    --diagram-fretline-width: .1;
    --diagram-header-font-scale: .5;
    --diagram-header-gap: .5em;
    --diagram-header-offset: .2;
    --diagram-header-row-h: .2;
    --diagram-nut-bump: .1;
    --diagram-nutline-width: .2;
    --diagram-row1-h: 1;
    --diagram-row2-h: 1.07;
    --diagram-row3-h: 1.09;
    --diagram-row4-h: 1.09;
    --diagram-string-gap: .7;
    --diagram-string-width: .1;
    --diagram-u: 1.75rem;
    --focus-ring: #43dfe78c;
    --font-base: system-ui, sans-serif;
    --font-chord: NunitoChord, var(--font-base);
    --font-inter: 'Inter', system-ui, sans-serif;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --fz-14: .875rem;
    --fz-16: 1rem;
    --fz-18: 1.125rem;
    --fz-22: 1.375rem;
    --fz-28: 1.75rem;
    --radius-card: 12px;
    --radius-component: 8px;
    --radius-m: 12px;
    --radius-pill: 999px;
    --radius-xs: .5rem;
    --radius-xxs: .25rem;
    --root-dot-color: #43dfe7;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-m: 1rem;
    --space-s: .75rem;
    --space-xs: .5rem;
    --tooltip-gap: 0.65rem;
    --tooltip-max-ch: 36;
    --tooltip-offset-x: 0px;
    --tooltip-offset-y: 0px;
    --tooltip-caret-x: 0px;
    --surface-elevated: #2a282d;
    --surface: #2a282d;
    --text-on-accent: #0e1b1b;
    --text-primary: #f5f4ee;
    --text-secondary: #ececf7;
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);
    /Radii/--radius-s: 10px;
    /Shadows/--shadow-elevated: 0 1px 0 #ffffff05 inset, 0 10px 28px #00000059;
    /Spacing/--space-2: .5rem;
    /Surfacetext/--surface: #2a282d;
    /Typescale/--fz-12: .75rem;
}

:root[data-bs-theme="light"] {
    --accent: #555555;
    --accent-soft: rgba(85, 85, 85, 0.16);
    --border-subtle: #c8c8c8;
    --color-bg: #ffffff;
    --color-fg: #000000;
    --focus-ring: #7a7a7a;
    --root-dot-color: #555555;
    --shadow-elevated: 0 1px 0 #00000008 inset, 0 10px 28px #0000001f;
    --shadow-modal: 0 10px 32px rgba(0, 0, 0, 0.14);
    --surface-elevated: #f5f5f5;
    --surface: #ffffff;
    --text-on-accent: #ffffff;
    --text-primary: #000000;
    --text-secondary: #2f2f2f;
}

:root[data-bs-theme="light"] #add-group,
:root[data-bs-theme="light"] .btn-primary {
    background: #dcdcdc !important;
    border-color: #c8c8c8 !important;
    color: #000000 !important;
}

:root[data-bs-theme="light"] #delete-group-modal {
    background: rgba(0, 0, 0, 0.24) !important;
}

:root[data-bs-theme="light"] #delete-group-modal h5,
:root[data-bs-theme="light"] #delete-group-modal p {
    color: #000000;
}

:root[data-bs-theme="light"] #delete-group-modal>div {
    background:
        radial-gradient(900px 360px at 18% 0%, rgba(85, 85, 85, 0.03), transparent 60%),
        radial-gradient(900px 360px at 92% 0%, rgba(194, 106, 37, 0.025), transparent 62%),
        var(--surface-elevated) !important;
    border: 1px solid #c8c8c8;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    color: #000000;
}

:root[data-bs-theme="light"] .btn {
    background: #f5f5f5 !important;
    border-color: #c8c8c8 !important;
    color: #000000 !important;
}

:root[data-bs-theme="light"] .btn-outline-danger,
:root[data-bs-theme="light"] .remove-group {
    background: transparent !important;
    border-color: #c8c8c8 !important;
    color: #2f2f2f !important;
}

body[data-cloud-auth="true"]:not([data-collections-load-settled="true"]) #empty-msg {
    display: none !important;
}

:root[data-bs-theme="light"] .btn-success {
    background: #4f4f4f !important;
    border-color: #4f4f4f !important;
    color: #ffffff !important;
}

:root[data-bs-theme="light"] .btn-success:hover {
    background: #5f5f5f !important;
}

:root[data-bs-theme="light"] .btn:hover {
    background: #e6e6e6 !important;
}

:root[data-bs-theme="light"] .chord-card {
    background: #ffffff;

    box-shadow: 0 2px 8px #00000014;
}

:root[data-bs-theme="light"] .chord-card .delete-chord-btn,
:root[data-bs-theme="light"] .chord-card .delete-chord-btn:hover,
:root[data-bs-theme="light"] .collection-card .delete-collection-btn,
:root[data-bs-theme="light"] .collection-card .delete-collection-btn:hover {
    background: #555555;
    color: #ffffff;
}

:root[data-bs-theme="light"] .chord-dot-filled,
:root[data-bs-theme="light"] .chord-dot.root-ghost .chord-dot-mini,
:root[data-bs-theme="light"] .chord-dot.root-played,
:root[data-bs-theme="light"] .chord-header-root-played {
    background: #555555 !important;
}

:root[data-bs-theme="light"] .chord-header-root-ghost {
    background: transparent !important;
    border-color: #000000;
}

:root[data-bs-theme="light"] .chord-header-root-ghost .chord-header-root-mini {
    background: #555555 !important;
}

:root[data-bs-theme="light"] .chord-header-root-played .chord-header-root-label {
    color: #ffffff;
}

:root[data-bs-theme="light"] .chord-header-root-ghost .chord-header-root-label {
    color: #555555;
}

:root[data-bs-theme="light"] .chord-dot-label {
    color: #ffffff;
}

:root[data-bs-theme="light"] .chord-dot.root-ghost {
    border-color: #000000;
}

:root[data-bs-theme="light"] .chord-footer-label,
:root[data-bs-theme="light"] .chord-fret-label,
:root[data-bs-theme="light"] .chord-header-fret,
:root[data-bs-theme="light"] .chord-header-muted,
:root[data-bs-theme="light"] .chord-header-open {
    color: #000000;
}

:root[data-bs-theme="light"] .chord-title {
    color: #000000;
}

:root[data-bs-theme="light"] .group {
    background: #f5f5f5;
    border-color: #c8c8c8;
    box-shadow: 0 4px 12px #00000014;
}

:root[data-bs-theme="light"] .group-handle {
    color: #000000;
}

:root[data-bs-theme="light"] body {
    background: #ffffff;
    color: #000000;
    text-shadow: none;
}

:root[data-bs-theme="light"] h2.mb-3::after {
    background: linear-gradient(90deg, #7a7a7a, #7a7a7a 55%);
}

@font-face {
    font-family: 'NunitoChord';
    font-style: normal;
    font-weight: 400;
    src: url(/static/Nunito-VariableFont_wght.ttf) format("truetype");
}






/ Focus ring / .btn:focus {
    outline: none !important;
}

/ Group divider / .group>hr.border {
    background: linear-gradient(90deg, #ffffff0f, #fff0 40%, #ffffff0f 100%);
    border: 0 !important;
    height: 1px !important;
    margin: var(--space-4) 0 var(--space-2) !important;
}

/ Group header row / .group>.d-flex.align-items-center {
    gap: var(--space-2);
    margin-bottom: var(--space-3) !important;
}

/* Page header layout */
.page-title-group {
    margin: 1em 0 1.25rem;
}

.page-breadcrumb .breadcrumb-icon {
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.2em;
    margin-right: 0.25rem;
}

/* normal link state (blue) */
.page-breadcrumb a {
    color: var(--bs-link-color);
    /* or #0d6efd */
    text-decoration: none;
}

/* mouse hover effect */
.page-breadcrumb a:hover {
    color: var(--bs-link-hover-color);
    /* or a slightly darker blue */
}


.page-title-row {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: .65rem;
}

:root[data-bs-theme="light"] .page-title-row {
    border-color: rgba(0, 0, 0, 0.08);
}

.page-title-row .primary-button {
    background: #004654;
    color: rgb(255, 255, 255);
    border: 1px solid #47637F;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.3em 1.2em 0.3em 1.2em;
    height: 2.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.page-title-row .primary-button:hover,
.page-title-row .primary-button:focus-visible {
    background: #47637F;
    border-color: #0949a7;
    color: #fff;
    outline: none;
}

.page-title-row .primary-button:focus-visible {
    box-shadow: 0 0 0 0.12rem rgba(13, 110, 253, 0.35);
}

.page-title-row .primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.page-title-row .primary-button .material-icons-outlined {
    color: #fff;
    font-size: 1.25em;
    line-height: 1;
}

.page-title {
    color: var(--text-primary);
    flex-shrink: 1;
    font-size: clamp(var(--fz-22), 1.25rem + 1vw, var(--fz-28));
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
    text-shadow: 0 1px 0 #00000040;
}

.page-title::after {
    content: none;
}

#undo-redo-wrap {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
    justify-content: flex-end;
}

#undo-redo-wrap #undo-history-btn,
#undo-redo-wrap #redo-history-btn {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    justify-content: center;
}

#undo-redo-wrap #undo-history-btn .material-icons-outlined,
#undo-redo-wrap #redo-history-btn .material-icons-outlined {
    font-size: 1.2em;
    line-height: 1;
}


#collections-export-btn {
    margin-right: clamp(2rem, 4vw, 4em);
}

/ Heading changes / h2.mb-3 {
    color: var(--text-primary);
    font-size: clamp(var(--fz-22), 1.25rem + 1vw, var(--fz-28));
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 0 #00000040;
}

/ Primary (Save) / .btn-success {
    background: var(--accent) !important;
    border-color: transparent !important;
    color: var(--text-on-accent) !important;
}

/ Secondary (Add group) / #add-group,
.btn-primary {
    background: #ffffff08 !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/ Surface changes /:root {
    color-scheme: dark;
}

body {
    background: radial-gradient(120% 200% at 50% -80%, #3a3840 0%, var(--surface) 58%), var(--surface);
    background: var(--color-bg);
    color: var(--color-fg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-size: var(--fz-14);
    letter-spacing: -.01em;
    line-height: 1.6;
    margin: 0;
}

body>.row {
    margin-inline: auto;
    max-width: 72rem;
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem) 3rem;
}

.my-chords-link {
    margin-right: 40px;
}

.nav-item {
    margin-right: ;
}

code {
    font-size: 1rem;
}

div.form-text {
    font-size: 1rem;
}

h2.mb-3::after {
    background: linear-gradient(90deg, #43dfe759, #43dfe700 55%);
    border-radius: 1px;
    content: "";
    display: block;
    height: 1px;
    margin-top: .45rem;
}

label.form-label {
    font-size: 1.15rem;
}

main.container,
.container {
    max-width: var(--chords-max);
    padding-left: var(--chords-gutter);
    padding-right: var(--chords-gutter);
}

pre {
    display: inline-block;
}

#cancel-import-chords {
    margin-left: 1em !important;
}

/* --- Delete Group Modal (polished styling) --- */
#delete-group-modal {
    background: rgba(0, 0, 0, 0.26) !important;
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #delete-group-modal {
        background: rgba(0, 0, 0, 0.40) !important;
    }
}

#delete-group-modal h5,
#delete-group-modal p {
    color: var(--color-fg);
}

#delete-group-modal>div {
    background:
        radial-gradient(900px 360px at 18% 0%, rgba(67, 223, 231, 0.04), transparent 60%),
        radial-gradient(900px 360px at 92% 0%, rgba(255, 179, 102, 0.03), transparent 62%),
        var(--surface-elevated, var(--color-bg)) !important;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    color: var(--color-fg);
}

#groups-root {
    margin-top: var(--space-2);
}

#groups-root .chord-grid {
    align-items: start;
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--diagram-u) * var(--chord-card-width-u)), 100%), 1fr));
    justify-content: center;
    row-gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}



#import-chords-input.import-chords-textarea {
    background: #23222a;
    border-radius: var(--radius-s, 10px);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    color: var(--text-primary);
    display: block;
    font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--fz-14, 0.875rem);
    line-height: 1.5;
    max-height: 15em;
    min-height: 5em;
    outline: none;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    resize: vertical;
    width: 100%;
}

#import-chords-input.import-chords-textarea:focus,
#import-chords-input.import-chords-textarea:focus-visible {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 1px #0009, 0 0 0 3px var(--focus-ring);
    outline: none;
}

#redo-history-btn[disabled],
#undo-history-btn[disabled] {
    opacity: .5;
    pointer-events: none;
}

.btn-outline-danger,
.remove-group {
    background: transparent !important;
    border-color: var(--border-subtle) !important;
    color: #ececf7bf !important;
}

.btn-sm {
    font-size: var(--fz-12) !important;
    padding: .45rem .75rem !important;
}

.btn-success:active {
    background: #1bcad5 !important;
}

.btn-success:hover {
    background: #56e3ea !important;
}

.btn:active {
    transform: translateY(0.5px);
}

.btn:disabled,
.btn[disabled] {
    cursor: not-allowed !important;
    opacity: .55 !important;
}

.btn:focus-visible,
.remove-group:focus-visible {
    box-shadow: 0 0 0 2px #0009 0 0 0 4px var(--focus-ring) !important;
    outline: none !important;
}

.btn:hover {
    background: #ffffff0a !important;
}

.chord-card {
    border-radius: var(--radius-xs);

    box-sizing: border-box;
    max-width: 100%;
    min-height: calc(var(--diagram-u) * var(--chord-card-height-u));
    min-width: calc(var(--diagram-u) * var(--chord-card-width-u));
    padding: 2em;
    padding: var(--space-1);
    position: relative;
    width: 100%;
    z-index: 0;
}

.chord-card .chord-diagram {
    height: auto;
    max-height: 100%;
    max-width: 100%;
}

.chord-card .chord-edit-section {
    display: none;
    margin-top: 1rem;
    width: 100%;
}

.chord-card .chord-handle {
    cursor: move;
    left: var(--space-4);
    position: absolute;
    top: var(--space-3);
    z-index: 2;
}

.chord-card .chord-title {
    flex: 0 0 auto;
    font-family: "Noto Sans", "Noto Sans Symbols 2", system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", Arial, sans-serif;
    letter-spacing: 0.01em;
    padding-top: 2em;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.chord-card .delete-chord-btn {
    background: #dc3545;
    border-radius: 50%;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    color: white;
    cursor: pointer;
    display: none;
    font-size: 1.1em;
    height: 1.7em;
    left: 0rem;
    line-height: 1.7em;
    position: absolute;
    text-align: center;
    top: 0rem;
    transition: background 0.2s;
    width: 1.7em;
    z-index: 3;
}

.collection-card .delete-collection-btn {
    background: #dc3545;
    border-radius: 50%;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    color: white;
    cursor: pointer;
    display: none;
    font-size: 1.1em;
    height: 1.7em;
    left: 0;
    line-height: 1.7em;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translate(-0.6em, -0.7em);
    transition: background 0.2s;
    width: 1.7em;
    z-index: 3;
}

.chord-card:hover {
    border: 1px solid #d9d9d9;

}


.chord-card .delete-chord-btn:hover {
    background: #b52f3a;

}

.chord-card .material-icons-outlined.chord-edit {
    align-self: flex-start;
    margin-right: var(--space-3);
    margin-top: var(--space-3);
    font-size: 1.5em !important;
}

.chord-card .material-icons-outlined.chord-edit,
.chord-card .material-icons-outlined.chord-handle {
    font-size: 1.8em;
    line-height: 1;
    opacity: 0.82;
    pointer-events: auto;
    transition: opacity .18s, transform .18s;

}

.chord-card .material-icons-outlined.chord-handle {
    align-self: flex-start;
}

.chord-card.deletable {
    animation: chord-shake 0.3s infinite linear alternate;
}

.chord-card.deletable .delete-chord-btn {
    display: block;
    transform: translate(var(--delete-btn-nudge-x), calc(-1 * var(--delete-btn-nudge-up)));
}

.collection-card.deletable .delete-collection-btn {
    display: block;
}

.chord-card.is-editing .chord-edit-section {
    display: block;
}

.chord-card::before {
    background: inherit;
    border-radius: inherit;
    content: "";
    inset: -0.5rem;
    position: absolute;
    z-index: -1;
}

.chord-card:hover .chord-edit,
.chord-card:hover .chord-handle {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.chord-card:hover .material-icons-outlined.chord-edit,
.chord-card:hover .material-icons-outlined.chord-handle {
    opacity: 1;
}

.chord-diagram {
    --dot-size: var(--diagram-dot-size);
    --footer-row-h: var(--diagram-footer-row-h);
    --fret-label-col-w: var(--diagram-fret-label-col-w);
    --fret-label-font-scale: var(--diagram-fret-label-font-scale);
    --fret-label-tx: var(--diagram-fret-label-translate-x);
    --fret-label-ty: var(--diagram-fret-label-translate-y);
    --fretline-width: var(--diagram-fretline-width);
    --header-font-scale: var(--diagram-header-font-scale);
    --header-gap: var(--diagram-header-gap);
    --header-row-h: var(--diagram-header-row-h);
    --nutline-width: var(--diagram-nutline-width);
    --row1-h: var(--diagram-row1-h);
    --row2-h: var(--diagram-row2-h);
    --row3-h: var(--diagram-row3-h);
    --row4-h: var(--diagram-row4-h);
    --string-gap: var(--diagram-string-gap);
    --string-width: var(--diagram-string-width);
    --u: var(--diagram-u);
    background: var(--color-bg);
    border-collapse: collapse;
    color: var(--color-fg);
    display: inline-table;
    font-family: var(--font-chord);
    margin: 0 auto;
    max-width: none;
    table-layout: fixed;
    width: auto;
    user-select: none;
}

.chord-diagram tbody td.chord-fret-label,
.chord-diagram thead th:first-child {
    width: calc(var(--u) * var(--fret-label-col-w));
}

.chord-diagram tbody td.chord-string-cell,
.chord-diagram thead th:not(:first-child) {
    width: calc(var(--u) * var(--string-gap));
}

.chord-diagram tbody tr:last-child .chord-string-cell::before {
    display: block;
}

.chord-diagram tbody tr:nth-child(1) {
    height: calc(var(--u) * var(--row1-h));
}

.chord-diagram tbody tr:nth-child(2) {
    height: calc(var(--u) * var(--row2-h));
}

.chord-diagram tbody tr:nth-child(3) {
    height: calc(var(--u) * var(--row3-h));
}

.chord-diagram tbody tr:nth-child(4) {
    height: calc(var(--u) * var(--row4-h));
}

.chord-diagram td,
.chord-diagram th {
    box-sizing: border-box;
}

.chord-diagram thead th {
    border: 0;
    font-size: calc(var(--u) * var(--header-font-scale));
    font-weight: var(--font-weight-medium);
    height: calc(var(--u) * var(--header-row-h) + var(--header-gap));
    line-height: calc(var(--u) * var(--header-row-h) + var(--header-gap));
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    user-select: none;
}

.chord-diagram thead th .chord-header-label,
.chord-diagram thead th .chord-header-placeholder {
    bottom: calc(var(--header-gap) + var(--u) * var(--diagram-header-offset));
    display: inline-block;
    left: 50%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: auto;
    transform: translateX(-50%);
}

/* Expand header click hit area upward so X/0 region is easier to tap */
.chord-diagram thead th.chord-header-string::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1em);
    height: 1em;
    pointer-events: auto;
}

.chord-diagram thead th .chord-header-root {
    border-radius: var(--radius-pill);
    bottom: calc(var(--header-gap) + var(--u) * var(--diagram-header-offset));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    height: calc(var(--u) * var(--dot-size) * 0.924);
    left: 50%;
    position: absolute;
    top: auto;
    transform: translate(-50%, 1px);
    width: calc(var(--u) * var(--dot-size) * 0.924);
    z-index: 2;
}

.chord-diagram thead th .chord-header-root-ghost {
    background: transparent;
    border: calc(var(--u) * 0.04) solid var(--color-fg);
    color: var(--root-dot-color);
}

.chord-diagram thead th .chord-header-root-ghost .chord-header-root-mini {
    background: var(--root-dot-color);
    border-radius: var(--radius-pill);
    height: calc(var(--u) * var(--dot-size) * 0.572);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--u) * var(--dot-size) * 0.572);
}

.chord-diagram thead th .chord-header-root-played {
    background: var(--root-dot-color);
    color: var(--text-on-accent, #0e1b1b);
}

.chord-diagram thead th .chord-header-root-label {
    color: var(--text-on-accent, #0e1b1b);
    font-size: calc(var(--u) * var(--dot-size) * 0.96);
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    position: relative;
    top: 1px;
}

.chord-diagram thead th .chord-header-root-ghost .chord-header-root-label {
    color: var(--root-dot-color);
}

.chord-diagram thead th:not(.chord-header-spacer) {
    border-bottom: none;
    position: relative;
    z-index: 1;
}

.chord-diagram thead tr {
    height: calc(var(--u) * var(--header-row-h) + var(--header-gap));
    position: relative;
}

.chord-diagram thead tr::after {
    background: var(--color-fg);
    border-radius: var(--radius-pill);
    bottom: 0;
    content: "";
    height: calc(var(--u) * var(--nutline-width));
    left: calc(var(--u) * var(--fret-label-col-w) + (var(--u) * var(--string-gap) / 2) - var(--u) * var(--string-width) - var(--u) * var(--diagram-nut-bump));
    pointer-events: none;
    position: absolute;
    right: calc((var(--u) * var(--string-gap) / 2) - var(--u) * var(--string-width) - var(--u) * var(--diagram-nut-bump));
    z-index: 0;
}

.chord-dot {
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    height: calc(var(--u) * var(--dot-size));
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--u) * var(--dot-size));
    z-index: 2;
}

.chord-dot-filled {
    background: var(--color-fg);
}

.chord-dot-label {
    color: var(--text-on-accent, #0e1b1b);
    font-size: calc(var(--u) * var(--dot-size) * 0.96);
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    position: relative;
    top: 1px;
}

.chord-dot-mini {
    background: var(--root-dot-color);
    border-radius: var(--radius-pill);
    height: calc(var(--u) * var(--dot-size) * 0.624);
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--u) * var(--dot-size) * 0.624);
    z-index: 3;
}

.chord-dot-wrap {
    height: 100%;
    position: relative;
    width: 100%;
}

.chord-dot.root-ghost {
    background: #2a282d !important;
    border: calc(var(--u) * 0.04) solid var(--color-fg);
}

.chord-dot.root-played {
    background: var(--root-dot-color) !important;
    display: grid;
    place-items: center;
}

.chord-edit {
    cursor: pointer;
    cursor: pointer !important;
}

.chord-edit,
.chord-handle {
    color: #0d6efd !important;
    filter: brightness(1) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.12s, color 0.12s, filter 0.12s !important;
}

.chord-edit-fields {
    display: block;
    margin-bottom: var(--space-2);
    padding-top: 1rem;
    transform: none;
    width: 100%;
}

.chord-edit-fields .form-control {
    box-sizing: border-box;
    font-size: 1.2em;
    max-width: 100%;
    text-align: center;
    width: 100%;
}

.chord-edit:hover,
.chord-handle:hover {
    filter: brightness(1.4) !important;
}

.chord-footer-cell {
    border: 0;
    height: calc(var(--u) * var(--footer-row-h));
    line-height: calc(var(--u) * var(--footer-row-h));
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: top;
}

.chord-footer-label {
    color: var(--color-fg);
    font-family: var(--font-chord);
    font-size: calc(var(--u) * var(--header-font-scale));
    font-weight: var(--font-weight-medium);
    left: 50%;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, calc(-50% + var(--u) * var(--diagram-footer-offset)));
}

.chord-footer-row {
    height: calc(var(--u) * var(--footer-row-h));
    transform: translateY(0.8em);
}

.chord-footer-spacer {
    border: 0;
    padding: 0;
    width: calc(var(--u) * var(--fret-label-col-w));
}

.chord-fret-label {
    border: 0;
    font-size: calc(var(--u) * var(--fret-label-font-scale));
    font-weight: var(--font-weight-medium);
    padding: 0;
    text-align: right;
    transform: translateX(calc(var(--fret-label-tx) * var(--u))) translateY(calc(var(--fret-label-ty) * var(--u)));
    vertical-align: middle;
}

.chord-grid .chord-card.editing-expanded {
    grid-column: span 2;
    max-width: 100%;
}

.chord-handle {
    cursor: move;
    cursor: move !important;
}

.chord-header-fret,
.chord-header-muted,
.chord-header-open {
    color: var(--color-fg);
    font-weight: var(--font-weight-medium);
}

.chord-name {
    margin-left: 1.6em;
}

.chord-name-input {
    box-sizing: border-box;
    resize: vertical;
    width: 100%;
}

.chord-shape-input {
    letter-spacing: 0.12em;
}

.chord-string-cell {
    border: 0;
    padding: 0;
    position: relative;
}

.chord-string-cell::after {
    background: var(--color-fg);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: calc(var(--u) * var(--string-width));
    z-index: 0;
}

.chord-string-cell::before {
    background: var(--color-fg);
    bottom: 0;
    content: "";
    height: calc(var(--u) * var(--fretline-width));
    left: 0;
    position: absolute;
    right: 0;
    z-index: 0;
}

.chord-symbols-row {
    justify-content: center;
    width: 100%;
}

.chord-symbols-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: var(--space-1);
    text-align: center;
    white-space: normal;
    width: 100%;
}

.chord-title {
    color: #00d3dc;
    font-size: 1.3em;
    margin-bottom: .15rem;
    transform: translateX(1em);
}

.collection-body-placeholder {
    flex: 1 1 auto;
}

.collection-card {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: flex-start;
    padding: 12px !important;
    position: relative;
    width: min(100%, 250px);
    max-width: 100%;
    min-width: 0;

}

.collection-card .collection-handle {
    left: var(--space-3);
    position: absolute;
    top: var(--space-3);
    z-index: 2;
    color: #47637F;
    cursor: move;
    opacity: 0;
    font-size: 24px;
    transition: opacity 0.15s ease;
}

.collection-card .collection-edit {
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    z-index: 2;
    cursor: pointer;
    color: #47637F;
    opacity: 0;
    font-size: 24px;
    border-radius: 50%;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.collection-card:hover .collection-handle,
.collection-card:hover .collection-edit {
    opacity: 1;
}

.collection-card .collection-edit:hover {
    color: #084aab;
    background: rgba(10, 88, 202, 0.08);
}



.collection-card .chord-name-input {
    background: #ffffff0f !important;
    border-radius: var(--radius-xxs) !important;
    border: 1px solid #ffffff2a !important;
    box-shadow: inset 0 0 0 1px #ffffff10;
    color: var(--text-primary) !important;
    display: none;
    flex: 1 1 auto;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
    padding: 0.35rem 0.5rem !important;
    resize: vertical;
    text-align: center;
    white-space: pre-wrap;
    width: 100%;
}

.collection-card .chord-title.collection-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.collection-card .collection-body-placeholder {
    height: calc(var(--diagram-u) * 4.5);
    width: 100%;
}

.collection-card .collection-title {
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0 auto;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    transform: none;
    white-space: normal;
    word-break: break-word;

    cursor: default;
}

.collection-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
    justify-content: flex-start;
    padding-top: 0.35rem;
}

.collection-card-header {
    align-items: center;
    align-items: flex-start;
    display: flex;
    gap: 0.35rem;
    height: 40px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0;
    padding: 0.35rem 1.25rem 0 1.75rem;
    transform: translateY(5em);
    width: 100%;
}

.collection-card.editing .chord-name-input {
    display: block;
}

.collection-card.editing .chord-title {
    display: none;
}

.collection-name-input {
    background-color: transparent;
    border-radius: 0.5rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-sizing: border-box;
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;


    min-height: 90px;
    outline: none;
    padding: 0.55rem 1.6rem 0.55rem 0.9rem;
    resize: vertical;
    scrollbar-color: rgba(15, 23, 42, 0.3) transparent;
    scrollbar-width: thin;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
    width: 100%;
}

.collection-name-input::-webkit-scrollbar {
    width: 6px;
}

.collection-name-input::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.25);
    border-radius: 999px;
}

.collection-name-input::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.4);
}

.collection-name-input::-webkit-scrollbar-track {
    background: transparent;
}

.collection-name-input:focus {
    background-color: transparent;
    border-color: rgba(59, 130, 246, 0.85);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22);
    cursor: text;
}

.collection-name-input:hover:not(:focus) {
    background-color: transparent;
    border-color: rgba(148, 163, 184, 0.95);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transform: translateY(-1px);
}

.delete-chord-btn {
    transform: translateX(-0.1em) translateY(-0.1em) !important;
}

.delete-group-pill {
    transform: translateX(-2.5em) translateY(-2.1em);
}

.form-control {
    padding-left: 0.3em;
    width: 100%;
}

.form-control.form-control-sm.group-name {
    padding-left: 2.5rem;
}


.mb-1.small {
    font-size: 0.875rem !important;
}

.group {
    background: var(--surface-elevated);
    border-radius: var(--radius-m);
    border-radius: var(--radius-xxs);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-elevated);
    position: relative;
    padding: var(--space-1) var(--space-1) var(--space-3);
    padding: var(--space-4);
}

.group .delete-group-pill {
    background: #dc3545;
    border-radius: 50%;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    color: white;
    cursor: pointer;
    display: none;
    font-size: 1.1em;
    height: 1.7em;
    left: 0.35rem;
    line-height: 1.7em;
    position: absolute;
    text-align: center;
    top: 0.35rem;
    transition: background 0.2s, opacity 0.2s;
    width: 1.7em;
    z-index: 4;
}

.group .delete-group-pill:hover {
    background: #b52f3a;
}

.group-buttons {
    align-items: center;
    align-self: center;
    display: flex;
    gap: 0.35rem;
    margin-left: 2em;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translate(4em, -50%);
    z-index: 1;
}

.group-buttons .add-chord,
.group-buttons .delete-chords,
.group-buttons .export-group {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    position: relative;
    padding: var(--space-1);
    transition: background-color .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
    width: 32px;
}

.group-buttons .add-chord {
    color: #43dfe7;
}

.group-buttons .export-group {
    color: var(--text-primary);
}

.group-buttons .delete-chords {
    color: #f96666;
}

.group-buttons .add-chord:hover,
.group-buttons .add-chord:focus-visible,
.group-buttons .export-group:hover,
.group-buttons .export-group:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--accent);
}

.group-buttons .delete-chords:hover,
.group-buttons .delete-chords:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ff6b6b;
}

.group-buttons .material-icons-outlined {
    font-size: 26px;
    line-height: 1;
}

.group:hover .group-header .group-buttons .add-chord,
.group:hover .group-header .group-buttons .delete-chords {
    opacity: 1;
    pointer-events: auto;
}

.group-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-right: -1.2rem;
    margin-bottom: -0.2 rem;
}

.group-footer-actions .export-group {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: var(--space-1);
    transition: background-color .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
    width: 32px;
    opacity: 0;
    pointer-events: none;
}

.group-footer-actions .export-group:hover,
.group-footer-actions .export-group:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--accent);
}

.group:hover .group-footer-actions .export-group,
.group:focus-within .group-footer-actions .export-group {
    opacity: 1;
    pointer-events: auto;
}

.group-handle {
    color: #47637F;
    cursor: move;
    scale: 1.1;
    left: 0.1rem;
    top: 0.1rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.group-header {
    align-items: center;
    display: flex;
    gap: 2em;

    position: relative;
    transform: translateX(-2em) translateY(-0.5em);
}

.group-header .group-name {
    display: inline-block;
    display: inline-block !important;
    flex: 0 0 auto;
    flex: 1 1 auto;
    flex: 1 1 auto !important;
    margin-right: 2em;
    min-width: 0;
    width: auto;

}

.group-header .group-handle {
    opacity: 0;
}

.group-header:hover .group-handle,
.group-header:focus-within .group-handle {
    opacity: 1;
}

.group-header .group-handle:hover {
    color: #084aab;
    background: rgba(10, 88, 202, 0.08);
    border-radius: 50%;
}

.group-header .remove-group {
    margin-left: auto;
}

.group-name {
    background: transparent !important;
    border-radius: var(--radius-xxs);
    border: none !important;
    box-shadow: none !important;
    color: var(--text-primary);
    cursor: text;
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    min-width: 0;
    outline: none;
    padding-left: 0.5em !important;
    padding-right: 2.5em !important;
    transition: background 0.18s, box-shadow .18s;
    width: 100%;
}

.group-name.form-control:focus {
    background: #ffffff0a !important;
    border-color: #ececf724 !important;
    box-shadow: 0 0 0 2px #0009 0 0 0 4px var(--focus-ring) !important;
    outline: none !important;
}

.group-name.form-control:hover {
    background: #ffffff08 !important;
    border-color: #ececf714 !important;
}

.group-name:focus {
    background: #43dfe71a;
    box-shadow: 0 0 0 2px var(--focus-ring);
    outline: none;
}

.group-name:focus,
.group-name:hover {
    background: #43dfe70f;
}

.group-title-area {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 0.5em;
    min-width: 0;
}

.group-insert-zone {
    background: transparent;
    height: 2em;
    left: 0;
    pointer-events: auto;
    position: absolute;
    width: 100%;
    z-index: 6;
}

.group-insert-top {
    top: 0;
    transform: translateY(-1em);
}

.group-insert-bottom {
    bottom: 0;
    transform: translateY(1em);
}

.group-insert-empty {
    position: relative;
}

.group-insert-plus {
    align-items: center;
    background: var(--surface-elevated, #2a282d);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--accent);
    cursor: pointer;
    display: none;
    height: 40px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    transition: transform .12s ease, box-shadow .12s ease;
    width: 40px;
    z-index: 15;
}

.group-insert-plus:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%) scale(1.05);
}

.group-insert-plus .material-icons-outlined {
    font-size: 30px;
    line-height: 1;
}

.group-insert-tooltip {

    border-radius: 6px;
    color: #ffffff;
    display: none;
    font-size: 0.75rem;
    left: 0;
    padding: 0.35rem 0.55rem;
    position: absolute;
    top: 0;
    transform: translate(-50%, -120%);
    white-space: nowrap;
    z-index: 20;
}

.group-insert-tooltip::after {
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.82);
    content: "";
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
}

.group.deletable-group {
    animation: group-shake 0.3s infinite linear alternate;
}

.group.deletable-group .delete-group-pill {
    display: block;
}

.group.group.mb-4 {
    padding-left: clamp(var(--space-4), 4vw, 3rem);
    padding-right: clamp(var(--space-4), 4vw, 3rem);
}

.group:focus-within .remove-group,
.group:hover .remove-group {
    opacity: 1;
    pointer-events: auto;
}

.import-chords-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.import-chords-block {
    font-size: 2rem !important;
    margin-bottom: 1.5rem;
    margin-top: 1.25rem;
}

.import-chords-hint {
    margin-bottom: 0.35rem;
    margin-top: 0.35rem;
}

.import-chords-hint * {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.import-chords-hint code {
    background: #ffffff0a;
    border-radius: 999px;
    color: var(--accent) !important;
    font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    padding: 0 0.3em;
}

.import-chords-hint em,
.import-chords-hint strong {
    font-weight: 500 !important;
}

.import-chords-hint,
.import-chords-input,
.import-chords-label {
    color: var(--text-primary);
    display: block;
    font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif);
    font-size: var(--fz-14, 0.875rem);
    font-weight: 400;
    line-height: 1.5;
}

.import-chords-label {
    margin-bottom: 0.25rem;
}

.remove-group:hover {
    background: #ffffff0f !important;
    border-color: #43dfe773 !important;
    color: var(--accent) !important;
}

.string-left::before {
    left: 50%;
}

.string-right::before {
    right: 50%;
}

@media (min-width: 768px) {
    .group {
        padding: var(--space-5);
    }
}

@keyframes chord-shake {
    from {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(2deg);
    }
}

@keyframes group-shake {
    from {
        transform: rotate(-0.3deg);
    }

    to {
        transform: rotate(0.3deg);
    }
}

@media (max-width: 768px) {
    .chord-grid .chord-card.editing-expanded {
        grid-column: span 1;
    }
}

.collection-card {
    border: 1px solid #ffffff2a !important;
}

#base-fret-modal .base-fret-modal-box {
    background: #2a282d;
    color: #efeffc;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    max-width: 240px;
    min-width: 220px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

#base-fret-modal-label {
    font-weight: 600;
    letter-spacing: 0.04em;
}

#base-fret-modal-value {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    min-height: 1.6em;
}


.btn-primary {
    padding: 0.3em 1.2em 0.3em 1.2em !important;

}

#collections-import-btn,
#collections-export-btn {

    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3em 1.2em 0.3em 1.2em !important;
    justify-content: center;
    height: 1.9em !important;
    background-color: #004654;
    border-color: #004654;
}


#undo-redo-wrap #undo-history-btn,
#undo-redo-wrap #redo-history-btn {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    justify-content: center;
    height: 2.2em !important;
    background-color: #004654;
    border-color: #004654;
}

h2.page-title.flex-grow-1 {
    margin-top: 0.25em;
}


.collection-title-text {
    cursor: pointer !important;
}

/* Block all pointer based interactions */
textarea.collection-name-input {
    pointer-events: none;
    user-select: text;
    /* still allows selecting text and moving the caret */
}

/* When focusing by script, caret still works */
textarea.collection-name-input:focus {
    pointer-events: auto;
    /* allow keyboard caret movement but no mouse click interaction */
}

textarea.collection-name-input {
    position: relative;
    /* ensure it creates its own stacking layer */
    z-index: 10;
    /* higher than the header */
}

.collection-card-header {
    position: relative;
    z-index: 1;
}

/* Phase 10.4 collection tile polish */
.collection-card {
    background:
        radial-gradient(130% 145% at 100% 0%, color-mix(in srgb, var(--accent-soft, rgba(67, 223, 231, 0.16)) 24%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated, #2a282d) 92%, #000 8%), color-mix(in srgb, var(--surface, #252328) 86%, #000 14%));
    border: 1px solid color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 160%, transparent) !important;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-standard, 0 4px 12px rgba(0, 0, 0, 0.15));
    gap: var(--space-3);
    height: 284px;
    overflow: hidden;
    padding: 0.95rem !important;
    transition:
        background 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        border-color 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        box-shadow 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.collection-card::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary, #f5f4ee) 6%, transparent), transparent 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.collection-card:hover {
    border-color: color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 230%, transparent) !important;
    box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.2));
    transform: translateY(-2px);
}

.collection-card .collection-handle,
.collection-card .collection-edit {
    align-items: center;
    background: color-mix(in srgb, var(--surface, #252328) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 165%, transparent);
    border-radius: var(--radius-pill);
    color: color-mix(in srgb, var(--text-secondary, #ececf7) 82%, transparent);
    display: grid;
    height: 2rem;
    opacity: 0;
    place-items: center;
    transform: translateY(-2px) scale(0.96);
    transition:
        background 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        border-color 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        opacity 160ms cubic-bezier(0.4, 0.0, 0.2, 1),
        transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 2rem;
}

.collection-card .collection-handle {
    left: 0.9rem;
    top: 0.9rem;
}

.collection-card .collection-edit {
    right: 0.9rem;
    top: 0.9rem;
}

.collection-card:hover .collection-handle,
.collection-card:hover .collection-edit,
.collection-card:focus-within .collection-handle,
.collection-card:focus-within .collection-edit {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.collection-card .collection-handle:hover,
.collection-card .collection-edit:hover {
    background: color-mix(in srgb, var(--accent-soft, rgba(67, 223, 231, 0.16)) 32%, var(--surface, #252328) 68%);
    border-color: color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 215%, transparent);
    color: var(--text-primary, #f5f4ee);
}

.collection-card .collection-body-placeholder {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface, #252328) 82%, transparent), color-mix(in srgb, var(--surface-elevated, #2a282d) 94%, transparent)),
        radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--accent-soft, rgba(67, 223, 231, 0.16)) 20%, transparent), transparent 58%);
    border: 1px solid color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 150%, transparent);
    border-radius: calc(var(--radius-m) - 2px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary, #f5f4ee) 5%, transparent);
    min-height: 9.5rem;
    order: 1;
    overflow: hidden;
    position: relative;
}

.collection-card .collection-body-placeholder::before,
.collection-card .collection-body-placeholder::after {
    content: "";
    position: absolute;
}

.collection-card .collection-body-placeholder::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-primary, #f5f4ee) 5%, transparent), transparent 65%),
        color-mix(in srgb, var(--surface-elevated, #2a282d) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 150%, transparent);
    border-radius: 12px;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
    height: 3.2rem;
    left: 1rem;
    right: 1rem;
    top: 1rem;
}

.collection-card .collection-body-placeholder::after {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--text-secondary, #ececf7) 16%, transparent) 0 28%,
            transparent 28% 36%,
            color-mix(in srgb, var(--text-secondary, #ececf7) 16%, transparent) 36% 100%);
    border-radius: var(--radius-pill);
    bottom: 1rem;
    height: 2.1rem;
    left: 1.25rem;
    right: 1.25rem;
}

.collection-card .collection-card-header {
    align-items: flex-end;
    gap: var(--space-2);
    height: auto;
    margin-bottom: 0;
    margin-top: auto;
    order: 2;
    padding: 0;
    transform: none;
}

.collection-card .collection-title {
    color: var(--text-primary, #f5f4ee);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: left;
}

.collection-card .chord-name-input {
    background: color-mix(in srgb, var(--surface, #252328) 84%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border-subtle, rgba(255, 255, 255, 0.16)) 165%, transparent) !important;
    border-radius: calc(var(--radius-xxs) + 4px) !important;
    box-shadow: none;
    order: 2;
    padding: 0.5rem 0.65rem !important;
    text-align: left;
}

.collection-card.editing .collection-body-placeholder {
    opacity: 0.45;
}

/* Phase 10.2 collections header/menu reuse */
.page-history-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--space-xs);
    justify-content: flex-end;
}

.page-history-actions:empty {
    display: none;
}

.page-title-row .primary-button,
#undo-redo-wrap #undo-history-btn,
#undo-redo-wrap #redo-history-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-component);
    box-shadow: none;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-inter);
    font-size: var(--fz-14);
    font-weight: 500;
    gap: var(--space-xs);
    height: auto !important;
    justify-content: center;
    line-height: 1;
    min-height: 2.2em;
    padding: var(--space-s) var(--space-m) !important;
    transition: all 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.page-title-row .primary-button:hover,
.page-title-row .primary-button:focus-visible,
#undo-redo-wrap #undo-history-btn:hover,
#undo-redo-wrap #undo-history-btn:focus-visible,
#undo-redo-wrap #redo-history-btn:hover,
#undo-redo-wrap #redo-history-btn:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    border-color: color-mix(in srgb, var(--border-subtle) 150%, transparent);
    transform: translateY(-1px);
}

.page-title-row .primary-button:focus-visible,
#undo-redo-wrap #undo-history-btn:focus-visible,
#undo-redo-wrap #redo-history-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.page-title-row .primary-button:disabled,
#undo-redo-wrap #undo-history-btn:disabled,
#undo-redo-wrap #redo-history-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    transform: none;
}

.page-title-row .primary-button .material-icons-outlined,
#undo-redo-wrap #undo-history-btn .material-icons-outlined,
#undo-redo-wrap #redo-history-btn .material-icons-outlined,
.page-title-row .lock-button .material-icons-outlined,
.page-title-row #chord-settings-toggle .material-icons-outlined,
.app-shell-topbar__page-slot .lock-button .material-icons-outlined,
.app-shell-topbar__page-slot #chord-settings-toggle .material-icons-outlined {
    color: currentColor;
    font-size: 1.25em;
    opacity: 0.85;
    transition: color 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

#undo-redo-wrap .primary-button,
.page-title-row .lock-button,
.page-title-row #chord-settings-toggle,
.app-shell-topbar__page-slot .lock-button,
.app-shell-topbar__page-slot #chord-settings-toggle {
    min-height: 2.45rem;
    min-width: 2.45rem;
    padding: var(--space-s);
}

#undo-redo-wrap .primary-button {
    padding-inline: var(--space-s);
}

.page-title-row .lock-button,
.page-title-row #chord-settings-toggle,
.app-shell-topbar__page-slot .lock-button,
.app-shell-topbar__page-slot #chord-settings-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-component);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-inter);
    font-size: var(--fz-14);
    font-weight: 500;
    gap: var(--space-xs);
    height: auto;
    justify-content: center;
    min-height: 2.2em;
    padding: var(--space-s) var(--space-m);
    transition: all 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.page-title-row .lock-button:hover,
.page-title-row .lock-button:focus-visible,
.page-title-row #chord-settings-toggle:hover,
.page-title-row #chord-settings-toggle:focus-visible,
.app-shell-topbar__page-slot .lock-button:hover,
.app-shell-topbar__page-slot .lock-button:focus-visible,
.app-shell-topbar__page-slot #chord-settings-toggle:hover,
.app-shell-topbar__page-slot #chord-settings-toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    border-color: color-mix(in srgb, var(--border-subtle) 150%, transparent);
    transform: translateY(-1px);
}

.page-title-row .lock-button:focus-visible,
.page-title-row #chord-settings-toggle:focus-visible,
.app-shell-topbar__page-slot .lock-button:focus-visible,
.app-shell-topbar__page-slot #chord-settings-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.chord-settings-wrap {
    align-items: center;
    display: inline-flex;
    gap: var(--space-xs);
    position: relative;
}

.app-shell-topbar__page-slot .chord-settings-wrap {
    gap: 0.45rem;
}

.chord-settings-menu-section {
    display: grid;
    gap: var(--space-xs);
}

.chord-settings-menu-section--actions {
    margin-bottom: var(--space-s);
}

.chord-settings-divider {
    background: color-mix(in srgb, var(--border-subtle) 85%, transparent);
    height: 1px;
    margin: 0 0 var(--space-m);
}

.chord-settings-action,
.chord-settings-subaction {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-component);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-inter);
    font-size: var(--fz-14);
    font-weight: 500;
    gap: var(--space-xs);
    justify-content: flex-start;
    line-height: 1.25;
    min-height: 2.4rem;
    padding: 0.6rem 0.8rem;
    text-align: left;
    transition: background 160ms cubic-bezier(0.4, 0.0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0.0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
}

.chord-settings-action .material-icons-outlined,
.chord-settings-subaction .material-icons-outlined {
    font-size: 1.15rem;
    opacity: 0.8;
}

.chord-settings-action:hover,
.chord-settings-action:focus-visible,
.chord-settings-subaction:hover,
.chord-settings-subaction:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 26%, transparent);
    border-color: color-mix(in srgb, var(--border-subtle) 150%, transparent);
    transform: translateY(-1px);
}

.chord-settings-action:focus-visible,
.chord-settings-subaction:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.chord-settings-action[disabled],
.chord-settings-subaction[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.chord-settings-submenu {
    display: grid;
    gap: var(--space-xs);
}

.chord-settings-action--submenu {
    justify-content: space-between;
    padding-right: 0.7rem;
}

.chord-settings-action-main {
    align-items: center;
    display: inline-flex;
    gap: var(--space-xs);
}

.chord-settings-action-chevron {
    margin-left: auto;
    transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chord-settings-action--submenu.is-open .chord-settings-action-chevron {
    transform: rotate(90deg);
}

.chord-settings-submenu-panel {
    border-left: 1px solid color-mix(in srgb, var(--border-subtle) 120%, transparent);
    display: grid;
    gap: var(--space-xs);
    margin-left: 0.75rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 0.85rem;
    transform: translateY(-4px);
    transition: max-height 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), padding-top 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chord-settings-submenu-panel--open {
    max-height: 12rem;
    opacity: 1;
    padding-top: 0.15rem;
    transform: translateY(0);
}

.chord-settings-subaction {
    min-height: 2.25rem;
}

.chord-settings-menu {
    --settings-gap: var(--space-s);
    background:
        radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 58%),
        var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    color: var(--text-primary);
    min-width: 20rem;
    opacity: 0;
    padding: var(--space-m);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-xs));
    transform: translateY(-4px);
    transition: opacity 160ms cubic-bezier(0.4, 0.0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 24;
}

.chord-settings-menu--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.chord-settings-row {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 145%, transparent);
    border-radius: calc(var(--radius-component) + 2px);
    column-gap: var(--settings-gap);
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 3.1rem;
    padding: 0.65rem 0.8rem;
    transition: background 160ms cubic-bezier(0.4, 0.0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0.0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.chord-settings-row:hover,
.chord-settings-row:focus-within {
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface) 78%);
    border-color: color-mix(in srgb, var(--border-subtle) 185%, transparent);
}

.chord-settings-label {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: var(--space-s);
    grid-template-columns: minmax(0, 1fr) auto;
    font-family: var(--font-inter);
    font-size: var(--fz-14);
    font-weight: 500;
    margin: 0;
    width: 100%;
}

.chord-settings-label span {
    min-width: 0;
}

.chord-settings-label input[type="checkbox"] {
    appearance: none;
    background: color-mix(in srgb, var(--text-secondary) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 170%, transparent);
    border-radius: var(--radius-pill);
    cursor: pointer;
    height: 1.45rem;
    justify-self: end;
    margin: 0;
    order: 2;
    position: relative;
    transition: background 160ms cubic-bezier(0.4, 0.0, 0.2, 1), border-color 160ms cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 2.5rem;
}

.chord-settings-label input[type="checkbox"]::after {
    background: var(--text-primary);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
    content: "";
    height: 1rem;
    left: 0.18rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 160ms cubic-bezier(0.4, 0.0, 0.2, 1), background 160ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 1rem;
}

.chord-settings-label input[type="checkbox"]:checked {
    background: color-mix(in srgb, var(--accent) 76%, #0e1b1b);
    border-color: color-mix(in srgb, var(--accent) 68%, transparent);
}

.chord-settings-label input[type="checkbox"]:checked::after {
    transform: translate(1rem, -50%);
}

.chord-settings-label input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 75%, transparent);
    outline: none;
}

:root[data-bs-theme="light"] .page-title-row .primary-button,
:root[data-bs-theme="light"] .page-title-row .lock-button,
:root[data-bs-theme="light"] .page-title-row #chord-settings-toggle,
:root[data-bs-theme="light"] .app-shell-topbar__page-slot .lock-button,
:root[data-bs-theme="light"] .app-shell-topbar__page-slot #chord-settings-toggle,
:root[data-bs-theme="light"] #undo-redo-wrap #undo-history-btn,
:root[data-bs-theme="light"] #undo-redo-wrap #redo-history-btn {
    border-color: rgba(0, 0, 0, 0.15);
    color: #2f2f2f;
}

:root[data-bs-theme="light"] .page-title-row .primary-button:hover,
:root[data-bs-theme="light"] .page-title-row .lock-button:hover,
:root[data-bs-theme="light"] .page-title-row #chord-settings-toggle:hover,
:root[data-bs-theme="light"] .app-shell-topbar__page-slot .lock-button:hover,
:root[data-bs-theme="light"] .app-shell-topbar__page-slot #chord-settings-toggle:hover,
:root[data-bs-theme="light"] #undo-redo-wrap #undo-history-btn:hover,
:root[data-bs-theme="light"] #undo-redo-wrap #redo-history-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.25);
}

@media (max-width: 760px) {
    .chord-settings-menu {
        min-width: min(20rem, calc(100vw - 2rem));
    }
}

:root[data-bs-theme="light"] .collection-card {
    background:
        radial-gradient(130% 145% at 100% 0%, color-mix(in srgb, rgba(85, 85, 85, 0.12) 28%, transparent), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.96));
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

:root[data-bs-theme="light"] .collection-card:hover {
    border-color: rgba(0, 0, 0, 0.14) !important;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

:root[data-bs-theme="light"] .collection-card::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 42%);
}

:root[data-bs-theme="light"] .collection-card .collection-handle,
:root[data-bs-theme="light"] .collection-card .collection-edit {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(15, 23, 42, 0.62);
}

:root[data-bs-theme="light"] .collection-card .collection-handle:hover,
:root[data-bs-theme="light"] .collection-card .collection-edit:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.14);
    color: rgba(15, 23, 42, 0.88);
}

:root[data-bs-theme="light"] .collection-card .collection-body-placeholder {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 245, 0.98)),
        radial-gradient(120% 130% at 100% 0%, rgba(85, 85, 85, 0.06), transparent 58%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-bs-theme="light"] .collection-card .collection-body-placeholder::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), transparent 68%),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
}

:root[data-bs-theme="light"] .collection-card .collection-body-placeholder::after {
    background:
        linear-gradient(90deg,
            rgba(15, 23, 42, 0.08) 0 28%,
            transparent 28% 36%,
            rgba(15, 23, 42, 0.08) 36% 100%);
}