.club-badge { display:inline-flex; width:48px; height:48px; flex-shrink:0; vertical-align:middle; }
.club-badge svg { display:block; width:100%; height:100%; overflow:visible; }
.next-match-team > .club-badge { width:64px; height:64px; margin:0 auto 6px; }
.club-identity-button { display:flex; align-items:center; justify-content:center; flex:0 0 calc(48 * var(--layout-unit)); width:calc(48 * var(--layout-unit)); height:calc(58 * var(--layout-unit)); box-sizing:border-box; margin:0; padding:calc(5 * var(--layout-unit)); background:linear-gradient(#365d86, #193650); border:calc(2 * var(--layout-unit)) solid #081a2e; border-radius:calc(12 * var(--layout-unit)); box-shadow:inset 0 2px 0 #ffffff26, 0 3px 0 #081a2e; cursor:pointer; }
.club-identity-button:hover { background:linear-gradient(#426f9d, #234663); }
.club-identity-button:active { transform:translateY(2px); box-shadow:inset 0 1px 3px #0004, 0 1px 0 #081a2e; }
.club-identity-button .club-badge { width:100%; height:100%; }
.club-identity-button:focus-visible { outline:2px solid #d7e6ad; outline-offset:3px; }
.live-score-team > .club-badge { width:42px; height:42px; margin:auto; }
.preview-team header > .club-badge { width:42px; height:42px; float:right; }
.new-season-teams .club-badge { width:40px; height:40px; }
.club-designer-backdrop { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; background:#061b15dc; backdrop-filter:blur(7px); overflow:auto; }
.club-designer { position:relative; width:440px; max-width:100%; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; border:2px solid #132e25; border-radius:22px; background:#f5f4e9; color:#18372e; box-shadow:0 22px 90px #0008; padding:18px; font-family:Roboto,Arial,sans-serif; }
.club-designer form { display:flex; flex-direction:column; min-height:0; }
.club-designer-form-content { min-height:0; overflow-y:auto; padding:4px; margin:-4px; scrollbar-width:thin; }
.club-designer button { cursor:pointer; font-family:inherit; }
.club-designer-close { position:absolute; top:5px; right:10px; width:28px; height:28px; padding:0; background:none; border:0; font-size:26px; color:inherit; }
.club-name-label { display:block; font-size:11px; font-weight:900; margin:0 0 7px; }
#club-name { width:100%; box-sizing:border-box; padding:10px; border:2px solid #bac5b5; border-radius:9px; font:700 16px Roboto,Arial,sans-serif; color:#18372e; background:#fff; }
.club-layer-selector { margin-top:12px; }
.club-layer-carousel { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; grid-template-rows:repeat(2,50px); align-items:center; justify-items:center; gap:8px; padding:8px; background:#e5e9dc; border-radius:12px; }
.club-logo-kit { grid-column:2; grid-row:1 / 3; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.club-layer-carousel .club-badge { width:112px; height:112px; }
.club-kit-icons { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.club-kit-icons svg { display:block; width:24px; height:26px; fill:var(--kit-primary); stroke:#18372e; stroke-width:2; stroke-linejoin:round; }
.club-kit-icons .club-kit-shorts { fill:var(--kit-secondary); }
.club-kit-icons .kit-accent { fill:none; stroke:#18372e; stroke-width:3; }
.club-kit-icons .kit-crest { fill:#18372e; stroke:none; }
.logo-prev { grid-column:1; grid-row:1; }
.logo-next { grid-column:3; grid-row:1; }
.badge-prev { grid-column:1; grid-row:2; }
.badge-next { grid-column:3; grid-row:2; }
.club-layer-arrow { width:36px; height:44px; flex-shrink:0; padding:0 0 5px; border:2px solid #132e25; border-radius:9px; background:linear-gradient(#fff,#d9dfce); box-shadow:0 3px 0 #132e25; color:#18372e; font-size:29px; font-weight:900; line-height:1; }
.club-layer-arrow small { display:block; font-size:9px; font-weight:900; line-height:1; }
.club-layer-arrow:active { transform:translateY(2px); box-shadow:0 1px 0 #132e25; }
.club-color-row { min-width:0; border:0; padding:0; margin:12px 0 0; }
.club-color-row legend { font-size:11px; font-weight:900; margin-bottom:7px; padding:0; }
.club-color-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.club-color-options button { height:32px; border:2px solid #18372e55; border-radius:9px; box-shadow:0 2px 0 #18372e55; }
.club-color-options button[aria-pressed=true] { outline:2px solid #18372e; outline-offset:2px; }
.club-color-options button > span { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#18372e; font-weight:900; font-size:14px; box-shadow:0 1px 3px #0006; }
.club-designer .club-save { flex-shrink:0; min-height:60px; margin:16px 0 6px; padding:10px 18px; border-radius:22px; }
.club-designer .club-save .match-kick-off-copy > strong { font-size:28px; }
.club-save-arrow { font-size:36px; font-weight:900; text-shadow:1px 2px 0 #102015; }
.club-save-error { color:#a42e35; font-size:13px; }
.club-designer :focus-visible { outline:3px solid #bf8c24; outline-offset:3px; }
@media(max-width:370px) { .club-designer { padding:16px; } .club-layer-carousel { padding-inline:6px; gap:8px; } }
.table-club-name .club-badge { width:24px; height:24px; margin-right:5px; }

@media(max-height:600px) {
    .club-designer { padding:12px 16px; }
    .club-layer-carousel { grid-template-rows:repeat(2,44px); padding:5px 8px; gap:4px; }
    .club-layer-carousel .club-badge { width:92px; height:92px; }
    .club-color-row { margin-top:9px; }
    .club-color-options button { height:28px; }
    .club-designer .club-save { min-height:54px; margin-top:12px; }
}