/*
 * Band Manager UI stylesheet
 * Structure: design tokens, base layout, feature components, final responsive passes.
 */

/* Design tokens and base layout */
:root {
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --touch-size: 48px;
    --font-title: "Space Grotesk", sans-serif;
    --font-body: "Instrument Sans", sans-serif;
    --surface-0: color-mix(in srgb, var(--bg-0) 84%, #000 16%);
    --surface-1: color-mix(in srgb, var(--card) 88%, white 12%);
    --surface-2: color-mix(in srgb, var(--card-soft) 90%, white 10%);
    --surface-border: color-mix(in srgb, var(--line) 82%, white 18%);
    --text-soft: color-mix(in srgb, var(--text) 80%, var(--muted) 20%);
}

html {
    font-size: 16px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.5;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 1000;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    transition: top .18s ease;
}

.skip-link:focus {
    top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-title);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2rem;
    margin: 0 0 var(--space-2);
}

h2 {
    font-size: 1.6rem;
    margin: 0 0 0.875rem;
}

h3 {
    font-size: 1.28rem;
    margin: 0 0 0.75rem;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button,
a {
    font-size: 0.98rem;
}

small,
.muted,
.author-meta,
.file-selection-status {
    color: var(--text-soft);
}

.container {
    width: 100%;
    max-width: none;
    margin: var(--space-2) 0 var(--space-4);
    padding: 0 var(--space-2);
}

.topbar {
    gap: var(--space-2);
    padding: 0.875rem 1rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin: 0 0 var(--space-2);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: color-mix(in srgb, var(--surface-0) 88%, transparent 12%);
}

.brand {
    min-height: var(--touch-size);
}

.brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.9rem;
}

.brand-text {
    font-size: 0.95rem;
}

.main-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.main-nav a,
.user-chip,
.logout-form .btn,
.file-picker {
    min-height: var(--touch-size);
}

.main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.6rem;
    border-radius: 0.9rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--surface-2) 76%, transparent 24%);
    border: 1px solid transparent;
}

.main-nav a i {
    margin-right: 0;
}

.topbar-actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
}

.user-chip {
    flex: 1 1 auto;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-1) 72%, transparent 28%);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--surface-border) 76%);
}

.card,
.board-item,
.kpi,
.events-day-detail {
    border-radius: var(--radius-md);
    padding: var(--space-2);
    border-color: var(--surface-border);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) var(--surface-1);
}

.card {
    margin-bottom: var(--space-2);
}

.grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.row-between,
.actions-row {
    gap: 0.75rem;
}

.actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

input,
select,
textarea,
button {
    margin: 0.25rem 0 0.75rem;
    border-radius: 0.9rem;
}

input,
select,
textarea {
    min-height: var(--touch-size);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--surface-2) 84%, transparent 16%);
}

textarea {
    min-height: 132px;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 88%, transparent 12%);
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent 78%);
}

.btn,
.btn-sm,
.btn-ghost,
.btn-danger,
.file-picker {
    min-height: var(--touch-size);
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}

.btn {
    min-width: 8.5rem;
    background: linear-gradient(145deg, var(--accent), var(--accent-strong));
    color: #071a33;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-strong) 30%, transparent 70%);
}

.btn-ghost,
.file-picker {
    background: color-mix(in srgb, var(--surface-2) 78%, transparent 22%);
    color: var(--text);
    border: 1px solid var(--surface-border);
    box-shadow: none;
}

.btn-danger {
    background: linear-gradient(145deg, #ff7c8b, #ff5d70);
    color: #fff8f9;
    border-color: transparent;
}

.btn:hover,
.btn-ghost:hover,
.btn-danger:hover,
.file-picker:hover,
.main-nav a:hover {
    filter: brightness(1.04);
}

.btn:active,
.btn-ghost:active,
.btn-danger:active,
.file-picker:active,
.main-nav a:active {
    transform: scale(0.985);
}

.btn:disabled,
.btn[disabled],
.btn-ghost:disabled,
.btn-danger:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.7);
    box-shadow: none;
}

button:focus-visible,
a:focus-visible,
.file-picker:focus-visible,
.main-nav a:focus-visible,
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.table-wrap {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent 22%);
}

table {
    min-width: 720px;
}

