:root {
    --app-bg: #f4f7fb;
    --app-surface: #ffffff;
    --app-surface-strong: #f9fbfd;
    --app-text: #17202a;
    --app-muted: #647386;
    --app-line: #dfe6ef;
    --app-line-strong: #c8d2df;
    --app-primary: #6eb6d6;
    --app-primary-strong: #9ed8ee;
    --app-coral: #ec927f;
    --app-danger: #df6758;
    --app-gold: #dfbd63;
    --app-green: #7fc092;
    --app-violet: #aa9bea;
    --app-notation: #b89a72;
    --module-color-songs: #e35d6a;
    --module-color-setlists: #ec8f5b;
    --module-color-live: #d8b13f;
    --module-color-events: #9ac65f;
    --module-color-rehearsals: #62bd83;
    --module-color-contacts: #45b9b1;
    --module-color-communication: #dfe5ee;
    --module-color-finances: #4faedc;
    --module-color-tasks: #5f87e8;
    --module-color-equipment: #7d79e6;
    --module-color-notation: #a66bd6;
    --module-color-stageplot: #c76dc8;
    --module-color-midi: #df6aa0;
    --module-on-songs: #ffffff;
    --module-on-setlists: #ffffff;
    --module-on-live: #ffffff;
    --module-on-events: #ffffff;
    --module-on-rehearsals: #ffffff;
    --module-on-contacts: #ffffff;
    --module-on-communication: #17202a;
    --module-on-finances: #ffffff;
    --module-on-tasks: #ffffff;
    --module-on-equipment: #ffffff;
    --module-on-notation: #ffffff;
    --module-on-stageplot: #ffffff;
    --module-on-midi: #ffffff;
    --live-chord-color: #dfbd63;
    --app-shadow-soft: 0 20px 55px rgba(40, 54, 74, 0.12);
    --app-shadow-card: 0 18px 36px rgba(40, 54, 74, 0.10);
    --app-radius-xl: 26px;
    --app-radius-lg: 20px;
    --app-radius-md: 14px;
    --app-radius-card: 14px;
    --app-page-top: 22px;
    --app-page-gutter: clamp(22px, 3.2vw, 42px);
    --app-content-max: 1200px;
    --app-content-wide: 1320px;
    --app-content-width: min(var(--app-content-max), calc(100vw - (var(--app-page-gutter) * 2)));
    --app-section-gap: 22px;
    --app-panel-padding: clamp(18px, 2vw, 26px);
    --app-card-padding: clamp(18px, 1.8vw, 24px);
    --app-control-height: 42px;
    --app-control-padding-x: 16px;
    --app-scrollbar-size: 12px;
    --app-scrollbar-track: color-mix(in srgb, var(--app-surface-strong) 78%, var(--app-line));
    --app-scrollbar-thumb: linear-gradient(180deg, var(--app-primary), var(--app-coral));
    --app-scrollbar-thumb-hover: linear-gradient(180deg, var(--app-primary-strong), var(--app-gold));
    color-scheme: light;
}

:root[data-theme="dark"] {
    --app-bg: #10151d;
    --app-surface: #171e28;
    --app-surface-strong: #202936;
    --app-text: #edf3f8;
    --app-muted: #a9b5c4;
    --app-line: #2e3a49;
    --app-line-strong: #405064;
    --app-primary: #6eb6d6;
    --app-primary-strong: #9ed8ee;
    --app-coral: #ec927f;
    --app-danger: #df6758;
    --app-gold: #dfbd63;
    --app-green: #7fc092;
    --app-violet: #aa9bea;
    --app-notation: #b89a72;
    --module-color-songs: #e35d6a;
    --module-color-setlists: #ec8f5b;
    --module-color-live: #d8b13f;
    --module-color-events: #9ac65f;
    --module-color-rehearsals: #62bd83;
    --module-color-contacts: #45b9b1;
    --module-color-communication: #dfe5ee;
    --module-color-finances: #4faedc;
    --module-color-tasks: #5f87e8;
    --module-color-equipment: #7d79e6;
    --module-color-notation: #a66bd6;
    --module-color-stageplot: #c76dc8;
    --module-color-midi: #df6aa0;
    --module-on-songs: #ffffff;
    --module-on-setlists: #ffffff;
    --module-on-live: #ffffff;
    --module-on-events: #ffffff;
    --module-on-rehearsals: #ffffff;
    --module-on-contacts: #ffffff;
    --module-on-communication: #17202a;
    --module-on-finances: #ffffff;
    --module-on-tasks: #ffffff;
    --module-on-equipment: #ffffff;
    --module-on-notation: #ffffff;
    --module-on-stageplot: #ffffff;
    --module-on-midi: #ffffff;
    --live-chord-color: #dfbd63;
    --app-shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.34);
    --app-shadow-card: 0 18px 36px rgba(0, 0, 0, 0.25);
    --app-scrollbar-track: color-mix(in srgb, var(--app-surface-strong) 84%, #000000);
    --app-scrollbar-thumb: linear-gradient(180deg, var(--app-primary), var(--app-violet));
    --app-scrollbar-thumb-hover: linear-gradient(180deg, var(--app-primary-strong), var(--app-gold));
    color-scheme: dark;
}

