:root {
    --bg: #020611;
    --panel: rgba(5, 14, 31, 0.84);
    --panel-border: rgba(150, 190, 255, 0.22);
    --text: #f4f7ff;
    --muted: #aebbd4;
    --blue-soft: #68a7ff;
    --silver: #e8edf7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 105, 255, 0.22), transparent 34rem),
        linear-gradient(180deg, #030817 0%, #01040b 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 3.5rem;
    background: rgba(2, 6, 17, 0.9);
    border-bottom: 1px solid rgba(150, 190, 255, 0.14);
    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(220, 235, 255, 0.55);
    box-shadow: 0 0 22px rgba(45, 120, 255, 0.42);
}

.brand-name {
    font-family: Georgia, serif;
    font-size: 1.45rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand-subtitle {
    color: var(--blue-soft);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav a:hover {
    color: var(--blue-soft);
}

.header-actions,
.hero-actions {
    display: flex;
    gap: 0.8rem;
}

.header-actions form {
    margin: 0;
}

.header-user-name {
    display: inline-flex;
    align-items: center;
    max-width: 16rem;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-user-name:hover {
    color: var(--blue-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0 1.35rem;
    border-radius: 0.45rem;
    color: var(--text);
    background: transparent;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(160, 200, 255, 0.42);
    cursor: pointer;
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #1e75ff, #123cba);
    box-shadow: 0 0 30px rgba(30, 110, 255, 0.32);
}

.btn-primary:hover {
    box-shadow: 0 0 44px rgba(70, 145, 255, 0.45);
}

.btn-ghost {
    background: rgba(3, 12, 28, 0.55);
}

.btn-ghost:hover {
    color: white;
    border-color: rgba(104, 167, 255, 0.75);
}

.hero {
    position: relative;
    min-height: calc(100vw * 0.4);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 2rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(2, 6, 17, 0), rgba(2, 6, 17, 0) 70%, rgba(2, 6, 17, 0.96)),
        url("../img/skybreaker-banner.cc22b9021f54.png") center top / contain no-repeat;
}

.banner-actions {
    position: relative;
    z-index: 2;
}

.stats {
    width: min(92%, 1400px);
    margin: 2rem auto;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: rgba(3, 12, 30, 0.82);
    backdrop-filter: blur(16px);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.stats div {
    padding: 1.7rem 2rem;
    border-right: 1px solid rgba(150, 190, 255, 0.12);
}

.stats div:last-child {
    border-right: 0;
}

.stats strong {
    display: block;
    font-family: Georgia, serif;
    color: var(--silver);
    font-size: 1.65rem;
}

.stats strong.rs3-stat {
    font-family: "Segoe UI", Inter, Arial, sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.stats span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content-grid {
    width: min(92%, 1400px);
    margin: 0 auto 4rem;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.2rem;
}

.panel {
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: var(--panel);
    box-shadow: none;
}

.events-panel {
    padding: 1.6rem;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.panel-header h2,
.join-panel h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-header a {
    color: var(--blue-soft);
    font-size: 0.9rem;
    font-weight: 800;
}

.empty-state {
    padding: 2rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 0.7rem;
    background:
        linear-gradient(135deg, rgba(15, 42, 84, 0.68), rgba(4, 12, 28, 0.82)),
        radial-gradient(circle at 85% 15%, rgba(216, 168, 95, 0.18), transparent 16rem);
}

.empty-state h3 {
    margin: 0 0 0.5rem;
    color: var(--silver);
    font-size: 1.35rem;
}

.empty-state p {
    margin: 0;
    max-width: 720px;
    color: var(--muted);
    line-height: 1.7;
}

.join-panel {
    padding: 1.6rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(10, 26, 56, 0.94), rgba(3, 10, 24, 0.94)),
        radial-gradient(circle at 50% 0%, rgba(40, 116, 255, 0.28), transparent 18rem);
}

.join-logo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 1.2rem;
    border-radius: 50%;
    border: 1px solid rgba(220, 235, 255, 0.55);
    box-shadow: 0 0 38px rgba(40, 116, 255, 0.36);
}

.join-panel p {
    color: var(--muted);
    line-height: 1.7;
}

.full {
    width: 100%;
    margin-top: 1rem;
}

/* Auth */

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
}

.auth-card {
    width: min(92vw, 420px);
    padding: 2rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: var(--panel);
    text-align: center;
}

.auth-card h1 {
    margin: 0.5rem 0 1rem;
    font-family: Georgia, serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-card label {
    display: block;
    margin: 1rem 0 0.4rem;
    color: var(--muted);
    text-align: left;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-card input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
}

.auth-back {
    display: inline-block;
    margin-top: 1rem;
    color: var(--blue-soft);
}

/* Portal */

.portal-page {
    width: min(92%, 1200px);
    margin: 0 auto;
    padding: 3rem 0 5rem;
    min-height: calc(100vh - 90px);
}

.portal-copy {
    color: var(--muted);
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(104, 167, 255, 0.16), transparent 18rem),
        linear-gradient(135deg, rgba(8, 24, 54, 0.96), rgba(2, 8, 20, 0.96));
    border-color: rgba(104, 167, 255, 0.32);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: 2rem;
    top: 50%;
    width: 180px;
    height: 180px;
    transform: translateY(-50%);
    background: url("../img/skybreaker-logo.950bc9a484a3.png") center / contain no-repeat;
    opacity: 1;
    pointer-events: none;
}

.dashboard-hero h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-hero p {
    color: var(--muted);
    max-width: 680px;
}

.eyebrow-small {
    margin: 0 0 0.5rem;
    color: var(--blue-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    padding: 1.5rem;
}

.stat-card strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 1.8rem;
}

.stat-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .site-header {
        padding: 1rem 1.4rem;
    }

    .nav {
        display: none;
    }

    .content-grid,
    .stats,
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .stats div {
        border-right: 0;
        border-bottom: 1px solid rgba(150, 190, 255, 0.12);
    }

    .stats div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    .brand-name {
        font-size: 1.05rem;
    }

    .brand-logo {
        width: 48px;
        height: 48px;
    }

    .header-actions {
        display: none;
    }

    .hero {
        min-height: calc(100vw * 0.4);
        padding: 0 1rem;
    }

    .dashboard-hero::after {
        opacity: 0.06;
    }
}

.signed-events-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.signed-events-list {
    display: grid;
    gap: 0.8rem;
}

.signed-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.58);
}

.signed-event h3 {
    margin: 0 0 0.3rem;
}

.signed-event p {
    margin: 0;
    color: var(--muted);
}

.signed-event span {
    color: var(--blue-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Synced events */
.public-events-list {
    display: grid;
    gap: 0.8rem;
}

.public-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.58);
}

.public-event h3 {
    margin: 0 0 0.3rem;
}

.public-event p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.public-event > span {
    flex: 0 0 auto;
    color: var(--blue-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-errors {
    margin-top: 0.4rem;
    color: #ff9b9b;
    text-align: left;
    font-size: 0.82rem;
}

.panel-meta {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Members */
.nav a.active {
    color: var(--blue-soft);
}

.members-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(104, 167, 255, 0.16), transparent 18rem),
        linear-gradient(135deg, rgba(8, 24, 54, 0.96), rgba(2, 8, 20, 0.96));
    border-color: rgba(104, 167, 255, 0.32);
}

.members-hero h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.members-hero p:not(.eyebrow-small) {
    margin-bottom: 0;
    color: var(--muted);
}

.members-total {
    flex: 0 0 auto;
    min-width: 180px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 0.7rem;
    background: rgba(3, 12, 30, 0.64);
    text-align: center;
}

.members-total strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 2rem;
}

.members-total span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.member-groups {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.member-group {
    padding: 1.4rem;
}

.member-group-header {
    margin-bottom: 0.8rem;
}

.member-group-header h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.members-list {
    display: grid;
    gap: 0.55rem;
}

.member-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.13);
    border-radius: 0.6rem;
    background: rgba(3, 12, 30, 0.52);
}