th {
    color: var(--text-soft);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

td,
th {
    padding: 0.85rem 0.7rem;
}

.pill,
.function-pill,
.function-pill.readonly {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.stack-form label {
    margin: 0 0 0.35rem;
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 600;
}

.divider {
    margin: var(--space-2) 0;
    border-top-color: color-mix(in srgb, var(--surface-border) 76%, transparent 24%);
}

@media (min-width: 761px) {
    .container {
        max-width: 1280px;
        margin: 1.25rem auto 2.5rem;
        padding: 0 1.25rem;
    }

    .topbar {
        margin: 0.75rem 0.75rem 0;
        border-left: 1px solid var(--surface-border);
        border-right: 1px solid var(--surface-border);
        border-top: 1px solid var(--surface-border);
        border-radius: var(--radius-lg);
    }

    .main-nav {
        width: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .topbar-actions {
        width: auto;
        justify-content: flex-end;
    }

    .user-chip {
        flex: 0 1 auto;
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .card,
    .board-item,
    .kpi,
    .events-day-detail {
        padding: 1.2rem;
    }
}

html[data-theme="luminoso"] {
    --bg-0: #f4f8ff;
    --bg-1: #e9f0ff;
    --bg-2: #dde8ff;
    --card: #ffffff;
    --card-soft: #f7faff;
    --line: rgba(53, 89, 161, .18);
    --text: #12213f;
    --muted: #4f6188;
    --accent: #0da6d8;
    --accent-strong: #0077cc;
    --focus: #1bb4e6;
    --danger: #cc365c;
    --shadow: 0 14px 28px rgba(29, 58, 115, .12);
}

html[data-theme="luminoso"] body {
    background:
        radial-gradient(900px 500px at 0% -10%, rgba(76, 154, 255, .18), transparent 64%),
        radial-gradient(760px 460px at 100% 0%, rgba(34, 191, 224, .12), transparent 60%),
        linear-gradient(165deg, #f4f8ff 0%, #eaf2ff 52%, #dfe9ff 100%);
}

html[data-theme="luminoso"] .topbar,
html[data-theme="luminoso"] .card,
html[data-theme="luminoso"] tr,
html[data-theme="luminoso"] .kpi,
html[data-theme="luminoso"] .board-item,
html[data-theme="luminoso"] .events-day-detail {
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(245, 250, 255, .92));
    border-color: rgba(78, 112, 182, .2);
    box-shadow: var(--shadow);
}

html[data-theme="luminoso"] .main-nav a,
html[data-theme="luminoso"] .btn-ghost,
html[data-theme="luminoso"] tbody td,
html[data-theme="luminoso"] .table-wrap {
    background: rgba(239, 246, 255, .85);
    color: var(--text);
    border-color: rgba(78, 112, 182, .2);
}

html[data-theme="luminoso"] .btn {
    background: linear-gradient(145deg, #0fb5e4, #0a8ac8);
    color: #f8fcff;
}

html[data-theme="luminoso"] input,
html[data-theme="luminoso"] select,
html[data-theme="luminoso"] textarea {
    background: #ffffff;
    color: var(--text);
    border-color: rgba(72, 107, 177, .24);
}

html[data-theme="dark"] {
    --bg-0: #071633;
    --bg-1: #0b1f45;
    --bg-2: #102a59;
    --card: #10264f;
    --card-soft: #142f5f;
    --line: rgba(126, 168, 255, .24);
    --text: #e8f1ff;
    --muted: #9fb5df;
    --accent: #39d8ff;
    --accent-strong: #5f7dff;
    --focus: #52deff;
    --danger: #ff6b98;
    --shadow: 0 24px 46px rgba(2, 9, 28, .62);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(920px 540px at -8% -15%, rgba(67, 120, 255, .24), transparent 62%),
        radial-gradient(820px 480px at 110% 5%, rgba(57, 216, 255, .16), transparent 58%),
        radial-gradient(1200px 640px at 50% 120%, rgba(22, 58, 132, .30), transparent 62%),
        linear-gradient(165deg, #071633 0%, #0a1d43 48%, #0f2a59 100%);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] tr,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .board-item,
html[data-theme="dark"] .events-day-detail {
    border: 1px solid rgba(141, 182, 255, .24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 26%),
        linear-gradient(155deg, rgba(98, 130, 255, .16), rgba(45, 214, 255, .08) 35%, rgba(8, 27, 64, .92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(220, 235, 255, .14),
        inset 0 -1px 0 rgba(9, 17, 39, .65),
        0 22px 40px rgba(2, 8, 25, .55),
        0 0 0 1px rgba(92, 142, 255, .10);
}

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] tbody td,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .instrument-attachment-item {
    background: linear-gradient(170deg, rgba(72, 108, 191, .16), rgba(14, 34, 76, .82));
    border-color: rgba(120, 164, 255, .24);
    box-shadow: inset 0 1px 0 rgba(200, 223, 255, .08);
}

html[data-theme="dark"] .btn {
    background: linear-gradient(145deg, #67a5ff, #3cd8ff);
    color: #041734;
    box-shadow: 0 10px 24px rgba(52, 144, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn:focus-visible {
    box-shadow: 0 14px 30px rgba(56, 151, 255, .48), 0 0 0 3px rgba(60, 216, 255, .22);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: linear-gradient(180deg, rgba(13, 33, 72, .95), rgba(10, 25, 56, .95));
    border-color: rgba(122, 165, 255, .28);
    box-shadow: inset 0 1px 0 rgba(207, 226, 255, .07), inset 0 -1px 0 rgba(7, 18, 41, .7);
}

html[data-theme="dark"] .pill {
    color: #d5f2ff;
    border-color: rgba(93, 196, 255, .55);
    background: linear-gradient(145deg, rgba(48, 122, 255, .34), rgba(46, 214, 255, .2));
    box-shadow: inset 0 1px 0 rgba(210, 240, 255, .14);
}

html[data-theme="rockero"] .topbar,
html[data-theme="rockero"] .card,
html[data-theme="rockero"] tr,
html[data-theme="rockero"] .kpi,
html[data-theme="rockero"] .board-item,
html[data-theme="rockero"] .events-day-detail {
    border: 1px solid rgba(255, 89, 122, .18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 26%),
        linear-gradient(155deg, rgba(255, 49, 95, .12), rgba(255, 122, 24, .06) 34%, rgba(16, 8, 14, .92) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 243, .12),
        inset 0 -1px 0 rgba(8, 4, 7, .55),
        0 22px 40px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(255, 74, 118, .10);
}

html[data-theme="rockero"] .main-nav a,
html[data-theme="rockero"] .btn-ghost,
html[data-theme="rockero"] tbody td,
html[data-theme="rockero"] .table-wrap,
html[data-theme="rockero"] .instrument-attachment-item {
    background: linear-gradient(170deg, rgba(51, 17, 27, .9), rgba(22, 10, 16, .9));
    border-color: rgba(255, 89, 122, .18);
    box-shadow: inset 0 1px 0 rgba(255, 230, 236, .06);
}

html[data-theme="rockero"] .btn {
    background: linear-gradient(145deg, #ff315f, #ff7a18);
    color: #fff7f8;
    box-shadow: 0 10px 24px rgba(255, 49, 95, .30), inset 0 1px 0 rgba(255, 255, 255, .22);
}

html[data-theme="rockero"] .btn:hover,
html[data-theme="rockero"] .btn:focus-visible {
    box-shadow: 0 14px 30px rgba(255, 49, 95, .42), 0 0 0 3px rgba(255, 122, 24, .22);
}

html[data-theme="rockero"] input,
html[data-theme="rockero"] select,
html[data-theme="rockero"] textarea {
    background: linear-gradient(180deg, rgba(34, 16, 24, .96), rgba(22, 10, 16, .96));
    border-color: rgba(255, 89, 122, .20);
    box-shadow: inset 0 1px 0 rgba(255, 240, 243, .05), inset 0 -1px 0 rgba(8, 4, 7, .6);
}

html[data-theme="rockero"] .pill {
    color: #ffe0e7;
    border-color: rgba(255, 89, 122, .40);
    background: linear-gradient(145deg, rgba(255, 49, 95, .24), rgba(255, 122, 24, .14));
    box-shadow: inset 0 1px 0 rgba(255, 240, 243, .10);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Instrument Sans", "Segoe UI", sans-serif;
    background:
        radial-gradient(1300px 620px at 0% -20%, rgba(32, 214, 255, .12), transparent),
        radial-gradient(1000px 500px at 100% -25%, rgba(255, 62, 169, .08), transparent),
        linear-gradient(165deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
}

a { color: #8fd7ff; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 20%, #000 35%, transparent 80%);
    opacity: .35;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .68rem .9rem;
    border-bottom: 1px solid rgba(117, 141, 203, .28);
    background: rgba(17, 26, 48, .72);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--text);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .7rem;
    font: 700 .8rem/1 "Space Grotesk", sans-serif;
    background: linear-gradient(145deg, #b4d71a, #70b300);
    color: #102000;
    box-shadow: 0 0 0 3px rgba(180, 215, 26, .2), 0 0 18px rgba(180, 215, 26, .5);
}

.brand-text {
    font: 700 1rem/1 "Space Grotesk", sans-serif;
    letter-spacing: .02em;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.main-nav a {
    text-decoration: none;
    color: var(--muted);
    padding: .42rem .66rem;
    border-radius: .55rem;
    transition: .22s ease;
}

.main-nav a i {
    margin-right: .35rem;
    opacity: .9;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .32rem .5rem;
    border-radius: .8rem;
    border: 1px solid rgba(32, 214, 255, .28);
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.03);
}

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin-left: auto;
}

.logout-form { margin: 0; }

.logout-form .btn i {
    margin-right: .35rem;
}

.user-chip-photo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.22);
}

.user-chip-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #b4d71a, #20d6ff);
    color: #0f1b33;
    font-weight: 700;
}

.user-chip-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.user-chip-meta small {
    color: var(--muted);
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--text);
    background: rgba(32, 214, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(32, 214, 255, .4);
    outline: none;
}

.container {
    max-width: 1160px;
    margin: 1.5rem auto 2.2rem;
    padding: 0 1rem;
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) var(--card);
    border: 1px solid rgba(95, 120, 186, .45);
    border-radius: 1rem;
    padding: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
}

h1, h2 { font-family: "Space Grotesk", sans-serif; margin: 0 0 .9rem; }
h2 { font-size: 1.2rem; }
h3 { font-family: "Space Grotesk", sans-serif; margin: .8rem 0 .5rem; }

h2 i,
h3 i {
    color: var(--accent);
    margin-right: .4rem;
}

.row-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
}

.muted { color: var(--muted); }
.event-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .35rem; }

.item {
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.item:last-child { border-bottom: 0; }

.author-meta {
    margin: .4rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    font-size: .82rem;
}

.avatar-xs {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #cfe5ff;
    overflow: hidden;
}

.avatar-xs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pill {
    display: inline-block;
    margin-left: .35rem;
    padding: .12rem .5rem;
    border-radius: 99px;
    background: rgba(32, 214, 255, .16);
    border: 1px solid rgba(32, 214, 255, .45);
    color: #a8efff;
    font-size: .74rem;
    vertical-align: middle;
}

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

th, td {
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .7rem .55rem;
}

th {
    color: #b5c5e6;
    font-size: .85rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.board-list {
    display: grid;
    gap: .8rem;
}

.board-item {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .8rem;
    padding: .8rem;
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 0 0 1px rgba(32, 214, 255, .08);
}

.arrangement-block {
    margin-bottom: .9rem;
}

.arrangement-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.instrument-editor {
    border: 1px solid rgba(95, 120, 186, .35);
    border-radius: .7rem;
    padding: .55rem;
    background: rgba(255,255,255,.02);
}

.instrument-editor .btn-sm {
    margin-right: 0;
}

.instrument-textarea {
    min-height: 120px;
}

.instrument-attachments-list {
    margin-top: .4rem;
    display: grid;
    gap: .3rem;
}

.instrument-attachment-item {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .45rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .55rem;
    background: rgba(255,255,255,.03);
}

.instrument-attachment-form input[type="file"] {
    margin-bottom: .45rem;
}

.instrument-attachment-form {
    margin-top: .45rem;
    padding: .45rem;
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: .6rem;
    background: rgba(255,255,255,.02);
}

.instrument-attachment-form .file-picker {
    display: inline-flex;
    width: auto;
    margin: 0 0 .35rem;
    padding: .34rem .62rem;
    border-radius: .55rem;
    font-size: .78rem;
    letter-spacing: .01em;
}

.file-selection-status {
    margin: 0 0 .4rem;
    font-size: .82rem;
}

.is-loading {
    position: relative;
    pointer-events: none;
    opacity: .86;
}

.is-loading::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,.95);
    display: inline-block;
    margin-left: .4rem;
    vertical-align: -2px;
    animation: spin .75s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.instrument-editor.is-expanded {
    position: fixed;
    top: calc(78px + 1rem);
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 3001;
    background: #1a2441;
    border: 1px solid rgba(32, 214, 255, .55);
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    padding: .8rem;
    overflow: auto;
}

.instrument-editor.is-expanded .instrument-textarea {
    min-height: calc(100vh - 24vh);
}

body.no-scroll {
    overflow: hidden;
}

.editor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 24, .7);
    backdrop-filter: blur(2px);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.editor-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.instrument-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 24, .78);
    padding: 1rem;
}

.instrument-editor-modal.is-visible {
    display: flex;
}

.instrument-editor-modal__panel {
    width: min(920px, 100%);
    max-height: 92vh;
    background: #1a2441;
    border: 1px solid rgba(32, 214, 255, .55);
    border-radius: .9rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.instrument-editor-modal__header {
    margin-bottom: .2rem;
}

.instrument-editor-modal__title-wrap {
    display: grid;
    gap: .15rem;
}

.instrument-editor-modal__section {
    color: var(--muted);
    font-size: .85rem;
}

.arrangement-filter-actions {
    margin-bottom: .55rem;
}

.instrument-card-filtered {
    display: none;
}

.instrument-editor-modal__tools {
    display: grid;
    gap: .45rem;
}

.instrument-editor-modal__mode {
    max-width: 220px;
}

.editor-toolbar {
    display: grid;
    gap: .45rem;
}

.toolbar-group {
    display: none;
    flex-wrap: wrap;
    gap: .4rem;
}

.toolbar-group.is-visible {
    display: flex;
}

.toolbar-group button {
    width: auto;
    min-width: 52px;
    margin: 0;
    padding: .35rem .5rem;
    border-radius: .55rem;
    border: 1px solid rgba(32, 214, 255, .35);
    background: rgba(32, 214, 255, .12);
    color: #b8eeff;
}

.toolbar-common button {
    border-color: rgba(180, 215, 26, .4);
    background: rgba(180, 215, 26, .12);
    color: #d8ef8f;
}

.editor-help {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

.instrument-editor-modal__textarea {
    width: 100%;
    min-height: 34vh !important;
    max-height: 46vh !important;
    height: 34vh !important;
    resize: vertical;
}

.instrument-editor-modal__attachments {
    display: grid;
    gap: .5rem;
    max-height: 26vh;
    overflow: auto;
    padding-right: .2rem;
}

@media (max-width: 760px) {
    .instrument-editor-modal {
        padding: .35rem;
    }

    .instrument-editor-modal__panel {
        max-height: 96vh;
        padding: .65rem;
    }

    .instrument-editor-modal__textarea {
        min-height: 26vh !important;
        max-height: 34vh !important;
        height: 26vh !important;
    }

    .instrument-editor-modal__attachments {
        max-height: 30vh;
    }

    .toolbar-group button {
        font-size: .82rem;
        padding: .35rem .45rem;
    }
}

@media (min-width: 1024px) {
    .topbar {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

    .container {
        max-width: none;
        width: 100%;
        margin: 1.5rem auto 2.2rem;
        padding: 0 1.2rem;
    }

    .main-nav {
        width: auto;
        justify-content: flex-start;
    }

    .main-nav a {
        font-size: .92rem;
        padding: .42rem .66rem;
    }
}

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    body {
        background: linear-gradient(180deg, #262743 0%, #2c2f54 54%, #333660 100%);
    }

    .topbar {
        position: sticky;
        top: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        padding: .55rem .62rem;
        box-shadow: 0 8px 18px rgba(8, 10, 24, .32);
    }

    .brand-text {
        font-size: .82rem;
    }

    .main-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .3rem;
        max-height: none;
        overflow: visible;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 2rem;
        padding: .34rem .25rem;
        font-size: .72rem;
        border-radius: .62rem;
    }

    .main-nav a i {
        margin-right: .18rem;
        font-size: .75rem;
    }

    .container {
        width: 100%;
        max-width: none;
        margin: .55rem 0 1rem;
        padding: 0 .5rem;
    }

    .card {
        border-radius: .8rem;
        padding: .68rem;
        margin-bottom: .56rem;
    }

    .actions-row {
        gap: .36rem;
        flex-wrap: wrap;
    }

    .btn,
    .btn-sm {
        min-height: 2rem;
        border-radius: .58rem;
    }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
    }

    table,
    .card,
    .topbar,
    .container,
    .grid,
    .stack-form,
    .actions-row {
        max-width: 100%;
    }

    img,
    video,
    canvas,
    svg,
    iframe {
        max-width: 100%;
        height: auto;
    }
}

.lyrics-view-card {
    padding-bottom: .8rem;
}

.lyrics-full {
    margin-top: .8rem;
    white-space: normal;
    line-height: 1.8;
    font-size: 1.05rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(95, 120, 186, .45);
    border-radius: .8rem;
    padding: .95rem;
}

.lyrics-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 24, .78);
    z-index: 5200;
    padding: .7rem;
}

.lyrics-modal.is-visible {
    display: flex;
}

.lyrics-modal__panel {
    width: min(980px, 100%);
    max-height: 94vh;
    overflow: auto;
    background: #1a2441;
    border: 1px solid rgba(32, 214, 255, .55);
    border-radius: .9rem;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    padding: .85rem;
}

.lyrics-modal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-top: .75rem;
    padding: .65rem;
    border: 1px solid rgba(95, 120, 186, .42);
    border-radius: .75rem;
    background: rgba(255,255,255,.035);
}

.lyrics-modal__nav-title {
    min-width: 0;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
}

.lyrics-modal__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    margin-top: .55rem;
}

.lyrics-modal__font-size {
    min-width: 3.2rem;
    color: var(--text);
    font-weight: 700;
    text-align: center;
}

.lyrics-modal__jump {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    gap: .55rem;
    margin-top: .55rem;
}

.lyrics-modal__jump select {
    width: 100%;
}

.lyrics-modal__shortcuts {
    margin: .45rem 0 0;
    font-size: .82rem;
    text-align: right;
}

.btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.setlist-sort-hint {
    display: flex;
    align-items: center;
    gap: .45rem;
}

[data-setlist-song-id][draggable="true"] {
    cursor: grab;
}

[data-setlist-song-id][draggable="true"]:active {
    cursor: grabbing;
}

.setlist-drag-handle {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: .45rem;
    border: 1px solid rgba(95, 120, 186, .45);
    border-radius: .55rem;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    touch-action: none;
    user-select: none;
}

.setlist-drag-handle:first-child {
    margin-left: 0;
}

[data-setlist-song-id].is-dragging {
    opacity: .55;
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

[data-setlist-sortable].is-saving {
    opacity: .72;
    pointer-events: none;
}

.document-youtube-player {
    margin-top: .65rem;
    border: 1px solid rgba(95, 120, 186, .45);
    border-radius: .75rem;
    overflow: hidden;
    background: rgba(0,0,0,.24);
}

.document-youtube-player iframe {
    display: block;
    width: 100%;
    height: 96px;
    border: 0;
}

.mobile-data-card .document-youtube-player iframe,
.song-document-item .document-youtube-player iframe {
    height: 140px;
}

.document-audio-player {
    width: min(360px, 100%);
    margin: .35rem 0;
}

.document-audio-player audio,
.inline-audio-player {
    width: 100%;
    max-width: 360px;
    height: 36px;
    display: block;
}

.instrument-attachment-item .inline-audio-player {
    flex: 1 1 220px;
    min-width: 180px;
}

.lyrics-modal__content {
    margin-top: .6rem;
    white-space: normal;
    line-height: 2;
    font-size: calc(1.2rem * var(--lyrics-font-scale, 1));
}

.instrument-details {
    border: 1px solid rgba(95, 120, 186, .45);
    border-radius: .8rem;
    margin-bottom: .7rem;
    background: rgba(255,255,255,.02);
}

.instrument-details summary {
    cursor: pointer;
    padding: .75rem .85rem;
    font-weight: 600;
}

.instrument-details .grid {
    padding: 0 .75rem .75rem;
}

.hero {
    border-color: rgba(84, 111, 188, .55);
    background:
        radial-gradient(460px 200px at 86% 20%, rgba(32, 214, 255, .2), transparent),
        radial-gradient(340px 160px at 8% 85%, rgba(255, 62, 169, .16), transparent),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) var(--card);
}

.kpi {
    border: 1px solid rgba(90, 118, 190, .55);
    background: rgba(31, 44, 77, .72);
}

.kpi strong {
    text-shadow: 0 0 16px rgba(32, 214, 255, .35);
}

.dashboard-grid-compact {
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-nested {
    margin-bottom: 0;
    background: rgba(24, 36, 66, .78);
    border-color: rgba(112, 136, 200, .42);
}

.auth-shell {
    min-height: calc(100vh - 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    justify-items: center;
}

.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.auth-side {
    min-height: 620px;
    padding: clamp(1.4rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
        radial-gradient(520px 320px at 12% 8%, rgba(188, 223, 34, .28), transparent 62%),
        radial-gradient(560px 360px at 88% 22%, rgba(32, 214, 255, .28), transparent 64%),
        radial-gradient(520px 320px at 62% 96%, rgba(255, 62, 169, .2), transparent 62%),
        #11182a;
}

.auth-side::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    pointer-events: none;
}

.auth-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .72;
    pointer-events: none;
}

.auth-orb--one {
    width: 180px;
    height: 180px;
    top: 10%;
    right: 12%;
    background: radial-gradient(circle, rgba(32,214,255,.55), transparent 66%);
}

.auth-orb--two {
    width: 260px;
    height: 260px;
    left: -70px;
    bottom: 18%;
    background: radial-gradient(circle, rgba(255,62,169,.38), transparent 68%);
}

.auth-brand-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .52rem .72rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(8, 12, 24, .38);
    backdrop-filter: blur(12px);
    font-weight: 800;
}

.auth-kicker {
    margin: 0 0 .55rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #bcdf22;
    font-weight: 800;
    font-size: .74rem;
}

.auth-side h2 {
    position: relative;
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4.9rem);
    line-height: .94;
    letter-spacing: -.065em;
}

