@font-face {
    font-family: DrowsyFont;
    src: url(Satoshi-Variable.ttf);
}
.brackets-layout { display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bracket-sidebar, .bracket-editor { min-width: 0; }
.bracket-header-icon { color: var(--dreamy-periwinkle); font-size: 4em; }
.bracket-list { display: grid; gap: 8px; }
.bracket-list-item { display: grid; gap: 3px; padding: 12px; border-left: 3px solid transparent; color: var(--cloud-white); background: var(--night-indigo); text-decoration: none; }
.bracket-list-item:hover, .bracket-list-item.is-selected { border-left-color: var(--moonlight-yellow); background: var(--deep-lilac); }
.bracket-list-item span, .bracket-list-item small, .bracket-event-label { color: var(--cloud-lilac); font-size: .85em; }
.bracket-create-form { display: grid; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--cloud-lilac); }
.bracket-create-form h3 { margin: 0 0 4px; }
.bracket-empty { padding: 18px; color: var(--dusty-blue-purple); text-align: center; }
.bracket-empty-large { display: grid; place-items: center; min-height: 360px; }
.bracket-empty-large .material-symbols-outlined { font-size: 4em; color: var(--dreamy-periwinkle); }
.bracket-empty-large h2, .bracket-empty-large p { margin: 0; }
.bracket-editor .account-card-header { align-items: flex-start; }
.bracket-header-actions { display: flex; align-items: center; gap: 8px; }
.bracket-stream-logo { display: none; width: auto; height: 38px; object-fit: contain; }
.bracket-editor:fullscreen, .bracket-editor.is-streaming { overflow: auto; width: 100%; min-height: 100vh; margin: 0; padding: clamp(24px, 5vw, 72px); box-sizing: border-box; border: 0; border-radius: 0; background: var(--night-indigo); color: var(--cloud-white); }
.bracket-editor:fullscreen .account-card-header, .bracket-editor.is-streaming .account-card-header { border-bottom-color: var(--dusty-blue-purple); }
.bracket-editor:fullscreen .account-card-title, .bracket-editor.is-streaming .account-card-title { color: var(--cloud-white); font-size: clamp(1.5em, 3vw, 2.4em); }
.bracket-editor:fullscreen .bracket-event-label, .bracket-editor.is-streaming .bracket-event-label { color: var(--misty-blue); font-size: 1.05em; }
.bracket-editor:fullscreen .bracket-event-label,
.bracket-editor.is-streaming .bracket-event-label {
    display: none;
}
.bracket-editor:fullscreen .bracket-stream-logo,
.bracket-editor.is-streaming .bracket-stream-logo {
    display: block;
}
.bracket-editor:fullscreen .bracket-controls, .bracket-editor:fullscreen .bracket-participants, .bracket-editor.is-streaming .bracket-controls, .bracket-editor.is-streaming .bracket-participants { display: none; }
.bracket-editor:fullscreen .bracket-workspace, .bracket-editor.is-streaming .bracket-workspace { display: block; padding-top: 32px; }
.bracket-editor:fullscreen .bracket-board-wrap, .bracket-editor.is-streaming .bracket-board-wrap { overflow: visible; }
.bracket-editor:fullscreen .bracket-section-heading, .bracket-editor.is-streaming .bracket-section-heading { color: var(--cloud-white); }
.bracket-editor:fullscreen .bracket-section-heading h3, .bracket-editor.is-streaming .bracket-section-heading h3 { font-size: 1.15em; }
.bracket-editor:fullscreen .bracket-section-heading span, .bracket-editor.is-streaming .bracket-section-heading span { color: var(--misty-blue); }
.bracket-editor:fullscreen .bracket-board, .bracket-editor.is-streaming .bracket-board { justify-content: center; gap: clamp(24px, 4vw, 72px); min-height: 55vh; padding: 24px 0; }
.bracket-editor:fullscreen .bracket-round, .bracket-editor.is-streaming .bracket-round { flex-basis: clamp(210px, 19vw, 310px); gap: 22px; }
.bracket-editor:fullscreen .bracket-round h4, .bracket-editor.is-streaming .bracket-round h4 { color: var(--misty-blue); font-size: 1em; }
.bracket-editor:fullscreen .bracket-match, .bracket-editor.is-streaming .bracket-match { border-color: var(--dreamy-periwinkle); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.bracket-editor:fullscreen .bracket-player, .bracket-editor.is-streaming .bracket-player { min-height: 48px; padding: 9px 12px; background: var(--cloud-white); font-size: 1em; }
.bracket-editor:fullscreen .bracket-player input, .bracket-editor.is-streaming .bracket-player input { width: 48px; font-size: 1.05em; }
.bracket-editor:fullscreen .bracket-header-actions .settings-btn-danger, .bracket-editor.is-streaming .bracket-header-actions .settings-btn-danger { display: none; }
.bracket-editor:fullscreen .settings-btn-secondary, .bracket-editor.is-streaming .settings-btn-secondary { border-color: var(--misty-blue); color: var(--cloud-white); background: transparent; }
.bracket-editor:fullscreen .settings-btn-secondary:hover, .bracket-editor.is-streaming .settings-btn-secondary:hover { background: var(--deep-lilac); }
.bracket-controls { display: flex; align-items: end; gap: 16px; padding: 16px; background: var(--cloud-lilac); }
.bracket-controls > div:first-child { flex: 1; }
.bracket-controls label { display: block; margin-bottom: 5px; font-weight: bold; }
.bracket-control-actions { display: flex; gap: 8px; }
.bracket-save-status { min-width: 120px; margin: 0; color: var(--dusty-blue-purple); font-size: .85em; }
.bracket-workspace { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 24px; padding: 20px 0; }
.bracket-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bracket-section-heading h3 { margin: 0; }
.bracket-section-heading span { color: var(--dusty-blue-purple); font-size: .85em; }
.bracket-participant-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 26px; align-items: center; gap: 6px; margin-bottom: 7px; }
.bracket-participant-row > span { color: var(--dusty-blue-purple); font-size: .85em; text-align: center; }
.bracket-participant-row .settings-input { min-width: 0; }
.bracket-remove { border: 0; color: var(--dusty-blue-purple); background: transparent; cursor: pointer; font-size: 1.4em; }
.bracket-remove:hover { color: #b94b68; }
.bracket-board-wrap { min-width: 0; overflow-x: auto; }
.bracket-board { display: flex; align-items: stretch; gap: 16px; min-width: max-content; padding: 8px 0 20px; }
.bracket-round { display: flex; flex: 0 0 190px; flex-direction: column; gap: 12px; }
.bracket-round h4 { margin: 0; color: var(--dusty-blue-purple); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; }
.bracket-match { display: grid; gap: 1px; margin-top: calc(var(--match-gap, 0px)); border: 1px solid var(--dusty-blue-purple); background: var(--dusty-blue-purple); }
.bracket-player { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 34px; padding: 5px 7px; background: var(--cloud-white); font-size: .85em; }
.bracket-player.is-winner { border-left: 4px solid #34a873; padding-left: 3px; background: #e1f4e9; font-weight: bold; }
.bracket-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-player input { width: 38px; padding: 3px; border: 1px solid var(--cloud-lilac); background: white; }
@media (max-width: 800px) {
    .brackets-layout, .bracket-workspace { grid-template-columns: 1fr; }
    .bracket-controls { align-items: stretch; flex-direction: column; }
    .bracket-control-actions { flex-wrap: wrap; }
}
:root {
    --night-indigo: #292752;
    --cloud-white: #F6F4FF;
    --cloud-lilac: #E5E1F7;
    --dreamy-periwinkle: #9296E8;
    --misty-blue: #B8D0F4;
    --moonlight-yellow: #F6D875;
    --midnight-ink: #292752;
    --dusty-blue-purple: #68688F;
    --deep-lilac: #403D70;
    --warm-white: #FFF9EE;
    --night-indigo-07: #29275211;
    --night-indigo-20: #29275233;
    --night-indigo-27: #29275244;
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
body{
    margin: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--night-indigo);
    font-family: DrowsyFont, sans-serif;
    background-color: var(--cloud-white);
}
main{
    margin: 20px;
    flex: 1 0 auto;
}
.login-page {
    margin: 0;
    width: 100%;
}
.splash-page {
    background-color: var(--night-indigo);
    transition: opacity 350ms ease;
}
.splash-page.splash-leaving {
    opacity: 0;
}
.splash {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px;
    color: var(--cloud-white);
    text-align: center;
    animation: splash-enter 500ms ease-out both;
}
.splash-logo {
    width: min(320px, 70vw);
    height: auto;
}
.splash p {
    margin: 0;
    color: var(--cloud-lilac);
    font-size: 1.2em;
    font-weight: bold;
}
@keyframes splash-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fit the complete bracket inside the stream viewport. */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    max-height: none;
    padding: clamp(14px, 2.5vh, 24px) clamp(18px, 3vw, 48px);
    overflow: hidden;
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header {
    flex: 0 0 auto;
    min-height: 0;
    padding-bottom: clamp(8px, 1.5vh, 16px);
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: clamp(10px, 2vh, 22px) 0 0;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 0;
    gap: clamp(8px, 1.5vw, 24px);
    padding: 4px 0;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    height: 100%;
    justify-content: space-around;
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    flex: 0 0 auto;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(5px, 1vh, 12px);
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    flex: 0 0 auto;
    font-size: clamp(.58rem, .8vw, .75rem);
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    flex: 0 0 auto;
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: clamp(25px, 5vh, 42px);
    padding: clamp(3px, .7vh, 8px) clamp(5px, .7vw, 11px);
    font-size: clamp(.62rem, .9vw, .9rem);
}
.bracket-editor:fullscreen .bracket-player input,
.bracket-editor.is-streaming .bracket-player input {
    width: clamp(24px, 3vw, 42px);
    min-height: clamp(18px, 3vh, 26px);
    padding: 2px;
    font-size: clamp(.62rem, .8vw, .85rem);
}
.bracket-editor:fullscreen .bracket-round:not(:last-child)::after,
.bracket-editor.is-streaming .bracket-round:not(:last-child)::after {
    right: calc(clamp(8px, 1.5vw, 24px) / -2);
}
@media (max-height: 700px) {
    .bracket-editor:fullscreen .bracket-editor-header,
    .bracket-editor.is-streaming .bracket-editor-header {
        padding-bottom: 6px;
    }
    .bracket-editor:fullscreen .bracket-event-label,
    .bracket-editor.is-streaming .bracket-event-label {
        margin-top: 3px;
        font-size: .78rem;
    }
}

/* Final fullscreen layout: restrained broadcast presentation. */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 28px 42px;
    box-sizing: border-box;
    overflow: auto;
    background: #202044;
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header {
    width: min(1320px, 100%);
    min-height: 76px;
    margin: 0 auto;
    padding: 0 0 18px;
    border-bottom: 1px solid #5f6090;
    box-sizing: border-box;
}
.bracket-editor:fullscreen .account-card-title,
.bracket-editor.is-streaming .account-card-title {
    color: #ffffff;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.1;
}
.bracket-editor:fullscreen .account-card-title .material-symbols-outlined,
.bracket-editor.is-streaming .account-card-title .material-symbols-outlined {
    color: #f6d875;
}
.bracket-editor:fullscreen .bracket-event-label,
.bracket-editor.is-streaming .bracket-event-label {
    margin-top: 7px;
    color: #c7c8e8;
    font-size: .95rem;
}
.bracket-editor:fullscreen .bracket-header-actions,
.bracket-editor.is-streaming .bracket-header-actions {
    align-self: center;
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    display: block;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 26px 0 10px;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    width: 100%;
    padding: 0;
    overflow-x: auto;
}
.bracket-editor:fullscreen .bracket-section-heading,
.bracket-editor.is-streaming .bracket-section-heading {
    margin-bottom: 18px;
}
.bracket-editor:fullscreen .bracket-section-heading h3,
.bracket-editor.is-streaming .bracket-section-heading h3 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}
.bracket-editor:fullscreen .bracket-section-heading span,
.bracket-editor.is-streaming .bracket-section-heading span {
    color: #b9bae0;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    align-items: flex-start;
    justify-content: center;
    gap: clamp(32px, 5vw, 80px);
    min-height: 0;
    padding: 10px 0 30px;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    flex: 0 0 clamp(210px, 19vw, 270px);
    gap: 24px;
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    display: block;
    margin: 0;
    color: #b9bae0;
    font-size: .72rem;
    letter-spacing: .14em;
}
.bracket-editor:fullscreen .bracket-round h4::after,
.bracket-editor.is-streaming .bracket-round h4::after {
    display: none;
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    border: 1px solid #7778a7;
    border-radius: 6px;
    background: #7778a7;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: 46px;
    padding: 8px 12px;
    background: #f8f7ff;
    color: #292752;
    font-size: .95rem;
}
.bracket-editor:fullscreen .bracket-player.is-winner,
.bracket-editor.is-streaming .bracket-player.is-winner {
    border-left: 4px solid #299865;
    padding-left: 8px;
    background: #e1f4e9;
    color: #145c3b;
}
.bracket-editor:fullscreen .bracket-player input,
.bracket-editor.is-streaming .bracket-player input {
    width: 42px;
    min-height: 26px;
    border: 1px solid #c4c2d9;
    border-radius: 4px;
    color: #292752;
    text-align: center;
}
@media (max-width: 800px) {
    .bracket-editor:fullscreen,
    .bracket-editor.is-streaming {
        padding: 18px;
    }
    .bracket-editor:fullscreen .bracket-editor-header,
    .bracket-editor.is-streaming .bracket-editor-header {
        min-height: 64px;
    }
    .bracket-editor:fullscreen .bracket-board,
    .bracket-editor.is-streaming .bracket-board {
        justify-content: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    .splash-page,
    .splash {
        animation: none;
        transition: none;
    }
}
.login-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100vh;
    width: 100%;
    align-items: center;
}
.Logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 40%;
    background-color: var(--night-indigo);
}
.Logo img { 
    max-width: 50%;
    max-height: 50%;
}
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 60%;
    background-color: var(--cloud-white);
} 
.login-form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-form-actions label {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--night-indigo);
    font-weight: bold;
    text-align: left;
    width: 100%;
}
.login-form-actions input {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 1em;
    width: 100%;
    border: none;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
}
.login-form-actions input[type="date"],
.settings-input[type="date"] {
    color-scheme: dark;
}
.login-form-actions textarea,
.login-form-actions select {
    margin-bottom: 20px;
    padding: 10px;
    font-size: 1em;
    width: 100%;
    border: none;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.login-form-actions button {
    padding: 10px;
    font-size: 1.2em;
    width: 80%;
    border: none;
    cursor: pointer;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
}
nav img {
    max-width: 10%;
    max-height: 10%;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul li {
    margin: 0 20px;
}
nav ul li a {
    text-decoration: none;
    color: var(--cloud-white);
    font-weight: bold;
    font-size: 1.2em;
    transition: color 160ms ease;
}
nav ul > li > a:hover,
nav ul > li > a:focus-visible {
    color: #fff;
    outline: none;
}
.nav-account-menu {
    position: relative;
    margin-left: 8px;
}
.nav-notifications-menu { position: relative; }
.nav-menu-toggle { display: none; }
.nav-notifications-trigger {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--cloud-white);
    cursor: pointer;
}
.nav-notifications-trigger .material-symbols-outlined { padding: 0; background: transparent; color: inherit; }
.nav-notification-count {
    position: absolute;
    top: -8px;
    right: -9px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cloud-white);
    color: var(--night-indigo);
    font-size: 0.7em;
    font-weight: bold;
}
.nav-guidelines-menu {
    position: relative;
}
.nav-events-menu {
    position: relative;
}
.nav-events-menu > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--cloud-white);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}
.nav-guidelines-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--cloud-white);
    font: inherit;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
}
.nav-account-avatar {
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    max-width: none;
    max-height: none;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 1px solid var(--cloud-white);
    border-radius: 50%;
    background-color: var(--cloud-white);
    object-fit: cover;
    overflow: hidden;
}
.nav-account-initial {
    display: grid;
    place-items: center;
    color: var(--night-indigo);
    font-size: 1.2em;
}
.nav-account-name {
    font-size: 1.2em;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-account-arrow.material-symbols-outlined {
    padding: 0;
    background: transparent;
    color: inherit;
}
.nav-guidelines-arrow.material-symbols-outlined {
    padding: 0;
    background: transparent;
    color: inherit;
}
.nav-account-dropdown {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-white);
    box-shadow: 4px 4px 0 var(--night-indigo);
    animation: nav-dropdown-in 140ms ease-out;
}
.nav-guidelines-dropdown {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-white);
    box-shadow: 4px 4px 0 var(--night-indigo);
    animation: nav-dropdown-in 140ms ease-out;
}
.nav-account-dropdown::before,
.nav-guidelines-dropdown::before {
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 8px;
    content: "";
}
.nav-account-menu:hover .nav-account-dropdown,
.nav-account-menu:focus-within .nav-account-dropdown,
.nav-account-menu.is-open .nav-account-dropdown {
    display: block;
}
.nav-guidelines-menu:hover .nav-guidelines-dropdown,
.nav-guidelines-menu:focus-within .nav-guidelines-dropdown,
.nav-guidelines-menu.is-open .nav-guidelines-dropdown {
    display: block;
}
.nav-events-menu:hover .nav-events-dropdown,
.nav-events-menu:focus-within .nav-events-dropdown {
    display: block;
}
.nav-account-dropdown a {
    display: block;
    padding: 8px 10px;
    color: var(--night-indigo);
    font-size: 1em;
}
.nav-guidelines-dropdown a {
    display: block;
    padding: 8px 10px;
    color: var(--night-indigo);
    font-size: 1em;
}
.nav-account-dropdown a:hover,
.nav-account-dropdown a:focus-visible {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    outline: none;
}
.nav-guidelines-dropdown a:hover,
.nav-guidelines-dropdown a:focus-visible {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    outline: none;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes nav-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
main {
    animation: page-enter 260ms ease-out both;
}
button,
.planner-user,
.profile-detail,
.profile-detail-full,
.roster-stats div {
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}
button:not(:disabled):hover {
    transform: translateY(-1px);
}
.planner-user:hover {
    transform: translateX(3px);
    box-shadow: 3px 3px 0 var(--night-indigo);
}
.profile-detail:hover,
.profile-detail-full:hover,
.roster-stats div:hover {
    box-shadow: 3px 3px 0 var(--night-indigo);
}
tr {
    transition: background-color 160ms ease;
}
tbody tr:not(.rank-group-header):not(.bingo-rank-header):hover {
    background-color: var(--cloud-lilac);
}

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

.profile-page {
    max-width: 70%;
    margin: 60px auto;
}
.profile-heading {
    border-bottom: 6px solid var(--night-indigo);
    padding-bottom: 24px;
}
.profile-subheading img{
    width: 100%;
    height: 30%;
}
.profile-eyebrow {
    margin: 0 0 8px;
    color: var(--dusty-blue-purple);
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.profile-heading h1 {
    margin: 0;
    font-size: 2.6em;
}
.profile-subtitle {
    margin: 8px 0 0;
    font-size: 1.1em;
}
.profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    background-color: var(--night-indigo);
    border: 1px solid var(--night-indigo);
}
.profile-detail{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 72px;
    padding: 18px;
    background-color: var(--cloud-white);
}
.profile-detail-full {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 72px;
    padding: 18px;
    background-color: var(--cloud-white);
}
.profile-detail span {
    color: var(--dusty-blue-purple);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}
.profile-detail strong {
    overflow-wrap: anywhere;
    font-size: 1.15em;
}

.roster-actions {
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.roster-actions form {
    margin: 0;
}
.dashboard-announcements { margin: 0 0 24px; padding: 18px; border: 1px solid var(--night-indigo); background: var(--cloud-lilac); }
.dashboard-announcements > span { font-weight: bold; text-transform: uppercase; font-size: .85em; }
.dashboard-announcements article { padding: 8px 0; border-top: 1px solid var(--night-indigo-27); }
.dashboard-announcements article p { margin: 5px 0; white-space: pre-wrap; }
.dashboard-announcements small { color: var(--dusty-blue-purple); }
.announcement-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.announcement-meta form { margin: 0; }
.announcement-meta button { padding: 4px 8px; border: 1px solid var(--night-indigo); border-radius: 4px; background: transparent; color: var(--night-indigo); font: inherit; font-size: .82em; font-weight: bold; cursor: pointer; }
.announcement-meta button:hover { background: var(--night-indigo); color: var(--cloud-white); }
.announcement-actions { display: flex; gap: 6px; }
.announcement-pin { display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 3px; background: var(--night-indigo); color: var(--cloud-white); font-size: .75em; font-weight: bold; }
.attendance-history ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.attendance-history li { display: flex; justify-content: space-between; gap: 8px; padding: 8px; background: var(--cloud-lilac); }
.attendance-status { font-weight: bold; }
.attendance-status.attended { color: #176b39; }
.attendance-status.absent { color: #8a3024; }
.dashboard-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; }
.dashboard-widgets a { display: flex; flex-direction: column; gap: 4px; padding: 15px; background: var(--night-indigo); color: var(--cloud-white); text-decoration: none; }
.dashboard-widgets strong { font-size: 1.25em; }
.announcement-form { display: grid; gap: 8px; margin: 0 0 25px; }
.announcement-form textarea { padding: 8px; border: 1px solid var(--night-indigo); background: var(--cloud-lilac); font: inherit; }
.announcement-form button { justify-self: start; padding: 8px 12px; border: 0; background: var(--night-indigo); color: var(--cloud-white); font: inherit; font-weight: bold; cursor: pointer; }
.report-history { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; }
.report-history a { padding: 5px 8px; background: var(--night-indigo); color: var(--cloud-white); text-decoration: none; }
.nav-notifications-dropdown {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--night-indigo);
    background: var(--cloud-white);
    box-shadow: 4px 4px 0 var(--night-indigo);
}
.nav-notifications-dropdown a, .nav-notifications-dropdown span { display: block; padding: 10px; color: var(--night-indigo); font-weight: bold; text-decoration: none; }
.nav-notifications-dropdown a:hover { background: var(--night-indigo); color: var(--cloud-white); }
.nav-account-dropdown.is-open, .nav-guidelines-dropdown.is-open, .nav-notifications-dropdown.is-open { display: block; }
.roster-actions > .action-button,
.roster-actions > form {
    width: 240px;
}
.roster-actions > form .action-button {
    width: 100%;
}
.dashboard-actions,
.roster-actions {
    margin-top: 16px;
}
.roster-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.roster-filters input, .roster-filters select { min-height: 38px; padding: 7px 10px; border: 1px solid var(--night-indigo); border-radius: 4px; background: var(--cloud-lilac); color: var(--night-indigo); font: inherit; }
.staff-timeline { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--night-indigo-27); }
.staff-timeline > span { color: var(--dusty-blue-purple); font-size: .85em; font-weight: bold; text-transform: uppercase; }
.staff-timeline ul { margin: 8px 0 0; padding-left: 20px; }
.staff-timeline li { margin: 5px 0; }
.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--night-indigo);
    border-radius: 5px;
    box-shadow: 3px 3px 0 var(--dusty-blue-purple);
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
}
.action-button .material-symbols-outlined {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    font-size: 1.2em;
}
.action-button-primary {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
}
.action-button-secondary {
    background-color: transparent;
    color: var(--cloud-white);
}
.action-button:not(:disabled):hover,
.action-button:not(:disabled):focus-visible {
    box-shadow: 5px 5px 0 var(--dusty-blue-purple);
    outline: none;
}
.action-button-primary:not(:disabled):hover,
.action-button-primary:not(:disabled):focus-visible {
    background-color: var(--dusty-blue-purple);
    color: #fff;
}
.action-button-secondary:not(:disabled):hover,
.action-button-secondary:not(:disabled):focus-visible {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
}
.roster-sub {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.roster-content {
    width: 100%;
    overflow-x: auto;
}
    
.roster-content button:not(.action-button) {
    padding: 2px;
    font-size: 1.2em;
    border: none;
    cursor: pointer;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;

}
.roster-content .roster-profile-button {
    padding: 0;
    font-size: inherit;
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.roster-content .roster-profile-button:not(:disabled):hover {
    transform: none;
}

/* ==========================================================================
   MODERN BINGO PAGE STYLING
   ========================================================================== */
.bingo-page {
    max-width: 1720px;
    width: calc(100% - 40px);
    margin: 36px auto 80px;
}

.bingo-heading-wrap {
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--dusty-blue-purple) 0%, var(--night-indigo) 55%, var(--night-indigo) 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    padding: 18px 18px 24px;
    margin-bottom: 24px;
}

.bingo-heading-wrap h1 {
    color: var(--cloud-white) !important;
}

.bingo-heading-wrap .profile-eyebrow {
    color: var(--misty-blue) !important;
}

.bingo-heading-wrap .profile-subtitle {
    color: var(--misty-blue);
}

.bingo-heading-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.bingo-template-management {
    margin-top: 18px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 12px;
    background: var(--night-indigo);
    overflow: hidden;
}

.bingo-template-details > summary {
    list-style: none;
}

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

.bingo-template-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--cloud-white);
}