* {
    scrollbar-color: var(--app-primary) var(--app-scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

*::-webkit-scrollbar-track {
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(var(--app-scrollbar-track), var(--app-scrollbar-track)) padding-box,
        transparent border-box;
}

*::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        var(--app-scrollbar-thumb) padding-box,
        transparent border-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        var(--app-scrollbar-thumb-hover) padding-box,
        transparent border-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body[data-auth-required="true"],
html body:not([data-auth-gate="modules"]) {
    max-width: none;
    margin: 0;
    padding: var(--app-page-top) var(--app-page-gutter) var(--app-page-gutter);
    background: var(--app-bg);
    color: var(--app-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-auth-required="true"] > h1,
body:not([data-auth-gate="modules"]) > h1 {
    box-sizing: border-box;
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    margin: 0 auto var(--app-section-gap);
    padding-right: 300px;
    color: var(--app-text);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
    letter-spacing: 0;
}

body[data-module-theme="songs"] {
    --module-page-accent: var(--module-color-songs);
    --module-page-on-accent: var(--module-on-songs);
    --songs-accent: var(--module-color-songs);
    --songs-accent-strong: color-mix(in srgb, var(--module-color-songs) 78%, #000000);
}

body[data-module-theme="setlists"] {
    --module-page-accent: var(--module-color-setlists);
    --module-page-on-accent: var(--module-on-setlists);
}

body[data-module-theme="notation"] {
    --module-page-accent: var(--module-color-notation);
    --module-page-on-accent: var(--module-on-notation);
}

body[data-module-theme="live"] {
    --module-page-accent: var(--module-color-live);
    --module-page-on-accent: var(--module-on-live);
}

body[data-module-theme="setup"] {
    --module-page-accent: #4b5561;
    --module-page-on-accent: #ffffff;
}

:root[data-theme="dark"] body[data-module-theme="setup"] {
    --module-page-accent: #c3ccd7;
    --module-page-on-accent: #141a22;
}

body[data-module-theme="bands"],
body[data-module-theme="events"] {
    --module-page-accent: var(--module-color-events);
    --module-page-on-accent: var(--module-on-events);
}

body[data-module-theme="rehearsals"] {
    --module-page-accent: var(--module-color-rehearsals);
    --module-page-on-accent: var(--module-on-rehearsals);
}

body[data-module-theme="contacts"] {
    --module-page-accent: var(--module-color-contacts);
    --module-page-on-accent: var(--module-on-contacts);
}

body[data-module-theme="communication"] {
    --module-page-accent: var(--module-color-communication);
    --module-page-on-accent: var(--module-on-communication);
}

body[data-module-theme="finances"] {
    --module-page-accent: var(--module-color-finances);
    --module-page-on-accent: var(--module-on-finances);
}

body[data-module-theme="tasks"] {
    --module-page-accent: var(--module-color-tasks);
    --module-page-on-accent: var(--module-on-tasks);
}

body[data-module-theme="equipment"] {
    --module-page-accent: var(--module-color-equipment);
    --module-page-on-accent: var(--module-on-equipment);
}

body[data-module-theme="stageplot"] {
    --module-page-accent: var(--module-color-stageplot);
    --module-page-on-accent: var(--module-on-stageplot);
}

body[data-module-theme="midi"] {
    --module-page-accent: var(--module-color-midi);
    --module-page-on-accent: var(--module-on-midi);
}

body[data-module-theme] {
    --app-scrollbar-thumb: linear-gradient(
        180deg,
        var(--module-page-accent, var(--app-primary)),
        color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 78%, #000000)
    );
    --app-scrollbar-thumb-hover: linear-gradient(
        180deg,
        color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 80%, #ffffff),
        var(--module-page-accent, var(--app-primary))
    );
    scrollbar-color: var(--module-page-accent, var(--app-primary)) var(--app-scrollbar-track);
}

/* Every scroll container follows the currently active module, including
   component stylesheets that otherwise carry their own accent colour. */
body[data-module-theme] * {
    scrollbar-color: var(--module-page-accent, var(--app-primary)) var(--app-scrollbar-track) !important;
    scrollbar-width: thin;
}

body[data-module-theme] *::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg,
            var(--module-page-accent, var(--app-primary)),
            color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 78%, #000000)
        ) padding-box,
        transparent border-box !important;
}

body[data-module-theme] *::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 82%, #ffffff),
            var(--module-page-accent, var(--app-primary))
        ) padding-box,
        transparent border-box !important;
}

body[data-auth-required="true"][data-module-theme] > h1 {
    padding: 22px 26px;
    border-radius: var(--app-radius-lg);
    background: var(--module-page-accent);
    box-shadow: var(--app-shadow-card);
    color: var(--module-page-on-accent);
}

body[data-auth-required="true"][data-module-theme] > h1::before {
    color: color-mix(in srgb, var(--module-page-on-accent) 78%, transparent);
}

body[data-auth-required="true"] > h1::before,
body:not([data-auth-gate="modules"]) > h1::before {
    display: block;
    margin-bottom: 8px;
    color: var(--app-primary);
    content: "orga.band";
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

body[data-auth-required="true"][data-module-theme] > h1::before {
    color: color-mix(in srgb, var(--module-page-on-accent) 78%, transparent);
}

body[data-auth-required="true"] .card,
body:not([data-auth-gate="modules"]) .card,
body[data-auth-required="true"] section,
body:not([data-auth-gate="modules"]) section {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--app-content-max);
    margin: 0 auto var(--app-section-gap);
    padding: var(--app-card-padding);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
    color: var(--app-text);
}

body[data-auth-required="true"] .grid,
body:not([data-auth-gate="modules"]) .grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--app-section-gap);
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    margin: 0 auto;
}

body[data-auth-required="true"] .grid .card,
body:not([data-auth-gate="modules"]) .grid .card {
    margin: 0;
}

body[data-auth-required="true"] h2,
body:not([data-auth-gate="modules"]) h2,
body[data-auth-required="true"] h3,
body:not([data-auth-gate="modules"]) h3 {
    margin-top: 0;
    color: var(--app-text);
    letter-spacing: 0;
}

body[data-auth-required="true"] h2,
body:not([data-auth-gate="modules"]) h2 {
    font-size: 24px;
    line-height: 1.2;
}

body[data-auth-required="true"] h3,
body:not([data-auth-gate="modules"]) h3 {
    font-size: 18px;
    line-height: 1.25;
}

body[data-auth-required="true"] p,
body:not([data-auth-gate="modules"]) p,
body[data-auth-required="true"] .muted,
body:not([data-auth-gate="modules"]) .muted,
body[data-auth-required="true"] small,
body:not([data-auth-gate="modules"]) small {
    color: var(--app-muted);
}

body[data-auth-required="true"] label,
body:not([data-auth-gate="modules"]) label {
    display: block;
    margin-top: 16px;
    color: var(--app-text);
    font-weight: 750;
}

body[data-auth-required="true"] input,
body:not([data-auth-gate="modules"]) input,
body[data-auth-required="true"] select,
body:not([data-auth-gate="modules"]) select,
body[data-auth-required="true"] textarea,
body:not([data-auth-gate="modules"]) textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 7px;
    padding: 11px 13px;
    border: 1px solid var(--app-line-strong);
    border-radius: 14px;
    background: var(--app-surface-strong);
    color: var(--app-text);
    font: inherit;
}

body[data-auth-required="true"] textarea,
body:not([data-auth-gate="modules"]) textarea {
    min-height: 132px;
    resize: vertical;
}

.app-text-resize-wrap {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 7px;
}

.app-text-resize-wrap > textarea {
    display: block;
    margin-top: 0 !important;
    padding-bottom: 24px !important;
    resize: none !important;
}

.rich-editor-shell {
    position: relative;
}

.rich-editor-shell .rich-editor-surface,
.rich-editor-shell .rich-editor-source {
    padding-bottom: 24px !important;
}