.auth-lead {
    position: relative;
    max-width: 620px;
    margin: 1rem 0 0;
    color: rgba(255,255,255,.78);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.auth-feature-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1.4rem;
}

.auth-feature-grid span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(8, 12, 24, .28);
    color: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
}

.auth-feature-grid i {
    color: #20d6ff;
}

.profile-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
}

.profile-photo-wrap {
    margin: .5rem 0;
}

.profile-photo {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.14);
}

.profile-photo-placeholder {
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.04);
    color: var(--muted);
}

.project-cover {
    width: 100%;
    max-width: 320px;
    margin: 0 0 .9rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
}

.project-cover--small {
    max-width: 220px;
}

.project-cover img {
    display: block;
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    background: rgba(0, 0, 0, .18);
}

.project-cover--small img {
    max-height: 120px;
}

.function-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .55rem;
    margin: .3rem 0 1rem;
}

.function-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .65rem;
    border-radius: .65rem;
    border: 1px solid rgba(95, 120, 186, .5);
    background: rgba(255,255,255,.03);
    cursor: pointer;
}

.function-pill.readonly {
    cursor: default;
}

.function-pill input {
    width: auto;
    margin: 0;
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.file-picker {
    display: inline-flex;
    padding: .55rem .8rem;
    border-radius: .65rem;
    border: 1px solid rgba(32, 214, 255, .35);
    background: rgba(32, 214, 255, .12);
    color: #b8eeff;
    cursor: pointer;
    font-weight: 600;
}

.file-picker:hover {
    filter: brightness(1.08);
}

.stack-form label {
    display: block;
    font-size: .86rem;
    color: #b5c5e6;
    margin: .2rem 0;
}

input, select, textarea, button {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) var(--card-soft);
    margin: .25rem 0 .85rem;
    padding: .68rem .78rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
}