.bingo-template-summary:hover,
.bingo-template-summary:focus-visible {
    background: var(--dusty-blue-purple);
}

.bingo-template-eyebrow,
.bingo-template-active {
    display: block;
}

.bingo-template-eyebrow {
    margin-bottom: 4px;
    color: var(--dusty-blue-purple);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bingo-template-active {
    color: var(--cloud-white);
    font-size: 0.95em;
}

.bingo-template-active strong {
    color: var(--moonlight-yellow);
}

.bingo-template-chevron {
    color: #b7b2a7;
    transition: transform 160ms ease;
}

.bingo-template-details[open] .bingo-template-chevron {
    transform: rotate(180deg);
}

.bingo-template-content {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
    border-top: 1px solid var(--dusty-blue-purple);
}

.bingo-template-activation {
    padding-top: 14px;
}

.bingo-template-activation form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.bingo-template-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 10px;
    background: var(--night-indigo);
}

.bingo-template-field {
    display: grid;
    gap: 8px;
}

.bingo-template-field label {
    color: var(--cloud-white);
    font-weight: 700;
}

.bingo-template-field > span {
    color: var(--dusty-blue-purple);
    font-size: 0.82em;
}

.bingo-template-field code {
    color: var(--cloud-white);
}

.bingo-template-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    font: inherit;
    outline: none;
}

textarea.bingo-template-input {
    resize: vertical;
}

.bingo-template-input::placeholder {
    color: var(--dusty-blue-purple);
}

.bingo-template-input:focus {
    border-color: #b7b2a7;
    box-shadow: 0 0 0 2px rgba(183, 178, 167, 0.2);
}

.bingo-template-images {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 10px;
    background: var(--night-indigo);
}

.bingo-template-image-heading {
    color: var(--cloud-white);
    font-weight: 700;
}

.bingo-template-images > span {
    color: var(--dusty-blue-purple);
    font-size: 0.82em;
}

.bingo-filler-position-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
}

.bingo-filler-position {
    display: grid;
    gap: 6px;
    min-height: 90px;
    padding: 8px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 7px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    font-size: 0.8em;
}

.bingo-filler-position-centre {
    align-content: center;
    background: linear-gradient(150deg, rgba(124, 58, 237, 0.24) 0%, rgba(53, 27, 102, 0.2) 100%);
    border-color: #7c3aed66;
    text-align: center;
}

.bingo-filler-position-centre small {
    color: #9f91bb;
}

.bingo-filler-position img {
    width: 100%;
    height: 42px;
    object-fit: contain;
    border-radius: 4px;
}

.bingo-filler-position input[type="file"] {
    width: 100%;
    min-width: 0;
    color: var(--dusty-blue-purple);
    font: inherit;
}

.bingo-image-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d7b4b4 !important;
    font-size: 0.78em;
    font-weight: 600;
}

.bingo-image-remove input[type="checkbox"] {
    width: auto;
}

.bingo-template-image-field {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) 70px;
    align-items: center;
    gap: 10px;
    color: var(--cloud-white);
    font-size: 0.88em;
}

.bingo-template-image-field input[type="file"] {
    width: 100%;
    color: #b7b2a7;
    font: inherit;
}

.bingo-template-image-field img {
    width: 70px;
    height: 45px;
    object-fit: cover;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 5px;
}

.bingo-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bingo-search-input {
    min-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    font: inherit;
    font-size: 0.9em;
    outline: none;
}

.bingo-search-input:focus {
    border-color: var(--cloud-white);
    box-shadow: 0 0 0 2px rgba(183, 178, 167, 0.2);
}

.bingo-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.85em;
    font-weight: bold;
}

.bingo-legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85em;
    backdrop-filter: blur(2px);
}

.bingo-legend-complete {
    background: #10b98122;
    color: #34d399;
    border: 1px solid #10b98144;
}

.bingo-legend-pending {
    background: #ef444422;
    color: #f87171;
    border: 1px solid #ef444444;
}

.bingo-challenge-guide {
    margin-top: 16px;
    border: 1px solid #4a463f;
    border-radius: 12px;
    background: linear-gradient(165deg, #1f1e1b 0%, #171614 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 14px 14px 12px;
}

.bingo-challenge-guide-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #efe9dc;
    font-weight: 700;
    font-size: 0.94em;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.bingo-challenge-guide-header .material-symbols-outlined {
    font-size: 1.1em;
    padding: 0;
    background: transparent;
}

.bingo-challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 12px;
}

.bingo-challenge-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--dusty-blue-purple) 0%, #22211e 100%);
    border: 1px solid #3d3933;
    border-radius: 10px;
    padding: 11px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bingo-challenge-item::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--moonlight-yellow), var(--dreamy-periwinkle), var(--misty-blue));
    opacity: 0.85;
}

.bingo-challenge-item:hover {
    transform: translateY(-2px);
    border-color: #5b564c;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.bingo-challenge-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bingo-challenge-badge {
    background: #34312b;
    border: 1px solid #5c574d;
    color: #ece5d8;
    border-radius: 16px;
    padding: 3px 9px;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
}

.bingo-challenge-target {
    color: #ffd46d;
    font-weight: 700;
    font-size: 0.84em;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.18);
}

.bingo-challenge-text {
    margin: 8px 0 0;
    color: var(--misty-blue);
    font-size: 0.83em;
    line-height: 1.45;
}

.bingo-player-card-wrap {
    margin-top: 16px;
    border: 1px solid #4a463f;
    border-radius: 12px;
    background: radial-gradient(circle at top left, #2f2b24 0%, #221f1a 58%, #191713 100%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.23);
    padding: 16px;
}

.bingo-player-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.bingo-player-card-header h2 {
    color: var(--cloud-white);
    font-size: 1.15em;
}

.bingo-player-card-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #171512;
    border: 1px solid #3f3a31;
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
}

.bingo-player-progress-fraction {
    color: var(--cloud-white);
    font-size: 0.82em;
    font-weight: 700;
}

.bingo-player-progress-pct {
    color: #34d399;
    font-size: 0.88em;
    font-weight: 800;
}

.bingo-player-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
}

.bingo-player-grid-head {
    background: #151310;
    border: 1px solid #3f3a31;
    border-radius: 8px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd46d;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.bingo-player-cell {
    border-radius: 10px;
    border: 1px solid #403a33;
    background: #1b1814;
    height: 106px;
    min-height: 106px;
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.bingo-player-cell-btn,
.bingo-player-cell-static {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px;
    cursor: pointer;
}

.bingo-goal-image {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
}

.bingo-goal-image-admin {
    height: 42px;
}

.bingo-player-cell-btn {
    border-radius: 10px;
}

.bingo-player-cell-title {
    color: var(--cloud-white);
    font-size: 0.86em;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.bingo-player-cell-sub {
    color: #a39c8f;
    font-size: 0.77em;
    line-height: 1.33;
}

.bingo-player-cell.is-pending .bingo-player-cell-btn:hover {
    background: transparent;
}

.bingo-player-cell.is-pending:hover {
    background: #2b2621;
    transform: translateY(-2px);
    border-color: #6d6659;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
}

.bingo-player-cell.is-complete {
    border-color: rgba(52, 211, 153, 0.45);
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.22) 0%, rgba(17, 116, 87, 0.2) 100%);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.15);
}

.bingo-player-cell.is-complete .bingo-player-cell-title,
.bingo-player-cell.is-complete .bingo-goal-icon {
    color: #57e7b4;
}