.member-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(104, 167, 255, 0.32);
    border-radius: 50%;
    color: var(--silver);
    background: linear-gradient(135deg, rgba(30, 117, 255, 0.46), rgba(18, 60, 186, 0.25));
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.member-details {
    min-width: 0;
}

.member-details strong,
.member-details span {
    display: block;
}

.member-details strong {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-details span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.75rem;
}

.member-role {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(150, 190, 255, 0.2);
    border-radius: 999px;
    color: var(--blue-soft);
    background: rgba(104, 167, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-owner,
.role-deputy-owner {
    color: #f3d98b;
    border-color: rgba(243, 217, 139, 0.28);
    background: rgba(243, 217, 139, 0.08);
}

.role-overseer,
.role-admin {
    color: #a9c9ff;
}

@media (max-width: 700px) {
    .members-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .members-total {
        min-width: 0;
    }

    .member-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .member-avatar {
        width: 42px;
        height: 42px;
    }

    .member-role {
        grid-column: 2;
        justify-self: start;
    }
}

/* Expandable member role details */
.member-entry {
    border: 1px solid rgba(150, 190, 255, 0.13);
    border-radius: 0.6rem;
    background: rgba(3, 12, 30, 0.52);
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.member-entry:hover,
.member-entry[open] {
    border-color: rgba(104, 167, 255, 0.32);
    background: rgba(5, 17, 40, 0.66);
}

.member-entry > summary {
    list-style: none;
}

.member-entry > summary::-webkit-details-marker {
    display: none;
}

.member-entry .member-row {
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.member-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-expand-icon {
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--blue-soft);
    border-bottom: 2px solid var(--blue-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

.member-entry[open] .member-expand-icon {
    transform: rotate(225deg) translate(-1px, -1px);
}

.member-expanded {
    padding: 0 0.9rem 1rem 5.85rem;
    border-top: 1px solid rgba(150, 190, 255, 0.1);
}

.member-expanded-label {
    display: block;
    padding-top: 0.85rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.member-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.discord-role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 999px;
    color: var(--silver);
    background: rgba(104, 167, 255, 0.07);
    font-size: 0.75rem;
    font-weight: 700;
}

.member-no-roles {
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .member-row-actions {
        grid-column: 2;
        justify-content: space-between;
        width: 100%;
    }

    .member-entry .member-role {
        grid-column: auto;
    }

    .member-expanded {
        padding-left: 4.15rem;
    }
}


/* Expandable dashboard event summaries */
.public-event-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.public-event-link:hover {
    border-color: rgba(104, 167, 255, 0.38);
    background: rgba(5, 17, 40, 0.72);
    transform: translateY(-1px);
}

.dashboard-events-list {
    display: grid;
    gap: 0.8rem;
}

.dashboard-event {
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.58);
    overflow: hidden;
    scroll-margin-top: 7rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.dashboard-event:hover,
.dashboard-event[open] {
    border-color: rgba(104, 167, 255, 0.34);
    background: rgba(5, 17, 40, 0.68);
}

.dashboard-event > summary {
    list-style: none;
}

.dashboard-event > summary::-webkit-details-marker {
    display: none;
}

.dashboard-event-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    user-select: none;
}

.dashboard-event-summary h3 {
    margin: 0 0 0.3rem;
}

.dashboard-event-summary p {
    margin: 0;
    color: var(--muted);
}

.dashboard-event-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.event-status-badge,
.event-capacity {
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.event-status-badge {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(104, 167, 255, 0.24);
    border-radius: 999px;
    color: var(--blue-soft);
    background: rgba(104, 167, 255, 0.08);
}

.event-capacity {
    color: var(--blue-soft);
}

.event-expand-icon {
    width: 0.58rem;
    height: 0.58rem;
    border-right: 2px solid var(--blue-soft);
    border-bottom: 2px solid var(--blue-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

.dashboard-event[open] .event-expand-icon {
    transform: rotate(225deg) translate(-1px, -1px);
}

.dashboard-event-details {
    padding: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.11);
}

.event-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.event-detail-meta > div,
.event-description,
.event-signup-section {
    padding: 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 0.55rem;
    background: rgba(2, 9, 23, 0.48);
}

.event-detail-meta span,
.event-description > span,
.event-section-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.event-detail-meta strong {
    color: var(--silver);
}

.event-description,
.event-signup-section {
    margin-top: 0.8rem;
}

.event-description p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.event-role-grid {
    display: grid;
    gap: 0.5rem;
}

.event-role-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(150, 190, 255, 0.1);
    border-radius: 0.45rem;
    background: rgba(3, 12, 30, 0.48);
}

.event-role-row strong {
    color: var(--silver);
}

.event-role-row span {
    color: var(--text);
}

.event-role-row .event-slot-open {
    color: var(--muted);
    font-style: italic;
}

.event-participant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.event-participant-list span {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 999px;
    background: rgba(104, 167, 255, 0.07);
}

.event-no-signups {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 700px) {
    .dashboard-event-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-event-summary-actions {
        width: 100%;
        justify-content: space-between;
    }

    .event-detail-meta,
    .event-role-row {
        grid-template-columns: 1fr;
    }
}


/* Dashboard event quick filters */
.dashboard-events-header {
    align-items: flex-end;
}

.dashboard-events-header > div:first-child {
    display: grid;
    gap: 0.35rem;
}

.event-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.event-filter {
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(3, 12, 30, 0.58);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.event-filter:hover {
    color: var(--text);
    border-color: rgba(104, 167, 255, 0.42);
}

.event-filter.active {
    color: #ffffff;
    border-color: rgba(104, 167, 255, 0.55);
    background: rgba(30, 117, 255, 0.22);
}

.dashboard-event[hidden] {
    display: none;
}

.event-filter-empty {
    margin-top: 0.8rem;
    padding: 1.4rem;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.42);
}

.event-filter-empty h3 {
    margin: 0 0 0.35rem;
}

.event-filter-empty p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .dashboard-events-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Sync History */
.sync-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.sync-status-card {
    padding: 1.25rem;
}

.sync-status-card > span {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sync-status-card strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 1.15rem;
}

.sync-status-card small {
    display: block;
    margin-top: 0.45rem;
    color: var(--muted);
}

.sync-ok {
    color: #72d99a !important;
}

.sync-failed {
    color: #ff8d9a !important;
}

.sync-history-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.sync-history-list {
    display: grid;
    gap: 0.65rem;
}

.sync-history-entry {
    overflow: hidden;
    border: 1px solid rgba(150, 190, 255, 0.13);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.52);
}

.sync-history-entry[open] {
    border-color: rgba(104, 167, 255, 0.34);
    background: rgba(5, 17, 40, 0.68);
}

.sync-history-entry > summary {
    list-style: none;
}

.sync-history-entry > summary::-webkit-details-marker {
    display: none;
}

.sync-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    user-select: none;
}

.sync-history-primary,
.sync-history-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.sync-history-primary > div {
    display: grid;
    gap: 0.2rem;
}

.sync-history-primary strong {
    font-size: 0.95rem;
}

.sync-history-primary span:not(.sync-result-dot),
.sync-history-meta time {
    color: var(--muted);
    font-size: 0.78rem;
}

.sync-result-dot {
    width: 0.62rem;
    height: 0.62rem;
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
}

.sync-result-dot.success {
    color: #72d99a;
    background: #72d99a;
}

.sync-result-dot.failed {
    color: #ff6678;
    background: #ff6678;
}

.sync-history-meta > span:first-child {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sync-history-entry[open] .event-expand-icon {
    transform: rotate(225deg) translate(-1px, -1px);
}

.sync-history-details {
    padding: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.11);
}

.sync-history-details pre {
    max-height: 26rem;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 0.55rem;
    color: #d9e7ff;
    background: rgba(0, 4, 12, 0.72);
    font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sync-history-details p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 1000px) {
    .sync-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .sync-status-grid {
        grid-template-columns: 1fr;
    }

    .sync-history-summary,
    .sync-history-meta {
        align-items: flex-start;
    }

    .sync-history-summary {
        flex-direction: column;
    }

    .sync-history-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* Sync History v2 - intentionally reuses the dashboard event language. */
.sync-overview-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.sync-status-list .event-role-row {
    grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
}

.sync-status-list b {
    font-weight: 900;
}

.sync-status-success {
    color: #72d99a;
    border-color: rgba(114, 217, 154, 0.28);
    background: rgba(114, 217, 154, 0.08);
}

.sync-status-failed {
    color: #ff8d9a;
    border-color: rgba(255, 102, 120, 0.28);
    background: rgba(255, 102, 120, 0.08);
}

.sync-json-section {
    overflow: hidden;
}

.sync-json-block {
    max-height: 30rem;
    margin: 0;
    padding: 0.9rem 1rem;
    overflow: auto;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 0.5rem;
    color: #d9e7ff;
    background: rgba(0, 4, 12, 0.72);
    font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .sync-status-list .event-role-row {
        grid-template-columns: 1fr;
    }
}

/* Bingo */
.event-title-line {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.event-title-line h3 {
    margin: 0;
}

.bingo-type-badge,
.bingo-published-badge,
.bingo-draft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(104, 167, 255, 0.34);
    border-radius: 999px;
    color: #93c2ff;
    background: rgba(30, 117, 255, 0.1);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bingo-published-badge {
    color: #72d99a;
    border-color: rgba(114, 217, 154, 0.34);
    background: rgba(114, 217, 154, 0.08);
}

.bingo-draft-badge {
    color: #ffd58a;
    border-color: rgba(255, 213, 138, 0.3);
    background: rgba(255, 213, 138, 0.08);
}

.bingo-event-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.1);
}

.bingo-board-state {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.bingo-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bingo-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: calc(100% - 230px);
}

.bingo-hero-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.bingo-flash {
    margin: 1rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(104, 167, 255, 0.25);
    border-radius: 0.6rem;
    background: rgba(3, 12, 30, 0.75);
    font-weight: 800;
}

.bingo-flash.success,
.bingo-state-message.success {
    color: #72d99a;
    border-color: rgba(114, 217, 154, 0.28);
    background: rgba(114, 217, 154, 0.08);
}

.bingo-flash.error {
    color: #ff8d9a;
    border-color: rgba(255, 102, 120, 0.28);
    background: rgba(255, 102, 120, 0.08);
}

.bingo-end-date-panel {
    margin-top: 1rem;
    padding: 1.25rem 1.6rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    border-color: rgba(255, 193, 92, 0.34);
    background: linear-gradient(135deg, rgba(72, 47, 11, 0.26), rgba(3, 12, 30, 0.86));
}

.bingo-end-date-panel h2 {
    margin: 0 0 0.35rem;
    font-family: Georgia, serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bingo-end-date-panel p {
    margin: 0;
    color: var(--muted);
}

.bingo-end-date-form {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.bingo-end-date-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bingo-end-date-form input {
    min-height: 2.9rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
    color-scheme: dark;
}

.bingo-settings-panel,
.bingo-board-panel,
.bingo-review-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.bingo-settings-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bingo-size-form {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.bingo-size-form label,
.bingo-tile-edit-form label,
.bingo-submit-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bingo-size-form input,
.bingo-tile-edit-form input[type="text"],
.bingo-tile-edit-form textarea,
.bingo-review-form input[type="text"],
.bingo-submit-form textarea,
.bingo-submit-form input[type="file"] {
    width: 100%;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(150, 190, 255, 0.2);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(1, 7, 18, 0.9);
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.bingo-size-form input {
    width: 6.5rem;
}

.bingo-grid {
    --bingo-columns: 5;
    display: grid;
    grid-template-columns: repeat(var(--bingo-columns), minmax(0, 1fr));
    gap: 0.75rem;
}

.bingo-tile {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.7rem;
    background: rgba(3, 12, 30, 0.58);
}

.bingo-tile[open] {
    grid-column: 1 / -1;
    border-color: rgba(104, 167, 255, 0.48);
    background: rgba(6, 20, 47, 0.9);
}

.bingo-tile > summary {
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.bingo-tile > summary::-webkit-details-marker {
    display: none;
}

.bingo-tile-number {
    color: var(--blue-soft);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.bingo-tile > summary strong {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.25;
}

.bingo-tile > summary small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.bingo-editor-tile.empty > summary {
    border: 1px dashed rgba(150, 190, 255, 0.15);
}

.bingo-tile-edit-form,
.bingo-player-tile-detail {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.1);
}

.bingo-checkbox {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.55rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.bingo-player-tile.status-pending {
    border-color: rgba(255, 213, 138, 0.35);
}

.bingo-player-tile.status-approved {
    border-color: rgba(114, 217, 154, 0.38);
    background: rgba(114, 217, 154, 0.06);
}

.bingo-player-tile.status-rejected {
    border-color: rgba(255, 102, 120, 0.34);
}

.bingo-evidence-rule {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.bingo-state-message {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 0.45rem;
}

.bingo-state-message.pending {
    color: #ffd58a;
    background: rgba(255, 213, 138, 0.08);
}

.bingo-submit-form {
    display: grid;
    gap: 0.8rem;
}

.bingo-review-list {
    display: grid;
    gap: 0.8rem;
}

.bingo-review-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.52);
}

.bingo-review-item h3 {
    margin: 0.55rem 0 0.35rem;
}

.bingo-review-item p {
    margin: 0.25rem 0;
    color: var(--muted);
}

.bingo-review-actions,
.bingo-review-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.bingo-review-form input[type="text"] {
    flex: 1 1 13rem;
}

.btn-danger {
    color: #fff;
    border-color: rgba(255, 102, 120, 0.45);
    background: rgba(196, 36, 57, 0.82);
}

@media (max-width: 1050px) {
    .bingo-grid {
        grid-template-columns: repeat(min(3, var(--bingo-columns)), minmax(0, 1fr));
    }

    .bingo-review-item {
        grid-template-columns: 1fr;
    }

    .bingo-review-actions,
    .bingo-review-form {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .bingo-hero,
    .bingo-settings-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .bingo-hero-copy {
        max-width: 100%;
    }

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

    .bingo-tile[open] {
        grid-column: auto;
    }
}

/* Bingo board tile selection layout */
.bingo-grid .bingo-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 0.65rem;
    padding: 0.9rem;
    color: var(--text);
    font: inherit;
    text-align: center;
    appearance: none;
    cursor: pointer;
    user-select: none;
    container-type: inline-size;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.bingo-grid .bingo-tile:hover {
    border-color: rgba(104, 167, 255, 0.42);
    background: rgba(5, 17, 40, 0.72);
    transform: translateY(-1px);
}

.bingo-grid .bingo-tile.selected {
    border-color: rgba(104, 167, 255, 0.78);
    background: rgba(8, 29, 66, 0.9);
    box-shadow: 0 0 0 1px rgba(104, 167, 255, 0.16), 0 0 26px rgba(30, 117, 255, 0.14);
}

.bingo-grid .bingo-tile-number {
    justify-self: center;
    text-align: center;
}

.bingo-grid .bingo-tile-copy {
    align-self: stretch;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 3cqw, 0.75rem);
    overflow: hidden;
    text-align: center;
}

.bingo-grid .bingo-tile strong {
    display: block;
    max-width: 100%;
    font-family: Georgia, serif;
    font-size: clamp(1rem, 10cqw, 2.15rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-align: center;
}

.bingo-grid .bingo-tile-description {
    max-width: 96%;
    color: var(--muted);
    font-size: clamp(0.68rem, 4.6cqw, 0.92rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Descriptions are useful on roomy boards, but disappear before they can crowd
   the title/status when the host chooses many columns or on narrow screens. */
@container (max-width: 175px) {
    .bingo-tile-description {
        display: none;
    }

    .bingo-grid .bingo-tile strong {
        font-size: clamp(0.9rem, 11cqw, 1.3rem);
    }
}

.bingo-grid .bingo-tile small {
    align-self: end;
    max-width: 100%;
    color: var(--muted);
    font-size: clamp(0.58rem, 0.8vw, 0.7rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
}

.bingo-editor-tile.empty {
    border-style: dashed;
    border-color: rgba(150, 190, 255, 0.2);
}

.bingo-selection-area {
    margin-top: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.12);
    padding-top: 1rem;
}

.bingo-selection-placeholder,
.bingo-selection-panel {
    padding: 1.15rem;
    border: 1px solid rgba(150, 190, 255, 0.15);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.52);
}

.bingo-selection-placeholder {
    color: var(--muted);
    text-align: center;
}

.bingo-selection-placeholder strong {
    display: block;
    color: var(--silver);
    font-family: Georgia, serif;
    font-size: 1.15rem;
}

.bingo-selection-placeholder p {
    margin: 0.35rem 0 0;
}

.bingo-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bingo-selection-header h3 {
    margin: 0.25rem 0 0;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
}

.bingo-tile-status {
    flex: 0 0 auto;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(150, 190, 255, 0.2);
    border-radius: 999px;
    color: var(--blue-soft);
    background: rgba(104, 167, 255, 0.08);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bingo-tile-status.status-pending {
    color: #ffd58a;
    border-color: rgba(255, 213, 138, 0.3);
    background: rgba(255, 213, 138, 0.08);
}

.bingo-tile-status.status-approved {
    color: #72d99a;
    border-color: rgba(114, 217, 154, 0.3);
    background: rgba(114, 217, 154, 0.08);
}

.bingo-tile-status.status-rejected {
    color: #ff8d9a;
    border-color: rgba(255, 102, 120, 0.3);
    background: rgba(255, 102, 120, 0.08);
}

.bingo-selection-panel .bingo-tile-edit-form,
.bingo-selection-panel .bingo-player-tile-detail {
    padding: 0;
    border-top: 0;
}

@media (max-width: 700px) {
    .bingo-selection-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Bingo participation / team management */
.bingo-team-panel,
.bingo-team-name-panel,
.bingo-awaiting-team-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.bingo-participation-form {
    display: flex;
    align-items: end;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.bingo-participation-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bingo-participation-form select,
.bingo-participation-form input,
.bingo-assignment-row select,
.bingo-team-rename-form input {
    min-height: 2.9rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
    font: inherit;
}

.bingo-participation-form input {
    width: 8rem;
}

.bingo-participation-form input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bingo-team-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.bingo-team-summary {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.52);
}

.bingo-team-summary h3 {
    margin: 0.25rem 0 0.65rem;
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.bingo-team-summary ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.6;
}

.bingo-team-summary p {
    margin: 0;
    color: var(--muted);
}

.bingo-assignment-form {
    display: grid;
    gap: 0.9rem;
}

.bingo-assignment-list {
    display: grid;
    gap: 0.55rem;
}

.bingo-assignment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 0.55rem;
    background: rgba(3, 12, 30, 0.42);
}

.bingo-assignment-row > span {
    display: grid;
    gap: 0.15rem;
}

.bingo-assignment-row small {
    color: var(--muted);
}

.bingo-solo-summary {
    color: var(--muted);
}

.bingo-solo-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.bingo-solo-members span {
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(150, 190, 255, 0.15);
    border-radius: 999px;
    color: var(--text);
    background: rgba(3, 12, 30, 0.52);
    font-size: 0.8rem;
    font-weight: 800;
}

.bingo-team-name-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bingo-team-name-panel h2 {
    margin: 0.2rem 0 0;
    font-family: Georgia, serif;
}

.bingo-team-name-panel p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.bingo-team-rename-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: min(100%, 430px);
}

.bingo-team-rename-form input {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 700px) {
    .bingo-assignment-row {
        grid-template-columns: 1fr;
    }

    .bingo-team-name-panel,
    .bingo-team-rename-form {
        align-items: stretch;
        flex-direction: column;
    }

    .bingo-team-rename-form {
        min-width: 0;
        width: 100%;
    }
}

/* Bingo evidence batches, admin notes, and team board review */
.bingo-manager-team-switcher {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bingo-manager-team-switcher h2 {
    margin: 0.2rem 0 0.35rem;
    font-family: Georgia, serif;
}

.bingo-manager-team-switcher p {
    margin: 0;
    color: var(--muted);
}

.bingo-manager-team-switcher label {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 320px);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bingo-manager-team-switcher select,
.bingo-admin-note-form textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
    font: inherit;
}

.bingo-team-progress-line {
    margin-top: 0.8rem;
    color: var(--blue-soft);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bingo-team-board-link {
    margin-top: 0.8rem;
}

.bingo-solo-board-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bingo-solo-board-links a {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.15);
    border-radius: 0.55rem;
    color: var(--text);
    background: rgba(3, 12, 30, 0.52);
}

.bingo-solo-board-links small {
    color: var(--blue-soft);
}

.bingo-evidence-history {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
}

.bingo-evidence-history h4 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.1rem;
}

.bingo-evidence-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 0.55rem;
    background: rgba(3, 12, 30, 0.48);
}

.bingo-evidence-entry > div {
    display: grid;
    gap: 0.2rem;
}

.bingo-evidence-entry span,
.bingo-evidence-entry p {
    margin: 0;
    color: var(--muted);
}

.bingo-evidence-entry.evidence-accepted {
    border-color: rgba(114, 217, 154, 0.32);
}

.bingo-evidence-entry.evidence-rejected {
    border-color: rgba(255, 102, 120, 0.32);
}

.bingo-admin-note {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--blue-soft);
    border-radius: 0.4rem;
    background: rgba(104, 167, 255, 0.08);
}

.bingo-admin-note p {
    margin: 0.3rem 0 0;
    color: var(--text);
}

.bingo-admin-tile-controls {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.12);
}

.bingo-admin-note-form {
    display: grid;
    gap: 0.55rem;
}

.bingo-admin-note-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.bingo-completion-form {
    display: flex;
    gap: 0.55rem;
}

.bingo-grid .bingo-player-tile.status-complete,
.bingo-tile-status.status-complete {
    border-color: rgba(114, 217, 154, 0.5);
    background: rgba(52, 130, 82, 0.14);
    color: #8be6aa;
}

.bingo-grid .bingo-player-tile.status-accepted,
.bingo-tile-status.status-accepted {
    border-color: rgba(104, 167, 255, 0.38);
    background: rgba(104, 167, 255, 0.1);
    color: var(--blue-soft);
}

@media (max-width: 700px) {
    .bingo-manager-team-switcher,
    .bingo-evidence-entry {
        align-items: stretch;
        flex-direction: column;
    }

    .bingo-manager-team-switcher label {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .bingo-end-date-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .bingo-end-date-form {
        align-items: stretch;
    }
}


/* Bingo event-scoped administrators */
.bingo-admin-panel {
    margin-top: 1rem;
    padding: 1.6rem;
}

.bingo-admin-list {
    display: grid;
    gap: 0.75rem;
}

.bingo-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.58);
}

.bingo-admin-row strong,
.bingo-admin-row small {
    display: block;
}

.bingo-admin-row small {
    margin-top: 0.25rem;
    color: var(--muted);
}

.bingo-add-admin-form {
    display: flex;
    align-items: end;
    gap: 0.8rem;
    margin-top: 1rem;
}

.bingo-add-admin-form label {
    flex: 1;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.bingo-add-admin-form select {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
}

@media (max-width: 640px) {
    .bingo-admin-row,
    .bingo-add-admin-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Sync History API security */
.sync-security-panel {
    margin-top: 1rem;
}

.sync-security-copy {
    margin: 0 0 1.25rem;
    line-height: 1.65;
}

.sync-security-meta {
    margin-bottom: 1rem;
}

.sync-fingerprint {
    overflow-wrap: anywhere;
}

.sync-security-form {
    display: grid;
    gap: 0.75rem;
    max-width: 760px;
}

.sync-security-form label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sync-security-form input[type="file"],
.sync-security-form textarea {
    width: 100%;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
}

.sync-security-form input[type="file"] {
    padding: 0.75rem;
}

.sync-security-form textarea {
    min-height: 8rem;
    padding: 0.85rem 1rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sync-security-form .btn {
    justify-self: start;
}

.sync-form-or {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sync-key-replace {
    margin-top: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.12);
    padding-top: 1rem;
}

.sync-key-replace > summary {
    cursor: pointer;
    color: var(--blue-soft);
    font-weight: 800;
    margin-bottom: 1rem;
}

.sync-remove-key-form {
    margin-top: 1rem;
}

.sync-security-message {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(104, 167, 255, 0.28);
    border-radius: 0.6rem;
    background: rgba(7, 24, 52, 0.82);
}

.sync-security-message.success {
    border-color: rgba(82, 210, 140, 0.34);
}

.sync-security-message.error {
    border-color: rgba(255, 105, 120, 0.42);
}

/* Sync History integration settings */
.sync-security-form input[type="url"] {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(2, 8, 20, 0.9);
    font: inherit;
}


.sync-checkbox-row {
    display: flex !important;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 0.65rem;
    background: rgba(3, 12, 30, 0.5);
    cursor: pointer;
}

.sync-checkbox-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
}

.sync-checkbox-row span {
    display: grid;
    gap: 0.25rem;
}

.sync-checkbox-row strong {
    color: var(--text);
}

.sync-checkbox-row small {
    color: var(--muted);
    line-height: 1.5;
}

.sync-webhook-key-meta {
    margin-top: 1rem;
}

.sync-webhook-key-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.sync-webhook-key-actions .sync-security-copy {
    margin: 0;
    flex: 1 1 420px;
}


/* API control plane */
.api-subnav {
    display: flex;
    gap: 0.55rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.api-subnav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0 1.1rem;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(3, 12, 30, 0.62);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.api-subnav a:hover,
.api-subnav a.active {
    color: #fff;
    border-color: rgba(104, 167, 255, 0.7);
    background: rgba(20, 75, 165, 0.48);
}
.api-docs-panel > h3 {
    margin: 2rem 0 0.8rem;
    font-family: Georgia, serif;
    font-size: 1.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.api-docs-panel > h4,
.api-endpoint-body h4 {
    margin: 1.2rem 0 0.55rem;
    color: var(--blue-soft);
}
.api-doc-callout,
.api-doc-card,
.api-endpoint {
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 0.7rem;
    background: rgba(3, 12, 30, 0.54);
}
.api-doc-callout {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem;
}
.api-doc-callout p,
.api-doc-card p,
.api-endpoint-body p {
    margin: 0.55rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}
.api-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}
.api-doc-card {
    padding: 1rem 1.1rem;
}
.api-doc-card h4 {
    margin: 0;
    color: var(--text);
}
.api-doc-code,
.api-doc-card pre {
    overflow-x: auto;
    margin: 0.7rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.55rem;
    color: #dce9ff;
    background: rgba(0, 4, 12, 0.88);
    font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre;
}
.api-docs-panel code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.api-endpoint {
    margin-top: 0.75rem;
    overflow: hidden;
}
.api-endpoint > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
}
.api-endpoint > summary::-webkit-details-marker { display: none; }
.api-endpoint > summary span {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 800;
}
.api-endpoint > summary span b {
    color: var(--blue-soft);
}
.api-endpoint > summary small {
    color: var(--muted);
    text-align: right;
}
.api-endpoint[open] > summary {
    border-bottom: 1px solid rgba(150, 190, 255, 0.12);
    background: rgba(10, 31, 68, 0.42);
}
.api-endpoint-body {
    padding: 0.2rem 1.1rem 1.1rem;
}
@media (max-width: 760px) {
    .api-doc-grid { grid-template-columns: 1fr; }
    .api-endpoint > summary { align-items: flex-start; flex-direction: column; }
    .api-endpoint > summary small { text-align: left; }
}

/* API documentation example tabs */
.api-example-tabs {
    margin: 0.75rem 0 1.1rem;
}

.api-example-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.api-example-tab-buttons button {
    appearance: none;
    border: 1px solid rgba(150, 190, 255, 0.22);
    border-radius: 999px;
    padding: 0.52rem 0.9rem;
    color: var(--muted);
    background: rgba(3, 12, 30, 0.58);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.api-example-tab-buttons button:hover,
.api-example-tab-buttons button.active {
    color: #fff;
    border-color: rgba(104, 167, 255, 0.72);
    background: rgba(31, 101, 220, 0.28);
}

.api-example-panel[hidden] {
    display: none !important;
}

.api-example-panel > .api-doc-code:first-child {
    margin-top: 0;
}


/* Mobile navigation */
.mobile-nav {
    display: none;
    position: relative;
    margin-left: auto;
}

.mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(160, 200, 255, 0.42);
    border-radius: 0.45rem;
    color: var(--text);
    background: rgba(3, 12, 28, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.mobile-nav-toggle::-webkit-details-marker {
    display: none;
}

.mobile-nav[open] .mobile-nav-toggle,
.mobile-nav-toggle:hover {
    color: var(--blue-soft);
    border-color: rgba(104, 167, 255, 0.75);
}

.mobile-nav-icon {
    display: grid;
    gap: 4px;
    width: 18px;
}

.mobile-nav-icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.mobile-nav-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: min(320px, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: rgba(2, 8, 20, 0.98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
}

.mobile-account {
    display: block;
    margin-bottom: 0.7rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 0.55rem;
    background: rgba(8, 24, 54, 0.62);
}

.mobile-account-label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-account strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav-links {
    display: grid;
    gap: 0.25rem;
}

.mobile-nav-links a {
    display: flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 0 0.9rem;
    border-radius: 0.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    color: var(--blue-soft);
    background: rgba(30, 117, 255, 0.10);
}

.mobile-nav-actions {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(150, 190, 255, 0.14);
}

.mobile-nav-actions form {
    margin: 0;
}

@media (max-width: 1000px) {
    .site-header {
        gap: 1rem;
    }

    .site-header > .nav,
    .site-header > .header-actions {
        display: none;
    }

    .mobile-nav {
        display: block;
    }
}

@media (max-width: 640px) {
    .site-header {
        padding: 0.85rem 1rem;
    }

    .brand {
        min-width: 0;
    }

    .brand > div {
        min-width: 0;
    }

    .brand-name {
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-label {
        display: none;
    }

    .mobile-nav-toggle {
        width: 2.85rem;
        padding: 0;
    }
}

/* Skybreaker password-change page */
.password-change-card {
    width: min(92vw, 520px);
}

.password-change-card .eyebrow-small {
    margin-top: 0.4rem;
}

.password-change-card .portal-copy {
    margin: 0 0 1.4rem;
    line-height: 1.6;
}

.password-help {
    margin: 0.45rem 0 0;
    color: var(--muted);
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.5;
}

.password-help ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.password-help li + li {
    margin-top: 0.2rem;
}