textarea { min-height: 120px; resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 7rem;
    text-decoration: none;
    border: 1px solid transparent;
    background: linear-gradient(145deg, var(--accent), var(--accent-strong));
    color: #06223a;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(32, 214, 255, .18), 0 8px 20px rgba(15, 81, 160, .38);
}

.btn:hover { filter: brightness(1.06); }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: rgba(255,255,255,.24);
}

.btn-danger {
    background: linear-gradient(145deg, #ff8a1f, #ff5a00);
    border-color: rgba(255, 154, 33, .5);
    color: #2e1300;
}

.btn-sm {
    min-width: 0;
    padding: .35rem .6rem;
    font-size: .8rem;
    margin-right: .35rem;
}

.inline-form {
    display: inline-block;
}

.actions-menu {
    display: inline-block;
    position: relative;
}

.actions-menu summary {
    list-style: none;
}

.actions-menu summary::-webkit-details-marker {
    display: none;
}

.actions-menu-panel {
    position: absolute;
    right: 0;
    z-index: 5;
    min-width: 130px;
    padding: .35rem;
    border-radius: .65rem;
    border: 1px solid rgba(255,255,255,.18);
    background: #142447;
    box-shadow: var(--shadow);
}

.actions-menu-panel .btn,
.actions-menu-panel .inline-form {
    display: block;
    width: 100%;
    margin: 0 0 .25rem;
}

.actions-menu-panel .inline-form:last-child,
.actions-menu-panel .btn:last-child {
    margin-bottom: 0;
}

.actions-row {
    margin-top: .5rem;
}

.actions-row .btn {
    margin-right: .4rem;
}

.collapsible-form {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

.is-hidden {
    display: none;
}

.divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    margin: .75rem 0;
}

.logout-form { margin: 0; }

.inline-option {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.inline-option input {
    width: auto;
    margin: 0;
}

.auth-login-card {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: clamp(1.2rem, 3vw, 2rem);
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(17, 24, 42, .82);
    backdrop-filter: blur(18px);
}

.auth-brand-badge--form {
    position: static;
    width: fit-content;
    margin-bottom: 1.25rem;
}

.auth-login-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .75rem;
}

.auth-login-head h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    letter-spacing: -.04em;
}

.auth-login-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: white;
    box-shadow: 0 14px 36px rgba(32, 214, 255, .24);
}

.auth-form {
    margin-top: 1.1rem;
}

.auth-field label {
    display: block;
    margin-bottom: .35rem;
    color: rgba(255,255,255,.82);
    font-weight: 700;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}

.auth-input-wrap input {
    padding-left: 3rem !important;
    min-height: 3.15rem;
    border-radius: 15px;
    background: rgba(255,255,255,.07);
}

.auth-submit {
    width: 100%;
    justify-content: center;
    min-height: 3.05rem;
    border-radius: 15px;
    font-weight: 900;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 197, 167, .28), transparent 65%);
    pointer-events: none;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.kpi {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    padding: .75rem;
    background: rgba(255, 255, 255, .03);
}

.kpi span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
}

.kpi strong {
    display: block;
    margin-top: .3rem;
    font: 700 1.45rem/1 "Space Grotesk", sans-serif;
}

.dashboard-vote-alert {
    margin-bottom: .8rem;
    border: 1px solid rgba(255, 183, 73, .62);
    background:
        radial-gradient(260px 120px at 100% 0%, rgba(255, 189, 97, .22), transparent 60%),
        linear-gradient(160deg, rgba(255, 176, 63, .16), rgba(255, 176, 63, .06));
    box-shadow: 0 0 0 2px rgba(255, 183, 73, .18), 0 14px 26px rgba(0, 0, 0, .34);
}

.dashboard-vote-alert h3 {
    margin-bottom: .35rem;
}

.dashboard-vote-alert .btn {
    margin-top: .4rem;
}

.kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.kpi-link:hover strong,
.kpi-link:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.table-filter {
    margin-top: .25rem;
}

.reveal {
    animation: riseIn .45s ease both;
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.error {
    background: rgba(255, 111, 125, .14);
    border: 1px solid rgba(255, 111, 125, .35);
    color: #ffc0c7;
    border-radius: .65rem;
    padding: .6rem .75rem;
}

.events-calendar-head {
    margin: .7rem 0 1rem;
}

.events-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

.calendar-dow,
.calendar-day {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .65rem;
    background: rgba(255,255,255,.03);
    min-height: 84px;
    padding: .4rem;
}

.calendar-dow {
    min-height: 0;
    text-align: center;
    color: #b5c5e6;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.calendar-day.is-out {
    opacity: .45;
}

.calendar-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(32, 214, 255, .6);
}

.calendar-day-num {
    font: 700 .9rem/1 "Space Grotesk", sans-serif;
    margin-bottom: .3rem;
}

.calendar-dot-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.calendar-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    display: inline-block;
}