.bingo-player-cell.is-free {
    border-color: #7c3aed66;
    background: linear-gradient(150deg, rgba(124, 58, 237, 0.24) 0%, rgba(53, 27, 102, 0.2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.bingo-player-cell.is-free .bingo-player-cell-title {
    color: #d9c7ff;
}

.bingo-player-cell.is-free .bingo-player-cell-sub {
    color: #bba7e9;
}

.bingo-player-cell.is-free .bingo-player-cell-icon {
    color: #d9c7ff;
    background: transparent;
    padding: 0;
    font-size: 1.35em;
}

.bingo-player-cell.is-empty {
    border-style: dashed;
    opacity: 0.35;
    min-height: 106px;
}

.bingo-player-cell.bingo-filler,
.bingo-cell.bingo-filler {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: default;
    opacity: 0.85;
}

.bingo-player-cell.bingo-filler {
    border-color: #7c3aed66;
    background: linear-gradient(150deg, rgba(124, 58, 237, 0.24) 0%, rgba(53, 27, 102, 0.2) 100%);
}

.bingo-cell.bingo-filler {
    min-height: 54px;
}

.bingo-player-empty-state {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b3aba0;
    background: var(--night-indigo);
    border: 1px dashed #4d473d;
    border-radius: 8px;
    padding: 12px;
}

.bingo-player-empty-state .material-symbols-outlined {
    background: transparent;
    color: var(--moonlight-yellow);
    padding: 0;
}

.bingo-admin-tracker {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.bingo-admin-empty {
    background: var(--night-indigo);
    border: 1px solid #3d3933;
    border-radius: 10px;
    color: var(--dusty-blue-purple);
    padding: 20px;
    text-align: center;
}

.bingo-admin-group {
    border: 1px solid #3d3933;
    border-radius: 10px;
    background: linear-gradient(180deg, #23211d 0%, var(--night-indigo) 100%);
    overflow: hidden;
}

.bingo-admin-rank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #322f2a;
    background: #161513;
    color: var(--cloud-white);
    font-size: 0.92em;
    font-weight: 700;
}

.bingo-admin-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.bingo-admin-card {
    border: 1px solid #3d3933;
    border-radius: 8px;
    background: #211f1b;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bingo-admin-card.is-open {
    border-color: #5d574d;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.bingo-admin-toggle {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    text-align: left;
}

.bingo-admin-toggle::-webkit-details-marker {
    display: none;
}

.bingo-admin-toggle::marker {
    content: '';
}

.bingo-admin-summary-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bingo-admin-summary-names {
    min-width: 0;
}

.bingo-admin-summary-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 240px;
    justify-content: flex-end;
}

.bingo-admin-progress-wrap {
    min-width: 160px;
    max-width: 220px;
    width: 100%;
}

.bingo-admin-chevron {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    line-height: 1;
    color: #a7a193;
    transition: transform 180ms ease;
}

.bingo-admin-toggle[aria-expanded="true"] .bingo-admin-chevron {
    transform: rotate(180deg);
}

.bingo-admin-details {
    border-top: 1px solid #34312b;
    padding: 12px;
    display: grid;
    gap: 12px;
}

.bingo-admin-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 8px;
}

.bingo-admin-totals-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bingo-admin-totals-row .bingo-total-cell {
    min-width: 120px;
    max-width: 160px;
    flex: 1 1 140px;
    text-align: left !important;
    padding: 0 !important;
}

.bingo-admin-total-label {
    display: block;
    font-size: 0.75em;
    color: var(--dusty-blue-purple);
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bingo-board-container {
    background: linear-gradient(180deg, var(--night-indigo) 0%, var(--night-indigo) 100%);
    border-radius: 12px;
    border: 1px solid #3f3b34;
    overflow-x: auto;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.bingo-table {
    width: 100%;
    min-width: 1300px;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.92em;
}

/* Super header row */
.bingo-super-header th {
    padding: 10px 14px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    background: var(--night-indigo) !important;
    border-bottom: 2px solid var(--dusty-blue-purple) !important;
    border-top: none !important;
    color: var(--dusty-blue-purple) !important;
    text-align: center;
}

.bingo-super-hp {
    color: var(--moonlight-yellow) !important;
    border-left: 2px solid var(--dusty-blue-purple) !important;
    border-right: 2px solid var(--dusty-blue-purple) !important;
}

.bingo-super-cc {
    color: var(--misty-blue) !important;
    border-right: 2px solid var(--dusty-blue-purple) !important;
}

.bingo-super-summary {
    color: var(--dreamy-periwinkle) !important;
}

/* Sub header row */
.bingo-table thead th {
    padding: 10px 8px;
    background: var(--night-indigo);
    color: var(--cloud-lilac);
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--dusty-blue-purple);
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
    text-align: center;
}

.bingo-th-member {
    text-align: left !important;
    padding-left: 18px !important;
    min-width: 220px;
}

.bingo-th-rank {
    min-width: 130px;
    text-align: left !important;
}

.bingo-divider-hp-start {
    border-left: 2px solid var(--dusty-blue-purple) !important;
}

.bingo-divider-cc-start {
    border-left: 2px solid var(--dusty-blue-purple) !important;
}

.bingo-divider-summary-start {
    border-left: 2px solid var(--dusty-blue-purple) !important;
}

/* Rank group section headers */
.bingo-rank-header th {
    padding: 10px 18px !important;
    background: #161513 !important;
    color: var(--cloud-white) !important;
    text-align: left !important;
    font-size: 0.95em !important;
    font-weight: bold !important;
    border-top: 1px solid var(--dusty-blue-purple) !important;
    border-bottom: 1px solid var(--dusty-blue-purple) !important;
}

.bingo-rank-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* User Row cells */
.bingo-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #282724;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    background: var(--night-indigo);
    color: var(--cloud-white);
}

.bingo-table tbody tr:hover td {
    background: #2a2926 !important;
}

/* Member column info */
.bingo-member-cell {
    padding-left: 18px !important;
    text-align: left !important;
}

.bingo-member-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bingo-member-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bingo-member-display {
    font-weight: bold;
    color: var(--cloud-white);
    font-size: 1em;
    white-space: nowrap;
}

.bingo-member-sub {
    font-size: 0.78em;
    color: var(--dusty-blue-purple);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* Bingo Goal Target Tiles */
.bingo-cell {
    padding: 6px !important;
    text-align: center !important;
    min-width: 82px;
}

.bingo-goal-btn,
.bingo-goal-static {
    width: 100%;
    min-height: 38px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
    font-size: 0.88em;
    font-weight: bold;
    box-sizing: border-box;
    transition: all 170ms ease;
    border: 1px solid transparent;
    padding: 6px 8px;
    margin: 0 !important;
}

/* Completed Goal Style */
.bingo-cell.is-complete .bingo-goal-btn,
.bingo-cell.is-complete .bingo-goal-static {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.22) 0%, rgba(17, 116, 87, 0.2) 100%);
    border-color: rgba(52, 211, 153, 0.45);
    color: #57e7b4;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.16);
}

.bingo-cell.is-complete .bingo-goal-btn:hover {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.32) 0%, rgba(19, 137, 102, 0.26) 100%);
    border-color: rgba(52, 211, 153, 0.72);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Pending Goal Style */
.bingo-cell.is-pending .bingo-goal-btn,
.bingo-cell.is-pending .bingo-goal-static {
    background: linear-gradient(160deg, #1d1b18 0%, #171614 100%);
    border-color: #3f3b34;
    color: #aba598;
}

.bingo-cell.is-pending .bingo-goal-btn:hover {
    background: linear-gradient(160deg, var(--dusty-blue-purple) 0%, #22211e 100%);
    border-color: #6d675c;
    color: var(--cloud-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.bingo-goal-icon {
    font-size: 1.1em !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Total HP & CC Inputs */
.bingo-total-cell {
    min-width: 90px;
    text-align: center !important;
    padding: 6px !important;
}

.bingo-total-box {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bingo-total-input {
    width: 100%;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--cloud-white);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    outline: none;
    padding: 0;
}

.bingo-hp-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 6px 8px;
    outline: none;
    color: var(--moonlight-yellow);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
}

.bingo-cc-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 6px 8px;
    outline: none;
    color: var(--misty-blue);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
}

.bingo-hp-input:focus,
.bingo-cc-input:focus {
    border-color: var(--cloud-white);
    box-shadow: 0 0 0 2px rgba(183, 178, 167, 0.2);
}

.bingo-total-box:focus-within {
    border-color: var(--cloud-white);
    box-shadow: 0 0 0 2px rgba(183, 178, 167, 0.2);
}

/* Staff Row Progress Bar */
.bingo-progress-cell {
    min-width: 110px;
    padding: 8px 14px !important;
}

.bingo-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bingo-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    font-weight: bold;
}

.bingo-progress-bar {
    height: 6px;
    background: var(--night-indigo);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--dusty-blue-purple);
}

.bingo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 4px;
    transition: width 240ms ease;
}

.bingo-board-container::-webkit-scrollbar {
    height: 10px;
}

.bingo-board-container::-webkit-scrollbar-track {
    background: var(--night-indigo);
    border-radius: 20px;
}

.bingo-board-container::-webkit-scrollbar-thumb {
    background: var(--dusty-blue-purple);
    border-radius: 20px;
}

.bingo-board-container::-webkit-scrollbar-thumb:hover {
    background: var(--dusty-blue-purple);
}

.guidelines-page {
    max-width: 960px;
    margin: 48px auto;
}
.guidelines-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 3px solid var(--night-indigo);
}
.guidelines-heading h1,
.guidelines-heading p {
    margin: 0;
}
.guidelines-heading p {
    margin-top: 4px;
    color: var(--night-indigo);
}
.guidelines-message {
    margin: 16px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--night-indigo);
    font-weight: bold;
}
.guidelines-message.is-success {
    background-color: #b7dca8;
}
.guidelines-message.is-error {
    background-color: #ea999d;
}
.guidelines-edit-toggle,
.guidelines-editor-actions button {
    padding: 8px 12px;
    border: 1px solid var(--night-indigo);
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    font: inherit;
    cursor: pointer;
}
.guidelines-document {
    min-height: 220px;
    padding: 28px 0;
    white-space: pre-wrap;
    line-height: 1.6;
}
.guidelines-document.is-empty {
    color: var(--dusty-blue-purple);
    font-style: italic;
}
.guidelines-editor {
    border-top: 1px solid var(--night-indigo);
    padding-top: 18px;
}
.guidelines-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: sticky;
    top: 12px;
    z-index: 2;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-white);
}
.guidelines-toolbar button,
.guidelines-toolbar select,
.guidelines-toolbar input[type="color"] {
    height: 34px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-white);
    color: var(--night-indigo);
    font: inherit;
    cursor: pointer;
}
.guidelines-toolbar button {
    display: grid;
    width: 34px;
    padding: 0;
    place-items: center;
}
.guidelines-toolbar select {
    padding: 0 6px;
}
.guidelines-toolbar input[type="color"] {
    width: 34px;
    padding: 3px;
}
.guidelines-toolbar .material-symbols-outlined {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
}
.guidelines-rich-editor {
    min-height: 360px;
    padding: 16px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-lilac);
    color: var(--night-indigo);
    line-height: 1.6;
    outline: none;
}
.guidelines-rich-editor:focus {
    outline: 2px solid var(--night-indigo);
    outline-offset: -2px;
}
.guidelines-editor-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.guidelines-editor-actions button[type="button"] {
    background-color: transparent;
    color: var(--night-indigo);
}
.feedback-list {
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.feedback-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--night-indigo-27);
}
.feedback-list li:last-child {
    border-bottom: 0;
}
.feedback-entry-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.feedback-entry-meta small {
    color: var(--dusty-blue-purple);
}
.feedback-entry-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.feedback-entry-actions form {
    margin: 0;
}
.feedback-delete-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid var(--night-indigo);
    border-radius: 4px;
    background: transparent;
    color: var(--night-indigo);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82em;
    font-weight: bold;
}
.feedback-delete-button .material-symbols-outlined {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    font-size: 1.1em;
}
.feedback-delete-button:not(:disabled):hover,
.feedback-delete-button:not(:disabled):focus-visible {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    outline: none;
}
.feedback-list p {
    margin: 8px 0 0;
    white-space: pre-wrap;
}
.event-feedback-review {
    border-top: 6px solid var(--dreamy-periwinkle);
    gap: 12px;
}
.event-feedback-review > span {
    color: var(--dusty-blue-purple);
    font-size: .85em;
    font-weight: bold;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.event-feedback-review .feedback-list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}
.event-feedback-review .feedback-list li {
    padding: 18px;
    border: 1px solid var(--night-indigo-27);
    border-left: 4px solid var(--dreamy-periwinkle);
    background: #c9c6bd;
}
.event-feedback-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.event-feedback-summary > strong {
    padding: 5px 9px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    font-size: 1em;
}
.event-feedback-summary > span {
    color: var(--night-indigo);
    font-size: .9em;
    font-weight: bold;
    text-align: right;
}
.event-feedback-answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 0;
}
.event-feedback-answers div {
    padding: 11px;
    background: #d7d4cc;
}
.event-feedback-answers dt {
    color: var(--dusty-blue-purple);
    font-size: .7em;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.event-feedback-answers dd {
    margin: 5px 0 0;
    font-weight: bold;
}
.event-feedback-comments {
    margin-top: 16px;
    padding: 12px 14px 2px;
    border-top: 1px solid var(--night-indigo-27);
    background: #d7d4cc;
}
.event-feedback-comments p { margin: 0 0 10px; }
.event-feedback-page { max-width: 940px; margin: 60px auto 80px; }
.event-feedback-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px max(20px, 5vw); background: var(--night-indigo); color: var(--cloud-white); font-size: .78em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.event-feedback-header img { display: block; width: 145px; height: auto; }
.event-feedback-header span { color: #9a9388; }
.event-feedback-intro { max-width: 680px; }
.event-feedback-intro h1 { margin: 0; font-size: clamp(2.8em, 7vw, 5.8em); line-height: .9; }
.event-feedback-intro h1 em { color: var(--dreamy-periwinkle); font-style: normal; }
.event-feedback-intro p:last-child { max-width: 560px; margin: 24px 0 0; font-size: 1.12em; line-height: 1.6; }
.event-feedback-form { display: grid; gap: 1px; margin-top: 42px; background: var(--night-indigo); border: 1px solid var(--night-indigo); }
.event-feedback-question { display: grid; gap: 14px; margin: 0; padding: 24px; border: 0; background: var(--cloud-white); }
.event-feedback-question legend { max-width: 760px; padding: 0; font-size: 1.2em; font-weight: bold; line-height: 1.25; }
.event-feedback-question legend span { display: block; margin-bottom: 5px; color: #8a3f84; font-size: .7em; letter-spacing: .12em; text-transform: uppercase; }
.event-feedback-question > p { max-width: 700px; margin: -4px 0 0; color: var(--dusty-blue-purple); line-height: 1.5; }
.event-feedback-text-label { color: var(--dusty-blue-purple); font-size: .9em; font-weight: bold; }
.event-feedback-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.event-feedback-options label { position: relative; display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--dusty-blue-purple); background: rgba(255,255,255,.16); cursor: pointer; font-weight: bold; line-height: 1.2; }
.event-feedback-options label:has(input:checked) { border-color: var(--night-indigo); background: var(--night-indigo); color: var(--cloud-white); }
.event-feedback-options input { position: absolute; opacity: 0; }
.event-feedback-options label:focus-within { outline: 2px solid var(--dreamy-periwinkle); outline-offset: 2px; }
.event-feedback-question textarea { width: 100%; min-height: 120px; resize: vertical; padding: 12px; border: 1px solid var(--dusty-blue-purple); background: rgba(255,255,255,.16); color: var(--night-indigo); font: inherit; line-height: 1.5; }
.event-feedback-question textarea:focus { border-color: var(--night-indigo); box-shadow: 0 0 0 1px var(--night-indigo); outline: none; }
.event-feedback-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: var(--dreamy-periwinkle); }
.event-feedback-submit p { max-width: 520px; margin: 0; line-height: 1.45; }
.event-feedback-submit button { padding: 13px 18px; border: 1px solid var(--night-indigo); background: var(--night-indigo); color: var(--cloud-white); cursor: pointer; font: inherit; font-weight: bold; }
.event-feedback-submit button:hover, .event-feedback-submit button:focus-visible { background: var(--dusty-blue-purple); color: #fff; outline: none; }
.event-feedback-notice { margin-top: 28px; padding: 14px 16px; border: 1px solid var(--night-indigo); font-weight: bold; }
.event-feedback-notice-success { background: var(--cloud-lilac); }
.event-feedback-notice-error { background: #e4b3a7; }
.event-feedback-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px max(20px, 5vw); background: var(--night-indigo); color: var(--cloud-white); font-size: .78em; }
.event-feedback-footer span:last-child { color: #9a9388; }
.planner-page {
    max-width: 1440px;
    width: calc(100% - 40px);
    margin: 28px auto;
}
.planner-heading,
.planner-actions,
.planner-week-form {
    display: flex;
    align-items: end;
    gap: 12px;
}
.planner-heading {
    justify-content: space-between;
    margin-bottom: 18px;
}
.planner-heading h1,
.planner-heading p,
.planner-actions p {
    margin: 0;
}
.planner-heading h1 {
    font-size: 2em;
}
.planner-heading p,
.planner-actions p {
    color: var(--night-indigo);
}
.planner-week-form label {
    font-weight: bold;
}
.planner-week-form input,
.planner-week-form button,
.planner-actions button {
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid var(--night-indigo);
    font: inherit;
}
.planner-week-form input {
    padding: 7px;
    background-color: var(--cloud-white);
    color: var(--night-indigo);
}
.planner-week-form button,
.planner-actions button {
    padding: 7px 12px;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    cursor: pointer;
}
.planner-actions {
    justify-content: space-between;
    margin-bottom: 14px;
}
.planner-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 12px;
    align-items: start;
}
.planner-lane {
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-lilac);
}
.planner-lane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
}
.planner-lane-header h2,
.planner-lane-header span {
    margin: 0;
}
.planner-lane-header h2 {
    font-size: 1.05em;
}
.planner-lane-header span {
    display: block;
    font-size: 0.8em;
}
.planner-capacity {
    text-align: right;
}
.planner-dropzone {
    min-height: 104px;
    padding: 8px;
}
.planner-dropzone.is-drag-over {
    background-color: #b7dca8;
}
.planner-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    padding: 8px;
    border: 1px solid var(--night-indigo);
    background-color: var(--cloud-white);
    cursor: grab;
}
.planner-user:last-child {
    margin-bottom: 0;
}
.planner-user.is-dragging {
    opacity: 0.45;
}
.planner-user strong,
.planner-user span:not(.material-symbols-outlined) {
    display: block;
}
.planner-user span:not(.material-symbols-outlined) {
    color: var(--night-indigo);
    font-size: 0.85em;
}
.planner-remove-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #b91c1c;
    background: #fee2e2;
}
.planner-remove-section h2,
.planner-remove-section p {
    margin: 0;
}
.planner-remove-section h2 {
    color: #991b1b;
    font-size: 1em;
}
.planner-remove-section p {
    margin-top: 4px;
    color: #7f1d1d;
    font-size: 0.85em;
}
.planner-remove-dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    min-width: 280px;
    padding: 8px 16px;
    border: 2px dashed #b91c1c;
    color: #991b1b;
    font-weight: bold;
    text-align: center;
}
.planner-remove-dropzone > .planner-user {
    flex: 1 1 100%;
    margin-bottom: 0;
    text-align: left;
}
.planner-remove-dropzone.is-drag-over {
    background: #fecaca;
    border-color: #7f1d1d;
    color: #7f1d1d;
}
.planner-drag-handle.material-symbols-outlined {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    color: var(--night-indigo);
}

