:root
{
    --club-accent:    #d71920;
    --app-dark:       #202428;
    --app-text:       #25282b;
    --app-muted:      #6b7075;
    --app-border:     #d9dcde;
    --app-background: #f3f3f1;
}

body
{
    min-height:  100vh;
    color:       var(--app-text);
    background:  var(--app-background);
    font-family: Arial, Helvetica, sans-serif;
    font-size:   16px;
}

.app-navbar
{
    padding:       .65rem 0;
    background:    var(--app-dark);
    border-bottom: 4px solid var(--club-accent);
}

.navbar-brand
{
    font-weight:    700;
    letter-spacing: 0;
}

.navbar .nav-link
{
    margin:        0;
    padding:       .5rem .7rem !important;
    border-radius: 2px;
    color:         rgba(255, 255, 255, .82) !important;
    font-weight:   400;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible
{
    color:      #fff !important;
    background: #34393e;
}

.navbar form
{
    width:         auto !important;
    margin:        0 !important;
    padding:       0 !important;
    border:        0 !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}

.container
{
    max-width: 1180px;
}

.score-table
{
    background-color: white;
    border:           1px solid var(--app-border);
    border-radius:    3px;
    padding:          20px;
}

.card,
.main
{
    border:        1px solid var(--app-border) !important;
    border-radius: 4px !important;
    box-shadow:    0 2px 7px rgba(0, 0, 0, .07) !important;
}

.card
{
    overflow:   hidden;
    background: #fff;
}

.card-header
{
    padding:       .85rem 1rem;
    color:         var(--app-dark);
    background:    #fff !important;
    border:        0;
    border-top:    4px solid var(--club-accent) !important;
    border-bottom: 1px solid var(--app-border) !important;
    font-weight:   700;
}

.card-body
{
    padding: 1.4rem;
}

h1
{
    font-size:     clamp(1.65rem, 3vw, 2.2rem);
    font-weight:   700;
    margin-bottom: 1.25rem;
    color:         var(--app-dark);
    text-align:    left;
}

h2, h3, h4, h5
{
    color:       var(--app-dark);
    font-weight: 700;
}

table
{
    width:           100%;
    border-collapse: collapse;
}

th, td
{
    padding:    12px;
    text-align: left;
}

th
{
    background-color: var(--app-dark);
    color:            white;
    font-weight:      bold;
    border-bottom:    3px solid #dee2e6;
}

td
{
    background-color: #fff;
    border-bottom:    1px solid #dee2e6;
}

.table
{
    border:         1px solid var(--app-border);
    border-radius:  2px;
    vertical-align: middle;
}

.form-control,
.form-select,
select
{
    min-height:    44px;
    border-radius: 3px !important;
    border-color:  #bfc4c7 !important;
}

.form-control:focus,
.form-select:focus,
select:focus
{
    border-color: var(--club-accent) !important;
    box-shadow:   0 0 0 .15rem rgba(0, 0, 0, .10) !important;
}

.btn
{
    border-radius: 3px;
    font-weight:   700;
}

.btn-primary
{
    border-color: var(--club-accent);
    background:   var(--club-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible
{
    border-color: var(--club-accent);
    background:   var(--club-accent);
    filter:       brightness(.88);
}

.main
{
    max-width:  440px !important;
    margin:     3.5rem auto !important;
    padding:    2rem !important;
    background: #fff !important;
}

.main header
{
    margin:  0 0 1.5rem !important;
    padding: 0 !important;
}

.main header h3
{
    color:       var(--app-muted) !important;
    font-size:   .95rem !important;
    font-weight: 400 !important;
    line-height: 1.45;
}

.auth-card--wide
{
    max-width: 680px !important;
}

.auth-card header .logo
{
    display:    block;
    width:      auto !important;
    max-width:  155px;
    max-height: 72px;
    margin:     0 auto 1.25rem;
    object-fit: contain;
}

.auth-card h1
{
    margin:     0 0 .45rem;
    font-size:  1.75rem;
    text-align: center;
}

.auth-kicker
{
    margin:         0 0 .35rem;
    color:          var(--club-accent);
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-align:     center;
    text-transform: uppercase;
}

.auth-intro
{
    max-width:   480px;
    margin:      0 auto;
    color:       var(--app-muted);
    line-height: 1.5;
    text-align:  center;
}

.auth-fields
{
    display: grid;
    gap:     .45rem;
}

.auth-fields label:not(:first-child)
{
    margin-top: .5rem;
}

.auth-card label
{
    color:       var(--app-dark);
    font-size:   .9rem;
    font-weight: 700;
}

.auth-card .btn-primary
{
    width:      100%;
    min-height: 46px;
    margin-top: 1.25rem;
}

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

.auth-grid-full
{
    grid-column: 1 / -1;
}

.auth-grid .form-group
{
    display: grid;
    gap:     .4rem;
}

.auth-switch
{
    margin:     1.25rem 0 0;
    color:      var(--app-muted);
    font-size:  .9rem;
    text-align: center;
}

.auth-switch a
{
    color:                 var(--app-dark);
    font-weight:           700;
    text-decoration-color: var(--club-accent);
    text-underline-offset: 3px;
}

.page-shell
{
    padding-top:    2.5rem;
    padding-bottom: 4rem;
}

.page-header
{
    max-width:     760px;
    margin-bottom: 1.75rem;
}

.page-header h1
{
    margin-bottom: .45rem;
}

.page-header > p:last-child
{
    margin:      0;
    color:       var(--app-muted);
    line-height: 1.5;
}

.page-kicker
{
    margin:         0 0 .35rem;
    color:          var(--club-accent);
    font-size:      .78rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.content-panel
{
    padding:       1.25rem;
    background:    #fff;
    border:        1px solid var(--app-border);
    border-radius: 4px;
    box-shadow:    0 2px 7px rgba(0, 0, 0, .05);
}

.summary-strip
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
    margin-bottom:   1.25rem;
    padding:         1rem 1.1rem;
    background:      #fff;
    border:          1px solid var(--app-border);
    border-left:     4px solid var(--club-accent);
}

.summary-strip div
{
    display: grid;
    gap:     .2rem;
}

.summary-strip span,
.match-date
{
    color:     var(--app-muted);
    font-size: .82rem;
}

.summary-strip p
{
    margin:    0;
    color:     var(--app-muted);
    font-size: .9rem;
}

.score-pill
{
    display:       inline-grid;
    min-width:     2rem;
    min-height:    2rem;
    place-items:   center;
    color:         #fff;
    background:    var(--app-dark);
    border-radius: 3px;
    font-weight:   700;
}

.empty-state
{
    display:    grid;
    gap:        .35rem;
    padding:    2.5rem 1rem;
    color:      var(--app-muted);
    text-align: center;
}

.empty-state strong
{
    color:     var(--app-dark);
    font-size: 1.05rem;
}

.prediction-form
{
    max-width: 920px;
}

.prediction-reminder
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
    border:          1px solid #ffcf70;
    border-radius:   var(--app-radius);
}

.prediction-reminder h2
{
    margin-bottom: .35rem;
    font-size:     1.2rem;
}

.prediction-reminder p
{
    margin:     0;
    text-align: left;
}

.prediction-reminder-actions
{
    display:   flex;
    flex-wrap: wrap;
    gap:       .65rem;
}

@media (max-width: 767px)
{
    .prediction-reminder
    {
        align-items:    stretch;
        flex-direction: column;
    }
}

.prediction-summary
{
    margin-bottom: 1rem;
    background:    #f8f8f7;
}

.prediction-entry-table
{
    margin-bottom: 1rem;
}

.table.prediction-entry-table > thead
{
    --bs-table-bg:    var(--app-dark);
    --bs-table-color: #fff;
}

.table.prediction-entry-table > thead > tr > th
{
    color:               #fff;
    background-color:    var(--app-dark);
    border-bottom-color: rgba(255, 255, 255, .2);
}

.prediction-entry-table td:first-child
{
    min-width: 260px;
}

.prediction-entry-table td:first-child strong,
.match-date
{
    display: block;
}

.score-input
{
    width:       100px;
    min-width:   78px;
    text-align:  center;
    font-weight: 700;
}

.match-closed td
{
    color:      var(--app-muted);
    background: #f0f1f1;
}

.prediction-submit
{
    min-height:     44px;
    padding-inline: 1.25rem;
}

.admin-page-header
{
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    max-width:       none;
    gap:             1.5rem;
}

.admin-page-header h1
{
    margin-bottom: .35rem;
}

.admin-toolbar
{
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: .75rem;
}

.admin-toolbar .form-control
{
    max-width: 360px;
}

.admin-result-count
{
    color:     var(--app-muted);
    font-size: .9rem;
}

.admin-table-panel
{
    padding:  0;
    overflow: hidden;
}

.admin-table-panel .table-responsive
{
    padding: 0;
}

.admin-table
{
    margin: 0;
    border: 0;
}

.admin-table th,
.admin-table td
{
    padding: .7rem .8rem;
}

.admin-table tbody tr:hover td
{
    background: #f7f7f6;
}

.admin-pagination
{
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             .8rem;
    padding:         .85rem 1rem;
    background:      #f7f7f6;
    border-top:      1px solid var(--app-border);
    font-size:       .9rem;
}

.admin-form
{
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   1.15rem;
    max-width:             760px;
}

.admin-form .form-group
{
    display: grid;
    gap:     .4rem;
}

.admin-form label
{
    font-weight: 700;
}

.admin-form-full,
.admin-form-submit
{
    grid-column: 1 / -1;
}

.admin-form-submit
{
    justify-self: start;
    min-width:    150px;
}

.scorer-section
{
    padding-top: 1rem;
    border-top:  1px solid var(--app-border);
}

.scorer-section h2
{
    margin:    0 0 .25rem;
    font-size: 1.15rem;
}

.scorer-section p
{
    margin:    0 0 .75rem;
    color:     var(--app-muted);
    font-size: .9rem;
}

.edit-user-form
{
    width:     100% !important;
    max-width: 720px;
    margin:    0 !important;
    padding:   1.25rem !important;
}

.label-optional
{
    color:       var(--app-muted);
    font-size:   .8rem;
    font-weight: 400;
}

.admin-form-actions
{
    display:         flex;
    justify-content: flex-end;
    gap:             .75rem;
    grid-column:     1 / -1;
    padding-top:     .25rem;
}

.admin-prediction-form
{
    max-width: 980px;
}

.admin-topscorer-field
{
    display:               grid;
    grid-template-columns: 180px minmax(220px, 360px);
    align-items:           center;
    gap:                   1rem;
    margin-bottom:         1rem;
    padding:               1rem;
    background:            #f7f7f6;
    border-left:           4px solid var(--club-accent);
}

.admin-topscorer-field label
{
    font-weight: 700;
}

.dashboard-shell .row
{
    align-items: flex-start;
}

.landing-blocks-grid
{
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:           start;
    gap:                   1.25rem;
}

.landing-block
{
    min-width: 0;
}

.landing-block-full
{
    grid-column: 1 / -1;
}

.landing-photo
{
    display:      block;
    width:        100%;
    height:       auto;
    max-height:   560px;
    aspect-ratio: 16 / 9;
    object-fit:   contain;
    position:     relative;
    z-index:      1;
}

.landing-slide
{
    position:        relative;
    min-height:      306px;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    background:      #202428;
}

.landing-carousel .landing-slide.active,
.landing-carousel .landing-slide.carousel-item-next,
.landing-carousel .landing-slide.carousel-item-prev
{
    display: flex;
}

.landing-slide::before
{
    position:            absolute;
    inset:               -2rem;
    content:             "";
    background-image:    var(--slide-image);
    background-position: center;
    background-size:     cover;
    filter:              blur(18px);
    opacity:             .5;
    transform:           scale(1.08);
}

.landing-slide::after
{
    position:   absolute;
    inset:      0;
    content:    "";
    background: linear-gradient(90deg, rgba(32, 36, 40, .6), transparent 25%, transparent 75%, rgba(32, 36, 40, .6));
}

.landing-slide--single
{
    display:    flex;
    min-height: 0;
}

.landing-carousel .carousel-control-prev,
.landing-carousel .carousel-control-next
{
    width:   12%;
    opacity: .85;
}

.landing-carousel .carousel-control-prev-icon,
.landing-carousel .carousel-control-next-icon
{
    padding:          1.1rem;
    border-radius:    50%;
    background-color: rgba(32, 36, 40, .8);
    background-size:  55%;
}

.landing-carousel .carousel-indicators
{
    margin-bottom: .6rem;
}

.stories-section
{
    margin-top: 2rem;
    padding:    1.5rem;
    background: #fff;
    border:     1px solid var(--app-border);
    border-top: 4px solid var(--club-accent);
}

.stories-section .page-header
{
    margin-bottom: 1rem;
}

.stories-grid
{
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   1.25rem;
}

.story-card
{
    display:        flex;
    min-height:     180px;
    padding:        1.35rem;
    flex-direction: column;
    background:     #f7f7f6;
    border:         1px solid var(--app-border);
    border-left:    4px solid var(--club-accent);
    box-shadow:     0 2px 8px rgba(32, 36, 40, .05);
}

.story-card__meta
{
    margin-bottom:  .65rem;
    color:          var(--club-accent);
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.story-card h3
{
    margin:    0 0 .6rem;
    font-size: 1.1rem;
}

.story-card p
{
    margin:      0;
    color:       var(--app-muted);
    line-height: 1.55;
    white-space: pre-line;
}

.score-picker
{
    display:    flex;
    flex-wrap:  wrap;
    gap:        .35rem;
    margin-top: .45rem;
}

.score-picker button
{
    min-width:     2.2rem;
    min-height:    2.2rem;
    padding:       .25rem .55rem;
    color:         var(--app-ink);
    background:    #fff;
    border:        1px solid var(--app-border);
    border-radius: 4px;
    font-weight:   700;
    cursor:        pointer;
}

.score-picker button:hover,
.score-picker button.is-selected
{
    color:        #fff;
    background:   var(--club-accent);
    border-color: var(--club-accent);
}

.score-picker button:disabled
{
    cursor:  not-allowed;
    opacity: .45;
}

.admin-content-grid
{
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   1rem;
}

.admin-content-grid .admin-story-panel
{
    grid-column: 1 / -1;
}

.feature-row,
.managed-item,
.managed-story
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         .85rem 0;
    border-bottom:   1px solid var(--app-border);
}

.landing-block-row
{
    flex-wrap: wrap;
}

.landing-block-row > span
{
    flex: 1 1 12rem;
}

.landing-sort
{
    width:      5.5rem;
    min-height: 38px;
}

.scoring-form
{
    display: grid;
    gap:     .7rem;
}

.scoring-form > label,
.scoring-rule-row
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding-bottom:  .7rem;
    border-bottom:   1px solid var(--app-border);
    font-weight:     700;
}

.scoring-rule-controls,
.rule-toggle
{
    display:     flex;
    align-items: center;
    gap:         .65rem;
}

.rule-toggle
{
    color:       var(--app-muted);
    font-size:   .8rem;
    font-weight: 400;
}

.rule-toggle input
{
    width:        1rem;
    height:       1rem;
    accent-color: var(--club-accent);
}

.points-input
{
    display:     flex;
    align-items: center;
    gap:         .45rem;
}

.points-input .form-control
{
    width:      5.5rem;
    text-align: center;
}

.points-input small
{
    color:       var(--app-muted);
    font-weight: 400;
}

.feature-row:last-child,
.managed-item:last-child,
.managed-story:last-child
{
    border-bottom: 0;
}

.admin-content-form
{
    display: grid;
    gap:     .8rem;
}

.admin-content-form label
{
    display:     grid;
    gap:         .35rem;
    font-weight: 700;
}

.checkbox-label
{
    display:               flex !important;
    align-items:           center;
    grid-template-columns: none !important;
    font-weight:           500 !important;
}

.managed-list,
.managed-story
{
    margin-top: 1rem;
}

.managed-item span
{
    overflow-wrap: anywhere;
    color:         var(--app-muted);
    font-size:     .9rem;
}

.managed-photo
{
    justify-content: flex-start;
}

.managed-photo img
{
    width:         76px;
    height:        54px;
    flex:          0 0 76px;
    object-fit:    cover;
    border:        1px solid var(--app-border);
    border-radius: 3px;
    background:    #eceeed;
}

.managed-photo__info
{
    display:   grid;
    min-width: 0;
    flex:      1 1 auto;
    gap:       .2rem;
}

.managed-photo__info strong
{
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.managed-photo__info small
{
    overflow:      hidden;
    color:         var(--app-muted);
    font-size:     .75rem;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.managed-story
{
    align-items: flex-start;
}

.managed-story h3
{
    margin:    0 0 .35rem;
    font-size: 1rem;
}

.managed-story p
{
    margin:      0;
    color:       var(--app-muted);
    white-space: pre-wrap;
}

@media (max-width: 767px)
{
    .container
    {
        padding-inline: 1rem;
    }

    .card-body
    {
        padding: 1rem;
    }

    th, td
    {
        padding: .7rem;
    }

    .main
    {
        width:   auto !important;
        margin:  1.25rem 1rem !important;
        padding: 1.4rem !important;
    }

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

    .auth-grid-full
    {
        grid-column: auto;
    }

    .page-shell
    {
        padding-top: 1.5rem;
    }

    .summary-strip
    {
        align-items:    flex-start;
        flex-direction: column;
        gap:            .75rem;
    }

    .admin-page-header
    {
        align-items:    flex-start;
        flex-direction: column;
    }

    .content-panel
    {
        padding: .75rem;
    }

    .admin-form
    {
        grid-template-columns: 1fr;
    }

    .admin-form-full,
    .admin-form-submit
    {
        grid-column: auto;
    }

    .admin-topscorer-field
    {
        grid-template-columns: 1fr;
    }

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

    .landing-blocks-grid
    {
        grid-template-columns: 1fr;
    }

    .landing-block-full
    {
        grid-column: auto;
    }

    .admin-content-grid
    {
        grid-template-columns: 1fr;
    }

    .admin-content-grid .admin-story-panel
    {
        grid-column: auto;
    }
}

.leaderboard-card-actions
{
    display:         flex;
    padding-top:     .75rem;
    justify-content: flex-end;
    border-top:      1px solid var(--app-border);
}

.leaderboard-card-actions .btn
{
    font-weight: 700;
}

.leaderboard-page-header
{
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             1.5rem;
}

.leaderboard-player-count
{
    display:        flex;
    min-width:      110px;
    padding:        .8rem 1rem;
    flex-direction: column;
    align-items:    center;
    background:     #fff;
    border:         1px solid var(--app-border);
    border-top:     3px solid var(--club-accent);
    border-radius:  10px;
}

.leaderboard-player-count strong
{
    color:       var(--app-dark);
    font-size:   1.45rem;
    line-height: 1;
}

.leaderboard-player-count span
{
    margin-top: .3rem;
    color:      var(--app-muted);
    font-size:  .78rem;
}

.leaderboard-full-panel
{
    padding:  0;
    overflow: hidden;
}

.leaderboard-full-heading
{
    display:         flex;
    padding:         1.25rem 1.5rem;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    border-bottom:   1px solid var(--app-border);
}

.leaderboard-full-heading h2,
.leaderboard-full-heading p
{
    margin:     0;
    text-align: left;
}

.leaderboard-full-heading h2
{
    color:       var(--app-dark);
    font-size:   1.25rem;
    font-weight: 800;
}

.leaderboard-full-heading p
{
    margin-top: .2rem;
    color:      var(--app-muted);
    font-size:  .9rem;
}

.leaderboard-full-table
{
    margin-bottom: 0;
}

.leaderboard-full-table > :not(caption) > * > *
{
    padding: 1rem 1.5rem;
}

.leaderboard-full-table thead th
{
    color:          var(--app-muted);
    background:     #f5f6f6;
    font-size:      .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.leaderboard-full-table tbody tr:last-child td
{
    border-bottom: 0;
}

.leaderboard-full-table tbody tr.is-current-player td
{
    background: color-mix(in srgb, var(--club-accent) 7%, white);
}

.leaderboard-position
{
    display:       inline-grid;
    width:         34px;
    height:        34px;
    place-items:   center;
    color:         var(--app-dark);
    background:    #eceeee;
    border-radius: 50%;
    font-weight:   800;
}

.leaderboard-position--1
{
    color:      #664d03;
    background: #ffe69c;
}

.leaderboard-position--2
{
    color:      #495057;
    background: #e2e3e5;
}

.leaderboard-position--3
{
    color:      #6f4518;
    background: #e8c39e;
}

.leaderboard-score
{
    display:       inline-block;
    min-width:     54px;
    padding:       .35rem .6rem;
    color:         #fff;
    background:    var(--app-dark);
    border-radius: 8px;
    font-weight:   800;
    text-align:    center;
}

.current-player-label
{
    display:        inline-block;
    margin-left:    .6rem;
    padding:        .16rem .45rem;
    color:          var(--club-accent);
    background:     #fff;
    border:         1px solid currentColor;
    border-radius:  999px;
    font-size:      .7rem;
    font-weight:    800;
    text-transform: uppercase;
}

@media (max-width: 575px)
{
    .leaderboard-page-header,
    .leaderboard-full-heading
    {
        align-items:    stretch;
        flex-direction: column;
    }

    .leaderboard-player-count
    {
        align-items: flex-start;
    }

    .leaderboard-card-actions .btn,
    .leaderboard-full-heading .btn
    {
        width: 100%;
    }

    .leaderboard-full-table > :not(caption) > * > *
    {
        padding: .8rem .75rem;
    }
}

.top-score
{
    color:       #28a745;
    font-weight: bold;
}

.logout-section
{
    text-align: right;
}

.activation-card
{
    width:         min(100%, 560px);
    max-width:     560px;
    margin:        0 auto;
    padding:       2.25rem;
    background:    #fff;
    border:        1px solid var(--app-border);
    border-top:    4px solid var(--club-accent);
    border-radius: 4px;
    box-shadow:    0 8px 28px rgba(32, 36, 40, .10);
    text-align:    center;
}

.auth-page
{
    display:        flex;
    min-height:     100vh;
    margin:         0;
    padding:        0;
    flex-direction: column;
}

.auth-login-shell
{
    display:         flex;
    width:           100%;
    padding:         2rem 1.25rem;
    flex:            1 1 auto;
    align-items:     center;
    justify-content: center;
}

.auth-login-shell .main
{
    width:  min(100%, 440px) !important;
    margin: 0 auto !important;
}

.auth-login-shell .auth-card--wide
{
    width: min(100%, 680px) !important;
}

.auth-brand
{
    display:         inline-flex;
    padding:         .9rem 0;
    color:           #fff;
    font-size:       1rem;
    font-weight:     700;
    text-decoration: none;
}

.auth-topbar
{
    width:         100%;
    background:    var(--app-dark);
    border-bottom: 4px solid var(--club-accent);
}

.auth-topbar__inner
{
    width:  min(100% - 2rem, 1180px);
    margin: 0 auto;
}

.auth-brand:hover
{
    color: #fff;
}

.auth-shell
{
    display:         flex;
    width:           100%;
    align-items:     center;
    justify-content: center;
    flex:            1 1 auto;
    padding:         1.25rem;
}

.activation-card form
{
    width:      100%;
    margin:     1.25rem 0 0;
    padding:    0;
    border:     0;
    box-shadow: none;
}

.activation-card h1,
.activation-card p
{
    text-align: center;
}

.activation-icon
{
    display:       grid;
    width:         64px;
    height:        64px;
    margin:        0 auto 1rem;
    place-items:   center;
    background:    #fff3cd;
    border:        1px solid #ffe69c;
    border-radius: 50%;
    font-size:     1.7rem;
}

.activation-help
{
    padding:     1rem;
    color:       var(--app-muted);
    background:  #f7f7f6;
    border-left: 4px solid var(--club-accent);
}

@media (max-width: 575px)
{
    .activation-card
    {
        padding: 1.5rem;
    }
}

.audit-page-header
{
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             1.5rem;
}

.audit-result-count
{
    display:        flex;
    min-width:      120px;
    padding:        .8rem 1rem;
    flex-direction: column;
    align-items:    center;
    background:     #fff;
    border:         1px solid var(--app-border);
    border-top:     3px solid var(--club-accent);
    border-radius:  10px;
}

.audit-result-count strong
{
    color:       var(--app-dark);
    font-size:   1.45rem;
    line-height: 1;
}

.audit-result-count span
{
    margin-top: .3rem;
    color:      var(--app-muted);
    font-size:  .78rem;
}

.audit-filter-panel
{
    padding: 1.25rem;
}

.audit-date-filters
{
    display:               grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap:                   1rem;
}

.audit-date-filters label
{
    display:     grid;
    gap:         .4rem;
    color:       var(--app-dark);
    font-size:   .86rem;
    font-weight: 700;
}

.audit-filter-actions
{
    display:   flex;
    margin:    1rem 0 1.25rem;
    gap:       .65rem;
    flex-wrap: wrap;
}

.audit-table-wrap
{
    border:        1px solid var(--app-border);
    border-radius: 10px;
}

.audit-table
{
    min-width:     1080px;
    margin-bottom: 0;
}

.audit-table > :not(caption) > * > *
{
    padding: .85rem .75rem;
}

.audit-table thead th
{
    min-width:      145px;
    vertical-align: middle;
    background:     #f4f5f5;
}

.audit-table thead th:first-child
{
    min-width: 180px;
}

.audit-table thead th:nth-child(5)
{
    min-width: 230px;
}

.audit-sort
{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .65rem;
    color:           var(--app-dark);
    font-weight:     800;
    text-decoration: none;
}

.audit-sort small
{
    color:     var(--app-muted);
    font-size: 1rem;
}

.audit-sort:hover,
.audit-sort.is-active,
.audit-sort.is-active small
{
    color: var(--club-accent);
}

.audit-column-filters th
{
    padding-top:    .5rem !important;
    padding-bottom: .75rem !important;
    background:     #fff !important;
}

.audit-column-filters span
{
    color:       var(--app-muted);
    font-size:   .72rem;
    font-weight: 500;
}

.audit-column-filters input
{
    min-width: 130px;
}

.audit-time,
.audit-ip
{
    white-space: nowrap;
}

.audit-action
{
    display:       inline-block;
    padding:       .24rem .45rem;
    color:         var(--club-accent);
    background:    color-mix(in srgb, var(--club-accent) 9%, white);
    border-radius: 6px;
    white-space:   nowrap;
}

.audit-details
{
    min-width: 220px;
    color:     var(--app-muted);
}

.audit-context,
.audit-change-list
{
    display: grid;
    gap:     .35rem;
}

.audit-context
{
    margin-bottom: .55rem;
    font-size:     .78rem;
}

.audit-context-item
{
    display:     flex;
    align-items: baseline;
    gap:         .3rem;
}

.audit-context-item > strong
{
    color: var(--app-dark);
}

.audit-disclosure
{
    min-width: 0;
}

.audit-disclosure summary
{
    width:       max-content;
    color:       var(--club-accent);
    cursor:      pointer;
    font-weight: 700;
}

.audit-disclosure div
{
    max-width:     42rem;
    margin-top:    .4rem;
    padding:       .55rem .65rem;
    color:         var(--app-muted);
    overflow-wrap: anywhere;
    background:    #f7f7f6;
    border:        1px solid var(--app-border);
    border-radius: 6px;
    line-height:   1.55;
}

.audit-change
{
    display: grid;
    gap:     .15rem;
}

.audit-change > strong
{
    color:     var(--app-dark);
    font-size: .8rem;
}

.audit-change > span
{
    display:     flex;
    align-items: center;
    gap:         .35rem;
    flex-wrap:   wrap;
}

.audit-change del,
.audit-change ins
{
    padding:         .12rem .3rem;
    border-radius:   3px;
    font-size:       .78rem;
    text-decoration: none;
}

.audit-change del
{
    color:      #8a2b2b;
    background: #fff0f0;
}

.audit-change ins
{
    color:      #176b38;
    background: #edf8f1;
}

.audit-change i
{
    color:      var(--app-muted);
    font-style: normal;
}

.audit-no-change
{
    font-size:  .8rem;
    font-style: italic;
}

.audit-detail-link
{
    margin-top:  .65rem;
    font-size:   .76rem;
    font-weight: 800;
}

.point-award-summary
{
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   .8rem;
    margin-bottom:         1rem;
}

.point-award-filter
{
    display:       grid;
    gap:           .4rem;
    margin-bottom: 1rem;
}

.point-award-filter > label
{
    color:       var(--app-dark);
    font-size:   .84rem;
    font-weight: 800;
}

.point-award-filter > div
{
    display:   flex;
    gap:       .55rem;
    flex-wrap: wrap;
}

.point-award-filter .form-control
{
    min-width: 240px;
    flex:      1 1 320px;
}

.point-award-summary > div
{
    display:        flex;
    padding:        .85rem 1rem;
    flex-direction: column;
    background:     #f7f7f6;
    border:         1px solid var(--app-border);
    border-radius:  8px;
}

.point-award-summary strong
{
    color:     var(--app-dark);
    font-size: 1.25rem;
}

.point-award-summary span
{
    color:     var(--app-muted);
    font-size: .78rem;
}

.point-award-reason
{
    min-width: 280px;
    color:     var(--app-muted);
}

.audit-ip
{
    color: var(--app-dark);
}

.statistics-header,
.public-predictions-heading
{
    display:         flex;
    max-width:       none;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             1.5rem;
}

.competition-status
{
    padding:       .5rem .75rem;
    color:         var(--app-muted);
    background:    #fff;
    border:        1px solid var(--app-border);
    border-radius: 999px;
    font-size:     .82rem;
    font-weight:   700;
    white-space:   nowrap;
}

.competition-status.is-live
{
    color:        #176b38;
    background:   #edf8f1;
    border-color: #b8dfc6;
}

.statistics-cards
{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.25rem;
}

.statistics-cards article
{
    display:       grid;
    min-height:    112px;
    align-content: space-between;
    padding:       1rem;
    background:    #fff;
    border:        1px solid var(--app-border);
    border-top:    4px solid var(--club-accent);
    box-shadow:    0 2px 7px rgba(0, 0, 0, .05);
}

.statistics-cards span,
.selected-player-summary span,
.season-answer-strip span
{
    color:     var(--app-muted);
    font-size: .82rem;
}

.statistics-cards strong
{
    color:       var(--app-dark);
    font-size:   2rem;
    line-height: 1;
}

.statistics-grid
{
    display:               grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap:                   1.25rem;
    margin-bottom:         1.25rem;
}

.top-scorers-list,
.points-list
{
    margin:     0;
    padding:    0;
    list-style: none;
}

.top-scorers-list li
{
    display:               grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items:           center;
    gap:                   .75rem;
    padding:               .8rem 0;
    border-bottom:         1px solid var(--app-border);
}

.top-scorers-list li:last-child,
.points-list li:last-child
{
    border-bottom: 0;
}

.top-scorer-rank
{
    display:       grid;
    width:         32px;
    height:        32px;
    place-items:   center;
    color:         #fff;
    background:    var(--app-dark);
    border-radius: 50%;
    font-weight:   700;
}

.top-scorer-name
{
    display: grid;
}

.top-scorer-name small,
.top-scorer-goals
{
    color:     var(--app-muted);
    font-size: .78rem;
}

.top-scorer-goals strong
{
    color:     var(--club-accent);
    font-size: 1.25rem;
}

.points-panel h3
{
    margin:    1rem 0 .35rem;
    font-size: 1rem;
}

.points-list li
{
    display:         flex;
    justify-content: space-between;
    gap:             1rem;
    padding:         .55rem 0;
    border-bottom:   1px solid var(--app-border);
}

.points-list strong
{
    color:       var(--club-accent);
    white-space: nowrap;
}

.points-limit
{
    font-weight: 700;
}

.points-example
{
    margin:      1rem 0 0;
    padding:     .75rem;
    color:       var(--app-muted);
    background:  #f7f7f6;
    border-left: 3px solid var(--club-accent);
    font-size:   .85rem;
}

.round-points-panel,
.point-awards-panel
{
    margin-bottom: 1.25rem;
}

.round-points-chart
{
    display: grid;
    gap:     .9rem;
}

.round-point-row
{
    display:               grid;
    grid-template-columns: minmax(150px, .7fr) minmax(180px, 2fr) 64px;
    align-items:           center;
    gap:                   1rem;
}

.round-point-label
{
    display: grid;
    gap:     .15rem;
}

.round-point-label span
{
    color:     var(--app-muted);
    font-size: .78rem;
}

.round-point-track
{
    height:        18px;
    overflow:      hidden;
    background:    #ededeb;
    border-radius: 999px;
}

.round-point-bar
{
    display:       block;
    width:         var(--round-points-width);
    height:        100%;
    background:    linear-gradient(90deg, var(--club-accent), var(--app-dark));
    border-radius: inherit;
}

.round-point-total
{
    color:      var(--club-accent);
    text-align: right;
}

.point-awards-table td
{
    vertical-align: middle;
}

.point-awards-table td small
{
    display:    block;
    margin-top: .15rem;
    color:      var(--app-muted);
}

.point-award-badge
{
    display:         inline-flex;
    min-width:       42px;
    padding:         .35rem .55rem;
    justify-content: center;
    color:           #176b38;
    background:      #edf8f1;
    border:          1px solid #b8dfc6;
    border-radius:   999px;
    font-weight:     800;
}

.public-predictions-heading
{
    margin-bottom: 1rem;
}

.player-picker
{
    display:   grid;
    min-width: 260px;
    gap:       .35rem;
}

.player-picker label
{
    font-size:   .82rem;
    font-weight: 700;
}

.locked-predictions
{
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     1.25rem;
    background:  #f7f7f6;
}

.locked-predictions > span
{
    font-size: 1.5rem;
}

.locked-predictions p
{
    margin: .2rem 0 0;
    color:  var(--app-muted);
}

.selected-player-summary,
.season-answer-strip
{
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   1rem;
    margin-bottom:         1rem;
    padding:               1rem;
    background:            #f7f7f6;
}

.selected-player-summary div,
.season-answer-strip div
{
    display: grid;
    gap:     .2rem;
}

.season-answer-strip
{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background:            #fff;
    border:                1px solid var(--app-border);
    border-left:           4px solid var(--club-accent);
}

.season-predictions
{
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   1rem;
    margin:                0 0 1rem;
    padding:               1rem;
    background:            #f7f7f6;
    border:                1px solid var(--app-border);
}

.season-predictions legend,
.season-predictions p
{
    grid-column: 1 / -1;
}

.season-predictions legend
{
    margin:      0;
    font-size:   1rem;
    font-weight: 700;
}

.season-predictions p
{
    margin:    0;
    color:     var(--app-muted);
    font-size: .85rem;
}

.season-predictions label
{
    display:     grid;
    gap:         .4rem;
    font-size:   .88rem;
    font-weight: 700;
}

.top-scorer-finalize-form
{
    margin-top:  1rem;
    padding-top: 1rem;
    border-top:  1px solid var(--app-border);
}

@media (max-width: 767px)
{
    .statistics-header,
    .public-predictions-heading
    {
        align-items:    stretch;
        flex-direction: column;
    }

    .statistics-cards,
    .statistics-grid
    {
        grid-template-columns: 1fr 1fr;
    }

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

    .player-picker
    {
        min-width: 0;
    }
}

@media (max-width: 575px)
{
    .statistics-cards,
    .selected-player-summary,
    .season-answer-strip,
    .season-predictions
    {
        grid-template-columns: 1fr;
    }

    .round-point-row
    {
        grid-template-columns: minmax(0, 1fr) 58px;
        gap:                   .45rem .75rem;
    }

    .round-point-track
    {
        grid-column: 1 / -1;
        grid-row:    2;
    }

    .round-point-total
    {
        grid-column: 2;
        grid-row:    1;
    }
}

.audit-pagination
{
    display:         flex;
    margin-top:      1rem;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
}

@media (max-width: 767px)
{
    .audit-page-header
    {
        align-items:    stretch;
        flex-direction: column;
    }

    .audit-result-count
    {
        align-items: flex-start;
    }

    .audit-date-filters
    {
        grid-template-columns: 1fr;
    }

    .audit-pagination
    {
        justify-content: space-between;
    }

    .point-award-summary
    {
        grid-template-columns: 1fr;
    }
}