*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.player-mode, body.player-mode *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fat):not(.fad):not(.fab):not(.anticon) {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

.body-container {
    margin-bottom: 0;
}

.wrapper {
    padding: 0;
}

#layout-body {
    padding: 0;
}

.popular-job {
    padding: 0;
    margin: 0;
}

/* ------------------------------------------------------------------
   Boot skeleton.

   The shell HTML mounts an EMPTY div and everything after it waits on
   the portal bundle - parse, execute, mount. Until that lands the
   document paints white, which is exactly the window a member sees
   after tapping a club in "My Clubs": the browser has already swapped
   away from the sheet, and React's own ShellSkeleton has not run yet.
   This markup ships INSIDE the HTML, so the very first paint of the new
   document is the portal's shape instead of a blank page.

   It is deliberately self-contained - no bundle CSS, no fonts, no JS -
   so it cannot itself be blocked by anything it is covering for.
   React removes it: createRoot(...).render() clears the container's
   existing children on its first commit, which is the same frame the
   real skeleton appears on, so there is no gap between the two.
   ------------------------------------------------------------------ */
#cr-boot-skeleton {
    --cr-bs-bg: #f5f5f5;
    --cr-bs-surface: #fff;
    --cr-bs-border: #f0f0f0;
    --cr-bs-block: #ebebeb;
    --cr-bs-sheen: #f7f7f7;
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--cr-bs-bg);
    overflow: hidden;
}

html[data-cr-boot-theme="dark"] #cr-boot-skeleton {
    --cr-bs-bg: #000;
    --cr-bs-surface: #141414;
    --cr-bs-border: #303030;
    --cr-bs-block: #262626;
    --cr-bs-sheen: #333;
}

#cr-boot-skeleton .cr-bs-block {
    border-radius: 4px;
    background: var(--cr-bs-block);
    background-image: linear-gradient(90deg, var(--cr-bs-block) 25%, var(--cr-bs-sheen) 37%, var(--cr-bs-block) 63%);
    background-size: 400% 100%;
    animation: cr-bs-shimmer 1.4s ease infinite;
}

@keyframes cr-bs-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    #cr-boot-skeleton .cr-bs-block { animation: none; }
}

#cr-boot-skeleton .cr-bs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: var(--cr-bs-surface);
    border-bottom: 1px solid var(--cr-bs-border);
}

#cr-boot-skeleton .cr-bs-headings {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#cr-boot-skeleton .cr-bs-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

#cr-boot-skeleton .cr-bs-tiles {
    display: flex;
    gap: 12px;
}

#cr-boot-skeleton .cr-bs-tiles > * {
    flex: 1;
}

#cr-boot-skeleton .cr-bs-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cr-bs-surface);
    border-top: 1px solid var(--cr-bs-border);
}

#cr-boot-skeleton .cr-bs-nav > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* The desktop shell has no bottom tab bar - the wide layout gets header + content only. */
@media (min-width: 768px) {
    #cr-boot-skeleton .cr-bs-nav { display: none; }
}