.profile-page form.login-form-actions {
    max-width: 400px;
}

.profile-page button {
    padding: 8px 14px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
    margin-top: 8px;
    margin-right: 10px;
}

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 5px;
    font-weight: bold;
}
.status-approved {
    background-color: #E4FFE8;
}
.status-denied {
    background-color: #F9C0BC;
}
.status-pending {
    background-color: #FFF1C2;
}

/* ==========================================================================
   MODERN SETTINGS PAGE STYLING
   ========================================================================== */
.settings-page {
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

.settings-header {
    border-bottom: 4px solid var(--night-indigo);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.settings-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.settings-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.settings-stat-item {
    background: var(--night-indigo);
    color: var(--cloud-white);
    padding: 14px 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--dusty-blue-purple);
}

.settings-stat-icon {
    font-size: 2em !important;
    background: var(--night-indigo);
    color: var(--cloud-white);
    padding: 8px;
    border-radius: 6px;
}

.settings-stat-info {
    display: flex;
    flex-direction: column;
}

.settings-stat-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dusty-blue-purple);
    font-weight: bold;
}

.settings-stat-val {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--cloud-white);
    margin-top: 2px;
}

/* Alerts */
.settings-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-weight: 500;
}
.settings-alert.is-success {
    background-color: #10b98122;
    border: 1px solid #10b98166;
    color: #0d6e4d;
}
.settings-alert.is-error {
    background-color: #ef444422;
    border: 1px solid #ef444466;
    color: #991b1b;
}

/* Nav Tabs */
.settings-tabs-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    background: var(--night-indigo);
    padding: 6px;
    border-radius: 8px;
}

.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: var(--cloud-white);
    border: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: all 160ms ease;
    margin: 0 !important;
}

.settings-tab-btn:hover {
    background: var(--dusty-blue-purple);
    color: var(--cloud-white);
    transform: none;
}

.settings-tab-btn.is-active {
    background: var(--cloud-white);
    color: var(--night-indigo);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.settings-tab-btn.is-active .material-symbols-outlined {
    background: transparent;
    color: var(--night-indigo);
}

.settings-tab-btn .material-symbols-outlined {
    font-size: 1.2em;
    background: transparent;
    padding: 0;
}

.settings-tab-badge {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    background: var(--night-indigo);
    color: var(--cloud-white);
}
.settings-tab-btn.is-active .settings-tab-badge {
    background: var(--night-indigo);
    color: var(--cloud-white);
}

/* Sections & Cards */
.settings-section-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
}

.settings-group-header h2 {
    margin: 0;
    font-size: 1.4em;
    color: var(--night-indigo);
}

.settings-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--dusty-blue-purple);
    padding-bottom: 14px;
}

.settings-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--cloud-white);
    margin: 0;
}

.settings-card-title .material-symbols-outlined {
    font-size: 1.25em;
    background: var(--night-indigo);
    color: var(--cloud-lilac);
    padding: 4px;
    border-radius: 4px;
}

.settings-card-desc {
    margin: 0;
    font-size: 0.9em;
    color: var(--dusty-blue-purple);
    line-height: 1.5;
}

/* Pill Badges */
.settings-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.04em;
}
.settings-badge.badge-success {
    background: #10b98122;
    color: #34d399;
    border: 1px solid #10b98144;
}
.settings-badge.badge-danger {
    background: #ef444422;
    color: #f87171;
    border: 1px solid #ef444444;
}
.settings-badge.badge-neutral {
    background: var(--dusty-blue-purple);
    color: var(--cloud-lilac);
    border: 1px solid #4a4844;
}

/* Form controls */
.settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.settings-form-group label {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--cloud-lilac);
}

.settings-input,
.settings-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--night-indigo);
    border: 1px solid #444;
    border-radius: 6px;
    color: var(--cloud-white);
    font-family: inherit;
    font-size: 0.95em;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.settings-input:focus,
.settings-textarea:focus {
    border-color: var(--cloud-white);
    box-shadow: 0 0 0 2px rgba(183, 178, 167, 0.2);
}
.award-selected-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin-bottom: 8px;
}
.award-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--misty-blue);
    border-radius: 999px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    font-size: 0.88em;
}
.award-member-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cloud-white);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}
.award-member-pill-remove:hover,
.award-member-pill-remove:focus-visible {
    background: var(--misty-blue);
}

.settings-textarea {
    resize: vertical;
    min-height: 80px;
}
.event-history-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.event-history-item {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #111;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
}
.event-history-row .event-history-item {
    flex: 1;
}
.event-history-item:hover,
.event-history-item:focus-visible {
    border-color: var(--misty-blue);
    background: var(--night-indigo);
}
.event-history-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid var(--dusty-blue-purple);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.event-history-details-header h3 {
    margin: 8px 0 0;
    color: var(--night-indigo);
}
.event-history-details-header > button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5em;
    cursor: pointer;
}
.event-history-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.event-history-details-grid div,
.event-history-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-history-details-grid span,
.event-history-description > span {
    color: var(--dusty-blue-purple);
    font-size: 0.8em;
}
.event-history-details-grid strong,
.event-history-description p {
    margin: 0;
    color: var(--night-indigo);
}
.event-history-description {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}
.event-history-details-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Toggle switch */
.settings-switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--night-indigo);
    padding: 14px 18px;
    border-radius: 6px;
    border: 1px solid var(--dusty-blue-purple);
}

.settings-switch-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.settings-switch-title {
    font-weight: bold;
    color: var(--cloud-white);
    font-size: 1em;
}

.settings-switch-desc {
    font-size: 0.85em;
    color: var(--dusty-blue-purple);
}

.settings-switch-checkbox {
    position: relative;
    width: 44px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--dusty-blue-purple);
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    transition: background-color 200ms ease;
    flex-shrink: 0;
}

.settings-switch-checkbox::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cloud-white);
    transition: transform 200ms ease, background-color 200ms ease;
}

.settings-switch-checkbox:checked {
    background: #ef4444;
}

.settings-switch-checkbox:checked::after {
    transform: translateX(18px);
    background: #ffffff;
}

/* Trigger checkboxes grid */
.settings-triggers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 10px 0 16px;
}

.settings-trigger-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--night-indigo);
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--dusty-blue-purple);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.settings-trigger-item:hover {
    background: var(--night-indigo);
    border-color: #555;
}

.settings-trigger-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cloud-white);
    cursor: pointer;
}

.settings-trigger-text {
    font-size: 0.9em;
    color: #e5e0d8;
    font-weight: 500;
}

/* Buttons */
.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
    text-decoration: none;
    margin: 0 !important;
}

.settings-btn .material-symbols-outlined {
    font-size: 1.15em;
    background: transparent;
    padding: 0;
}

.settings-btn-primary {
    background: var(--cloud-white);
    color: var(--night-indigo);
}

.settings-btn-primary:hover {
    background: var(--cloud-white);
    color: var(--night-indigo);
}

.settings-btn-secondary {
    background: var(--dusty-blue-purple);
    color: var(--cloud-lilac);
    border: 1px solid #4a4844;
}

.settings-btn-secondary:hover {
    background: #4a4844;
    color: var(--cloud-white);
}

.settings-btn-danger {
    background: #ef444422;
    color: #f87171;
    border: 1px solid #ef444455;
}

.settings-btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
}

.settings-btn-sm {
    padding: 6px 10px;
    font-size: 0.85em;
}

/* Developers Grid */
.settings-dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.settings-dev-card {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settings-dev-user {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.settings-dev-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dusty-blue-purple);
    color: var(--cloud-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    flex-shrink: 0;
}

.settings-dev-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-dev-name {
    font-weight: bold;
    color: var(--cloud-white);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-dev-id {
    font-size: 0.75em;
    color: var(--dusty-blue-purple);
    font-family: monospace;
}

/* Ranks Table */
.settings-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    background: var(--night-indigo);
    margin-bottom: 16px;
}

.settings-ranks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    text-align: left;
}

.settings-ranks-table th {
    background: var(--night-indigo);
    color: var(--dusty-blue-purple);
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    border-bottom: 1px solid var(--dusty-blue-purple);
}

.settings-ranks-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #292825;
    vertical-align: middle;
}

.settings-ranks-table tbody tr:hover {
    background: #201f1c !important;
}

.settings-ranks-table .settings-input {
    padding: 6px 10px;
    font-size: 0.9em;
}

/* Tag Categories 3-Col Grid */
.settings-tag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.settings-tag-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-tag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.settings-tag-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-color-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #555;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

.settings-color-input {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 60px;
    height: 60px;
    border: none;
    cursor: pointer;
    opacity: 0;
}

.settings-color-preview {
    width: 100%;
    height: 100%;
    display: block;
}

.settings-tag-item .settings-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.9em;
}

.settings-tag-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Code Snippet Box */
.settings-code-box {
    background: #000;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.settings-code-box pre {
    margin: 0;
    color: #3ddc71;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.85em;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 300px;
}

.settings-code-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
    transition: all 160ms ease;
}

.settings-code-copy-btn:hover {
    background: var(--dusty-blue-purple);
    color: #ffffff;
}

.settings-accordion {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 12px;
}

.settings-accordion summary {
    font-weight: bold;
    color: var(--cloud-white);
    cursor: pointer;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.settings-accordion-content {
    margin-top: 14px;
    font-size: 0.9em;
    line-height: 1.6;
    color: #ccc;
    border-top: 1px solid #333;
    padding-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .settings-tag-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-page {
        margin: 20px auto 60px;
        padding: 0 12px;
    }
    .settings-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .settings-tabs-nav {
        flex-direction: column;
    }
    .settings-tab-btn {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .settings-stats-bar {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MODERN ACCOUNT PAGE STYLING
   ========================================================================== */
.account-page {
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

/* Hero Profile Card */
.account-hero-card {
    background: var(--night-indigo);
    background-position: center;
    background-size: cover;
    color: var(--cloud-white);
    border-radius: 10px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 28px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.account-hero-identity {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.account-hero-avatar-wrap {
    position: relative;
}

.account-background-preview {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    background-color: var(--night-indigo);
    background-position: center;
    background-size: cover;
    color: var(--dusty-blue-purple);
    text-align: center;
}

.account-crop-dialog h3 {
    margin: 0;
}

.account-crop-help {
    color: var(--dusty-blue-purple);
}

.account-crop-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.5;
    margin: 16px 0;
    border-radius: 6px;
    background: var(--night-indigo);
}

.account-crop-controls {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 8px 12px;
}

.account-crop-controls label {
    margin: 0;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

.account-hero-avatar-wrap .avatar-wrapper {
    box-shadow: 0 0 0 4px var(--night-indigo), 0 4px 12px rgba(0,0,0,0.35);
    border-radius: 50%;
}

.account-hero-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-hero-name {
    margin: 0;
    font-size: 2.2em;
    color: var(--cloud-white);
    line-height: 1.15;
    font-weight: bold;
}

.account-hero-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: bold;
    letter-spacing: 0.03em;
    background: var(--night-indigo);
    color: var(--cloud-lilac);
    border: 1px solid var(--dusty-blue-purple);
}

.account-badge .material-symbols-outlined {
    font-size: 1.1em;
    background: transparent;
    padding: 0;
}

.account-badge-rank {
    background: #f59e0b22;
    color: var(--moonlight-yellow);
    border-color: #f59e0b44;
}

.account-badge-dev {
    background: #8b5cf622;
    color: var(--dreamy-periwinkle);
    border-color: #8b5cf644;
}

.account-badge-active {
    background: #10b98122;
    color: #34d399;
    border-color: #10b98144;
}

.account-badge-loa {
    background: #3b82f622;
    color: var(--misty-blue);
    border-color: #3b82f644;
}

.account-badge-warning {
    background: #ef444422;
    color: #f87171;
    border-color: #ef444444;
}

.account-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Quick Stats Ribbon */
.account-stats-ribbon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.account-stat-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.account-stat-icon {
    font-size: 2em !important;
    background: var(--night-indigo);
    color: var(--cloud-white);
    padding: 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.account-stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-stat-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dusty-blue-purple);
    font-weight: bold;
}

.account-stat-val {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--cloud-white);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Layout Grid */
.account-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
}

.account-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Account Cards */
.account-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--dusty-blue-purple);
    padding-bottom: 14px;
}

.account-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--cloud-white);
    margin: 0;
}

.account-card-title .material-symbols-outlined {
    font-size: 1.2em;
    background: var(--night-indigo);
    color: var(--cloud-lilac);
    padding: 5px;
    border-radius: 5px;
}

/* Details Grid */
.account-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-info-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-info-item.full-width {
    grid-column: 1 / -1;
}

.account-info-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dusty-blue-purple);
    font-weight: bold;
}

.account-info-val {
    font-size: 1.05em;
    font-weight: bold;
    color: var(--cloud-white);
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Copy ID pill */
.account-copy-id-btn {
    background: var(--night-indigo);
    border: 1px solid #444;
    color: var(--cloud-white);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 160ms ease;
    margin: 0 !important;
}

.account-copy-id-btn:hover {
    background: var(--dusty-blue-purple);
    color: var(--cloud-white);
}

/* Training Checklist */
.account-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.account-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
}