.calendar-dot.status-confirmado { background: #33d17a; }
.calendar-dot.status-programado { background: #20d6ff; }
.calendar-dot.status-cancelado { background: #ff6b6b; }
.calendar-dot.status-pendiente { background: #ffc857; }
.calendar-dot.is-majority-confirmed { background: #33d17a; box-shadow: 0 0 0 2px rgba(51,209,122,.25); }

.event-row-confirmed {
    background: linear-gradient(90deg, rgba(51,209,122,.14), rgba(51,209,122,.05));
}

.event-majority-pill {
    background: rgba(51,209,122,.2);
    border-color: rgba(51,209,122,.45);
    color: #baf2d2;
}

.events-day-detail {
    margin-top: .85rem;
}

.day-event-item {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .6rem 0;
}

.day-event-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.day-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.calendar-day-btn {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
}

.calendar-day-btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: .45rem;
}

@media (max-width: 760px) {
    .topbar {
        gap: .42rem;
        padding: .42rem .52rem;
    }

    .brand {
        gap: .45rem;
    }

    .brand-mark {
        width: 1.72rem;
        height: 1.72rem;
        border-radius: .5rem;
        font-size: .7rem;
    }

    .brand-text { font-size: .84rem; }

    .main-nav {
        width: 100%;
        order: 3;
        gap: .24rem;
        max-height: 18vh;
        overflow: auto;
    }

    .main-nav a {
        flex: 1 1 auto;
        text-align: center;
        font-size: .79rem;
        padding: .34rem .42rem;
    }

    .main-nav a i {
        margin-right: .2rem;
    }

    .user-chip {
        padding: .16rem .24rem;
        border-radius: .5rem;
    }

    .user-chip-photo {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    .logout-form .btn {
        min-width: 0;
        padding: .32rem .5rem;
        font-size: .76rem;
    }

    .container { margin-top: 1rem; }
    .card { padding: .9rem; }

    .lyrics-full {
        font-size: 1.08rem;
        line-height: 1.85;
        padding: .85rem;
    }

    .lyrics-modal {
        padding: .22rem;
    }

    .lyrics-modal__panel {
        max-height: 98vh;
        border-radius: .65rem;
        padding: .34rem;
    }

    .lyrics-modal__panel > .row-between:first-child {
        gap: .45rem;
        align-items: center;
    }

    .lyrics-modal__panel > .row-between:first-child strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
    }

    .lyrics-modal__panel > .row-between:first-child .btn {
        padding: .36rem .55rem;
        font-size: .78rem;
    }

    .lyrics-modal__nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .25rem;
        margin-top: .28rem;
        padding: .28rem;
        border-radius: .55rem;
    }

    .lyrics-modal__nav .btn,
    .lyrics-modal__nav .btn.is-disabled {
        min-width: 0;
        padding: .3rem .42rem;
        font-size: 0;
    }

    .lyrics-modal__nav .btn i,
    .lyrics-modal__nav .btn.is-disabled i {
        font-size: .85rem;
        margin: 0;
    }

    .lyrics-modal__nav-title {
        grid-column: auto;
        grid-row: auto;
        margin-bottom: 0;
        align-self: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .78rem;
    }

    .lyrics-modal__tools {
        float: left;
        width: calc(38% - .15rem);
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: .16rem;
        margin-top: .24rem;
    }

    .lyrics-modal__tools--full {
        float: none;
        width: 100%;
    }

    .lyrics-modal__tools .muted {
        display: none;
    }

    .lyrics-modal__tools .btn {
        padding: .28rem .42rem;
        min-width: 2rem;
        font-size: .78rem;
    }

    .lyrics-modal__font-size {
        min-width: 2.15rem;
        font-size: .75rem;
    }

    .lyrics-modal__jump {
        float: right;
        width: calc(62% - .15rem);
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: .24rem;
    }

    .lyrics-modal__jump label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .lyrics-modal__jump select {
        min-height: 1.95rem;
        padding: .26rem .42rem;
        font-size: .78rem;
    }

    .lyrics-modal__content {
        clear: both;
        margin-top: .32rem;
        font-size: calc(1.25rem * var(--lyrics-font-scale, 1));
        line-height: 2.05;
    }

    .lyrics-modal__shortcuts {
        display: none;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: .85rem;
    }

    .auth-side {
        min-height: 300px;
        padding: 1.25rem;
        border-radius: 22px;
    }

    .auth-side::before {
        inset: .65rem;
        border-radius: 17px;
    }

    .auth-brand-badge {
        top: .85rem;
        left: .85rem;
        padding: .42rem .6rem;
        font-size: .82rem;
    }

    .auth-side h2 {
        font-size: clamp(2rem, 12vw, 3.15rem);
    }

    .auth-lead {
        font-size: .95rem;
    }

    .auth-feature-grid {
        grid-template-columns: 1fr;
        gap: .45rem;
        margin-top: .9rem;
    }

    .auth-feature-grid span {
        padding: .52rem .62rem;
        border-radius: 12px;
        font-size: .88rem;
    }

    .auth-login-card {
        padding: 1rem;
        border-radius: 22px;
    }

    .user-chip-meta {
        display: none;
    }

    .table-wrap {
        overflow: visible;
    }

    table {
        min-width: 0;
        border: 0;
    }

    thead {
        display: none;
    }

    tbody, tr, td {
        display: block;
        width: 100%;
    }

    tr {
        border: 1px solid rgba(255,255,255,.1);
        border-radius: .8rem;
        margin-bottom: .7rem;
        padding: .55rem .65rem;
        background: rgba(255,255,255,.02);
    }

    td {
        border: 0;
        padding: .45rem 0;
    }

    td::before {
        content: attr(data-label);
        display: block;
        color: #9db0d6;
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .2rem;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .events-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-dow {
        display: none;
    }

    .container {
        margin: .7rem auto 1.2rem;
        padding: 0 .55rem;
    }

    .card {
        padding: .72rem;
        margin-bottom: .62rem;
        border-radius: .82rem;
    }

    h2 {
        font-size: 1rem;
        margin-bottom: .45rem;
    }

    h3 {
        font-size: .95rem;
        margin: .45rem 0 .35rem;
    }

    p,
    .muted,
    td,
    th,
    label {
        font-size: .84rem;
    }

    input,
    select,
    textarea,
    button {
        margin: .15rem 0 .5rem;
        padding: .5rem .6rem;
        border-radius: .58rem;
    }

    textarea {
        min-height: 82px;
    }

    .btn-sm {
        padding: .26rem .48rem;
        font-size: .74rem;
    }

    .item {
        padding: .45rem 0;
    }

    .author-meta {
        margin-top: .2rem;
        gap: .3rem;
        font-size: .76rem;
    }

    .kpi strong {
        font-size: 1.12rem;
    }
}

/* Mobile nav hotfix: compact single-row top navigation */
@media (max-width: 760px) {
    .topbar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: .3rem .4rem !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        gap: .2rem !important;
        overflow: visible !important;
    }

    .brand {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .brand-text {
        font-size: .72rem !important;
    }

    .topbar-actions {
        justify-content: flex-end !important;
        align-items: center !important;
        width: auto !important;
        margin-left: auto !important;
        margin-top: 0 !important;
        gap: .22rem !important;
    }

    .logout-form {
        display: inline-flex !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .logout-form .btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        font-size: .68rem !important;
        line-height: 1 !important;
        border-radius: .45rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .logout-form .btn span {
        display: none !important;
    }

    .logout-form .btn i {
        margin-right: 0 !important;
        font-size: .8rem !important;
    }

    .user-chip {
        display: inline-flex !important;
        margin-left: 0 !important;
        padding: 0 !important;
        border-radius: .45rem !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: none !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .user-chip-meta {
        display: none !important;
    }

    .user-chip-photo {
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
    }

    .main-nav {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .2rem !important;
        padding: .15rem 0 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        min-width: 72px !important;
        padding: .34rem .4rem !important;
        border-radius: .6rem !important;
        font-size: .66rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .12rem !important;
    }

    .main-nav a i {
        margin-right: 0 !important;
        display: block !important;
        font-size: .82rem !important;
        line-height: 1 !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    header.topbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        clip-path: none !important;
    }

    header.topbar .main-nav {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: .34rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    header.topbar .main-nav a {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 72px !important;
        box-sizing: border-box !important;
    }

    /* Recover breathing room on mobile lists */
    .table-wrap {
        padding: .2rem .1rem !important;
    }

    table {
        border-spacing: 0 .32rem !important;
    }

    th,
    td {
        padding: .52rem .5rem !important;
    }

    .setlist-compact-table td {
        padding-top: .58rem !important;
        padding-bottom: .58rem !important;
    }

    .setlist-compact-table td[data-label="Tema"] {
        min-width: 160px;
    }

    .setlist-compact-table .author-meta {
        margin-top: .3rem !important;
    }
}

/* Final design-system override */
html[data-theme="dark"] {
    --bg-0: #0f1117;
    --bg-1: #151823;
    --card: #181a21;
    --card-soft: #1d212c;
    --line: rgba(255,255,255,.10);
    --text: #f9fafb;
    --muted: #9ca3af;
    --accent: #5b5bf7;
    --accent-strong: #8b5cf6;
    --focus: #5b5bf7;
    --danger: #ef4444;
    color-scheme: dark;
}

html[data-theme="luminoso"] {
    --bg-0: #fafafc;
    --bg-1: #ffffff;
    --card: #ffffff;
    --card-soft: #f8fafc;
    --line: rgba(17,24,39,.10);
    --text: #111827;
    --muted: #6b7280;
    --accent: #5b5bf7;
    --accent-strong: #8b5cf6;
    --focus: #5b5bf7;
    --danger: #ef4444;
    color-scheme: light;
}

body {
    margin: 0 !important;
    min-height: 100vh;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--text) !important;
    background:
        radial-gradient(900px 480px at 10% -10%, rgba(91, 91, 247, .14), transparent 58%),
        radial-gradient(700px 420px at 90% -12%, rgba(139, 92, 246, .10), transparent 58%),
        var(--bg-0) !important;
}

body::before { content: none !important; }

.container {
    max-width: 1280px !important;
    margin: 16px auto 32px !important;
    padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important;
}

.topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--bg-1) 90%, transparent) !important;
    backdrop-filter: blur(16px);
}

.brand-mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
}

.brand-text {
    font-family: "Inter", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

.brand { flex: 0 0 auto; }

.main-nav { display: none !important; }

.topbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.user-chip,
.card,
.kpi,
.events-day-detail,
.board-item,
.table-wrap,
.actions-menu-panel {
    border-radius: 16px !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}

.card,
.kpi,
.events-day-detail,
.board-item { padding: 16px !important; }

.grid,
.cards-grid,
.function-grid,
.kpi-grid,
.profile-grid,
.auth-shell { gap: 16px !important; }

h1 { font-size: 32px !important; font-weight: 700 !important; line-height: 1.15 !important; }
h2 { font-size: 24px !important; font-weight: 700 !important; line-height: 1.2 !important; }
h3 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; }

p, li, label, input, select, textarea, button, small { font-size: 15px !important; }

.stack-form label,
.muted,
.eyebrow,
.auth-kicker,
.helper,
.pill { color: var(--muted) !important; }

.btn,
.btn-ghost,
.btn-danger,
.file-picker,
.main-nav a,
.bottom-nav a {
    min-height: 48px !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
}

.main-nav a,
.user-chip,
.logout-form .btn {
    box-sizing: border-box !important;
}

.main-nav a {
    white-space: normal !important;
    flex: 0 1 auto !important;
    gap: 4px !important;
    line-height: 1.15 !important;
}

.main-nav a i {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
}

.btn,
.btn-danger {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

input,
select,
textarea {
    min-height: 48px !important;
    border-radius: 12px !important;
    background: var(--card-soft) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
}

textarea { min-height: 132px !important; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px !important;
}

.file-picker,
.pill,
.function-pill,
.inline-option,
.project-cover,
.profile-photo,
.profile-photo-placeholder,
.avatar-xs,
.user-chip-photo {
    border-radius: 12px !important;
    border: 1px solid var(--line) !important;
}

.project-cover {
    overflow: hidden;
    background: var(--card-soft) !important;
}

.project-cover img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: var(--card-soft) !important;
}

.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    backdrop-filter: blur(18px);
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px !important;
    text-decoration: none;
    color: var(--muted) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    min-height: 52px !important;
    font-size: 12px !important;
}

.bottom-nav a.is-active {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--accent) 16%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
}

@media (max-width: 760px) {
    .main-nav { display: none !important; }
    .topbar { padding: 12px 16px !important; }
}

@media (min-width: 761px) {
    .main-nav {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        order: 3;
    }

    .main-nav a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        text-align: center !important;
        padding: 10px 8px !important;
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
        color: var(--muted) !important;
    }

    .main-nav a.is-active {
        color: var(--text) !important;
        background: color-mix(in srgb, var(--accent) 12%, var(--card)) !important;
        border-color: color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
    }

    .topbar { align-items: center !important; }
    .topbar-actions { width: auto !important; flex: 0 0 auto !important; order: 2; }
    .logout-form { width: auto; }
    .logout-form .btn { width: auto; }
}

