.topbar-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

.league-logo-slot {
    display: grid;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 3px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--league-topbar-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.league-logo-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal.branding-modal {
    box-sizing: border-box;
    width: min(900px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.branding-modal form {
    display: grid;
    max-height: calc(100dvh - 24px);
    gap: 20px;
    overflow: auto;
    overscroll-behavior: contain;
}

.branding-header { padding-right: 34px; }
.branding-header h2 { margin: 0; }
.branding-header > p:last-child { margin: 7px 0 0; }
.branding-modal fieldset + fieldset { margin-top: 0; padding-top: 18px; }

.logo-choice-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.logo-choice {
    position: relative;
    cursor: pointer;
}

.logo-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.logo-choice > span {
    display: grid;
    min-height: 137px;
    padding: 10px 8px 9px;
    place-items: center;
    gap: 6px;
    border: 2px solid #e1e2dc;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}

.logo-choice:hover > span { transform: translateY(-2px); border-color: #b8c0ce; }
.logo-choice > input:focus-visible + span { outline: 3px solid rgba(57, 83, 134, .24); outline-offset: 2px; }
.logo-choice > input:checked + span {
    border-color: #d29a2c;
    background: #fff9e9;
    box-shadow: 0 0 0 3px rgba(210, 154, 44, .14);
}
.logo-choice img { display: block; width: 86px; height: 86px; max-width: 100%; object-fit: contain; }
.logo-choice strong { color: var(--ink); font-size: 11px; }

.custom-logo-panel {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(210px, .85fr);
    gap: 10px 16px;
    align-items: center;
}
.custom-logo-panel legend { grid-column: 1 / -1; }
.custom-logo-choice {
    grid-row: span 2;
    grid-template-columns: 20px 72px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 2px solid #e1e2dc;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.custom-logo-choice:has(> input:checked),
.custom-logo-choice.is-selected {
    border-color: #d29a2c;
    background: #fff9e9;
    box-shadow: 0 0 0 3px rgba(210, 154, 44, .14);
}
.custom-logo-choice > input { width: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: var(--gold-dark); }
.custom-logo-choice > span:last-child { display: grid; min-width: 0; gap: 4px; }
.custom-logo-choice strong { font-size: 12px; }
.custom-logo-choice small { color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.custom-logo-preview {
    display: grid;
    width: 72px;
    height: 72px;
    padding: 3px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed #aeb5bf;
    border-radius: 13px;
    color: #7d8695;
    background: #f5f5f1;
}
.custom-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.custom-logo-preview b { font-size: 31px; font-weight: 400; }
.custom-logo-file { align-self: end; }
.custom-logo-file input { min-height: 43px; padding: 7px; font-size: 11px; }
.branding-file-status { align-self: start; margin: 0 !important; font-size: 10px !important; }
.branding-file-status.success-text, .branding-file-status.danger-text { font-weight: 750; }

.theme-panel { display: grid; gap: 14px; }
.theme-panel legend { margin-bottom: 0; }
.theme-intro { margin: -5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }

.theme-palette-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.theme-choice {
    --theme-page: #f4f1e9;
    --theme-topbar: #101a31;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 61px;
    padding: 7px;
    align-items: center;
    gap: 9px;
    border: 2px solid #e1e2dc;
    border-radius: 12px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.theme-choice:hover { transform: translateY(-1px); border-color: #b8c0ce; }
.theme-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.theme-choice:has(> input:focus-visible) { outline: 3px solid rgba(57, 83, 134, .24); outline-offset: 2px; }
.theme-choice:has(> input:checked), .theme-choice.is-selected {
    border-color: #d29a2c;
    background: #fff9e9;
    box-shadow: 0 0 0 3px rgba(210, 154, 44, .14);
}
.theme-choice strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.theme-swatch {
    display: grid;
    grid-template-rows: 15px 28px;
    overflow: hidden;
    border: 1px solid rgba(17, 26, 48, .16);
    border-radius: 8px;
    box-shadow: 0 3px 9px rgba(16, 26, 49, .08);
}
.theme-swatch i { display: block; }
.theme-swatch i:first-child { background: var(--theme-topbar); }
.theme-swatch i:last-child { background: var(--theme-page); }
.theme-classic { --theme-page: #f4f1e9; --theme-topbar: #101a31; }
.theme-stadium { --theme-page: #eef4ef; --theme-topbar: #153f2e; }
.theme-burgundy { --theme-page: #f6efef; --theme-topbar: #6e1f2a; }
.theme-sky { --theme-page: #eef5fa; --theme-topbar: #164e73; }
.theme-violet { --theme-page: #f5f0fa; --theme-topbar: #4a246b; }
.theme-graphite { --theme-page: #ecedef; --theme-topbar: #20242c; }
.theme-sand { --theme-page: #f7f0e2; --theme-topbar: #754c16; }
.theme-black-gold { --theme-page: #f3efe5; --theme-topbar: #17130d; }

.custom-theme-panel {
    display: grid;
    grid-template-columns: minmax(205px, .75fr) minmax(330px, 1.25fr) minmax(190px, .75fr);
    gap: 13px;
    align-items: stretch;
    padding: 13px;
    border: 1px solid #dfe1dc;
    border-radius: 14px;
    background: #f9f9f6;
}
.custom-theme-panel:has(#custom-theme-choice:checked) {
    border-color: #d29a2c;
    background: #fffaf0;
    box-shadow: 0 0 0 3px rgba(210, 154, 44, .10);
}
.custom-theme-choice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.custom-theme-choice > input { width: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: var(--gold-dark); }
.custom-theme-choice > span { display: grid; gap: 4px; }
.custom-theme-choice strong { color: var(--ink); font-size: 12px; }
.custom-theme-choice small { color: var(--ink-soft); font-size: 9px; font-weight: 550; line-height: 1.45; }
.custom-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.color-field { display: grid; gap: 7px; }
.color-field-label { color: #364159; font-size: 12px; font-weight: 750; }
.color-input-row { display: grid; grid-template-columns: 47px minmax(0, 1fr); gap: 7px; }
.color-input-row input[type="color"] {
    width: 47px;
    min-height: 43px;
    padding: 3px;
    border-radius: 9px;
    cursor: pointer;
}
.color-input-row input[type="text"] { min-height: 43px; padding-inline: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-transform: uppercase; }
.theme-live-preview {
    --preview-page: #f4f1e9;
    --preview-topbar: #101a31;
    --preview-topbar-text: #ffffff;
    --preview-page-text: #111827;
    display: grid;
    grid-template-rows: 36px minmax(62px, 1fr);
    min-height: 105px;
    overflow: hidden;
    border: 1px solid rgba(17, 26, 48, .18);
    border-radius: 11px;
    box-shadow: 0 5px 14px rgba(16, 26, 49, .08);
}
.theme-live-preview > div, .theme-live-preview > section { display: grid; align-content: center; padding: 7px 11px; }
.theme-live-preview > div { color: var(--preview-topbar-text); background: var(--preview-topbar); }
.theme-live-preview > section { color: var(--preview-page-text); background: var(--preview-page); }
.theme-live-preview strong, .theme-live-preview b { font-size: 10px; }
.theme-live-preview span { opacity: .74; font-size: 8px; font-weight: 650; }
.theme-color-status { grid-column: 1 / -1; min-height: 14px; margin: -4px 0 0; color: var(--red); font-size: 10px; font-weight: 750; }

.branding-note {
    padding: 11px 13px;
    border: 1px solid #cbd7e9;
    border-radius: 11px;
    color: #3b537f;
    background: var(--blue-soft);
    font-size: 11px;
    line-height: 1.5;
}

.branding-actions {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 9px;
    padding-top: 3px;
}

@media (max-width: 940px) {
    .topbar.has-league-logo {
        min-height: 132px;
        padding-top: 82px;
        padding-bottom: 10px;
    }
    .topbar.has-league-logo .league-logo-slot {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 64px;
        height: 64px;
        transform: translateX(-50%);
    }
    .logo-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .logo-choice > span { min-height: 126px; }
    .theme-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .custom-theme-panel { grid-template-columns: minmax(190px, .8fr) minmax(310px, 1.2fr); }
    .theme-live-preview { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .topbar.has-league-logo { min-height: 124px; padding-top: 74px; }
    .topbar.has-league-logo .league-logo-slot { width: 58px; height: 58px; }
    .modal.branding-modal { width: calc(100vw - 10px); max-height: calc(100dvh - 10px); border-radius: 14px; }
    .branding-modal form { max-height: calc(100dvh - 10px); gap: 16px; padding: 20px 13px 16px; }
    .branding-header { padding-right: 38px; }
    .branding-header h2 { font-size: 25px; }
    .logo-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logo-choice > span { min-height: 130px; }
    .logo-choice img { width: 88px; height: 88px; }
    .custom-logo-panel { grid-template-columns: 1fr; }
    .custom-logo-panel legend { grid-column: auto; }
    .custom-logo-choice { grid-row: auto; grid-template-columns: 18px 66px minmax(0, 1fr); }
    .custom-logo-preview { width: 66px; height: 66px; }
    .theme-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-choice { grid-template-columns: 45px minmax(0, 1fr); min-height: 58px; gap: 7px; }
    .theme-swatch { grid-template-rows: 14px 25px; }
    .custom-theme-panel { grid-template-columns: 1fr; padding: 11px; }
    .custom-color-grid { grid-template-columns: 1fr; }
    .theme-live-preview { grid-column: auto; }
    .theme-color-status { grid-column: auto; }
    .branding-actions { grid-template-columns: 1fr 1fr; }
    .branding-actions > span { display: none; }
    .branding-actions .button { width: 100%; padding-inline: 8px; }
    #remove-league-logo { grid-column: 1 / -1; }
}