.account-check-item.is-done {
    color: #34d399;
    border-color: #10b98144;
}

.account-check-item.is-pending {
    color: #a8a29e;
    border-color: #444;
}

/* Attendance Timeline */
.account-attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.account-attendance-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.account-attendance-week {
    font-size: 0.8em;
    color: var(--dusty-blue-purple);
    font-family: monospace;
}

.account-attendance-pill {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
}

.account-attendance-pill.attended {
    background: #10b98122;
    color: #34d399;
    border: 1px solid #10b98144;
}

.account-attendance-pill.absent {
    background: #ef444422;
    color: #f87171;
    border: 1px solid #ef444444;
}

/* Strikes List */
.account-strikes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-strike-card {
    background: var(--night-indigo);
    border-left: 4px solid #ef4444;
    border-top: 1px solid var(--dusty-blue-purple);
    border-right: 1px solid var(--dusty-blue-purple);
    border-bottom: 1px solid var(--dusty-blue-purple);
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-strike-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-strike-count {
    color: #f87171;
    font-weight: bold;
    font-size: 0.9em;
}

.account-strike-date {
    color: var(--dusty-blue-purple);
    font-size: 0.8em;
}

.account-strike-reason {
    color: #e5e0d8;
    font-size: 0.9em;
    line-height: 1.4;
    margin: 2px 0 0;
}

/* Clean Record Banner */
.account-clean-banner {
    background: #10b98111;
    border: 1px solid #10b98133;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-clean-banner .material-symbols-outlined {
    font-size: 2em;
    color: #34d399;
    background: transparent;
    padding: 0;
}

.account-clean-title {
    font-weight: bold;
    color: var(--cloud-white);
    font-size: 0.95em;
}

.account-clean-sub {
    font-size: 0.82em;
    color: var(--dusty-blue-purple);
}

/* Forms inside Account Cards */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-file-box {
    border: 2px dashed #444;
    border-radius: 6px;
    padding: 18px;
    text-align: center;
    background: var(--night-indigo);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.account-file-box:hover {
    border-color: var(--cloud-white);
    background: #201f1c;
}

.account-file-box input[type="file"] {
    display: none;
}

.account-file-box-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.account-file-box-label .material-symbols-outlined {
    font-size: 2.2em;
    color: var(--cloud-white);
    background: transparent;
    padding: 0;
}

.account-file-box-text {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--cloud-white);
}

.account-file-box-hint {
    font-size: 0.75em;
    color: var(--dusty-blue-purple);
}

/* ==========================================================================
   STAFF BADGES & MILESTONES STYLES
   ========================================================================== */
.badges-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.badge-showcase-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.badge-showcase-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.badge-showcase-icon {
    font-size: 1.8em;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.badge-showcase-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.badge-showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-showcase-name {
    color: var(--cloud-white);
    font-size: 0.92em;
    font-weight: bold;
}

.badge-showcase-cat {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dusty-blue-purple);
    font-weight: bold;
}

.badge-showcase-desc {
    margin: 3px 0 0;
    font-size: 0.78em;
    color: #a8a29e;
    line-height: 1.35;
}

.badge-showcase-meta {
    margin-top: 4px;
    font-size: 0.72em;
    color: var(--moonlight-yellow);
}

/* Badge Tiers */
.badge-tier-gold {
    border-color: #f59e0b88;
    background: linear-gradient(145deg, #1f1b13, var(--night-indigo));
}
.badge-tier-gold .badge-showcase-name {
    color: var(--moonlight-yellow);
}

.badge-tier-silver {
    border-color: #94a3b888;
    background: linear-gradient(145deg, #181a1d, var(--night-indigo));
}
.badge-tier-silver .badge-showcase-name {
    color: #cbd5e1;
}

.badge-tier-bronze {
    border-color: #d9770666;
    background: linear-gradient(145deg, #1c1814, var(--night-indigo));
}
.badge-tier-bronze .badge-showcase-name {
    color: #f59e0b;
}

.badge-tier-emerald {
    border-color: #10b98188;
    background: linear-gradient(145deg, #111e18, var(--night-indigo));
}
.badge-tier-emerald .badge-showcase-name {
    color: #34d399;
}

.badge-tier-blue {
    border-color: #3b82f688;
    background: linear-gradient(145deg, #131b24, var(--night-indigo));
}
.badge-tier-blue .badge-showcase-name {
    color: var(--misty-blue);
}

.badge-tier-purple {
    border-color: #8b5cf688;
    background: linear-gradient(145deg, #191424, var(--night-indigo));
}
.badge-tier-purple .badge-showcase-name {
    color: var(--dreamy-periwinkle);
}

.badge-tier-special {
    border-color: #ec489988;
    background: linear-gradient(145deg, #22141d, var(--night-indigo));
}
.badge-tier-special .badge-showcase-name {
    color: #f472b6;
}

/* Milestone Progress Tracker */
.milestone-track-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 10px 14px;
}

.milestone-progress-bg {
    width: 100%;
    height: 8px;
    background: var(--night-indigo);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.milestone-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 300ms ease;
}

/* Dashboard Hero Badges */
.dashboard-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: bold;
    background: var(--night-indigo);
    color: var(--cloud-white);
    border: 1px solid var(--dusty-blue-purple);
    text-decoration: none;
    transition: transform 140ms ease, background 140ms ease;
}

.dashboard-badge-pill:hover {
    transform: translateY(-1px);
    background: var(--night-indigo);
}

/* Roster Popup Mini Badges Grid */
.badges-mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.82em;
    color: var(--cloud-white);
}

.badge-remove-btn {
    background: transparent !important;
    border: none !important;
    color: #ef4444 !important;
    cursor: pointer;
    font-size: 1.1em !important;
    padding: 0 0 0 4px !important;
    line-height: 1;
    font-weight: bold;
}
.badge-remove-btn:hover {
    color: #dc2626 !important;
}

.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: transform 160ms ease, background-color 160ms ease;
    margin: 0 !important;
}

.account-btn .material-symbols-outlined {
    font-size: 1.15em;
    background: transparent;
    padding: 0;
}

.account-btn-primary {
    background: var(--cloud-white);
    color: var(--night-indigo);
}

.account-btn-primary:hover {
    background: var(--cloud-white);
    color: var(--night-indigo);
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
    .account-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .account-page {
        margin: 20px auto 60px;
        padding: 0 12px;
    }
    .account-hero-card {
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
    }
    .account-hero-name {
        font-size: 1.7em;
    }
    .account-info-grid {
        grid-template-columns: 1fr;
    }
    .account-stats-ribbon {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .account-stats-ribbon {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MODERN DASHBOARD PAGE STYLING
   ========================================================================== */
.dashboard-page {
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

/* Hero Welcome Header */
.dashboard-hero-card {
    background: var(--night-indigo);
    background-position: center;
    background-size: cover;
    color: var(--cloud-white);
    border-radius: 10px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 26px 28px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-hero-identity {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dashboard-hero-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-greeting-eyebrow {
    margin: 0;
    color: var(--dusty-blue-purple);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-hero-name {
    margin: 0;
    font-size: 2.1em;
    color: var(--cloud-white);
    line-height: 1.15;
    font-weight: bold;
}

.dashboard-hero-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Main Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Announcements & Feed */
.dashboard-announcements-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.dashboard-announcements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-announcement-item {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 160ms ease;
}

.dashboard-announcement-item.is-pinned {
    border-left: 4px solid #f59e0b;
    background: #1e1d1a;
}

.dashboard-announcement-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-announcement-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--cloud-lilac);
}

.dashboard-announcement-author .material-symbols-outlined {
    font-size: 1.1em;
    color: var(--dusty-blue-purple);
    background: transparent;
    padding: 0;
}

.dashboard-announcement-body {
    margin: 0;
    color: var(--cloud-white);
    font-size: 0.95em;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.dashboard-announcement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #292825;
}

.dashboard-announcement-date {
    font-size: 0.78em;
    color: var(--dusty-blue-purple);
}

.dashboard-announcement-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Quick Navigation Shortcuts Grid */
.dashboard-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-shortcut-btn {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cloud-white);
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dashboard-shortcut-btn:hover {
    background: #282724;
    border-color: #555;
    transform: translateY(-2px);
    color: #ffffff;
}

.dashboard-shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-shortcut-icon .material-symbols-outlined {
    font-size: 1.3em;
    background: transparent;
    padding: 0;
}

.dashboard-shortcut-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-shortcut-title {
    font-weight: bold;
    font-size: 0.95em;
    line-height: 1.2;
}

.dashboard-shortcut-desc {
    font-size: 0.75em;
    color: var(--dusty-blue-purple);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Management Operations Center */
.dashboard-ops-card {
    background: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 8px;
    border: 1px solid var(--dusty-blue-purple);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    margin-bottom: 28px;
}

.dashboard-ops-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-ops-widget {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: var(--cloud-white);
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dashboard-ops-widget:hover {
    background: #282724;
    border-color: #555;
    transform: translateY(-2px);
    color: var(--cloud-white);
}

.dashboard-ops-widget-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-ops-widget-icon {
    font-size: 1.8em !important;
    background: var(--night-indigo);
    color: var(--cloud-white);
    padding: 8px;
    border-radius: 6px;
}

.dashboard-ops-widget-info {
    display: flex;
    flex-direction: column;
}

.dashboard-ops-widget-title {
    font-weight: bold;
    font-size: 0.95em;
    color: var(--cloud-white);
}

.dashboard-ops-widget-sub {
    font-size: 0.75em;
    color: var(--dusty-blue-purple);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-ops-widget-badge {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--cloud-white);
}

/* Post Announcement Form */
.dashboard-post-box {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 8px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-page {
        margin: 20px auto 60px;
        padding: 0 12px;
    }
    .dashboard-hero-card {
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-hero-name {
        font-size: 1.7em;
    }
    .dashboard-shortcuts-grid {
        grid-template-columns: 1fr;
    }
}

.report-week-nav {
    display: flex;
    gap: 10px;
    margin: 16px 0;
}

.roster-content table input[type="checkbox"] {
    margin-right: 10px;
    background-color: var(--night-indigo);
    width: 18px;
    height: 18px;
    border: 1px solid var(--cloud-white);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    vertical-align: middle;
}

.roster-content table tr.suspended-row > td,
.roster-content table tr.suspended-row:hover > td {
    background-color: #7f1d1d !important;
    border-top: 1px solid #f87171;
    border-bottom: 1px solid #f87171;
    color: #fff1f2 !important;
}

.roster-content table tr.suspended-row > td:first-child {
    border-left: 3px solid #ef4444;
}

.roster-content table tr.suspended-row > td:last-child {
    border-right: 1px solid rgba(248, 113, 113, 0.75);
}

.roster-content table input[type="checkbox"]:checked {
    background-color: var(--cloud-white);
}

.roster-content table input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    margin: 1px auto;
    border: solid var(--night-indigo);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}   



table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    border: 1px solid var(--night-indigo);
    padding: 10px;
    text-align: center;
}
.roster-content table {
    font-size: 0.9em;
}
.roster-content table th,
.roster-content table td {
    padding: 7px 8px;
}
.roster-content table td.roster-display-name-cell {
    width: 220px;
    max-width: 220px;
    overflow: hidden;
    text-align: left !important;
}
.roster-display-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    text-align: left !important;
}
.roster-display-name-wrap .avatar,
.roster-display-name-wrap img {
    flex: 0 0 auto;
}
.roster-display-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roster-profile-button {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.roster-profile-button:hover .roster-display-name,
.roster-profile-button:focus-visible .roster-display-name {
    color: var(--misty-blue);
    text-decoration: underline;
}
.rank-group-header th {
    padding: 6px 10px !important;
    background-color: var(--night-indigo) !important;
    color: var(--cloud-white) !important;
    border: 0 !important;
    text-align: left;
}
.roster-action-menu {
    position: relative;
    display: inline-block;
}
.roster-action-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--night-indigo);
    border-radius: 4px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    cursor: pointer;
    list-style: none;
}
.roster-action-menu-trigger::-webkit-details-marker {
    display: none;
}
.roster-action-menu-items {
    position: absolute;
    z-index: 10;
    top: calc(100% + 4px);
    right: 0;
    display: grid;
    gap: 4px;
    min-width: 144px;
    padding: 6px;
    border: 1px solid var(--night-indigo);
    border-radius: 4px;
    background: var(--cloud-lilac);
    box-shadow: 3px 3px 0 var(--dusty-blue-purple);
}
.roster-action-menu-items button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 5px 8px !important;
    border-radius: 3px !important;
    font-size: 0.9em !important;
    text-align: left;
}
.roster-action-menu-items button:hover,
.roster-action-menu-items button:focus-visible {
    background: var(--dusty-blue-purple);
    color: #fff;
}
.rank-group-header th span:last-child {
    float: right;
    font-size: 0.85em;
    font-weight: normal;
}
.house-cell {
    font-weight: bold;
}
.house-penguin-force {
    background-color: #90F8FF;
}
.house-stubo-united {
    background-color: #B29EFA;
}
.house-drowsy-operators {
    background-color: #FF9B8E;
}
.shift-cell {
    font-weight: bold;
}
.shift-eu {
    background-color: #faa9a4;
}
.shift-na {
    background-color: #7AADFF;
}
.shift-au {
    background-color: #FFC978;
}
.activity-cell {
    font-weight: bold;
}
.activity-active {
    background-color: #E4FFE8;
}
.activity-inactive {
    background-color: #F9C0BC;
}
.activity-semi-active {
    background-color: #FFF1C2;
}
.activity-loa {
    background-color: #A9CAFF;
}

.status-cell {
    font-weight: bold;
}
.status-cell.status-yes {
    background-color: #E4FFE8;
}
.status-cell.status-no {
    background-color: #F9C0BC;
}

.checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
}
dialog .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.vacant-row td {
    background-color: var(--night-indigo-07);
    color: var(--dusty-blue-purple);
    font-style: italic;
}

.avatar-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.avatar-img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    font-weight: bold;
}
.avatar-online-dot {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3ddc71;
    border: 2px solid var(--cloud-white);
    box-sizing: content-box;
}
.avatar-wrapper.is-online .avatar-online-dot {
    display: block;
}
.avatar-wrapper.is-online.is-idle .avatar-online-dot {
    background-color: #f0a43c;
}
.avatar-discord-dot {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #5865f2;
    border: 2px solid var(--cloud-white);
    box-sizing: content-box;
}
.avatar-wrapper.is-discord-online .avatar-discord-dot {
    display: none;
}
.avatar-wrapper.is-discord-online {
    outline: 3px solid #5865f2;
    outline-offset: 2px;
    border-radius: 50%;
}
.view-discord-presence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 18px;
    padding: 12px 14px;
    border: 0;
    border-left: 4px solid #5865f2;
    border-radius: 8px;
    background: #292752;
    color: #ffffff;
    font-size: 0.95em;
    line-height: 1.25;
    box-shadow: 0 3px 10px rgba(41, 39, 82, 0.18);
}
.view-discord-presence[hidden] {
    display: none;
}
.discord-presence-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5865f2;
    border: 2px solid #ffffff;
    box-sizing: content-box;
    box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.35);
}
.discord-presence-status,
.discord-presence-channel,
.discord-presence-duration {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.discord-presence-status {
    font-weight: 700;
}
.discord-presence-channel,
.discord-presence-duration {
    padding: 5px 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.12);
    color: #f4f3ff;
}
.discord-presence-channel {
    text-decoration: none;
}
.discord-presence-channel:hover,
.discord-presence-channel:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.discord-presence-channel .material-symbols-outlined,
.discord-presence-duration .material-symbols-outlined {
    font-size: 1.05em;
    color: #b9bbff;
}
.discord-presence-open-icon {
    font-size: 0.9em !important;
    margin-left: 2px;
}

.online-now-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0;
}
.online-now-avatars {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.online-now-avatars .avatar-wrapper {
    margin-right: -6px;
    border: 2px solid var(--cloud-white);
    border-radius: 50%;
}
.online-now-label {
    font-weight: bold;
}
.online-now-empty {
    color: var(--dusty-blue-purple);
    font-style: italic;
}

th {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    text-align: center;
}













dialog {
    border: none;
    width: 620px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--cloud-white);
    color: var(--night-indigo);
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

dialog.dialog-wide {
    width: 900px;
    max-width: 95vw;
}

dialog::backdrop {
    background-color: rgba(36, 35, 32, 0.6);
}

dialog form {
    display: flex;
    flex-direction: column;
}

dialog label {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--night-indigo);
}

dialog input,
dialog select,
dialog textarea {
    padding: 10px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
    border: none;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
}

dialog input[readonly] {
    opacity: 0.75;
}

dialog hr {
    border: none;
    border-top: 1px solid var(--night-indigo-20);
    margin: 20px 0;
}

dialog p {
    margin: 8px 0;
}

dialog ul {
    padding-left: 18px;
    margin: 10px 0;
}

dialog li {
    margin-bottom: 10px;
}

dialog button {
    padding: 8px 14px;
    font-size: 1em;
    border: none;
    cursor: pointer;
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    outline: none;
}

.dialog-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.dialog-buttons button {
    flex: 1;
}

.dialog-buttons button[type="button"] {
    background-color: transparent;
    color: var(--night-indigo);
    border: 1px solid var(--night-indigo);
}

.view-user-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--night-indigo);
}
.view-user-header.has-background {
    min-height: 132px;
    margin: -24px -24px 16px;
    padding: 24px;
    background-position: center;
    background-size: cover;
    border-bottom-color: rgba(242, 239, 230, 0.55);
    color: var(--cloud-white);
}
.view-user-header.has-background .view-user-subtitle {
    color: #e2ddd2;
}
.view-user-header h2 {
    margin: 0;
    font-size: 1.3em;
}
.view-user-subtitle {
    margin: 4px 0 0;
    color: var(--dusty-blue-purple);
}
.view-user-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    padding: 4px 0;
}
.view-user-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;
}
.view-user-detail span {
    color: #5d5a86;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.view-user-detail strong {
    font-size: 1.05em;
    color: #171633;
    overflow-wrap: anywhere;
}
#viewUserPopup .dialog-buttons,
#viewUserPopup > button {
    margin-top: 20px;
    width: 100%;
}