.app-text-resize-handle {
    position: absolute;
    left: 50%;
    bottom: -18px;
    z-index: 12;
    width: 128px;
    height: 36px;
    min-width: 128px !important;
    max-width: 128px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--module-page-on-accent, #ffffff);
    cursor: grab;
    appearance: none;
    transform: translateX(-50%);
    touch-action: none;
}

.app-text-resize-handle::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 17px;
    border: 0;
    border-radius: 999px;
    background: var(--module-page-accent, var(--app-primary));
    box-shadow: 0 2px 7px color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 13%, transparent);
    content: "";
    transform: translate(-50%, -50%);
}

.app-text-resize-handle::after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 30px;
    color: var(--module-page-on-accent, #ffffff);
    content: "\2039\A\203A";
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 15px;
    white-space: pre;
    text-align: center;
    text-shadow: 0 1px 2px color-mix(in srgb, #000000 18%, transparent);
    transform: translate(-50%, -50%) rotate(90deg);
}

.app-text-resize-handle:hover::before,
.app-text-resize-handle:focus-visible::before,
.app-text-resize-handle.is-resizing::before {
    box-shadow: 0 3px 12px color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 18%, transparent);
}

.app-text-resize-handle:hover::after,
.app-text-resize-handle:focus-visible::after,
.app-text-resize-handle.is-resizing::after {
    color: var(--module-page-on-accent, #ffffff);
}

.app-text-resize-handle:active,
.app-text-resize-handle.is-resizing {
    cursor: grabbing;
}

.app-text-resize-handle:focus-visible {
    outline: none;
}

body[data-auth-required="true"] input[type="checkbox"],
body:not([data-auth-gate="modules"]) input[type="checkbox"],
body[data-auth-required="true"] input[type="radio"],
body:not([data-auth-gate="modules"]) input[type="radio"] {
    width: auto;
    min-width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    vertical-align: middle;
}

body[data-auth-required="true"] button,
body:not([data-auth-gate="modules"]) button {
    min-height: var(--app-control-height);
    padding: 9px var(--app-control-padding-x);
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    background: var(--app-surface-strong);
    color: var(--app-text);
    cursor: pointer;
    line-height: 1;
    font: inherit;
    font-weight: 750;
    text-align: center;
}

:where(body[data-auth-required="true"], body:not([data-auth-gate="modules"])) button {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    justify-content: center;
}

body[data-auth-required="true"] button svg,
body:not([data-auth-gate="modules"]) button svg,
body[data-auth-required="true"] button img,
body:not([data-auth-gate="modules"]) button img {
    flex: 0 0 auto;
}

body[data-auth-required="true"] button + button,
body:not([data-auth-gate="modules"]) button + button {
    margin-left: 8px;
}

body[data-auth-required="true"] button:hover,
body:not([data-auth-gate="modules"]) button:hover {
    border-color: var(--module-page-accent, var(--app-primary));
}

body[data-auth-required="true"] button.primary,
body:not([data-auth-gate="modules"]) button.primary,
body[data-auth-required="true"] button[type="submit"],
body:not([data-auth-gate="modules"]) button[type="submit"] {
    border-color: var(--module-page-accent, var(--app-primary));
    background: var(--module-page-accent, var(--app-primary));
    color: var(--module-page-on-accent, #ffffff);
}

body[data-auth-required="true"] button.danger,
body:not([data-auth-gate="modules"]) button.danger {
    border-color: color-mix(in srgb, var(--app-coral) 70%, var(--app-line));
    color: var(--app-coral);
}

/* orga.band design-system primitives: use these for new shared Web/App UI patterns. */
.ob-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ob-stack-gap, 16px);
}

.ob-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ob-cluster-gap, 10px);
}

.ob-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ob-grid-min, 240px)), 1fr));
    gap: var(--ob-grid-gap, var(--app-section-gap));
}

.ob-card {
    padding: var(--app-card-padding);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-card);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-card);
}

.ob-card--flat {
    box-shadow: none;
}

.ob-card--tight {
    padding: 16px;
}

.ob-delete-target--active {
    border-color: var(--app-danger) !important;
    background:
        linear-gradient(
            270deg,
            color-mix(in srgb, var(--app-danger) 28%, var(--app-surface)) 0%,
            color-mix(in srgb, var(--app-danger) 14%, var(--app-surface)) 30%,
            var(--app-surface) 76%
        ) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--app-danger) 18%, transparent),
        var(--app-shadow-card) !important;
}

.ob-delete-target--active .ob-icon-button--danger,
.ob-delete-target--active .ob-button--danger {
    transform: scale(1.03);
}

.ob-card__title {
    margin: 0 0 6px;
    color: var(--app-text);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 950;
    line-height: 1.1;
}

.ob-card__text {
    margin: 0;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.ob-button {
    display: inline-flex;
    min-height: var(--app-control-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px var(--app-control-padding-x);
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    background: var(--app-surface-strong);
    color: var(--app-text);
    font: inherit;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.ob-button:hover,
.ob-button:focus-visible {
    border-color: var(--module-page-accent, var(--app-primary));
    outline: none;
}

.ob-button--primary {
    border-color: var(--module-page-accent, var(--app-primary));
    background: var(--module-page-accent, var(--app-primary));
    color: var(--module-page-on-accent, #ffffff);
}

.ob-button--danger {
    border-color: var(--app-danger);
    background: var(--app-danger);
    color: #ffffff;
}

.ob-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--app-muted);
}

.ob-icon-button {
    display: inline-grid;
    width: var(--app-control-height);
    min-width: var(--app-control-height);
    height: var(--app-control-height);
    min-height: var(--app-control-height);
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    background: var(--app-surface-strong);
    color: var(--app-text);
    box-sizing: border-box;
    cursor: pointer;
}

.ob-icon-button--primary {
    border-color: var(--module-page-accent, var(--app-primary));
    background: var(--module-page-accent, var(--app-primary));
    color: var(--module-page-on-accent, #ffffff);
}

.ob-icon-button--danger {
    border-color: var(--app-danger);
    background: var(--app-danger);
    color: #ffffff;
}

.ob-icon-button svg,
.ob-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

.ob-field {
    display: grid;
    gap: 7px;
}

.ob-field > span,
.ob-label {
    color: var(--app-text);
    font-size: 13px;
    font-weight: 850;
}

.ob-input,
.ob-select,
.ob-textarea {
    width: 100%;
    min-height: var(--app-control-height);
    padding: 9px 14px;
    border: 1px solid var(--app-line-strong);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-strong);
    color: var(--app-text);
    font: inherit;
    font-weight: 650;
    box-sizing: border-box;
}

.ob-textarea {
    min-height: 112px;
    resize: vertical;
    line-height: 1.45;
}

.ob-input:focus,
.ob-select:focus,
.ob-textarea:focus {
    border-color: var(--module-page-accent, var(--app-primary));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-page-accent, var(--app-primary)) 16%, transparent);
}