/* Final mobile/desktop nav override */
@media (max-width: 760px) {
    .topbar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .25rem !important;
    }

    .brand {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    .topbar-actions {
        width: auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: .25rem !important;
    }

    .brand-text {
        font-size: .84rem !important;
    }

    .user-chip-meta {
        display: none !important;
    }

    .user-chip {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .user-chip-photo {
        width: 30px !important;
        height: 30px !important;
    }

    .main-nav,
    header.topbar .main-nav {
        order: 2 !important;
        flex: 0 0 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: start !important;
        align-items: center !important;
        gap: .4rem !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: .15rem .4rem .25rem !important;
        margin: 0 !important;
        scroll-snap-type: x proximity;
        scroll-padding-inline: .4rem;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar,
    header.topbar .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a,
    header.topbar .main-nav a {
        flex: 0 0 90px !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        scroll-snap-align: start;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: .3rem .35rem !important;
        min-height: 42px !important;
    }
}

@media (min-width: 761px) {
    .bottom-nav {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .container {
        padding: 0 12px calc(92px + env(safe-area-inset-bottom)) !important;
        margin-top: 12px !important;
        margin-bottom: 22px !important;
    }

    .card,
    .kpi,
    .events-day-detail,
    .board-item {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .dashboard-grid-compact,
    .profile-grid,
    .grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .row-between,
    .actions-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }

    .actions-row .btn,
    .actions-row .inline-form {
        width: 100% !important;
    }

    .table-filter {
        width: 100% !important;
        margin-top: .35rem !important;
    }

    .table-wrap {
        margin-top: .55rem !important;
        overflow: visible !important;
        border-radius: 14px !important;
    }

    table {
        width: 100% !important;
        min-width: 0 !important;
        border-spacing: 0 !important;
    }

    thead {
        display: none !important;
    }

    tbody,
    tr,
    td {
        display: block !important;
        width: 100% !important;
    }

    tbody tr {
        margin-bottom: .75rem !important;
        padding: .75rem !important;
        border-radius: 14px !important;
        border: 1px solid var(--line) !important;
        background: var(--card) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
    }

    td {
        padding: .42rem 0 !important;
        border: 0 !important;
        vertical-align: top !important;
    }

    td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .18rem;
        font-size: .76rem;
        font-weight: 800;
        letter-spacing: .01em;
        color: var(--muted);
        text-transform: uppercase;
    }

    td > .actions-row,
    td > .inline-form,
    td > a,
    td > p,
    td > div,
    td > span,
    td > strong {
        width: 100%;
    }

    td .actions-row {
        align-items: stretch !important;
    }

    td .actions-row .btn,
    td .actions-row .inline-form {
        width: 100% !important;
    }

    .author-meta {
        gap: .45rem !important;
    }

    .event-voters-list {
        gap: .35rem !important;
    }

    .events-calendar-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .events-calendar-head .btn {
        width: 100% !important;
    }

    .lyrics-view-card .lyrics-full {
        max-height: 52vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .arrangement-grid,
    .cards-grid,
    .function-grid {
        grid-template-columns: 1fr !important;
    }

    .instrument-editor,
    .instrument-attachment-item,
    .song-document-item,
    .arrangement-block {
        border-radius: 14px !important;
        padding: .85rem !important;
    }

    .instrument-editor .row-between,
    .song-document-item .row-between {
        gap: .4rem !important;
    }

    .instrument-attachments-list {
        gap: .5rem !important;
    }

    .projects-manage-card .row-between,
    .projects-select-card .row-between {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .projects-select-card .btn,
    .projects-manage-card .btn,
    .projects-manage-card .function-pill,
    .projects-select-card .function-pill {
        width: 100% !important;
    }
}

/* Final visual polish */
:where(body) {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4) {
    margin-top: 0;
    margin-bottom: .6rem;
}

:where(p, ul, ol, figure) {
    margin-top: 0;
    margin-bottom: .75rem;
}

:where(.card, .board-item, .kpi, .events-day-detail) {
    overflow: hidden;
}

:where(.card h2, .card h3, .board-item h3, .kpi strong) {
    letter-spacing: -.02em;
}

:where(.eyebrow) {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

:where(.muted) {
    color: var(--muted) !important;
    opacity: .95;
}

:where(.pill) {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    line-height: 1.1;
}

:where(.actions-row) {
    gap: .5rem;
}

:where(.row-between) {
    gap: .75rem;
}

:where(.table-wrap) {
    border-radius: 16px;
}

:where(.table-filter) {
    min-height: 48px !important;
}

:where(.kpi-grid) {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

:where(.cards-grid) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

:where(.dashboard-grid-compact) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

:where(.button-row, .actions-row .btn, .actions-row .inline-form) {
    align-items: center;
}

/* Compact mobile density while preserving accessible touch targets. */
@media (max-width: 760px) {
    :root {
        --touch-size: 46px;
    }

    .topbar {
        padding: .55rem .75rem !important;
        margin-bottom: .4rem !important;
        gap: .25rem !important;
    }

    .brand {
        min-height: 44px !important;
    }

    .brand-mark {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .brand-text {
        font-size: .8rem !important;
    }

    .user-chip {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .user-chip-photo {
        width: 30px !important;
        height: 30px !important;
    }

    .main-nav,
    header.topbar .main-nav {
        gap: .3rem !important;
        padding: .1rem .25rem .2rem !important;
    }

    .main-nav a,
    header.topbar .main-nav a {
        min-height: 44px !important;
        padding: .3rem .35rem !important;
    }

    .container {
        padding: 0 10px calc(82px + env(safe-area-inset-bottom)) !important;
        margin-top: 8px !important;
        margin-bottom: 14px !important;
    }

    .card,
    .kpi,
    .events-day-detail,
    .board-item {
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .card,
    .card + .card,
    .stack > .card {
        margin-bottom: .55rem !important;
        margin-top: .55rem !important;
    }

    .grid,
    .cards-grid,
    .function-grid,
    .kpi-grid,
    .profile-grid,
    .auth-shell {
        gap: .6rem !important;
    }

    .row-between,
    .actions-row {
        gap: .4rem !important;
    }

    h1 {
        font-size: 1.7rem !important;
        margin-bottom: .45rem !important;
    }

    h2 {
        font-size: 1.35rem !important;
        margin-bottom: .45rem !important;
    }

    h3 {
        font-size: 1.08rem !important;
        margin-bottom: .4rem !important;
    }

    p,
    ul,
    ol,
    figure {
        margin-bottom: .55rem !important;
    }

    input,
    select,
    textarea {
        min-height: 46px !important;
        padding: .68rem .8rem !important;
    }

    .btn,
    .btn-sm,
    .btn-ghost,
    .btn-danger,
    .file-picker,
    .logout-form .btn {
        min-height: 46px !important;
        padding: .65rem .85rem !important;
    }

    .logout-form .btn {
        width: 46px !important;
        min-width: 46px !important;
    }

    .bottom-nav {
        gap: 3px !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    }

    .bottom-nav a {
        min-height: 48px !important;
        padding: .42rem .2rem !important;
    }
}

/* Secondary actions: keep destructive and editing actions out of the primary flow. */
.actions-menu summary {
    cursor: pointer;
    user-select: none;
}

.actions-menu[open] summary {
    background: color-mix(in srgb, var(--accent) 14%, var(--card)) !important;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
}

.actions-menu-panel {
    min-width: 150px !important;
}

.actions-menu-panel .btn {
    text-align: center;
}

@media (max-width: 760px) {
    .actions-menu {
        width: 100%;
    }

    .actions-menu summary {
        width: 100%;
    }

    .actions-menu-panel {
        position: static !important;
        width: 100%;
        margin-top: .35rem;
        box-shadow: none !important;
    }
}

/* Dashboard focus layout */
.dashboard-shell {
    display: grid;
    gap: 1rem;
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: 1rem;
    align-items: stretch;
    overflow: hidden;
}

.dashboard-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.dashboard-hero h1 {
    margin-bottom: .45rem;
    font-size: clamp(2rem, 5vw, 3.65rem) !important;
    line-height: .98;
}

.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .7rem;
}

.dashboard-hero-card {
    min-height: 190px;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    background:
        radial-gradient(180px 120px at 80% 10%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 64%),
        color-mix(in srgb, var(--card-soft) 82%, #000 18%);
}

.dashboard-hero-card img {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    display: block;
}

.dashboard-hero-placeholder {
    height: 100%;
    min-height: 190px;
    display: grid;
    place-items: center;
    font-size: 4rem;
    color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

.dashboard-focus-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr 1fr;
    gap: 1rem;
}

.dashboard-next-card,
.dashboard-tasks-card,
.dashboard-setlist-card {
    min-height: 100%;
}

.dashboard-next-card h2 {
    margin-bottom: .35rem;
}

.dashboard-countdown {
    display: inline-flex;
    width: fit-content;
    margin-bottom: .55rem;
    padding: .32rem .65rem;
    border-radius: 999px;
    font-weight: 800;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 22%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
}

.dashboard-task-list {
    display: grid;
    gap: .5rem;
    margin-bottom: .65rem;
}

.dashboard-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .75rem;
    border-radius: .85rem;
    color: var(--text);
    text-decoration: none;
    background: color-mix(in srgb, var(--card-soft) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.dashboard-task-item strong {
    min-width: 2.1rem;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1;
}

.dashboard-setlist-preview {
    list-style: none;
    display: grid;
    gap: .45rem;
    margin: .45rem 0 .8rem;
    padding: 0;
}

.dashboard-setlist-preview li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .15rem .55rem;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.dashboard-setlist-preview li:last-child {
    border-bottom: 0;
}

.dashboard-setlist-preview li > span {
    grid-row: span 2;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .65rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent) 18%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}

.dashboard-setlist-preview strong,
.dashboard-setlist-preview small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-setlist-preview small {
    color: var(--muted);
}

@media (max-width: 980px) {
    .dashboard-hero,
    .dashboard-focus-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-card {
        min-height: 150px;
    }

    .dashboard-hero-card img,
    .dashboard-hero-placeholder {
        min-height: 150px;
    }
}

@media (max-width: 760px) {
    .dashboard-shell {
        gap: .6rem;
    }

    .dashboard-hero {
        gap: .7rem;
    }

    .dashboard-hero h1 {
        font-size: 1.9rem !important;
    }

    .dashboard-quick-actions {
        gap: .4rem;
    }

    .dashboard-quick-actions .btn {
        width: 100%;
    }

    .dashboard-hero-card {
        min-height: 120px;
    }

    .dashboard-hero-card img,
    .dashboard-hero-placeholder {
        min-height: 120px;
    }

    .dashboard-task-item {
        min-height: 46px;
        padding: .58rem .65rem;
    }

    .dashboard-setlist-preview {
        gap: .25rem;
        margin-bottom: .6rem;
    }
}

/* Mobile-first data cards for dense tables. */
.mobile-card-list {
    display: none;
}

.mobile-data-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
        var(--card);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    padding: .75rem;
}

.mobile-data-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    margin-bottom: .65rem;
}

.setlist-song-card__head {
    grid-template-columns: minmax(0, 1fr);
}

.setlist-song-card__head .setlist-drag-handle {
    align-self: start;
    margin-left: 0;
}

.setlist-song-card__head:has(.setlist-drag-handle) {
    grid-template-columns: auto minmax(0, 1fr);
}

.mobile-data-card__head h3 {
    margin: 0 0 .12rem !important;
    font-size: 1rem !important;
}

.mobile-data-card__head .muted {
    margin-bottom: 0 !important;
}

.mobile-data-card__index,
.mobile-data-card__icon,
.mobile-data-card__date {
    width: 2.55rem;
    min-height: 2.55rem;
    display: grid;
    place-items: center;
    border-radius: .8rem;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 18%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    font-weight: 800;
}

.mobile-data-card__date {
    gap: .08rem;
    text-align: center;
    line-height: 1.05;
}

.mobile-data-card__date small {
    font-size: .68rem !important;
    color: var(--muted);
}

.mobile-card-pills,
.mobile-card-actions,
.mobile-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.mobile-card-pills {
    margin-bottom: .6rem;
}

.mobile-card-actions {
    margin-top: .65rem;
}

.mobile-card-actions .btn,
.mobile-card-actions .inline-form {
    flex: 1 1 auto;
}

.mobile-card-actions .btn {
    width: 100%;
}

.mobile-card-footer {
    justify-content: space-between;
    margin-top: .65rem;
}

.mobile-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin: .55rem 0;
}

.document-mobile-card .mobile-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-meta-grid span {
    min-width: 0;
    padding: .48rem .55rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--card-soft) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.mobile-meta-grid small,
.mobile-meta-grid strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-meta-grid small {
    margin-bottom: .15rem;
    color: var(--muted);
    font-size: .7rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.event-mobile-card.is-confirmed {
    border-color: color-mix(in srgb, #33d17a 44%, var(--line));
}

.event-response-actions .inline-form {
    flex: 1 1 30%;
}

@media (max-width: 760px) {
    .desktop-table-wrap {
        display: none !important;
    }

    .desktop-table-filter {
        display: none !important;
    }

    .mobile-card-list {
        display: grid;
        gap: .6rem;
        margin-top: .6rem;
    }

    .mobile-data-card {
        padding: .68rem !important;
    }

    .mobile-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
    }

    .document-mobile-card .mobile-meta-grid {
        grid-template-columns: 1fr;
    }

    .mobile-card-footer {
        align-items: stretch;
    }

    .mobile-card-footer .author-meta {
        flex: 1 1 100%;
    }
}

/* Final typography and rhythm pass. */
:root {
    --font-body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-title: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
}

body {
    font-family: var(--font-body) !important;
    font-size: 16px;
    line-height: 1.45 !important;
}

h1,
h2,
h3,
h4,
.brand-text {
    font-family: var(--font-title) !important;
    letter-spacing: -.035em !important;
}

h1 {
    font-size: clamp(1.85rem, 4.5vw, 3.2rem) !important;
    line-height: 1 !important;
    margin-bottom: .55rem !important;
}

h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
    line-height: 1.08 !important;
    margin-bottom: .55rem !important;
}

h3 {
    font-size: 1.05rem !important;
    line-height: 1.12 !important;
    margin-bottom: .45rem !important;
}

p,
ul,
ol,
figure {
    margin-top: 0 !important;
    margin-bottom: .62rem !important;
}

.muted,
.helper,
.author-meta,
.event-majority-meta,
.file-selection-status,
small {
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%) !important;
    font-size: .86rem !important;
    line-height: 1.35 !important;
}

.card,
.board-item,
.kpi,
.events-day-detail,
.mobile-data-card {
    border-color: color-mix(in srgb, var(--line) 74%, transparent) !important;
}

.card > .row-between:first-child,
.card-nested > h3:first-child,
.mobile-data-card__head {
    padding-bottom: .45rem;
    margin-bottom: .65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.pill,
.event-majority-pill,
.function-pill,
.function-pill.readonly {
    min-height: 1.65rem !important;
    padding: .22rem .52rem !important;
    font-size: .73rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: .015em;
}

.eyebrow {
    margin-bottom: .35rem !important;
    font-size: .68rem !important;
    letter-spacing: .11em !important;
    color: color-mix(in srgb, var(--accent) 55%, var(--muted)) !important;
}

.item {
    padding: .52rem 0 !important;
}

.item p:last-child,
.card p:last-child,
.mobile-data-card p:last-child {
    margin-bottom: 0 !important;
}

.btn,
.btn-sm,
.btn-ghost,
.btn-danger,
.file-picker,
.bottom-nav a,
.main-nav a {
    letter-spacing: -.01em;
}

.btn-sm {
    font-size: .78rem !important;
}

.kpi span,
.dashboard-task-item span,
.mobile-meta-grid small {
    font-size: .72rem !important;
    text-transform: uppercase;
    letter-spacing: .055em;
    font-weight: 800;
}

.kpi strong,
.dashboard-task-item strong {
    font-family: var(--font-title) !important;
    letter-spacing: -.04em;
}

@media (max-width: 760px) {
    body {
        line-height: 1.4 !important;
    }

    h1 {
        font-size: 1.75rem !important;
        margin-bottom: .42rem !important;
    }

    h2 {
        font-size: 1.18rem !important;
        margin-bottom: .42rem !important;
    }

    h3 {
        font-size: .98rem !important;
        margin-bottom: .35rem !important;
    }

    p,
    ul,
    ol,
    figure {
        margin-bottom: .48rem !important;
    }

    .muted,
    .helper,
    .author-meta,
    .event-majority-meta,
    .file-selection-status,
    small {
        font-size: .8rem !important;
    }

    .card > .row-between:first-child,
    .card-nested > h3:first-child,
    .mobile-data-card__head {
        padding-bottom: .35rem;
        margin-bottom: .5rem;
    }

    .pill,
    .event-majority-pill,
    .function-pill,
    .function-pill.readonly {
        min-height: 1.5rem !important;
        padding: .18rem .45rem !important;
        font-size: .68rem !important;
    }
}

/* Clear semantic states. */
.status-pill {
    border-color: color-mix(in srgb, var(--state-color, var(--accent)) 48%, var(--line)) !important;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--state-color, var(--accent)) 28%, transparent),
            color-mix(in srgb, var(--state-color, var(--accent)) 10%, transparent)) !important;
    color: color-mix(in srgb, var(--state-color, var(--accent)) 28%, var(--text)) !important;
}

.status-confirmado,
.status-vigente,
.status-aprobada,
.status-lista,
.status-activo,
.status-voy {
    --state-color: #33d17a;
}

.status-programado,
.status-propuesta,
.status-fijado,
.status-referencia {
    --state-color: #7aa2ff;
}

.status-pendiente,
.status-en_revision,
.status-en-revision,
.status-borrador,
.status-candidato {
    --state-color: #ffc857;
}

.status-cancelado,
.status-descartada,
.status-archivado,
.status-inactivo,
.status-urgente,
.status-no_voy,
.status-no-voy {
    --state-color: #ff6b7a;
}

.event-mobile-card.is-confirmed,
.event-row-confirmed {
    position: relative;
}

.event-mobile-card.is-confirmed::before,
.event-row-confirmed td:first-child::before {
    content: "";
    display: block;
    width: 4px;
    border-radius: 999px;
    background: #33d17a;
}

.event-mobile-card.is-confirmed::before {
    position: absolute;
    inset: .7rem auto .7rem .35rem;
}

.event-mobile-card.is-confirmed {
    padding-left: 1rem !important;
}

.event-row-confirmed td:first-child {
    position: relative;
    padding-left: 1rem !important;
}

.event-row-confirmed td:first-child::before {
    position: absolute;
    left: .35rem;
    top: .65rem;
    bottom: .65rem;
}

.event-voter-badge.is-voy {
    background: color-mix(in srgb, #33d17a 20%, var(--card-soft));
}

.event-voter-badge.is-no-voy {
    background: color-mix(in srgb, #ff6b7a 18%, var(--card-soft));
}

.event-voter-badge.is-pendiente {
    background: color-mix(in srgb, #ffc857 20%, var(--card-soft));
}

.event-voter-badge,
.event-voters-more {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: .68rem !important;
}

.event-voters-more {
    width: auto !important;
    padding: 0 .45rem !important;
}

.event-voter-initials {
    font-size: .68rem !important;
}

.event-voters-list {
    gap: .28rem !important;
}

#events-table .avatar-xs,
.events-mobile-list .avatar-xs,
.event-mobile-card .avatar-xs {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 8px !important;
}

#events-table .avatar-xs img,
.events-mobile-list .avatar-xs img,
.event-mobile-card .avatar-xs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#events-table .author-meta,
.events-mobile-list .author-meta,
.event-mobile-card .author-meta {
    gap: .35rem !important;
    font-size: .78rem !important;
}

.event-majority-fill.is-confirmed,
.event-majority-pill {
    --state-color: #33d17a;
}

.document-mobile-card:has(.status-archivado) {
    opacity: .78;
}

.document-mobile-card:has(.status-vigente),
.board-item:has(.status-aprobada) {
    border-color: color-mix(in srgb, #33d17a 34%, var(--line)) !important;
}

.board-item:has(.status-descartada) {
    opacity: .78;
}

@media (max-width: 760px) {
    .event-row-confirmed td:first-child::before {
        display: none;
    }
}

/* Rockero theme final override. */
html[data-theme="rockero"] {
    --bg-0: #080609;
    --bg-1: #120d13;
    --bg-2: #1a0f19;
    --card: #171019;
    --card-soft: #20151f;
    --line: rgba(255, 89, 122, .20);
    --text: #fff1f4;
    --muted: #c9a7b1;
    --accent: #ff315f;
    --accent-strong: #ff7a18;
    --focus: #ff4f7d;
    --danger: #ff446f;
    color-scheme: dark;
}

html[data-theme="rockero"] body {
    background:
        radial-gradient(900px 480px at 12% -8%, rgba(255, 49, 95, .20), transparent 58%),
        radial-gradient(720px 420px at 88% -10%, rgba(255, 122, 24, .14), transparent 58%),
        radial-gradient(1000px 560px at 50% 120%, rgba(255, 255, 255, .04), transparent 62%),
        linear-gradient(165deg, #080609 0%, #120d13 48%, #1a0f19 100%) !important;
}

html[data-theme="rockero"] .topbar,
html[data-theme="rockero"] .card,
html[data-theme="rockero"] .mobile-data-card,
html[data-theme="rockero"] .kpi,
html[data-theme="rockero"] .board-item,
html[data-theme="rockero"] .events-day-detail {
    border-color: rgba(255, 89, 122, .22) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 28%),
        linear-gradient(155deg, rgba(255, 49, 95, .12), rgba(255, 122, 24, .06) 34%, rgba(16, 8, 14, .94) 100%) !important;
}

html[data-theme="rockero"] .btn {
    background: linear-gradient(145deg, #ff315f, #ff7a18) !important;
    color: #fff7f8 !important;
}

html[data-theme="rockero"] .btn-ghost,
html[data-theme="rockero"] .table-wrap,
html[data-theme="rockero"] tbody td,
html[data-theme="rockero"] input,
html[data-theme="rockero"] select,
html[data-theme="rockero"] textarea {
    background: color-mix(in srgb, var(--card-soft) 88%, #000 12%) !important;
    border-color: rgba(255, 89, 122, .22) !important;
    color: var(--text) !important;
}

/* Final hard cap for event user photos. */
#events-table .avatar-xs,
#events-table .avatar-xs img,
#events-table .event-voter-badge,
#events-table .event-voter-badge img,
.events-mobile-list .avatar-xs,
.events-mobile-list .avatar-xs img,
.events-mobile-list .event-voter-badge,
.events-mobile-list .event-voter-badge img,
.event-mobile-card .avatar-xs,
.event-mobile-card .avatar-xs img,
.event-mobile-card .event-voter-badge,
.event-mobile-card .event-voter-badge img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    flex: 0 0 24px !important;
}

#events-table .event-voters-more,
.events-mobile-list .event-voters-more,
.event-mobile-card .event-voters-more {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    padding: 0 .4rem !important;
    font-size: .65rem !important;
}

#events-table .author-meta,
.events-mobile-list .author-meta,
.event-mobile-card .author-meta,
#events-table .event-voters-list,
.events-mobile-list .event-voters-list,
.event-mobile-card .event-voters-list {
    gap: .3rem !important;
    align-items: center !important;
}

/* Musical identity pass. */
.brand {
    min-width: 0;
}

.brand-mark {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
        0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.brand-mark i {
    font-size: 1rem;
}

.brand-copy {
    display: grid;
    min-width: 0;
    gap: .08rem;
    line-height: 1.02;
}

.brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-kicker {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-hero {
    position: relative;
    isolation: isolate;
}

.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(360px 220px at 8% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
        linear-gradient(110deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%);
    pointer-events: none;
}

.dashboard-hero::after {
    content: "LIVE";
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 1;
    padding: .22rem .5rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--accent) 24%, var(--text));
    background: color-mix(in srgb, var(--accent) 13%, var(--card));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.dashboard-hero-card {
    position: relative;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.dashboard-hero-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.48));
    pointer-events: none;
}

.dashboard-quick-actions .btn:first-child,
.dashboard-setlist-card > .btn,
.setlist-song-card .mobile-card-actions > .btn:first-child {
    background: linear-gradient(145deg, var(--accent), var(--accent-strong)) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
}

.setlist-song-card {
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
}

html[data-theme="rockero"] .dashboard-hero::after {
    content: "BACKSTAGE";
    color: #ffe7ed;
}

html[data-theme="rockero"] .brand-mark {
    box-shadow:
        0 0 0 1px rgba(255, 89, 122, .34),
        0 10px 24px rgba(255, 49, 95, .24) !important;
}

@media (max-width: 760px) {
    .brand-copy {
        max-width: 42vw;
    }

    .brand-kicker {
        display: none;
    }

    .dashboard-hero::after {
        right: .65rem;
        top: .65rem;
        font-size: .58rem;
    }
}

/* Estudio: fresh default theme for long sessions. */
html[data-theme="estudio"] {
    --bg-0: #101827;
    --bg-1: #142033;
    --bg-2: #182a42;
    --card: #172336;
    --card-soft: #1d2d44;
    --line: rgba(151, 183, 205, .18);
    --text: #eef7fb;
    --muted: #a7bac7;
    --accent: #4dd7c8;
    --accent-strong: #5a8cff;
    --focus: #7be7dc;
    --danger: #ff6d87;
    --shadow: 0 18px 38px rgba(4, 10, 20, .34);
    color-scheme: dark;
}

html[data-theme="estudio"] body {
    background:
        radial-gradient(900px 520px at 8% -12%, rgba(77, 215, 200, .16), transparent 62%),
        radial-gradient(760px 460px at 95% 0%, rgba(90, 140, 255, .14), transparent 58%),
        radial-gradient(980px 560px at 50% 120%, rgba(255, 255, 255, .035), transparent 64%),
        linear-gradient(165deg, #101827 0%, #142033 50%, #182a42 100%) !important;
}

html[data-theme="estudio"] .topbar,
html[data-theme="estudio"] .card,
html[data-theme="estudio"] .mobile-data-card,
html[data-theme="estudio"] .kpi,
html[data-theme="estudio"] .board-item,
html[data-theme="estudio"] .events-day-detail,
html[data-theme="estudio"] .table-wrap,
html[data-theme="estudio"] .actions-menu-panel {
    border-color: rgba(151, 183, 205, .18) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 30%),
        color-mix(in srgb, var(--card) 94%, #223a52 6%) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="estudio"] .topbar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 34%),
        rgba(18, 29, 46, .88) !important;
}

html[data-theme="estudio"] .btn,
html[data-theme="estudio"] .dashboard-quick-actions .btn:first-child,
html[data-theme="estudio"] .dashboard-setlist-card > .btn,
html[data-theme="estudio"] .setlist-song-card .mobile-card-actions > .btn:first-child {
    background: linear-gradient(145deg, #4dd7c8, #5a8cff) !important;
    border-color: rgba(119, 218, 218, .44) !important;
    color: #061622 !important;
    box-shadow: 0 12px 24px rgba(34, 160, 175, .22) !important;
}

html[data-theme="estudio"] .btn-ghost,
html[data-theme="estudio"] tbody td,
html[data-theme="estudio"] input,
html[data-theme="estudio"] select,
html[data-theme="estudio"] textarea,
html[data-theme="estudio"] .mobile-meta-grid span,
html[data-theme="estudio"] .dashboard-task-item {
    background: rgba(29, 45, 68, .82) !important;
    border-color: rgba(151, 183, 205, .18) !important;
    color: var(--text) !important;
}

html[data-theme="estudio"] .pill {
    color: #d8fffb;
    border-color: rgba(77, 215, 200, .36) !important;
    background: linear-gradient(145deg, rgba(77, 215, 200, .18), rgba(90, 140, 255, .10)) !important;
}

html[data-theme="estudio"] .brand-mark {
    box-shadow:
        0 0 0 1px rgba(77, 215, 200, .32),
        0 10px 24px rgba(77, 215, 200, .18) !important;
}

html[data-theme="estudio"] .dashboard-hero::after {
    content: "STUDIO";
    color: #dffdfa;
}

/* Modern login overrides must come after the global compact rules. */
.login-page .container {
    width: min(1180px, calc(100% - 2rem));
}

.login-page .auth-shell {
    gap: clamp(1rem, 3vw, 2rem) !important;
}

.login-page .auth-login-head h2 {
    font-size: clamp(1.8rem, 4vw, 2.45rem) !important;
    font-weight: 900 !important;
}

.login-page .auth-kicker {
    color: #bcdf22 !important;
}

.login-page .auth-submit {
    min-height: 3.05rem !important;
}

@media (max-width: 760px) {
    .login-page .container {
        width: min(100% - .8rem, 560px);
        margin-top: .45rem;
    }

    .login-page .auth-shell {
        gap: .75rem !important;
    }
}