.roster-stats {
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.roster-stats div {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 5px;
    font-size: 1.1em;
    padding: 10px 14px;
    min-width: 130px;
    flex: 1;
    text-align: center;
}
.roster-stats .roster-stat-promo {
    background-color: #064e3b;
    color: #a7f3d0;
    border: 1px solid #059669;
}
.roster-stats .roster-stat-warning {
    background-color: #78350f;
    color: #fde68a;
    border: 1px solid #d97706;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-promo {
    background-color: #10b98122;
    color: #10b981;
    border: 1px solid #10b98166;
}
.badge-inactive-risk {
    background-color: #ef444422;
    color: #ef4444;
    border: 1px solid #ef444466;
}

/* ==========================================================================
   MODERN ROSTER PAGE ENHANCEMENTS
   ========================================================================== */
.roster-page-wrap {
    max-width: 1720px;
    width: calc(100% - 40px);
    margin: 36px auto 80px;
}

.roster-view-switch {
    display: inline-flex;
    align-items: center;
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    padding: 3px;
    gap: 4px;
}

.roster-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--dusty-blue-purple);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    transition: all 160ms ease;
    margin: 0 !important;
}

.roster-view-btn .material-symbols-outlined {
    font-size: 1.1em;
    background: transparent;
    padding: 0;
}

.roster-view-btn:hover {
    color: var(--cloud-white);
    background: var(--night-indigo);
}

.roster-view-btn.is-active {
    background: var(--night-indigo);
    color: var(--cloud-white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.roster-modern-table-wrap {
    background: var(--night-indigo);
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    margin-top: 16px;
}

.roster-modern-table {
    width: 100%;
    min-width: 1350px;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9em;
}

.roster-modern-table thead th {
    background: var(--night-indigo);
    color: var(--dusty-blue-purple);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    padding: 12px 10px;
    border-bottom: 2px solid var(--dusty-blue-purple);
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
    text-align: left;
}

.roster-modern-table tbody td {
    padding: 10px 10px;
    border-bottom: 1px solid #282724;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    background: var(--night-indigo);
    color: var(--cloud-white);
}

.roster-modern-table tbody tr:hover td {
    background: #2a2926 !important;
}

.roster-modern-rank-header th {
    background: #161513 !important;
    color: var(--cloud-white) !important;
    padding: 10px 18px !important;
    font-size: 0.95em !important;
    font-weight: bold !important;
    border-top: 1px solid var(--dusty-blue-purple) !important;
    border-bottom: 1px solid var(--dusty-blue-purple) !important;
}

.roster-action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.roster-action-group button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 4px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    cursor: pointer;
    transition: all 160ms ease;
    padding: 0 !important;
    margin: 0 !important;
}

.roster-action-group button:hover {
    background: var(--dusty-blue-purple);
    color: #ffffff;
    transform: translateY(-1px);
}

.roster-action-group button.delBtn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.roster-action-group button.strikeBtn:hover {
    background: #f59e0b;
    border-color: #f59e0b;
    color: var(--night-indigo);
}

.roster-action-group button.promoteBtn:hover {
    background: #10b981;
    border-color: #10b981;
    color: var(--night-indigo);
}

.roster-action-group button.demoteBtn:hover {
    background: var(--misty-blue);
    border-color: var(--misty-blue);
    color: var(--night-indigo);
}

.roster-action-group button .material-symbols-outlined {
    font-size: 1.15em;
    background: transparent !important;
    padding: 0 !important;
}

.roster-modern-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cloud-white);
    cursor: pointer;
}