.ob-pill {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--app-line-strong);
    border-radius: 999px;
    background: var(--app-surface-strong);
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
}

.ob-pill--active {
    border-color: var(--module-page-accent, var(--app-primary));
    background: var(--module-page-accent, var(--app-primary));
    color: var(--module-page-on-accent, #ffffff);
}

.ob-delete-confirm-modal {
    box-sizing: border-box;
    width: min(460px, calc(100vw - 40px));
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--app-danger) 60%, var(--app-line));
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 24px 70px rgba(40, 54, 74, 0.24);
}

.ob-delete-confirm-modal__title {
    margin: 0;
    color: var(--app-text);
    font-size: 22px;
    font-weight: 950;
    line-height: 1.12;
}

.ob-delete-confirm-modal__text {
    margin: 8px 0 0;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.ob-delete-confirm-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ob-toggle {
    position: relative;
    display: inline-flex;
    width: 58px;
    height: 28px;
    align-items: center;
    cursor: pointer;
}

.ob-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ob-toggle__track {
    position: relative;
    display: block;
    width: 58px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--app-line-strong) 70%, #ffffff);
    border-radius: 999px;
    background: linear-gradient(180deg, #7d858e, #d6dbe1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16);
}

.ob-toggle__track::before {
    position: absolute;
    top: 50%;
    left: 3px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #eef2f6;
    color: #8b95a1;
    content: "\00d7";
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    transform: translateY(-50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    transition: left 160ms ease, color 160ms ease, content 160ms ease;
}

.ob-toggle input:checked + .ob-toggle__track {
    background: linear-gradient(180deg, #515b66, #919aa5);
}

.ob-toggle input:checked + .ob-toggle__track::before {
    left: 31px;
    color: #6f7884;
    content: "\2713";
}

.ob-module-heading {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    width: 100%;
}

.ob-module-heading .app-brand-logo--module,
.ob-module-heading__brand {
    --brand-logo-size: clamp(62px, 6vw, 92px);
    align-self: center;
}

.ob-module-header {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 26px;
    border-radius: var(--app-radius-lg);
    background: var(--module-page-accent, var(--app-muted));
    color: var(--module-page-on-accent, #ffffff);
    box-shadow: var(--app-shadow-card);
}

.ob-module-header__titleline {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
    color: inherit;
}

.ob-module-header__icon {
    display: grid;
    width: clamp(38px, 4vw, 52px);
    height: clamp(38px, 4vw, 52px);
    flex: 0 0 auto;
    place-items: center;
    color: inherit;
}

.ob-module-header__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

.ob-module-header__icon[data-icon] {
    background: currentColor;
    -webkit-mask: var(--module-icon-url) center / contain no-repeat;
    mask: var(--module-icon-url) center / contain no-repeat;
}

.ob-module-header__title {
    margin: 0;
    color: inherit;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 950;
    line-height: 1;
}

.ob-module-header__return {
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    margin-left: auto;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.ob-module-header__return svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ob-sidebar-handle {
    display: grid;
    width: 36px;
    min-height: 420px;
    place-items: center;
    border-radius: var(--app-radius-lg) 0 0 var(--app-radius-lg);
    background: var(--module-page-accent, var(--app-primary));
    color: var(--module-page-on-accent, #ffffff);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

body[data-auth-required="true"] pre,
body:not([data-auth-gate="modules"]) pre {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-strong);
    color: var(--app-text);
}

body[data-auth-required="true"] .band-item,
body[data-auth-required="true"] .song-item,
body[data-auth-required="true"] .setlist-item,
body[data-auth-required="true"] .file-item,
body[data-auth-required="true"] .member-item,
body:not([data-auth-gate="modules"]) .band-item,
body:not([data-auth-gate="modules"]) .song-item,
body:not([data-auth-gate="modules"]) .setlist-item,
body:not([data-auth-gate="modules"]) .file-item,
body:not([data-auth-gate="modules"]) .member-item {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-strong);
    color: var(--app-text);
}

body[data-auth-required="true"] .actions,
body:not([data-auth-gate="modules"]) .actions,
body[data-auth-required="true"] .top-controls,
body:not([data-auth-gate="modules"]) .top-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body[data-auth-required="true"] .small-grid,
body:not([data-auth-gate="modules"]) .small-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body[data-auth-required="true"] .setup-layout,
body[data-auth-required="true"] .setup-page-layout,
body[data-auth-required="true"] .profile-layout,
body[data-auth-required="true"] .songs-shell,
body[data-auth-required="true"] .setlists-shell {
    box-sizing: border-box;
    width: var(--app-content-width) !important;
    max-width: var(--app-content-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body[data-auth-required="true"] .setup-layout,
body[data-auth-required="true"] .setup-page-layout,
body[data-auth-required="true"] .songs-layout,
body[data-auth-required="true"] .setlists-layout,
body[data-auth-required="true"] .grid {
    gap: var(--app-section-gap) !important;
}

body[data-auth-required="true"] .profile-layout {
    margin-top: 0 !important;
    margin-bottom: var(--app-page-gutter) !important;
}

body[data-auth-required="true"] .app-dashboard-shell {
    min-height: auto;
    padding: 0;
}

body[data-auth-required="true"] .app-dashboard-frame,
body[data-auth-required="true"] > .notice,
body[data-auth-required="true"] > main:not(.app-dashboard-shell):not(.profile-layout):not(.app) {
    box-sizing: border-box;
    width: var(--app-content-width) !important;
    max-width: var(--app-content-max) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body[data-auth-required="true"] .songs-shell,
body[data-auth-required="true"] .setlists-shell {
    display: block;
}

body[data-auth-required="true"] .songs-hero,
body[data-auth-required="true"] .setlists-hero {
    max-width: none !important;
    margin: 0 0 var(--app-section-gap) !important;
    padding: 24px 300px 24px 26px !important;
    border: 0 !important;
    border-radius: var(--app-radius-lg) !important;
    background: var(--module-page-accent, var(--app-primary)) !important;
    box-shadow: var(--app-shadow-card) !important;
    color: var(--module-page-on-accent, #ffffff);
}

body[data-auth-required="true"] .songs-hero .songs-kicker,
body[data-auth-required="true"] .songs-hero .songs-title,
body[data-auth-required="true"] .songs-hero .songs-intro,
body[data-auth-required="true"] .setlists-hero .setlists-kicker,
body[data-auth-required="true"] .setlists-hero .setlists-title,
body[data-auth-required="true"] .setlists-hero .setlists-intro {
    color: inherit !important;
}

body[data-auth-required="true"] .songs-hero .songs-kicker,
body[data-auth-required="true"] .setlists-hero .setlists-kicker,
body[data-auth-required="true"] .app-dashboard-top .app-dashboard-kicker {
    opacity: 0.78;
}

.app-dashboard-return,
.app-dashboard-return-link {
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    margin-left: auto;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--module-page-on-accent, #ffffff);
    text-decoration: none;
    box-shadow: none;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.app-dashboard-return:hover,
.app-dashboard-return:focus-visible,
.app-dashboard-return-link:hover,
.app-dashboard-return-link:focus-visible {
    outline: none;
    transform: translateY(-2px);
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.app-dashboard-return svg,
.app-dashboard-return-link svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[data-auth-required="true"][data-module-theme] .app-dashboard-top {
    box-sizing: border-box;
    padding: 24px 300px 24px 26px;
    border-radius: var(--app-radius-lg);
    background: var(--module-page-accent);
    box-shadow: var(--app-shadow-card);
    color: var(--module-page-on-accent);
}

body[data-auth-required="true"][data-module-theme] .app-dashboard-top .app-dashboard-kicker,
body[data-auth-required="true"][data-module-theme] .app-dashboard-top .app-dashboard-title,
body[data-auth-required="true"][data-module-theme] .app-dashboard-top .app-dashboard-intro {
    color: inherit;
}

.setup-module-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: var(--app-section-gap);
}

.setup-module-logo {
    --brand-logo-size: clamp(62px, 6vw, 92px);
    align-self: center;
}

body[data-auth-required="true"][data-module-theme] .app-dashboard-top.setup-hero {
    display: flex;
    align-items: center;
    min-height: 0;
    margin: 0 !important;
    padding: 18px 26px !important;
}

.setup-hero-titleline {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.setup-hero-icon {
    display: block;
    width: clamp(38px, 4vw, 52px);
    height: clamp(38px, 4vw, 52px);
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("/assets/icons/equalizer.svg?v=20260615-setupicon1") center / contain no-repeat;
    mask: url("/assets/icons/equalizer.svg?v=20260615-setupicon1") center / contain no-repeat;
}

.app-module-heading-standard {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    margin: 0 auto var(--app-section-gap);
}

.app-module-heading-standard .app-brand-logo--module {
    --brand-logo-size: clamp(62px, 6vw, 92px);
    align-self: center;
}

body[data-auth-required="true"][data-module-theme] .app-module-hero-standard {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 !important;
    padding: 18px 26px !important;
    border: 0 !important;
    border-radius: var(--app-radius-lg);
    background: var(--module-page-accent) !important;
    box-shadow: var(--app-shadow-card);
    color: var(--module-page-on-accent) !important;
}

.app-module-hero-titleline {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.app-module-hero-icon {
    display: block;
    width: clamp(38px, 4vw, 52px);
    height: clamp(38px, 4vw, 52px);
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--module-icon-url) center / contain no-repeat;
    mask: var(--module-icon-url) center / contain no-repeat;
}

body[data-auth-required="true"][data-module-theme] .app-module-hero-standard h1,
body[data-auth-required="true"][data-module-theme] .app-module-hero-standard p,
body[data-auth-required="true"][data-module-theme] .app-module-hero-standard .app-module-hero-titleline {
    margin: 0;
    color: inherit !important;
}

body[data-auth-required="true"][data-module-theme] .app-module-hero-standard h1 {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
    letter-spacing: 0;
}

body[data-auth-required="true"][data-module-theme] .app-module-heading-standard .app-dashboard-return-link {
    color: var(--module-page-on-accent) !important;
}

body[data-auth-required="true"][data-module-theme] .app-module-heading-standard .app-dashboard-return-link svg {
    stroke: currentColor !important;
}

body[data-auth-required="true"][data-module-theme] .setup-hero .app-dashboard-return-link {
    display: inline-grid;
    width: 52px;
    height: 52px;
    min-height: 52px;
    margin-left: auto;
    place-items: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit !important;
    text-decoration: none;
    box-sizing: border-box;
}

body[data-auth-required="true"][data-module-theme] .setup-hero .app-dashboard-return-link svg {
    width: 24px;
    height: 24px;
    stroke: currentColor !important;
    stroke-width: 2.1;
    fill: none;
}

body[data-auth-required="true"][data-module-theme] > header {
    box-sizing: border-box;
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    margin: 0 auto var(--app-section-gap);
    padding: 24px 300px 24px 26px;
    border-color: transparent;
    border-radius: var(--app-radius-lg);
    background: var(--module-page-accent);
    box-shadow: var(--app-shadow-card);
    color: var(--module-page-on-accent);
    overflow: visible;
}

body[data-auth-required="true"][data-module-theme] > header h1,
body[data-auth-required="true"][data-module-theme] > header h2,
body[data-auth-required="true"][data-module-theme] > header h3,
body[data-auth-required="true"][data-module-theme] > header p {
    color: inherit;
}

body[data-auth-required="true"][data-module-theme] .app > aside > h1 {
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: var(--app-radius-md);
    background: var(--module-page-accent);
    color: var(--module-page-on-accent);
}

body[data-auth-required="true"] .songs-sidebar,
body[data-auth-required="true"] .songs-panel,
body[data-auth-required="true"] .songs-editor-panel,
body[data-auth-required="true"] .setlists-sidebar,
body[data-auth-required="true"] .setlists-panel,
body[data-auth-required="true"] .setlist-detail-card,
body[data-auth-required="true"] .profile-card,
body[data-auth-required="true"] .setup-toggle,
body[data-auth-required="true"] .app-switch-row {
    border-color: var(--app-line);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

body[data-auth-required="true"] .songs-sidebar,
body[data-auth-required="true"] .songs-panel,
body[data-auth-required="true"] .setlists-sidebar,
body[data-auth-required="true"] .setlists-panel,
body[data-auth-required="true"] .setlist-detail-card,
body[data-auth-required="true"] .profile-card {
    padding: var(--app-card-padding) !important;
}

body[data-auth-required="true"] .badge,
body:not([data-auth-gate="modules"]) .badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 26%, var(--app-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 9%, transparent);
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 800;
}

body[data-auth-required="true"] a,
body:not([data-auth-gate="modules"]) a {
    color: var(--app-primary);
}

body[data-auth-required="true"] .app-dashboard-return,
body:not([data-auth-gate="modules"]) .app-dashboard-return {
    color: var(--module-page-on-accent, #ffffff) !important;
}

:root:not([data-debug-mode="on"]) pre,
:root:not([data-debug-mode="on"]) [data-debug-output],
:root:not([data-debug-mode="on"]) [data-debug-inline],
:root:not([data-debug-mode="on"]) [data-debug-section] {
    display: none !important;
}

:root:not([data-system-admin="true"]) [data-admin-only] {
    display: none !important;
}

.app-switch-row {
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-strong);
}

.app-switch-row input {
    width: auto;
}

body[data-auth-required="true"] .app,
body[data-auth-required="true"] header {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-xl);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
    overflow: hidden;
}

body[data-auth-required="true"] .app {
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    min-height: calc(100vh - 68px);
    margin: 0 auto;
}

body[data-auth-required="true"] aside,
body[data-auth-required="true"] .editor-panel,
body[data-auth-required="true"] main {
    background: var(--app-bg);
    color: var(--app-text);
}

body[data-auth-required="true"] .notation-toolbar,
body[data-auth-required="true"] header {
    background: var(--app-surface-strong);
    color: var(--app-text);
}

body[data-auth-required="true"] .viewer-content,
body[data-auth-required="true"] .viewer-panel,
body[data-auth-required="true"] .setlist-sidebar,
body[data-auth-required="true"] .notice,
body[data-auth-required="true"] .song-nav-item,
body[data-auth-required="true"] .embed-card,
body[data-auth-required="true"] .display-card {
    border-color: var(--app-line);
    background: var(--app-surface);
    color: var(--app-text);
}

.app-preference-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.app-auth-preferences .app-preference-group {
    box-shadow: none;
}

.app-auth-preferences .app-preference-label,
.app-auth-preferences [data-preference-value="system"],
.app-auth-preferences [data-preference-value="outline"] {
    display: none;
}

.app-auth-preferences .app-preference-option {
    min-width: 0;
    padding: 6px 9px;
    font-size: 12px;
}

.app-preference-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--app-line);
    border-radius: 999px;
    background: var(--app-surface);
    box-shadow: 0 10px 24px rgba(40, 54, 74, 0.06);
}

.app-preference-label {
    padding: 0 6px 0 8px;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 700;
}

.app-preference-option {
    min-width: 44px;
    padding: 7px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--app-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.app-preference-option[aria-pressed="true"] {
    background: var(--app-text);
    color: var(--app-surface);
}

:root[data-theme="dark"] .app-preference-option[aria-pressed="true"] {
    background: #edf3f8;
    color: #111821;
}

.app-dashboard-shell {
    min-height: 100vh;
    padding: var(--app-page-gutter);
}

.app-dashboard-frame {
    width: var(--app-content-width);
    max-width: var(--app-content-max);
    margin: 0 auto;
}

.app-dashboard-top {
    display: flex;
    justify-content: space-between;
    gap: var(--app-section-gap);
    align-items: center;
    margin-bottom: var(--app-section-gap);
    padding-right: 280px;
}

.app-dashboard-brand {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 22px);
    min-width: 0;
}

.app-dashboard-kicker {
    margin: 0 0 8px;
    color: var(--app-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-dashboard-logo {
    display: block;
    width: clamp(58px, 7vw, 86px);
    height: auto;
    margin: 0;
}

.app-brand-logo {
    --brand-logo-base: #111111;
    --brand-logo-accent: #b7b7b7;
    position: relative;
    display: block;
    width: var(--brand-logo-size, clamp(58px, 7vw, 86px));
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 14px;
    text-decoration: none;
}

:root[data-theme="dark"] .app-brand-logo {
    --brand-logo-base: #ffffff;
}

a.app-brand-logo:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-logo-accent) 54%, transparent);
    outline-offset: 6px;
}

body[data-module-theme] .app-brand-logo--module {
    --brand-logo-accent: var(--module-page-accent, var(--app-primary));
}

.app-brand-logo-piece {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--brand-logo-base);
}

.app-brand-logo-piece--accent {
    background: var(--brand-logo-accent);
}

.app-brand-logo-piece--base {
    -webkit-mask: url("/assets/brand/logo-base.svg?v=20260615-final-logo1") center / contain no-repeat;
    mask: url("/assets/brand/logo-base.svg?v=20260615-final-logo1") center / contain no-repeat;
}

.app-brand-logo-piece--accent {
    -webkit-mask: url("/assets/brand/logo-accent.svg?v=20260615-final-logo1") center / contain no-repeat;
    mask: url("/assets/brand/logo-accent.svg?v=20260615-final-logo1") center / contain no-repeat;
}

.app-dashboard-license-separator {
    display: inline-block;
    color: var(--app-muted);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300;
    line-height: 1;
    transform: translateY(-6px);
}

.app-dashboard-license {
    color: var(--app-text);
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
}

.app-dashboard-title {
    margin: 0 0 10px;
    font-size: 52px;
    line-height: 1;
    letter-spacing: 0;
}

.app-dashboard-intro {
    max-width: 660px;
    margin: 0;
    color: var(--app-muted);
    font-size: 17px;
    line-height: 1.55;
}

.app-dashboard-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-bg);
    box-shadow: none;
}

.app-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--app-section-gap);
}

.app-module-card {
    position: relative;
    display: flex;
    min-height: 124px;
    grid-column: span 4;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: var(--app-card-padding);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.app-module-card::after {
    position: absolute;
    right: -42px;
    bottom: -54px;
    width: 128px;
    height: 128px;
    border: 22px solid color-mix(in srgb, var(--module-accent, var(--app-primary)) 18%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.app-module-card::before {
    position: absolute;
    right: 29px;
    bottom: 17px;
    z-index: 1;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--module-accent, var(--app-primary)) 13%, var(--app-surface));
    color: var(--module-accent, var(--app-primary));
    content: "\203A";
    font-size: 19px;
    font-weight: 850;
    line-height: 26px;
    text-align: center;
    pointer-events: none;
}

a.app-module-card:hover,
a.app-module-card:focus-visible {
    border-color: color-mix(in srgb, var(--module-accent, var(--app-primary)) 55%, var(--app-line));
    box-shadow: var(--app-shadow-card);
    outline: none;
    transform: translateY(-3px);
}

.app-dashboard-grid .app-module-card {
    min-height: 92px;
    justify-content: center;
    padding: 18px 92px 18px 18px;
}

.app-dashboard-grid .app-module-card::after {
    right: -36px;
    bottom: -56px;
    width: 116px;
    height: 116px;
    border-width: 20px;
}

.app-dashboard-grid .app-module-card::before {
    right: 27px;
    bottom: 15px;
    line-height: 27px;
}

.app-module-card.disabled {
    opacity: 0.72;
}

.app-module-card.module-unavailable {
    display: none;
}

.app-module-card[data-accent="setup"] {
    --module-accent: var(--app-muted);
    --module-on-accent: #ffffff;
}

.app-module-card[data-accent="songs"] {
    --module-accent: var(--module-color-songs);
    --module-on-accent: var(--module-on-songs);
}

.app-module-card[data-accent="setlists"] {
    --module-accent: var(--module-color-setlists);
    --module-on-accent: var(--module-on-setlists);
}

.app-module-card[data-accent="bands"] {
    --module-accent: var(--module-color-events);
    --module-on-accent: var(--module-on-events);
}

.app-module-card[data-accent="notation"] {
    --module-accent: var(--module-color-notation);
    --module-on-accent: var(--module-on-notation);
}

.app-module-card[data-accent="live"] {
    --module-accent: var(--module-color-live);
    --module-on-accent: var(--module-on-live);
}

.app-module-card[data-accent="events"] {
    --module-accent: var(--module-color-events);
    --module-on-accent: var(--module-on-events);
}

.app-module-card[data-accent="rehearsals"] {
    --module-accent: var(--module-color-rehearsals);
    --module-on-accent: var(--module-on-rehearsals);
}

.app-module-card[data-accent="contacts"] {
    --module-accent: var(--module-color-contacts);
    --module-on-accent: var(--module-on-contacts);
}

.app-module-card[data-accent="communication"] {
    --module-accent: var(--module-color-communication);
    --module-on-accent: var(--module-on-communication);
}

.app-module-card[data-accent="finances"] {
    --module-accent: var(--module-color-finances);
    --module-on-accent: var(--module-on-finances);
}

.app-module-card[data-accent="tasks"] {
    --module-accent: var(--module-color-tasks);
    --module-on-accent: var(--module-on-tasks);
}

.app-module-card[data-accent="equipment"] {
    --module-accent: var(--module-color-equipment);
    --module-on-accent: var(--module-on-equipment);
}

.app-module-card[data-accent="stageplot"] {
    --module-accent: var(--module-color-stageplot);
    --module-on-accent: var(--module-on-stageplot);
}

.app-module-card[data-accent="midi"] {
    --module-accent: var(--module-color-midi);
    --module-on-accent: var(--module-on-midi);
}

.setup-metro-panel {
    background: var(--app-bg);
}

.setup-metro-card {
    --setup-tile-bg: #363d46;
    --setup-tile-text: #ffffff;
    --setup-tile-muted: #dce2ea;
    --module-accent: #c8d0da;
    border-color: color-mix(in srgb, var(--setup-tile-bg) 82%, var(--app-line));
    background: var(--setup-tile-bg);
    color: var(--setup-tile-text);
}

:root[data-theme="dark"] .setup-metro-card {
    --setup-tile-bg: #d9e0e8;
    --setup-tile-text: #141a22;
    --setup-tile-muted: #4b5563;
}

.setup-metro-card[data-tone="graphite"] {
    --setup-tile-bg: #262b32;
    --module-accent: #aeb8c4;
}

.setup-metro-card[data-tone="slate"] {
    --setup-tile-bg: #363d46;
    --module-accent: #c1cbd6;
}

.setup-metro-card[data-tone="silver"] {
    --setup-tile-bg: #4b5561;
    --module-accent: #d3dbe4;
}

.setup-metro-card[data-tone="pearl"] {
    --setup-tile-bg: #626d79;
    --module-accent: #edf1f5;
}

:root[data-theme="dark"] .setup-metro-card[data-tone="graphite"] {
    --setup-tile-bg: #eef2f6;
    --module-accent: #5f6874;
}

:root[data-theme="dark"] .setup-metro-card[data-tone="slate"] {
    --setup-tile-bg: #d9e0e8;
    --module-accent: #535c67;
}

:root[data-theme="dark"] .setup-metro-card[data-tone="silver"] {
    --setup-tile-bg: #c3ccd7;
    --module-accent: #414b57;
}

:root[data-theme="dark"] .setup-metro-card[data-tone="pearl"] {
    --setup-tile-bg: #aeb9c6;
    --module-accent: #2f3844;
}

.setup-metro-card,
.setup-metro-card[data-tone] {
    --setup-tile-bg: #d3dbe4;
    --setup-tile-text: #1f2933;
    --setup-tile-muted: #536071;
    --module-accent: #4b5561;
    --module-on-accent: #ffffff;
}

:root[data-theme="dark"] .setup-metro-card,
:root[data-theme="dark"] .setup-metro-card[data-tone] {
    --setup-tile-bg: #c3ccd7;
    --setup-tile-text: #141a22;
    --setup-tile-muted: #4b5563;
    --module-accent: #414b57;
    --module-on-accent: #ffffff;
}

.setup-metro-card .app-module-icon {
    border-color: color-mix(in srgb, var(--module-accent) 80%, transparent);
    background: var(--module-accent);
    color: var(--module-on-accent, #ffffff);
}

.setup-metro-card strong,
.setup-metro-card .app-module-meta {
    color: var(--setup-tile-text);
}

.setup-metro-card .app-module-desc {
    color: var(--setup-tile-muted);
}

.setup-metro-card .app-module-arrow {
    background: var(--module-accent);
    color: var(--module-on-accent, #ffffff);
}

.app-module-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.app-dashboard-grid .app-module-title {
    margin-bottom: 0;
}

.app-module-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--module-accent, var(--app-primary)) 42%, var(--app-line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--module-accent, var(--app-primary)) 10%, var(--app-surface));
    color: var(--module-accent, var(--app-primary));
}

.app-module-icon svg {
    display: block;
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85;
}

.app-module-icon-mask {
    display: block;
    width: 34px;
    height: 34px;
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
}

:root[data-icon-style="filled"] .app-module-icon {
    border-color: transparent;
    background: var(--module-accent, var(--app-primary));
    color: var(--module-on-accent, #ffffff);
}

:root[data-icon-style="filled"] .app-module-icon svg .icon-fill {
    fill: color-mix(in srgb, var(--module-on-accent, #ffffff) 25%, transparent);
}

.app-module-card strong {
    display: block;
    font-size: 21px;
    letter-spacing: 0;
}

.app-module-desc {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    max-width: calc(100% - 46px);
    color: var(--app-muted);
    overflow: hidden;
    font-size: 75%;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.app-dashboard-grid .app-module-desc {
    display: none;
}

.app-module-meta {
    display: none;
}

.app-module-arrow {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--module-accent, var(--app-primary)) 12%, var(--app-surface));
    color: var(--module-accent, var(--app-primary));
    font-size: 18px;
}

@media (max-width: 980px) {
    :root {
        --app-page-gutter: 22px;
        --app-page-top: 22px;
    }

    body[data-auth-required="true"] > h1,
    body:not([data-auth-gate="modules"]) > h1,
    body[data-auth-required="true"] .songs-hero,
    body[data-auth-required="true"] .setlists-hero,
    .app-dashboard-top {
        padding-right: 0;
    }

    body[data-auth-required="true"] .songs-hero,
    body[data-auth-required="true"] .setlists-hero,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top {
        padding: 22px !important;
    }

    .app-module-card {
        grid-column: span 6;
    }
}

@media (max-width: 1180px) {
    :root {
        --app-page-gutter: 20px;
        --app-content-max: 100%;
        --app-section-gap: 18px;
        --app-panel-padding: 18px;
        --app-card-padding: 18px;
    }

    html body[data-auth-required="true"],
    html body:not([data-auth-gate="modules"]) {
        padding-top: var(--app-page-top);
    }

    body[data-auth-required="true"] > h1,
    body:not([data-auth-gate="modules"]) > h1,
    body[data-auth-required="true"] .songs-hero,
    body[data-auth-required="true"] .setlists-hero,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top {
        padding-right: 0 !important;
    }

    .app-dashboard-shell {
        padding: var(--app-page-gutter);
    }

    .app-dashboard-frame,
    body[data-auth-required="true"] .app-dashboard-frame,
    body[data-auth-required="true"] > main:not(.app-dashboard-shell):not(.profile-layout):not(.app),
    body[data-auth-required="true"] .setup-page-layout,
    body[data-auth-required="true"] .songs-shell,
    body[data-auth-required="true"] .setlists-shell {
        width: min(100%, calc(100vw - (var(--app-page-gutter) * 2))) !important;
        max-width: none !important;
    }

    .app-dashboard-top,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top,
    body[data-auth-required="true"][data-module-theme] > header,
    body[data-auth-required="true"][data-module-theme] > h1 {
        padding: 22px !important;
        border-radius: 18px;
    }

    .app-dashboard-title {
        font-size: clamp(34px, 5vw, 48px);
    }

    .app-dashboard-grid {
        gap: 18px;
    }

    .app-module-card {
        min-height: 122px;
        grid-column: span 6;
    }

    .app-dashboard-grid .app-module-card {
        min-height: 92px;
    }

    .app-module-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .app-module-icon svg {
        width: 31px;
        height: 31px;
    }

    .app-module-desc {
        max-width: 94%;
    }
}

@media (max-width: 900px) {
    :root {
        --app-page-gutter: 18px;
        --app-page-top: 74px;
        --app-section-gap: 16px;
    }

    html body[data-auth-required="true"],
    html body:not([data-auth-gate="modules"]) {
        padding-top: var(--app-page-top);
    }

    body[data-auth-required="true"] > h1,
    body:not([data-auth-gate="modules"]) > h1 {
        font-size: clamp(30px, 7vw, 40px);
    }

    body[data-auth-required="true"][data-module-theme] > h1,
    body[data-auth-required="true"] .songs-hero,
    body[data-auth-required="true"] .setlists-hero,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top {
        padding: 20px !important;
    }

    .setup-page-layout,
    body[data-auth-required="true"] .setup-page-layout {
        display: grid;
        gap: var(--app-section-gap);
    }

    .app-dashboard-panel {
        padding: 16px;
    }

    .app-module-card {
        min-height: 116px;
    }

    .app-dashboard-grid .app-module-card {
        min-height: 90px;
    }
}

@media (max-width: 680px) {
    :root {
        --app-page-gutter: 16px;
        --app-section-gap: 16px;
        --app-panel-padding: 14px;
        --app-card-padding: 16px;
        --app-scrollbar-size: 9px;
    }

    html body[data-auth-required="true"],
    html body:not([data-auth-gate="modules"]) {
        padding: 76px var(--app-page-gutter) var(--app-page-gutter);
    }

    body[data-auth-required="true"] > h1,
    body:not([data-auth-gate="modules"]) > h1 {
        padding-right: 0;
        font-size: 32px;
    }

    body[data-auth-required="true"][data-module-theme] > h1,
    body[data-auth-required="true"] .songs-hero,
    body[data-auth-required="true"] .setlists-hero,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top {
        padding: 18px !important;
    }

    .app-dashboard-shell {
        padding: var(--app-page-gutter);
    }

    .app-dashboard-top {
        flex-direction: column;
    }

    .app-dashboard-title {
        font-size: 36px;
    }

    .app-dashboard-panel {
        padding: 14px;
    }

    .app-module-card {
        grid-column: span 12;
        min-height: 108px;
        border-radius: 18px;
    }

    .app-dashboard-grid .app-module-card {
        min-height: 88px;
        padding: 16px 82px 16px 16px;
    }

    .app-module-title {
        gap: 12px;
        margin-bottom: 6px;
    }

    .app-dashboard-grid .app-module-title {
        margin-bottom: 0;
    }

    .app-module-card strong {
        font-size: 19px;
        line-height: 1.12;
    }

    .app-module-desc {
        max-width: 100%;
        font-size: 75%;
        line-height: 1.35;
    }

    .app-dashboard-grid .app-module-desc {
        display: none;
    }

    .app-module-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .app-module-icon svg {
        width: 28px;
        height: 28px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    :root {
        --app-page-gutter: 12px;
        --app-section-gap: 12px;
        --app-card-padding: 14px;
    }

    html body[data-auth-required="true"],
    html body:not([data-auth-gate="modules"]) {
        padding-top: 70px;
    }

    .app-dashboard-shell {
        padding: var(--app-page-gutter);
    }

    .app-dashboard-top,
    body[data-auth-required="true"][data-module-theme] .app-dashboard-top,
    body[data-auth-required="true"][data-module-theme] > h1 {
        padding: 16px !important;
        border-radius: 16px;
    }

    .app-dashboard-title {
        font-size: 32px;
    }

    .app-dashboard-panel {
        padding: 12px;
        border-radius: 16px;
    }
}