/* ====================================================
   GENERIC RESPONSIVE LAYOUT
   Shared shell styles for mobile, tablet and desktop.
   Loaded from PlayersFirst.UI in both host apps.
   ==================================================== */

/* Base shell */
html, body {
    min-height: 100%;
}

.pf-app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

/* Content area */
.pf-shell-content {
    flex: 1;
    width: 100%;
    padding: 1rem 1rem 5.5rem;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .pf-app-shell {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .pf-shell-content {
        padding: 1rem 1rem 5rem;
        max-width: 100%;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .pf-shell-content {
        padding: 1.5rem 1.5rem 5rem;
        max-width: 100%;
    }
}

/* Desktop / Web (1024px+) */
@media (min-width: 1024px) {
    .pf-sidebar {
        --sidebar-accent: #4b0082;
        --sidebar-tint: #f5efff;
        background:#fff;
        border-right:1px solid #e8edf5;
        box-shadow:4px 0 18px rgba(15,23,42,.045);
        color:#14213d;
        display:flex;
        flex-direction:column;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 16rem;
        z-index: 30;
    }

    .pf-sidebar:has(.role-player) { --sidebar-accent:var(--pf-player-red,#c41e3a); --sidebar-tint:#fff0f2; }
    .pf-sidebar:has(.role-parent) { --sidebar-accent:var(--pf-parent-green,#00a651); --sidebar-tint:#edf9f2; }
    .pf-sidebar:has(.role-club) { --sidebar-accent:var(--pf-club-blue,#003da5); --sidebar-tint:#edf3ff; }
    .pf-sidebar:has(.role-admin) { --sidebar-accent:var(--pf-admin-purple,#6B0C95); --sidebar-tint:#f5ecfa; }
    .pf-desktop-sidebar-profile { align-items:center; border-bottom:1px solid #e8edf5; color:#14213d; display:flex; gap:.7rem; min-height:4.75rem; padding:.75rem 1rem; text-decoration:none; }
    .pf-desktop-sidebar-profile > span:last-child { display:flex; flex-direction:column; min-width:0; }
    .pf-desktop-sidebar-profile strong { font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pf-desktop-sidebar-profile small { color:#7b879f; font-size:.67rem; margin-top:.15rem; }
    .pf-desktop-sidebar-profile .pf-flyout-avatar { align-items:center; background:var(--sidebar-tint); border:2px solid color-mix(in srgb,var(--sidebar-accent) 26%,white); border-radius:50%; color:var(--sidebar-accent); display:inline-flex; flex:0 0 auto; font-size:.7rem; font-weight:800; height:2.85rem; justify-content:center; overflow:hidden; width:2.85rem; }
    .pf-desktop-sidebar-profile .pf-flyout-avatar img { height:100%; object-fit:cover; width:100%; }
    .pf-sidebar .pf-sidebar-nav { flex:1; overflow-y:auto; padding:.75rem; }
    .pf-sidebar .pf-navigation-link { align-items:center; border-radius:.65rem; color:#14213d; display:flex; font-size:.82rem; font-weight:600; gap:.75rem; margin:.08rem 0; padding:.68rem .75rem; text-decoration:none; }
    .pf-sidebar .pf-navigation-link:hover,
    .pf-sidebar .pf-navigation-link.active { background:var(--sidebar-tint); color:var(--sidebar-accent); }
    .pf-sidebar .pf-navigation-icon { align-items:center; display:inline-flex; font-size:1rem; height:1.4rem; justify-content:center; width:1.4rem; }
    .pf-sidebar .pf-navigation-coming-soon { background:#eef2f7;border-radius:999px;color:#667188;font-size:.56rem;font-weight:700;margin-left:auto;padding:.18rem .4rem;white-space:nowrap; }
    .pf-sidebar .pf-navigation-icon img { filter:none; height:1.25rem !important; object-fit:contain; width:1.25rem !important; }
    .pf-sidebar .pf-navigation-link[href$="/settings"],
    .pf-sidebar .pf-navigation-link[href="/login"] { border-top:1px solid #e8edf5; border-radius:0 0 .65rem .65rem; margin-top:.55rem; padding-top:.85rem; }
    .pf-desktop-sidebar-footer { border-top:1px solid #e8edf5; display:flex; flex-direction:column; margin:0 1rem; padding:.85rem 0 1rem; }
    .pf-desktop-sidebar-footer strong { color:var(--sidebar-accent); font-size:.82rem; }
    .pf-desktop-sidebar-footer small { color:#8792a8; font-size:.6rem; margin-top:.12rem; }
    .pf-sidebar:has(.role-player) { background:var(--pf-player-red,#c41e3a); border-right-color:rgba(255,255,255,.18); color:#fff; }
    .pf-sidebar:has(.role-player) .pf-desktop-sidebar-profile,
    .pf-sidebar:has(.role-player) .pf-desktop-sidebar-footer { border-color:rgba(255,255,255,.2); color:#fff; }
    .pf-sidebar:has(.role-player) .pf-desktop-sidebar-profile small,
    .pf-sidebar:has(.role-player) .pf-desktop-sidebar-footer small { color:rgba(255,255,255,.7); }
    .pf-sidebar:has(.role-player) .pf-desktop-sidebar-profile .pf-flyout-avatar { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.65); color:#fff; }
    .pf-sidebar:has(.role-player) .pf-navigation-link { color:#fff; }
    .pf-sidebar:has(.role-player) .pf-navigation-link:hover,
    .pf-sidebar:has(.role-player) .pf-navigation-link.active { background:#fff; color:var(--pf-player-red,#c41e3a); }
    .pf-sidebar:has(.role-player) .pf-navigation-link[href$="/settings"],
    .pf-sidebar:has(.role-player) .pf-navigation-link[href="/login"] { border-color:rgba(255,255,255,.2); }
.pf-sidebar:has(.role-player) .pf-desktop-sidebar-footer strong { color:#fff; }

    .pf-shell-content {
        padding: 2rem;
        max-width: 1600px;
    }

    /* Only shells that render a sidebar reserve room for it. */
    .pf-app-shell:has(.pf-sidebar) .pf-shell-content {
        width: calc(100% - 16rem);
        margin-left: max(16rem, calc(16rem + (100% - 16rem - 1600px) / 2));
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .pf-shell-content {
        padding: 2.5rem;
    }
}

/* ====================================================
   LEFT FLYOUT MENU
   ==================================================== */
.pf-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: min(85%, 320px);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
    z-index: 9999;
}

.pf-flyout-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.pf-flyout-brand {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: inherit;
}

.pf-flyout-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
}

.pf-mobile-menu .pf-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}

.pf-mobile-menu .pf-navigation-link {
    align-items: center;
    border-radius: 0;
    color: #ffffff;
    display: flex;
    gap: 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
}

.pf-mobile-menu .pf-navigation-link:hover,
.pf-mobile-menu .pf-navigation-link.active {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.pf-mobile-menu .pf-navigation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
}

.pf-mobile-menu .pf-navigation-icon img {
    filter: brightness(0) invert(1);
}

.pf-flyout-switch {
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: #ffffff;
    display: block;
    font-weight: 600;
    padding: 1rem 1.25rem;
    text-decoration: none;
}

/* Role-coloured flyout backgrounds */
.pf-mobile-menu.role-player { background: var(--pf-player-red, #C41E3A); color: #ffffff; }
.pf-mobile-menu.role-parent { background: var(--pf-parent-green, #00A651); color: #ffffff; }
.pf-mobile-menu.role-club { background: var(--pf-club-blue, #003DA5); color: #ffffff; }
.pf-mobile-menu.role-admin { background: var(--pf-admin-purple, #6B0C95); color: #ffffff; }
/* Branded Blazor circuit error recovery */
#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    box-sizing: border-box;
    padding: 1.25rem;
    background: rgba(8, 17, 42, .74);
    backdrop-filter: blur(5px);
}

#blazor-error-ui .pf-error-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vw, 520px);
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid #e4e1f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(7, 14, 36, .3);
    color: #111a38;
}

#blazor-error-ui .pf-error-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #f0e9ff;
    color: #6426d9;
    font-size: 1.45rem;
}

#blazor-error-ui .pf-error-copy strong,
#blazor-error-ui .pf-error-copy p,
#blazor-error-ui .pf-error-eyebrow { display: block; }
#blazor-error-ui .pf-error-eyebrow { margin-bottom: .25rem; color: #6426d9; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#blazor-error-ui .pf-error-copy strong { font-size: 1.2rem; }
#blazor-error-ui .pf-error-copy p { margin: .4rem 0 0; color: #69728a; line-height: 1.5; }
#blazor-error-ui .reload { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-radius: 9px; background: linear-gradient(135deg, #7131df, #5315bd); color: #fff; font-weight: 800; text-decoration: none; }
#blazor-error-ui .dismiss { position: absolute; top: .75rem; right: .8rem; width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f5f6fa; color: #5f687d; font-size: 1.35rem; line-height: 1; cursor: pointer; }

@media (max-width: 520px) {
    #blazor-error-ui .pf-error-card { grid-template-columns: 1fr; text-align: center; }
    #blazor-error-ui .pf-error-mark { margin: 0 auto; }
    #blazor-error-ui .reload { grid-column: 1; justify-self: stretch; justify-content: center; }
}

/* Shared authenticated-role header. Desktop continues to use the existing sidebar. */
.pf-role-mobile-header,
.pf-menu-backdrop { display: none; }

@media (max-width: 1023px) {
    .pf-role-mobile-header {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #e8edf5;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .05);
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
        min-height: 4rem;
        padding: max(.55rem, env(safe-area-inset-top, 0px)) 1rem .55rem;
        box-sizing: border-box;
        height: calc(4rem + env(safe-area-inset-top, 0px));
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100;
    }

    .pf-app-shell:has(.pf-role-mobile-header) .pf-shell-content {
        padding-top: calc(5rem + env(safe-area-inset-top, 0px));
    }

    .pf-role-mobile-header.role-player { --header-accent: var(--pf-player-red, #c41e3a); }
    .pf-role-mobile-header.role-parent { --header-accent: var(--pf-parent-green, #00a651); }
    .pf-role-mobile-header.role-club { --header-accent: var(--pf-club-blue, #003da5); }
    .pf-role-mobile-header.role-admin { --header-accent: var(--pf-admin-purple, #6B0C95); }

    .pf-role-header-button,
    .pf-role-header-avatar {
        align-items: center;
        background: transparent;
        border: 0;
        color: #14213d;
        display: inline-flex;
        font-size: 1.25rem;
        height: 2.5rem;
        justify-content: center;
        padding: 0;
        text-decoration: none;
        width: 2.5rem;
    }

    .pf-role-mobile-brand {
        align-items: center;
        color: #14213d;
        display: inline-flex;
        font-size: .95rem;
        gap: .45rem;
        justify-self: center;
        min-width: 0;
        text-decoration: none;
    }

    .pf-role-mobile-brand img { height: 1.75rem; object-fit: contain; width: 1.75rem; }
    .pf-role-mobile-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-role-header-actions { align-items: center; display: flex; gap: .1rem; }
    .pf-role-header-identity { display:none; }
    .pf-role-header-actions .pf-role-header-button { color: var(--header-accent); }
    .pf-role-header-button { position: relative; }
    .pf-role-mobile-header > .pf-role-header-button {
        font-size: 1.8rem;
        font-weight: 900;
        width: 2.75rem;
    }
    .pf-role-mobile-header > .pf-role-header-button i {
        line-height: 1;
        -webkit-text-stroke: .55px currentColor;
    }
    .pf-role-header-avatar { background: color-mix(in srgb, var(--header-accent) 10%, white); border: 2px solid color-mix(in srgb, var(--header-accent) 28%, white); border-radius: 50%; color: var(--header-accent); font-size: .72rem; font-weight: 800; height: 2.25rem; overflow: hidden; width: 2.25rem; }
    .pf-role-header-avatar img { height: 100%; object-fit: cover; width: 100%; }
    .pf-role-header-badge { align-items: center; background: #e93448; border: 2px solid #fff; border-radius: 99px; color: #fff; display: inline-flex; font-size: .55rem; font-weight: 800; height: 1rem; justify-content: center; min-width: 1rem; padding: 0 .18rem; position: absolute; right: .05rem; top: .05rem; }

    .pf-menu-backdrop {
        background: rgba(8, 17, 42, .48);
        border: 0;
        display: block;
        inset: 0;
        padding: 0;
        position: fixed;
        z-index: 9998;
    }

    .pf-mobile-menu {
        background: #fff !important;
        color: #14213d !important;
        width: min(88%, 340px);
    }

    .pf-mobile-menu.role-player { --flyout-accent: var(--pf-player-red, #c41e3a); --flyout-tint: #fff0f2; }
    .pf-mobile-menu.role-parent { --flyout-accent: var(--pf-parent-green, #00a651); --flyout-tint: #edf9f2; }
    .pf-mobile-menu.role-club { --flyout-accent: var(--pf-club-blue, #003da5); --flyout-tint: #edf3ff; }
    .pf-mobile-menu.role-admin { --flyout-accent: var(--pf-admin-purple, #6B0C95); --flyout-tint: #f5ecfa; }

    .pf-mobile-menu .pf-flyout-header { border-bottom-color: #e8edf5; padding: calc(1.2rem + env(safe-area-inset-top, 0px)) 1.15rem 1.1rem; }
    .pf-flyout-profile { align-items: center; color: #14213d; display: flex; gap: .75rem; min-width: 0; text-decoration: none; }
    .pf-flyout-profile > span:last-child { display: flex; flex-direction: column; min-width: 0; }
    .pf-flyout-profile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-flyout-profile small { color: #72809b; margin-top: .12rem; }
    .pf-flyout-avatar { align-items: center; background: var(--flyout-tint); border: 2px solid color-mix(in srgb, var(--flyout-accent) 25%, white); border-radius: 50%; color: var(--flyout-accent); display: inline-flex; flex: 0 0 auto; font-size: .75rem; font-weight: 800; height: 3.25rem; justify-content: center; overflow: hidden; width: 3.25rem; }
    .pf-flyout-avatar img { height: 100%; object-fit: cover; width: 100%; }
    .pf-mobile-menu .pf-flyout-close { color: #14213d; font-size: 1.1rem; }

    .pf-mobile-menu .pf-sidebar-nav { padding: .75rem; }
    .pf-mobile-menu .pf-navigation-link { border-radius: .7rem; color: #14213d; font-weight: 600; margin: .08rem 0; padding: .72rem .8rem; }
    .pf-mobile-menu .pf-navigation-link:hover,
    .pf-mobile-menu .pf-navigation-link.active { background: var(--flyout-tint); color: var(--flyout-accent); }
    .pf-mobile-menu .pf-navigation-icon { color: currentColor; }
    .pf-mobile-menu .pf-navigation-coming-soon { background:var(--flyout-tint);border-radius:999px;color:var(--flyout-accent);font-size:.58rem;font-weight:700;margin-left:auto;padding:.2rem .45rem;white-space:nowrap; }
    .pf-mobile-menu .pf-navigation-icon img { filter: none; }
    .pf-mobile-menu .pf-navigation-link[href$="/settings"] { border-top: 1px solid #e8edf5; border-radius: 0 0 .7rem .7rem; margin-top: .65rem; padding-top: 1rem; }
    .pf-mobile-menu .pf-navigation-link[href="/login"] { border-top: 1px solid #e8edf5; border-radius: 0 0 .7rem .7rem; margin-top: .65rem; padding-top: 1rem; }

    .pf-flyout-footer { border-top: 1px solid #e8edf5; display: flex; flex-direction: column; margin: 0 1.15rem; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px)); }
    .pf-flyout-footer strong { color: var(--flyout-accent); font-size: .95rem; }
    .pf-flyout-footer small { color: #8792a8; font-size: .65rem; margin-top: .15rem; }

    /* Player keeps its established red navigation surface. */
    .pf-mobile-menu.role-player { background: var(--pf-player-red, #c41e3a) !important; color: #fff !important; }
    .pf-mobile-menu.role-player .pf-flyout-header,
    .pf-mobile-menu.role-player .pf-flyout-footer { border-color: rgba(255,255,255,.2); }
    .pf-mobile-menu.role-player .pf-flyout-profile,
    .pf-mobile-menu.role-player .pf-flyout-close,
    .pf-mobile-menu.role-player .pf-navigation-link { color: #fff; }
    .pf-mobile-menu.role-player .pf-flyout-profile small,
    .pf-mobile-menu.role-player .pf-flyout-footer small { color: rgba(255,255,255,.72); }
    .pf-mobile-menu.role-player .pf-flyout-avatar { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.65); color: #fff; }
    .pf-mobile-menu.role-player .pf-navigation-link:hover,
    .pf-mobile-menu.role-player .pf-navigation-link.active { background: #fff; color: var(--pf-player-red, #c41e3a); }
    .pf-mobile-menu.role-player .pf-navigation-link[href$="/settings"],
    .pf-mobile-menu.role-player .pf-navigation-link[href="/login"] { border-color: rgba(255,255,255,.2); }
    .pf-mobile-menu.role-player .pf-flyout-footer strong { color: #fff; }
}

@media (min-width: 1024px) {
    .pf-role-mobile-header {
        align-items: center;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid #e8edf5;
        box-shadow: 0 4px 18px rgba(15,23,42,.055);
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        height: 4.75rem;
        left: 16rem;
        padding: 0 2rem;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 90;
    }

    .pf-role-mobile-header.role-player { --header-accent: var(--pf-player-red, #c41e3a); }
    .pf-role-mobile-header.role-parent { --header-accent: var(--pf-parent-green, #00a651); }
    .pf-role-mobile-header.role-club { --header-accent: var(--pf-club-blue, #003da5); }
    .pf-role-mobile-header.role-admin { --header-accent: var(--pf-admin-purple, #6B0C95); }
    .pf-role-mobile-header > .pf-role-header-button { display:none; }
    .pf-role-mobile-brand { align-items:center; color:#14213d; display:inline-flex; font-size:1.05rem; gap:.6rem; justify-self:start; text-decoration:none; }
    .pf-role-mobile-brand img { height:2rem; object-fit:contain; width:2rem; }
    .pf-role-header-actions { align-items:center; display:flex; gap:.65rem; }
    .pf-role-header-button { align-items:center; background:#f7f8fb; border:1px solid #e8edf5; border-radius:50%; color:var(--header-accent); display:inline-flex; font-size:1.15rem; height:2.55rem; justify-content:center; position:relative; text-decoration:none; width:2.55rem; }
    .pf-role-header-badge { align-items:center; background:#e93448; border:2px solid #fff; border-radius:99px; color:#fff; display:inline-flex; font-size:.55rem; font-weight:800; height:1rem; justify-content:center; min-width:1rem; padding:0 .18rem; position:absolute; right:-.12rem; top:-.12rem; }
    .pf-role-header-identity { color:#14213d; display:flex; flex-direction:column; line-height:1.15; margin-left:.25rem; text-align:right; text-decoration:none; }
    .pf-role-header-identity strong { font-size:.82rem; max-width:13rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pf-role-header-identity small { color:#7b879f; font-size:.67rem; margin-top:.18rem; }
    .pf-role-header-avatar { align-items:center; background:color-mix(in srgb, var(--header-accent) 10%, white); border:2px solid color-mix(in srgb, var(--header-accent) 28%, white); border-radius:50%; color:var(--header-accent); display:inline-flex; font-size:.72rem; font-weight:800; height:2.65rem; justify-content:center; overflow:hidden; text-decoration:none; width:2.65rem; }
    .pf-role-header-avatar img { height:100%; object-fit:cover; width:100%; }
    .pf-app-shell:has(.pf-sidebar) .pf-shell-content { padding-top:6.75rem; }
}

/* Landscape phones are wide enough to cross tablet breakpoints but remain
   vertically constrained. Keep the shared shell compact and scrollable. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1023px) {
    html, body, #app, .pf-app-shell { min-height:100dvh; }
    body { overflow-x:hidden; }
    .pf-role-mobile-header {
        grid-template-columns:2.5rem minmax(0,1fr) auto;
        height:calc(3.35rem + env(safe-area-inset-top,0px));
        min-height:3.35rem;
        padding:max(.3rem,env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) .3rem max(1rem,env(safe-area-inset-left,0px));
    }
    .pf-app-shell:has(.pf-role-mobile-header) .pf-shell-content {
        padding:calc(4rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px));
    }
    .pf-role-mobile-brand img { height:1.45rem;width:1.45rem; }
    .pf-role-header-button { height:2.15rem;width:2.15rem; }
    .pf-role-header-avatar { height:2rem;width:2rem; }
    .pf-mobile-menu { height:100dvh;max-width:340px;overflow-y:auto;width:min(52vw,340px); }
    .pf-mobile-menu .pf-flyout-header { padding:calc(.65rem + env(safe-area-inset-top,0px)) .85rem .6rem; }
    .pf-mobile-menu .pf-sidebar-nav { display:grid;gap:.1rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:.45rem .65rem; }
    .pf-mobile-menu .pf-navigation-link { margin:0;min-width:0;padding:.5rem .6rem; }
    .pf-flyout-footer { padding:.55rem 0 calc(.55rem + env(safe-area-inset-bottom,0px)); }
    .registration-container {
        align-items:flex-start!important;
        min-height:auto!important;
        padding:.75rem max(1rem,env(safe-area-inset-right,0px)) calc(.75rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))!important;
    }
    .registration-card,.club-registration-card,.parent-registration-card,.admin-registration-card {
        margin-inline:auto;max-width:760px!important;width:100%!important;
    }
    .modal,.pf-loading-overlay,.ct2-filter-backdrop { min-height:100dvh; }
}