/* MAINTENANCE MODE BANNER & PAGE */
.maintenance-admin-banner {
    background-color: #f59e0b;
    color: var(--night-indigo);
    font-weight: bold;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9em;
    border-bottom: 2px solid #d97706;
}
.maintenance-admin-banner a {
    color: var(--night-indigo);
    text-decoration: underline;
    margin-left: 6px;
}
.developer-preview-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: #8b4513;
    color: #fff7ed;
    font-weight: bold;
}
.developer-preview-banner form {
    margin-left: 8px;
}
.developer-preview-banner button {
    padding: 5px 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.nav-account-action {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--night-indigo);
    cursor: pointer;
    font: inherit;
    font-size: 1em;
    font-weight: bold;
    text-align: left;
}
.nav-account-action:hover,
.nav-account-action:focus-visible {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    outline: none;
}
.maintenance-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.maintenance-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 20px;
}
.maintenance-card {
    background-color: var(--night-indigo);
    color: var(--cloud-white);
    border-radius: 12px;
    padding: 40px;
    max-width: 540px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.maintenance-logo {
    width: 90px;
    height: auto;
}
.maintenance-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f59e0b22;
    color: #f59e0b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.maintenance-card h1 {
    margin: 0;
    font-size: 1.8em;
    color: var(--cloud-white);
}
.maintenance-message {
    font-size: 1.05em;
    line-height: 1.6;
    color: #cfcac0;
    margin: 0;
}
.maintenance-actions {
    margin-top: 10px;
}
.maintenance-btn {
    display: inline-block;
    padding: 10px 22px;
    background-color: var(--cloud-white);
    color: var(--night-indigo);
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.maintenance-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.maintenance-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.maintenance-toggle-row label {
    font-size: 1.05em;
    font-weight: bold;
    cursor: pointer;
}













.footer {
    flex-shrink: 0;
    margin-top: 20px;
    padding: 20px 0;
    text-align: center;
    color: var(--night-indigo);
    font-size: 1em;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
}

/* Preserve the login page's original overlaid footer positioning. */
.login-form .footer {
    position: absolute;
    bottom: 20px;
    width: 60%;
    padding: 0;
    margin-top: 0;
}

/* ============ RESPONSIVE / MOBILE LAYOUT ============ */

@media (max-width: 900px) {
    .profile-page {
        max-width: 92%;
        margin: 30px auto;
    }
    .profile-details {
        grid-template-columns: 1fr;
    }
    .event-feedback-answers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    main {
        margin: 12px;
    }

    nav {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px;
    }
    nav img {
        max-width: 30%;
        align-self: center;
    }
    .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        align-self: center;
        padding: 8px 12px;
        border: 1px solid var(--cloud-white);
        border-radius: 4px;
        background: transparent;
        color: var(--cloud-white);
        font: inherit;
        font-weight: bold;
    }
    .nav-menu-toggle .material-symbols-outlined { padding: 0; background: transparent; color: inherit; }
    nav ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    nav ul.is-open {
        display: flex;
    }
    nav ul li {
        margin: 0;
        padding: 8px 0;
        text-align: center;
    }
    .nav-account-menu, .nav-notifications-menu { margin-left: 0; }
    .nav-account-trigger, .nav-guidelines-trigger { justify-content: center; width: 100%; }
    .nav-events-menu > a { justify-content: center; }
    .nav-account-dropdown, .nav-guidelines-dropdown, .nav-events-dropdown, .nav-notifications-dropdown { position: static; margin: 8px auto 0; text-align: left; }
    .feedback-workflow { grid-template-columns: 1fr; }
    .event-feedback-summary { align-items: flex-start; flex-direction: column; }
    .event-feedback-summary > span { text-align: left; }
    .audit-log li { grid-template-columns: 1fr; gap: 5px; }
    .dashboard-widgets { grid-template-columns: 1fr; }
    .attendance-history ul { grid-template-columns: 1fr; }

    .login-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .Logo {
        width: 100%;
        height: auto;
        padding: 30px 0;
    }
    .Logo img {
        max-width: 40%;
    }
    .login-form {
        width: 100%;
        height: auto;
        padding: 30px 20px;
        box-sizing: border-box;
    }
    .login-form .footer {
        position: static;
        width: 100%;
        margin-top: 20px;
    }

    .profile-heading h1 {
        font-size: 2em;
    }

    .roster-stats div {
        width: calc(50% - 5px);
        box-sizing: border-box;
    }

    .roster-content {
        overflow-x: auto;
    }
    .bingo-page {
        width: auto;
        margin: 18px 12px;
    }
    .bingo-heading-wrap {
        padding: 14px;
        border-radius: 12px;
    }
    .bingo-heading-top {
        gap: 12px;
    }
    .bingo-challenge-grid {
        grid-template-columns: 1fr;
    }
    .bingo-challenge-item-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .bingo-player-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .bingo-player-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    .bingo-player-grid-head {
        min-height: 30px;
    }
    .bingo-player-cell,
    .bingo-player-cell-btn,
    .bingo-player-cell-static,
    .bingo-player-cell.is-empty {
        min-height: 92px;
    }
    .bingo-admin-toggle {
        align-items: flex-start;
        flex-direction: column;
    }
    .bingo-admin-summary-right {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }
    .bingo-admin-progress-wrap {
        max-width: none;
    }
    .bingo-admin-goals-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .planner-page {
        width: auto;
        margin: 18px 12px;
    }
    .bingo-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .planner-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .planner-lanes {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
    .planner-remove-section {
        align-items: stretch;
        flex-direction: column;
    }
    .planner-remove-dropzone {
        min-width: 0;
    }
    .roster-content table {
        min-width: 700px;
    }

    dialog {
        width: 92vw;
        padding: 18px;
    }

    .settings-inline-form,
    .settings-add-form {
        width: 100%;
    }
    .settings-inline-form input[type="text"],
    .settings-inline-form input[type="number"],
    .settings-add-form input[type="text"],
    .settings-add-form input[type="number"] {
        width: auto;
        flex: 1 1 110px;
    }
}

@media (max-width: 480px) {
    .profile-heading h1 {
        font-size: 1.6em;
    }
    .roster-stats div {
        width: 100%;
    }
    .profile-page form.login-form-actions {
        max-width: 100%;
    }
    .planner-week-form,
    .planner-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .planner-week-form input,
    .planner-week-form button,
    .planner-actions button {
        width: 100%;
    }
    .planner-lanes {
        grid-template-columns: 1fr;
    }
    .bingo-player-grid {
        grid-template-columns: 1fr;
    }
    .bingo-admin-goals-grid {
        grid-template-columns: 1fr;
    }
    .event-feedback-page { margin: 30px auto 50px; }
    .event-feedback-header { align-items: flex-start; flex-direction: column; padding: 18px 6vw; }
    .event-feedback-header img { width: 125px; }
    .event-feedback-question { padding: 18px; }
    .event-feedback-options { grid-template-columns: 1fr; }
    .event-feedback-submit { align-items: stretch; flex-direction: column; }
    .event-feedback-submit button { width: 100%; }
    .event-feedback-footer { align-items: flex-start; flex-direction: column; padding: 18px 6vw; }
}

/* Light theme surfaces for the applications and bingo workspaces. */
.application-card {
    background: var(--cloud-white) !important;
    color: var(--night-indigo);
    border: 1px solid var(--misty-blue);
    box-shadow: 0 8px 20px rgba(41, 39, 82, 0.1);
}
.application-card > div:first-child {
    border-bottom-color: var(--misty-blue) !important;
}
.application-card h2,
.application-card strong,
.application-card label {
    color: var(--night-indigo) !important;
}
.application-card > div:first-child > div > span,
.application-card .application-answers span {
    color: var(--dusty-blue-purple) !important;
}
.application-card .application-answers > div {
    background: var(--cloud-lilac) !important;
    border-color: var(--misty-blue) !important;
}
.application-notes {
    background: var(--cloud-lilac) !important;
    border-left-color: var(--dreamy-periwinkle) !important;
    color: var(--night-indigo);
}
.application-notes strong {
    color: var(--night-indigo) !important;
}
.application-notes p {
    color: var(--dusty-blue-purple) !important;
}
.application-card select,
.application-card input {
    background: var(--cloud-white) !important;
    color: var(--night-indigo) !important;
    border-color: var(--misty-blue) !important;
}
.application-card button {
    background: var(--night-indigo);
    color: var(--cloud-white);
}

.bingo-challenge-guide,
.bingo-player-card-wrap,
.bingo-admin-card,
.bingo-admin-section {
    border-color: var(--misty-blue);
    background: var(--cloud-lilac);
    color: var(--night-indigo);
}
.bingo-challenge-guide-header,
.bingo-player-card-header h2,
.bingo-admin-card h2,
.bingo-admin-section h2 {
    color: var(--night-indigo);
}
.bingo-challenge-item {
    background: var(--cloud-white);
    border-color: var(--misty-blue);
}
.bingo-challenge-badge {
    background: var(--deep-lilac);
    border-color: var(--dreamy-periwinkle);
    color: var(--cloud-white);
}
.bingo-challenge-text,
.bingo-player-cell-sub {
    color: var(--dusty-blue-purple);
}
.bingo-player-card-progress {
    background: var(--cloud-white);
    border-color: var(--misty-blue);
}
.bingo-player-grid-head {
    background: var(--deep-lilac);
    border-color: var(--dreamy-periwinkle);
    color: var(--moonlight-yellow);
}
.bingo-player-cell {
    background: var(--cloud-white);
    border-color: var(--misty-blue);
}
.bingo-player-cell.is-pending:hover {
    background: var(--misty-blue);
    border-color: var(--dreamy-periwinkle);
}
.bingo-player-cell.is-free {
    border-color: var(--dreamy-periwinkle);
    background: linear-gradient(150deg, var(--dreamy-periwinkle), var(--cloud-lilac));
}
.bingo-player-cell.is-free .bingo-player-cell-title,
.bingo-player-cell.is-free .bingo-player-cell-sub {
    color: var(--night-indigo);
}
.bingo-player-cell.is-complete {
    border-color: #10b98199;
    background: linear-gradient(160deg, #DDF7E9, #C7EEDB);
}

.bingo-admin-empty,
.bingo-admin-group,
.bingo-board-container {
    border-color: var(--misty-blue);
    background: var(--cloud-lilac);
}
.bingo-admin-rank-header,
.bingo-rank-header th,
.bingo-super-header th,
.bingo-table thead th {
    background: var(--deep-lilac) !important;
    color: var(--cloud-white) !important;
    border-color: var(--dreamy-periwinkle) !important;
}
.bingo-admin-card {
    border-color: var(--misty-blue);
    background: var(--cloud-white);
}
.bingo-admin-card.is-open {
    border-color: var(--dreamy-periwinkle);
    box-shadow: 0 8px 16px rgba(41, 39, 82, 0.12);
}
.bingo-admin-toggle {
    color: var(--night-indigo);
}
.bingo-admin-details {
    border-top-color: var(--misty-blue);
    background: var(--cloud-lilac);
}
.bingo-admin-chevron {
    color: var(--dusty-blue-purple);
}
.bingo-table tbody td {
    background: var(--cloud-white);
    color: var(--night-indigo);
    border-bottom-color: var(--misty-blue);
}
.bingo-table tbody tr:hover td {
    background: var(--misty-blue) !important;
}
.bingo-member-display {
    color: var(--night-indigo);
}
.bingo-member-sub {
    color: var(--dusty-blue-purple);
}
.bingo-cell.is-pending .bingo-goal-btn,
.bingo-cell.is-pending .bingo-goal-static {
    background: var(--cloud-lilac);
    border-color: var(--misty-blue);
    color: var(--night-indigo);
}
.bingo-cell.is-pending .bingo-goal-btn:hover {
    background: var(--misty-blue);
    border-color: var(--dreamy-periwinkle);
}
.bingo-progress-bar {
    background: var(--deep-lilac);
    border-color: var(--dreamy-periwinkle);
}
.bingo-board-container::-webkit-scrollbar-track {
    background: var(--cloud-lilac);
}

.dashboard-announcements-card {
    background: var(--cloud-lilac);
    color: var(--night-indigo);
    border-color: var(--misty-blue);
}
.dashboard-announcements-card .account-card-title {
    color: var(--night-indigo);
}
.dashboard-announcements-card .account-card-title .material-symbols-outlined {
    color: var(--dreamy-periwinkle);
}
.dashboard-announcements-card .account-badge {
    background: var(--cloud-white);
    border-color: var(--misty-blue);
    color: var(--night-indigo);
}
.dashboard-announcement-item,
.dashboard-announcement-item.is-pinned {
    background: var(--cloud-white);
    border-color: var(--misty-blue);
}
.dashboard-announcement-item.is-pinned {
    border-left-color: var(--moonlight-yellow);
}
.dashboard-announcement-author {
    color: var(--night-indigo);
}
.dashboard-announcement-author .material-symbols-outlined {
    color: var(--dreamy-periwinkle);
}
.dashboard-announcement-body {
    color: var(--night-indigo);
}
.dashboard-announcement-footer {
    border-top-color: var(--misty-blue);
}
.dashboard-announcement-date {
    color: var(--dusty-blue-purple);
}
.dashboard-announcement-actions .settings-btn-secondary {
    background: var(--dreamy-periwinkle);
    border-color: var(--dreamy-periwinkle);
    color: var(--night-indigo);
}

.dashboard-greeting-eyebrow {
    color: var(--misty-blue);
}
.dashboard-shortcut-desc {
    color: var(--misty-blue);
}
.dashboard-shortcut-btn:hover {
    background: var(--deep-lilac);
    border-color: var(--dreamy-periwinkle);
    color: var(--cloud-white);
}
.dashboard-shortcut-btn:hover .dashboard-shortcut-desc {
    color: var(--cloud-white);
}

.settings-group[data-section="stage-queue"] .settings-card {
    background: var(--cloud-lilac);
    border-color: var(--misty-blue);
    color: var(--night-indigo);
}
.settings-group[data-section="stage-queue"] .settings-card-title {
    color: var(--night-indigo);
}
.settings-group[data-section="stage-queue"] .settings-card-desc {
    color: var(--dusty-blue-purple);
}
.stage-now-playing {
    background: var(--cloud-white) !important;
    border-color: var(--misty-blue) !important;
}
.stage-now-playing h4 {
    color: var(--night-indigo) !important;
}
.stage-empty-queue {
    background: var(--cloud-white) !important;
    border-color: var(--misty-blue) !important;
    color: var(--dusty-blue-purple) !important;
}
.settings-group[data-section="obs"] .settings-card {
    background: var(--cloud-lilac);
    border-color: var(--misty-blue);
    color: var(--night-indigo);
}
.settings-group[data-section="obs"] .settings-card-title {
    color: var(--night-indigo);
}
.settings-group[data-section="obs"] .settings-card-desc {
    color: var(--dusty-blue-purple);
}
.obs-preview {
    background: var(--cloud-white) !important;
    border-color: var(--misty-blue) !important;
}
.obs-preview h4 {
    color: #087F5B !important;
}

.bingo-cell.is-complete .bingo-goal-btn,
.bingo-cell.is-complete .bingo-goal-static,
.bingo-cell.is-complete .bingo-goal-icon {
    color: #087F5B !important;
}
.bingo-legend-complete {
    color: #087F5B;
}
.bingo-player-cell-title {
    color: var(--night-indigo) !important;
}
.bingo-player-cell.is-complete .bingo-player-cell-title,
.bingo-player-cell.is-complete .bingo-goal-icon {
    color: #087F5B !important;
}
.feedback-workflow { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.feedback-workflow label { display: grid; gap: 4px; font-size: 0.82em; font-weight: bold; }
.feedback-workflow select, .feedback-workflow textarea { box-sizing: border-box; width: 100%; padding: 7px; border: 1px solid var(--night-indigo); border-radius: 4px; background: var(--cloud-lilac); color: var(--night-indigo); font: inherit; }
.feedback-workflow button { padding: 8px 10px; border: 1px solid var(--night-indigo); border-radius: 4px; background: var(--night-indigo); color: var(--cloud-white); cursor: pointer; font: inherit; font-weight: bold; }
.audit-log { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--night-indigo); }
.audit-log li { display: grid; grid-template-columns: minmax(160px, .7fr) 1fr minmax(180px, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--night-indigo-27); }
.audit-log small { color: var(--dusty-blue-purple); }
.notification-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.notifications-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--night-indigo); }
.notification-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--night-indigo-27); }
.notification-item.is-unread { border-left: 4px solid var(--night-indigo); padding-left: 12px; }
.notification-item h2 { margin: 0 0 6px; font-size: 1.05em; }
.notification-item p { margin: 0 0 7px; }
.notification-item time { color: var(--dusty-blue-purple); font-size: .85em; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notification-actions form { margin: 0; }
.notification-empty { padding: 18px 0; color: var(--dusty-blue-purple); }
.changelog-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--night-indigo); }
.changelog-entry { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--night-indigo-27); }
.changelog-entry time { color: var(--dusty-blue-purple); font-weight: bold; }
.changelog-entry h2 { margin: 0 0 8px; font-size: 1.1em; }
.changelog-entry ul { margin: 0; padding-left: 20px; }
.check-in-selector { display: flex; align-items: end; gap: 10px; margin: 24px 0; }
.check-in-selector label, .check-in-form label { display: flex; flex-direction: column; gap: 6px; font-weight: bold; }
.check-in-selector select, .check-in-form input, .check-in-form select, .check-in-form textarea, .check-in-filters input, .check-in-filters select { box-sizing: border-box; min-height: 42px; padding: 10px; border: 1px solid var(--night-indigo); border-radius: 4px; background: var(--cloud-lilac); color: var(--night-indigo); font: inherit; }
.check-in-selector select { min-width: min(420px, 100%); min-height: 44px; }
.check-in-record-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin: 28px 0 18px; padding: 20px; border: 1px solid var(--night-indigo); background: var(--cloud-lilac); }
.check-in-record-header h2 { margin: 0; font-size: 1.7em; }
.check-in-record-header p:last-child { margin-bottom: 0; color: var(--dusty-blue-purple); }
.check-in-lock { font-size: 32px; color: var(--dusty-blue-purple); }
.check-in-form { display: grid; gap: 10px; margin: 0 0 30px; }
.check-in-form textarea { width: 100%; resize: vertical; }
.check-in-form input[type="date"] { width: min(240px, 100%); }
.check-in-form .account-file-box { width: 100%; box-sizing: border-box; }
.check-in-form .action-button { justify-self: start; }
.check-in-filters { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, .6fr) auto; gap: 10px; align-items: end; margin: 0 0 18px; padding: 14px; border: 1px solid var(--night-indigo-27); background: var(--cloud-lilac); }
.check-in-filters label { grid-column: 1 / -1; display: grid; gap: 6px; font-weight: bold; }
.check-in-filters .action-button { min-height: 42px; }
.check-in-notes { border-top: 4px solid var(--night-indigo); }
.check-in-notes-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.check-in-notes-heading h2 { margin: 18px 0 10px; }
.check-in-notes-heading span { color: var(--dusty-blue-purple); font-weight: bold; }
.check-in-empty { color: var(--dusty-blue-purple); font-style: italic; }
.check-in-note { margin: 12px 0; padding: 16px; border-left: 4px solid var(--night-indigo); background: var(--cloud-lilac); }
.check-in-note-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--dusty-blue-purple); font-size: .9em; }
.check-in-note-meta strong { color: var(--night-indigo); }
.check-in-note p { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.check-in-note-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; color: var(--dusty-blue-purple); font-size: .9em; }
.check-in-note-details form { margin: 0; }
.check-in-note-details a { display: inline-flex; align-items: center; gap: 4px; color: var(--night-indigo); font-weight: bold; }
.check-in-note-details .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.check-in-visibility { display: inline-flex; align-items: center; gap: 4px; }
.check-in-follow-up { padding: 5px 8px; border-left: 3px solid #a76622; background: #d9c9a9; color: var(--night-indigo); }
.check-in-follow-up.is-complete { border-left-color: #3f7046; background: #bdcfbd; }
.check-in-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--night-indigo-27); }
.check-in-history summary { cursor: pointer; font-weight: bold; }
.check-in-history ul { margin: 10px 0 0; padding-left: 20px; }
.check-in-history li { margin: 8px 0; color: var(--dusty-blue-purple); }
.check-in-history p { margin: 4px 0 0; color: var(--night-indigo); }
.check-in-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--night-indigo-27); }
.check-in-edit summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: bold; }
.check-in-edit form { display: grid; gap: 8px; margin-top: 10px; }
.check-in-edit textarea { box-sizing: border-box; width: 100%; padding: 8px; border: 1px solid var(--night-indigo); background: var(--cloud-white); color: var(--night-indigo); font: inherit; resize: vertical; }
.check-in-edit .action-button { justify-self: start; min-height: 36px; padding: 7px 10px; }
.action-button-danger { background-color: #8a3024; color: #fff; }
.action-button-danger:not(:disabled):hover,
.action-button-danger:not(:disabled):focus-visible { background-color: #a63a2c; color: #fff; }
.host-remove-button { min-height: 34px; padding: 6px 12px; font-size: 0.9em; }
.check-in-access-form { display: grid; gap: 14px; }
.check-in-access-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto; }
.check-in-access-option { display: flex; align-items: start; gap: 10px; padding: 10px; border: 1px solid var(--night-indigo-27); background: var(--cloud-lilac); cursor: pointer; }
.check-in-access-option input { margin-top: 3px; }
.check-in-access-option span { display: flex; flex-direction: column; gap: 3px; }
.check-in-access-option small { color: var(--dusty-blue-purple); }
.loa-history-table-wrap { width: 100%; overflow-x: auto; }
.loa-history-table { width: 100%; min-width: 760px; border-collapse: collapse; margin-top: 14px; }
.loa-history-table th, .loa-history-table td { padding: 12px 10px; border-bottom: 1px solid var(--night-indigo-27); text-align: left; vertical-align: top; }
.loa-history-table th { color: var(--dusty-blue-purple); font-size: .8em; letter-spacing: .04em; text-transform: uppercase; }
.loa-history-table td strong, .loa-history-table td small { display: block; }
.loa-history-table td small { margin-top: 3px; color: var(--dusty-blue-purple); }
.loa-history-table .status-badge { white-space: nowrap; }
@media (max-width: 600px) {
    .check-in-selector { align-items: stretch; flex-direction: column; }
    .check-in-selector select { min-width: 0; }
    .check-in-filters { grid-template-columns: 1fr; }
    .check-in-note-meta { align-items: start; flex-direction: column; gap: 4px; }
    .check-in-access-list { grid-template-columns: 1fr; }
}

.password-reset-required {
    overflow: hidden;
}

.password-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 9, 18, 0.88);
}

.password-reset-modal-card {
    width: min(100%, 520px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--night-indigo-27);
    border-radius: 12px;
    background: var(--night-indigo);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.password-reset-modal-card h2 {
    margin: 8px 0 10px;
    color: var(--cloud-white);
}

.password-reset-modal-card p {
    color: var(--cloud-lilac);
}

.password-reset-modal-note {
    font-size: 0.9em;
}

.password-reset-modal-icon {
    color: #f0b84b;
    font-size: 38px;
}

.bracket-stream-loading {
    background: var(--night-indigo);
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    height: 100%;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    height: 100%;
    justify-content: space-around;
}

/* Keep the stream view quiet and readable. */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    padding: 32px 48px;
    background: var(--night-indigo);
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header {
    max-width: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--dusty-blue-purple);
}
.bracket-editor:fullscreen .bracket-header-actions::before,
.bracket-editor:fullscreen .bracket-header-actions::after,
.bracket-editor.is-streaming .bracket-header-actions::before,
.bracket-editor.is-streaming .bracket-header-actions::after {
    display: none;
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    max-width: none;
    padding: 28px 0;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    justify-content: center;
    gap: 48px;
    padding: 12px 0 24px;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    flex-basis: 240px;
    gap: 24px;
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    display: block;
    color: var(--misty-blue);
    font-size: .8em;
    letter-spacing: .1em;
}
.bracket-editor:fullscreen .bracket-round h4::after,
.bracket-editor.is-streaming .bracket-round h4::after {
    display: none;
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    border: 1px solid var(--dusty-blue-purple);
    border-radius: 6px;
    background: var(--dusty-blue-purple);
    box-shadow: none;
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: 44px;
    padding: 8px 11px;
    font-size: .95em;
}
@media (max-width: 800px) {
    .bracket-editor:fullscreen,
    .bracket-editor.is-streaming {
        padding: 18px;
    }
    .bracket-editor:fullscreen .bracket-board,
    .bracket-editor.is-streaming .bracket-board {
        justify-content: flex-start;
        gap: 28px;
    }
}

/* Bracket workspace */
.brackets-page {
    max-width: 1540px;
    margin: 28px auto 70px;
}
.brackets-page .settings-header {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(146, 150, 232, .35);
    background:
        radial-gradient(circle at 88% 20%, rgba(146, 150, 232, .25), transparent 34%),
        linear-gradient(130deg, var(--night-indigo), #373463);
    color: var(--cloud-white);
}
.brackets-page .settings-header::after {
    position: absolute;
    right: 7%;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(246, 216, 117, .25);
    border-radius: 50%;
    content: "";
}
.brackets-page .settings-header-top {
    position: relative;
    z-index: 1;
    padding: 30px 34px;
}
.brackets-page .settings-header h1,
.brackets-page .settings-header .profile-eyebrow {
    color: var(--cloud-white) !important;
}
.brackets-page .settings-header .profile-subtitle {
    max-width: 620px;
    color: var(--cloud-lilac);
}
.bracket-header-icon {
    position: relative;
    z-index: 1;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(246, 216, 117, .4);
    border-radius: 28px;
    background: rgba(41, 39, 82, .4);
    color: var(--moonlight-yellow);
    font-size: 4.2em;
    transform: rotate(7deg);
}
.brackets-layout {
    gap: 24px;
    margin-top: 24px;
}
.bracket-sidebar,
.bracket-editor {
    border: 1px solid rgba(104, 104, 143, .28);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(41, 39, 82, .08);
}
.bracket-sidebar {
    position: sticky;
    top: 20px;
    padding: 0;
    overflow: hidden;
}
.bracket-sidebar .account-card-header,
.bracket-editor .account-card-header {
    margin: 0;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cloud-lilac);
}
.bracket-list {
    gap: 0;
    padding: 10px;
}
.bracket-list-item {
    margin: 2px 0;
    border-left-width: 4px;
    border-radius: 8px;
    transition: background .15s ease, transform .15s ease;
}
.bracket-list-item:hover {
    transform: translateX(2px);
}
.bracket-create-form {
    margin: 10px 20px 20px;
    padding-top: 20px;
}
.bracket-create-form .settings-input,
.bracket-controls .settings-input {
    border-radius: 7px;
}
.bracket-editor {
    overflow: hidden;
}
.bracket-editor-header .account-card-title {
    font-size: 1.45em;
}
.bracket-event-label {
    margin: 6px 0 0;
    color: var(--dusty-blue-purple);
}
.bracket-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 16px 24px;
    margin: 20px 22px 0;
    padding: 18px;
    border: 1px solid rgba(104, 104, 143, .2);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cloud-lilac), #f1effd);
}
.bracket-controls > div:first-child {
    display: grid;
    grid-template-columns: minmax(140px, .7fr) minmax(180px, 1.3fr);
    gap: 8px 12px;
    align-items: center;
}
.bracket-controls > div:first-child label:nth-of-type(3) {
    align-self: start;
}
.bracket-controls > div:first-child textarea {
    grid-column: 2;
}
.bracket-control-actions {
    align-self: end;
    flex-wrap: wrap;
    justify-content: end;
}
.bracket-save-status {
    grid-column: 1 / -1;
}
.bracket-workspace {
    gap: 30px;
    padding: 28px 22px 26px;
}
.bracket-participants {
    padding: 18px;
    border: 1px solid var(--cloud-lilac);
    border-radius: 10px;
    background: #fbfaff;
}
.bracket-participant-row {
    padding: 4px 0;
    border-bottom: 1px solid rgba(229, 225, 247, .75);
}
.bracket-participant-row:last-child {
    border-bottom: 0;
}
.bracket-board-wrap {
    padding: 0 4px;
}
.bracket-board {
    padding: 12px 4px 26px;
}
.bracket-round {
    position: relative;
}
.bracket-round:not(:last-child)::after {
    position: absolute;
    top: 30px;
    right: -17px;
    bottom: 30px;
    border-right: 1px dashed rgba(104, 104, 143, .35);
    content: "";
}
.bracket-match {
    overflow: hidden;
    border: 1px solid rgba(104, 104, 143, .55);
    border-radius: 8px;
    box-shadow: 0 5px 12px rgba(41, 39, 82, .08);
}
.bracket-player {
    min-height: 38px;
    padding: 7px 10px;
    transition: background .15s ease;
}
.bracket-player:not(.is-winner):hover {
    background: #eeecfb;
}
.bracket-player.is-winner {
    border-left-color: #299865;
}
.bracket-controls {
    color: var(--night-indigo);
}
.bracket-controls label {
    color: var(--night-indigo);
}
.bracket-controls .settings-input {
    background: var(--cloud-white);
    border-color: #a6a3c1;
    color: var(--night-indigo);
}
.bracket-controls .settings-input::placeholder {
    color: #65617e;
}
.bracket-participants {
    color: var(--night-indigo);
}
.bracket-participants .bracket-section-heading h3 {
    color: var(--night-indigo);
}
.bracket-participants .bracket-section-heading span {
    color: #514e70;
}
.bracket-board-wrap {
    color: var(--night-indigo);
}
.bracket-board-wrap .bracket-section-heading h3 {
    color: var(--night-indigo);
}
.bracket-board-wrap .bracket-section-heading span {
    color: #514e70;
}
.bracket-empty-large h2 {
    color: var(--cloud-white);
}
.bracket-empty-large p {
    max-width: 460px;
    color: var(--cloud-lilac);
    line-height: 1.5;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    color: var(--cloud-white);
}
.bracket-editor:fullscreen .bracket-board-wrap .bracket-section-heading h3,
.bracket-editor.is-streaming .bracket-board-wrap .bracket-section-heading h3 {
    color: var(--cloud-white);
}
/* Broadcast presentation */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    background:
        radial-gradient(circle at 50% -20%, rgba(146, 150, 232, .28), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(246, 216, 117, .09), transparent 30%),
        #171634;
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header {
    max-width: 1680px;
    margin: 0 auto;
    padding: 22px 0 20px;
    border-bottom: 1px solid rgba(184, 208, 244, .28);
}
.bracket-editor:fullscreen .account-card-title,
.bracket-editor.is-streaming .account-card-title {
    gap: 14px;
    letter-spacing: -.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.bracket-editor:fullscreen .account-card-title .material-symbols-outlined,
.bracket-editor.is-streaming .account-card-title .material-symbols-outlined {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(246, 216, 117, .45);
    border-radius: 12px;
    background: rgba(246, 216, 117, .12);
    color: var(--moonlight-yellow);
}
.bracket-editor:fullscreen .bracket-event-label,
.bracket-editor.is-streaming .bracket-event-label {
    margin-top: 9px;
    color: var(--misty-blue);
    letter-spacing: .04em;
}
.bracket-editor:fullscreen .bracket-header-actions,
.bracket-editor.is-streaming .bracket-header-actions {
    align-self: center;
}
.bracket-editor:fullscreen .bracket-header-actions::before,
.bracket-editor.is-streaming .bracket-header-actions::before {
    margin-right: 8px;
    color: #79dfaa;
    content: "LIVE";
    font-size: .7em;
    font-weight: 800;
    letter-spacing: .16em;
}
.bracket-editor:fullscreen .bracket-header-actions::after,
.bracket-editor.is-streaming .bracket-header-actions::after {
    width: 8px;
    height: 8px;
    margin-left: -13px;
    border-radius: 50%;
    background: #79dfaa;
    box-shadow: 0 0 14px #79dfaa;
    content: "";
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    max-width: 1680px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 58px) 0;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    padding: clamp(18px, 2.8vw, 42px);
    border: 1px solid rgba(184, 208, 244, .2);
    border-radius: 20px;
    background: rgba(11, 10, 31, .3);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 24px 70px rgba(0, 0, 0, .2);
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(36px, 6vw, 110px);
    min-height: 0;
    padding: 14px 4px 24px;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    flex-basis: clamp(230px, 20vw, 330px);
    gap: clamp(22px, 3vh, 42px);
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--misty-blue);
    font-size: .76em;
    letter-spacing: .16em;
}
.bracket-editor:fullscreen .bracket-round h4::after,
.bracket-editor.is-streaming .bracket-round h4::after {
    height: 1px;
    flex: 1;
    background: rgba(184, 208, 244, .25);
    content: "";
}
.bracket-editor:fullscreen .bracket-round:not(:last-child)::after,
.bracket-editor.is-streaming .bracket-round:not(:last-child)::after {
    top: 34px;
    right: calc(clamp(36px, 6vw, 110px) / -2);
    bottom: 34px;
    border-right-color: rgba(146, 150, 232, .28);
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    border: 1px solid rgba(184, 208, 244, .5);
    border-radius: 10px;
    background: rgba(184, 208, 244, .5);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: 54px;
    padding: 10px 14px;
    color: var(--night-indigo);
    font-size: 1.02em;
    font-weight: 600;
}
.bracket-editor:fullscreen .bracket-player.is-winner,
.bracket-editor.is-streaming .bracket-player.is-winner {
    border-left: 5px solid #299865;
    padding-left: 9px;
    background: #e5faed;
    color: #145c3b;
}
.bracket-editor:fullscreen .bracket-player input,
.bracket-editor.is-streaming .bracket-player input {
    min-height: 28px;
    border-color: #c2bfd8;
    border-radius: 5px;
    color: var(--night-indigo);
    font-weight: 800;
    text-align: center;
}
.bracket-editor {
    position: relative;
}
.bracket-stream-loading {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 24px;
    background: var(--night-indigo);
    color: var(--cloud-white);
    text-align: center;
}
.bracket-stream-loading[hidden] {
    display: none;
}
.bracket-stream-loading.is-entering {
    animation: bracket-loading-fade-in 380ms ease-out both;
}
.bracket-stream-loading.is-exiting {
    animation: bracket-loading-fade-out 400ms ease-in both;
}
.bracket-stream-loading-content {
    display: grid;
    place-items: center;
    gap: 10px;
    animation: bracket-loading-slide-in 650ms cubic-bezier(.2, .8, .2, 1) both;
}
.bracket-stream-loading.is-exiting .bracket-stream-loading-content {
    animation: bracket-loading-slide-out 400ms ease-in both;
}
.bracket-stream-loading-content img {
    display: block;
    width: min(230px, 35vw);
    height: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .28));
    animation: bracket-loading-logo 650ms cubic-bezier(.2, .8, .2, 1) both;
}
.bracket-stream-loading .material-symbols-outlined {
    justify-self: center;
    color: var(--moonlight-yellow);
    font-size: 42px;
    animation: bracket-sync-spin 900ms linear infinite;
}
.bracket-stream-loading strong {
    font-size: 1.35em;
}
.bracket-stream-loading span:last-child {
    color: var(--cloud-lilac);
}
@keyframes bracket-sync-spin {
    to { transform: rotate(360deg); }
}
@keyframes bracket-loading-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes bracket-loading-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes bracket-loading-slide-in {
    from { opacity: 0; transform: translateX(52px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes bracket-loading-logo {
    from { opacity: 0; transform: translateX(-72px) scale(.88); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bracket-loading-slide-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-48px); }
}
@media (prefers-reduced-motion: reduce) {
    .bracket-stream-loading:not([hidden]),
    .bracket-stream-loading.is-entering,
    .bracket-stream-loading.is-exiting,
    .bracket-stream-loading-content,
    .bracket-stream-loading-content img {
        animation: none;
    }
}
@media (max-width: 800px) {
    .brackets-page {
        margin-top: 12px;
    }
    .brackets-page .settings-header-top {
        padding: 24px 20px;
    }
    .bracket-header-icon {
        width: 74px;
        height: 74px;
        font-size: 2.8em;
    }
    .bracket-sidebar {
        position: static;
    }
    .bracket-controls {
        grid-template-columns: 1fr;
        margin: 16px;
    }
    .bracket-controls > div:first-child {
        grid-template-columns: 1fr;
    }
    .bracket-controls > div:first-child textarea {
        grid-column: auto;
    }
    .bracket-workspace {
        padding: 20px 16px;
    }
    .bracket-editor:fullscreen,
    .bracket-editor.is-streaming {
        padding: 18px;
    }
    .bracket-editor:fullscreen .bracket-editor-header,
    .bracket-editor.is-streaming .bracket-editor-header {
        padding-top: 4px;
    }
    .bracket-editor:fullscreen .bracket-header-actions::before,
    .bracket-editor:fullscreen .bracket-header-actions::after,
    .bracket-editor.is-streaming .bracket-header-actions::before,
    .bracket-editor.is-streaming .bracket-header-actions::after {
        display: none;
    }
}

/* Use an equal-width grid so every round remains visible in fullscreen. */
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    display: grid;
    grid-template-columns: repeat(var(--round-count, 1), minmax(0, 1fr));
    align-items: stretch;
    justify-content: normal;
    width: 100%;
    height: calc(100% - 34px);
    min-width: 0;
    min-height: 0;
    gap: clamp(8px, 1.4vw, 22px);
    transform: none;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    display: block;
    height: 100%;
    overflow: hidden;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    display: flex;
    min-width: 0;
    height: 100%;
    justify-content: space-between;
    gap: clamp(3px, .7vh, 8px);
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    min-width: 0;
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: clamp(22px, 4vh, 34px);
    padding: clamp(2px, .5vh, 5px) clamp(4px, .55vw, 8px);
    font-size: clamp(.58rem, .78vw, .78rem);
}
.bracket-editor:fullscreen .bracket-player input,
.bracket-editor.is-streaming .bracket-player input {
    width: clamp(20px, 2.4vw, 34px);
    min-height: clamp(16px, 2.5vh, 22px);
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    display: flex;
    width: auto;
    height: 100%;
    justify-content: space-between;
}
.bracket-editor:fullscreen .bracket-round:not(.is-stream-visible),
.bracket-editor.is-streaming .bracket-round:not(.is-stream-visible) {
    display: flex;
}
.bracket-stream-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: -8px 0 12px;
}
.bracket-stream-pagination[hidden] {
    display: none;
}
.bracket-stream-pagination > span {
    min-width: 210px;
    color: var(--dusty-blue-purple);
    font-size: .85em;
    text-align: center;
}
.bracket-editor:fullscreen .bracket-stream-pagination,
.bracket-editor.is-streaming .bracket-stream-pagination {
    margin: 0 0 12px;
}
.bracket-editor:fullscreen .bracket-stream-pagination > span,
.bracket-editor.is-streaming .bracket-stream-pagination > span {
    color: var(--misty-blue);
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100% - 34px);
}
.bracket-editor:fullscreen .bracket-round.is-stream-visible,
.bracket-editor.is-streaming .bracket-round.is-stream-visible {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    width: 100%;
}
.bracket-editor:fullscreen .bracket-round.is-stream-visible h4,
.bracket-editor.is-streaming .bracket-round.is-stream-visible h4 {
    grid-column: 1 / -1;
}
.bracket-editor:fullscreen .bracket-round:not(.is-stream-visible),
.bracket-editor.is-streaming .bracket-round:not(.is-stream-visible) {
    display: none;
}
.bracket-editor:fullscreen .bracket-round.is-stream-visible .bracket-match,
.bracket-editor.is-streaming .bracket-round.is-stream-visible .bracket-match {
    width: 100%;
}

/* Fullscreen shows every round; fitStreamBoard scales the complete board. */
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    grid-template-columns: repeat(var(--round-count, 1), minmax(0, 1fr));
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round,
.bracket-editor:fullscreen .bracket-round:not(.is-stream-visible),
.bracket-editor.is-streaming .bracket-round:not(.is-stream-visible) {
    display: flex;
    width: auto;
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header,
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace,
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    width: 100%;
    max-width: none;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    width: 100%;
}
.bracket-editor:fullscreen,
.bracket-editor.is-streaming,
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace,
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    overflow: hidden !important;
}

/* The stream is a fixed viewport, so the board must receive a real height. */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    padding: 24px 32px;
    box-sizing: border-box;
    overflow: hidden !important;
}
.bracket-editor:fullscreen .bracket-editor-header,
.bracket-editor.is-streaming .bracket-editor-header {
    flex: 0 0 auto;
    min-height: 0;
    padding: 12px 0;
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 18px 0 0;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}
.bracket-editor:fullscreen .bracket-board-wrap > .bracket-section-heading,
.bracket-editor.is-streaming .bracket-board-wrap > .bracket-section-heading {
    flex: 0 0 auto;
    margin-bottom: 8px;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 4px 0 0;
    gap: clamp(8px, 2vw, 28px);
    justify-content: flex-start !important;
    overflow: hidden;
}
.bracket-editor:fullscreen .bracket-round,
.bracket-editor.is-streaming .bracket-round {
    flex: 1 1 0 !important;
    height: 100%;
    min-height: 0;
    min-width: 0 !important;
    max-width: 100%;
    width: auto;
    justify-content: space-evenly;
    gap: 4px;
}
.bracket-editor:fullscreen .bracket-round h4,
.bracket-editor.is-streaming .bracket-round h4 {
    flex: 0 0 auto;
    margin-bottom: 4px;
}
.bracket-editor:fullscreen .bracket-match,
.bracket-editor.is-streaming .bracket-match {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-height: clamp(18px, 3.5vh, 32px);
    padding: clamp(2px, .35vh, 5px) clamp(4px, .5vw, 8px);
    font-size: clamp(.55rem, .72vw, .78rem);
}
.bracket-editor:fullscreen .bracket-player input,
.bracket-editor.is-streaming .bracket-player input {
    width: clamp(20px, 2.2vw, 34px);
    min-height: 16px;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.bracket-editor:fullscreen .bracket-player,
.bracket-editor.is-streaming .bracket-player {
    min-width: 0;
    box-sizing: border-box;
}
.bracket-editor:fullscreen .bracket-player span,
.bracket-editor.is-streaming .bracket-player span {
    min-width: 0;
}

/* Give the stream workspace explicit viewport boundaries. */
.bracket-editor:fullscreen,
.bracket-editor.is-streaming {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}
.bracket-editor:fullscreen .bracket-workspace,
.bracket-editor.is-streaming .bracket-workspace {
    position: absolute;
    top: 104px;
    right: 32px;
    bottom: 24px;
    left: 32px;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
}
.bracket-editor:fullscreen .bracket-board-wrap,
.bracket-editor.is-streaming .bracket-board-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    width: auto;
    height: auto;
    min-height: 0;
}
.bracket-editor:fullscreen .bracket-board-wrap > .bracket-section-heading,
.bracket-editor.is-streaming .bracket-board-wrap > .bracket-section-heading {
    flex: 0 0 30px;
    height: 30px;
    margin: 0;
}
.bracket-editor:fullscreen .bracket-board,
.bracket-editor.is-streaming .bracket-board {
    flex: 1 1 auto;
    width: 100% !important;
    height: auto;
    min-height: 0;
}