/*
 * DINK A LOT shared stylesheet.
 * Page-specific rules are scoped with body.page-* classes so every HTML file can reuse this single CSS bundle.
 */

/* Netflix Sans — Netflix CDN. Latin only; Thai glyphs fall through to DB Heavent via per-character fallback. */
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Netflix Sans"; src: url("https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* DB Heavent — self-hosted from /assets/font (v3.2.1). Kept as Thai fallback under Netflix Sans. */
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Thin%20v3.2.1.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Thin%20It%20v3.2.1.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20UlLi%20v3.2.1.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20UlLi%20It%20v3.2.1.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Li%20v3.2.1.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Li%20It%20v3.2.1.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20v3.2.1.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20It%20v3.2.1.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Med%20v3.2.1.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Med%20It%20v3.2.1.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Bd%20v3.2.1.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Bd%20It%20v3.2.1.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Blk%20v3.2.1.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DB Heavent"; src: url("/assets/font/DB%20Heavent%20Blk%20It%20v3.2.1.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
    --dal-font: "Netflix Sans", "DB Heavent", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dal-font-mono: "Netflix Sans", "DB Heavent", ui-monospace, SFMono-Regular, Menlo, monospace;
    --dal-primary: #049df0;
    --dal-primary-hover: #0389d2;
    --dal-primary-active: #0274b3;
    --dal-app-bg:
        radial-gradient(circle at 50% -10%, rgba(4, 157, 240, 0.32) 0%, transparent 55%),
        linear-gradient(180deg, #0a1828 0%, #050811 100%);
    --luzz-marian-blue: #1cabe2;
    --luzz-oxford-blue: #002752;
    --luzz-pickleball-green: #bfe800;
    --luzz-anti-white: #F3F5F7;
    --text-dark: #002752;
    --text-light: #F3F5F7;
}

html, body, button, input, select, textarea {
    font-family: var(--dal-font);
}

/* =========================================================
   index.html (page-index)
   ========================================================= */
body.page-index {
    --index-text: #f6fbfe;
    --index-muted: rgba(246, 251, 254, 0.76);
    font-family: var(--dal-font);
    background: #071220;
    color: var(--index-text);
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.page-index .landing-media {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Middle wash (between poster and arc) is intentionally STATIC —
       both the poster edge kiss and the bottom anchor use fixed dark
       navy stops instead of the live --poster-edge-color /
       --adaptive-bg-color tokens. Keeps that zone calm while the
       poster + the arc itself still react to the artwork. */
    background:
        linear-gradient(180deg,
            #050811 0%,
            #071220 calc(var(--poster-bottom-y, 62vh) - 10px),
            #0d1a2a var(--poster-bottom-y, 62vh),
            #0a1828 100%);
}
body.page-index .landing-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain (not cover) keeps the full poster visible; no horizontal
       overflow. Anchored to the top so the dark/adaptive bleed below
       sits in the lower half of the screen. */
    object-fit: contain;
    object-position: top center;
    filter: saturate(1.02) contrast(1.02) brightness(0.62);
    transition: opacity 600ms ease;
    /* Soft fade on the bottom edge of the poster so it dissolves into
       the adaptive wash rather than ending in a hard line. mask-image
       in % is relative to the element, not the image, so the fade
       behaves predictably across aspect ratios. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 92%);
    /* Slow Ken-Burns zoom on the video fallback (loops continuously, so
       alternate between scale 1 and 1.08 over 24s for a never-ending
       drift). transform-origin centered = pure zoom, no pan. */
    transform-origin: 50% 30%;
    animation: home-poster-kenburns 24000ms ease-in-out infinite alternate;
}
/* Featured-event slideshow. Hidden until index-slideshow.js confirms at
   least one featured event has an imageUrl; otherwise the <video> below
   stays visible as the fallback. */
body.page-index .landing-slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
}
body.page-index .landing-slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 800ms ease;
    filter: saturate(1.02) contrast(1.02) brightness(0.62);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 92%);
    /* Held at scale(1) while inactive so the next activation always
       starts from the natural size. */
    transform: scale(1);
    transform-origin: 50% 30%;
}
body.page-index .landing-slide.is-active {
    opacity: 1;
    /* One-shot slow zoom for the slide's whole visible life. The
       slideshow rotates every 5s with 800ms crossfade, so 6s of
       animation tracks the slide from fade-in to fade-out neatly.
       forwards = the slide ends its life zoomed in, then the next
       active slide takes over with its own fresh animation. */
    animation: home-poster-kenburns-once 6000ms ease-out forwards;
}

/* Continuous slow zoom for the looping video fallback. */
@keyframes home-poster-kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* One-shot zoom for slideshow images — same curve, single direction. */
@keyframes home-poster-kenburns-once {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Respect reduced-motion: hold the poster still. The crossfade alone
   is enough for users who'd rather not see drift. */
@media (prefers-reduced-motion: reduce) {
    body.page-index .landing-video,
    body.page-index .landing-slide,
    body.page-index .landing-slide.is-active {
        animation: none !important;
        transform: scale(1) !important;
    }
}
body.page-index .landing-media[data-mode="slideshow"] .landing-video {
    opacity: 0;
}
body.page-index .poster-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0,
            transparent calc(var(--poster-bottom-y, 62vh) - 220px),
            rgba(var(--poster-edge-rgb, 21, 56, 74), 0.18) calc(var(--poster-bottom-y, 62vh) - 150px),
            rgba(var(--poster-edge-rgb, 21, 56, 74), 0.70) calc(var(--poster-bottom-y, 62vh) - 42px),
            var(--poster-edge-color, #15384a) var(--poster-bottom-y, 62vh),
            var(--adaptive-bg-color, #101820) calc(var(--poster-bottom-y, 62vh) + 190px),
            var(--adaptive-bg-color, #101820) 100%);
    transition:
        --poster-edge-color 700ms ease,
        --adaptive-bg-color 700ms ease,
        --adaptive-scrim-color 700ms ease;
}
/* Legacy full-screen dimmer replaced by .adaptive-overlay. Kept as a
   no-op so any cached page that still has the element doesn't draw a
   stale black layer. */
body.page-index .landing-video-overlay {
    display: none;
}

/* =========================================================
   Adaptive arc overlay (page-index)
   ---------------------------------------------------------
   Bottom-half curved container that holds the menu zone. Its colors
   track the lower band of the active poster/video, then get muted,
   darkened, and spread into three arc stops by home-adaptive-bg.js.
   ========================================================= */
@property --poster-bottom-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(31, 84, 94);
}

@property --adaptive-bg-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(16, 24, 32);
}

@property --poster-edge-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(21, 56, 74);
}

@property --adaptive-scrim-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(16, 24, 32);
}

@property --arc-top-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(30, 45, 54);
}

@property --arc-mid-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(42, 60, 70);
}

@property --arc-bottom-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(61, 85, 96);
}

@property --home-adaptive-color {
    syntax: "<color>";
    inherits: true;
    initial-value: rgb(26, 58, 94);
}

body.page-index {
    --poster-bottom-color: rgb(31, 84, 94);
    --poster-edge-color: rgb(21, 56, 74);
    --poster-edge-rgb: 21, 56, 74;
    --poster-bottom-y: 62vh;
    --adaptive-bg-color: rgb(16, 24, 32);
    --adaptive-scrim-color: rgb(16, 24, 32);
    --adaptive-scrim-rgb: 16, 24, 32;
    --arc-top-color: rgb(30, 45, 54);
    --arc-mid-color: rgb(42, 60, 70);
    --arc-bottom-color: rgb(61, 85, 96);
    --home-adaptive-color: var(--arc-top-color);
}

body.page-index .adaptive-overlay {
    position: fixed;
    left: -12vw;
    right: -12vw;
    bottom: 0;
    z-index: 1;
    /* Top edge (= curve peak) is anchored just above the title
       via --arc-anchor-y, computed at runtime by home-adaptive-bg.js
       using getBoundingClientRect(). The peak sits a fixed distance
       above title.top, which keeps the panel/content relationship consistent across
       iPhone SE to S24 Ultra regardless of viewport height or font
       loading shifts. Fallback covers the case where JS hasn't run
       yet (or is disabled): take a conservative slice of viewport so
       nothing flashes full-screen during boot. */
    top: var(--arc-anchor-y, calc(100% - 240px));
    pointer-events: none;
    border-radius: 50% 50% 0 0 / 26px 26px 0 0;
    overflow: hidden;
    /* Three stops all derive from --arc-mid-color (computed in
       home-adaptive-bg.js):
         top    = mid mixed 45% toward BLACK  (cooler shadow above icons)
         mid    = adaptive bg, in the artwork's hue family
         bottom = mid mixed 32% toward WHITE  (lifted underglow below)
       So the whole arc stays in one hue but reads as a top→bottom
       light gradient. */
    background:
        linear-gradient(180deg,
            var(--arc-top-color) 0%,
            var(--arc-mid-color) 48%,
            var(--arc-bottom-color) 100%);
    transition:
        --arc-top-color 700ms ease,
        --arc-mid-color 700ms ease,
        --arc-bottom-color 700ms ease;
    /* Deeper, softer shadow that lifts the arc clearly off the static
       middle wash. -100px offset + 100px blur reads as a halo above
       the curve rather than a hard line. */
    box-shadow: 0 -100px 100px rgba(0, 0, 0, 0.6);
}

/* Soft glow on the curved top edge so the arc feels luminous and the
   adaptive color reads as part of the same light wash that's already
   on the video above. */
body.page-index .adaptive-overlay::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(180deg, transparent 0%, var(--arc-top-color) 100%);
    opacity: 0.48;
    filter: blur(12px);
    pointer-events: none;
}
body.page-index .adaptive-overlay::after {
    content: "";
    position: absolute;
    inset: 42% 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

/* On wide screens the menu sits at the bottom in a single 6-tile row,
   so the curved arc drawer that anchors to the title is replaced with
   a simple bottom-pinned strip — same idea as mobile but a 6x1 grid
   instead of 3x2. The arc would float as a stray gradient otherwise.
   Full desktop block lives below the default + mobile rules to win on
   source order (see "Desktop overrides" further down). */
@media (min-width: 601px) {
    body.page-index .adaptive-overlay {
        display: none;
    }
}

body.page-index .profile-picker {
    position: relative;
    z-index: 3;
    width: min(960px, calc(100vw - 32px));
    padding: 32px 0;
    text-align: center;
}
body.page-index .profile-picker-title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin: 0 0 40px;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
body.page-index .profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 36px);
    justify-items: center;
    max-width: 560px;
    margin: 0 auto;
}
body.page-index .profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.2s ease;
}
body.page-index .profile-card:hover,
body.page-index .profile-card:focus-visible {
    color: #ffffff;
    outline: none;
}
body.page-index .profile-tile {
    width: clamp(96px, 16vw, 140px);
    height: clamp(96px, 16vw, 140px);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    border: 3px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
body.page-index .profile-tile svg {
    width: 52%;
    height: 52%;
}
body.page-index .profile-card:hover .profile-tile,
body.page-index .profile-card:focus-visible .profile-tile {
    border-color: #ffffff;
    transform: scale(1.04);
}
body.page-index .profile-tile-booking {
    background: #1cabe2;
}
body.page-index .profile-tile-coaching {
    background: #e23a3a;
}
body.page-index .profile-tile-events {
    background: #f5a200;
}
body.page-index .profile-tile-shop {
    background: #8b5cf6;
}
body.page-index .profile-tile-academy {
    background: #14b8a6;
}
body.page-index .profile-tile-profile {
    background: #2ea05a;
}
body.page-index .profile-tile-leaderboard {
    background: #d4af37;
}
body.page-index .profile-tile-feedback {
    background: #049df0;
}
body.page-index .profile-label {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.02em;
}
@media (max-width: 600px) {
    body.page-index {
        display: block;
        min-height: 100dvh;
    }
    /* Profile picker pinned to the bottom of the viewport on mobile so the
       browser address bar can't push it off-screen. dvh + safe-area-inset
       keeps it flush with the iOS home indicator. */
    body.page-index .profile-picker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        /* Background now comes from .adaptive-overlay (which sits at z:1
           under this menu and provides the arc + color-shifted gradient).
           The menu container itself stays transparent so the adaptive wash
           reads through. */
        background: transparent;
    }
    body.page-index .profile-picker-title {
        /* Smaller + lighter than before. Netflix's "Choose Your
           Profile" reads as a calm hint, not a headline. Extra margin
           below lets the grid breathe. */
        font-size: 0.95rem;
        font-weight: 400;
        margin-bottom: 26px;
    }
    body.page-index .profile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Row gap bumped 10 -> 18 so the two rows breathe. Column gap
           stays tight (8) for the grouped Netflix-shelf feel. */
        gap: 18px 8px;
        max-width: 340px;
    }
    body.page-index .profile-tile {
        /* Trimmed ~10% (78 -> 70) so the tiles read as compact icons
           rather than big chiclets. */
        width: 70px;
        height: 70px;
        border-radius: 14px;
    }
    body.page-index .profile-card {
        gap: 4px;
    }
    body.page-index .profile-label {
        /* Bold + slightly larger so the labels claim their own line
           confidently — Netflix profile-name treatment. */
        font-size: 0.88rem;
        font-weight: 700;
        line-height: 1.2;
    }
}

/* =========================================================
   Desktop overrides (page-index) — must come AFTER the default
   .profile-* rules and the mobile @media block to win on source
   order. 6-tile row pinned to the bottom of the viewport.
   ========================================================= */
@media (min-width: 601px) {
    body.page-index {
        /* Switch off the centred flex layout so the picker can pin
           to the bottom edge. */
        display: block;
    }
    body.page-index .profile-picker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
        text-align: center;
        /* Soft fade so the shelf grounds visually without an abrupt
           card edge. */
        background: linear-gradient(180deg,
            rgba(5, 8, 17, 0) 0%,
            rgba(5, 8, 17, 0.65) 38%,
            #050811 100%);
    }
    body.page-index .profile-picker-title {
        font-size: 1.05rem;
        font-weight: 400;
        margin: 0 0 18px;
    }
    body.page-index .profile-grid {
        /* Six tiles in a single row, breathing room between them. */
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0 clamp(16px, 2.5vw, 36px);
        max-width: min(960px, calc(100vw - 48px));
        margin: 0 auto;
        justify-items: center;
    }
    body.page-index .profile-tile {
        /* Constrain tile size on big screens so a 6-wide row doesn't
           balloon into giant chiclets. */
        width: clamp(72px, 9vw, 110px);
        height: clamp(72px, 9vw, 110px);
        border-radius: 18px;
    }
    body.page-index .profile-card {
        gap: 8px;
    }
    body.page-index .profile-label {
        font-size: 0.92rem;
        font-weight: 500;
    }
}

/* =========================================================
   profile.astro (page-profile)
   ========================================================= */
body.page-profile {
    --pf-text: #f6fbfe;
    --pf-muted: rgba(246, 251, 254, 0.72);
    --pf-card: rgba(8, 20, 34, 0.46);
    --pf-card-light: rgba(255, 255, 255, 0.08);
    --pf-line: rgba(255, 255, 255, 0.14);
    --pf-accent: #1cabe2;
    --pf-secondary: #e3ff62;
    font-family: var(--dal-font);
    background: var(--dal-app-bg);
    background-attachment: fixed;
    background-color: #050811;
    color: var(--pf-text);
    min-height: 100vh;
    min-width: 320px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.page-profile,
body.page-profile *,
body.page-profile *::before,
body.page-profile *::after {
    box-sizing: border-box;
}

/* Floating status banner (covers both sign-in and logged-in views) */
body.page-profile .message-banner {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: min(420px, calc(100vw - 32px));
    padding: 11px 16px;
    border-radius: 14px;
    background: rgba(8, 20, 34, 0.84);
    border: 1px solid var(--pf-line);
    backdrop-filter: blur(20px);
    color: var(--pf-text);
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}
body.page-profile .message-banner.is-error {
    border-color: rgba(255, 110, 110, 0.5);
    color: #ff9d9d;
}
body.page-profile .message-banner.is-success {
    border-color: rgba(150, 230, 160, 0.45);
    color: #a4eaae;
}

/* Sign-in view */
body.page-profile .signin-screen {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 22px calc(24px + env(safe-area-inset-bottom));
}
body.page-profile .signin-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    margin-left: -8px;
    padding-top: env(safe-area-inset-top);
}
body.page-profile .signin-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
body.page-profile .signin-back:hover {
    background: rgba(255, 255, 255, 0.08);
}
body.page-profile .signin-brand {
    color: var(--dal-primary);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
body.page-profile .signin-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: clamp(36px, 8vh, 80px);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
body.page-profile .signin-h1 {
    font-size: clamp(1.75rem, 5.5vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
body.page-profile .signin-input {
    width: 100%;
    padding: 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    margin-bottom: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
body.page-profile .signin-input::placeholder {
    color: rgba(246, 251, 254, 0.55);
}
body.page-profile .signin-input:focus {
    outline: none;
    border-color: rgba(4, 157, 240, 0.7);
    box-shadow: 0 0 0 3px rgba(4, 157, 240, 0.22);
    background: rgba(255, 255, 255, 0.08);
}
body.page-profile .signin-btn {
    width: 100%;
    padding: 17px 18px;
    border-radius: 6px;
    border: none;
    background: var(--dal-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s;
}
body.page-profile .signin-btn:hover {
    background: var(--dal-primary-hover);
}
body.page-profile .signin-btn:active {
    background: var(--dal-primary-active);
}

/* Logged-in app shell */
body.page-profile .profile-app {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: 20px 14px calc(96px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.page-profile .profile-app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.page-profile .profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(160deg, #1cabe2, #0e7fb0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    flex-shrink: 0;
}
body.page-profile .profile-app-meta {
    flex: 1;
    min-width: 0;
}
body.page-profile .profile-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-profile .profile-sub {
    color: var(--pf-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
body.page-profile .profile-logout-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--pf-text);
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
body.page-profile .profile-logout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.page-profile .profile-pills-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 4px;
}
body.page-profile .pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
body.page-profile .pill.is-accent {
    background: rgba(28, 171, 226, 0.22);
    border-color: rgba(28, 171, 226, 0.5);
}
body.page-profile .pill.is-bonus {
    background: rgba(227, 255, 98, 0.18);
    border-color: rgba(227, 255, 98, 0.4);
    color: #e3ff62;
}

body.page-profile .profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
body.page-profile .stat-card {
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--pf-card-light);
    border: 1px solid var(--pf-line);
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.page-profile .stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pf-muted);
    font-weight: 700;
}
body.page-profile .stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    margin-top: 2px;
    color: #fff;
}

body.page-profile .profile-content {
    margin-top: 2px;
}
body.page-profile .tab-panel {
    display: none;
}
body.page-profile .tab-panel.is-active {
    display: block;
}

body.page-profile .booking-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--pf-line);
    background: var(--pf-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-bottom: 10px;
}
body.page-profile .booking-card.is-past {
    opacity: 0.78;
}
body.page-profile .booking-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}
body.page-profile .booking-card-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
}
body.page-profile .booking-card-meta {
    color: var(--pf-muted);
    font-size: 0.78rem;
    margin-top: 3px;
}
body.page-profile .booking-card-coach {
    font-size: 0.82rem;
    margin-top: 6px;
    color: #8bd7ff;
    font-weight: 700;
}
body.page-profile .booking-card-status {
    font-size: 0.66rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(227, 255, 98, 0.22);
    color: #e3ff62;
    letter-spacing: 0.02em;
}
body.page-profile .booking-card-status.is-past {
    background: rgba(255, 255, 255, 0.10);
    color: var(--pf-muted);
}
body.page-profile .booking-card-status.is-cancelled {
    background: rgba(255, 110, 110, 0.18);
    color: #ff9d9d;
}

body.page-profile .review-row {
    background: rgba(28, 171, 226, 0.10);
    border: 1px solid rgba(28, 171, 226, 0.24);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}
body.page-profile .review-author {
    font-size: 0.72rem;
    color: #8bd7ff;
    font-weight: 700;
    margin-bottom: 4px;
}
body.page-profile .review-text {
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--pf-text);
}

body.page-profile .empty-state {
    padding: 24px 18px;
    text-align: center;
    color: var(--pf-muted);
    border: 1px dashed var(--pf-line);
    border-radius: 14px;
    background: rgba(8, 20, 34, 0.32);
    font-size: 0.88rem;
    line-height: 1.5;
}

body.page-profile .history-group {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
body.page-profile .history-group-label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-muted);
    padding: 6px 2px 2px;
}

body.page-profile .profile-loading {
    color: var(--pf-muted);
    font-size: 0.85rem;
    padding: 16px 4px;
}

body.page-profile .card-block.orphan-reviews {
    padding: 16px;
    border-radius: 14px;
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-top: 12px;
}
body.page-profile .orphan-reviews-title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #fff;
    margin-bottom: 8px;
}

/* Bottom tab bar (mobile) */
body.page-profile .profile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(4, 11, 20, 0.84);
    border-top: 1px solid var(--pf-line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.page-profile .tabbar-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.62);
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.15s, background 0.15s;
}
body.page-profile .tabbar-btn.is-active {
    color: #fff;
    background: rgba(28, 171, 226, 0.18);
}
body.page-profile .tabbar-icon {
    font-size: 1.3rem;
    line-height: 1;
}
body.page-profile .profile-tabbar.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Desktop overrides */
@media (min-width: 768px) {
    body.page-profile .profile-app {
        padding: 32px 24px 32px;
        gap: 16px;
    }
    body.page-profile .profile-app-header {
        padding: 18px 22px;
        gap: 16px;
    }
    body.page-profile .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
        border-radius: 18px;
    }
    body.page-profile .profile-name {
        font-size: 1.35rem;
    }
    body.page-profile .profile-sub {
        font-size: 0.88rem;
    }
    body.page-profile .profile-logout-btn {
        padding: 10px 16px;
        font-size: 0.88rem;
    }
    body.page-profile .pill {
        font-size: 0.86rem;
        padding: 8px 14px;
    }
    body.page-profile .stat-card {
        padding: 16px 14px;
    }
    body.page-profile .stat-label {
        font-size: 0.72rem;
    }
    body.page-profile .stat-value {
        font-size: 1.7rem;
    }
    body.page-profile .booking-card {
        padding: 18px 20px;
    }
    body.page-profile .booking-card-title {
        font-size: 1.05rem;
    }
    /* Desktop: top segmented tabs above content */
    body.page-profile .profile-tabbar {
        position: static;
        order: 3;
        background: transparent;
        border: 1px solid var(--pf-line);
        border-radius: 14px;
        padding: 4px;
        max-width: 520px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin: 0;
    }
    body.page-profile .profile-content {
        order: 4;
    }
    body.page-profile .tabbar-btn {
        flex-direction: row;
        padding: 10px 18px;
        font-size: 0.92rem;
        gap: 8px;
    }
    body.page-profile .tabbar-icon {
        font-size: 1.1rem;
    }
}

/* =========================================================
   booking.html (page-booking)
   ========================================================= */
body.page-booking {
            
            --luzz-marian-blue: #1cabe2;
            --luzz-oxford-blue: #002752;
            --luzz-pickleball-green: #bfe800; 
            --luzz-anti-white: #F3F5F7;
            --text-dark: #002752;
            --text-light: #F3F5F7;
        }

        body.page-booking { 
            background-color: var(--luzz-marian-blue); 
            color: var(--text-light); 
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased; padding-bottom: 50px;
        }
        body.page-booking .container { max-width: 650px; padding-top: 40px; }
        body.page-booking .main-title { font-weight: 800; letter-spacing: -0.5px; text-align: center; margin-bottom: 20px; color: var(--text-light); }
        body.page-booking .text-primary { color: var(--luzz-oxford-blue) !important; }
        
        body.page-booking .toggle-wrapper { display: flex; justify-content: center; margin-bottom: 25px; }
        body.page-booking .toggle-capsule { background-color: rgba(255,255,255,0.1); border-radius: 30px; padding: 4px; display: inline-flex; position: relative; }
        body.page-booking .toggle-btn { background: transparent; border: none; border-radius: 26px; padding: 8px 24px; font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.6); transition: all 0.3s ease; cursor: pointer; z-index: 1; }
        body.page-booking .toggle-btn.active { background-color: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

        body.page-booking .card-booking, body.page-booking .card-schedule { background: var(--luzz-anti-white); color: var(--text-dark); border: none; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.3); padding: 30px; margin-bottom: 20px; }
        
        body.page-booking .step-badge { background: var(--luzz-marian-blue); color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: bold; margin-right: 8px; }
        body.page-booking .form-label { font-weight: 600; color: var(--text-dark); font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; }
        
        body.page-booking .form-control, body.page-booking .form-select { border: 1px solid #d2d2d7; border-radius: 12px; padding: 12px 15px; font-size: 1rem; transition: all 0.2s; background: #fff; color: var(--text-dark); }
        body.page-booking .form-control:focus, body.page-booking .form-select:focus { border-color: var(--luzz-marian-blue); box-shadow: 0 0 0 4px rgba(28, 171, 226, 0.15); }
        
        
        body.page-booking .btn-date { background-color: #ffffff; border: 2px solid #e5e5ea; border-radius: 12px; padding: 10px 10px; color: var(--text-dark); transition: all 0.2s ease; flex: 1; text-align: center; cursor: pointer; }
        body.page-booking .btn-date:hover { border-color: var(--luzz-marian-blue); background-color: rgba(28, 171, 226, 0.05); }
        body.page-booking .btn-date.active { background-color: var(--luzz-marian-blue); border-color: var(--luzz-marian-blue); color: #ffffff; box-shadow: 0 4px 10px rgba(28, 171, 226, 0.25); }
        body.page-booking .btn-date .day-label { display: block; font-size: 0.75rem; font-weight: 600; opacity: 0.9; margin-bottom: 2px; text-transform: uppercase; }
        body.page-booking .btn-date .date-label { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.5px; }

        body.page-booking .court-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
        body.page-booking .court-grid.full { grid-template-columns: 1fr; }
        body.page-booking .btn-check:checked + .btn-outline-primary { background-color: var(--luzz-marian-blue); border-color: var(--luzz-marian-blue); color: white; }
        body.page-booking .btn-check:checked + .btn-outline-success { background-color: var(--luzz-pickleball-green); border-color: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); }
        body.page-booking .btn-court { border-radius: 12px; padding: 12px; font-weight: 600; border: 2px solid #e5e5ea; color: var(--text-dark); background: #fff; text-align: left; transition: all 0.2s; }
        body.page-booking .price-badge { float: right; font-weight: normal; font-size: 0.85rem; color: #86868b; }
        body.page-booking .btn-check:checked + .btn-outline-primary .price-badge { color: rgba(255,255,255,0.9); }
        body.page-booking .btn-check:checked + .btn-outline-success .price-badge { color: rgba(0,39,82,0.7); }

        body.page-booking .addon-box { border: 1px solid #e5e5ea; background: #fff; border-radius: 14px; padding: 15px; margin-bottom: 10px; transition: all 0.2s ease; }
        body.page-booking .addon-box.active { border-color: var(--luzz-marian-blue); background-color: rgba(28, 171, 226, 0.03); }

        body.page-booking .court-time-panel { background: #fff; border-radius: 14px; padding: 15px; margin-bottom: 15px; border: 1px solid #e5e5ea; }
        body.page-booking .court-time-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; color: var(--text-dark); display: flex; justify-content: space-between;}
        
        body.page-booking .time-btn-group { display: flex; flex-wrap: wrap; gap: 8px;}
        body.page-booking .btn-time { background-color: #ffffff; border: 1.5px solid #d2d2d7; border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 0.9rem; color: var(--text-dark); transition: all 0.2s ease; flex-grow: 1; text-align: center; }
        body.page-booking .btn-time:hover:not(:disabled) { border-color: var(--luzz-marian-blue); color: var(--luzz-marian-blue); background-color: rgba(28, 171, 226, 0.05); }
        body.page-booking .btn-time.active { background-color: var(--luzz-marian-blue); border-color: var(--luzz-marian-blue); color: #ffffff; box-shadow: 0 4px 10px rgba(28, 171, 226, 0.25); }

        body.page-booking .summary-box { background-color: #fff; border: 1px solid #e5e5ea; border-radius: 16px; padding: 20px; margin-top: 20px; text-align: center; }
        body.page-booking .total-price { font-size: 2.5rem; font-weight: 700; color: var(--luzz-marian-blue); letter-spacing: -1px; margin: 5px 0; }
        
        
        body.page-booking .premium-payment-card {
            background: linear-gradient(135deg, #0f6c20 0%, #17a532 100%);
            border-radius: 16px;
            padding: 22px 20px;
            color: white;
            box-shadow: 0 8px 25px rgba(19, 143, 45, 0.3);
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
            text-align: left;
        }
        body.page-booking .premium-payment-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: rgba(255,255,255,0.08); border-radius: 50%; }
        body.page-booking .premium-payment-card::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.05); border-radius: 50%; }
        body.page-booking .kbank-logo-circle { width: 32px; height: 32px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #138f2d; font-weight: 900; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 1; position: relative; }
        body.page-booking .acc-number-box { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; margin: 15px 0 10px; backdrop-filter: blur(5px); z-index: 1; position: relative; }
        body.page-booking .acc-number-text { font-size: 1.35rem; font-weight: 700; letter-spacing: 2px; font-family: var(--dal-font-mono); text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        body.page-booking .btn-copy-premium { background: #ffffff; color: #138f2d; border: none; border-radius: 8px; padding: 6px 14px; font-size: 0.8rem; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 5px; }
        body.page-booking .btn-copy-premium:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
        body.page-booking .btn-copy-premium.copied { background: #34c759; color: #ffffff; transform: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }

        body.page-booking .btn-submit { background-color: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); border-radius: 14px; padding: 15px; font-weight: 800; font-size: 1.1rem; width: 100%; border: none; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(191, 232, 0, 0.3); }
        body.page-booking .btn-submit:hover:not(:disabled) { background-color: #d4ff1f; transform: scale(1.02); box-shadow: 0 6px 20px rgba(191, 232, 0, 0.5); }
        body.page-booking .btn-submit:disabled { background-color: #d2d2d7; color: #86868b; box-shadow: none; cursor: not-allowed; }
        
        body.page-booking #loadingSlots { display: none; font-size: 0.85rem; color: var(--luzz-marian-blue); margin-top: 5px; }

        body.page-booking .table-schedule { width: 100%; border-collapse: collapse; margin-top: 15px; }
        body.page-booking .table-schedule th { background-color: #e5e5ea; color: var(--text-dark); font-size: 0.85rem; font-weight: 700; text-align: center; padding: 12px 5px; border-bottom: 2px solid #d2d2d7; }
        body.page-booking .table-schedule td { text-align: center; padding: 10px 5px; border-bottom: 1px solid #e5e5ea; font-size: 0.85rem; vertical-align: middle; }
        body.page-booking .table-schedule td.time-col { font-weight: 600; color: var(--text-dark); background-color: #f5f5f7; border-right: 2px solid #d2d2d7;}
        body.page-booking .slot-free { color: #34c759; font-weight: 600; } body.page-booking .slot-free::before { content: '🟢 Free'; }
        body.page-booking .slot-busy { color: #ff3b30; font-weight: 600; text-decoration: line-through; opacity: 0.7;} body.page-booking .slot-busy::before { content: '🔴 Booked'; }

        body.page-booking .date-navigator { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
        body.page-booking .date-navigator input[type="date"] { max-width: 220px; text-align: center; font-weight: 600; margin: 0; background: #fff; color: var(--text-dark); }
        body.page-booking .btn-nav { background-color: #ffffff; border: 1px solid #d2d2d7; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-dark); font-size: 1.1rem; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        body.page-booking .btn-nav:hover { background-color: var(--luzz-anti-white); border-color: var(--luzz-marian-blue); color: var(--luzz-marian-blue); }
        body.page-booking .btn-nav:active { transform: scale(0.92); }
        body.page-booking .header-logo { max-height: 300px; margin-bottom: 15px; object-fit: contain; }
        body.page-booking .compact-header {
            padding: 35px 20px 25px;
            text-align: center;
            background-color: var(--luzz-marian-blue); 
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

/* =========================================================
   store.html (page-store)
   ========================================================= */
body.page-store {
            
            --luzz-marian-blue: #1cabe2;
            --luzz-oxford-blue: #002752;
            --luzz-pickleball-green: #bfe800; 
            --luzz-anti-white: #F3F5F7;
            --text-dark: #002752;
            --text-light: #F3F5F7;
        }

        body.page-store { 
            background-color: var(--luzz-oxford-blue); 
            color: var(--text-light); 
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body.page-store .text-primary { color: var(--luzz-marian-blue) !important; }

        
        body.page-store .compact-header {
            padding: 35px 20px 25px;
            text-align: center;
            background-color: var(--luzz-marian-blue); 
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        body.page-store .header-logo { max-height: 300px; object-fit: contain; }

        
        body.page-store .controls-container { margin-top: 25px; margin-bottom: 20px; }
        body.page-store .catalog-filter-bar { display: flex; flex-direction: column; gap: 12px; }
        body.page-store .filter-row { display: flex; align-items: center; gap: 10px; width: 100%; }
        body.page-store .brand-buttons-container { display: flex; gap: 10px; overflow-x: auto; width: 100%; padding-bottom: 5px; }
        body.page-store .brand-buttons-container::-webkit-scrollbar { height: 6px; }
        body.page-store .category-row { flex-wrap: wrap; align-items: flex-start; }
        body.page-store .category-buttons-container { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 10px; min-width: 0; }
        body.page-store .filter-search-group { display: flex; flex: 0 1 320px; min-width: 240px; }
        body.page-store .filter-search { min-width: 0; }
        body.page-store .catalog-view-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        body.page-store .form-select-dark { background-color: var(--luzz-marian-blue); color: #ffffff; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
        body.page-store .form-select-dark:focus { background-color: #003073; border-color: var(--luzz-pickleball-green); box-shadow: none;}
        body.page-store .btn-store-search { background-color: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); border: none; border-radius: 10px; font-size: 0.85rem; font-weight: 800; }
        body.page-store .btn-filter-chip { border-radius: 20px; padding: 5px 15px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.95); color: var(--text-dark); transition: all 0.2s; }
        body.page-store .btn-filter-chip.active { background: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); border-color: var(--luzz-pickleball-green); }

        
        body.page-store .col-grid { padding-left: 0.75rem; padding-right: 0.75rem; margin-top: 1.5rem; }
        @media (max-width: 991.98px) { body.page-store .col-grid { width: 50%; flex: 0 0 auto; } }
        @media (max-width: 575.98px) { body.page-store .col-grid { width: 100%; flex: 0 0 auto; } }
        @media (min-width: 992px) {
            body.page-store .grid-3 .col-grid { width: 33.3333%; flex: 0 0 auto; }
            body.page-store .grid-5 .col-grid { width: 20%; flex: 0 0 auto; }
            body.page-store .grid-10 .col-grid { width: 10%; flex: 0 0 auto; }
            body.page-store .grid-10 .product-badge-type-inline { display: none; }
            body.page-store .grid-10 .product-title { font-size: 0.8rem; }
            body.page-store .grid-10 .price-strikethrough { font-size: 0.65rem; display: inline-block; } 
            body.page-store .grid-10 .product-body { padding: 10px; }
        }

        
        body.page-store .product-card { 
            background: var(--luzz-anti-white); color: var(--text-dark); border: none; border-radius: 16px; overflow: hidden; 
            box-shadow: 0 15px 35px rgba(0,0,0,0.4); display: flex; flex-direction: column; height: 100%; position: relative; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        body.page-store .product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,0.5); }
        body.page-store .product-img-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
        body.page-store .product-img { width: 100%; height: 100%; object-fit: cover; }
        body.page-store .stock-badge { font-size: 0.75rem; background: var(--luzz-oxford-blue); color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; position: absolute; top: 10px; right: 10px; z-index: 2; }
        body.page-store .stock-low { background: #dc3545 !important; animation: page-pos-pulse 1.5s infinite; }
        body.page-store .item-code-badge { font-size: 0.72rem; background: rgba(0, 39, 82, 0.88); color: white; padding: 3px 8px; border-radius: 6px; font-weight: 700; position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        
        
        body.page-store .no-image-placeholder {
            width: 100%; height: 100%;
            background-color: #000000;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        body.page-store .product-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
        body.page-store .product-badge-type-inline { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 5px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--luzz-marian-blue); border: 1px solid rgba(0,62,147,0.1); }
        body.page-store .product-series { color: rgba(0,39,82,0.55); font-size: 0.72rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        
        body.page-store .product-body { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; }
        body.page-store .product-title { font-size: 1.15rem; font-weight: 700; color: var(--luzz-oxford-blue); margin-bottom: 12px; line-height: 1.3; }
        
        body.page-store .price-container { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        body.page-store .price-normal { font-size: 1.2rem; font-weight: 600; color: rgba(0,39,82,0.6); }
        body.page-store .price-strikethrough { font-size: 0.85rem; font-weight: 500; color: #888; text-decoration: line-through; }
        body.page-store .price-sale { font-size: 1.4rem; font-weight: 800; color: var(--luzz-pickleball-green); background-color: var(--luzz-oxford-blue); padding: 2px 8px; border-radius: 4px; }

        body.page-store .btn-preorder { 
            background: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue) !important; border-radius: 10px; border: none; padding: 12px 15px; font-weight: 800; font-size: 0.95rem; text-align: center; transition: all 0.2s ease; display: block; width: 100%; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(191, 232, 0, 0.4);
        }
        body.page-store .btn-preorder:hover:not(:disabled) { background: #d4ff1f; transform: scale(1.03); box-shadow: 0 6px 20px rgba(191, 232, 0, 0.6); }

        
        body.page-store .modal-content-dark { background-color: var(--luzz-anti-white); color: var(--text-dark); border: none; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
        body.page-store .modal-header { border-bottom: 1px solid #ddd; }
        body.page-store .modal-title { color: var(--luzz-oxford-blue); font-weight: 700; }
        body.page-store .btn-close-white { filter: invert(1) grayscale(1) brightness(0.2); } 
        body.page-store .form-control-dark { background-color: #fff; color: var(--text-dark); border: 1px solid #ccc; border-radius: 8px; font-size: 0.9rem; }
        body.page-store .form-control-dark:focus { background-color: #fff; border-color: var(--luzz-marian-blue); box-shadow: 0 0 0 0.25rem rgba(0, 62, 147, 0.15); color: var(--text-dark); }
        body.page-store .form-label { font-weight: 600; color: #555; }
        body.page-store .price-summary-box { background-color: rgba(0, 39, 82, 0.05); border-radius: 10px; padding: 12px; border: 1px dashed var(--luzz-marian-blue); }
        body.page-store #finalPriceDisplay { color: var(--luzz-marian-blue); font-weight: 800; }

        
        body.page-store .premium-payment-card {
            background: linear-gradient(135deg, #0f6c20 0%, #17a532 100%);
            border-radius: 16px;
            padding: 22px 20px;
            color: white;
            box-shadow: 0 8px 25px rgba(19, 143, 45, 0.3);
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        body.page-store .premium-payment-card::before {
            content: ''; position: absolute; top: -30px; right: -30px;
            width: 120px; height: 120px; background: rgba(255,255,255,0.08); border-radius: 50%;
        }
        body.page-store .premium-payment-card::after {
            content: ''; position: absolute; bottom: -20px; left: -20px;
            width: 80px; height: 80px; background: rgba(255,255,255,0.05); border-radius: 50%;
        }
        body.page-store .kbank-logo-circle {
            width: 32px; height: 32px; background-color: white; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            color: #138f2d; font-weight: 900; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 1; position: relative;
        }
        body.page-store .acc-number-box {
            background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px;
            padding: 12px 15px; display: flex; justify-content: space-between; align-items: center;
            margin: 15px 0 10px; backdrop-filter: blur(5px); z-index: 1; position: relative;
        }
        body.page-store .acc-number-text {
            font-size: 1.35rem; font-weight: 700; letter-spacing: 2px; font-family: var(--dal-font-mono); text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        body.page-store .btn-copy-premium {
            background: #ffffff; color: #138f2d; border: none; border-radius: 8px; padding: 6px 14px;
            font-size: 0.8rem; font-weight: 700; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 5px;
        }
        body.page-store .btn-copy-premium:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
        body.page-store .btn-copy-premium.copied { background: var(--luzz-pickleball-green); color: var(--luzz-oxford-blue); transform: none; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }

        body.page-store .footer { margin-top: auto; padding: 30px 0; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.05); }
        body.page-store .lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center; backdrop-filter: blur(5px); }
        body.page-store .lightbox-img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 12px; border: 3px solid var(--luzz-marian-blue); }
        body.page-store .lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; transition: color 0.3s ease; }
        body.page-store .lightbox-close:hover { color: var(--luzz-pickleball-green); }
        @media (max-width: 767.98px) {
            body.page-store .brand-buttons-container {
                flex-wrap: wrap;
                overflow-x: visible;
                padding-bottom: 0;
            }
            body.page-store .filter-search-group {
                flex: 1 1 100%;
                min-width: 0;
            }
            body.page-store .btn-filter-chip {
                padding: 6px 11px;
                font-size: 0.76rem;
            }
        }

/* =========================================================
   luzzreport.html (page-luzzreport)
   ========================================================= */
body.page-luzzreport {
            --luzz-marian-blue: #1cabe2;
            --luzz-oxford-blue: #002752;
            --luzz-pickleball-green: #bfe800; 
            --luzz-anti-white: #F3F5F7;
            --text-dark: #002752;
            --text-light: #F3F5F7;
        }

        body.page-luzzreport { 
            background-color: var(--luzz-oxford-blue); 
            color: var(--text-light); 
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            padding-bottom: 50px;
        }

        
        body.page-luzzreport .report-header {
            padding: 40px 20px;
            text-align: center;
            background-color: var(--luzz-marian-blue);
            margin-bottom: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        body.page-luzzreport .header-logo { max-height: 120px; margin-bottom: 15px; }

        
        body.page-luzzreport .search-container {
            max-width: 900px;
            margin: -55px auto 30px;
            padding: 0 20px;
            position: relative;
            z-index: 10;
        }
        body.page-luzzreport .search-box {
            background: white;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        body.page-luzzreport .form-control-luzz {
            border: 2px solid #eee;
            border-radius: 12px;
            padding: 12px 15px;
            font-size: 1rem;
            color: var(--text-dark);
            flex-grow: 1;
            transition: border-color 0.3s ease;
        }
        body.page-luzzreport .form-control-luzz:focus { outline: none; border-color: var(--luzz-marian-blue); }
        
        body.page-luzzreport .form-select-luzz {
            border: 2px solid #eee;
            border-radius: 12px;
            padding: 12px 15px;
            font-size: 1rem;
            color: var(--text-dark);
            min-width: 180px;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }
        body.page-luzzreport .form-select-luzz:focus { outline: none; border-color: var(--luzz-marian-blue); }

        
        body.page-luzzreport .order-card {
            background: var(--luzz-anti-white);
            border-radius: 20px;
            overflow: hidden;
            height: 100%;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
        }
        body.page-luzzreport .order-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }

        
        body.page-luzzreport .slip-wrapper {
            width: 100%;
            aspect-ratio: 1 / 1; 
            background: #e0e0e0;
            overflow: hidden;
            cursor: zoom-in;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body.page-luzzreport .slip-img {
            width: 100%;
            height: 100%;
            object-fit: contain; 
            transition: transform 0.3s ease;
        }
        body.page-luzzreport .slip-wrapper:hover .slip-img { transform: scale(1.05); }
        
        body.page-luzzreport .slip-overlay {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0,39,82,0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            backdrop-filter: blur(4px);
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        body.page-luzzreport .order-details { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
        
        body.page-luzzreport .order-title { font-weight: 800; color: var(--luzz-oxford-blue); font-size: 1.25rem; margin-bottom: 5px; line-height: 1.2; }
        body.page-luzzreport .order-product { color: var(--luzz-marian-blue); font-weight: 700; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.4; }
        
        body.page-luzzreport .info-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; border-bottom: 1px dashed #d0d0d0; padding-bottom: 8px; }
        body.page-luzzreport .info-label { color: #666; font-weight: 600; }
        body.page-luzzreport .info-value { font-weight: 700; text-align: right; color: var(--luzz-oxford-blue); }

        body.page-luzzreport .address-box { background: rgba(0,0,0,0.04); padding: 12px; border-radius: 10px; font-size: 0.8rem; color: #444; margin-top: 10px; line-height: 1.5; border: 1px solid #ddd; }

        body.page-luzzreport .price-tag {
            background: var(--luzz-oxford-blue);
            color: var(--luzz-pickleball-green);
            padding: 12px 15px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 1.35rem;
            display: inline-block;
            margin-top: auto; 
            width: 100%;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        body.page-luzzreport .badge-method {
            font-size: 0.7rem;
            text-transform: uppercase;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }
        body.page-luzzreport .method-pickup { background-color: #e3f2fd; color: #1976d2; border: 1px solid #bbdefb; }
        body.page-luzzreport .method-delivery { background-color: #f1f8e9; color: #558b2f; border: 1px solid #dcedc8; }

        
        body.page-luzzreport #lightbox {
            display: none; position: fixed; top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.95); z-index: 10000; align-items: center; justify-content: center;
            backdrop-filter: blur(5px);
        }
        body.page-luzzreport #lightbox img { max-width: 90%; max-height: 90%; border: 4px solid var(--luzz-marian-blue); border-radius: 16px; object-fit: contain; }
        body.page-luzzreport .lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; transition: color 0.3s; }
        body.page-luzzreport .lightbox-close:hover { color: var(--luzz-pickleball-green); }

        body.page-luzzreport #loading { padding: 50px; text-align: center; font-size: 1.2rem; font-weight: 600; color: var(--luzz-pickleball-green); }
        body.page-luzzreport .empty-state { padding: 50px; text-align: center; color: rgba(255,255,255,0.6); font-size: 1.1rem; }

/* =========================================================
   Legacy Play A Lot styles (page-playalot)
   ========================================================= */
body.page-playalot {
            --luzz-marian-blue: #049df0;
            --luzz-oxford-blue: #f6fbfe;
            --luzz-pickleball-green: #bfe800;
            --luzz-anti-white: rgba(255, 255, 255, 0.04);
            --text-dark: #f6fbfe;
        }

        body.page-playalot {
            font-family: var(--dal-font);
            background-color: transparent;
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
            color: #f6fbfe;
            margin: 0;
            padding: 0;
            min-width: 320px;
        }

        body.page-playalot .header {
            background-color: #049df0;
            background-image: linear-gradient(135deg, #0274b3 0%, #049df0 58%, #76c8ff 100%);
            color: #f6fbfe;
            padding: 0 14px 22px;
            box-shadow: 0 10px 24px rgba(4, 157, 240, 0.28);
        }
        body.page-playalot .header-inner {
            max-width: none;
            margin: 0;
            min-height: 168px;
            padding: 24px 0 10px;
            position: relative;
        }
        body.page-playalot .header-brand { max-width: 560px; }
        body.page-playalot .header-kicker {
            color: #d6f24f;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        body.page-playalot .header h1 {
            color: #ffffff;
            font-size: 30px;
            letter-spacing: 1px;
            line-height: 1.05;
            margin: 0;
        }
        body.page-playalot .header h1 span { color: #ffffff; }
        body.page-playalot .header-subtitle {
            color: rgba(255, 255, 255, 0.08);
            font-size: 14px;
            margin-top: 8px;
        }
        body.page-playalot .header-countdown {
            background: rgba(8, 28, 46, 0.26);
            border: 1px solid rgba(216, 237, 249, 0.22);
            border-radius: 18px;
            box-shadow: 0 12px 24px rgba(4, 18, 31, 0.18);
            box-sizing: border-box;
            left: 50%;
            margin-left: -150px;
            padding: 14px 16px 12px;
            position: absolute;
            text-align: center;
            top: 22px;
            width: 300px;
        }
        body.page-playalot .session-timer-badge.ended {
            background: rgba(8, 20, 34, 0.44);
            border-color: rgba(255,255,255,0.18);
        }
        body.page-playalot .countdown-label {
            color: #d6f24f;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }
        body.page-playalot .countdown-value {
            color: #ffffff;
            font-family: var(--dal-font-mono);
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
            margin-top: 8px;
        }
        body.page-playalot .countdown-meta {
            color: rgba(255, 255, 255, 0.08);
            font-size: 12px;
            margin-top: 8px;
        }

        body.page-playalot .config-dock {
            position: fixed;
            right: 14px;
            top: 14px;
            z-index: 60;
        }
        body.page-playalot .header-config-toggle {
            padding: 12px 14px;
            position: static;
        }
        body.page-playalot .header-config-toggle.is-open {
            background-color: #d6f24f;
            background-image: linear-gradient(180deg, rgba(108, 214, 147, 0.18) 0%, #c4e91a 100%);
            border-color: #8aaa00;
            color: #f6fbfe;
        }
        body.page-playalot .header-config-panel {
            box-sizing: border-box;
            display: none;
            margin: 0;
            max-width: calc(100vw - 28px);
            padding: 16px;
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            width: 380px;
            z-index: 11;
        }
        body.page-playalot .config-dock.is-open .header-config-panel { display: block; }
        body.page-playalot .header-config-panel .panel-title {
            font-size: 16px;
            margin-bottom: 10px;
            padding-bottom: 8px;
        }
        body.page-playalot .header-config-body {
            color: #f6fbfe;
            font-size: 14px;
            line-height: 1.6;
        }
        body.page-playalot .header-config-section {
            border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
            margin-bottom: 12px;
            padding-bottom: 12px;
        }
        body.page-playalot .header-config-section:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        body.page-playalot .config-inline-row {
            align-items: center;
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        body.page-playalot .config-wide-input { width: 100%; }
        body.page-playalot .config-small-input {
            flex: 0 0 76px;
            width: 76px;
        }

        body.page-playalot button,
        body.page-playalot .btn-luzz,
        body.page-playalot .btn-luzz-outline {
            background-color: rgba(255, 255, 255, 0.08);
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
            border: 1px solid #f6fbfe;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,39,82,0.15);
            color: rgba(255, 255, 255, 0.04);
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
            padding: 10px 14px;
        }
        body.page-playalot button:disabled,
        body.page-playalot .btn-luzz:disabled {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.14);
            box-shadow: none;
            color: rgba(246, 251, 254, 0.55);
            cursor: not-allowed;
        }
        body.page-playalot button.btn-green,
        body.page-playalot .btn-luzz {
            background-color: #bfe800;
            background-image: linear-gradient(180deg, #d9f34f 0%, #b4de00 100%);
            border-color: #859f00;
            color: #f6fbfe;
        }
        body.page-playalot button.btn-red {
            background-color: #dc3545;
            background-image: linear-gradient(180deg, #ef5d6c 0%, #cb293a 100%);
            border-color: #ff9d9d;
            color: rgba(255, 255, 255, 0.04);
        }
        body.page-playalot button.btn-orange,
        body.page-playalot .btn-luzz-outline {
            background-color: #ff9800;
            background-image: linear-gradient(180deg, #ffcf72 0%, #ff9800 100%);
            border-color: #cc7a00;
            color: #f6fbfe;
        }
        body.page-playalot button.btn-main {
            background-color: #049df0;
            background-image: linear-gradient(180deg, #76c8ff 0%, #049df0 100%);
            border: 2px solid #0274b3;
            border-radius: 16px;
            box-shadow: 0 12px 24px rgba(4, 157, 240, 0.22);
            color: #ffffff;
            font-size: 20px;
            margin-bottom: 22px;
            padding: 18px 20px;
            text-shadow: 0 1px 0 rgba(0,39,82,0.24);
            width: 100%;
        }

        body.page-playalot input,
        body.page-playalot select {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            box-shadow: inset 0 1px 2px rgba(0,39,82,0.06);
            box-sizing: border-box;
            color: #f6fbfe;
            font-size: 15px;
            margin: 5px 0;
            padding: 10px 12px;
        }
        body.page-playalot input:focus,
        body.page-playalot select:focus {
            border-color: #049df0;
            box-shadow: 0 0 0 2px rgba(4, 157, 240, 0.16);
            outline: none;
        }
        body.page-playalot .inline-help {
            color: rgba(246, 251, 254, 0.55);
            font-size: 12px;
            line-height: 1.5;
        }

        body.page-playalot .setup-layout {
            margin: 18px 14px 0;
            max-width: none;
        }
        body.page-playalot .container {
            margin: 0;
            max-width: none;
            padding: 20px 14px 34px;
        }
        body.page-playalot .dashboard-layout { width: 100%; }
        body.page-playalot .dashboard-left {
            box-sizing: border-box;
            display: block;
            width: 100%;
        }
        body.page-playalot .panel {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            box-shadow: 0 10px 20px rgba(19,49,79,0.08);
            margin-bottom: 18px;
            padding: 18px;
        }
        body.page-playalot .setup-panel {
            background-color: rgba(4, 157, 240, 0.1);
            border-color: rgba(4, 157, 240, 0.32);
            box-shadow: 0 10px 18px rgba(4, 157, 240, 0.12);
        }
        body.page-playalot .panel-title {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            color: #f6fbfe;
            font-size: 19px;
            font-weight: bold;
            letter-spacing: 0.3px;
            margin-bottom: 14px;
            padding-bottom: 10px;
        }
        body.page-playalot .leaderboard-title-row,
        body.page-playalot .history-panel-title {
            align-items: center;
            display: flex;
            gap: 12px;
            justify-content: space-between;
        }
        body.page-playalot .summary-pill,
        body.page-playalot .code-pill {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 999px;
            color: #f6fbfe;
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 0.6px;
            padding: 6px 10px;
        }
        body.page-playalot .qr-preview-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            margin-bottom: 14px;
            padding: 16px 14px;
        }
        body.page-playalot .qr-image {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
            display: block;
            height: 240px;
            margin: 0 auto 14px;
            width: 240px;
        }
        body.page-playalot .qr-note {
            color: rgba(246, 251, 254, 0.65);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 14px;
        }
        body.page-playalot .sync-status {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            color: #f6fbfe;
            font-size: 13px;
            line-height: 1.5;
            margin: 8px 0 14px;
            padding: 10px 12px;
        }
        body.page-playalot .sync-status.is-error {
            background: rgba(255, 110, 110, 0.16);
            border-color: rgba(255, 110, 110, 0.16);
            color: #ff9d9d;
        }
        body.page-playalot .sync-status.is-success {
            background: rgba(191, 232, 0, 0.12);
            border-color: #bfe800;
            color: #d6f266;
        }
        body.page-playalot .registration-actions {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        body.page-playalot .registration-actions button { width: 100%; }

        body.page-playalot .court-grid-container,
        body.page-playalot .courts-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(4, minmax(220px, 1fr));
            margin: 0;
        }
        body.page-playalot .court-card {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            display: flex;
            flex-direction: column;
            min-width: 0;
            padding: 16px;
        }
        body.page-playalot .court-card.playing {
            background-color: rgba(255, 255, 255, 0.04);
            border-color: #049df0;
            box-shadow: 0 14px 26px rgba(4, 157, 240, 0.18);
        }
        body.page-playalot .court-header {
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            padding-bottom: 10px;
        }
        body.page-playalot .court-title {
            background: rgba(255, 255, 255, 0.06);
            border-radius: 999px;
            color: rgba(255, 255, 255, 0.04);
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 0.5px;
            margin: 0;
            padding: 6px 10px;
            text-transform: uppercase;
        }
        body.page-playalot .court-status,
        body.page-playalot .match-timer-badge {
            border-radius: 999px;
            font-family: var(--dal-font-mono);
            font-size: 12px;
            font-weight: bold;
            padding: 4px 8px;
        }
        body.page-playalot .status-empty {
            background: rgba(255, 255, 255, 0.14);
            color: rgba(246, 251, 254, 0.65);
        }
        body.page-playalot .status-playing {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #049df0;
        }
        body.page-playalot .timer-green {
            background: rgba(191, 232, 0, 0.12);
            border: 1px solid #bfe800;
            color: #d6f266;
        }
        body.page-playalot .timer-warning {
            background: rgba(247, 181, 0, 0.18);
            border: 1px solid rgba(247, 181, 0, 0.18);
            color: #ffd86b;
        }
        body.page-playalot .timer-danger {
            background: rgba(255, 110, 110, 0.16);
            border: 1px solid rgba(255, 110, 110, 0.16);
            color: #dc3545;
        }
        body.page-playalot .team-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 14px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            margin-bottom: 10px;
            padding: 12px;
            text-align: center;
        }
        body.page-playalot .team-title {
            color: #f6fbfe;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 8px;
            text-transform: uppercase;
        }
        body.page-playalot .vs-divider {
            color: #049df0;
            font-size: 18px;
            font-style: italic;
            font-weight: bold;
            padding: 4px 0 12px;
            text-align: center;
        }
        body.page-playalot .player-select {
            color: #f6fbfe;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            width: 100%;
        }
        body.page-playalot .btn-compact {
            border-radius: 12px;
            font-size: 14px;
            font-weight: bold;
            padding: 10px 12px;
        }
        body.page-playalot .player-display-name {
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 8px;
            text-align: center;
        }

        body.page-playalot .table-wrap { overflow-x: auto; }
        body.page-playalot .leaderboard-table {
            border-collapse: separate;
            border-spacing: 0 8px;
            font-size: 14px;
            min-width: 620px;
            width: 100%;
        }
        body.page-playalot .leaderboard-head th {
            background: rgba(4, 157, 240, 0.18);
            color: #f6fbfe;
            font-size: 13px;
            letter-spacing: 0.5px;
            padding: 10px 8px;
        }
        body.page-playalot .leaderboard-head th:first-child { border-radius: 12px 0 0 12px; }
        body.page-playalot .leaderboard-head th:last-child { border-radius: 0 12px 12px 0; }
        body.page-playalot .leaderboard-row td {
            background: rgba(255, 255, 255, 0.06);
            border-bottom: 1px solid rgba(255, 255, 255, 0.14);
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            padding: 10px 8px;
            text-align: center;
        }
        body.page-playalot .leaderboard-row td:first-child {
            border-left: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px 0 0 12px;
        }
        body.page-playalot .leaderboard-row td:last-child {
            border-radius: 0 12px 12px 0;
            border-right: 1px solid rgba(255, 255, 255, 0.14);
        }
        body.page-playalot .leaderboard-row.is-paused td {
            background: rgba(255, 255, 255, 0.04);
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-playalot .leaderboard-player { text-align: left !important; }
        body.page-playalot .rank-pill {
            background: rgba(4, 157, 240, 0.12);
            border-radius: 999px;
            color: #76c8ff;
            display: inline-block;
            font-weight: bold;
            min-width: 30px;
            padding: 4px 8px;
        }
        body.page-playalot .player-name {
            color: #f6fbfe;
            font-size: 15px;
            font-weight: bold;
        }
        body.page-playalot .player-status {
            color: #c03d49;
            font-size: 12px;
            margin-left: 4px;
        }
        body.page-playalot .player-subline {
            color: rgba(246, 251, 254, 0.55);
            font-size: 12px;
            margin-top: 4px;
        }
        body.page-playalot .stat-sub {
            color: rgba(246, 251, 254, 0.65);
            font-size: 11px;
            font-weight: bold;
            margin-top: 2px;
        }
        body.page-playalot .mini-btn {
            border-radius: 10px;
            box-shadow: none;
            font-size: 12px;
            margin-right: 5px;
            padding: 6px 10px;
        }

        body.page-playalot #historyList {
            align-content: start;
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        body.page-playalot .history-card {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-left: 6px solid #049df0;
            border-radius: 14px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            margin: 0;
            padding: 14px 16px;
        }
        body.page-playalot .history-header {
            color: rgba(246, 251, 254, 0.65);
            display: flex;
            font-size: 12px;
            font-weight: bold;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        body.page-playalot .history-score-row {
            align-items: center;
            display: flex;
            justify-content: space-between;
        }
        body.page-playalot .history-team {
            color: rgba(246, 251, 254, 0.55);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.3;
            width: 40%;
        }
        body.page-playalot .history-score {
            color: #f6fbfe;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            width: 20%;
        }
        body.page-playalot .history-search-input {
            max-width: 260px;
            width: 100%;
        }
        body.page-playalot .empty-state {
            background: rgba(255, 255, 255, 0.04);
            border: 1px dashed rgba(255, 255, 255, 0.14);
            border-radius: 14px;
            color: rgba(246, 251, 254, 0.55);
            padding: 18px 10px;
            text-align: center;
        }
        body.page-playalot .hidden { display: none !important; }

        body.page-playalot .score-input {
            border: 2px solid #049df0;
            border-radius: 14px;
            color: #f6fbfe;
            display: block;
            font-size: 32px;
            font-weight: bold;
            margin: 12px auto;
            padding: 5px;
            text-align: center;
            width: 90px;
        }
        body.page-playalot .score-input::-webkit-outer-spin-button,
        body.page-playalot .score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        body.page-playalot .score-input[type=number] { -moz-appearance: textfield; }

        @media screen and (max-width: 1180px) {
            body.page-playalot .header-inner {
                min-height: 0;
                padding: 20px 0 0;
            }
            body.page-playalot .header-brand {
                max-width: none;
                text-align: center;
            }
            body.page-playalot .header-countdown {
                left: auto;
                margin: 16px auto 0;
                max-width: 320px;
                position: static;
                top: auto;
                width: auto;
            }
            body.page-playalot .court-grid-container,
            body.page-playalot .courts-grid {
                grid-template-columns: repeat(2, minmax(220px, 1fr));
            }
        }
        @media screen and (max-width: 720px) {
            body.page-playalot .header h1 { font-size: 24px; }
            body.page-playalot .countdown-value { font-size: 32px; }
            body.page-playalot .panel { padding: 16px; }
            body.page-playalot .leaderboard-title-row,
            body.page-playalot .history-panel-title {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-playalot .history-search-input { max-width: none; }
            body.page-playalot .registration-actions,
            body.page-playalot .court-grid-container,
            body.page-playalot .courts-grid {
                grid-template-columns: 1fr;
            }
            body.page-playalot .qr-image {
                height: auto;
                max-width: 180px;
                width: 100%;
            }
            body.page-playalot .config-inline-row {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-playalot .config-small-input {
                flex: 0 0 auto;
                width: 100%;
            }
        }
        @media screen and (max-width: 420px) {
            body.page-playalot .config-dock {
                left: 14px;
                right: 14px;
            }
            body.page-playalot .header-config-toggle { width: 100%; }
            body.page-playalot .header-config-panel {
                max-width: none;
                width: 100%;
            }
        }

/* =========================================================
   admin/pos.html (page-pos)
   ========================================================= */
body.page-pos {
            --luzz-marian-blue: #1cabe2;
            --luzz-oxford-blue: #002752;
            --luzz-pickleball-green: #bfe800; 
            --luzz-anti-white: #F3F5F7;
            --text-dark: #002752;
            --text-light: #F3F5F7;
            --pos-bg: #e9ecef;
        }

        body.page-pos { 
            background-color: var(--pos-bg); 
            color: var(--text-dark); 
            font-family: var(--dal-font);
            min-height: 100vh;
            min-height: 100dvh;
            height: 100vh;
            height: 100dvh;
            overflow: hidden; 
            display: flex;
            flex-direction: column;
        }

        
        body.page-pos .pos-topbar { background-color: var(--luzz-oxford-blue); color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10; }
        body.page-pos .pos-title { line-height: 1.1; }
        
        
        body.page-pos .mode-switch .btn { 
            font-weight: 700; 
            border-radius: 8px; 
            padding: 8px 20px; 
            font-size: 0.9rem; 
        }
        
        
        body.page-pos .mode-switch .btn:hover, body.page-pos .mode-switch .btn:focus, body.page-pos .mode-switch .btn:active {
            box-shadow: none !important;
        }

        
        body.page-pos .btn-mode-active, body.page-pos .btn-mode-active:hover, body.page-pos .btn-mode-active:focus { 
            background-color: var(--luzz-pickleball-green) !important; 
            color: var(--luzz-oxford-blue) !important; 
            border: 2px solid var(--luzz-pickleball-green) !important; 
        }

        
        body.page-pos .btn-mode-inactive, body.page-pos .btn-mode-inactive:hover, body.page-pos .btn-mode-inactive:focus { 
            background-color: transparent !important; 
            color: white !important; 
            border: 2px solid white !important; 
        }

        body.page-pos .btn-login { background-color: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; font-weight: 600; padding: 5px 15px; }
        body.page-pos .btn-login.logged-in { background-color: var(--luzz-marian-blue); border-color: var(--luzz-marian-blue); }
        body.page-pos .btn-history { background-color: #ffc107; color: #000; border-radius: 10px; font-weight: 600; padding: 5px 15px; border: none; }

        
        body.page-pos .pos-container { display: flex; flex-grow: 1; overflow: hidden; min-height: 0; }
        body.page-pos .products-pane { width: 70%; padding: 20px; overflow-y: auto; background-color: var(--pos-bg); min-height: 0; }
        body.page-pos .cart-pane { width: 30%; background-color: white; border-left: 1px solid #ddd; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.05); min-height: 0; }

        
        body.page-pos .pos-product-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.1s; height: 100%; display: flex; flex-direction: column; border: 2px solid transparent; position: relative; }
        body.page-pos .pos-product-card:active { transform: scale(0.97); }
        body.page-pos .product-img-wrapper { aspect-ratio: 1/1; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}
        body.page-pos .product-img { width: 100%; height: 100%; object-fit: cover; }
        body.page-pos .no-image-placeholder { color: white; font-weight: 800; font-size: 1rem; }
        
        body.page-pos .product-info { padding: 10px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between;}
        body.page-pos .product-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
        body.page-pos .product-price { color: var(--luzz-marian-blue); font-weight: 800; font-size: 1.1rem; }
        
        body.page-pos .stock-badge { font-size: 0.75rem; background: var(--luzz-oxford-blue); color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; position: absolute; top: 10px; right: 10px; z-index: 2;}
        body.page-pos .item-code-badge { font-size: 0.72rem; background: rgba(0, 39, 82, 0.88); color: white; padding: 3px 8px; border-radius: 6px; font-weight: 700; position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        body.page-pos .stock-low { background: #dc3545 !important; animation: page-pos-pulse 1.5s infinite; }

        body.page-pos .camera-icon-btn { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); color: white; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 3; border: 1px solid rgba(255,255,255,0.3); transition: all 0.2s; }
        body.page-pos .camera-icon-btn:hover { background: var(--luzz-marian-blue); transform: scale(1.1); }
        body.page-pos .pos-slip-upload {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        body.page-pos .pos-slip-camera-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-width: 1.5px;
            border-radius: 10px;
            padding: 0.55rem 0.75rem;
            font-weight: 700;
        }
        body.page-pos .pos-slip-camera-btn i {
            font-size: 0.95rem;
        }

        
        body.page-pos .cart-header { padding: 15px 20px; background-color: var(--luzz-anti-white); border-bottom: 1px solid #eee; flex-shrink: 0; }
        body.page-pos .cart-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
        body.page-pos .btn-add-product { font-weight: 700; }
        body.page-pos .mobile-cart-close-btn { display: none; font-weight: 700; white-space: nowrap; }
        body.page-pos .mobile-cart-backdrop { display: none; }
        body.page-pos .mobile-cart-toggle { display: none; }
        body.page-pos .cart-items { flex-grow: 1; overflow-y: auto; padding: 10px 20px 24px; min-height: 0; }
        body.page-pos .cart-footer {
            padding: 15px 20px;
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
            background-color: white;
            border-top: 1px solid #eee;
            position: sticky;
            bottom: 0;
            z-index: 2;
            box-shadow: 0 -8px 20px rgba(0,0,0,0.08);
            flex-shrink: 0;
        }
        
        body.page-pos .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #eee; }
        body.page-pos .cart-item-title { font-size: 0.9rem; font-weight: 600; width: 45%; }
        body.page-pos .cart-item-qty { display: flex; align-items: center; gap: 8px; }
        body.page-pos .qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ccc; background: white; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;}
        body.page-pos .cart-item-price { font-weight: 700; font-size: 0.95rem; text-align: right; width: 30%; }
        body.page-pos .restock-cart-item { flex-direction: column; align-items: stretch; gap: 10px; }
        body.page-pos .restock-cart-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        body.page-pos .restock-cart-top .cart-item-title { width: auto; flex: 1; }
        body.page-pos .restock-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        body.page-pos .restock-controls-left { display: flex; align-items: center; gap: 8px; }
        body.page-pos .restock-type-select { width: 110px; min-width: 110px; }
        body.page-pos .qty-input { width: 72px; min-width: 72px; text-align: center; }
        body.page-pos .restock-signed-qty { min-width: 52px; text-align: right; font-weight: 700; }

        body.page-pos .btn-checkout { color: var(--luzz-oxford-blue); width: 100%; padding: 12px; font-weight: 900; font-size: 1.1rem; border: none; border-radius: 10px; text-transform: uppercase; transition: all 0.3s;}
        body.page-pos .btn-checkout:disabled { background: #ccc !important; cursor: not-allowed; }

        
        body.page-pos .filter-bar { margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; }
        body.page-pos .filter-row { display: flex; align-items: center; gap: 10px; width: 100%; }
        body.page-pos .brand-buttons-container { display: flex; gap: 10px; overflow-x: auto; width: 100%; padding-bottom: 5px; }
        body.page-pos .brand-buttons-container::-webkit-scrollbar { height: 6px; }
        body.page-pos .category-row { flex-wrap: wrap; align-items: flex-start; }
        body.page-pos .category-buttons-container { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 10px; min-width: 0; }
        body.page-pos .form-select-pos { border-radius: 8px; font-size: 0.9rem; font-weight: 600; border: 1px solid #ccc;}
        body.page-pos .filter-search-group { display: flex; flex: 0 1 280px; min-width: 220px; }
        body.page-pos .filter-search { min-width: 0; }
        body.page-pos .btn-filter-chip { border-radius: 20px; padding: 5px 15px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; border: 1px solid #ccc; background: white; color: var(--text-dark); transition: all 0.2s;}
        body.page-pos .btn-filter-chip.active { background: var(--luzz-marian-blue); color: white; border-color: var(--luzz-marian-blue); }
        body.page-pos .product-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        body.page-pos .product-form-grid .full-span { grid-column: 1 / -1; }

        @media (max-width: 1024px) {
            body.page-pos .brand-buttons-container {
                flex-wrap: wrap;
                overflow-x: visible;
                padding-bottom: 0;
            }

            body.page-pos .filter-search-group {
                flex-basis: 100%;
            }

            body.page-pos .product-form-grid {
                grid-template-columns: 1fr;
            }

            body.page-pos .product-form-grid .full-span {
                grid-column: auto;
            }
        }

        @media (max-width: 767.98px) {
            body.page-pos {
                height: auto;
                min-height: 100dvh;
                overflow: auto;
            }

            body.page-pos .pos-topbar {
                position: sticky;
                top: 0;
                padding: 10px 12px 12px;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            body.page-pos .topbar-brand {
                justify-content: center;
            }

            body.page-pos .pos-title {
                font-size: 1.12rem;
                text-align: center;
            }

            body.page-pos .topbar-actions {
                width: 100%;
                flex-wrap: wrap;
                gap: 8px !important;
            }

            body.page-pos .mode-switch {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                width: 100%;
                gap: 8px !important;
                margin-right: 0 !important;
            }

            body.page-pos .mode-switch .btn {
                width: 100%;
                padding: 8px 10px;
                font-size: 0.82rem;
            }

            body.page-pos .topbar-actions .btn-history,
            body.page-pos .topbar-actions #btnStaffLogin {
                flex: 1 1 calc(50% - 4px);
                min-width: 0;
                padding: 8px 10px;
                font-size: 0.82rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            body.page-pos #btnStaffLogin {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            body.page-pos .pos-container {
                flex-direction: column;
                overflow: visible;
                min-height: auto;
            }

            body.page-pos .products-pane,
            body.page-pos .cart-pane {
                width: 100%;
                min-height: auto;
            }

            body.page-pos .products-pane {
                padding: 12px;
                overflow: visible;
                padding-bottom: calc(92px + env(safe-area-inset-bottom));
            }

            body.page-pos .cart-pane {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100dvh;
                min-height: 100dvh;
                border: none;
                box-shadow: 0 -12px 32px rgba(0,0,0,0.18);
                z-index: 1040;
                transform: translateY(100%);
                opacity: 0;
                pointer-events: none;
                transition: transform 0.24s ease, opacity 0.24s ease;
            }

            body.page-pos .filter-bar,
            body.page-pos .filter-row,
            body.page-pos .brand-buttons-container,
            body.page-pos .category-buttons-container {
                gap: 8px;
            }

            body.page-pos .filter-search-group {
                flex: 1 1 100%;
                width: 100%;
                min-width: 0;
            }

            body.page-pos .btn-filter-chip {
                padding: 6px 11px;
                font-size: 0.76rem;
            }

            body.page-pos #productsGrid {
                --bs-gutter-x: 0.65rem;
                --bs-gutter-y: 0.65rem;
            }

            body.page-pos .product-info {
                padding: 9px;
            }

            body.page-pos .product-title {
                font-size: 0.82rem;
            }

            body.page-pos .product-price {
                font-size: 0.98rem;
            }

            body.page-pos .stock-badge,
            body.page-pos .item-code-badge {
                font-size: 0.66rem;
            }

            body.page-pos .item-code-badge {
                padding: 3px 7px;
            }

            body.page-pos .camera-icon-btn {
                width: 28px;
                height: 28px;
            }

            body.page-pos .pos-slip-camera-btn {
                padding: 0.5rem 0.65rem;
                border-radius: 9px;
                font-size: 0.92rem;
            }

            body.page-pos .cart-header,
            body.page-pos .cart-items,
            body.page-pos .cart-footer {
                padding-left: 12px;
                padding-right: 12px;
            }

            body.page-pos .cart-items {
                overflow-y: auto;
                padding-bottom: 16px;
            }

            body.page-pos .mobile-cart-close-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            body.page-pos .mobile-cart-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(0, 17, 36, 0.38);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.24s ease;
                z-index: 1030;
            }

            body.page-pos .mobile-cart-toggle {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                position: fixed;
                left: 12px;
                right: 12px;
                bottom: calc(12px + env(safe-area-inset-bottom));
                z-index: 1020;
                border: none;
                border-radius: 16px;
                background: var(--luzz-oxford-blue);
                color: white;
                padding: 12px 14px;
                box-shadow: 0 12px 30px rgba(0, 39, 82, 0.28);
                transition: transform 0.24s ease, opacity 0.24s ease;
            }

            body.page-pos .mobile-cart-toggle-copy {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                min-width: 0;
            }

            body.page-pos .mobile-cart-toggle-title {
                font-size: 0.92rem;
                font-weight: 800;
                line-height: 1.15;
            }

            body.page-pos .mobile-cart-toggle-meta {
                font-size: 0.72rem;
                opacity: 0.8;
                margin-top: 2px;
            }

            body.page-pos .mobile-cart-toggle-total {
                font-size: 1rem;
                font-weight: 900;
                color: var(--luzz-pickleball-green);
                white-space: nowrap;
            }

            body.page-pos.mobile-cart-open {
                overflow: hidden;
            }

            body.page-pos.mobile-cart-open .mobile-cart-backdrop {
                opacity: 1;
                pointer-events: auto;
            }

            body.page-pos.mobile-cart-open .cart-pane {
                transform: translateY(0);
                opacity: 1;
                pointer-events: auto;
            }

            body.page-pos.mobile-cart-open .mobile-cart-toggle {
                opacity: 0;
                pointer-events: none;
                transform: translateY(12px);
            }

            body.page-pos #draftControls {
                flex-direction: column;
            }

            body.page-pos #draftControls .btn {
                width: 100% !important;
            }

            body.page-pos .cart-header-actions {
                gap: 6px;
            }

            body.page-pos .cart-header-actions .btn,
            body.page-pos .btn-add-product {
                font-size: 0.76rem;
            }

            body.page-pos .cart-item {
                gap: 8px;
                align-items: flex-start;
            }

            body.page-pos .cart-item-title {
                width: auto;
                flex: 1;
                font-size: 0.82rem;
            }

            body.page-pos .cart-item-qty {
                gap: 6px;
            }

            body.page-pos .cart-item-price {
                width: auto;
                min-width: 62px;
                font-size: 0.82rem;
            }

            body.page-pos .qty-btn {
                width: 26px;
                height: 26px;
            }

            body.page-pos .restock-cart-top,
            body.page-pos .restock-controls {
                flex-wrap: wrap;
                gap: 8px;
            }

            body.page-pos .restock-controls-left {
                width: 100%;
            }

            body.page-pos .restock-type-select {
                width: 100%;
                min-width: 0;
            }

            body.page-pos .restock-signed-qty {
                width: 100%;
                min-width: 0;
                text-align: left;
            }

            body.page-pos .qty-input {
                width: 64px;
                min-width: 64px;
            }

            body.page-pos .btn-checkout {
                padding: 11px;
                font-size: 1rem;
            }

            body.page-pos #cartTotalDisplay {
                font-size: 1.75rem !important;
            }

            body.page-pos .modal-dialog {
                margin: 0.5rem;
            }
        }

        @media (max-width: 479.98px) {
            body.page-pos .pos-title {
                font-size: 1rem;
            }

            body.page-pos .mode-switch .btn,
            body.page-pos .topbar-actions .btn-history,
            body.page-pos .topbar-actions #btnStaffLogin {
                font-size: 0.78rem;
            }

            body.page-pos .mobile-cart-toggle {
                left: 10px;
                right: 10px;
                bottom: calc(10px + env(safe-area-inset-bottom));
                padding: 11px 12px;
            }

            body.page-pos .mobile-cart-toggle-title {
                font-size: 0.86rem;
            }

            body.page-pos .mobile-cart-toggle-meta {
                font-size: 0.68rem;
            }

            body.page-pos .mobile-cart-toggle-total {
                font-size: 0.92rem;
            }

            body.page-pos .btn-filter-chip {
                padding: 5px 10px;
                font-size: 0.72rem;
            }

            body.page-pos .product-title {
                font-size: 0.78rem;
            }

            body.page-pos .product-price {
                font-size: 0.92rem;
            }

            body.page-pos .cart-header h5 {
                font-size: 1rem;
            }

            body.page-pos #cartTotalDisplay {
                font-size: 1.55rem !important;
            }
        }

        body.page-pos .d-none { display: none !important; }
        
        @keyframes page-pos-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

/* =========================================================
   dashboard.html (page-dashboard)
   ========================================================= */
body.page-dashboard { 
            background-color: rgba(255, 255, 255, 0.04); 
            color: #f6fbfe; 
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased;
        }

        body.page-dashboard .container { max-width: 1100px; padding-top: 50px; padding-bottom: 50px; }

        body.page-dashboard h2.main-title { font-weight: 700; letter-spacing: -0.5px; }
        body.page-dashboard p.subtitle { color: rgba(246, 251, 254, 0.55); margin-top: -10px; margin-bottom: 40px; }

        body.page-dashboard .card-aesthetic { 
            background: rgba(255, 255, 255, 0.06); border: none; border-radius: 18px; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: box-shadow 0.3s ease; height: 100%;
        }
        body.page-dashboard .card-aesthetic:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
        
        body.page-dashboard .kpi-title { font-size: 0.9rem; color: rgba(246, 251, 254, 0.55); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px;}
        body.page-dashboard .kpi-value { font-size: 2.5rem; font-weight: 700; color: #f6fbfe; letter-spacing: -1px; }
        body.page-dashboard .kpi-unit { font-size: 1rem; color: rgba(246, 251, 254, 0.55); font-weight: 400; margin-left: 5px; }

        body.page-dashboard .filter-section { margin-bottom: 30px; display: flex; flex-direction: column; gap: 15px; }
        body.page-dashboard .filter-pill-group { 
            background-color: rgba(0,0,0,0.04); border-radius: 30px; padding: 5px; display: inline-flex; width: fit-content;
        }
        body.page-dashboard .filter-btn-aesthetic { 
            background: none; border: none; border-radius: 25px; padding: 8px 18px; font-size: 0.95rem; 
            color: rgba(246, 251, 254, 0.65); transition: all 0.2s ease; font-weight: 500;
        }
        body.page-dashboard .filter-btn-aesthetic:hover { background-color: rgba(0,0,0,0.03); color: #f6fbfe; }
        body.page-dashboard .filter-btn-aesthetic.active { background-color: #ffffff; color: #76c8ff; box-shadow: 0 2px 5px rgba(0,0,0,0.08); }

        body.page-dashboard .custom-date-panel-aesthetic { 
            background: rgba(255, 255, 255, 0.06); border-radius: 18px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            display: flex; gap: 10px; align-items: center;
        }
        body.page-dashboard .custom-date-panel-aesthetic input[type="date"] { 
            border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 6px 10px; font-size: 0.9rem;
        }
        body.page-dashboard .custom-date-panel-aesthetic button { 
            background-color: #76c8ff; border: none; border-radius: 8px; color: #ffffff; padding: 6px 15px; font-weight: 500; font-size: 0.9rem;
        }
        body.page-dashboard .custom-date-panel-aesthetic button:hover { background-color: #76c8ff; }

        body.page-dashboard .chart-card-aesthetic { 
            background: rgba(255, 255, 255, 0.06); border: none; border-radius: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); padding: 25px;
        }
        body.page-dashboard .chart-title { font-weight: 600; color: #f6fbfe; margin-bottom: 20px; font-size: 1.1rem;}
        body.page-dashboard .chart-container { position: relative; height: 320px; width: 100%; }
        
        body.page-dashboard .d-none { display: none !important; }

        
        body.page-dashboard #loadingOverlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(245, 245, 247, 0.9); z-index: 9999;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        body.page-dashboard .spinner-border { width: 3rem; height: 3rem; color: #76c8ff; }

/* =========================================================
   leaderboard.html (page-leaderboard) — Netflix dark theme
   2026-05-20: flipped from Apple light to dark. Token names kept the
   same (--bg, --panel, --ink, --blue, etc.) so the dozens of rules
   below that reference them keep working unchanged.
   ========================================================= */
body.page-leaderboard {
            --bg: transparent;                          /* page bg comes from --dal-app-bg on body */
            --panel: rgba(8, 20, 34, 0.46);             /* dark glass card */
            --ink: #f6fbfe;                             /* light text */
            --muted: rgba(246, 251, 254, 0.6);          /* dim light */
            --line: rgba(255, 255, 255, 0.14);          /* faint white hairline */
            --soft-line: rgba(255, 255, 255, 0.08);
            --blue: var(--dal-primary, #049df0);        /* brand */
            --green: #6cd693;                           /* readable on dark */
            --mint: rgba(108, 214, 147, 0.18);          /* tinted positive bg */
            --amber-bg: rgba(247, 181, 0, 0.18);        /* tinted warn bg */
            --red: #ff9d9d;                             /* readable on dark */
            --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        }

        body.page-leaderboard * {
            box-sizing: border-box;
        }

        body.page-leaderboard {
            margin: 0;
            background: var(--dal-app-bg);
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--ink);
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased;
            color-scheme: dark;
        }

        body.page-leaderboard button,
        body.page-leaderboard input,
        body.page-leaderboard select {
            font: inherit;
        }

        body.page-leaderboard button {
            cursor: pointer;
        }

        body.page-leaderboard .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 72px;
            padding: 12px 28px;
            background: rgba(255, 255, 255, 0.07);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        body.page-leaderboard .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ink);
            text-decoration: none;
            min-width: 0;
        }

        body.page-leaderboard .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            object-fit: contain;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--soft-line);
        }

        body.page-leaderboard .brand-copy {
            display: grid;
            gap: 2px;
            line-height: 1.1;
        }

        body.page-leaderboard .brand-name {
            font-size: 16px;
            font-weight: 800;
        }

        body.page-leaderboard .brand-meta {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        body.page-leaderboard .nav-link {
            color: #f6fbfe;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            padding: 10px 12px;
            border-radius: 8px;
        }

        body.page-leaderboard .nav-link:hover {
            color: var(--blue);
            background: rgba(4, 157, 240, 0.1);
        }

        body.page-leaderboard main {
            width: min(1180px, 100%);
            margin: 0 auto;
            padding: 28px;
        }

        body.page-leaderboard .page-title-row {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 18px;
        }

        body.page-leaderboard .eyebrow {
            margin: 0 0 8px;
            color: var(--blue);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.page-leaderboard h1,
        body.page-leaderboard h2,
        body.page-leaderboard p {
            margin-top: 0;
        }

        body.page-leaderboard h1 {
            margin-bottom: 8px;
            font-size: 34px;
            line-height: 1.1;
        }

        body.page-leaderboard .subtitle {
            margin: 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.5;
            max-width: 720px;
        }

        body.page-leaderboard .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 8px 12px;
            color: #6cd693;
            background: var(--mint);
            border: 1px solid rgba(108, 214, 147, 0.18);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        body.page-leaderboard .panel {
            background: var(--panel);
            border: 1px solid var(--soft-line);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        body.page-leaderboard .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 64px;
            padding: 18px 20px;
            border-bottom: 1px solid var(--soft-line);
        }

        body.page-leaderboard .panel-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            font-size: 18px;
            font-weight: 800;
        }

        body.page-leaderboard .panel-title svg {
            color: var(--blue);
        }

        body.page-leaderboard .panel-body {
            padding: 20px;
        }

        body.page-leaderboard .toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 260px 160px;
            gap: 12px;
            align-items: center;
            margin-bottom: 16px;
        }

        body.page-leaderboard .segmented {
            display: flex;
            align-items: center;
            gap: 4px;
            min-height: 44px;
            padding: 4px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            overflow-x: auto;
        }

        body.page-leaderboard .segmented button {
            flex: 0 0 auto;
            min-height: 34px;
            padding: 7px 12px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: rgba(246, 251, 254, 0.65);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        body.page-leaderboard .segmented button.active {
            color: var(--blue);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        body.page-leaderboard .field {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 12px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--line);
            border-radius: 8px;
        }

        body.page-leaderboard .field svg {
            flex: 0 0 auto;
            color: var(--muted);
        }

        body.page-leaderboard .field input,
        body.page-leaderboard .field select {
            width: 100%;
            min-width: 0;
            height: 42px;
            border: 0;
            outline: 0;
            color: var(--ink);
            background: transparent;
        }

        body.page-leaderboard .table-wrap {
            overflow-x: auto;
            border: 1px solid var(--soft-line);
            border-radius: 8px;
        }

        body.page-leaderboard table {
            width: 100%;
            min-width: 860px;
            border-collapse: collapse;
        }

        body.page-leaderboard th,
        body.page-leaderboard td {
            padding: 14px 16px;
            border-bottom: 1px solid var(--soft-line);
            text-align: left;
            vertical-align: middle;
        }

        body.page-leaderboard th {
            color: rgba(246, 251, 254, 0.65);
            background: rgba(255, 255, 255, 0.04);
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
        }

        body.page-leaderboard tbody tr:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        body.page-leaderboard tbody tr:last-child td {
            border-bottom: 0;
        }

        body.page-leaderboard .rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
            color: #f6fbfe;
            font-weight: 850;
        }

        body.page-leaderboard .rank.top {
            color: #ffd86b;
            background: rgba(247, 181, 0, 0.18);
        }

        body.page-leaderboard .player {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 220px;
        }

        body.page-leaderboard .avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 42px;
            height: 42px;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 850;
        }

        body.page-leaderboard .player-name {
            display: block;
            font-weight: 850;
        }

        body.page-leaderboard .player-meta {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 12px;
        }

        body.page-leaderboard .rating {
            font-size: 18px;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
        }

        body.page-leaderboard .muted {
            color: var(--muted);
        }

        body.page-leaderboard .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 5px 9px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 850;
            white-space: nowrap;
        }

        body.page-leaderboard .badge-baby { color: #ffd86b; background: rgba(247, 181, 0, 0.18); }
        body.page-leaderboard .badge-trainee { color: #ffd86b; background: var(--amber-bg); }
        body.page-leaderboard .badge-runner { color: #76c8ff; background: rgba(108, 214, 147, 0.18); }
        body.page-leaderboard .badge-banger { color: #6cd693; background: var(--mint); }
        body.page-leaderboard .badge-chill { color: #f6fbfe; background: rgba(255, 255, 255, 0.14); }
        body.page-leaderboard .badge-hero { color: #c084fc; background: rgba(255, 255, 255, 0.04); }
        body.page-leaderboard .badge-wall { color: #4e3fc2; background: rgba(78, 63, 194, 0.18); }
        body.page-leaderboard .badge-magic { color: #ffd86b; background: rgba(247, 181, 0, 0.18); }
        body.page-leaderboard .badge-boss { color: #ff9d9d; background: rgba(255, 110, 110, 0.16); }
        body.page-leaderboard .badge-god { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
        body.page-leaderboard .badge-calibration { color: #ffd86b; background: var(--amber-bg); }
        body.page-leaderboard .badge-locked { color: #6cd693; background: var(--mint); }

        body.page-leaderboard .trend {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 850;
        }

        body.page-leaderboard .trend.up { color: var(--green); }
        body.page-leaderboard .trend.down { color: var(--red); }
        body.page-leaderboard .trend.flat { color: var(--muted); }

        body.page-leaderboard .empty-state {
            padding: 32px;
            color: var(--muted);
            text-align: center;
        }

        body.page-leaderboard .footer {
            margin: 26px 0 4px;
            color: var(--muted);
            font-size: 13px;
            text-align: center;
        }

        @media (max-width: 760px) {
            body.page-leaderboard .topbar {
                align-items: flex-start;
                flex-direction: column;
                padding: 12px 16px;
            }

            body.page-leaderboard main {
                padding: 18px 14px;
            }

            body.page-leaderboard .page-title-row,
            body.page-leaderboard .panel-header {
                align-items: flex-start;
                flex-direction: column;
            }

            body.page-leaderboard h1 {
                font-size: 28px;
            }

            body.page-leaderboard .toolbar {
                grid-template-columns: 1fr;
            }

            body.page-leaderboard .status-pill {
                white-space: normal;
            }
        }

/* =========================================================
   admin/leaderboard/index.html (page-admin-leaderboard) — Netflix dark
   ========================================================= */
body.page-admin-leaderboard {
            --bg: transparent;
            --panel: rgba(8, 20, 34, 0.46);
            --ink: #f6fbfe;
            --muted: rgba(246, 251, 254, 0.6);
            --line: rgba(255, 255, 255, 0.14);
            --soft-line: rgba(255, 255, 255, 0.08);
            --blue: var(--dal-primary, #049df0);
            --green: #6cd693;
            --mint: rgba(108, 214, 147, 0.18);
            --amber-bg: rgba(247, 181, 0, 0.18);
            --red: #ff9d9d;
            --red-bg: rgba(255, 110, 110, 0.16);
            --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
        }

        body.page-admin-leaderboard * {
            box-sizing: border-box;
        }

        body.page-admin-leaderboard {
            margin: 0;
            background: var(--dal-app-bg);
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--ink);
            font-family: var(--dal-font);
            -webkit-font-smoothing: antialiased;
            color-scheme: dark;
        }

        body.page-admin-leaderboard button,
        body.page-admin-leaderboard input,
        body.page-admin-leaderboard select {
            font: inherit;
        }

        body.page-admin-leaderboard button {
            cursor: pointer;
        }

        body.page-admin-leaderboard .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 72px;
            padding: 12px 28px;
            background: rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        body.page-admin-leaderboard .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ink);
            text-decoration: none;
            min-width: 0;
        }

        body.page-admin-leaderboard .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            object-fit: contain;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--soft-line);
        }

        body.page-admin-leaderboard .brand-copy {
            display: grid;
            gap: 2px;
            line-height: 1.1;
        }

        body.page-admin-leaderboard .brand-name {
            font-size: 16px;
            font-weight: 800;
        }

        body.page-admin-leaderboard .brand-meta {
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        body.page-admin-leaderboard .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        body.page-admin-leaderboard .nav-links a {
            color: #f6fbfe;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            padding: 10px 12px;
            border-radius: 8px;
        }

        body.page-admin-leaderboard .nav-links a:hover {
            color: var(--blue);
            background: rgba(4, 157, 240, 0.1);
        }

        body.page-admin-leaderboard main {
            width: min(1420px, 100%);
            margin: 0 auto;
            padding: 28px;
        }

        body.page-admin-leaderboard .page-title-row {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 18px;
        }

        body.page-admin-leaderboard .eyebrow {
            margin: 0 0 8px;
            color: var(--blue);
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.page-admin-leaderboard h1,
        body.page-admin-leaderboard h2,
        body.page-admin-leaderboard h3,
        body.page-admin-leaderboard p {
            margin-top: 0;
        }

        body.page-admin-leaderboard h1 {
            margin-bottom: 8px;
            font-size: 34px;
            line-height: 1.1;
        }

        body.page-admin-leaderboard .subtitle {
            margin: 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.5;
            max-width: 760px;
        }

        body.page-admin-leaderboard .status-pill,
        body.page-admin-leaderboard .mini-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 7px 10px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 850;
            white-space: nowrap;
        }

        body.page-admin-leaderboard .status-pill {
            color: #6cd693;
            background: var(--mint);
            border: 1px solid rgba(108, 214, 147, 0.18);
        }

        body.page-admin-leaderboard .mini-pill {
            color: var(--blue);
            background: rgba(255, 255, 255, 0.05);
        }

        body.page-admin-leaderboard .grid {
            display: grid;
            grid-template-columns: 430px minmax(0, 1fr);
            gap: 18px;
            align-items: start;
        }

        body.page-admin-leaderboard .stack {
            display: grid;
            gap: 18px;
        }

        body.page-admin-leaderboard .panel {
            background: var(--panel);
            border: 1px solid var(--soft-line);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        body.page-admin-leaderboard .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 64px;
            padding: 18px 20px;
            border-bottom: 1px solid var(--soft-line);
        }

        body.page-admin-leaderboard .panel-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            font-size: 18px;
            font-weight: 850;
        }

        body.page-admin-leaderboard .panel-title svg {
            color: var(--blue);
        }

        body.page-admin-leaderboard .panel-body {
            padding: 20px;
        }

        body.page-admin-leaderboard .summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 18px;
        }

        body.page-admin-leaderboard .metric {
            padding: 15px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--soft-line);
            border-radius: 8px;
            box-shadow: 0 4px 18px rgba(29, 29, 31, 0.04);
        }

        body.page-admin-leaderboard .metric-label {
            display: block;
            margin-bottom: 8px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
        }

        body.page-admin-leaderboard .metric-value {
            display: block;
            font-size: 28px;
            line-height: 1;
            font-weight: 850;
        }

        body.page-admin-leaderboard .upload-box {
            display: grid;
            gap: 12px;
            padding: 14px;
            border: 1px dashed rgba(246, 251, 254, 0.55);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
        }

        body.page-admin-leaderboard .button-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        body.page-admin-leaderboard .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 40px;
            padding: 9px 13px;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 850;
            text-decoration: none;
        }

        body.page-admin-leaderboard .btn.primary {
            color: #ffffff;
            background: var(--blue);
        }

        body.page-admin-leaderboard .btn.primary:hover {
            background: #76c8ff;
        }

        body.page-admin-leaderboard .btn.dark {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.06);
        }

        body.page-admin-leaderboard .btn.dark:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        body.page-admin-leaderboard .btn.secondary {
            color: #f6fbfe;
            background: rgba(255, 255, 255, 0.06);
            border-color: var(--line);
        }

        body.page-admin-leaderboard .btn.secondary:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        body.page-admin-leaderboard .btn.danger {
            color: var(--red);
            background: var(--red-bg);
            border-color: #ffc6c6;
        }

        body.page-admin-leaderboard .btn.icon {
            width: 38px;
            height: 38px;
            min-height: 38px;
            padding: 0;
        }

        body.page-admin-leaderboard .form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        body.page-admin-leaderboard .form-group {
            display: grid;
            gap: 7px;
        }

        body.page-admin-leaderboard .form-group.full {
            grid-column: 1 / -1;
        }

        body.page-admin-leaderboard .section-label {
            grid-column: 1 / -1;
            margin: 8px 0 0;
            padding-top: 8px;
            color: var(--blue);
            border-top: 1px solid var(--soft-line);
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
        }

        body.page-admin-leaderboard label {
            color: rgba(246, 251, 254, 0.65);
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
        }

        body.page-admin-leaderboard .input,
        body.page-admin-leaderboard .select {
            width: 100%;
            height: 42px;
            padding: 9px 11px;
            color: var(--ink);
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--line);
            border-radius: 8px;
            outline: 0;
        }

        body.page-admin-leaderboard .input:focus,
        body.page-admin-leaderboard .select:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
        }

        body.page-admin-leaderboard .input:disabled {
            color: rgba(246, 251, 254, 0.55);
            background: rgba(255, 255, 255, 0.04);
        }

        body.page-admin-leaderboard .games-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        body.page-admin-leaderboard .game-box {
            display: grid;
            gap: 7px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--soft-line);
            border-radius: 8px;
        }

        body.page-admin-leaderboard .game-title {
            color: rgba(246, 251, 254, 0.65);
            font-size: 12px;
            font-weight: 850;
        }

        body.page-admin-leaderboard .score-pair {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        body.page-admin-leaderboard .table-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        body.page-admin-leaderboard .field {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 240px;
            min-height: 42px;
            padding: 0 12px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--line);
            border-radius: 8px;
        }

        body.page-admin-leaderboard .field svg {
            color: var(--muted);
        }

        body.page-admin-leaderboard .field input {
            width: 100%;
            height: 40px;
            border: 0;
            outline: 0;
            background: transparent;
        }

        body.page-admin-leaderboard .table-wrap {
            overflow-x: auto;
            border: 1px solid var(--soft-line);
            border-radius: 8px;
        }

        body.page-admin-leaderboard table {
            width: 100%;
            min-width: 980px;
            border-collapse: collapse;
        }

        body.page-admin-leaderboard th,
        body.page-admin-leaderboard td {
            padding: 13px 14px;
            border-bottom: 1px solid var(--soft-line);
            text-align: left;
            vertical-align: top;
        }

        body.page-admin-leaderboard th {
            color: rgba(246, 251, 254, 0.65);
            background: rgba(255, 255, 255, 0.04);
            font-size: 12px;
            font-weight: 850;
            text-transform: uppercase;
        }

        body.page-admin-leaderboard tbody tr:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        body.page-admin-leaderboard tbody tr:last-child td {
            border-bottom: 0;
        }

        body.page-admin-leaderboard .team-cell {
            display: grid;
            gap: 4px;
            min-width: 170px;
        }

        body.page-admin-leaderboard .team-name {
            font-weight: 850;
        }

        body.page-admin-leaderboard .team-meta,
        body.page-admin-leaderboard .small-note {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        body.page-admin-leaderboard .winner {
            color: #6cd693;
            font-weight: 850;
        }

        body.page-admin-leaderboard .chip-list {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        body.page-admin-leaderboard .toast {
            min-height: 40px;
            margin-top: 12px;
            padding: 10px 12px;
            color: #6cd693;
            background: var(--mint);
            border: 1px solid rgba(108, 214, 147, 0.18);
            border-radius: 8px;
            font-size: 13px;
            font-weight: 750;
        }

        body.page-admin-leaderboard .toast.error {
            color: var(--red);
            background: var(--red-bg);
            border-color: #ffc6c6;
        }

        body.page-admin-leaderboard .empty-state {
            padding: 32px;
            color: var(--muted);
            text-align: center;
        }

        body.page-admin-leaderboard .footer {
            margin: 26px 0 4px;
            color: var(--muted);
            font-size: 13px;
            text-align: center;
        }

        @media (max-width: 1180px) {
            body.page-admin-leaderboard .grid {
                grid-template-columns: 1fr;
            }

            body.page-admin-leaderboard .summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 760px) {
            body.page-admin-leaderboard .topbar,
            body.page-admin-leaderboard .page-title-row,
            body.page-admin-leaderboard .panel-header {
                align-items: flex-start;
                flex-direction: column;
            }

            body.page-admin-leaderboard .topbar {
                padding: 12px 16px;
            }

            body.page-admin-leaderboard main {
                padding: 18px 14px;
            }

            body.page-admin-leaderboard h1 {
                font-size: 28px;
            }

            body.page-admin-leaderboard .summary,
            body.page-admin-leaderboard .form-grid,
            body.page-admin-leaderboard .games-grid {
                grid-template-columns: 1fr;
            }

            body.page-admin-leaderboard .field {
                width: 100%;
                min-width: 0;
            }
        }

/* =========================================================
   admin/players/index.html (page-admin-players)
   ========================================================= */
body.page-admin-players .nav-links a.is-active {
    color: var(--blue);
    background: rgba(255, 255, 255, 0.05);
}
body.page-admin-players .metric-selected {
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
body.page-admin-players .players-status {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(108, 214, 147, 0.18);
    border-radius: 8px;
    background: var(--mint);
    color: #6cd693;
    font-size: 14px;
    font-weight: 800;
}
body.page-admin-players .players-status.info {
    color: #f6fbfe;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}
body.page-admin-players .players-status.error {
    color: var(--red);
    background: var(--red-bg);
    border-color: #ffc6c6;
}
body.page-admin-players .players-grid {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
body.page-admin-players .players-search-panel {
    position: sticky;
    top: 90px;
}
body.page-admin-players .players-search-field {
    width: 100%;
    margin-bottom: 14px;
}
body.page-admin-players .players-results {
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding-right: 2px;
}
body.page-admin-players .player-result-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 4px 18px rgba(29, 29, 31, 0.04);
}
body.page-admin-players .player-result-card:hover,
body.page-admin-players .player-result-card.is-active {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}
body.page-admin-players .player-result-card.is-active {
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
body.page-admin-players .player-result-avatar,
body.page-admin-players .player-profile-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
}
body.page-admin-players .player-result-avatar img,
body.page-admin-players .player-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.page-admin-players .player-result-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}
body.page-admin-players .player-result-main strong,
body.page-admin-players .player-result-main small,
body.page-admin-players .player-result-tags span {
    overflow-wrap: anywhere;
}
body.page-admin-players .player-result-main strong {
    font-size: 15px;
    font-weight: 900;
}
body.page-admin-players .player-result-main small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
body.page-admin-players .player-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
body.page-admin-players .player-result-tags span {
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(4, 157, 240, 0.1);
    color: #f6fbfe;
    font-size: 11px;
    font-weight: 850;
}
body.page-admin-players .players-result-note,
body.page-admin-players .players-inline-note {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #f6fbfe;
    font-size: 13px;
    font-weight: 750;
}
body.page-admin-players .players-profile-empty {
    display: grid;
    place-items: center;
    min-height: 420px;
    padding: 34px;
    border: 1px dashed rgba(246, 251, 254, 0.55);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    text-align: center;
    font-weight: 800;
}
body.page-admin-players .players-profile-content {
    display: grid;
    gap: 18px;
}
body.page-admin-players .players-profile-loading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 220px;
}
body.page-admin-players .players-profile-loading strong,
body.page-admin-players .players-profile-loading small {
    display: block;
}
body.page-admin-players .players-profile-loading small {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 750;
}
body.page-admin-players .player-profile-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
body.page-admin-players .player-profile-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
body.page-admin-players .player-profile-avatar-large {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    background: #049df0;
    color: #ffffff;
    font-size: 22px;
}
body.page-admin-players .profile-kicker {
    margin: 0 0 6px;
    color: #bfe800;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
body.page-admin-players .player-profile-hero h2 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
body.page-admin-players .player-profile-subline {
    margin-top: 6px;
    color: rgba(246, 251, 254, 0.55);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}
body.page-admin-players .player-rating-box {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 190px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    text-align: right;
}
body.page-admin-players .player-rating-box span,
body.page-admin-players .player-rating-box small {
    color: rgba(246, 251, 254, 0.55);
    font-size: 12px;
    font-weight: 850;
}
body.page-admin-players .player-rating-box strong {
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
    font-weight: 950;
}
body.page-admin-players .player-rating-box small {
    color: #bfe800;
}
body.page-admin-players .player-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
body.page-admin-players .player-profile-stats div {
    padding: 14px;
    border: 1px solid var(--soft-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}
body.page-admin-players .player-profile-stats span,
body.page-admin-players .player-profile-stats small {
    display: block;
}
body.page-admin-players .player-profile-stats span {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}
body.page-admin-players .player-profile-stats small {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
body.page-admin-players .player-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
body.page-admin-players .player-profile-detail {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}
body.page-admin-players .player-profile-detail span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
body.page-admin-players .player-profile-detail strong,
body.page-admin-players .player-profile-detail a {
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
body.page-admin-players .player-profile-detail a {
    color: var(--blue);
}
body.page-admin-players .player-matches-section {
    display: grid;
    gap: 12px;
}
body.page-admin-players .player-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.page-admin-players .player-section-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}
body.page-admin-players .player-section-head span {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
}
body.page-admin-players .player-match-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
body.page-admin-players .player-match-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--soft-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}
body.page-admin-players .player-match-top,
body.page-admin-players .player-match-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
body.page-admin-players .profile-result-badge {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}
body.page-admin-players .profile-result-badge.is-win {
    background: rgba(108, 214, 147, 0.18);
    color: #d6f266;
}
body.page-admin-players .profile-result-badge.is-loss {
    background: rgba(255, 110, 110, 0.16);
    color: #ff9d9d;
}
body.page-admin-players .player-match-top small,
body.page-admin-players .player-match-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
body.page-admin-players .player-match-score {
    color: var(--ink);
    font-size: 32px;
    line-height: 1;
    font-weight: 950;
}
body.page-admin-players .player-match-event {
    color: #f6fbfe;
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
body.page-admin-players .player-match-teams {
    display: grid;
    gap: 7px;
}
body.page-admin-players .player-match-teams div {
    display: grid;
    gap: 3px;
}
body.page-admin-players .player-match-teams small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}
body.page-admin-players .player-match-teams span {
    color: var(--ink);
    font-weight: 800;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    body.page-admin-players .players-grid {
        grid-template-columns: 1fr;
    }
    body.page-admin-players .players-search-panel {
        position: static;
    }
    body.page-admin-players .players-results {
        max-height: none;
    }
}

@media (max-width: 760px) {
    body.page-admin-players .player-profile-hero,
    body.page-admin-players .player-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
    body.page-admin-players .player-rating-box {
        width: 100%;
        text-align: left;
    }
    body.page-admin-players .player-profile-stats,
    body.page-admin-players .player-profile-details {
        grid-template-columns: 1fr;
    }
    body.page-admin-players .players-profile-empty {
        min-height: 260px;
        padding: 24px;
    }
}

/* =========================================================
   Shared KOTC-style dashboard styles (page-kotc)
   ========================================================= */
body.page-kotc {
            font-family: var(--dal-font);
            background-color: transparent;
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
            color: #f6fbfe;
            margin: 0;
            padding: 0;
            min-width: 320px;
        }

        body.page-kotc .header {
            background-color: #049df0;
            background-image: linear-gradient(135deg, #0274b3 0%, #049df0 58%, #76c8ff 100%);
            color: #f6fbfe;
            padding: 0 14px 22px;
            box-shadow: 0 10px 24px rgba(4, 157, 240, 0.28);
        }
        body.page-kotc .header-inner {
            max-width: none;
            margin: 0;
            position: relative;
            min-height: 168px;
            padding: 24px 0 10px;
        }
        body.page-kotc .header-brand {
            max-width: 520px;
        }
        body.page-kotc .header-kicker {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #d6f24f;
            margin-bottom: 10px;
        }
        body.page-kotc .header h1 {
            margin: 0;
            font-size: 30px;
            line-height: 1.05;
            letter-spacing: 1px;
            color: #ffffff;
        }
        body.page-kotc .header-subtitle {
            margin-top: 8px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.08);
        }
        body.page-kotc .header-countdown {
            position: absolute;
            left: 50%;
            top: 22px;
            width: 300px;
            margin-left: -150px;
            padding: 14px 16px 12px;
            text-align: center;
            border: 1px solid rgba(216, 237, 249, 0.22);
            border-radius: 18px;
            background: rgba(8, 28, 46, 0.26);
            box-shadow: 0 12px 24px rgba(4, 18, 31, 0.18);
            box-sizing: border-box;
        }
        body.page-kotc .countdown-label {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: #d6f24f;
        }
        body.page-kotc .countdown-value {
            margin-top: 8px;
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
            letter-spacing: 2px;
            color: #ffffff;
        }
        body.page-kotc .countdown-meta {
            margin-top: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.08);
        }
        body.page-kotc .config-dock {
            position: fixed;
            top: 14px;
            right: 14px;
            z-index: 60;
        }
        body.page-kotc .header-config-toggle {
            position: static;
            padding: 12px 14px;
            font-size: 14px;
        }
        body.page-kotc .header-config-toggle.is-open {
            background-color: #d6f24f;
            background-image: linear-gradient(180deg, rgba(108, 214, 147, 0.18) 0%, #c4e91a 100%);
            color: #f6fbfe;
            border-color: #8aaa00;
        }
        body.page-kotc .header-config-panel {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 360px;
            max-width: calc(100vw - 28px);
            margin: 0;
            padding: 16px;
            box-sizing: border-box;
            z-index: 11;
            display: none;
        }
        body.page-kotc .config-dock.is-open .header-config-panel {
            display: block;
        }
        body.page-kotc .header-config-panel .panel-title {
            font-size: 16px;
            margin-bottom: 10px;
            padding-bottom: 8px;
        }
        body.page-kotc .header-config-body {
            font-size: 14px;
            line-height: 1.6;
            color: #f6fbfe;
        }
        body.page-kotc .header-config-section {
            margin-bottom: 12px;
        }
        body.page-kotc .header-config-section:last-child {
            margin-bottom: 0;
        }
        body.page-kotc .config-inline-input {
            width: 60px;
            text-align: center;
        }
        body.page-kotc .config-time-separator {
            display: inline-block;
            padding: 0 6px;
            font-weight: bold;
        }
        body.page-kotc .header-config-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
        }
        body.page-kotc .header-config-actions button {
            width: 100%;
            min-height: 72px;
            padding: 12px 14px;
            border-radius: 18px;
            text-align: left;
            box-shadow: 0 12px 24px rgba(0,39,82,0.14);
        }
        body.page-kotc .config-action-btn {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        body.page-kotc .config-action-btn.is-primary {
            grid-column: 1 / -1;
            min-height: 78px;
            border-width: 2px;
        }
        body.page-kotc .config-action-icon {
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.06);
            font-size: 20px;
            line-height: 1;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        body.page-kotc .config-action-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        body.page-kotc .config-action-title {
            font-size: 15px;
            font-weight: bold;
            line-height: 1.2;
        }
        body.page-kotc .config-action-note {
            font-size: 12px;
            line-height: 1.35;
            opacity: 0.86;
            font-weight: normal;
        }
        body.page-kotc button {
            background-color: rgba(255, 255, 255, 0.08);
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
            color: rgba(255, 255, 255, 0.04);
            border: 1px solid #f6fbfe;
            padding: 11px 16px;
            font-size: 15px;
            cursor: pointer;
            border-radius: 12px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,39,82,0.15);
        }
        body.page-kotc button:active { position: relative; top: 1px; }
        body.page-kotc button:disabled {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(246, 251, 254, 0.55);
            border-color: rgba(255, 255, 255, 0.14);
            cursor: not-allowed;
            box-shadow: none;
        }
        body.page-kotc button.btn-green {
            background-color: #bfe800;
            background-image: linear-gradient(180deg, #d9f34f 0%, #b4de00 100%);
            color: #f6fbfe;
            border-color: #859f00;
        }
        body.page-kotc button.btn-red {
            background-color: #dc3545;
            background-image: linear-gradient(180deg, #ef5d6c 0%, #cb293a 100%);
            color: rgba(255, 255, 255, 0.04);
            border-color: #ff9d9d;
        }
        body.page-kotc button.btn-orange {
            background-color: #ff9800;
            background-image: linear-gradient(180deg, #ffcf72 0%, #ff9800 100%);
            color: #f6fbfe;
            border-color: #cc7a00;
        }
        body.page-kotc button.btn-main {
            background-color: #049df0;
            background-image: linear-gradient(180deg, #76c8ff 0%, #049df0 100%);
            color: #ffffff;
            font-size: 20px;
            width: 100%;
            padding: 18px 20px;
            margin-bottom: 22px;
            border: 2px solid #0274b3;
            border-radius: 16px;
            box-shadow: 0 12px 24px rgba(4, 157, 240, 0.22);
            text-shadow: 0 1px 0 rgba(0,39,82,0.24);
        }

        body.page-kotc input, body.page-kotc select {
            padding: 10px 12px;
            font-size: 16px;
            margin: 5px 0;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            color: #f6fbfe;
            background: rgba(255, 255, 255, 0.06);
            box-sizing: border-box;
            box-shadow: inset 0 1px 2px rgba(0,39,82,0.06);
        }
        body.page-kotc input:focus, body.page-kotc select:focus {
            border-color: #049df0;
            outline: none;
            box-shadow: 0 0 0 2px rgba(4, 157, 240, 0.16);
        }

        body.page-kotc .container {
            max-width: none;
            margin: 0;
            padding: 20px 14px 34px;
        }
        body.page-kotc .dashboard-layout,
        body.page-playalot .dashboard-layout {
            align-items: flex-start;
            display: flex;
            gap: 18px;
            width: 100%;
        }
        body.page-kotc .dashboard-left,
        body.page-playalot .dashboard-left {
            box-sizing: border-box;
            display: flex;
            flex: 1 1 70%;
            flex-direction: column;
            font-size: 16px;
            gap: 18px;
            min-width: 0;
            width: 70%;
        }
        body.page-kotc .dashboard-right,
        body.page-playalot .dashboard-right {
            box-sizing: border-box;
            display: flex;
            flex: 0 0 30%;
            flex-direction: column;
            gap: 18px;
            min-width: 300px;
            min-height: 0;
            width: 30%;
        }
        body.page-kotc .dashboard-tabs,
        body.page-playalot .dashboard-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        body.page-kotc .dashboard-tab-btn,
        body.page-playalot .dashboard-tab-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            box-shadow: none;
            color: #f6fbfe;
            flex: 1 1 0;
            font-size: 14px;
            font-weight: 800;
            min-width: 0;
            padding: 10px 14px;
        }
        body.page-kotc .dashboard-tab-btn.is-active,
        body.page-playalot .dashboard-tab-btn.is-active {
            background: #049df0;
            background-image: linear-gradient(180deg, #76c8ff 0%, #049df0 100%);
            border-color: #0274b3;
            color: #ffffff;
        }
        body.page-kotc .dashboard-tab-pane,
        body.page-playalot .dashboard-tab-pane {
            display: none;
        }
        body.page-kotc .dashboard-tab-pane.is-active,
        body.page-playalot .dashboard-tab-pane.is-active {
            display: block;
        }
        body.page-kotc .setup-layout {
            max-width: none;
            margin: 18px 14px 0;
            font-size: 0;
        }
        body.page-kotc .panel {
            background: rgba(255, 255, 255, 0.06);
            padding: 18px;
            margin-bottom: 18px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            box-shadow: 0 10px 20px rgba(19,49,79,0.08);
        }
        body.page-kotc .setup-panel {
            background-color: rgba(4, 157, 240, 0.1);
            border-color: rgba(4, 157, 240, 0.32);
            box-shadow: 0 10px 18px rgba(4, 157, 240, 0.12);
        }
        body.page-kotc .setup-qr-panel {
            width: 100%;
            display: block;
            margin: 0;
            box-sizing: border-box;
            padding: 14px 14px 12px;
        }
        body.page-kotc .leaderboard-panel-body {
            min-height: 240px;
        }
        body.page-kotc .leaderboard-panel-body .empty-state {
            height: 100%;
            box-sizing: border-box;
        }
        body.page-kotc .panel-waiting { border-left: 6px solid #049df0; }
        body.page-kotc .panel-title {
            font-size: 19px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            padding-bottom: 10px;
            margin-bottom: 14px;
            color: #f6fbfe;
            letter-spacing: 0.3px;
        }
        body.page-kotc .panel-title-row,
        body.page-playalot .panel-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 10px;
            margin-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }
        body.page-kotc .panel-title-row .panel-title,
        body.page-playalot .panel-title-row .panel-title {
            border-bottom: 0;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        body.page-kotc .panel-title-inline,
        body.page-playalot .panel-title-inline {
            flex: 1 1 auto;
            min-width: 0;
        }
        body.page-kotc .panel-title-actions,
        body.page-playalot .panel-title-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }
        body.page-kotc .panel-title-actions button,
        body.page-playalot .panel-title-actions button {
            white-space: nowrap;
        }
        body.page-kotc .panel-title-action-btn,
        body.page-playalot .panel-title-action-btn {
            font-size: 13px;
            line-height: 1.15;
            padding: 9px 12px;
        }
        body.page-kotc .form-section {
            border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
            padding-bottom: 12px;
            margin-bottom: 12px;
        }
        body.page-kotc .form-section-last {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        body.page-kotc .inline-help {
            font-size: 13px;
            color: rgba(246, 251, 254, 0.55);
            line-height: 1.6;
            margin-bottom: 12px;
        }
        body.page-kotc .code-pill {
            display: inline-block;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            color: #f6fbfe;
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 0.6px;
            margin: 6px 0 12px;
        }
        body.page-kotc .qr-preview-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            padding: 12px 12px 10px;
            margin-bottom: 10px;
        }
        body.page-kotc .qr-image {
            display: block;
            width: 180px;
            height: 180px;
            margin: 0 auto 10px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
        }
        body.page-kotc .qr-link-box {
            background: rgba(255, 255, 255, 0.06);
            border: 1px dashed rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            padding: 10px;
            font-size: 12px;
            line-height: 1.5;
            color: rgba(246, 251, 254, 0.55);
            word-break: break-all;
            text-align: left;
        }
        body.page-kotc .qr-note {
            font-size: 13px;
            color: rgba(246, 251, 254, 0.65);
            line-height: 1.5;
            margin-bottom: 10px;
        }
        body.page-kotc .qr-join-title,
        body.page-playalot .qr-join-title {
            color: #f6fbfe;
            font-size: 16px;
            font-weight: 900;
            letter-spacing: 0.2px;
            line-height: 1.25;
            margin-bottom: 8px;
            text-align: center;
            text-transform: uppercase;
        }
        body.page-kotc .qr-join-title .qr-join-event,
        body.page-playalot .qr-join-title .qr-join-event {
            color: #049df0;
            display: block;
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 0;
            margin-top: 4px;
            text-transform: none;
            word-break: break-word;
        }
        body.page-kotc .qr-panel-title,
        body.page-playalot .qr-panel-title {
            align-items: center;
        }
        body.page-kotc .qr-tools-toggle-btn,
        body.page-playalot .qr-tools-toggle-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            box-shadow: none;
            color: #f6fbfe;
            display: inline-flex;
            align-items: center;
            font-size: 12px;
            font-weight: 800;
            margin: 0 0 0 auto;
            min-height: 32px;
            padding: 5px 11px;
            width: auto;
        }
        body.page-kotc .qr-tools-panel,
        body.page-playalot .qr-tools-panel {
            margin-top: 10px;
        }
        body.page-kotc .qr-tools-panel .registration-actions,
        body.page-playalot .qr-tools-panel .registration-actions {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 10px;
        }
        body.page-kotc .qr-tools-panel .registration-actions button,
        body.page-playalot .qr-tools-panel .registration-actions button {
            width: 100%;
        }
        body.page-kotc .sync-status {
            margin: 8px 0 14px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            color: #f6fbfe;
            font-size: 13px;
            line-height: 1.5;
            border: 1px solid rgba(255, 255, 255, 0.14);
        }
        body.page-kotc .sync-status.is-error {
            background: rgba(255, 110, 110, 0.16);
            border-color: rgba(255, 110, 110, 0.16);
            color: #ff9d9d;
        }
        body.page-kotc .sync-status.is-success {
            background: rgba(191, 232, 0, 0.12);
            border-color: #bfe800;
            color: #d6f266;
        }
        body.page-kotc .player-subline {
            margin-top: 4px;
            font-size: 12px;
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-kotc .team-player-subline {
            margin: 2px 0 8px;
            font-size: 12px;
            color: rgba(246, 251, 254, 0.55);
        }

        body.page-kotc .court-card {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            margin-bottom: 18px;
            padding: 16px;
            border-radius: 18px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
        }
        body.page-kotc .court-card.playing {
            border-color: #049df0;
            background-color: rgba(255, 255, 255, 0.04);
            box-shadow: 0 14px 26px rgba(4, 157, 240, 0.18);
        }
        body.page-kotc .courts-grid {
            --court-card-basis: calc(25% - 11px);
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 0;
        }
        body.page-kotc .courts-grid.is-court-count-1 { --court-card-basis: 100%; }
        body.page-kotc .courts-grid.is-court-count-2 { --court-card-basis: calc(50% - 7px); }
        body.page-kotc .courts-grid.is-court-count-3 { --court-card-basis: calc(33.333% - 10px); }
        body.page-kotc .courts-grid.is-court-count-4 { --court-card-basis: calc(25% - 11px); }
        body.page-kotc .courts-grid.is-court-count-5 { --court-card-basis: calc(20% - 12px); }
        body.page-kotc .courts-grid .court-card {
            box-sizing: border-box;
            display: flex;
            flex: 1 1 var(--court-card-basis);
            flex-direction: column;
            margin: 0;
            min-width: 180px;
        }
        body.page-kotc .courts-grid .empty-state {
            flex: 1 1 100%;
            font-size: 14px;
            margin: 0;
        }
        body.page-kotc .court-header {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 14px;
            color: #f6fbfe;
            overflow: hidden;
        }
        body.page-kotc .court-badge {
            display: inline-block;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.04);
            font-size: 13px;
            border-radius: 999px;
            margin-right: 10px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        body.page-kotc .court-timer {
            float: right;
            font-family: var(--dal-font-mono);
            font-size: 18px;
            font-weight: bold;
            color: #049df0;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.14);
            padding: 4px 8px;
            border-radius: 999px;
        }
        body.page-kotc .court-timer.danger {
            color: #dc3545;
            background: rgba(255, 110, 110, 0.16);
            border-color: rgba(255, 110, 110, 0.16);
        }

        body.page-kotc .team-row { width: 100%; margin-bottom: 15px; }
        body.page-kotc .team-box {
            width: 100%;
            display: block;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.14);
            padding: 12px;
            box-sizing: border-box;
            text-align: center;
            border-radius: 14px;
            font-size: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            margin-bottom: 10px;
        }
        body.page-kotc .team-row .team-box:last-child {
            margin-bottom: 0;
        }
        body.page-kotc .team-box-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #f6fbfe;
            margin-bottom: 8px;
        }
        body.page-kotc .team-pair-tag {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 3px 8px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(246, 251, 254, 0.65);
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 0;
            line-height: 1;
            text-transform: none;
            white-space: nowrap;
        }
        body.page-kotc .team-pair-tag.has-repeat {
            border-color: rgba(247, 181, 0, 0.18);
            background: rgba(247, 181, 0, 0.18);
            color: #ffd86b;
        }
        body.page-kotc .team-player-name {
            margin: 6px 0;
            font-size: 17px;
            color: #f6fbfe;
        }
        body.page-kotc .player-select-hidden {
            display: none;
        }
        body.page-kotc .player-picker-btn {
            width: 100%;
            margin: 0 0 8px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
            background-image: none;
            color: #f6fbfe;
            box-shadow: 0 4px 10px rgba(19,49,79,0.06);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            text-align: center;
        }
        body.page-kotc .player-picker-btn:last-child {
            margin-bottom: 0;
        }
        body.page-kotc .player-picker-btn:hover {
            border-color: #049df0;
            box-shadow: 0 7px 14px rgba(4, 157, 240, 0.16);
        }
        body.page-kotc .player-picker-btn.has-player {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.04);
        }
        body.page-kotc .player-picker-label,
        body.page-kotc .player-picker-meta {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
            width: 100%;
            text-align: center;
        }
        body.page-kotc .player-picker-label {
            color: #f6fbfe;
            font-size: 15px;
            font-weight: 900;
            line-height: 1.25;
        }
        body.page-kotc .player-picker-meta {
            margin-top: 3px;
            color: rgba(246, 251, 254, 0.65);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .player-picker-gender {
            color: rgba(246, 251, 254, 0.55);
            font-size: 12px;
            font-weight: 800;
        }
        body.page-kotc .vs-box {
            width: 100%;
            display: block;
            text-align: center;
            font-weight: bold;
            padding: 4px 0 12px;
            color: #049df0;
            font-style: italic;
            font-size: 18px;
        }
        body.page-kotc .action-half-left,
        body.page-playalot .action-half-left { width: 40%; }
        body.page-kotc .action-half-right,
        body.page-playalot .action-half-right { width: 58%; float: right; }
        body.page-kotc .action-half-left,
        body.page-kotc .action-half-right,
        body.page-playalot .action-half-left,
        body.page-playalot .action-half-right {
            align-items: center;
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            text-align: center;
        }

        body.page-kotc .waiting-chip {
            display: inline-block;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            padding: 10px 14px;
            margin: 6px;
            border-radius: 999px;
            font-size: 15px;
            color: #f6fbfe;
            box-shadow: 0 5px 10px rgba(0,39,82,0.06);
        }
        body.page-kotc .waiting-chip.next-up {
            background: rgba(108, 214, 147, 0.18);
            color: #f6fbfe;
            font-weight: bold;
            border-color: #9ebf17;
        }
        body.page-kotc .waiting-chip.paused-chip {
            background: rgba(255, 255, 255, 0.14);
            color: rgba(246, 251, 254, 0.55);
            border-style: dashed;
            box-shadow: none;
        }
        body.page-kotc .queue-num {
            display: inline-block;
            vertical-align: middle;
            background: rgba(255, 255, 255, 0.06);
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            margin-right: 8px;
            font-weight: bold;
            color: #f6fbfe;
        }
        body.page-kotc .paused-label {
            color: #c03d49;
            font-size: 12px;
            font-weight: bold;
            margin-right: 6px;
        }
        body.page-kotc .waiting-name { display: inline-block; vertical-align: middle; }
        body.page-kotc .wait-timer {
            display: inline-block;
            vertical-align: middle;
            font-family: var(--dal-font-mono);
            font-size: 13px;
            color: #ff9d9d;
            font-weight: bold;
            margin-left: 8px;
            background: rgba(255, 110, 110, 0.16);
            padding: 3px 7px;
            border-radius: 999px;
        }
        body.page-kotc .waiting-card-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        body.page-kotc .waiting-card {
            position: relative;
            display: block;
            min-height: 118px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
            color: #f6fbfe;
            box-shadow: 0 6px 14px rgba(19, 49, 79, 0.08);
            box-sizing: border-box;
        }
        body.page-kotc .waiting-card.next-up {
            border-color: #049df0;
            background: rgba(255, 255, 255, 0.04);
            box-shadow: 0 8px 18px rgba(4, 157, 240, 0.16);
        }
        body.page-kotc .waiting-card.paused-card {
            background: rgba(255, 255, 255, 0.05);
            border-style: dashed;
            box-shadow: none;
            color: rgba(246, 251, 254, 0.65);
        }
        body.page-kotc .waiting-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }
        body.page-kotc .waiting-card-top-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
        }
        body.page-kotc .waiting-card .queue-num {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 4px 8px;
            margin: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.3px;
        }
        body.page-kotc .waiting-card.paused-card .queue-num {
            background: rgba(255, 255, 255, 0.14);
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-kotc .next-up-label {
            color: #76c8ff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        body.page-kotc .waiting-card .waiting-name {
            display: block;
            margin: 0 0 5px;
            color: #f6fbfe;
            font-size: 17px;
            font-weight: 800;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        body.page-kotc .waiting-rating {
            margin-bottom: 10px;
            color: rgba(246, 251, 254, 0.55);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .waiting-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            padding-top: 9px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            color: rgba(246, 251, 254, 0.55);
            font-size: 12px;
            font-weight: 800;
            line-height: 1.25;
            white-space: nowrap;
        }
        body.page-kotc .waiting-meta-separator {
            color: rgba(246, 251, 254, 0.55);
            font-weight: 600;
        }
        body.page-kotc .waiting-card .wait-timer {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            min-height: 24px;
            margin-left: auto;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(247, 181, 0, 0.18);
            border: 1px solid rgba(247, 181, 0, 0.18);
            color: #ffd86b;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.2px;
        }
        body.page-kotc .players-panel-body,
        body.page-playalot .players-panel-body {
            min-height: 240px;
            max-height: 1000px;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding-right: 6px;
            scrollbar-gutter: stable;
        }
        body.page-kotc .players-panel-body .empty-state,
        body.page-playalot .players-panel-body .empty-state {
            height: 100%;
            box-sizing: border-box;
        }
        body.page-kotc .players-card-list,
        body.page-playalot .players-card-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 10px;
        }
        body.page-kotc .player-card,
        body.page-playalot .player-card {
            position: relative;
            display: block;
            min-height: 134px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
            color: #f6fbfe;
            box-shadow: 0 6px 14px rgba(19, 49, 79, 0.08);
            box-sizing: border-box;
        }
        body.page-kotc .player-card.is-paused,
        body.page-playalot .player-card.is-paused {
            background: rgba(255, 255, 255, 0.05);
            border-style: dashed;
            box-shadow: none;
            color: rgba(246, 251, 254, 0.65);
        }
        body.page-kotc .player-card-top,
        body.page-playalot .player-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }
        body.page-kotc .player-card-state,
        body.page-playalot .player-card-state {
            color: #76c8ff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        body.page-kotc .player-card.is-paused .player-card-state,
        body.page-playalot .player-card.is-paused .player-card-state {
            color: #c03d49;
        }
        body.page-kotc .player-card-name,
        body.page-playalot .player-card-name {
            display: block;
            margin: 0 0 5px;
            color: #f6fbfe;
            font-size: 17px;
            font-weight: 800;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        body.page-kotc .player-card-gender,
        body.page-playalot .player-card-gender {
            color: rgba(246, 251, 254, 0.55);
            font-size: 13px;
            font-weight: 700;
        }
        body.page-kotc .player-card-rating,
        body.page-playalot .player-card-rating {
            margin-bottom: 10px;
            color: rgba(246, 251, 254, 0.55);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .player-card-meta,
        body.page-playalot .player-card-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            padding-top: 9px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            color: rgba(246, 251, 254, 0.55);
            font-size: 13px;
            font-weight: 800;
        }
        body.page-kotc .player-card-meta-separator,
        body.page-playalot .player-card-meta-separator {
            color: rgba(246, 251, 254, 0.55);
            font-weight: 600;
        }
        body.page-kotc .player-card-actions,
        body.page-playalot .player-card-actions {
            display: flex;
            gap: 6px;
            margin-top: 10px;
        }
        body.page-kotc .player-card-actions .mini-btn,
        body.page-playalot .player-card-actions .mini-btn {
            flex: 1 1 0;
            margin-right: 0;
            min-width: 0;
            width: auto;
        }

        body.page-kotc #customModalOverlay,
        body.page-kotc #editModalOverlay,
        body.page-kotc #playerPickerModalOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,39,82,0.82);
            z-index: 9999;
        }
        body.page-kotc #courtTimeWarningOverlay,
        body.page-playalot #courtTimeWarningOverlay {
            display: none;
            position: fixed;
            inset: 0;
            align-items: center;
            justify-content: center;
            padding: clamp(16px, 3vw, 32px);
            overflow: auto;
            background:
                radial-gradient(circle at top, rgba(255, 166, 84, 0.22), transparent 34%),
                radial-gradient(circle at bottom left, rgba(255, 220, 110, 0.12), transparent 36%),
                rgba(8, 10, 16, 0.88);
            backdrop-filter: blur(14px) saturate(120%);
            z-index: 10040;
        }
        body.page-kotc #courtTimeWarningOverlay.is-open,
        body.page-playalot #courtTimeWarningOverlay.is-open {
            display: flex;
        }
        body.page-kotc.warning-modal-open,
        body.page-playalot.warning-modal-open {
            overflow: hidden;
        }
        body.page-kotc .custom-modal {
            background: rgba(255, 255, 255, 0.06);
            width: 92%;
            max-width: 430px;
            margin: 40px auto;
            padding: 24px 22px;
            text-align: center;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 20px 40px rgba(0,39,82,0.35);
        }
        body.page-kotc .court-warning-modal,
        body.page-playalot .court-warning-modal {
            position: relative;
            display: flex;
            flex-direction: column;
            width: min(760px, 100%);
            max-height: calc(100vh - 32px);
            margin: 0 auto;
            padding: 0;
            overflow: hidden;
            text-align: left;
            color: rgba(247, 181, 0, 0.18);
            border: 1px solid rgba(255, 187, 138, 0.42);
            border-radius: 28px;
            background:
                linear-gradient(180deg, rgba(34, 8, 12, 0.98) 0%, rgba(13, 11, 18, 0.98) 100%);
            box-shadow:
                0 28px 90px rgba(0, 0, 0, 0.56),
                0 0 0 1px rgba(255, 128, 48, 0.15),
                0 0 60px rgba(255, 76, 39, 0.28);
            animation: courtWarningPop 220ms ease-out, courtWarningPulse 1.9s ease-in-out infinite;
        }
        body.page-kotc .court-warning-modal.is-timeup,
        body.page-playalot .court-warning-modal.is-timeup {
            border-color: rgba(255, 92, 92, 0.7);
            background: linear-gradient(180deg, rgba(58, 7, 11, 0.99) 0%, rgba(15, 5, 9, 0.99) 100%);
            box-shadow:
                0 28px 92px rgba(0, 0, 0, 0.62),
                0 0 0 1px rgba(255, 85, 85, 0.22),
                0 0 84px rgba(255, 54, 54, 0.38);
            animation: courtWarningPop 220ms ease-out, courtWarningPulseHard 1.25s ease-in-out infinite;
        }
        body.page-kotc .court-warning-modal::before,
        body.page-playalot .court-warning-modal::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 188, 112, 0.24), transparent 30%),
                radial-gradient(circle at bottom left, rgba(255, 100, 44, 0.18), transparent 34%);
            pointer-events: none;
        }
        body.page-kotc .court-warning-modal::after,
        body.page-playalot .court-warning-modal::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 22%, transparent 78%, rgba(255,255,255,0.04));
            pointer-events: none;
        }
        body.page-kotc .court-warning-modal > *,
        body.page-playalot .court-warning-modal > * {
            position: relative;
            z-index: 1;
        }
        body.page-kotc .court-warning-topline,
        body.page-playalot .court-warning-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 24px 0;
        }
        body.page-kotc .court-warning-badge,
        body.page-playalot .court-warning-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border: 1px solid rgba(255, 203, 143, 0.42);
            border-radius: 999px;
            background: rgba(255, 122, 52, 0.16);
            color: rgba(247, 181, 0, 0.18);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            box-shadow: 0 0 0 1px rgba(255, 122, 52, 0.08) inset;
            animation: courtWarningBadgePulse 1.6s ease-in-out infinite;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-badge,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-badge {
            border-color: rgba(255, 173, 173, 0.48);
            background: rgba(255, 58, 58, 0.18);
            color: rgba(255, 110, 110, 0.16);
        }
        body.page-kotc .court-warning-live,
        body.page-playalot .court-warning-live {
            position: relative;
            padding-left: 18px;
            color: #ffb36d;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        body.page-kotc .court-warning-live::before,
        body.page-playalot .court-warning-live::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 10px;
            height: 10px;
            margin-top: -5px;
            border-radius: 50%;
            background: #ff6a2a;
            box-shadow: 0 0 0 0 rgba(255, 106, 42, 0.55);
            animation: courtWarningDot 1.2s ease-out infinite;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-live,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-live {
            color: #ff7d7d;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-live::before,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-live::before {
            background: #ff3f3f;
            box-shadow: 0 0 0 0 rgba(255, 63, 63, 0.65);
            animation: courtWarningDotHard 1s ease-out infinite;
        }
        body.page-kotc .court-warning-hero,
        body.page-playalot .court-warning-hero {
            display: grid;
            grid-template-columns: 84px minmax(0, 1fr);
            gap: 18px;
            align-items: center;
            padding: 18px 24px 14px;
        }
        body.page-kotc .court-warning-icon,
        body.page-playalot .court-warning-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 84px;
            height: 84px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 30%, rgba(247, 181, 0, 0.18) 0%, rgba(247, 181, 0, 0.18) 26%, #ff9930 54%, #ffd86b 100%);
            color: #ffd86b;
            font-size: 48px;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 1px 0 rgba(255,255,255,0.45);
            box-shadow:
                0 0 0 7px rgba(255, 120, 42, 0.12),
                0 18px 36px rgba(0, 0, 0, 0.42);
            animation: courtWarningIconPulse 1.7s ease-in-out infinite;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-icon,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-icon {
            background: radial-gradient(circle at 32% 30%, rgba(255, 110, 110, 0.16) 0%, #ff8f8f 26%, #ff4646 54%, #ff9d9d 100%);
            color: #ff9d9d;
            box-shadow:
                0 0 0 7px rgba(255, 76, 76, 0.14),
                0 18px 40px rgba(0, 0, 0, 0.48);
            animation: courtWarningIconPulseHard 1.15s ease-in-out infinite;
        }
        body.page-kotc .court-warning-copy-wrap,
        body.page-playalot .court-warning-copy-wrap {
            min-width: 0;
        }
        body.page-kotc .court-warning-title,
        body.page-playalot .court-warning-title {
            margin: 0;
            color: rgba(247, 181, 0, 0.18);
            font-size: clamp(30px, 4.8vw, 44px);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-title,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-title {
            color: rgba(255, 110, 110, 0.16);
            text-shadow: 0 0 18px rgba(255, 79, 79, 0.24);
        }
        body.page-kotc .court-warning-subtitle,
        body.page-playalot .court-warning-subtitle {
            margin: 8px 0 0;
            color: rgba(247, 181, 0, 0.18);
            font-size: 15px;
            line-height: 1.6;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-subtitle,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-subtitle {
            color: rgba(255, 110, 110, 0.16);
        }
        body.page-kotc .court-warning-meta-grid,
        body.page-playalot .court-warning-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            padding: 0 24px;
        }
        body.page-kotc .court-warning-meta-item,
        body.page-playalot .court-warning-meta-item {
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.06);
        }
        body.page-kotc .court-warning-meta-item span,
        body.page-playalot .court-warning-meta-item span {
            display: block;
            color: rgba(247, 181, 0, 0.18);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }
        body.page-kotc .court-warning-meta-item strong,
        body.page-playalot .court-warning-meta-item strong {
            display: block;
            margin-top: 5px;
            color: rgba(247, 181, 0, 0.18);
            font-size: 15px;
            line-height: 1.35;
            word-break: break-word;
        }
        body.page-kotc .court-warning-teams,
        body.page-playalot .court-warning-teams {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            padding: 14px 24px 6px;
        }
        body.page-kotc .court-warning-team,
        body.page-playalot .court-warning-team {
            padding: 14px 16px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-left: 4px solid #ff8a1e;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.05);
        }
        body.page-kotc .court-warning-team span,
        body.page-playalot .court-warning-team span {
            display: block;
            color: rgba(247, 181, 0, 0.18);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 1.1px;
            text-transform: uppercase;
        }
        body.page-kotc .court-warning-team strong,
        body.page-playalot .court-warning-team strong {
            display: block;
            margin-top: 6px;
            color: rgba(247, 181, 0, 0.18);
            font-size: 16px;
            line-height: 1.4;
            word-break: break-word;
        }
        body.page-kotc .court-warning-actions,
        body.page-playalot .court-warning-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px 24px;
        }
        body.page-kotc .court-warning-ack-btn,
        body.page-playalot .court-warning-ack-btn {
            min-width: 210px;
            padding: 13px 18px;
            border: 1px solid #ff9f4c;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(247, 181, 0, 0.18) 0%, #ff9c33 100%);
            color: #ffd86b;
            box-shadow: 0 12px 22px rgba(255, 132, 32, 0.24);
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
        }
        body.page-kotc .court-warning-modal.is-timeup .court-warning-ack-btn,
        body.page-playalot .court-warning-modal.is-timeup .court-warning-ack-btn {
            border-color: #ff6d6d;
            background: linear-gradient(180deg, rgba(247, 181, 0, 0.18) 0%, #ff6b6b 100%);
            box-shadow: 0 14px 28px rgba(255, 79, 79, 0.28);
        }
        body.page-kotc .court-warning-ack-btn:hover,
        body.page-playalot .court-warning-ack-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.03);
            box-shadow: 0 16px 26px rgba(255, 132, 32, 0.3);
        }
        body.page-kotc .court-warning-ack-btn:focus-visible,
        body.page-playalot .court-warning-ack-btn:focus-visible {
            outline: 3px solid rgba(255, 225, 177, 0.7);
            outline-offset: 3px;
        }
        @keyframes courtWarningPop {
            from {
                transform: translateY(18px) scale(0.96);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }
        @keyframes courtWarningPulse {
            0%, 100% {
                box-shadow:
                    0 28px 90px rgba(0, 0, 0, 0.56),
                    0 0 0 1px rgba(255, 128, 48, 0.15),
                    0 0 60px rgba(255, 76, 39, 0.24);
            }
            50% {
                box-shadow:
                    0 32px 100px rgba(0, 0, 0, 0.6),
                    0 0 0 1px rgba(255, 128, 48, 0.22),
                    0 0 72px rgba(255, 76, 39, 0.34);
            }
        }
        @keyframes courtWarningPulseHard {
            0%, 100% {
                box-shadow:
                    0 28px 92px rgba(0, 0, 0, 0.62),
                    0 0 0 1px rgba(255, 85, 85, 0.22),
                    0 0 84px rgba(255, 54, 54, 0.38);
            }
            50% {
                box-shadow:
                    0 34px 110px rgba(0, 0, 0, 0.68),
                    0 0 0 1px rgba(255, 85, 85, 0.3),
                    0 0 100px rgba(255, 54, 54, 0.52);
            }
        }
        @keyframes courtWarningBadgePulse {
            0%, 100% {
                transform: translateY(0);
                box-shadow: 0 0 0 1px rgba(255, 122, 52, 0.08) inset;
            }
            50% {
                transform: translateY(-1px);
                box-shadow: 0 0 0 1px rgba(255, 122, 52, 0.2) inset;
            }
        }
        @keyframes courtWarningDot {
            0% {
                transform: translateY(-50%) scale(0.75);
                box-shadow: 0 0 0 0 rgba(255, 106, 42, 0.5);
                opacity: 0.9;
            }
            70% {
                transform: translateY(-50%) scale(1.05);
                box-shadow: 0 0 0 12px rgba(255, 106, 42, 0);
                opacity: 0.8;
            }
            100% {
                transform: translateY(-50%) scale(0.75);
                box-shadow: 0 0 0 0 rgba(255, 106, 42, 0);
                opacity: 0.9;
            }
        }
        @keyframes courtWarningDotHard {
            0% {
                transform: translateY(-50%) scale(0.78);
                box-shadow: 0 0 0 0 rgba(255, 63, 63, 0.72);
                opacity: 1;
            }
            70% {
                transform: translateY(-50%) scale(1.1);
                box-shadow: 0 0 0 14px rgba(255, 63, 63, 0);
                opacity: 0.88;
            }
            100% {
                transform: translateY(-50%) scale(0.78);
                box-shadow: 0 0 0 0 rgba(255, 63, 63, 0);
                opacity: 1;
            }
        }
        @keyframes courtWarningIconPulse {
            0%, 100% {
                transform: scale(1);
                filter: saturate(1);
            }
            50% {
                transform: scale(1.04);
                filter: saturate(1.08);
            }
        }
        @keyframes courtWarningIconPulseHard {
            0%, 100% {
                transform: scale(1);
                filter: saturate(1);
            }
            50% {
                transform: scale(1.08);
                filter: saturate(1.14);
            }
        }
        body.page-kotc .player-picker-modal {
            display: flex;
            flex-direction: column;
            width: min(960px, calc(100vw - 28px));
            max-width: none;
            max-height: calc(100vh - 40px);
            margin: 20px auto;
            padding: 0;
            overflow: hidden;
            text-align: left;
        }
        body.page-kotc .player-picker-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 24px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        body.page-kotc .player-picker-kicker {
            color: #049df0;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }
        body.page-kotc .player-picker-close {
            flex: 0 0 auto;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            background-image: none;
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #f6fbfe;
            font-size: 26px;
            line-height: 1;
            box-shadow: none;
        }
        body.page-kotc .player-picker-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            padding: 14px 24px 0;
        }
        body.page-kotc .player-picker-search {
            width: 100%;
            margin: 0;
        }
        body.page-kotc .player-picker-clear {
            min-width: 116px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, 0.05);
            background-image: none;
            color: #f6fbfe;
            border-color: rgba(255, 255, 255, 0.14);
            box-shadow: none;
        }
        body.page-kotc .player-picker-current {
            margin: 12px 24px 0;
            padding: 9px 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(246, 251, 254, 0.65);
            font-size: 13px;
            font-weight: 800;
        }
        body.page-kotc .player-picker-current strong {
            color: #f6fbfe;
        }
        body.page-kotc .player-picker-current span {
            margin-left: 6px;
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-kotc .player-picker-current .player-picker-context {
            display: inline-block;
            margin-left: 10px;
            padding-left: 10px;
            border-left: 1px solid rgba(255, 255, 255, 0.14);
        }
        body.page-kotc .player-picker-list {
            display: grid;
            flex: 1 1 auto;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 10px;
            margin-top: 14px;
            min-height: 0;
            padding: 0 24px 24px;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        body.page-kotc .player-picker-card {
            width: 100%;
            min-height: 132px;
            background: rgba(255, 255, 255, 0.06);
            background-image: none;
            color: #f6fbfe;
            text-align: left;
            cursor: pointer;
        }
        body.page-kotc .player-picker-card:hover {
            border-color: #049df0;
            box-shadow: 0 10px 18px rgba(4, 157, 240, 0.16);
        }
        body.page-kotc .player-picker-card.is-selected {
            border-color: #049df0;
            background: rgba(255, 255, 255, 0.04);
            box-shadow: 0 10px 18px rgba(4, 157, 240, 0.16);
        }
        body.page-kotc .player-picker-card.is-unavailable,
        body.page-kotc .player-picker-card:disabled {
            background: rgba(255, 255, 255, 0.05);
            background-image: none;
            border-color: rgba(255, 255, 255, 0.14);
            color: rgba(246, 251, 254, 0.65);
            cursor: not-allowed;
            opacity: 0.72;
            box-shadow: none;
        }
        body.page-kotc .player-picker-insight {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            margin-top: 10px;
            min-height: 24px;
            padding: 4px 8px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(246, 251, 254, 0.55);
            font-size: 12px;
            font-weight: 900;
            line-height: 1;
        }
        body.page-kotc .player-picker-insight.has-repeat {
            border-color: rgba(247, 181, 0, 0.18);
            background: rgba(247, 181, 0, 0.18);
            color: #ffd86b;
        }
        @media (max-width: 760px) {
            body.page-kotc .court-warning-modal,
            body.page-playalot .court-warning-modal {
                width: min(640px, 100%);
                max-height: calc(100vh - 24px);
            }
            body.page-kotc .court-warning-hero,
            body.page-playalot .court-warning-hero {
                grid-template-columns: 1fr;
            }
            body.page-kotc .court-warning-icon,
            body.page-playalot .court-warning-icon {
                width: 72px;
                height: 72px;
                font-size: 42px;
            }
            body.page-kotc .court-warning-meta-grid,
            body.page-playalot .court-warning-meta-grid,
            body.page-kotc .court-warning-teams,
            body.page-playalot .court-warning-teams {
                grid-template-columns: 1fr;
            }
            body.page-kotc .court-warning-actions,
            body.page-playalot .court-warning-actions {
                flex-direction: column;
            }
            body.page-kotc .court-warning-ack-btn,
            body.page-playalot .court-warning-ack-btn {
                width: 100%;
                min-width: 0;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            body.page-kotc .court-warning-modal,
            body.page-playalot .court-warning-modal,
            body.page-kotc .court-warning-badge,
            body.page-playalot .court-warning-badge,
            body.page-kotc .court-warning-live::before,
            body.page-playalot .court-warning-live::before,
            body.page-kotc .court-warning-icon,
            body.page-playalot .court-warning-icon {
                animation: none;
            }
            body.page-kotc .court-warning-ack-btn,
            body.page-playalot .court-warning-ack-btn {
                transition: none;
            }
        }
        body.page-kotc .modal-title {
            margin-top: 0;
            margin-bottom: 8px;
            color: #f6fbfe;
            font-size: 28px;
        }
        body.page-kotc .modal-subtitle {
            color: #f6fbfe;
            font-size: 14px;
            margin-bottom: 20px;
        }
        body.page-kotc .modal-team-name {
            font-weight: bold;
            color: #f6fbfe;
            margin: 6px 0;
            font-size: 17px;
            line-height: 1.4;
        }
        body.page-kotc .modal-vs {
            font-weight: bold;
            font-size: 20px;
            color: #049df0;
            font-style: italic;
        }
        body.page-kotc .score-input {
            width: 90px;
            font-size: 32px;
            text-align: center;
            margin: 12px 10px;
            font-weight: bold;
            border: 2px solid #049df0;
            color: #f6fbfe;
            border-radius: 14px;
        }
        body.page-kotc .modal-buttons { margin-top: 10px; }
        body.page-kotc .modal-buttons button { width: 48%; }

        body.page-kotc .table-wrap { overflow-x: auto; }
        body.page-kotc .leaderboard-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 8px;
            font-size: 14px;
            min-width: 620px;
        }
        body.page-kotc .leaderboard-head th {
            background: rgba(4, 157, 240, 0.18);
            color: #f6fbfe;
            padding: 10px 8px;
            font-size: 13px;
            letter-spacing: 0.5px;
        }
        body.page-kotc .leaderboard-head th:first-child {
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        body.page-kotc .leaderboard-head th:last-child {
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        body.page-kotc .leaderboard-row td {
            background: rgba(255, 255, 255, 0.06);
            padding: 10px 8px;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        }
        body.page-kotc .leaderboard-row td:first-child {
            border-left: 1px solid rgba(255, 255, 255, 0.14);
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        body.page-kotc .leaderboard-row td:last-child {
            border-right: 1px solid rgba(255, 255, 255, 0.14);
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        body.page-kotc .leaderboard-row.is-paused td {
            background: rgba(255, 255, 255, 0.04);
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-kotc .leaderboard-player { text-align: left !important; }
        body.page-kotc .rank-pill {
            display: inline-block;
            min-width: 30px;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(4, 157, 240, 0.12);
            color: #76c8ff;
            font-weight: bold;
        }
        body.page-kotc .player-name {
            color: #f6fbfe;
            font-size: 15px;
        }
        body.page-kotc .player-status {
            color: #c03d49;
            font-size: 12px;
            margin-left: 4px;
        }
        body.page-kotc .mini-btn {
            padding: 6px 10px;
            font-size: 12px;
            margin-right: 5px;
            border-radius: 10px;
            box-shadow: none;
        }
        body.page-kotc .mini-btn:last-child { margin-right: 0; }

        body.page-kotc .history-card {
            background: rgba(255, 255, 255, 0.06);
            padding: 14px 16px;
            margin-bottom: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-left: 6px solid #049df0;
            border-radius: 14px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
            position: relative;
        }
        body.page-kotc .history-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            min-width: 0;
        }
        body.page-kotc .history-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        body.page-kotc .history-export-btn {
            padding: 7px 12px;
            font-size: 12px;
            border-radius: 10px;
            white-space: nowrap;
            box-shadow: none;
        }
        body.page-kotc .history-edit-btn {
            position: static;
            flex: 0 0 auto;
            align-self: flex-start;
            padding: 5px 10px;
            font-size: 12px;
            background-color: #ff9800;
            background-image: linear-gradient(180deg, #ffcf72 0%, #ff9800 100%);
            color: #f6fbfe;
            border: 1px solid #cc7a00;
            box-shadow: none;
            touch-action: manipulation;
        }
        body.page-kotc .history-court {
            display: inline-block;
            background: rgba(255, 255, 255, 0.04);
            color: #f6fbfe;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        body.page-kotc .history-scoreline {
            padding-right: 0;
            line-height: 1.7;
        }
        body.page-kotc .history-team {
            color: rgba(246, 251, 254, 0.55);
        }
        body.page-kotc .history-team.is-winner {
            color: #f6fbfe;
            font-weight: bold;
        }
        body.page-kotc .history-vs {
            color: #049df0;
            font-weight: bold;
            padding: 0 6px;
        }
        body.page-kotc .history-score {
            display: inline-block;
            min-width: 28px;
            text-align: center;
            padding: 1px 6px;
            border-radius: 999px;
            background: #eff4f8;
            color: #f6fbfe;
        }
        body.page-kotc .history-score.is-winner {
            background: #d9f07d;
            color: #f6fbfe;
        }
        body.page-kotc .history-score.is-loser {
            background: rgba(255, 255, 255, 0.14);
            color: rgba(246, 251, 254, 0.55);
        }

        body.page-kotc .empty-state {
            color: rgba(246, 251, 254, 0.55);
            text-align: center;
            padding: 18px 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px dashed rgba(255, 255, 255, 0.14);
            border-radius: 14px;
        }

        body.page-kotc .hidden { display: none !important; }
        body.page-kotc .text-center { text-align: center; }

        @media screen and (max-width: 1180px) {
            body.page-kotc .header-inner {
                min-height: 0;
                padding: 20px 0 0;
            }
            body.page-kotc .header-brand {
                max-width: none;
                text-align: center;
            }
            body.page-kotc .header-countdown {
                position: static;
                left: auto;
                top: auto;
                width: auto;
                max-width: 320px;
                margin: 16px auto 0;
            }
            body.page-kotc .header-config-panel {
                width: 320px;
            }
        }
        @media screen and (max-width: 720px) {
            body.page-kotc .header-inner {
                padding: 20px 0 0;
            }
            body.page-kotc .header h1 { font-size: 24px; }
            body.page-kotc .countdown-value { font-size: 32px; }
            body.page-kotc .panel { padding: 16px; }
            body.page-kotc .qr-join-title,
            body.page-playalot .qr-join-title {
                font-size: 16px;
            }
            body.page-kotc .qr-join-title .qr-join-event,
            body.page-playalot .qr-join-title .qr-join-event {
                font-size: 18px;
            }
            body.page-kotc .qr-panel-title .qr-tools-toggle-btn,
            body.page-playalot .qr-panel-title .qr-tools-toggle-btn {
                margin: 10px 0 0;
                width: 100%;
            }
            body.page-kotc .dashboard-left {
                width: 100%;
                display: block;
                margin-right: 0;
            }
            body.page-kotc .dashboard-right {
                width: 100%;
                display: block;
                margin-right: 0;
                min-width: 0;
            }
            body.page-kotc .setup-qr-panel {
                width: 100%;
                display: block;
                margin-right: 0;
            }
            body.page-kotc .header-config-actions button {
                width: 100%;
                display: block;
                margin: 0;
                min-height: 68px;
            }
            body.page-kotc .header-config-actions {
                grid-template-columns: 1fr;
            }
            body.page-kotc .config-action-btn.is-primary {
                grid-column: auto;
            }
            body.page-kotc .courts-grid { margin: 0; }
            body.page-kotc .courts-grid .court-card {
                flex-basis: 100%;
                min-width: 0;
            }
            body.page-kotc .courts-grid .empty-state {
                margin: 0;
            }
            body.page-kotc .team-box, body.page-kotc .vs-box {
                width: 100%;
                display: block;
            }
            body.page-kotc .vs-box { padding: 12px 0; }
            body.page-kotc .court-timer {
                float: none;
                display: inline-block;
                margin-top: 10px;
            }
            body.page-kotc .waiting-chip {
                display: block;
                margin: 0 0 10px;
            }
            body.page-kotc .action-half-left,
            body.page-kotc .action-half-right,
            body.page-playalot .action-half-left,
            body.page-playalot .action-half-right {
                width: 100%;
                float: none;
            }
            body.page-kotc .action-half-left,
            body.page-playalot .action-half-left { margin-bottom: 8px; }
            body.page-kotc .modal-buttons button {
                width: 100%;
                display: block;
                margin-bottom: 8px;
            }
            body.page-kotc .modal-buttons button:last-child { margin-bottom: 0; }
            body.page-kotc .player-picker-modal {
                width: calc(100vw - 18px);
                max-height: calc(100vh - 18px);
                margin: 9px auto;
            }
            body.page-kotc .player-picker-head {
                padding: 18px 16px 12px;
            }
            body.page-kotc .player-picker-toolbar {
                grid-template-columns: 1fr;
                padding: 12px 16px 0;
            }
            body.page-kotc .player-picker-clear {
                width: 100%;
            }
            body.page-kotc .player-picker-current {
                margin: 12px 16px 0;
            }
            body.page-kotc .player-picker-list {
                grid-template-columns: 1fr;
                padding: 0 16px 18px;
            }
            body.page-kotc .history-edit-btn {
                position: static;
                display: block;
                width: 100%;
                margin-bottom: 10px;
            }
            body.page-kotc .qr-tools-panel .registration-actions,
            body.page-playalot .qr-tools-panel .registration-actions {
                grid-template-columns: 1fr;
            }
            body.page-kotc .history-panel-title {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-kotc .history-card-top {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-kotc .history-export-btn {
                width: 100%;
            }
            body.page-kotc .qr-image {
                width: 100%;
                max-width: 180px;
            }
            body.page-kotc .qr-image {
                height: auto;
            }
            body.page-kotc .history-scoreline { padding-right: 0; }
            body.page-kotc .history-edit-btn {
                width: 100%;
            }
        }
        @media screen and (max-width: 420px) {
            body.page-kotc .config-dock {
                left: 14px;
                right: 14px;
            }
            body.page-kotc .header-config-toggle {
                width: 100%;
            }
            body.page-kotc .header-config-panel {
                width: 100%;
                max-width: none;
            }
        }
        @media screen and (max-width: 980px) {
            body.page-kotc .dashboard-layout,
            body.page-playalot .dashboard-layout {
                flex-direction: column;
            }
            body.page-kotc .dashboard-left,
            body.page-playalot .dashboard-left,
            body.page-kotc .dashboard-right,
            body.page-playalot .dashboard-right {
                display: block;
                margin-right: 0;
                max-width: none;
                min-width: 0;
                width: 100%;
            }
            body.page-kotc .dashboard-tabs,
            body.page-playalot .dashboard-tabs {
                display: none;
            }
            body.page-kotc .dashboard-tab-pane,
            body.page-playalot .dashboard-tab-pane {
                display: block !important;
            }
            body.page-kotc .courts-grid {
                margin: 0;
            }
            body.page-kotc .courts-grid .court-card {
                flex-basis: calc(50% - 7px);
                min-width: 220px;
            }
            body.page-kotc .courts-grid.is-court-count-1 .court-card {
                flex-basis: 100%;
            }
            body.page-kotc .courts-grid .empty-state {
                margin: 0;
            }
            body.page-kotc .panel-title-row,
            body.page-playalot .panel-title-row {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-kotc .panel-title-actions,
            body.page-playalot .panel-title-actions {
                justify-content: stretch;
            }
            body.page-kotc .panel-title-actions button,
            body.page-playalot .panel-title-actions button {
                width: 100%;
            }
        }
        @media screen and (max-width: 720px) {
            body.page-kotc .courts-grid .court-card {
                flex-basis: 100%;
                min-width: 0;
            }
        }
        @media screen and (min-width: 1280px) {
            body.page-kotc .dashboard-layout {
                width: calc(100vw - 28px);
                margin-left: calc(50% - 50vw + 14px);
            }
        }

        /* =========================================================
           Modern Playevent / KOTC overrides
           ========================================================= */
        body.page-kotc,
        body.page-playalot {
            --md3-primary: #049df0;
            --md3-primary-ink: #ffffff;
            --md3-accent: #e3ff62;
            --md3-accent-ink: #d6f266;
            --md3-bg: transparent;
            --md3-surface: rgba(8, 20, 34, 0.46);
            --md3-surface-strong: rgba(255, 255, 255, 0.08);
            --md3-border: rgba(255, 255, 255, 0.14);
            --md3-border-primary: rgba(4, 157, 240, 0.4);
            --md3-text: #f6fbfe;
            --md3-text-muted: rgba(246, 251, 254, 0.6);
            --md3-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
            --md3-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.5);
            margin: 0;
            min-width: 320px;
            padding: 0;
            color: var(--md3-text);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
            font-family: var(--dal-font);
        }
        body.page-kotc .header,
        body.page-playalot .header {
            background: transparent;
            box-shadow: none;
            padding: 20px 20px 0;
        }
        body.page-kotc .header-inner,
        body.page-playalot .header-inner {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            max-width: 1360px;
            margin: 0 auto;
            min-height: 0;
            padding: 0;
        }
        body.page-kotc .header-brand,
        body.page-playalot .header-brand {
            max-width: 640px;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        body.page-kotc .header-kicker,
        body.page-playalot .header-kicker {
            color: var(--md3-accent);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 2px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        body.page-kotc .header h1,
        body.page-playalot .header h1 {
            margin: 0;
            color: var(--md3-primary-ink);
            font-size: clamp(30px, 4vw, 44px);
            line-height: 1.05;
            letter-spacing: 0;
        }
        body.page-kotc .header h1 span,
        body.page-playalot .header h1 span { color: var(--md3-primary); }
        body.page-kotc .header-subtitle,
        body.page-playalot .header-subtitle {
            max-width: 64ch;
            margin-top: 10px;
            color: var(--md3-text-muted);
            font-size: 15px;
            line-height: 1.6;
        }
        body.page-kotc .header-countdown,
        body.page-playalot .header-countdown {
            position: static;
            align-self: flex-start;
            width: min(320px, 100%);
            margin: 0 0 0 auto;
            padding: 18px 18px 16px;
            text-align: center;
            border: 1px solid var(--md3-border);
            border-radius: 24px;
            background: var(--md3-surface);
            box-shadow: var(--md3-shadow);
            backdrop-filter: blur(18px);
            box-sizing: border-box;
        }
        body.page-kotc .countdown-label,
        body.page-playalot .countdown-label {
            color: var(--md3-accent);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }
        body.page-kotc.playevent-mode-playalot .countdown-label {
            color: var(--md3-primary);
        }
        body.page-kotc.playevent-mode-playalot .header-brand {
            max-width: none;
            flex: 1 1 auto;
            align-items: flex-start;
            justify-content: flex-start;
            text-align: left;
        }
        body.page-kotc.playevent-mode-playalot .header h1 {
            width: 100%;
            font-size: clamp(16px, 2vw, 26px);
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.page-kotc .countdown-value,
        body.page-playalot .countdown-value {
            margin-top: 8px;
            color: var(--md3-primary-ink);
            font-size: 40px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 1px;
        }
        body.page-kotc .countdown-meta,
        body.page-playalot .countdown-meta {
            margin-top: 8px;
            color: var(--md3-text-muted);
            font-size: 12px;
        }
        body.page-kotc button,
        body.page-playalot button {
            appearance: none;
            border: 1px solid var(--md3-border-primary);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-primary-ink);
            padding: 11px 16px;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
            transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }
        body.page-kotc button:hover:not(:disabled),
        body.page-playalot button:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
            border-color: rgba(4, 157, 240, 0.32);
        }
        body.page-kotc button:active,
        body.page-playalot button:active {
            position: relative;
            top: 1px;
            transform: translateY(0);
        }
        body.page-kotc button:disabled,
        body.page-playalot button:disabled {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(246, 251, 254, 0.55);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: none;
            cursor: not-allowed;
        }
        body.page-kotc button.btn-green,
        body.page-playalot button.btn-green {
            background: #049df0;
            border-color: transparent;
            box-shadow: 0 14px 30px rgba(4, 157, 240, 0.32);
            color: #ffffff;
        }
        body.page-kotc button.btn-red,
        body.page-playalot button.btn-red {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(180, 35, 24, 0.18);
            color: #ff9d9d;
        }
        body.page-kotc button.btn-orange,
        body.page-playalot button.btn-orange {
            background: rgba(227, 255, 98, 0.22);
            border-color: rgba(227, 255, 98, 0.48);
            color: var(--md3-accent-ink);
        }
        body.page-kotc button.btn-main,
        body.page-playalot button.btn-main {
            width: 100%;
            min-height: 56px;
            margin-bottom: 22px;
            padding: 16px 20px;
            border-radius: 20px;
            background: #049df0;
            border-color: transparent;
            box-shadow: 0 16px 34px rgba(4, 157, 240, 0.32);
            color: #ffffff;
            font-size: 18px;
            font-weight: 800;
        }
        body.page-kotc .panel-title-actions .btn-main,
        body.page-playalot .panel-title-actions .btn-main {
            width: auto;
            min-height: 40px;
            margin-bottom: 0;
            padding: 10px 14px;
            border-radius: 18px;
            font-size: 13px;
            line-height: 1.15;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        body.page-kotc input,
        body.page-kotc select,
        body.page-playalot input,
        body.page-playalot select {
            height: 56px;
            margin: 0;
            padding: 0 16px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-text);
            box-shadow: none;
            box-sizing: border-box;
            font-size: 17px;
        }
        body.page-kotc input:focus,
        body.page-kotc select:focus,
        body.page-playalot input:focus,
        body.page-playalot select:focus {
            border-color: var(--md3-primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(4, 157, 240, 0.14);
        }
        body.page-kotc .container,
        body.page-playalot .container {
            max-width: 1360px;
            margin: 0 auto;
            padding: 24px 20px 40px;
        }
        body.page-kotc .dashboard-layout,
        body.page-playalot .dashboard-layout {
            display: flex;
            align-items: stretch;
            gap: 20px;
            width: 100%;
        }
        body.page-kotc .dashboard-left,
        body.page-playalot .dashboard-left {
            box-sizing: border-box;
            display: flex;
            flex: 1 1 70%;
            flex-direction: column;
            gap: 18px;
            min-width: 0;
            width: 70%;
        }
        body.page-kotc .dashboard-right,
        body.page-playalot .dashboard-right {
            box-sizing: border-box;
            display: flex;
            flex: 0 0 30%;
            flex-direction: column;
            gap: 18px;
            min-width: 300px;
            min-height: 0;
            width: 30%;
        }
        body.page-playalot .dashboard-left {
            flex: 1 1 75%;
            width: 75%;
        }
        body.page-playalot .dashboard-right {
            flex: 0 0 25%;
            min-width: 260px;
            width: 25%;
        }
        body.page-kotc .players-panel,
        body.page-playalot .players-panel {
            display: flex;
            flex: 0 0 var(--playevent-players-panel-height, auto);
            flex-direction: column;
            height: var(--playevent-players-panel-height, auto);
            min-height: 0;
            overflow: hidden;
        }
        body.page-kotc .dashboard-tabs,
        body.page-playalot .dashboard-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding: 6px;
            border: 1px solid var(--md3-border);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.05);
            box-shadow: var(--md3-shadow);
            backdrop-filter: blur(18px);
        }
        body.page-kotc .dashboard-tab-btn,
        body.page-playalot .dashboard-tab-btn {
            flex: 1 1 0;
            min-width: 0;
            padding: 12px 14px;
            border-radius: 16px;
            border-color: transparent;
            background: transparent;
            box-shadow: none;
            color: var(--md3-text-muted);
            font-size: 14px;
            font-weight: 800;
        }
        body.page-kotc .dashboard-tab-btn.is-active,
        body.page-playalot .dashboard-tab-btn.is-active {
            background: #049df0;
            color: #ffffff;
            box-shadow: 0 10px 24px rgba(4, 157, 240, 0.28);
        }
        body.page-kotc .dashboard-tab-pane,
        body.page-playalot .dashboard-tab-pane {
            display: none;
        }
        body.page-kotc .dashboard-tab-pane.is-active,
        body.page-playalot .dashboard-tab-pane.is-active {
            display: block;
        }
        body.page-kotc .panel,
        body.page-playalot .panel {
            position: relative;
            overflow: hidden;
            padding: 20px;
            border: 1px solid var(--md3-border);
            border-radius: 24px;
            background: var(--md3-surface);
            box-shadow: var(--md3-shadow);
            backdrop-filter: blur(18px);
        }
        body.page-kotc .panel::before,
        body.page-playalot .panel::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 6px;
            background: var(--md3-accent);
        }
        body.page-kotc .setup-panel,
        body.page-playalot .setup-panel {
            background: var(--md3-surface-strong);
        }
        body.page-kotc .setup-qr-panel,
        body.page-playalot .setup-qr-panel {
            width: 100%;
            display: block;
            margin: 0;
            box-sizing: border-box;
            padding: 12px;
        }
        body.page-kotc .setup-qr-panel .panel-title,
        body.page-playalot .setup-qr-panel .panel-title {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }
        body.page-kotc .panel-title,
        body.page-playalot .panel-title {
            color: var(--md3-primary-ink);
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        body.page-kotc .panel-title-row,
        body.page-playalot .panel-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        body.page-kotc .panel-title-row .panel-title,
        body.page-playalot .panel-title-row .panel-title {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 0;
        }
        body.page-kotc .panel-title-inline,
        body.page-playalot .panel-title-inline {
            flex: 1 1 auto;
            min-width: 0;
        }
        body.page-kotc .panel-title-actions,
        body.page-playalot .panel-title-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }
        body.page-kotc .panel-title-actions button,
        body.page-playalot .panel-title-actions button {
            min-height: 40px;
            padding: 10px 14px;
            white-space: nowrap;
        }
        body.page-kotc .panel-title-action-btn,
        body.page-playalot .panel-title-action-btn {
            font-size: 13px;
            line-height: 1.15;
        }
        body.page-kotc .summary-pill,
        body.page-kotc .code-pill,
        body.page-playalot .summary-pill,
        body.page-playalot .code-pill {
            display: inline-flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(227, 255, 98, 0.22);
            color: var(--md3-accent-ink);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }
        body.page-kotc .qr-preview-box,
        body.page-playalot .qr-preview-box {
            margin-bottom: 0;
            padding: 8px;
            border: 1px solid var(--md3-border);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        body.page-kotc .qr-image,
        body.page-playalot .qr-image {
            display: block;
            width: 132px;
            height: 132px;
            margin: 0 auto 8px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
        }
        body.page-kotc .qr-note,
        body.page-playalot .qr-note {
            margin-bottom: 8px;
            color: var(--md3-text-muted);
            font-size: 13px;
            line-height: 1.35;
        }
        body.page-kotc .qr-tools-toggle-btn,
        body.page-playalot .qr-tools-toggle-btn {
            display: inline-flex;
            align-items: center;
            width: auto;
            min-height: 32px;
            padding: 5px 11px;
            border: 1px solid var(--md3-border-primary);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            box-shadow: none;
            color: var(--md3-primary);
            font-size: 12px;
            font-weight: 800;
        }
        body.page-kotc .qr-tools-panel,
        body.page-playalot .qr-tools-panel {
            margin-top: 10px;
        }
        body.page-kotc .qr-tools-panel .registration-actions,
        body.page-playalot .qr-tools-panel .registration-actions {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 10px;
        }
        body.page-kotc .sync-status,
        body.page-playalot .sync-status {
            margin: 8px 0 14px;
            padding: 10px 12px;
            border: 1px solid var(--md3-border);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-text-muted);
            font-size: 13px;
            line-height: 1.5;
        }
        body.page-kotc .sync-status.is-error,
        body.page-playalot .sync-status.is-error {
            background: rgba(255, 243, 245, 0.88);
            border-color: rgba(180, 35, 24, 0.18);
            color: #ff9d9d;
        }
        body.page-kotc .sync-status.is-success,
        body.page-playalot .sync-status.is-success {
            background: rgba(227, 255, 98, 0.24);
            border-color: rgba(227, 255, 98, 0.48);
            color: var(--md3-accent-ink);
        }
        body.page-kotc .court-card,
        body.page-playalot .court-card {
            position: relative;
            overflow: hidden;
            padding: 16px;
            border: 1px solid var(--md3-border-primary);
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: var(--md3-shadow);
        }
        body.page-playalot .mix-again-btn {
            width: auto;
            margin: 0;
            padding: 3px 8px;
            min-height: 28px;
            white-space: nowrap;
            flex: 0 0 auto;
            font-size: 10px;
            line-height: 1.1;
        }
        body.page-playalot .mix-again-btn:hover:not(:disabled) {
            box-shadow: none;
        }
        body.page-playalot .mix-again-btn:disabled {
            box-shadow: none;
        }
        body.page-kotc .court-header-left,
        body.page-playalot .court-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1 1 auto;
        }
        body.page-kotc .court-header-right,
        body.page-playalot .court-header-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex: 0 0 auto;
            min-width: 0;
        }
        body.page-kotc .court-card::before,
        body.page-playalot .court-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 5px;
            background: var(--md3-primary);
        }
        body.page-kotc .court-card.playing,
        body.page-playalot .court-card.playing {
            border-color: rgba(4, 157, 240, 0.32);
            background: rgba(255, 255, 255, 0.07);
            box-shadow: var(--md3-shadow-strong);
        }
        body.page-kotc .courts-grid,
        body.page-playalot .courts-grid {
            --court-card-basis: calc(25% - 11px);
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 0;
        }
        body.page-kotc .courts-grid .court-card,
        body.page-playalot .courts-grid .court-card {
            box-sizing: border-box;
            display: flex;
            flex: 1 1 var(--court-card-basis);
            flex-direction: column;
            margin: 0;
            min-width: 180px;
        }
        body.page-kotc .courts-grid .empty-state,
        body.page-playalot .courts-grid .empty-state {
            flex: 1 1 100%;
            font-size: 14px;
            margin: 0;
        }
        body.page-kotc .court-header,
        body.page-playalot .court-header {
            margin-bottom: 12px;
            color: var(--md3-primary-ink);
            font-size: 18px;
            font-weight: 800;
        }
        body.page-kotc .court-header,
        body.page-playalot .court-header {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 6px;
            min-width: 0;
            white-space: nowrap;
        }
        body.page-kotc .court-header-left,
        body.page-playalot .court-header-left {
            gap: 8px;
            flex: 0 0 auto;
            min-width: max-content;
            white-space: nowrap;
        }
        body.page-kotc .court-header-right,
        body.page-playalot .court-header-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 1 1 auto;
            flex-wrap: nowrap;
            gap: 4px;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        body.page-kotc .court-header-right > *,
        body.page-playalot .court-header-right > * {
            flex: 0 0 auto;
        }
        body.page-kotc .court-badge,
        body.page-playalot .court-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(4, 157, 240, 0.14);
            color: var(--md3-primary-ink);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }
        body.page-kotc .court-timer,
        body.page-playalot .court-timer {
            float: right;
            font-family: var(--dal-font-mono);
            font-size: 18px;
            font-weight: 800;
            color: var(--md3-primary);
            background: rgba(4, 157, 240, 0.14);
            border: 1px solid rgba(4, 157, 240, 0.18);
            padding: 4px 8px;
            border-radius: 999px;
        }
        body.page-playalot .court-timer {
            float: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 3px 8px;
            font-size: 10px;
            line-height: 1.1;
        }
        body.page-kotc .team-box,
        body.page-playalot .team-box {
            padding: 12px;
            border: 1px solid var(--md3-border);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        body.page-kotc .team-box-label,
        body.page-playalot .team-box-label {
            color: var(--md3-text-muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        body.page-kotc .team-pair-tag,
        body.page-playalot .team-pair-tag {
            background: rgba(4, 157, 240, 0.14);
            border: 1px solid rgba(4, 157, 240, 0.16);
            color: var(--md3-primary);
        }
        body.page-kotc .player-picker-btn,
        body.page-playalot .player-picker-btn {
            width: 100%;
            margin: 0 0 8px;
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-text);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            text-align: center;
        }
        body.page-kotc .player-picker-btn:hover,
        body.page-playalot .player-picker-btn:hover {
            border-color: rgba(4, 157, 240, 0.28);
            box-shadow: 0 10px 20px rgba(4, 157, 240, 0.14);
        }
        body.page-kotc .player-picker-label,
        body.page-playalot .player-picker-label,
        body.page-kotc .player-picker-meta,
        body.page-playalot .player-picker-meta {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
            width: 100%;
            text-align: center;
        }
        body.page-kotc .player-picker-label,
        body.page-playalot .player-picker-label {
            color: var(--md3-primary-ink);
            font-size: 15px;
            font-weight: 800;
            line-height: 1.25;
        }
        body.page-kotc .player-picker-meta,
        body.page-playalot .player-picker-meta {
            margin-top: 3px;
            color: var(--md3-text-muted);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .court-slot-player-line,
        body.page-playalot .court-slot-player-line {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            gap: 2px 5px;
            width: 100%;
            color: var(--md3-text-muted);
            font-size: 11px;
            font-weight: 800;
            line-height: 1.2;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
        }
        body.page-kotc .court-slot-player-line > span:not(.court-slot-player-separator),
        body.page-playalot .court-slot-player-line > span:not(.court-slot-player-separator) {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.page-kotc .court-slot-player-main,
        body.page-playalot .court-slot-player-main {
            color: var(--md3-primary-ink);
            font-size: 12px;
            font-weight: 900;
        }
        body.page-kotc .court-slot-player-record,
        body.page-playalot .court-slot-player-record {
            color: var(--md3-text-muted);
            font-size: 11px;
        }
        body.page-kotc .court-slot-player-separator,
        body.page-playalot .court-slot-player-separator {
            color: rgba(246, 251, 254, 0.35);
            font-weight: 800;
        }
        body.page-kotc .team-player-summary,
        body.page-playalot .team-player-summary {
            margin: 6px 0;
            padding: 8px 6px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.06);
        }
        body.page-kotc .waiting-card-list,
        body.page-playalot .waiting-card-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
        }
        body.page-kotc .waiting-card,
        body.page-playalot .waiting-card {
            position: relative;
            display: block;
            min-height: 118px;
            padding: 12px;
            border: 1px solid var(--md3-border);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-text);
            box-shadow: var(--md3-shadow);
        }
        body.page-kotc .waiting-card::before,
        body.page-playalot .waiting-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: var(--md3-accent);
        }
        body.page-kotc .waiting-card.next-up,
        body.page-playalot .waiting-card.next-up {
            border-color: rgba(4, 157, 240, 0.32);
            background: rgba(255, 255, 255, 0.06);
        }
        body.page-kotc .waiting-card.paused-card,
        body.page-playalot .waiting-card.paused-card {
            background: rgba(255, 255, 255, 0.05);
            border-style: dashed;
            box-shadow: none;
            color: var(--md3-text-muted);
        }
        body.page-kotc .waiting-card-top,
        body.page-playalot .waiting-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }
        body.page-kotc .waiting-card-top-left,
        body.page-playalot .waiting-card-top-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
        }
        body.page-kotc .waiting-card .queue-num,
        body.page-playalot .waiting-card .queue-num {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            margin: 0;
            padding: 4px 8px;
            border-radius: 999px;
            background: var(--md3-primary-ink);
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.3px;
        }
        body.page-kotc .next-up-label,
        body.page-playalot .next-up-label {
            color: var(--md3-primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        body.page-kotc .waiting-card .waiting-name,
        body.page-playalot .waiting-card .waiting-name {
            display: block;
            margin: 0 0 5px;
            color: var(--md3-primary-ink);
            font-size: 17px;
            font-weight: 800;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        body.page-kotc .waiting-rating,
        body.page-playalot .waiting-rating {
            margin-bottom: 10px;
            color: var(--md3-text-muted);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .waiting-meta,
        body.page-playalot .waiting-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            padding-top: 9px;
            border-top: 1px solid rgba(16, 42, 67, 0.08);
            color: var(--md3-text-muted);
            font-size: 12px;
            font-weight: 800;
            line-height: 1.25;
            white-space: nowrap;
        }
        body.page-kotc .waiting-meta-separator,
        body.page-playalot .waiting-meta-separator {
            color: rgba(16, 42, 67, 0.32);
            font-weight: 600;
        }
        body.page-kotc .waiting-card .wait-timer,
        body.page-playalot .waiting-card .wait-timer {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            min-height: 24px;
            margin-left: auto;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(227, 255, 98, 0.24);
            border: 1px solid rgba(227, 255, 98, 0.48);
            color: var(--md3-accent-ink);
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.2px;
        }
        body.page-kotc .players-panel-body,
        body.page-playalot .players-panel-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding-right: 6px;
            scrollbar-gutter: stable;
        }
        body.page-kotc .players-panel .players-panel-body,
        body.page-playalot .players-panel .players-panel-body {
            min-height: 0;
        }
        body.page-kotc .players-panel-body .empty-state,
        body.page-playalot .players-panel-body .empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            box-sizing: border-box;
        }
        body.page-kotc .players-card-list,
        body.page-playalot .players-card-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 12px;
        }
        body.page-kotc .player-card,
        body.page-playalot .player-card {
            position: relative;
            display: block;
            min-height: 134px;
            padding: 12px;
            border: 1px solid var(--md3-border);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--md3-text);
            box-shadow: var(--md3-shadow);
        }
        body.page-kotc .player-card::before,
        body.page-playalot .player-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: var(--md3-primary);
        }
        body.page-kotc .player-card.is-paused,
        body.page-playalot .player-card.is-paused {
            background: rgba(255, 255, 255, 0.05);
            border-style: dashed;
            box-shadow: none;
            color: var(--md3-text-muted);
        }
        body.page-kotc .player-card-top,
        body.page-playalot .player-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }
        body.page-kotc .player-card-rank-name,
        body.page-playalot .player-card-rank-name {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            flex: 1 1 auto;
            min-width: 0;
        }
        body.page-kotc .player-card-inline-name,
        body.page-playalot .player-card-inline-name {
            min-width: 0;
            overflow: hidden;
            color: var(--md3-primary-ink);
            font-size: 16px;
            font-weight: 900;
            line-height: 1.1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.page-kotc .player-card-state,
        body.page-playalot .player-card-state {
            flex: 0 0 auto;
            color: var(--md3-primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        body.page-kotc .player-card.is-paused .player-card-state,
        body.page-playalot .player-card.is-paused .player-card-state {
            color: #c03d49;
        }
        body.page-kotc .player-card-name,
        body.page-playalot .player-card-name {
            display: block;
            margin: 0 0 5px;
            color: var(--md3-primary-ink);
            font-size: 17px;
            font-weight: 800;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }
        body.page-kotc .player-card-gender,
        body.page-playalot .player-card-gender {
            color: var(--md3-text-muted);
            font-size: 13px;
            font-weight: 700;
        }
        body.page-kotc .player-card-rating,
        body.page-playalot .player-card-rating {
            margin-bottom: 10px;
            color: var(--md3-text-muted);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.35;
        }
        body.page-kotc .player-card-identity,
        body.page-playalot .player-card-identity {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            margin: 0 0 10px;
            color: var(--md3-primary-ink);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.2;
            white-space: nowrap;
        }
        body.page-kotc .player-card-identity-extra,
        body.page-playalot .player-card-identity-extra {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.page-kotc .player-card-identity-gender,
        body.page-playalot .player-card-identity-gender,
        body.page-kotc .player-card-identity-extra,
        body.page-playalot .player-card-identity-extra,
        body.page-kotc .player-card-identity .player-card-meta-separator,
        body.page-playalot .player-card-identity .player-card-meta-separator {
            font-weight: 400;
        }
        body.page-kotc .player-card-meta,
        body.page-playalot .player-card-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            padding-top: 9px;
            border-top: 1px solid rgba(16, 42, 67, 0.08);
            color: var(--md3-text-muted);
            font-size: 13px;
            font-weight: 800;
        }
        body.page-kotc .player-card-meta-separator,
        body.page-playalot .player-card-meta-separator {
            color: rgba(16, 42, 67, 0.32);
            font-weight: 600;
        }
        body.page-kotc .player-card-actions,
        body.page-playalot .player-card-actions {
            display: flex;
            gap: 6px;
            margin-top: 10px;
        }
        body.page-kotc .player-card-actions .mini-btn,
        body.page-playalot .player-card-actions .mini-btn {
            flex: 1 1 0;
            min-width: 0;
            margin-right: 0;
            width: auto;
        }
        body.page-kotc .history-card,
        body.page-playalot .history-card {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--md3-border);
            border-radius: 20px;
            box-shadow: var(--md3-shadow);
        }
        body.page-kotc .history-card-top,
        body.page-playalot .history-card-top {
            padding: 12px 12px 10px;
        }
        body.page-kotc .history-export-btn,
        body.page-playalot .history-export-btn,
        body.page-kotc .history-edit-btn,
        body.page-playalot .history-edit-btn,
        body.page-kotc .mini-btn,
        body.page-playalot .mini-btn {
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--md3-border-primary);
            color: var(--md3-primary);
            box-shadow: none;
        }
        body.page-kotc .empty-state,
        body.page-playalot .empty-state {
            padding: 36px 16px;
            border-radius: 18px;
            background: transparent;
            color: var(--md3-text-muted);
            font-size: 14px;
        }
        body.page-kotc #customModalOverlay,
        body.page-kotc #editModalOverlay,
        body.page-kotc #playerPickerModalOverlay,
        body.page-playalot #customModalOverlay,
        body.page-playalot #editModalOverlay,
        body.page-playalot #playerPickerModalOverlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(16, 42, 67, 0.72);
            backdrop-filter: blur(12px);
            z-index: 9999;
        }
        body.page-kotc .custom-modal,
        body.page-playalot .custom-modal {
            width: 92%;
            max-width: 460px;
            margin: 40px auto;
            padding: 24px 22px;
            text-align: center;
            border: 1px solid var(--md3-border);
            border-radius: 28px;
            background: rgba(8, 20, 34, 0.6);
            box-shadow: var(--md3-shadow-strong);
        }
        body.page-kotc .player-picker-modal,
        body.page-playalot .player-picker-modal {
            width: min(920px, 100%);
            max-width: 920px;
            text-align: left;
        }
        body.page-kotc .mode-playalot-only,
        body.page-kotc .mode-kotc-only {
            display: none;
        }
        body.playevent-mode-playalot .mode-playalot-only,
        body.playevent-mode-kotc .mode-kotc-only {
            display: block;
        }
        @media screen and (max-width: 820px) {
            body.page-kotc .header-inner,
            body.page-playalot .header-inner {
                flex-direction: column;
                gap: 14px;
            }
            body.page-kotc .header-countdown,
            body.page-playalot .header-countdown {
                width: 100%;
                margin-left: 0;
            }
            body.page-kotc .container,
            body.page-playalot .container {
                padding: 18px 14px 28px;
            }
            body.page-kotc .dashboard-layout,
            body.page-playalot .dashboard-layout {
                flex-direction: column;
            }
            body.page-kotc .dashboard-left,
            body.page-playalot .dashboard-left,
            body.page-kotc .dashboard-right,
            body.page-playalot .dashboard-right {
                width: 100%;
                min-width: 0;
            }
            body.page-kotc .dashboard-tabs,
            body.page-playalot .dashboard-tabs {
                padding: 4px;
            }
            body.page-kotc .panel,
            body.page-playalot .panel {
                padding: 18px;
            }
            body.page-kotc .panel-title-row,
            body.page-playalot .panel-title-row {
                align-items: stretch;
                flex-direction: column;
            }
            body.page-kotc .panel-title-actions,
            body.page-playalot .panel-title-actions {
                justify-content: stretch;
            }
            body.page-kotc .panel-title-actions button,
            body.page-playalot .panel-title-actions button,
            body.page-kotc .btn-main,
            body.page-playalot .btn-main {
                width: 100%;
            }
            body.page-kotc .registration-actions,
            body.page-playalot .registration-actions,
            body.page-kotc .player-form-row,
            body.page-playalot .player-form-row,
            body.page-kotc .court-actions-row.has-auto,
            body.page-playalot .court-actions-row.has-auto {
                grid-template-columns: 1fr;
            }
            body.page-kotc .history-tools,
            body.page-playalot .history-tools {
                justify-content: stretch;
            }
            body.page-kotc .history-tools input,
            body.page-playalot .history-tools input,
            body.page-kotc .history-tools button,
            body.page-playalot .history-tools button,
            body.page-kotc .encounter-checker select,
            body.page-playalot .encounter-checker select {
                width: 100%;
            }
            body.page-kotc .courts-grid,
            body.page-playalot .courts-grid {
                --court-card-basis: 100%;
            }
            body.page-kotc .qr-image,
            body.page-playalot .qr-image {
                width: 100%;
                max-width: 240px;
                height: auto;
            }
            body.page-kotc .header h1,
            body.page-playalot .header h1 {
                font-size: 26px;
            }
            body.page-kotc .countdown-value,
            body.page-playalot .countdown-value {
                font-size: 32px;
            }
        }

/* =========================================================
   eventregister.html (page-kotc-registration-page)
   ========================================================= */
body.page-kotc-registration-page {
    --md3-primary: #1cabe2;
    --md3-primary-container: rgba(28, 171, 226, 0.12);
    --md3-primary-ink: #102a43;
    --md3-secondary: #e3ff62;
    --md3-secondary-container: rgba(227, 255, 98, 0.22);
    --md3-secondary-ink: #435100;
    --md3-surface: rgba(255, 255, 255, 0.78);
    --md3-surface-2: rgba(255, 255, 255, 0.88);
    --md3-surface-3: #f4fbff;
    --md3-outline: rgba(16, 42, 67, 0.10);
    --md3-outline-strong: rgba(28, 171, 226, 0.20);
    --md3-text: #102a43;
    --md3-text-muted: #6b7a8c;
    --md3-shadow: 0 16px 40px rgba(16, 42, 67, 0.08);
    --md3-shadow-strong: 0 20px 60px rgba(16, 42, 67, 0.10);
    font-family: var(--dal-font);
    background: #f6fbfe;
    color: var(--md3-text);
    margin: 0;
    padding: 20px 14px 30px;
    min-height: 100vh;
    accent-color: var(--md3-primary);
}
body.page-kotc-registration-page .page {
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding-bottom: 172px;
}
body.page-kotc-registration-page .landing-media {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #071220;
}
body.page-kotc-registration-page .landing-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.08) contrast(1.05) brightness(0.72);
    transform: scale(1.02);
}
body.page-kotc-registration-page .landing-video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 11, 20, 0.38) 0%, rgba(4, 11, 20, 0.52) 55%, rgba(4, 11, 20, 0.72) 100%),
        radial-gradient(circle at 50% 35%, rgba(28, 171, 226, 0.15), transparent 34%),
        radial-gradient(circle at 18% 24%, rgba(191, 232, 0, 0.12), transparent 22%);
}
body.page-kotc-registration-page .landing-video-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.7;
    mix-blend-mode: screen;
}
body.page-kotc-registration-page .landing-video-glow-a {
    width: 42vw;
    height: 42vw;
    left: -14vw;
    top: 10vh;
    background: radial-gradient(circle, rgba(28, 171, 226, 0.28) 0%, rgba(28, 171, 226, 0) 72%);
}
body.page-kotc-registration-page .landing-video-glow-b {
    width: 34vw;
    height: 34vw;
    right: -12vw;
    bottom: 12vh;
    background: radial-gradient(circle, rgba(191, 232, 0, 0.18) 0%, rgba(191, 232, 0, 0) 72%);
}
body.page-kotc-registration-page .hero {
    --hero-logo-size: clamp(192px, 34vw, 292px);
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(560px, calc(100vw - 24px));
    background: transparent;
    color: #ffffff;
    border-radius: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
    text-align: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.page-kotc-registration-page .hero::before {
    content: none;
}
body.page-kotc-registration-page .hero-logo-mark {
    display: block;
    width: var(--hero-logo-size);
    max-width: min(80vw, 320px);
    height: auto;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.28));
}
body.page-kotc-registration-page .hero h1 {
    margin: 0;
    font-size: clamp(48px, 10vw, 74px);
    line-height: 0.96;
    color: #ffffff;
    letter-spacing: -0.05em;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
}
body.page-kotc-registration-page .hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
body.page-kotc-registration-page .event-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--md3-text);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
    box-shadow: 0 14px 32px rgba(6, 15, 30, 0.16);
}
body.page-kotc-registration-page button.event-pill {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(28, 171, 226, 0.20);
    cursor: pointer;
    font: inherit;
}
body.page-kotc-registration-page button.event-pill:focus-visible {
    outline: 2px solid rgba(191, 232, 0, 0.8);
    outline-offset: 3px;
}
body.page-kotc-registration-page .event-code-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    border: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}
body.page-kotc-registration-page .event-code-pill:hover {
    opacity: 0.94;
    transform: translateY(-1px);
}
body.page-kotc-registration-page .event-code-pill:active {
    transform: translateY(0);
}
body.page-kotc-registration-page .event-code-pill.is-empty {
    color: rgba(255, 255, 255, 0.92);
}
body.page-kotc-registration-page .event-code-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    font-weight: 700;
}
body.page-kotc-registration-page .event-code-edit-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    font-weight: 500;
}
body.page-kotc-registration-page .event-code-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1;
}
body.page-kotc-registration-page .card {
    display: none;
}
body.page-kotc-registration-page .card.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    overflow: auto;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(28, 171, 226, 0.12) 0%, rgba(28, 171, 226, 0) 34%),
        radial-gradient(circle at 92% 12%, rgba(227, 255, 98, 0.28) 0%, rgba(227, 255, 98, 0) 25%),
        #ffffff;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
body.page-kotc-registration-page .card.is-open::before {
    content: "";
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--md3-secondary) 0%, var(--md3-primary) 100%);
}
body.page-kotc-registration-page .card-title {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--md3-text);
}
body.page-kotc-registration-page .card-subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--md3-text-muted);
}
body.page-kotc-registration-page .status-box {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(28, 171, 226, 0.16);
    background: rgba(28, 171, 226, 0.08);
    color: #20415f;
    font-size: 14px;
    line-height: 1.5;
}
body.page-kotc-registration-page .status-box.is-error {
    background: rgba(198, 61, 74, 0.08);
    border-color: rgba(198, 61, 74, 0.16);
    color: #a23a49;
}
body.page-kotc-registration-page .status-box.is-success {
    background: rgba(227, 255, 98, 0.22);
    border-color: rgba(227, 255, 98, 0.32);
    color: var(--md3-secondary-ink);
}
body.page-kotc-registration-page .landing-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.page-kotc-registration-page .account-box {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--md3-outline);
    background: var(--md3-surface);
    box-shadow: var(--md3-shadow);
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .account-box::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--md3-secondary);
}
body.page-kotc-registration-page .account-box-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
body.page-kotc-registration-page .account-copy {
    min-width: 0;
}
body.page-kotc-registration-page .account-label {
    margin-bottom: 6px;
    color: var(--md3-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
body.page-kotc-registration-page .account-value {
    color: var(--md3-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}
body.page-kotc-registration-page .switch-account-btn {
    width: auto;
    min-width: 132px;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--md3-primary);
    border-color: rgba(28, 171, 226, 0.28);
    box-shadow: none;
    font-size: 14px;
}
body.page-kotc-registration-page .google-button-wrap {
    min-height: 44px;
    min-width: min(320px, 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 10px 16px rgba(14, 42, 80, 0.12));
}
body.page-kotc-registration-page .join-start-btn,
body.page-kotc-registration-page .dialog-actions button {
    width: auto;
    min-width: 150px;
    min-height: 56px;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(28, 171, 226, 0.34);
}
body.page-kotc-registration-page .landing-actions .join-start-btn {
    width: min(360px, calc(100vw - 32px));
    min-width: 0;
    min-height: 62px;
    font-size: 18px;
    letter-spacing: 0.2px;
    border-radius: 22px;
}
body.page-kotc-registration-page .join-start-btn,
body.page-kotc-registration-page .dialog-btn-primary,
body.page-kotc-registration-page #registerButton,
body.page-kotc-registration-page #emailLookupButton,
body.page-kotc-registration-page #startJoinButton,
body.page-kotc-registration-page #openExternalBrowserButton {
    background: var(--md3-primary);
    color: #ffffff;
    border-color: var(--md3-primary);
}
body.page-kotc-registration-page.is-white-mode {
    background: #000000;
}
body.page-kotc-registration-page.is-white-mode .page {
    justify-content: flex-start;
    padding-bottom: 30px;
}
body.page-kotc-registration-page.is-white-mode .landing-media {
    opacity: 1;
    visibility: visible;
}
body.page-kotc-registration-page.is-white-mode .landing-video {
    filter: saturate(1.04) contrast(1.04) brightness(0.90);
}
body.page-kotc-registration-page.is-white-mode .landing-video-overlay {
    background:
        linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)),
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.18), transparent 28%),
        radial-gradient(circle at 16% 22%, rgba(28, 171, 226, 0.16), transparent 26%),
        radial-gradient(circle at 92% 8%, rgba(227, 255, 98, 0.12), transparent 22%);
}
body.page-kotc-registration-page.is-white-mode .landing-video-glow {
    opacity: 0.38;
}
body.page-kotc-registration-page .dialog-btn-secondary,
body.page-kotc-registration-page .secondary-button {
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--md3-primary);
    border-color: rgba(28, 171, 226, 0.28);
    box-shadow: none;
}
body.page-kotc-registration-page label {
    display: block;
    margin-bottom: 6px;
    color: var(--md3-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
body.page-kotc-registration-page input,
body.page-kotc-registration-page select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--md3-outline);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--md3-text);
    box-shadow: none;
    font-size: 17px;
}
body.page-kotc-registration-page select {
    min-height: 48px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--md3-text-muted) 50%), linear-gradient(135deg, var(--md3-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
}
body.page-kotc-registration-page .country-select {
    font-weight: 700;
    letter-spacing: 0.1px;
}
body.page-kotc-registration-page .country-select.is-placeholder {
    color: #7a8ea2;
    font-weight: 600;
}
body.page-kotc-registration-page input:focus,
body.page-kotc-registration-page select:focus {
    border-color: var(--md3-primary);
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(28, 171, 226, 0.14);
}
body.page-kotc-registration-page button {
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    border: 1px solid var(--md3-primary);
    border-radius: 20px;
    background: var(--md3-primary);
    color: #ffffff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 14px 30px rgba(28, 171, 226, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
body.page-kotc-registration-page button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(28, 171, 226, 0.30);
}
body.page-kotc-registration-page button:active {
    transform: translateY(1px);
}
body.page-kotc-registration-page button:disabled {
    background: #e3ebf2;
    color: #7a8796;
    border-color: #e3ebf2;
    box-shadow: none;
    cursor: not-allowed;
}
body.page-kotc-registration-page .field-display {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--md3-outline);
    border-radius: 22px;
    background: var(--md3-surface);
    box-shadow: var(--md3-shadow);
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .field-display::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--md3-secondary);
}
body.page-kotc-registration-page .field-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
body.page-kotc-registration-page .field-title {
    display: inline-block;
    color: var(--md3-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
body.page-kotc-registration-page .field-optional {
    color: #7a8ea2;
    font-weight: 600;
}
body.page-kotc-registration-page .field-edit-btn {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--md3-primary);
    border-color: rgba(28, 171, 226, 0.28);
    box-shadow: none;
    font-size: 16px;
    line-height: 1;
}
body.page-kotc-registration-page .field-value {
    color: var(--md3-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .field-value.is-name {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0;
}
body.page-kotc-registration-page .loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 20, 34, 0.5);
    backdrop-filter: blur(6px);
}
body.page-kotc-registration-page .loading-overlay.is-visible {
    display: flex;
}
body.page-kotc-registration-page .loading-popup {
    position: relative;
    overflow: hidden;
    width: min(320px, calc(100vw - 36px));
    padding: 28px 22px 24px;
    border-radius: 28px;
    background: rgba(8, 20, 34, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--md3-shadow-strong);
    text-align: center;
    color: #ffffff;
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
}
body.page-kotc-registration-page .loading-popup::before {
    content: none;
}
body.page-kotc-registration-page .loading-logo-wrap {
    width: clamp(136px, 38vw, 184px);
    height: clamp(136px, 38vw, 184px);
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: dalLoadingBounce 1.35s ease-in-out infinite;
}
body.page-kotc-registration-page .loading-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 16px 30px rgba(16, 42, 67, 0.16));
    mix-blend-mode: screen;
}
body.page-kotc-registration-page .loading-title {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}
body.page-kotc-registration-page .loading-message {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
@keyframes dalLoadingBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}
body.page-kotc-registration-page .note {
    margin-top: 14px;
    color: var(--md3-text-muted);
    font-size: 13px;
    line-height: 1.6;
}
body.page-kotc-registration-page .join-modal-shell {
    position: relative;
    width: min(620px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px 18px calc(118px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.page-kotc-registration-page .join-modal-shell::before {
    content: "";
    position: absolute;
    top: 84px;
    right: -120px;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.86) 0 9px, transparent 10px),
        radial-gradient(circle at 62% 42%, rgba(255, 255, 255, 0.72) 0 7px, transparent 8px),
        radial-gradient(circle at 42% 68%, rgba(255, 255, 255, 0.66) 0 8px, transparent 9px),
        rgba(227, 255, 98, 0.28);
    opacity: 0.9;
    pointer-events: none;
}
body.page-kotc-registration-page .join-modal-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 -18px;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 74%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.page-kotc-registration-page .join-modal-title-block {
    min-width: 0;
}
body.page-kotc-registration-page .join-modal-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .join-modal-title-block h2 {
    margin: 0;
    color: var(--md3-text);
    font-size: clamp(42px, 9vw, 64px);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.94;
}
body.page-kotc-registration-page button.join-modal-close {
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(28, 171, 226, 0.18);
    background: #ffffff;
    color: var(--md3-text);
    box-shadow: 0 12px 24px rgba(16, 42, 67, 0.08);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}
body.page-kotc-registration-page button.join-modal-close:not(:disabled):hover {
    transform: none;
    box-shadow: 0 14px 28px rgba(16, 42, 67, 0.10);
}
body.page-kotc-registration-page button.join-modal-event-code {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(28, 171, 226, 0.14);
    background: rgba(246, 251, 254, 0.92);
    color: var(--md3-text);
    box-shadow: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    text-align: left;
}
body.page-kotc-registration-page button.join-modal-event-code:not(:disabled):hover {
    transform: none;
    box-shadow: 0 12px 28px rgba(16, 42, 67, 0.06);
}
body.page-kotc-registration-page .join-modal-event-code span:first-child {
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
body.page-kotc-registration-page .join-modal-event-code strong {
    min-width: 0;
    color: var(--md3-primary);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .join-modal-event-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--md3-primary);
    box-shadow: inset 0 0 0 1px rgba(28, 171, 226, 0.12);
}
body.page-kotc-registration-page .join-stepper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
body.page-kotc-registration-page .join-step {
    min-height: 42px;
    padding: 0 8px 8px;
    border-radius: 16px;
    border: 1px solid rgba(16, 42, 67, 0.08);
    background: rgba(246, 251, 254, 0.78);
    color: var(--md3-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}
body.page-kotc-registration-page .join-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--md3-text-muted);
    font-size: 11px;
    font-weight: 900;
}
body.page-kotc-registration-page .join-step.is-active {
    border-color: rgba(28, 171, 226, 0.30);
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .join-step.is-active .join-step-dot {
    background: var(--md3-primary);
    color: #ffffff;
}
body.page-kotc-registration-page .join-step.is-done {
    border-color: rgba(190, 230, 40, 0.45);
    background: rgba(227, 255, 98, 0.24);
    color: var(--md3-secondary-ink);
}
body.page-kotc-registration-page .join-step.is-done .join-step-dot {
    background: var(--md3-secondary);
    color: var(--md3-secondary-ink);
}
body.page-kotc-registration-page .card.is-open .status-box {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 18px;
}
body.page-kotc-registration-page .join-modal-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.page-kotc-registration-page .join-modal-section {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid rgba(28, 171, 226, 0.12);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px rgba(16, 42, 67, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .join-modal-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--md3-secondary) 0%, var(--md3-primary) 100%);
}
body.page-kotc-registration-page .join-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
body.page-kotc-registration-page .join-section-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--md3-text);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}
body.page-kotc-registration-page .join-section-head h3 {
    margin: 0;
    color: var(--md3-text);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}
body.page-kotc-registration-page .join-email-input {
    display: grid;
    gap: 8px;
}
body.page-kotc-registration-page .join-modal-form label {
    margin-bottom: 2px;
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.page-kotc-registration-page .join-modal-form input,
body.page-kotc-registration-page .join-modal-form select {
    margin-bottom: 0;
    min-height: 54px;
    border-radius: 16px;
    border-color: rgba(28, 171, 226, 0.16);
    background: #f8fcff;
    color: var(--md3-text);
    font-size: 17px;
    font-weight: 800;
}
body.page-kotc-registration-page .join-modal-form input::placeholder {
    color: rgba(107, 122, 140, 0.72);
    font-weight: 700;
}
body.page-kotc-registration-page .join-modal-form .account-box {
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: #f8fcff;
    box-shadow: none;
}
body.page-kotc-registration-page .join-modal-form .account-box::before,
body.page-kotc-registration-page .join-modal-form .field-display::before {
    content: none;
}
body.page-kotc-registration-page .join-modal-form .account-box-head {
    align-items: center;
}
body.page-kotc-registration-page .join-modal-form .account-value {
    color: var(--md3-text);
    font-size: 16px;
    font-weight: 900;
}
body.page-kotc-registration-page .join-modal-form .switch-account-btn {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 14px;
    background: #ffffff;
    color: var(--md3-primary);
    box-shadow: none;
    font-size: 13px;
}
body.page-kotc-registration-page .join-fields-grid {
    display: grid;
    gap: 14px;
}
body.page-kotc-registration-page .join-modal-form .field-display {
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: #f8fcff;
    box-shadow: none;
}
body.page-kotc-registration-page .join-modal-form .field-header {
    align-items: center;
    margin-bottom: 6px;
}
body.page-kotc-registration-page .join-modal-form .field-title,
body.page-kotc-registration-page .join-modal-form .field-optional {
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.page-kotc-registration-page .join-modal-form .field-value {
    color: var(--md3-text);
    font-size: 19px;
    font-weight: 900;
}
body.page-kotc-registration-page .join-modal-form .field-edit-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 14px;
    background: #ffffff;
    color: var(--md3-primary);
    box-shadow: none;
}
body.page-kotc-registration-page .join-modal-form #emailLookupButton,
body.page-kotc-registration-page .join-modal-form #registerButton {
    width: 100%;
    min-height: 56px;
    border-radius: 18px;
    background: var(--md3-primary);
    border-color: var(--md3-primary);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(28, 171, 226, 0.26);
}
body.page-kotc-registration-page .join-modal-form #emailLookupButton {
    margin-top: 6px;
}
body.page-kotc-registration-page .join-modal-bottom {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 10px -16px -16px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 24%, #ffffff 100%);
}
body.page-kotc-registration-page .join-modal-form #registerButton {
    min-height: 60px;
    font-size: 18px;
    font-weight: 900;
}
body.page-kotc-registration-page .join-modal-bottom .note {
    max-width: 360px;
    margin: 10px auto 0;
    text-align: center;
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
@media screen and (min-width: 640px) {
    body.page-kotc-registration-page .join-modal-shell {
        padding: 30px 22px calc(124px + env(safe-area-inset-bottom, 0px));
    }
    body.page-kotc-registration-page .join-modal-header {
        margin: 0 -22px;
        padding-right: 22px;
        padding-left: 22px;
    }
    body.page-kotc-registration-page .join-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.page-kotc-registration-page .join-fields-grid #displayNameInputBox,
    body.page-kotc-registration-page .join-fields-grid #displayNameDisplayBox {
        grid-column: 1 / -1;
    }
    body.page-kotc-registration-page .join-modal-bottom {
        margin-right: -16px;
        margin-left: -16px;
    }
}
body.page-kotc-registration-page .guest-dialog {
    width: min(460px, calc(100vw - 28px));
    padding: 0;
    border: none;
    border-radius: 28px;
    box-shadow: var(--md3-shadow-strong);
    background: var(--md3-surface);
}
body.page-kotc-registration-page .guest-dialog::backdrop {
    background: rgba(8, 20, 34, 0.42);
    backdrop-filter: blur(3px);
}
body.page-kotc-registration-page .guest-dialog-card {
    padding: 22px 18px 18px;
}
body.page-kotc-registration-page .guest-dialog-title {
    margin: 0 0 8px;
    color: var(--md3-text);
    font-size: 22px;
}
body.page-kotc-registration-page .guest-dialog-subtitle {
    margin: 0 0 18px;
    color: var(--md3-text-muted);
    font-size: 14px;
    line-height: 1.6;
}
body.page-kotc-registration-page .dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}
body.page-kotc-registration-page .external-browser-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 20, 34, 0.56);
    backdrop-filter: blur(5px);
}
body.page-kotc-registration-page .external-browser-card {
    position: relative;
    overflow: hidden;
    width: min(420px, calc(100vw - 36px));
    padding: 22px 18px;
    border-radius: 28px;
    background: var(--md3-surface);
    border: 1px solid var(--md3-outline);
    box-shadow: var(--md3-shadow-strong);
    text-align: center;
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .external-browser-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: var(--md3-secondary);
}
body.page-kotc-registration-page .external-browser-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    border: 1px solid rgba(28, 171, 226, 0.16);
    font-size: 28px;
    font-weight: 900;
}
body.page-kotc-registration-page .external-browser-card h2 {
    margin: 0 0 8px;
    color: var(--md3-text);
    font-size: 24px;
    line-height: 1.15;
}
body.page-kotc-registration-page .external-browser-card p {
    margin: 0 0 16px;
    color: var(--md3-text-muted);
    font-size: 14px;
    line-height: 1.55;
}
body.page-kotc-registration-page .secondary-button {
    margin-top: 8px;
}
body.page-kotc-registration-page .external-browser-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px dashed rgba(28, 171, 226, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
}
body.page-kotc-registration-page .external-browser-copy span {
    min-width: 0;
    color: var(--md3-text-muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    word-break: break-all;
}
body.page-kotc-registration-page .external-browser-copy button {
    width: auto;
    min-width: 88px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--md3-primary);
    border-color: rgba(28, 171, 226, 0.28);
    box-shadow: none;
    font-size: 13px;
}
body.page-kotc-registration-page .event-live-view {
    display: grid;
    gap: 14px;
    width: min(620px, 100%);
    padding-top: 86px;
}
body.page-kotc-registration-page .event-live-view.is-compact .live-view-header,
body.page-kotc-registration-page .event-live-view.is-compact .live-status-text {
    display: none;
}
body.page-kotc-registration-page .event-live-view.is-compact .live-profile-photo {
    display: none !important;
}
body.page-kotc-registration-page .live-view-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: 0 18px 42px rgba(6, 15, 30, 0.12);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
}
body.page-kotc-registration-page .live-tab-btn {
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--md3-text-muted);
    box-shadow: none;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}
body.page-kotc-registration-page .live-tab-btn:hover:not(.is-active),
body.page-kotc-registration-page .live-tab-btn:focus-visible {
    background: rgba(255, 255, 255, 0.60);
    color: var(--md3-text);
}
body.page-kotc-registration-page .live-tab-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(28, 171, 226, 0.18);
    outline: none;
}
body.page-kotc-registration-page .live-tab-btn.is-active {
    background: linear-gradient(180deg, #55c7ef 0%, var(--md3-primary) 100%);
    border-color: rgba(15, 111, 153, 0.35);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(28, 171, 226, 0.24);
}
body.page-kotc-registration-page .live-tab-panel {
    display: none;
    gap: 14px;
}
body.page-kotc-registration-page .live-tab-panel.is-active {
    display: grid;
    align-content: start;
}
body.page-kotc-registration-page .live-leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: 0 18px 42px rgba(6, 15, 30, 0.12);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
}
body.page-kotc-registration-page .live-subtab-btn {
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--md3-text-muted);
    box-shadow: none;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}
body.page-kotc-registration-page .live-subtab-btn:hover:not(.is-active),
body.page-kotc-registration-page .live-subtab-btn:focus-visible {
    background: rgba(255, 255, 255, 0.60);
    color: var(--md3-text);
}
body.page-kotc-registration-page .live-subtab-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(28, 171, 226, 0.18);
    outline: none;
}
body.page-kotc-registration-page .live-subtab-btn.is-active {
    background: linear-gradient(180deg, #55c7ef 0%, var(--md3-primary) 100%);
    border-color: rgba(15, 111, 153, 0.35);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(28, 171, 226, 0.24);
}
body.page-kotc-registration-page .live-leaderboard-view {
    display: none;
}
body.page-kotc-registration-page .live-leaderboard-view.is-active {
    display: grid;
    gap: 14px;
    align-content: start;
}
body.page-kotc-registration-page .live-global-leaderboard-section {
    --live-global-row-grid: 30px 36px minmax(0, 1fr) 72px 44px;
    display: grid;
    gap: 10px;
}
body.page-kotc-registration-page .live-global-card-header {
    display: grid;
    grid-template-columns: var(--live-global-row-grid);
    align-items: center;
    gap: 8px;
    padding: 2px 10px 0;
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-global-card-header > span {
    min-width: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-kotc-registration-page .live-global-head-player {
    grid-column: 3;
    justify-self: start;
}
body.page-kotc-registration-page .live-global-head-rank {
    justify-self: center;
}
body.page-kotc-registration-page .live-global-head-trend,
body.page-kotc-registration-page .live-global-head-rating,
body.page-kotc-registration-page .live-global-head-matches,
body.page-kotc-registration-page .live-global-head-wins,
body.page-kotc-registration-page .live-global-head-draws,
body.page-kotc-registration-page .live-global-head-losses,
body.page-kotc-registration-page .live-global-head-diff {
    justify-self: end;
}
body.page-kotc-registration-page .live-event-leaderboard-section {
    --live-global-row-grid: 30px 36px minmax(0, 1fr) 28px 28px 28px 52px;
}
body.page-kotc-registration-page .live-global-stat.is-wins strong {
    color: #1f9d55;
}
body.page-kotc-registration-page .live-global-stat.is-losses strong {
    color: #d64545;
}
body.page-kotc-registration-page .live-global-stat.is-draws strong {
    color: var(--md3-text-muted);
}
body.page-kotc-registration-page .live-global-stat.is-diff strong {
    color: var(--md3-text);
}
body.page-kotc-registration-page .live-global-card-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: clamp(280px, calc(100dvh - 270px), 620px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 2px;
}
body.page-kotc-registration-page .live-global-card {
    position: relative;
    display: block;
    padding: 12px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    color: var(--md3-text);
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
body.page-kotc-registration-page .live-global-card {
    cursor: pointer;
}
body.page-kotc-registration-page .live-global-card:hover {
    transform: translateY(-1px);
}
body.page-kotc-registration-page .live-global-card:focus-visible {
    outline: 2px solid rgba(4, 157, 240, 0.55);
    outline-offset: 2px;
}
body.page-kotc-registration-page .live-global-card.is-self {
    border-color: rgba(4, 157, 240, 0.55);
    background: rgba(4, 157, 240, 0.14);
}
.profile-modal.hidden,
.is-hidden {
    display: none !important;
}
.profile-modal.is-view-only .profile-modal-photo-button,
.profile-modal.is-view-only .profile-modal-personal-hint,
.profile-modal.is-view-only #profileModalEditPanel,
.profile-modal.is-no-edit .profile-modal-photo-button,
.profile-modal.is-no-edit .profile-modal-personal-hint,
.profile-modal.is-no-edit #profileModalEditPanel,
.profile-modal.is-no-edit #profileModalEditBackdrop {
    display: none !important;
}
.profile-modal.is-view-only .profile-modal-personal-panel,
.profile-modal.is-no-edit .profile-modal-personal-panel {
    cursor: default;
    pointer-events: none;
}
body.page-kotc-registration-page .live-global-card-row {
    display: grid;
    grid-template-columns: var(--live-global-row-grid);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.page-kotc-registration-page .live-global-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
body.page-kotc-registration-page .live-global-card-rank {
    display: grid;
    gap: 2px;
    justify-items: start;
    min-width: 0;
}
body.page-kotc-registration-page .live-global-card-rank-label {
    display: none;
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-global-card .rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(16, 43, 69, 0.08);
    color: var(--md3-text);
    font-weight: 850;
    font-size: 12px;
}
body.page-kotc-registration-page .live-global-card .rank.top {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .live-global-card-row .avatar {
    justify-self: start;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1;
}
body.page-kotc-registration-page .live-global-card-row .avatar.has-photo {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(16, 43, 69, 0.08), 0 6px 14px rgba(6, 15, 30, 0.10);
}
body.page-kotc-registration-page .live-global-card-row .avatar.has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.page-kotc-registration-page .live-global-card-row .avatar.is-placeholder {
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: var(--avatar-accent, #17314f);
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.18) 32%, transparent 58%),
        linear-gradient(145deg, color-mix(in srgb, var(--avatar-accent, #17314f) 72%, #ffffff 28%) 0%, color-mix(in srgb, var(--avatar-accent, #17314f) 88%, #0f2237 12%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -10px 18px rgba(6, 15, 30, 0.14),
        0 6px 14px rgba(6, 15, 30, 0.10);
    text-shadow: 0 1px 2px rgba(6, 15, 30, 0.22);
}
body.page-kotc-registration-page .live-global-card-row .avatar.is-placeholder::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto;
    height: 44%;
    border-radius: 9px 9px 6px 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04));
    pointer-events: none;
}
body.page-kotc-registration-page .live-global-card-row .avatar.is-placeholder span {
    position: relative;
    z-index: 1;
}
body.page-kotc-registration-page .live-global-card-row .rank {
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
}
body.page-kotc-registration-page .live-global-card-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
body.page-kotc-registration-page .live-global-card .player-name {
    display: block;
    margin: 0;
    color: var(--md3-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.page-kotc-registration-page .live-global-card .player-meta {
    display: block;
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.page-kotc-registration-page .live-global-stat {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-self: stretch;
    min-width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: right;
}
body.page-kotc-registration-page .live-global-stat.is-trend {
    transform: translateX(10px);
}
body.page-kotc-registration-page .live-global-stat span {
    color: var(--md3-text-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-global-stat strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--md3-text);
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
body.page-kotc-registration-page .live-global-stat strong.trend {
    justify-content: flex-start;
}
body.page-kotc-registration-page .live-global-stat strong.trend i {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
body.page-kotc-registration-page .live-global-stat .trend.up { color: #1f9d55; }
body.page-kotc-registration-page .live-global-stat .trend.down { color: #d64545; }
body.page-kotc-registration-page .live-global-stat .trend.flat { color: var(--md3-text-muted); }
body.page-kotc-registration-page .live-global-empty {
    margin-top: 10px;
}
body.page-kotc-registration-page .live-profile-card {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 18px 42px rgba(6, 15, 30, 0.16);
    backdrop-filter: blur(24px) saturate(1.28);
    -webkit-backdrop-filter: blur(24px) saturate(1.28);
}
body.page-kotc-registration-page .live-profile-card::before {
    content: none;
}
body.page-kotc-registration-page .live-profile-left {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 18px;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
body.page-kotc-registration-page .live-profile-left:hover {
    background: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}
body.page-kotc-registration-page .live-profile-left:focus-visible {
    outline: 2px solid rgba(28, 171, 226, 0.52);
    outline-offset: 4px;
}
body.page-kotc-registration-page .live-profile-right {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: left;
}
body.page-kotc-registration-page .live-profile-avatar {
    position: relative;
    width: 54px;
    height: 54px;
}
body.page-kotc-registration-page .live-profile-copy {
    min-width: 0;
}
body.page-kotc-registration-page .live-profile-kicker {
    margin-bottom: 7px;
    color: var(--md3-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-profile-name {
    margin: 0;
    color: var(--md3-text);
    font-size: 22px;
    line-height: 1.08;
    font-weight: 900;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-profile-title {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--md3-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.78;
}
body.page-kotc-registration-page .live-profile-rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 76px;
    max-width: 120px;
    margin-top: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(227, 255, 98, 0.34);
    color: var(--md3-secondary-ink);
    border: 1px solid rgba(227, 255, 98, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 10px 22px rgba(16, 42, 67, 0.08);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-profile-photo,
body.page-kotc-registration-page .live-profile-initials {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: var(--md3-primary);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
body.page-kotc-registration-page .live-profile-photo {
    object-fit: cover;
    background: #e8f2f8;
    border: 2px solid #ffffff;
    box-shadow: 0 9px 18px rgba(16, 42, 67, 0.14);
}
body.page-kotc-registration-page .profile-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
body.page-kotc-registration-page .profile-modal.is-open {
    display: flex;
}
body.page-kotc-registration-page .profile-modal.is-live-state {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-backdrop {
    display: none;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-card {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0 22px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-body {
    padding-left: 0;
    padding-right: 0;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-overview {
    display: grid;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-header {
    padding: 0;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 16px;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-history-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-history-section .profile-modal-performance-panel {
    flex: 0 0 auto;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 4px 96px 0;
    scroll-padding-bottom: 96px;
}
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-close {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10001;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-left: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(28, 171, 226, 0.22);
    box-shadow: 0 16px 34px rgba(16, 42, 67, 0.20);
    color: var(--md3-primary);
    font-size: 32px;
    line-height: 1;
}
body.page-kotc-registration-page.profile-modal-open {
    overflow: hidden;
}
body.page-kotc-registration-page .profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 34, 0.56);
    backdrop-filter: blur(6px);
}
body.page-kotc-registration-page .profile-modal-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: min(900px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(28, 171, 226, 0.10) 0, rgba(28, 171, 226, 0.00) 34%),
        radial-gradient(circle at top right, rgba(191, 232, 0, 0.10) 0, rgba(191, 232, 0, 0.00) 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 250, 253, 0.92) 100%);
    border: 1px solid rgba(28, 171, 226, 0.12);
    box-shadow: 0 24px 72px rgba(16, 42, 67, 0.14);
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .profile-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 12px 0;
}
body.page-kotc-registration-page .profile-modal-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 0 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(28, 171, 226, 0.14);
    box-shadow: 0 16px 40px rgba(16, 42, 67, 0.08);
    color: var(--md3-primary-ink);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
}
body.page-kotc-registration-page .profile-modal-brand-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(227, 255, 98, 0.26);
    font-size: 18px;
    line-height: 1;
}
body.page-kotc-registration-page .profile-modal-brand-text {
    white-space: nowrap;
}
body.page-kotc-registration-page .profile-modal-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 260px;
}
body.page-kotc-registration-page .profile-modal-title-block h2 {
    margin: 0;
    color: var(--md3-text);
    font-size: clamp(34px, 4.8vw, 44px);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.04em;
}
body.page-kotc-registration-page .profile-modal-title-block p {
    margin: 0;
    color: var(--md3-text-muted);
    font-size: 16px;
    line-height: 1.45;
}
body.page-kotc-registration-page .profile-modal-close {
    position: relative;
    z-index: 3;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(28, 171, 226, 0.18);
    background: rgba(255, 255, 255, 0.84);
    color: var(--md3-text);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(16, 42, 67, 0.08);
}
body.page-kotc-registration-page .profile-modal-status {
    margin: 10px 18px 0;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(16, 42, 67, 0.10);
    background: rgba(255, 255, 255, 0.76);
    color: var(--md3-text);
    font-size: 13px;
    line-height: 1.45;
}
body.page-kotc-registration-page .profile-modal-status.is-error {
    background: #fff2f4;
    border-color: #f1ccd3;
    color: #9f3240;
}
body.page-kotc-registration-page .profile-modal-status.is-success {
    background: #f1f9db;
    border-color: #d4e7a4;
    color: #45620b;
}
body.page-kotc-registration-page .profile-modal-body {
    overflow: auto;
    padding: 10px 18px 18px;
    display: grid;
    gap: 16px;
}
body.page-kotc-registration-page .profile-modal-overview {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(140px, 168px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 20px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(227, 255, 98, 0.09) 0, rgba(227, 255, 98, 0.00) 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(246, 251, 255, 0.82) 100%);
    border: 1px solid rgba(28, 171, 226, 0.12);
    box-shadow: 0 18px 40px rgba(16, 42, 67, 0.08);
    backdrop-filter: blur(18px);
}
body.page-kotc-registration-page .profile-modal-overview::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--md3-secondary), rgba(227, 255, 98, 0.55));
    pointer-events: none;
}
body.page-kotc-registration-page .profile-modal-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.90);
    color: var(--md3-primary);
    border: 1px solid rgba(28, 171, 226, 0.18);
    box-shadow: 0 10px 20px rgba(16, 42, 67, 0.08);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    margin-left: auto;
    white-space: nowrap;
}
body.page-kotc-registration-page .profile-modal-edit-button i {
    width: 16px;
    height: 16px;
}
body.page-kotc-registration-page .profile-modal-edit-button.is-active {
    background: var(--md3-primary);
    color: #ffffff;
    border-color: rgba(28, 171, 226, 0.16);
    box-shadow: 0 14px 28px rgba(28, 171, 226, 0.24);
}
body.page-kotc-registration-page .profile-modal-photo-block,
body.page-kotc-registration-page .profile-modal-form-panel,
body.page-kotc-registration-page .profile-modal-rating-panel,
body.page-kotc-registration-page .profile-modal-history-section {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(28, 171, 226, 0.12);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
body.page-kotc-registration-page .profile-modal-photo-block::before,
body.page-kotc-registration-page .profile-modal-form-panel::before,
body.page-kotc-registration-page .profile-modal-rating-panel::before,
body.page-kotc-registration-page .profile-modal-history-section::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    pointer-events: none;
}
body.page-kotc-registration-page .profile-modal-photo-block {
    display: grid;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    justify-items: start;
    align-content: start;
    grid-column: 1;
    grid-row: 1;
}
body.page-kotc-registration-page .profile-modal-photo-block::before { display: none; }
body.page-kotc-registration-page .profile-modal-photo-block .profile-account-line {
    display: none;
}
body.page-kotc-registration-page .profile-modal-avatar-frame {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 26px;
    background: rgba(28, 171, 226, 0.08);
    border: 1px solid rgba(28, 171, 226, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(28, 171, 226, 0.12);
}
body.page-kotc-registration-page .profile-modal-avatar-frame img,
body.page-kotc-registration-page .profile-modal-avatar-frame span {
    width: 100%;
    height: 100%;
}
body.page-kotc-registration-page .profile-modal-avatar-frame img {
    object-fit: cover;
    background: #eef5fb;
}
body.page-kotc-registration-page .profile-modal-avatar-frame span {
    display: grid;
    place-items: center;
    background: var(--md3-primary);
    color: #ffffff;
    font-size: 30px;
    font-weight: 950;
}
body.page-kotc-registration-page .profile-modal-photo-button {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 52px;
    height: 52px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--md3-primary);
    border: 1px solid rgba(28, 171, 226, 0.22);
    font-size: 0;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(16, 42, 67, 0.10);
    display: grid;
    place-items: center;
}
body.page-kotc-registration-page .profile-modal-photo-button i {
    width: 22px;
    height: 22px;
}
body.page-kotc-registration-page .profile-modal-summary-copy {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    padding-top: 2px;
    grid-column: 2;
    grid-row: 1;
}
body.page-kotc-registration-page .profile-modal-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}
body.page-kotc-registration-page .profile-modal-name-block {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 220px;
}
body.page-kotc-registration-page .profile-modal-name {
    margin: 0;
    color: var(--md3-text);
    font-size: clamp(34px, 4.5vw, 44px);
    line-height: 0.98;
    font-weight: 950;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-email {
    color: var(--md3-text-muted);
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-welcome-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(28, 171, 226, 0.09) 0%, rgba(191, 232, 0, 0.08) 100%);
    border: 1px solid rgba(28, 171, 226, 0.10);
    box-shadow: 0 12px 24px rgba(16, 42, 67, 0.05);
}
body.page-kotc-registration-page .profile-modal-welcome-emoji {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(28, 171, 226, 0.08);
    font-size: 22px;
    line-height: 1;
}
body.page-kotc-registration-page .profile-modal-welcome-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-welcome-copy strong {
    color: var(--md3-primary);
    font-size: 16px;
    line-height: 1.15;
    font-weight: 900;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-welcome-copy span {
    color: var(--md3-text-muted);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.page-kotc-registration-page .profile-modal-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(28, 171, 226, 0.16);
    box-shadow: 0 10px 22px rgba(16, 42, 67, 0.06);
    color: var(--md3-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}
body.page-kotc-registration-page .profile-modal-meta-chip i {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    padding: 5px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-meta-chip strong {
    font-weight: 850;
}
body.page-kotc-registration-page .profile-modal-form-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 16px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(246, 251, 255, 0.86) 100%);
    border-radius: 20px;
    border-color: rgba(28, 171, 226, 0.12);
    box-shadow: 0 12px 28px rgba(16, 42, 67, 0.06);
}
body.page-kotc-registration-page .profile-modal-form-panel::before { background: rgba(28, 171, 226, 0.36); }
body.page-kotc-registration-page .profile-modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
body.page-kotc-registration-page .profile-modal-field {
    display: grid;
    gap: 8px;
}
body.page-kotc-registration-page .profile-modal-field span {
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-field input {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(16, 42, 67, 0.14);
    background: rgba(255, 255, 255, 0.86);
    color: var(--md3-text);
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
body.page-kotc-registration-page .profile-modal-field input:focus {
    border-color: var(--md3-primary);
    box-shadow: 0 0 0 4px rgba(28, 171, 226, 0.14);
    outline: none;
}
body.page-kotc-registration-page .profile-modal-field select {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(16, 42, 67, 0.14);
    background: rgba(255, 255, 255, 0.86);
    color: var(--md3-text);
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
body.page-kotc-registration-page .profile-modal-field select:focus {
    border-color: var(--md3-primary);
    box-shadow: 0 0 0 4px rgba(28, 171, 226, 0.14);
    outline: none;
}
body.page-kotc-registration-page .profile-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
body.page-kotc-registration-page .profile-modal-actions button {
    width: 100%;
    min-height: 50px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 800;
}
body.page-kotc-registration-page .profile-modal-divider {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 1px;
    margin: 2px 0 0;
    background: rgba(16, 42, 67, 0.10);
}
body.page-kotc-registration-page .profile-modal-primary-button {
    background: var(--md3-primary);
    color: #ffffff;
    border: 1px solid rgba(28, 171, 226, 0.20);
    box-shadow: 0 14px 30px rgba(28, 171, 226, 0.28);
}
body.page-kotc-registration-page .profile-modal-secondary-button {
    background: rgba(255, 255, 255, 0.74);
    color: var(--md3-primary);
    border: 1px solid rgba(28, 171, 226, 0.28);
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-rating-panel {
    grid-column: 1 / -1;
    grid-row: 4;
    padding: 2px 0 0;
    display: grid;
    gap: 12px;
    background: transparent;
    align-content: start;
    position: relative;
}
body.page-kotc-registration-page .profile-modal-rating-panel::before {
    display: none;
}
body.page-kotc-registration-page .profile-modal-rating-panel::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.86) 0 9%, transparent 10%),
        radial-gradient(circle at 64% 28%, rgba(255, 255, 255, 0.60) 0 6%, transparent 7%),
        radial-gradient(circle at 42% 68%, rgba(255, 255, 255, 0.48) 0 7%, transparent 8%),
        var(--md3-secondary);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}
body.page-kotc-registration-page .profile-modal-rating-panel > * {
    position: relative;
    z-index: 1;
}
body.page-kotc-registration-page .profile-modal-rating-panel .profile-modal-kicker {
    color: var(--md3-secondary-ink);
}
body.page-kotc-registration-page .profile-modal-rating-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
body.page-kotc-registration-page .profile-modal-rating-head h3 {
    margin: 4px 0 0;
    color: var(--md3-text);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
}
body.page-kotc-registration-page .profile-modal-rating-star {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(227, 255, 98, 0.78);
    color: var(--md3-secondary-ink);
    box-shadow: 0 10px 20px rgba(227, 255, 98, 0.20);
}
body.page-kotc-registration-page .profile-modal-rating-main {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
body.page-kotc-registration-page .profile-modal-rating-value {
    color: var(--md3-primary);
    font-size: clamp(60px, 8vw, 78px);
    line-height: 0.92;
    font-weight: 950;
    letter-spacing: -0.04em;
}
body.page-kotc-registration-page .profile-modal-tier-badge {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    width: fit-content;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--md3-secondary-container);
    color: var(--md3-secondary-ink);
    border: 1px solid rgba(227, 255, 98, 0.36);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
}
body.page-kotc-registration-page .profile-modal-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
}
body.page-kotc-registration-page .profile-modal-stat-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(16, 42, 67, 0.08);
    box-shadow: 0 10px 20px rgba(16, 42, 67, 0.05);
    min-width: 0;
    min-height: 84px;
}
body.page-kotc-registration-page .profile-modal-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-stat-icon i {
    width: 18px;
    height: 18px;
}
body.page-kotc-registration-page .profile-modal-stat-card div {
    display: grid;
    gap: 2px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-stat-card span {
    color: var(--md3-text);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-stat-card small {
    color: var(--md3-text-muted);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}
body.page-kotc-registration-page .profile-modal-history-section {
    margin-top: 0;
    padding: 14px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(249, 253, 255, 0.84) 100%);
    border: 1px solid rgba(28, 171, 226, 0.10);
    box-shadow: 0 16px 40px rgba(16, 42, 67, 0.06);
}
body.page-kotc-registration-page .profile-modal-history-section::before { display: none; }
body.page-kotc-registration-page .profile-modal-section-head .profile-modal-kicker {
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16, 42, 67, 0.10);
}
body.page-kotc-registration-page .profile-modal-section-head-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-section-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    flex: 0 0 auto;
}
body.page-kotc-registration-page .profile-modal-section-icon i {
    width: 16px;
    height: 16px;
}
body.page-kotc-registration-page .profile-modal-section-head h3 {
    margin: 0;
    color: var(--md3-text);
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.15;
    font-weight: 900;
}
body.page-kotc-registration-page .profile-modal-history-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}
body.page-kotc-registration-page .profile-modal-history-list {
    display: grid;
    gap: 10px;
}
body.page-kotc-registration-page .profile-modal-match-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
    gap: 10px;
    align-items: stretch;
    min-height: 86px;
    padding: 11px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(16, 42, 67, 0.08);
    box-shadow: 0 8px 18px rgba(16, 42, 67, 0.05);
}
body.page-kotc-registration-page .profile-modal-match-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-match-icon.is-win {
    background: rgba(227, 255, 98, 0.34);
    color: #496100;
}
body.page-kotc-registration-page .profile-modal-match-icon.is-loss {
    background: rgba(255, 228, 228, 0.90);
    color: #b63a49;
}
body.page-kotc-registration-page .profile-modal-match-icon i {
    width: 16px;
    height: 16px;
}
body.page-kotc-registration-page .profile-modal-match-main {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-match-teams {
    display: grid;
    gap: 2px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-team-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: baseline;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-team-line.is-opponent {
    grid-template-columns: auto minmax(0, 1fr);
}
body.page-kotc-registration-page .profile-modal-team-line.is-team {
    grid-template-columns: minmax(0, 1fr);
}
body.page-kotc-registration-page .profile-modal-team-label {
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
    text-transform: lowercase;
}
body.page-kotc-registration-page .profile-modal-team-line strong {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    min-width: 0;
    color: var(--md3-text);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-team-player.is-self {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(28, 171, 226, 0.12);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-team-separator {
    margin: 0 1px;
    color: rgba(107, 122, 140, 0.75);
    font-weight: 800;
}
body.page-kotc-registration-page .profile-modal-match-title {
    color: var(--md3-text);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-match-subtitle {
    color: var(--md3-text-muted);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-match-side {
    display: grid;
    align-content: space-between;
    justify-items: end;
    gap: 6px;
    justify-self: end;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-match-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-positive {
    background: rgba(227, 255, 98, 0.42);
    color: #496100;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-negative {
    background: rgba(255, 228, 228, 0.92);
    color: #c13d4f;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-even {
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-match-score-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-match-result {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 950;
}
body.page-kotc-registration-page .profile-modal-match-result.is-win {
    background: rgba(227, 255, 98, 0.42);
    color: #496100;
}
body.page-kotc-registration-page .profile-modal-match-result.is-loss {
    background: rgba(255, 228, 228, 0.92);
    color: #c13d4f;
}
body.page-kotc-registration-page .profile-modal-match-score {
    color: var(--md3-text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
body.page-kotc-registration-page .profile-modal-empty-state {
    padding: 24px 18px;
    border: 1px dashed rgba(28, 171, 226, 0.18);
    border-radius: 18px;
    color: var(--md3-text-muted);
    text-align: center;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.62);
}
body.page-kotc-registration-page .profile-modal-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 252, 255, 0.86) 100%);
    border: 1px solid rgba(28, 171, 226, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(16, 42, 67, 0.07);
    overflow: hidden;
}
body.page-kotc-registration-page .profile-modal-overview::before {
    display: none;
}
body.page-kotc-registration-page .profile-modal-personal-panel,
body.page-kotc-registration-page .profile-modal-performance-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-personal-panel {
    cursor: pointer;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16, 42, 67, 0.08);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}
body.page-kotc-registration-page .profile-modal-performance-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 0;
}
body.page-kotc-registration-page .profile-modal-personal-panel:hover,
body.page-kotc-registration-page .profile-modal-personal-panel:focus-within,
body.page-kotc-registration-page .profile-modal-personal-panel.is-active {
    background: rgba(28, 171, 226, 0.04);
    border-bottom-color: rgba(28, 171, 226, 0.18);
    box-shadow: none;
    transform: none;
}
body.page-kotc-registration-page .profile-modal-personal-panel:focus-visible {
    outline: 3px solid rgba(28, 171, 226, 0.18);
    outline-offset: 2px;
}
body.page-kotc-registration-page .profile-modal-overview .profile-modal-kicker {
    margin: 0;
    color: var(--md3-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-personal-head {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame {
    width: 92px;
    height: 92px;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(28, 171, 226, 0.12);
}
body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame span {
    font-size: 26px;
}
body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button {
    right: -5px;
    bottom: -5px;
    width: 34px;
    height: 34px;
}
body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button i {
    width: 15px;
    height: 15px;
}
body.page-kotc-registration-page .profile-modal-personal-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-personal-copy .profile-modal-name {
    font-size: clamp(30px, 4vw, 40px);
    letter-spacing: 0;
}
body.page-kotc-registration-page .profile-modal-personal-hint {
    display: none;
}
body.page-kotc-registration-page .profile-modal-personal-edit-button {
    align-self: start;
    margin-left: 0;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 12px;
    gap: 6px;
}
body.page-kotc-registration-page .profile-modal-personal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
body.page-kotc-registration-page .profile-modal-personal-field {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(28, 171, 226, 0.06);
    border: 1px solid rgba(28, 171, 226, 0.10);
}
body.page-kotc-registration-page .profile-modal-personal-field--wide {
    grid-column: 1 / -1;
}
body.page-kotc-registration-page .profile-modal-personal-field dt {
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-personal-field dd {
    margin: 0;
    color: var(--md3-text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-performance-panel {
    background: transparent;
}
body.page-kotc-registration-page .profile-modal-performance-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-performance-head h3 {
    margin: 2px 0 0;
    color: var(--md3-text);
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
}
body.page-kotc-registration-page .profile-modal-performance-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    flex: 0 0 auto;
}
body.page-kotc-registration-page .profile-modal-performance-nickname {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(227, 255, 98, 0.28);
    border: 1px solid rgba(227, 255, 98, 0.34);
}
body.page-kotc-registration-page .profile-modal-performance-nickname span {
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-performance-nickname strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(28, 171, 226, 0.12);
    color: var(--md3-primary-ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-rating-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
    flex-wrap: wrap;
}
body.page-kotc-registration-page .profile-modal-rating-stack {
    display: grid;
    gap: 4px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-rating-line {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-rating-tier {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(227, 255, 98, 0.32);
    color: var(--md3-secondary-ink);
    border: 1px solid rgba(227, 255, 98, 0.38);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
body.page-kotc-registration-page .profile-modal-rating-stack small {
    color: var(--md3-text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-rating-value {
    font-size: clamp(46px, 7vw, 68px);
    letter-spacing: 0;
}
body.page-kotc-registration-page .profile-modal-stat-grid {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
}
body.page-kotc-registration-page .profile-modal-stat-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 5px;
    min-height: 70px;
    padding: 9px 6px;
    border-radius: 15px;
    text-align: center;
}
body.page-kotc-registration-page .profile-modal-stat-icon {
    width: 30px;
    height: 30px;
}
body.page-kotc-registration-page .profile-modal-stat-icon i {
    width: 15px;
    height: 15px;
}
body.page-kotc-registration-page .profile-modal-stat-card span {
    font-size: 17px;
}
body.page-kotc-registration-page .profile-modal-stat-card small {
    font-size: 10px;
    line-height: 1.15;
}
body.page-kotc-registration-page .profile-modal-match-result.is-draw {
    background: rgba(28, 171, 226, 0.12);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-match-result.is-even {
    background: rgba(28, 171, 226, 0.08);
    color: var(--md3-primary);
}
body.page-kotc-registration-page .profile-modal-section-head h3 {
    margin: 0;
    color: var(--md3-text);
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.15;
    font-weight: 900;
}
body.page-kotc-registration-page .profile-modal-history-section {
    margin-top: 0;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(249, 253, 255, 0.84) 100%);
    border: 1px solid rgba(28, 171, 226, 0.10);
    box-shadow: 0 16px 40px rgba(16, 42, 67, 0.06);
}
body.page-kotc-registration-page .profile-modal-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16, 42, 67, 0.10);
}
body.page-kotc-registration-page .profile-modal-section-head-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-section-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    flex: 0 0 auto;
}
body.page-kotc-registration-page .profile-modal-section-icon i {
    width: 16px;
    height: 16px;
}
body.page-kotc-registration-page .live-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--md3-text);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 20px 54px rgba(6, 15, 30, 0.14);
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
}
body.page-kotc-registration-page .live-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-view-header h2 {
    margin: 0 0 6px;
    color: var(--md3-text);
    font-size: 24px;
    line-height: 1.15;
}
body.page-kotc-registration-page .live-view-header p {
    margin: 0;
    color: var(--md3-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
body.page-kotc-registration-page .live-refresh-btn {
    width: auto;
    min-width: 96px;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--md3-primary);
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    font-size: 13px;
}
body.page-kotc-registration-page .live-status-text {
    padding: 11px 13px;
    border-radius: 16px;
    border: 1px solid rgba(28, 171, 226, 0.16);
    background: rgba(255, 255, 255, 0.46);
    color: #20415f;
    font-size: 13px;
    line-height: 1.45;
}
body.page-kotc-registration-page .live-status-text.is-error {
    background: rgba(255, 238, 242, 0.62);
    border-color: rgba(198, 61, 74, 0.16);
    color: #a23a49;
}
body.page-kotc-registration-page .live-status-text.is-success {
    background: rgba(227, 255, 98, 0.30);
    border-color: rgba(227, 255, 98, 0.32);
    color: var(--md3-secondary-ink);
}
body.page-kotc-registration-page .live-section {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.48) 100%);
    box-shadow: 0 24px 64px rgba(6, 15, 30, 0.16);
    backdrop-filter: blur(24px) saturate(1.22);
    -webkit-backdrop-filter: blur(24px) saturate(1.22);
}
body.page-kotc-registration-page .live-section::before {
    content: none;
}
body.page-kotc-registration-page .live-section-title {
    margin-bottom: 12px;
    color: var(--md3-text);
    font-size: 16px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-courts-list,
body.page-kotc-registration-page .live-leaderboard-list,
body.page-kotc-registration-page .live-history-list {
    display: grid;
    gap: 10px;
}
body.page-kotc-registration-page .live-status-text,
body.page-kotc-registration-page .live-court-card,
body.page-kotc-registration-page .live-team-box,
body.page-kotc-registration-page .live-waiting-chip,
body.page-kotc-registration-page .live-rank-row,
body.page-kotc-registration-page .live-history-card,
body.page-kotc-registration-page .live-empty {
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
body.page-kotc-registration-page .live-court-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body.page-kotc-registration-page .live-court-card.is-playing {
    border-color: rgba(28, 171, 226, 0.20);
    background: rgba(28, 171, 226, 0.12);
}
body.page-kotc-registration-page .live-court-card.is-ready,
body.page-kotc-registration-page .live-court-card.is-staging {
    border-color: rgba(227, 255, 98, 0.28);
    background: rgba(227, 255, 98, 0.18);
}
body.page-kotc-registration-page .live-court-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, 0.28);
    color: var(--md3-text);
    font-weight: 800;
    border-bottom: 1px solid rgba(28, 171, 226, 0.08);
}
body.page-kotc-registration-page .live-court-top span,
body.page-kotc-registration-page .live-court-top strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-court-timer {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--md3-secondary-container);
    color: var(--md3-secondary-ink);
    border: 1px solid rgba(227, 255, 98, 0.32);
    font-size: 12px;
    white-space: nowrap;
}
body.page-kotc-registration-page .live-court-note {
    padding: 10px 13px 0;
    color: var(--md3-text-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: stretch;
    padding: 12px;
}
body.page-kotc-registration-page .live-team-box {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
}
body.page-kotc-registration-page .live-team-label {
    margin-bottom: 8px;
    color: var(--md3-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .live-player-line {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin-bottom: 8px;
}
body.page-kotc-registration-page .live-player-line:last-child {
    margin-bottom: 0;
}
body.page-kotc-registration-page .live-player-line strong {
    color: var(--md3-text);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-player-line span,
body.page-kotc-registration-page .live-team-empty {
    color: var(--md3-text-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-vs {
    align-self: center;
    padding: 0 2px;
    color: var(--md3-primary);
    font-size: 11px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.page-kotc-registration-page .live-waiting-chip {
    display: grid;
    gap: 3px;
    min-width: min(100%, 142px);
    flex: 1 1 142px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body.page-kotc-registration-page .live-waiting-chip span {
    color: var(--md3-primary);
    font-size: 11px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-waiting-chip strong {
    color: var(--md3-text);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-waiting-chip small {
    color: var(--md3-text-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-waiting-chip.is-paused {
    opacity: 0.72;
}
body.page-kotc-registration-page .live-rank-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body.page-kotc-registration-page .live-rank-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--md3-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-rank-name {
    display: grid;
    gap: 3px;
    min-width: 0;
}
body.page-kotc-registration-page .live-rank-name strong {
    color: var(--md3-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-rank-name small {
    color: var(--md3-text-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-rank-stat {
    display: grid;
    gap: 2px;
    text-align: right;
    color: var(--md3-text);
    white-space: nowrap;
}
body.page-kotc-registration-page .live-rank-stat strong {
    font-size: 18px;
    line-height: 1;
}
body.page-kotc-registration-page .live-rank-stat span {
    color: var(--md3-text-muted);
    font-size: 11px;
}
body.page-kotc-registration-page .live-history-card {
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
body.page-kotc-registration-page .live-history-meta {
    margin-bottom: 7px;
    color: var(--md3-text-muted);
    font-size: 12px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-history-score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}
body.page-kotc-registration-page .live-history-score span {
    min-width: 0;
    color: #456078;
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .live-history-score span:last-child {
    text-align: right;
}
body.page-kotc-registration-page .live-history-score small {
    display: block;
    margin-top: 4px;
    color: var(--md3-text-muted);
    font-size: 11px;
    font-weight: 800;
}
body.page-kotc-registration-page .live-history-score .is-winner {
    color: var(--md3-text);
    font-weight: 700;
}
body.page-kotc-registration-page .live-history-score strong {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--md3-secondary-container);
    color: var(--md3-secondary-ink);
    border: 1px solid rgba(227, 255, 98, 0.32);
    font-size: 12px;
    white-space: nowrap;
}
body.page-kotc-registration-page .live-empty {
    padding: 13px;
    border: 1px dashed rgba(255, 255, 255, 0.34);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.30);
    color: var(--md3-text-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
body.page-kotc-registration-page .live-logout-area {
    padding: 4px 0 8px;
}
body.page-kotc-registration-page .live-logout-btn {
    width: 100%;
    min-height: 50px;
    background: rgba(255, 255, 255, 0.42);
    color: #a23a49;
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    font-size: 15px;
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
@media screen and (max-width: 640px) {
    body.page-kotc-registration-page .page {
        padding-bottom: 160px;
    }
    body.page-kotc-registration-page .landing-actions {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 0 12px;
    }
    body.page-kotc-registration-page .landing-actions .join-start-btn {
        width: 100%;
        min-height: 58px;
        font-size: 17px;
    }
    body.page-kotc-registration-page .google-button-wrap {
        width: 100%;
    }
    body.page-kotc-registration-page .join-start-btn,
    body.page-kotc-registration-page .dialog-actions button {
        width: 100%;
        min-width: 0;
    }
    body.page-kotc-registration-page .hero-meta {
        width: 100%;
    }
    body.page-kotc-registration-page .hero {
        --hero-logo-size: clamp(172px, 48vw, 236px);
        width: min(520px, calc(100vw - 24px));
    }
    body.page-kotc-registration-page .hero h1 {
        font-size: clamp(40px, 11vw, 56px);
    }
    body.page-kotc-registration-page .event-pill {
        min-height: 44px;
        font-size: 14px;
    }
    body.page-kotc-registration-page .card:not(.is-open) {
        padding: 16px;
    }
    body.page-kotc-registration-page .card.is-open {
        padding: 0;
    }
    body.page-kotc-registration-page .external-browser-copy {
        grid-template-columns: 1fr;
    }
    body.page-kotc-registration-page .external-browser-copy button {
        width: 100%;
    }
    body.page-kotc-registration-page .live-view-header {
        flex-direction: column;
    }
    body.page-kotc-registration-page .live-refresh-btn {
        width: 100%;
    }
    body.page-kotc-registration-page .profile-modal {
        padding: 8px;
    }
    body.page-kotc-registration-page .profile-modal-card {
        width: min(900px, calc(100vw - 16px));
        max-height: calc(100vh - 16px);
        border-radius: 24px;
    }
    body.page-kotc-registration-page .profile-modal-header {
        padding: 10px 10px 0;
        gap: 8px;
    }
    body.page-kotc-registration-page .profile-modal-brand-chip {
        min-height: 52px;
        padding: 0 14px;
        border-radius: 24px;
        font-size: 12px;
    }
    body.page-kotc-registration-page .profile-modal-brand-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    body.page-kotc-registration-page .profile-modal-title-block h2 {
        font-size: clamp(28px, 8vw, 38px);
    }
    body.page-kotc-registration-page .profile-modal-title-block p {
        font-size: 14px;
    }
    body.page-kotc-registration-page .profile-modal-close {
        width: 48px;
        height: 48px;
        font-size: 26px;
    }
    body.page-kotc-registration-page .profile-modal-edit-button {
        margin-left: 0;
        align-self: flex-start;
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
    body.page-kotc-registration-page .profile-modal-body {
        padding: 10px 12px 14px;
    }
    body.page-kotc-registration-page .profile-modal-overview {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 14px;
        border-radius: 22px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel,
    body.page-kotc-registration-page .profile-modal-history-section {
        border-radius: 22px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel {
        padding: 16px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel {
        padding: 0 0 10px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
    }
    body.page-kotc-registration-page .profile-modal-performance-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 0;
    }
    body.page-kotc-registration-page .profile-modal-personal-head {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame span {
        font-size: 18px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button {
        right: -4px;
        bottom: -4px;
        width: 26px;
        height: 26px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button i {
        width: 11px;
        height: 11px;
    }
    body.page-kotc-registration-page .profile-modal-personal-edit-button {
        grid-column: auto;
        justify-self: end;
        min-height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-personal-copy {
        gap: 2px;
    }
    body.page-kotc-registration-page .profile-modal-personal-copy .profile-modal-name {
        font-size: clamp(20px, 5vw, 24px);
        line-height: 1.15;
    }
    body.page-kotc-registration-page .profile-modal-personal-hint {
        font-size: 10px;
    }
    body.page-kotc-registration-page .profile-modal-personal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field {
        padding: 5px 7px;
        border-radius: 10px;
        gap: 1px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field dt {
        font-size: 8px;
        letter-spacing: 0.4px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field dd {
        font-size: 12px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel {
        grid-column: auto;
        grid-row: auto;
        order: 3;
    }
    body.page-kotc-registration-page .profile-modal-form-grid {
        grid-template-columns: 1fr;
    }
    body.page-kotc-registration-page .profile-modal-actions {
        grid-template-columns: 1fr 1fr;
    }
    body.page-kotc-registration-page .profile-modal-performance-head h3 {
        font-size: 16px;
    }
    body.page-kotc-registration-page .profile-modal-performance-icon {
        width: 30px;
        height: 30px;
    }
    body.page-kotc-registration-page .profile-modal-performance-nickname {
        gap: 6px;
        padding: 7px 8px;
    }
    body.page-kotc-registration-page .profile-modal-performance-nickname strong {
        min-height: 22px;
        padding: 0 7px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-rating-value {
        font-size: clamp(40px, 12vw, 52px);
    }
    body.page-kotc-registration-page .profile-modal-rating-stack small {
        font-size: 9px;
    }
    body.page-kotc-registration-page .profile-modal-rating-line {
        gap: 7px;
    }
    body.page-kotc-registration-page .profile-modal-rating-tier {
        min-height: 26px;
        padding: 0 9px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 8px 5px;
        gap: 4px;
        min-height: 66px;
        border-radius: 13px;
        text-align: center;
    }
    body.page-kotc-registration-page .profile-modal-stat-icon {
        width: 27px;
        height: 27px;
    }
    body.page-kotc-registration-page .profile-modal-stat-icon i {
        width: 12px;
        height: 12px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card span {
        font-size: 15px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card small {
        font-size: 9px;
    }
    body.page-kotc-registration-page .profile-modal-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    body.page-kotc-registration-page .profile-modal-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
    body.page-kotc-registration-page .profile-modal-match-card {
        grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
        gap: 10px;
        padding: 11px 12px;
    }
    body.page-kotc-registration-page .profile-modal-team-line strong {
        font-size: 14px;
    }
    body.page-kotc-registration-page .profile-modal-match-score {
        font-size: 16px;
    }
    body.page-kotc-registration-page .profile-modal-section-head h3 {
        font-size: clamp(22px, 6vw, 28px);
    }
}
@media screen and (max-width: 420px) {
    body.page-kotc-registration-page {
        padding: 14px 10px 24px;
    }
    body.page-kotc-registration-page .hero,
    body.page-kotc-registration-page .card:not(.is-open) {
        border-radius: 24px;
    }
    body.page-kotc-registration-page .hero {
        --hero-logo-size: clamp(156px, 56vw, 208px);
        width: min(480px, calc(100vw - 20px));
    }
    body.page-kotc-registration-page .hero h1 {
        font-size: clamp(34px, 13vw, 46px);
    }
    body.page-kotc-registration-page .landing-actions {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 0 10px;
    }
    body.page-kotc-registration-page .card:not(.is-open) {
        padding: 14px;
    }
    body.page-kotc-registration-page .card.is-open {
        padding: 0;
    }
    body.page-kotc-registration-page .profile-modal-card {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 22px;
    }
    body.page-kotc-registration-page .profile-modal-header {
        padding: 8px 8px 0;
        gap: 6px;
    }
    body.page-kotc-registration-page .profile-modal-brand-chip {
        min-height: 48px;
        padding: 0 12px;
        border-radius: 22px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }
    body.page-kotc-registration-page .profile-modal-brand-icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
    body.page-kotc-registration-page .profile-modal-title-block h2 {
        font-size: clamp(26px, 10vw, 34px);
    }
    body.page-kotc-registration-page .profile-modal-title-block p {
        font-size: 13px;
    }
    body.page-kotc-registration-page .profile-modal-close {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }
    body.page-kotc-registration-page .profile-modal-edit-button {
        margin-left: 0;
        align-self: flex-start;
        min-height: 34px;
        padding: 0 10px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-status {
        margin: 12px 14px 0;
    }
    body.page-kotc-registration-page .profile-modal-body {
        padding: 10px 12px 12px;
    }
    body.page-kotc-registration-page .profile-modal-overview {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
        border-radius: 20px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel,
    body.page-kotc-registration-page .profile-modal-history-section {
        border-radius: 20px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel {
        padding: 14px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel {
        padding: 0 0 10px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }
    body.page-kotc-registration-page .profile-modal-performance-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 0;
    }
    body.page-kotc-registration-page .profile-modal-personal-head {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 8px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-avatar-frame span {
        font-size: 16px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button {
        width: 22px;
        height: 22px;
        right: -3px;
        bottom: -3px;
    }
    body.page-kotc-registration-page .profile-modal-personal-panel .profile-modal-photo-button i {
        width: 9px;
        height: 9px;
    }
    body.page-kotc-registration-page .profile-modal-personal-edit-button {
        grid-column: auto;
        justify-self: end;
        margin-top: 0;
        min-height: 26px;
        padding: 0 8px;
        font-size: 10px;
    }
    body.page-kotc-registration-page .profile-modal-personal-copy .profile-modal-name {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.15;
    }
    body.page-kotc-registration-page .profile-modal-personal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field {
        padding: 4px 6px;
        border-radius: 9px;
        gap: 1px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field dt {
        font-size: 8px;
        letter-spacing: 0.3px;
    }
    body.page-kotc-registration-page .profile-modal-personal-field dd {
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-form-panel {
        grid-column: auto;
        grid-row: auto;
        order: 3;
    }
    body.page-kotc-registration-page .profile-modal-form-grid {
        grid-template-columns: 1fr;
    }
    body.page-kotc-registration-page .profile-modal-performance-head h3 {
        font-size: 15px;
    }
    body.page-kotc-registration-page .profile-modal-performance-icon {
        width: 28px;
        height: 28px;
    }
    body.page-kotc-registration-page .profile-modal-performance-nickname {
        gap: 6px;
        padding: 7px 8px;
    }
    body.page-kotc-registration-page .profile-modal-performance-nickname strong {
        min-height: 22px;
        padding: 0 7px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-rating-value {
        font-size: clamp(36px, 11vw, 48px);
    }
    body.page-kotc-registration-page .profile-modal-rating-stack small {
        font-size: 10px;
    }
    body.page-kotc-registration-page .profile-modal-rating-line {
        gap: 6px;
    }
    body.page-kotc-registration-page .profile-modal-rating-tier {
        min-height: 24px;
        padding: 0 8px;
        font-size: 10px;
    }
    body.page-kotc-registration-page .profile-modal-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 7px 4px;
        gap: 4px;
        min-height: 62px;
        border-radius: 12px;
        text-align: center;
    }
    body.page-kotc-registration-page .profile-modal-stat-icon {
        width: 25px;
        height: 25px;
    }
    body.page-kotc-registration-page .profile-modal-stat-icon i {
        width: 12px;
        height: 12px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card span {
        font-size: 14px;
    }
    body.page-kotc-registration-page .profile-modal-stat-card small {
        font-size: 9px;
    }
    body.page-kotc-registration-page .event-live-view {
        padding-top: 78px;
    }
    body.page-kotc-registration-page .live-profile-card {
        grid-template-columns: minmax(0, 1fr) auto;
        margin: 0;
        padding: calc(8px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
        gap: 8px;
        border-radius: 0;
    }
    body.page-kotc-registration-page .live-profile-left {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px;
    }
    body.page-kotc-registration-page .live-profile-avatar,
    body.page-kotc-registration-page .live-profile-photo,
    body.page-kotc-registration-page .live-profile-initials {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }
    body.page-kotc-registration-page .live-profile-name {
        font-size: 18px;
    }
    body.page-kotc-registration-page .live-profile-title {
        font-size: 12px;
    }
    body.page-kotc-registration-page .live-profile-rating {
        min-width: 68px;
        padding: 7px 10px;
        font-size: 18px;
    }
    body.page-kotc-registration-page .live-view-tabs {
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
    }
    body.page-kotc-registration-page .live-tab-btn {
        min-height: 42px;
        padding: 9px 8px;
        font-size: 12px;
    }
    body.page-kotc-registration-page .live-leaderboard-tabs {
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
    }
    body.page-kotc-registration-page .live-subtab-btn {
        min-height: 42px;
        padding: 9px 8px;
        font-size: 12px;
    }
    body.page-kotc-registration-page .live-tab-panel {
        gap: 12px;
    }
    body.page-kotc-registration-page .live-global-leaderboard-section {
        --live-global-row-grid: 26px 32px minmax(0, 1fr) 60px 36px;
        gap: 8px;
    }
    body.page-kotc-registration-page .live-event-leaderboard-section {
        --live-global-row-grid: 26px 32px minmax(0, 1fr) 24px 24px 24px 46px;
    }
    body.page-kotc-registration-page .live-global-card-header {
        gap: 5px;
        padding: 2px 8px 0;
        font-size: 9px;
        letter-spacing: 0.4px;
    }
    body.page-kotc-registration-page .live-global-card-grid {
        gap: 6px;
        max-height: clamp(300px, calc(100dvh - 230px), 620px);
    }
    body.page-kotc-registration-page .live-global-card {
        padding: 8px;
        border-radius: 14px;
    }
    body.page-kotc-registration-page .live-global-card-row {
        gap: 5px;
    }
    body.page-kotc-registration-page .live-global-card-row .rank {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .live-global-card-row .avatar {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 10px;
    }
    body.page-kotc-registration-page .live-global-card .player-name {
        font-size: 13px;
    }
    body.page-kotc-registration-page .live-global-card .player-meta {
        font-size: 9px;
    }
    body.page-kotc-registration-page .live-global-stat strong {
        font-size: 12px;
    }
    body.page-kotc-registration-page .live-global-stat strong.trend i,
    body.page-kotc-registration-page .live-global-stat strong.trend svg {
        width: 13px;
        height: 13px;
    }
    body.page-kotc-registration-page .profile-modal-actions {
        grid-template-columns: 1fr;
    }
    body.page-kotc-registration-page .profile-modal-match-card {
        grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
        gap: 8px;
        padding: 12px 10px;
    }
    body.page-kotc-registration-page .profile-modal-match-title {
        font-size: 14px;
    }
    body.page-kotc-registration-page .profile-modal-match-side {
        justify-self: end;
    }
    body.page-kotc-registration-page .profile-modal-match-delta {
        min-height: 26px;
        padding: 0 7px;
        font-size: 10px;
    }
    body.page-kotc-registration-page .profile-modal-match-score-row {
        justify-self: end;
        gap: 6px;
    }
    body.page-kotc-registration-page .profile-modal-match-subtitle {
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-match-result {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    body.page-kotc-registration-page .profile-modal-match-score {
        font-size: 15px;
    }
    body.page-kotc-registration-page .profile-modal-section-head {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    body.page-kotc-registration-page .profile-modal-section-head h3 {
        font-size: clamp(20px, 7vw, 26px);
    }
    body.page-kotc-registration-page .live-match-teams,
    body.page-kotc-registration-page .live-history-score {
        grid-template-columns: 1fr;
    }
    body.page-kotc-registration-page .live-vs {
        text-align: center;
    }
    body.page-kotc-registration-page .live-history-score span:last-child {
        text-align: left;
    }
}
body.page-kotc-registration-page .profile-modal-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(8, 20, 34, 0.24);
    backdrop-filter: blur(5px);
}
body.page-kotc-registration-page .profile-modal-form-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10003;
    width: min(372px, calc(100vw - 36px));
    max-height: min(78vh, 560px);
    grid-column: auto;
    grid-row: auto;
    order: initial;
    overflow: auto;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.96) 100%);
    border: 1px solid rgba(28, 171, 226, 0.18);
    box-shadow: 0 24px 64px rgba(16, 42, 67, 0.24);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(18px);
}
body.page-kotc-registration-page .profile-modal-form-panel::before {
    display: none;
}
body.page-kotc-registration-page .profile-modal-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.page-kotc-registration-page .profile-modal-form-head strong {
    color: var(--md3-text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}
body.page-kotc-registration-page .profile-modal-form-close {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(28, 171, 226, 0.10);
    color: var(--md3-primary);
    border: 1px solid rgba(28, 171, 226, 0.16);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-form-close:hover,
body.page-kotc-registration-page .profile-modal-form-close:focus-visible {
    background: rgba(28, 171, 226, 0.16);
    outline: none;
}
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-field {
    gap: 6px;
}
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-field input,
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-field select {
    min-height: 48px;
    border-radius: 15px;
    font-size: 15px;
}
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-actions {
    grid-template-columns: 1fr 1fr;
}
body.page-kotc-registration-page .profile-modal-form-panel .profile-modal-actions button {
    min-height: 46px;
    border-radius: 15px;
    font-size: 15px;
}
body.page-kotc-registration-page .hidden { display: none !important; }
body.page-kotc-registration-page [hidden] { display: none !important; }

/* ---------------------------------------------------------
   eventregister — Netflix-style overlay (DAL design)
   Layered on top of the original page-kotc-registration-page
   rules above to lift visuals to the dark Netflix language
   without touching the JS-driven structure.
   --------------------------------------------------------- */
body.page-kotc-registration-page {
    --md3-primary: var(--dal-primary);
    --md3-primary-container: rgba(4, 157, 240, 0.18);
    --md3-primary-ink: #ffffff;
    --md3-text: #f6fbfe;
    --md3-text-muted: rgba(246, 251, 254, 0.72);
    background: var(--dal-app-bg);
    background-attachment: fixed;
    background-color: #050811;
    color: #f6fbfe;
    accent-color: var(--dal-primary);
}

/* Hero — brand wordmark + cinematic title */
body.page-kotc-registration-page .hero .join-brand {
    color: var(--dal-primary);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
body.page-kotc-registration-page .hero h1 {
    font-size: clamp(2.6rem, 9vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #fff;
}
body.page-kotc-registration-page .event-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #f6fbfe;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
body.page-kotc-registration-page button.event-pill {
    border-color: rgba(4, 157, 240, 0.32);
}

/* Big primary CTA */
body.page-kotc-registration-page .landing-actions {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.page-kotc-registration-page .join-start-btn {
    background: var(--dal-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 18px 36px;
    min-width: 220px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 32px rgba(4, 157, 240, 0.34);
    transition: background 0.15s, transform 0.15s;
}
body.page-kotc-registration-page .join-start-btn:hover {
    background: var(--dal-primary-hover);
    transform: translateY(-1px);
}

/* Full-screen wizard card */
body.page-kotc-registration-page .card.is-open {
    background:
        radial-gradient(circle at 50% -10%, rgba(4, 157, 240, 0.32) 0%, transparent 55%),
        linear-gradient(180deg, #0a1828 0%, #050811 100%);
    color: #f6fbfe;
}
body.page-kotc-registration-page .card.is-open::before {
    display: none;
}
/* Wizard mirrors /profile .signin-screen 1:1 */
body.page-kotc-registration-page .card.is-open {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
body.page-kotc-registration-page .join-modal-shell {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 22px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Kill the green/yellow shell ::before decoration */
body.page-kotc-registration-page .join-modal-shell::before {
    display: none;
}
/* Topbar matches .signin-topbar */
body.page-kotc-registration-page .join-modal-header {
    position: static;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    height: 60px;
    margin: 0 0 0 -8px;
    padding: env(safe-area-inset-top) 0 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.page-kotc-registration-page button.join-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #fff;
    box-shadow: none;
    transition: background 0.15s;
    flex: 0 0 auto;
}
body.page-kotc-registration-page button.join-modal-close:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
body.page-kotc-registration-page button.join-modal-close svg {
    width: 22px;
    height: 22px;
}
body.page-kotc-registration-page .join-modal-title-block {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 1;
}
/* Brand wordmark matches .signin-brand */
body.page-kotc-registration-page .join-modal-kicker {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--dal-primary);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
body.page-kotc-registration-page .join-modal-title-block h2 {
    display: none;
}
body.page-kotc-registration-page button.join-modal-event-code {
    display: none;
}
body.page-kotc-registration-page .join-stepper {
    display: none;
}
body.page-kotc-registration-page .join-email-input label[for="guestEmail"] {
    display: none;
}
/* Form body matches .signin-body */
body.page-kotc-registration-page .join-modal-form {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: clamp(12px, 3vh, 40px) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* Section wrapper is invisible to layout — children flow as if no section */
body.page-kotc-registration-page .join-modal-section {
    display: contents;
}
body.page-kotc-registration-page .join-modal-section::before {
    display: none;
}
/* Once the user is past email lookup, hide the entire email section so the
   profile step stands alone (back button is the way to edit the email).
   Also pull the H1 right to the top — the form is long, no need for the
   signin-style empty space above it. */
body.page-kotc-registration-page #registerFormBox:has(#profileFieldsBox:not(.hidden)) .join-email-section {
    display: none;
}
body.page-kotc-registration-page #registerFormBox:has(#profileFieldsBox:not(.hidden)) {
    padding-top: 0;
}
/* Profile step: hide the redundant status hint (h1 + form already imply intent) */
body.page-kotc-registration-page .card.is-open:has(#profileFieldsBox:not(.hidden)) #statusBox {
    display: none;
}
body.page-kotc-registration-page .join-section-index {
    display: none;
}
body.page-kotc-registration-page .join-section-head {
    margin: 0;
    display: block;
}
/* H1 matches .signin-h1 */
body.page-kotc-registration-page .join-section-head h3 {
    color: #fff;
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 10px;
}
body.page-kotc-registration-page .join-email-input {
    display: block;
    margin: 0;
    padding: 0;
    gap: 0;
}
/* Input matches .signin-input */
body.page-kotc-registration-page .join-modal-form input,
body.page-kotc-registration-page .join-modal-form select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0 0 8px;
    min-height: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
body.page-kotc-registration-page .join-modal-form input::placeholder {
    color: rgba(246, 251, 254, 0.55);
    font-weight: 400;
}
body.page-kotc-registration-page .join-modal-form input:focus,
body.page-kotc-registration-page .join-modal-form select:focus {
    outline: none;
    border-color: rgba(4, 157, 240, 0.65);
    box-shadow: 0 0 0 3px rgba(4, 157, 240, 0.18);
    background: rgba(255, 255, 255, 0.10);
}
body.page-kotc-registration-page .join-fields-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Continue button matches .signin-btn */
body.page-kotc-registration-page .join-modal-form #emailLookupButton,
body.page-kotc-registration-page .join-modal-form #registerButton,
body.page-kotc-registration-page #emailLookupButton,
body.page-kotc-registration-page #registerButton {
    width: 100%;
    padding: 17px 18px;
    border-radius: 6px;
    border: none;
    background: var(--dal-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    min-height: 0;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s;
}
body.page-kotc-registration-page .join-modal-form #emailLookupButton:hover,
body.page-kotc-registration-page .join-modal-form #registerButton:hover {
    background: var(--dal-primary-hover);
    box-shadow: none;
}
body.page-kotc-registration-page .join-modal-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10, 24, 40, 0) 0%, rgba(10, 24, 40, 0.92) 28%, #0a1828 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.page-kotc-registration-page .join-modal-bottom #registerButton {
    max-width: 480px;
}
body.page-kotc-registration-page .join-modal-bottom .note {
    display: block;
    margin: 8px auto 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    max-width: 320px;
}
/* Make sure scrollable content has room above the fixed CTA */
body.page-kotc-registration-page #registerFormBox:has(#profileFieldsBox:not(.hidden)) {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
body.page-kotc-registration-page #registerFormBox:has(#guestEmailInputBox:not(.hidden)) {
    padding-bottom: 0;
}

/* Stepper */
body.page-kotc-registration-page .join-stepper {
    margin: 6px 0 22px;
    gap: 6px;
}
body.page-kotc-registration-page .join-step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(246, 251, 254, 0.55);
    font-size: 0.84rem;
    font-weight: 700;
}
body.page-kotc-registration-page .join-step.is-active {
    background: rgba(4, 157, 240, 0.18);
    border-color: rgba(4, 157, 240, 0.4);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .join-step.is-done {
    background: rgba(4, 157, 240, 0.10);
    border-color: rgba(4, 157, 240, 0.32);
    color: rgba(246, 251, 254, 0.78);
}
body.page-kotc-registration-page .join-step-dot {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(246, 251, 254, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
body.page-kotc-registration-page .join-step.is-active .join-step-dot {
    background: var(--dal-primary);
    color: #fff;
    border-color: var(--dal-primary);
}
body.page-kotc-registration-page .join-step.is-done .join-step-dot {
    background: var(--dal-primary-hover);
    color: #fff;
    border-color: var(--dal-primary-hover);
}

/* Section card */
body.page-kotc-registration-page .join-modal-form {
    gap: 14px;
}
body.page-kotc-registration-page .join-modal-section {
    background: rgba(8, 20, 34, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .join-modal-section::before {
    background: var(--dal-primary);
    height: 3px;
}
body.page-kotc-registration-page .join-section-index {
    background: var(--dal-primary);
    color: #fff;
}
body.page-kotc-registration-page .join-section-head h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Form labels & inputs */
body.page-kotc-registration-page .join-modal-form label,
body.page-kotc-registration-page .join-email-input label,
body.page-kotc-registration-page .join-fields-grid label,
body.page-kotc-registration-page .field-title {
    color: rgba(246, 251, 254, 0.78);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 3px;
    display: block;
}
body.page-kotc-registration-page .field-optional {
    color: rgba(246, 251, 254, 0.45);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
body.page-kotc-registration-page .join-modal-form input,
body.page-kotc-registration-page .join-modal-form select,
body.page-kotc-registration-page input[type="email"],
body.page-kotc-registration-page input[type="text"],
body.page-kotc-registration-page input[type="number"],
body.page-kotc-registration-page select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: none;
    min-height: 0;
}
body.page-kotc-registration-page .join-modal-form input::placeholder,
body.page-kotc-registration-page input::placeholder {
    color: rgba(246, 251, 254, 0.42);
    font-weight: 500;
}
body.page-kotc-registration-page .join-modal-form input:focus,
body.page-kotc-registration-page .join-modal-form select:focus,
body.page-kotc-registration-page input:focus,
body.page-kotc-registration-page select:focus {
    outline: none;
    border-color: rgba(4, 157, 240, 0.7);
    box-shadow: 0 0 0 3px rgba(4, 157, 240, 0.22);
    background: rgba(255, 255, 255, 0.08);
}
body.page-kotc-registration-page select option {
    background: #0a1828;
    color: #fff;
}

/* Account box */
body.page-kotc-registration-page .join-modal-form .account-box,
body.page-kotc-registration-page .account-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f6fbfe;
    border-radius: 12px;
    box-shadow: none;
}
body.page-kotc-registration-page .account-label {
    color: rgba(246, 251, 254, 0.55);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
body.page-kotc-registration-page .account-value {
    color: #fff;
    font-weight: 700;
}
body.page-kotc-registration-page .join-modal-form .switch-account-btn,
body.page-kotc-registration-page .switch-account-btn {
    color: var(--dal-primary);
    background: rgba(4, 157, 240, 0.16);
    border: 1px solid rgba(4, 157, 240, 0.4);
    box-shadow: none;
}

/* Field display */
body.page-kotc-registration-page .join-modal-form .field-display,
body.page-kotc-registration-page .field-display {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 12px;
    box-shadow: none;
}
body.page-kotc-registration-page .join-modal-form .field-title,
body.page-kotc-registration-page .join-modal-form .field-optional {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .join-modal-form .field-value,
body.page-kotc-registration-page .field-value {
    color: #fff;
}
body.page-kotc-registration-page .join-modal-form .field-edit-btn,
body.page-kotc-registration-page .field-edit-btn {
    color: var(--dal-primary);
    background: rgba(4, 157, 240, 0.18);
    border: 1px solid rgba(4, 157, 240, 0.35);
    box-shadow: none;
}

/* Continue / Submit buttons */
body.page-kotc-registration-page #emailLookupButton,
body.page-kotc-registration-page #registerButton {
    background: var(--dal-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: none;
}
body.page-kotc-registration-page #emailLookupButton:hover,
body.page-kotc-registration-page #registerButton:hover {
    background: var(--dal-primary-hover);
}
body.page-kotc-registration-page .note {
    color: rgba(246, 251, 254, 0.55);
}

/* Status box */
body.page-kotc-registration-page .status-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(246, 251, 254, 0.85);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 auto 8px;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    align-self: center;
}
body.page-kotc-registration-page .status-box.is-error {
    background: rgba(255, 110, 110, 0.12);
    border-color: rgba(255, 110, 110, 0.4);
    color: #ff9d9d;
}
body.page-kotc-registration-page .status-box.is-success {
    background: rgba(150, 230, 160, 0.14);
    border-color: rgba(150, 230, 160, 0.4);
    color: #a4eaae;
}

/* Live view dark theme */
body.page-kotc-registration-page .event-live-view {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
body.page-kotc-registration-page .live-profile-card {
    background: rgba(8, 20, 34, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f6fbfe;
    backdrop-filter: blur(18px);
    box-shadow: none;
}
body.page-kotc-registration-page .live-profile-avatar,
body.page-kotc-registration-page .live-profile-initials {
    background: linear-gradient(160deg, var(--dal-primary), var(--dal-primary-active));
    color: #fff;
}
body.page-kotc-registration-page .live-profile-name {
    color: #fff;
}
body.page-kotc-registration-page .live-profile-title {
    color: rgba(246, 251, 254, 0.78);
}
body.page-kotc-registration-page .live-profile-rating {
    background: rgba(4, 157, 240, 0.22);
    border: 1px solid rgba(4, 157, 240, 0.5);
    color: var(--dal-primary);
    font-weight: 800;
    box-shadow: none;
}
body.page-kotc-registration-page .live-status-text {
    background: rgba(8, 20, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(246, 251, 254, 0.7);
    box-shadow: none;
}
body.page-kotc-registration-page .live-status-text.is-error {
    background: rgba(255, 110, 110, 0.12);
    border-color: rgba(255, 110, 110, 0.4);
    color: #ff9d9d;
}
body.page-kotc-registration-page .live-status-text.is-success {
    background: rgba(150, 230, 160, 0.14);
    border-color: rgba(150, 230, 160, 0.4);
    color: #a4eaae;
}

body.page-kotc-registration-page .live-view-header {
    background: rgba(8, 20, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f6fbfe;
    box-shadow: none;
}
body.page-kotc-registration-page .live-kicker {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .live-view-header h2 {
    color: #fff;
}
body.page-kotc-registration-page .live-view-header p {
    color: rgba(246, 251, 254, 0.7);
}
body.page-kotc-registration-page .live-refresh-btn {
    background: rgba(4, 157, 240, 0.18);
    border: 1px solid rgba(4, 157, 240, 0.4);
    color: var(--dal-primary);
    box-shadow: none;
}

body.page-kotc-registration-page .live-view-tabs {
    background: rgba(8, 20, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 4px;
}
body.page-kotc-registration-page .live-tab-btn {
    background: transparent;
    color: rgba(246, 251, 254, 0.65);
    border: none;
    font-weight: 700;
    box-shadow: none;
}
body.page-kotc-registration-page .live-tab-btn.is-active {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
}

body.page-kotc-registration-page .live-status-text {
    color: rgba(246, 251, 254, 0.6);
}
body.page-kotc-registration-page .live-section {
    background: rgba(8, 20, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f6fbfe;
    backdrop-filter: blur(14px);
    box-shadow: none;
}
body.page-kotc-registration-page .live-section-title {
    color: #fff;
}
body.page-kotc-registration-page .live-empty {
    color: rgba(246, 251, 254, 0.5);
}

body.page-kotc-registration-page .live-leaderboard-tabs {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
    box-shadow: none;
}
body.page-kotc-registration-page .live-subtab-btn {
    background: transparent;
    color: rgba(246, 251, 254, 0.65);
    border: none;
}
body.page-kotc-registration-page .live-subtab-btn.is-active {
    background: var(--dal-primary);
    color: #fff;
}

body.page-kotc-registration-page .live-global-card-header {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-global-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-global-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}
body.page-kotc-registration-page .live-global-card.is-self {
    background: rgba(4, 157, 240, 0.18);
    border-color: rgba(4, 157, 240, 0.55);
}
body.page-kotc-registration-page .live-global-card .rank {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(246, 251, 254, 0.85);
}
body.page-kotc-registration-page .live-global-card .rank.top {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .live-global-card .player-name {
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-global-card .player-meta {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-global-card .live-global-stat strong {
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-global-card .trend.up {
    color: #9be8a3;
}
body.page-kotc-registration-page .live-global-card .trend.down {
    color: #ff9d9d;
}
body.page-kotc-registration-page .live-global-card .trend.flat {
    color: rgba(246, 251, 254, 0.5);
}
body.page-kotc-registration-page .live-global-card .live-global-stat.is-wins strong {
    color: #9be8a3;
}
body.page-kotc-registration-page .live-global-card .live-global-stat.is-losses strong {
    color: #ff9d9d;
}
body.page-kotc-registration-page .live-global-card .live-global-stat.is-draws strong {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-global-card .live-global-stat.is-diff strong {
    color: #f6fbfe;
}

body.page-kotc-registration-page .live-logout-area {
    margin-top: 18px;
}
body.page-kotc-registration-page .live-logout-btn {
    background: transparent;
    color: rgba(246, 251, 254, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
body.page-kotc-registration-page .live-logout-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Mobile bottom tab bar for live view */
@media (max-width: 767.98px) {
    body.page-kotc-registration-page .live-view-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        margin: 0;
        background: rgba(4, 11, 20, 0.92);
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0;
        backdrop-filter: blur(20px);
    }
    body.page-kotc-registration-page .live-tab-btn {
        flex-direction: column;
        padding: 8px 4px;
        font-size: 0.72rem;
        border-radius: 10px;
        gap: 2px;
    }
    body.page-kotc-registration-page .live-tab-btn.is-active {
        background: rgba(4, 157, 240, 0.22);
    }
}

/* Live Courts dark theme */
body.page-kotc-registration-page .live-court-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-court-card.is-playing {
    background: rgba(4, 157, 240, 0.14);
    border-color: rgba(4, 157, 240, 0.45);
}
body.page-kotc-registration-page .live-court-card.is-ready,
body.page-kotc-registration-page .live-court-card.is-staging {
    background: rgba(155, 232, 163, 0.08);
    border-color: rgba(155, 232, 163, 0.36);
}
body.page-kotc-registration-page .live-court-top {
    background: rgba(255, 255, 255, 0.04);
    color: #f6fbfe;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
body.page-kotc-registration-page .live-court-timer {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(246, 251, 254, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
body.page-kotc-registration-page .live-court-card.is-playing .live-court-timer {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
    border-color: rgba(4, 157, 240, 0.45);
}
body.page-kotc-registration-page .live-court-card.is-ready .live-court-timer,
body.page-kotc-registration-page .live-court-card.is-staging .live-court-timer {
    background: rgba(155, 232, 163, 0.18);
    color: #9be8a3;
    border-color: rgba(155, 232, 163, 0.40);
}
body.page-kotc-registration-page .live-court-note {
    color: rgba(246, 251, 254, 0.60);
}
body.page-kotc-registration-page .live-team-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f6fbfe;
    box-shadow: none;
}
body.page-kotc-registration-page .live-team-label {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .live-vs {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-player-line strong,
body.page-kotc-registration-page .live-player-line {
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-player-line span {
    color: rgba(246, 251, 254, 0.55);
}

/* Waiting list dark theme */
body.page-kotc-registration-page .live-waiting-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-waiting-chip.is-paused {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.7;
}
body.page-kotc-registration-page .live-waiting-chip span {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .live-waiting-chip strong {
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-waiting-chip small {
    color: rgba(246, 251, 254, 0.55);
}

/* History dark theme */
body.page-kotc-registration-page .live-history-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .live-history-meta {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-history-score span {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-history-score .is-winner {
    color: #f6fbfe;
    font-weight: 900;
}
body.page-kotc-registration-page .live-history-score small {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .live-history-score strong {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
    border: 1px solid rgba(4, 157, 240, 0.40);
    font-weight: 900;
}

/* Empty state dark theme */
body.page-kotc-registration-page .live-empty {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(246, 251, 254, 0.55);
}

/* Profile modal dark */
body.page-kotc-registration-page .profile-modal-backdrop {
    background: rgba(4, 11, 20, 0.78);
    backdrop-filter: blur(10px);
}
body.page-kotc-registration-page .profile-modal-card {
    background:
        radial-gradient(circle at 50% -10%, rgba(4, 157, 240, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #0a1828 0%, #050811 100%);
    color: #f6fbfe;
    border: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
}
body.page-kotc-registration-page .profile-modal-overview {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: none;
    backdrop-filter: blur(14px);
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-overview::before {
    display: none;
}
/* Signin-style header bar inside the profile modal */
body.page-kotc-registration-page .profile-modal-card .profile-modal-header,
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 60px;
    margin: 0 0 0 -8px;
    padding: env(safe-area-inset-top) 0 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-card .profile-modal-close,
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-close {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
    backdrop-filter: none;
    flex: 0 0 auto;
    cursor: pointer;
}
body.page-kotc-registration-page .profile-modal-card .profile-modal-close:hover,
body.page-kotc-registration-page .profile-modal.is-live-state .profile-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-card .profile-modal-close svg {
    width: 22px;
    height: 22px;
}
body.page-kotc-registration-page .profile-modal-brand {
    color: var(--dal-primary);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-edit-button {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
    border: 1px solid rgba(4, 157, 240, 0.4);
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-personal-panel,
body.page-kotc-registration-page .profile-modal-performance-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-name {
    color: #fff;
}
body.page-kotc-registration-page .profile-modal-personal-hint {
    color: rgba(246, 251, 254, 0.6);
}
body.page-kotc-registration-page .profile-modal-personal-field dt {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .profile-modal-personal-field dd {
    color: #fff;
}
body.page-kotc-registration-page .profile-modal-rating-value {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-rating-tier {
    color: rgba(246, 251, 254, 0.75);
}
body.page-kotc-registration-page .profile-modal-stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #f6fbfe;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-stat-icon {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-history-section {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #f6fbfe;
    backdrop-filter: none;
}
body.page-kotc-registration-page .profile-modal-history-section::before {
    display: none;
}
body.page-kotc-registration-page .profile-modal-rating-tier {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
    border: 1px solid rgba(4, 157, 240, 0.45);
}
/* Match history cards dark */
body.page-kotc-registration-page .profile-modal-match-card {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: none;
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-match-subtitle {
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .profile-modal-team-label {
    color: rgba(246, 251, 254, 0.5);
}
body.page-kotc-registration-page .profile-modal-team-line strong {
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-team-separator {
    color: rgba(246, 251, 254, 0.4);
}
body.page-kotc-registration-page .profile-modal-team-player.is-self {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-match-title {
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-match-score {
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-positive {
    background: rgba(80, 220, 130, 0.18);
    color: #9be8a3;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-negative {
    background: rgba(255, 110, 110, 0.16);
    color: #ff9d9d;
}
body.page-kotc-registration-page .profile-modal-match-delta.is-even {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-match-result.is-win {
    background: rgba(80, 220, 130, 0.20);
    color: #9be8a3;
}
body.page-kotc-registration-page .profile-modal-match-result.is-loss {
    background: rgba(255, 110, 110, 0.18);
    color: #ff9d9d;
}
body.page-kotc-registration-page .profile-modal-match-result.is-draw,
body.page-kotc-registration-page .profile-modal-match-result.is-even {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-match-icon {
    background: rgba(4, 157, 240, 0.18);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-match-icon.is-win {
    background: rgba(80, 220, 130, 0.20);
    color: #9be8a3;
}
body.page-kotc-registration-page .profile-modal-match-icon.is-loss {
    background: rgba(255, 110, 110, 0.18);
    color: #ff9d9d;
}
body.page-kotc-registration-page .profile-modal-empty-state {
    background: rgba(8, 20, 34, 0.32);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(246, 251, 254, 0.6);
}
body.page-kotc-registration-page .profile-modal-history-tabs {
    display: flex;
    gap: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    flex: 0 0 auto;
}
body.page-kotc-registration-page .profile-modal-history-tab {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(246, 251, 254, 0.50);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 0 8px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}
body.page-kotc-registration-page .profile-modal-history-tab:hover {
    transform: none;
    box-shadow: none;
}
body.page-kotc-registration-page .profile-modal-history-tab:hover {
    color: rgba(246, 251, 254, 0.85);
}
body.page-kotc-registration-page .profile-modal-history-tab.is-active {
    color: var(--dal-primary);
    border-bottom-color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-history-tab:focus-visible {
    outline: 2px solid rgba(4, 157, 240, 0.45);
    outline-offset: 4px;
    border-radius: 4px;
}
.profile-modal.is-view-only .profile-modal-history-tabs,
.profile-modal.is-view-only #profileModalBookingList {
    display: none !important;
}
body.page-kotc-registration-page .profile-modal-booking-card {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f6fbfe;
}
body.page-kotc-registration-page .profile-modal-booking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
body.page-kotc-registration-page .profile-modal-booking-when {
    min-width: 0;
    color: #f6fbfe;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-booking-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(246, 251, 254, 0.75);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-booking-status.is-upcoming {
    background: rgba(4, 157, 240, 0.22);
    border-color: rgba(4, 157, 240, 0.45);
    color: var(--dal-primary);
}
body.page-kotc-registration-page .profile-modal-booking-status.is-completed {
    background: rgba(155, 232, 163, 0.18);
    border-color: rgba(155, 232, 163, 0.45);
    color: #9be8a3;
}
body.page-kotc-registration-page .profile-modal-booking-status.is-cancelled {
    background: rgba(255, 157, 157, 0.16);
    border-color: rgba(255, 157, 157, 0.40);
    color: #ff9d9d;
}
body.page-kotc-registration-page .profile-modal-booking-status.is-draft {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(246, 251, 254, 0.55);
}
body.page-kotc-registration-page .profile-modal-booking-meta {
    color: rgba(246, 251, 254, 0.65);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
body.page-kotc-registration-page .profile-modal-booking-coach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: start;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(4, 157, 240, 0.14);
    border: 1px solid rgba(4, 157, 240, 0.32);
    color: #f6fbfe;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}
body.page-kotc-registration-page .profile-modal-booking-coach-label {
    color: var(--dal-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-booking-coach strong {
    font-weight: 800;
}
body.page-kotc-registration-page .profile-modal-booking-notes {
    color: rgba(246, 251, 254, 0.7);
    font-size: 12px;
    line-height: 1.4;
    font-style: italic;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    padding-left: 10px;
}
body.page-kotc-registration-page .profile-modal-booking-review {
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(4, 157, 240, 0.10);
    border: 1px solid rgba(4, 157, 240, 0.22);
}
body.page-kotc-registration-page .profile-modal-booking-review-head {
    margin-bottom: 4px;
    color: var(--dal-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
body.page-kotc-registration-page .profile-modal-booking-review p {
    margin: 0;
    color: #f6fbfe;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
body.page-kotc-registration-page .profile-modal-form-panel {
    background:
        radial-gradient(circle at 50% -10%, rgba(4, 157, 240, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #0a1828 0%, #050811 100%);
    color: #f6fbfe;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
body.page-kotc-registration-page .profile-modal-form-head strong {
    color: #fff;
}
body.page-kotc-registration-page .profile-modal-form-close {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
body.page-kotc-registration-page .profile-modal-field span {
    color: rgba(246, 251, 254, 0.7);
}
body.page-kotc-registration-page .profile-modal-primary-button {
    background: var(--dal-primary);
    color: #fff;
    border: none;
}
body.page-kotc-registration-page .profile-modal-primary-button:hover {
    background: var(--dal-primary-hover);
}
body.page-kotc-registration-page .profile-modal-secondary-button {
    background: transparent;
    color: rgba(246, 251, 254, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
body.page-kotc-registration-page .profile-modal-icon-button {
    background: rgba(4, 157, 240, 0.22);
    color: #fff;
    border: 1px solid rgba(4, 157, 240, 0.5);
}

/* External browser modal */
body.page-kotc-registration-page .external-browser-modal {
    background: rgba(4, 11, 20, 0.86);
    backdrop-filter: blur(12px);
}
body.page-kotc-registration-page .external-browser-card {
    background:
        radial-gradient(circle at 50% -10%, rgba(4, 157, 240, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #0a1828 0%, #050811 100%);
    color: #f6fbfe;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
}
body.page-kotc-registration-page .external-browser-icon {
    background: rgba(4, 157, 240, 0.22);
    color: var(--dal-primary);
    border: 1px solid rgba(4, 157, 240, 0.4);
}
body.page-kotc-registration-page .external-browser-card h2 {
    color: #fff;
}
body.page-kotc-registration-page .external-browser-card p {
    color: rgba(246, 251, 254, 0.78);
}
body.page-kotc-registration-page .external-browser-card #openExternalBrowserButton {
    background: var(--dal-primary);
    color: #fff;
    border: none;
}
body.page-kotc-registration-page .external-browser-card .secondary-button {
    background: transparent;
    color: rgba(246, 251, 254, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
body.page-kotc-registration-page .external-browser-copy {
    color: rgba(246, 251, 254, 0.6);
}
body.page-kotc-registration-page #copyExternalBrowserLinkButton {
    background: transparent;
    color: var(--dal-primary);
    border: 1px solid rgba(4, 157, 240, 0.4);
}

/* Loading overlay */
body.page-kotc-registration-page .loading-overlay {
    background: rgba(5, 8, 17, 0.94);
}
body.page-kotc-registration-page .loading-popup {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
}
body.page-kotc-registration-page .loading-title {
    color: var(--dal-primary);
}
body.page-kotc-registration-page .loading-message {
    color: rgba(246, 251, 254, 0.78);
}

/* =========================================================
   tournament.html (page-tournament)
   ========================================================= */
body.page-tournament {
            font-family: var(--dal-font);
            background-color: #dfe7ee;
            background-image: linear-gradient(180deg, #f4f8fb 0%, #dce6ee 100%);
            color: #17314f;
            margin: 0;
            padding: 0;
            min-width: 320px;
        }

        body.page-tournament .header {
            background-color: #1cabe2;
            background-image: linear-gradient(135deg, #168ec0 0%, #1cabe2 58%, #55c7ef 100%);
            color: #f7fbff;
            padding: 0 14px 22px;
            box-shadow: 0 10px 24px rgba(28,171,226,0.24);
        }
        body.page-tournament .header-inner {
            max-width: none;
            margin: 0;
            position: relative;
            min-height: 0;
            padding: 24px 0 10px;
        }
        body.page-tournament .header-brand {
            max-width: 560px;
        }
        body.page-tournament .header-kicker {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #d6f24f;
            margin-bottom: 10px;
        }
        body.page-tournament .header h1 {
            margin: 0;
            font-size: 30px;
            line-height: 1.05;
            letter-spacing: 1px;
            color: #ffffff;
        }
        body.page-tournament .header-subtitle {
            margin-top: 8px;
            font-size: 14px;
            color: #d7e9f7;
        }

        body.page-tournament button {
            background-color: #16385b;
            background-image: linear-gradient(180deg, #244d73 0%, #16385b 100%);
            color: #f4f8fb;
            border: 1px solid #0d223a;
            padding: 11px 16px;
            font-size: 15px;
            cursor: pointer;
            border-radius: 12px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,39,82,0.15);
        }
        body.page-tournament button:active { position: relative; top: 1px; }
        body.page-tournament button.btn-green {
            background-color: #bfe800;
            background-image: linear-gradient(180deg, #d9f34f 0%, #b4de00 100%);
            color: #17314f;
            border-color: #859f00;
        }
        body.page-tournament button.btn-red {
            background-color: #dc3545;
            background-image: linear-gradient(180deg, #ef5d6c 0%, #cb293a 100%);
            color: #f8fbff;
            border-color: #992030;
        }
        body.page-tournament button.btn-orange {
            background-color: #ff9800;
            background-image: linear-gradient(180deg, #ffcf72 0%, #ff9800 100%);
            color: #17314f;
            border-color: #cc7a00;
        }
        body.page-tournament .mini-btn {
            padding: 6px 10px;
            font-size: 12px;
            border-radius: 10px;
            box-shadow: none;
        }

        body.page-tournament input, body.page-tournament select {
            width: 100%;
            padding: 10px 12px;
            font-size: 15px;
            margin: 5px 0;
            border: 1px solid #b9c7d4;
            border-radius: 12px;
            color: #17314f;
            background: #ffffff;
            box-sizing: border-box;
            box-shadow: inset 0 1px 2px rgba(0,39,82,0.06);
        }
        body.page-tournament input:focus, body.page-tournament select:focus {
            border-color: #1cabe2;
            outline: none;
            box-shadow: 0 0 0 2px rgba(28,171,226,0.14);
        }
        body.page-tournament label {
            display: block;
            font-size: 12px;
            font-weight: bold;
            color: #4d6681;
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        body.page-tournament .container {
            max-width: none;
            margin: 0;
            padding: 20px 14px 34px;
        }
        body.page-tournament .panel {
            background: #ffffff;
            padding: 18px;
            margin-bottom: 18px;
            border: 1px solid #c8d4df;
            border-radius: 18px;
            box-shadow: 0 10px 20px rgba(19,49,79,0.08);
        }
        body.page-tournament .setup-panel {
            background-color: #eff9ff;
            border-color: #a7d1e8;
            box-shadow: 0 10px 18px rgba(28,171,226,0.12);
        }
        body.page-tournament .panel-title {
            font-size: 19px;
            font-weight: bold;
            border-bottom: 1px solid #d7e4ee;
            padding-bottom: 10px;
            margin-bottom: 14px;
            color: #13304f;
            letter-spacing: 0.3px;
        }
        body.page-tournament .panel-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid #d7e4ee;
            padding-bottom: 10px;
            margin-bottom: 14px;
        }
        body.page-tournament .panel-title-row .panel-title {
            border: 0;
            padding: 0;
            margin: 0;
        }
        body.page-tournament .panel-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        body.page-tournament .panel-actions button {
            white-space: nowrap;
        }
        body.page-tournament .panel-note {
            font-size: 13px;
            color: #60778d;
            line-height: 1.5;
            margin: -4px 0 14px;
        }
        body.page-tournament .registration-layout {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 16px;
            align-items: start;
        }
        body.page-tournament .qr-preview-box {
            background: #f7fbfe;
            border: 1px solid #d4e3ee;
            border-radius: 18px;
            padding: 16px 14px;
            margin-bottom: 14px;
        }
        body.page-tournament .qr-image {
            display: block;
            width: 240px;
            height: 240px;
            margin: 0 auto 14px;
            background: #ffffff;
            border: 1px solid #d7e4ee;
            border-radius: 14px;
        }
        body.page-tournament .qr-note {
            font-size: 13px;
            color: #60778d;
            line-height: 1.5;
            margin-bottom: 14px;
        }
        body.page-tournament .sync-status {
            margin: 8px 0 14px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #edf5fb;
            color: #20415f;
            font-size: 13px;
            line-height: 1.5;
            border: 1px solid #d2e3ef;
        }
        body.page-tournament .sync-status.is-error {
            background: #fff2f3;
            border-color: #f0c7cd;
            color: #9f3240;
        }
        body.page-tournament .sync-status.is-success {
            background: #f1f9db;
            border-color: #d4e7a4;
            color: #45620b;
        }
        body.page-tournament .registration-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }
        body.page-tournament .registration-actions button {
            width: 100%;
            min-height: 48px;
        }
        body.page-tournament .registered-player-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        body.page-tournament .registered-player-card {
            background: #f7fbfe;
            border: 1px solid #d4e3ee;
            border-radius: 14px;
            padding: 10px 12px;
        }
        body.page-tournament .registered-player-card.is-assigned {
            background: #fbfff0;
            border-color: #d9e8a9;
        }
        body.page-tournament .registered-player-name {
            color: #13304f;
            font-weight: bold;
            line-height: 1.35;
        }
        body.page-tournament .registered-player-meta {
            color: #59718a;
            font-size: 12px;
            line-height: 1.45;
            margin-top: 4px;
        }
        body.page-tournament .assignment-layout {
            display: grid;
            grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr);
            gap: 14px;
            align-items: start;
        }
        body.page-tournament .assignment-section-title {
            color: #13304f;
            font-size: 16px;
            font-weight: bold;
            margin: 6px 0 10px;
        }
        body.page-tournament .assignment-team-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        body.page-tournament .assignment-team-card {
            background: #ffffff;
            border: 1px solid #c8d4df;
            border-radius: 14px;
            padding: 12px;
            box-shadow: 0 5px 10px rgba(0,39,82,0.06);
        }
        body.page-tournament .assignment-team-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
            color: #13304f;
            font-weight: bold;
        }
        body.page-tournament .assignment-slot {
            border-top: 1px dashed #d4e3ee;
            padding-top: 10px;
            margin-top: 10px;
        }
        body.page-tournament .assignment-slot:first-of-type {
            border-top: 0;
            padding-top: 0;
            margin-top: 0;
        }
        body.page-tournament .assignment-slot-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 76px;
            gap: 8px;
            align-items: end;
        }
        body.page-tournament .assignment-clear-btn {
            padding: 10px 8px;
            font-size: 12px;
            border-radius: 10px;
            min-height: 42px;
            box-shadow: none;
        }
        body.page-tournament .assignment-current {
            color: #59718a;
            font-size: 12px;
            line-height: 1.45;
            margin-top: 4px;
            min-height: 18px;
        }
        body.page-tournament .hidden { display: none !important; }

        body.page-tournament .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 18px;
        }
        body.page-tournament .metric-card {
            background: #ffffff;
            border: 1px solid #c8d4df;
            border-left: 6px solid #1cabe2;
            border-radius: 18px;
            padding: 16px;
            box-shadow: 0 8px 16px rgba(0,39,82,0.08);
            min-height: 88px;
            box-sizing: border-box;
        }
        body.page-tournament .metric-card.is-lime { border-left-color: #b4de00; }
        body.page-tournament .metric-card.is-orange { border-left-color: #ff9800; }
        body.page-tournament .metric-card.is-navy { border-left-color: #16385b; }
        body.page-tournament .metric-label {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            color: #60778d;
            text-transform: uppercase;
        }
        body.page-tournament .metric-value {
            margin-top: 6px;
            color: #13304f;
            font-size: 26px;
            font-weight: bold;
            line-height: 1.1;
        }
        body.page-tournament .metric-sub {
            margin-top: 5px;
            color: #60778d;
            font-size: 13px;
        }

        body.page-tournament .phase-strip {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            gap: 14px;
            margin-bottom: 18px;
        }
        body.page-tournament .phase-card {
            background: #f7fbfe;
            border: 1px solid #d4e3ee;
            border-radius: 16px;
            padding: 14px;
        }
        body.page-tournament .phase-card-title {
            color: #13304f;
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        body.page-tournament .phase-card-copy {
            color: #556d85;
            font-size: 14px;
            line-height: 1.55;
        }

        body.page-tournament .table-wrap { overflow-x: auto; }
        body.page-tournament .summary-status-pill {
            display: inline-block;
            padding: 7px 10px;
            border-radius: 999px;
            background: #edf5fb;
            color: #20415f;
            font-size: 12px;
            font-weight: bold;
            white-space: nowrap;
        }
        body.page-tournament .summary-status-pill.is-locked {
            background: #d9f07d;
            color: #17314f;
        }
        body.page-tournament .summary-table {
            width: 100%;
            min-width: 760px;
            border-collapse: separate;
            border-spacing: 0 8px;
            font-size: 14px;
        }
        body.page-tournament .summary-table th {
            background: #17314f;
            color: #f4f8fb;
            padding: 10px 8px;
            font-size: 12px;
            letter-spacing: 0.5px;
            text-align: left;
            white-space: nowrap;
        }
        body.page-tournament .summary-table th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
        body.page-tournament .summary-table th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
        body.page-tournament .summary-table td {
            background: #ffffff;
            padding: 10px 8px;
            vertical-align: middle;
            border-top: 1px solid #e0e8ee;
            border-bottom: 1px solid #e0e8ee;
        }
        body.page-tournament .summary-table td:first-child {
            border-left: 1px solid #e0e8ee;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        body.page-tournament .summary-table td:last-child {
            border-right: 1px solid #e0e8ee;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        body.page-tournament .summary-table tr.is-qualified td {
            background: #fbfff0;
            border-color: #d9e8a9;
        }
        body.page-tournament .rank-cell {
            color: #13304f;
            font-size: 18px;
            font-weight: bold;
            white-space: nowrap;
        }
        body.page-tournament .leaderboard-team { min-width: 230px; }
        body.page-tournament .summary-number {
            color: #13304f;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
        }
        body.page-tournament .summary-number.is-positive { color: #45620b; }
        body.page-tournament .summary-number.is-negative { color: #9f3240; }
        body.page-tournament .rr-table { min-width: 980px; font-size: 13px; }
        body.page-tournament .rr-table th, body.page-tournament .rr-table td { text-align: center; }
        body.page-tournament .rr-table th:first-child, body.page-tournament .rr-table td:first-child { text-align: left; min-width: 180px; }
        body.page-tournament .rr-team-heading { color: #13304f; font-weight: bold; line-height: 1.3; }
        body.page-tournament .rr-team-sub { color: #6b7f93; font-size: 11px; margin-top: 2px; }
        body.page-tournament .rr-result-box {
            min-width: 72px;
            min-height: 42px;
            border: 1px solid #d7e4ee;
            border-radius: 12px;
            background: #f7fbfe;
            padding: 6px;
            box-sizing: border-box;
        }
        body.page-tournament .rr-result-box.is-self { background: #edf2f6; color: #9aa8b4; line-height: 28px; }
        body.page-tournament .rr-result-box.is-win { background: #f1f9db; border-color: #d4e7a4; }
        body.page-tournament .rr-result-box.is-loss { background: #fff2f3; border-color: #f0c7cd; }
        body.page-tournament .rr-result-box.is-live { background: #f1fbff; border-color: #b9deed; }
        body.page-tournament .rr-match-label { color: #60778d; display: block; font-size: 11px; font-weight: bold; line-height: 1.2; }
        body.page-tournament .rr-score { color: #13304f; display: block; font-size: 15px; font-weight: bold; line-height: 1.3; margin-top: 2px; white-space: nowrap; }

        
        body.page-tournament .eb-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px 20px;
            overflow-x: auto;
            min-width: 860px;
        }
        body.page-tournament .eb-col {
            display: flex;
            flex-direction: column;
        }
        body.page-tournament .eb-col-semis { gap: 60px; }
        body.page-tournament .eb-col-finals { position: relative; }
        body.page-tournament .eb-col-champ { align-items: center; margin-left: 10px; }

        body.page-tournament .eb-match {
            display: flex;
            flex-direction: column;
            gap: 6px;
            height: 90px;
            justify-content: center;
            width: 220px;
            position: relative;
        }
        body.page-tournament .eb-match-title {
            font-size: 11px;
            color: #60778d;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            position: absolute;
            top: -18px;
            width: 100%;
            font-weight: bold;
        }
        body.page-tournament .eb-team-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        body.page-tournament .eb-team-wrapper {
            filter: drop-shadow(0px 4px 6px rgba(0, 39, 82, 0.15));
            flex-grow: 1;
            display: flex;
        }
        body.page-tournament .eb-team-shape {
            background: linear-gradient(90deg, #16385b, #244d73);
            clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
            padding: 8px 16px;
            text-align: center;
            font-weight: bold;
            color: #ffffff;
            font-size: 13px;
            width: 100%;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.page-tournament .eb-team-shape.is-tbd {
            background: #e7f2fb;
            color: #60778d;
        }
        body.page-tournament .eb-team-shape.is-winner {
            background: linear-gradient(90deg, #b4de00, #9fc800);
            color: #13304f;
        }
        body.page-tournament .eb-score {
            background: #ffffff;
            color: #13304f;
            padding: 6px 0;
            border-radius: 6px;
            font-weight: bold;
            width: 32px;
            text-align: center;
            border: 1px solid #bacbd8;
            font-size: 14px;
            flex-shrink: 0;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }
        body.page-tournament .eb-connectors {
            display: flex;
            align-items: center;
        }
        body.page-tournament .eb-connectors path {
            stroke: #bacbd8;
        }

        body.page-tournament .eb-trophy-container {
            position: absolute;
            top: -45px;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 10;
        }
        body.page-tournament .eb-trophy {
            font-size: 70px;
            line-height: 1;
            filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.5));
        }

        body.page-tournament .eb-champion-box {
            margin-bottom: 12px;
            width: 240px;
        }
        body.page-tournament .eb-champion-box .eb-team-wrapper {
            filter: drop-shadow(0px 8px 20px rgba(28, 171, 226, 0.3));
        }
        body.page-tournament .eb-champion-box .eb-team-shape {
            background: linear-gradient(90deg, #1cabe2, #168ec0);
            font-size: 18px;
            padding: 14px 20px;
            color: #ffffff;
        }
        body.page-tournament .eb-champion-text {
            font-size: 38px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2px;
            background: linear-gradient(180deg, #1cabe2 0%, #16385b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0px 3px 3px rgba(0, 39, 82, 0.15));
        }

        body.page-tournament .eb-bronze-wrapper {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            padding-top: 30px;
            border-top: 1px dashed #c8d4df;
        }
        body.page-tournament .eb-match-actions {
            position: absolute;
            right: -60px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        body.page-tournament .eb-match-actions button {
            background: #ffffff;
            border: 1px solid #1cabe2;
            color: #1cabe2;
            font-size: 10px;
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,39,82,0.08);
        }
        body.page-tournament .eb-match-actions button:hover {
            background: #f1fbff;
        }

        body.page-tournament .schedule-table {
            width: 100%;
            min-width: 920px;
            border-collapse: separate;
            border-spacing: 0 8px;
            font-size: 14px;
        }
        body.page-tournament .schedule-table th {
            background: #17314f;
            color: #f4f8fb;
            padding: 10px 8px;
            font-size: 13px;
            letter-spacing: 0.5px;
            text-align: left;
        }
        body.page-tournament .schedule-table th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
        body.page-tournament .schedule-table th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
        body.page-tournament .schedule-table td {
            background: #ffffff;
            padding: 10px 8px;
            vertical-align: top;
            border-top: 1px solid #e0e8ee;
            border-bottom: 1px solid #e0e8ee;
        }
        body.page-tournament .schedule-table td:first-child {
            border-left: 1px solid #e0e8ee;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        body.page-tournament .schedule-table td:last-child {
            border-right: 1px solid #e0e8ee;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        body.page-tournament .schedule-table tr.playoff-row td { background: #fbfff0; border-color: #d9e8a9; }
        body.page-tournament .schedule-table tr.playing-row td { background: #f1fbff; border-color: #b9deed; }
        body.page-tournament .schedule-table tr.done-row td { background: #f7f9fb; color: #6d7f92; }
        body.page-tournament .match-pill, body.page-tournament .court-pill, body.page-tournament .phase-pill {
            text-align: center;
            padding: 5px 9px;
            border-radius: 999px;
            font-weight: bold;
            white-space: nowrap;
        }
        body.page-tournament .match-pill { background: #e7f2fb; color: #0f5578; }
        body.page-tournament .court-pill { background: #16385b; color: #f4f8fb; min-width: 58px; text-align: center; }
        body.page-tournament .court-pill.is-live { background: #1cabe2; color: #ffffff; }
        body.page-tournament .court-pill.is-done { background: #d9f07d; color: #17314f; }
        body.page-tournament .court-pill.is-waiting { background: #edf2f6; color: #49627a; }
        body.page-tournament .phase-pill {
            background: #eff4f8;
            color: #49627a;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        body.page-tournament .phase-pill.is-playoff { background: #d9f07d; color: #17314f; }
        body.page-tournament .team-cell { min-width: 210px; }
        body.page-tournament .team-name { color: #13304f; font-size: 15px; font-weight: bold; line-height: 1.35; }
        body.page-tournament .team-meta { margin-top: 4px; color: #59718a; font-size: 12px; line-height: 1.45; }
        body.page-tournament .result-cell { color: #556d85; line-height: 1.45; }
        body.page-tournament .result-score {
            display: inline-block;
            min-width: 74px;
            padding: 5px 9px;
            border-radius: 999px;
            background: #d9f07d;
            color: #17314f;
            font-weight: bold;
            text-align: center;
            margin-right: 8px;
        }
        body.page-tournament .result-score.is-pending { background: #edf2f6; color: #60778d; }
        body.page-tournament .result-winner { color: #13304f; font-weight: bold; margin-top: 5px; }

        body.page-tournament .court-board-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }
        body.page-tournament .court-card {
            background: #ffffff;
            border: 1px solid #bacbd8;
            padding: 16px;
            border-radius: 18px;
            box-shadow: 0 8px 16px rgba(0,39,82,0.08);
        }
        body.page-tournament .court-card.is-active {
            border-color: #1cabe2;
            background-color: #f1fbff;
            box-shadow: 0 14px 26px rgba(28,171,226,0.18);
        }
        body.page-tournament .court-card.is-idle { background: #f8fbfd; border-style: dashed; }
        body.page-tournament .court-header { font-size: 20px; font-weight: bold; margin-bottom: 12px; color: #13304f; }
        body.page-tournament .court-badge {
            display: inline-block;
            padding: 6px 10px;
            background: #16385b;
            color: #f4f8fb;
            font-size: 13px;
            border-radius: 999px;
            margin-right: 10px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        body.page-tournament .court-match {
            border: 1px solid #d6e2ec;
            background: #f5f9fc;
            border-radius: 14px;
            padding: 10px;
            margin-bottom: 10px;
        }
        body.page-tournament .court-match:last-child { margin-bottom: 0; }
        body.page-tournament .court-match.is-playoff { background: #fbfff0; border-color: #d9e8a9; }
        body.page-tournament .court-match-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        body.page-tournament .court-match-id { color: #0f5578; font-size: 13px; font-weight: bold; }
        body.page-tournament .court-match-stage { color: #60778d; font-size: 12px; text-align: right; }
        body.page-tournament .court-match-vs { color: #1cabe2; font-size: 12px; font-weight: bold; margin: 5px 0; text-transform: uppercase; letter-spacing: 1px; }
        body.page-tournament .court-match-note { color: #556d85; font-size: 12px; line-height: 1.45; margin-top: 8px; }
        body.page-tournament .court-actions { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; }
        body.page-tournament .court-actions button { width: 100%; }
        body.page-tournament .court-empty {
            color: #7a8897;
            text-align: center;
            padding: 20px 10px;
            background: #ffffff;
            border: 1px dashed #cad7e1;
            border-radius: 14px;
        }
        body.page-tournament .queue-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
        body.page-tournament .queue-info-item {
            background: #f7fbfe;
            border: 1px solid #d4e3ee;
            border-radius: 14px;
            padding: 10px;
            text-align: center;
        }
        body.page-tournament .queue-info-label { color: #60778d; font-size: 11px; font-weight: bold; letter-spacing: 0.8px; text-transform: uppercase; }
        body.page-tournament .queue-info-value { color: #13304f; font-size: 20px; font-weight: bold; margin-top: 4px; }

        body.page-tournament .teams-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
        body.page-tournament .team-card {
            background: #f7fbfe;
            border: 1px solid #d4e3ee;
            border-radius: 16px;
            padding: 14px;
            min-height: 120px;
            box-sizing: border-box;
        }
        body.page-tournament .team-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        body.page-tournament .seed-pill {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 999px;
            background: #e7f2fb;
            color: #0f5578;
            font-size: 12px;
            font-weight: bold;
        }
        body.page-tournament .team-card-name { color: #13304f; font-size: 16px; font-weight: bold; line-height: 1.35; }
        body.page-tournament .team-player-line { color: #59718a; font-size: 12px; line-height: 1.45; margin-top: 5px; }

        body.page-tournament .empty-state {
            color: #7a8897;
            text-align: center;
            padding: 18px 10px;
            background: #f7fafc;
            border: 1px dashed #cad7e1;
            border-radius: 14px;
        }
        body.page-tournament #scoreModalOverlay {
            display: none;
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(0,39,82,0.82);
            z-index: 9999;
            padding: 20px 14px;
            box-sizing: border-box;
            overflow: auto;
        }
        body.page-tournament .score-modal {
            background: #ffffff;
            width: 92%;
            max-width: 520px;
            margin: 36px auto;
            padding: 24px 22px;
            border-radius: 20px;
            border: 1px solid #9fc9df;
            box-shadow: 0 20px 40px rgba(0,39,82,0.35);
        }
        body.page-tournament .score-modal-title { margin: 0 0 6px; color: #13304f; font-size: 26px; }
        body.page-tournament .score-modal-subtitle { color: #4c6580; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
        body.page-tournament .score-team-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 104px;
            gap: 12px;
            align-items: center;
            margin-bottom: 14px;
            padding: 12px;
            border: 1px solid #d6e3ec;
            border-radius: 14px;
            background: #f8fbfe;
        }
        body.page-tournament .score-team-name { color: #13304f; font-size: 16px; font-weight: bold; line-height: 1.35; }
        body.page-tournament .score-team-meta { color: #59718a; font-size: 12px; line-height: 1.45; margin-top: 4px; }
        body.page-tournament .score-input { text-align: center; font-size: 30px; font-weight: bold; border: 2px solid #1cabe2; border-radius: 14px; margin: 0; padding: 10px 8px; }
        body.page-tournament .score-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
        body.page-tournament .score-modal-actions button { width: 100%; }

        @media screen and (max-width: 1180px) {
            body.page-tournament .header-inner { min-height: 0; padding: 20px 0 0; }
            body.page-tournament .header-brand { max-width: none; text-align: center; }
            body.page-tournament .metrics-grid, body.page-tournament .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body.page-tournament .phase-strip { grid-template-columns: 1fr; }
        }
        @media screen and (max-width: 900px) {
            body.page-tournament .court-board-grid, body.page-tournament .bracket-grid, body.page-tournament .registration-layout, body.page-tournament .assignment-layout, body.page-tournament .assignment-team-grid { grid-template-columns: 1fr; }
            body.page-tournament .qr-image { width: 100%; max-width: 240px; height: auto; }
        }
        @media screen and (max-width: 720px) {
            body.page-tournament .header h1 { font-size: 24px; }
            body.page-tournament .panel { padding: 16px; }
            body.page-tournament .metrics-grid, body.page-tournament .teams-grid, body.page-tournament .registered-player-grid { grid-template-columns: 1fr; }
            body.page-tournament .panel-title-row { align-items: stretch; flex-direction: column; }
            body.page-tournament .panel-actions { justify-content: stretch; }
            body.page-tournament .panel-actions button, body.page-tournament .panel-title-row button { width: 100%; }
            body.page-tournament .queue-info { grid-template-columns: 1fr; }
            body.page-tournament .registration-actions { grid-template-columns: 1fr; }
            body.page-tournament .score-team-row, body.page-tournament .score-modal-actions { grid-template-columns: 1fr; }
        }
        @media print {
            body.page-tournament { background: #ffffff; color: #000000; }
            body.page-tournament .header, body.page-tournament .phase-strip, body.page-tournament .teams-panel { display: none; }
            body.page-tournament .container { padding: 0; }
            body.page-tournament .panel { box-shadow: none; border: 0; padding: 0; }
            body.page-tournament .schedule-table { min-width: 0; border-spacing: 0; font-size: 11px; }
            body.page-tournament .schedule-table td, body.page-tournament .schedule-table th { border-radius: 0 !important; }
        }

/* =========================================================
   Shared utilities and extracted inline styles
   ========================================================= */
.u-hidden { display: none; }
.u-w-100 { width: 100%; }
.u-w-20 { width: 20%; }
.u-w-16 { width: 16%; }
.u-w-25px { width: 25px; }
.u-control-w-60 { width: 60px; }
.u-control-w-70 { width: 70px; }
.u-min-w-250 { min-width: 250px; }
.u-rounded-8 { border-radius: 8px; }
.u-flex-1 { flex: 1; }
.u-grid-full { grid-column: 1 / -1; }
.u-fs-06 { font-size: 0.6rem; }
.u-fs-065 { font-size: 0.65rem; }
.u-fs-07 { font-size: 0.7rem; }
.u-fs-075 { font-size: 0.75rem; }
.u-fs-08 { font-size: 0.8rem; }
.u-fs-085 { font-size: 0.85rem; }
.u-fs-09 { font-size: 0.9rem; }
.u-fs-12 { font-size: 1.2rem; }
.u-z1 { position: relative; z-index: 1; }
.u-letter-03 { letter-spacing: 0.3px; }
.u-letter-05 { letter-spacing: 0.5px; }
.u-nowrap { white-space: nowrap; }
.u-color-oxford { color: var(--luzz-oxford-blue); }
.u-color-marian { color: var(--luzz-marian-blue); }

.dal-empty-hint {
    background: #f5f5f7;
    border-radius: 12px;
    border: 1px dashed #d2d2d7;
}

.dal-liff-profile-tab {
    background-color: var(--luzz-oxford-blue);
    border: 1px solid var(--luzz-marian-blue);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.dal-liff-profile-tab.is-strong {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.dal-liff-id {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dal-liff-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
}
.dal-liff-pic {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border: 1px solid var(--luzz-pickleball-green);
}

.dal-payment-row,
.dal-payment-layer {
    position: relative;
    z-index: 1;
}
.dal-bank-title {
    letter-spacing: 0.5px;
}
.dal-bank-subtitle,
.dal-payment-owner {
    font-size: 0.7rem;
    opacity: 0.8;
}
.dal-payment-meta {
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
}

.dal-status-modal {
    background-color: var(--luzz-anti-white);
    border-radius: 24px;
    border: none;
    text-align: center;
    padding: 30px 20px;
}
.dal-status-icon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 15px;
}
.dal-status-title {
    font-weight: 800;
    color: var(--luzz-oxford-blue);
    letter-spacing: -0.5px;
}
.dal-status-copy {
    color: #86868b;
    font-size: 0.95rem;
    margin-bottom: 25px;
}
body.page-booking .btn-submit.dal-danger-action,
body.page-store .btn-preorder.dal-danger-action {
    background-color: #ff3b30;
    color: #ffffff !important;
}

body.page-booking .dal-switch {
    width: 2.5em;
    height: 1.25em;
}
body.page-booking .booking-total-label,
body.page-booking .booking-slip-label {
    font-size: 0.9rem;
}
body.page-booking .booking-slip-label {
    font-weight: 600;
}
body.page-booking .booking-bill-breakdown {
    background: #ffffff;
    border-radius: 12px;
    font-size: 0.85rem;
    border: 1px solid #e5e5ea;
}
body.page-booking .booking-payment-label {
    color: var(--text-dark);
    justify-content: center;
}
body.page-booking .booking-summary-text {
    font-size: 0.85rem;
}
body.page-booking .schedule-time-sub {
    font-size: 0.7rem;
    color: #86868b;
    font-weight: normal;
}

body.page-store .product-img-wrapper {
    cursor: default;
}
body.page-store .product-img-wrapper.is-zoomable {
    cursor: zoom-in;
}
body.page-store .price-tba {
    opacity: 0.6;
}
body.page-store .stock-message {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
}
body.page-store .stock-message.is-out {
    color: #ff3b30;
}
body.page-store .stock-message.is-available {
    color: var(--luzz-pickleball-green);
}
body.page-store .btn-preorder:disabled {
    background: #555;
    color: #999 !important;
    box-shadow: none;
    cursor: not-allowed;
}
body.page-store .store-payment-label {
    color: var(--luzz-oxford-blue);
}

body.page-dashboard .loading-title {
    color: #1d1d1f;
    font-weight: 600;
}
body.page-dashboard .kpi-value.is-compact {
    font-size: 2.2rem;
}
body.page-dashboard .chart-container.is-tall {
    height: 380px;
}

body.page-luzzreport .report-title {
    font-weight: 800;
    letter-spacing: -1px;
    color: white;
}
body.page-luzzreport .report-date-value {
    font-size: 0.75rem;
}
body.page-luzzreport .report-address-label {
    color: var(--luzz-oxford-blue);
}

body.page-pos .pos-title {
    letter-spacing: 1px;
    color: var(--luzz-pickleball-green);
}
body.page-pos .cart-mode-panel {
    background: var(--luzz-anti-white);
    border: 1px solid #ddd;
}
body.page-pos .cart-mode-panel .btn-check + .btn {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.page-pos .cart-mode-panel .btn-check + .btn-outline-primary,
body.page-pos .cart-mode-panel .btn-check + .btn-outline-success {
    background: transparent !important;
    color: var(--luzz-oxford-blue) !important;
    border: 1.5px solid currentColor !important;
}
body.page-pos .cart-mode-panel .btn-check + .btn-outline-primary {
    color: var(--luzz-marian-blue) !important;
}
body.page-pos .cart-mode-panel .btn-check + .btn-outline-success {
    color: #198754 !important;
}
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-primary,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-primary:hover,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-primary:focus {
    background: var(--luzz-marian-blue) !important;
    border-color: var(--luzz-marian-blue) !important;
    color: #fff !important;
}
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-success,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-success:hover,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-success:focus {
    background: var(--luzz-pickleball-green) !important;
    border-color: var(--luzz-pickleball-green) !important;
    color: var(--luzz-oxford-blue) !important;
}
body.page-pos .cart-mode-panel .pay-method-row { gap: 6px !important; justify-content: center; }
body.page-pos .cart-mode-panel .pay-method-row .pay-method-btn {
    flex: 1 1 0;
    width: auto !important;
    padding: 6px 4px !important;
    font-size: 0.78rem !important;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
body.page-pos .cart-mode-panel .pay-method-row .pay-method-btn i { font-size: 0.85rem; }

body.page-pos .cart-mode-panel .cash-tendered-row {
    display: none;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
}
body.page-pos .cart-mode-panel .cash-tendered-row.is-active { display: flex; }
body.page-pos .cart-mode-panel .cash-tendered-row .input-group { flex: 1 1 0; min-width: 0; }
body.page-pos .cart-mode-panel .cash-change-display {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.25);
    font-size: 0.8rem;
    font-weight: 600;
    color: #146c43;
    white-space: nowrap;
}
body.page-pos .cart-mode-panel .cash-change-display.is-short {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.3);
    color: #b02a37;
}
body.page-pos .cart-mode-panel .cash-change-display .cash-change-label { font-size: 0.7rem; opacity: 0.8; font-weight: 500; }
body.page-pos .cart-mode-panel .btn-check + .btn-outline-warning {
    background: transparent !important;
    color: #c87f00 !important;
    border: 1.5px solid #c87f00 !important;
}
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-warning,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-warning:hover,
body.page-pos .cart-mode-panel .btn-check:checked + .btn-outline-warning:focus {
    background: #ffb020 !important;
    border-color: #c87f00 !important;
    color: #fff !important;
}
body.page-pos #cartTotalDisplay {
    color: var(--luzz-marian-blue);
}
body.page-pos .btn-checkout {
    background-color: var(--luzz-pickleball-green);
}
body.page-pos .btn-checkout.is-restock {
    background-color: #ffc107;
}
body.page-pos .history-list-container {
    max-height: 70vh;
    overflow-y: auto;
}
body.page-pos .btn-low-stock {
    font-weight: 700;
    color: var(--luzz-oxford-blue);
}
body.page-pos .restock-topbar-actions { align-items: center; }
body.page-pos .btn-restock-action {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    font-size: 0.85rem;
    white-space: nowrap;
}
body.page-pos .btn-restock-action:hover,
body.page-pos .btn-restock-action:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
}
body.page-pos .btn-restock-action-warning {
    background: #ffc107 !important;
    color: var(--luzz-oxford-blue) !important;
    border-color: #ffc107 !important;
}
body.page-pos .btn-restock-action-warning:hover,
body.page-pos .btn-restock-action-warning:focus {
    background: #e0a800 !important;
    border-color: #e0a800 !important;
    color: var(--luzz-oxford-blue) !important;
}
body.page-pos.is-restock-mode .cart-pane,
body.page-pos.is-restock-mode .mobile-cart-toggle,
body.page-pos.is-restock-mode .mobile-cart-backdrop { display: none !important; }
body.page-pos.is-restock-mode .products-pane { width: 100% !important; }
@media (max-width: 767.98px) {
    body.page-pos.is-restock-mode .products-pane { padding: 12px; }
    body.page-pos .restock-topbar-actions .btn-restock-action {
        padding: 5px 10px !important;
        font-size: 0.78rem;
    }
}
body.page-pos .low-stock-summary-header {
    border-bottom: 2px solid var(--luzz-oxford-blue);
    padding-bottom: 0.75rem;
}
body.page-pos .low-stock-brand-block {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
}
body.page-pos .low-stock-brand-header {
    border-bottom: 1px dashed #d1d5db;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}
body.page-pos .low-stock-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-top: 0;
}
body.page-pos .low-stock-table tbody td {
    vertical-align: middle;
    padding: 0.45rem 0.5rem;
}
body.page-pos .restock-edit-modal-content {
    border-radius: 16px;
    overflow: hidden;
}
body.page-pos .restock-edit-header {
    background: linear-gradient(135deg, #023e7d 0%, #002752 100%);
    color: #fff;
    border-bottom: 0;
    align-items: flex-start;
    padding: 16px 18px;
}
body.page-pos .restock-edit-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
body.page-pos .restock-edit-title-wrap { flex: 1; min-width: 0; }
body.page-pos .restock-edit-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    margin-bottom: 2px;
}
body.page-pos .restock-edit-header .modal-title { color: #fff; line-height: 1.25; }
body.page-pos .restock-edit-header .small.text-muted { color: rgba(255, 255, 255, 0.65) !important; }
body.page-pos .restock-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}
body.page-pos .restock-section-stock {
    background: linear-gradient(160deg, #f0f9ff 0%, #ffffff 70%);
    border-color: #bae6fd;
}
body.page-pos .restock-section-min { padding: 10px 14px; }
body.page-pos .restock-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--luzz-oxford-blue);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
body.page-pos .restock-section-label-tertiary {
    color: #6b7280;
    margin-bottom: 6px;
}
body.page-pos .restock-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
body.page-pos .restock-priority-high { background: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }
body.page-pos .restock-priority-medium { background: #22c55e; }
body.page-pos .restock-priority-low { background: #cbd5e1; }
body.page-pos .stock-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
body.page-pos .stock-preview-caption {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    text-align: center;
    font-weight: 600;
}
body.page-pos .stock-preview-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--luzz-oxford-blue);
    line-height: 1;
    text-align: center;
    min-width: 60px;
}
body.page-pos .stock-preview-to .stock-preview-value { color: #0ea5e9; font-size: 2rem; }
body.page-pos .stock-preview-arrow {
    color: #94a3b8;
    font-size: 1rem;
    margin-top: 14px;
}
body.page-pos .stock-delta-chip {
    font-weight: 800;
    font-size: 0.85rem;
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 999px;
    margin-top: 14px;
}
body.page-pos .stock-delta-chip.is-negative {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
}
body.page-pos .stock-delta-chip.is-zero { background: #f1f5f9; color: #64748b; }
body.page-pos .stock-quick-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
}
body.page-pos .qty-quick-btn {
    border: 1.5px solid #cbd5e1;
    background: #fff;
    border-radius: 10px;
    padding: 10px 0;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--luzz-oxford-blue);
    transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
body.page-pos .qty-quick-btn:hover { background: #f1f5f9; }
body.page-pos .qty-quick-btn:active { transform: scale(0.94); }
body.page-pos .qty-quick-minus { color: #b91c1c; border-color: #fecaca; }
body.page-pos .qty-quick-minus:hover { background: #fef2f2; }
body.page-pos .qty-quick-plus { color: #0369a1; border-color: #bae6fd; }
body.page-pos .qty-quick-plus:hover { background: #ecfeff; }
body.page-pos .stock-big-input {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    height: auto !important;
    padding: 6px 4px !important;
    border-color: var(--luzz-oxford-blue) !important;
    color: var(--luzz-oxford-blue) !important;
}
body.page-pos .restock-price-input .form-control {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}
body.page-pos .restock-price-toggle {
    color: var(--luzz-marian-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-pos .restock-price-detail-label { min-width: 64px; justify-content: center; font-weight: 600; }
body.page-pos .restock-min-input { max-width: 220px; }
body.page-pos .restock-edit-footer {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 12px 18px;
}
body.page-pos #btnSaveRestockEdit {
    background: var(--luzz-marian-blue) !important;
    border-color: var(--luzz-marian-blue) !important;
}
@media (max-width: 575.98px) {
    body.page-pos .stock-quick-row {
        grid-template-columns: repeat(3, 1fr) 1.4fr repeat(3, 1fr);
        gap: 4px;
    }
    body.page-pos .qty-quick-btn { padding: 10px 0; font-size: 0.85rem; }
    body.page-pos .stock-big-input { font-size: 1.2rem !important; }
    body.page-pos .stock-preview-value { font-size: 1.3rem; }
    body.page-pos .stock-preview-to .stock-preview-value { font-size: 1.6rem; }
}
@media print {
    body.page-pos.print-low-stock > *:not(.modal),
    body.page-pos.print-low-stock .modal-header,
    body.page-pos.print-low-stock .modal-footer,
    body.page-pos.print-low-stock .modal-backdrop,
    body.page-pos.print-low-stock .mobile-cart-backdrop,
    body.page-pos.print-low-stock .mobile-cart-toggle {
        display: none !important;
    }
    body.page-pos.print-low-stock .modal,
    body.page-pos.print-low-stock #lowStockModal {
        position: static !important;
        display: block !important;
        background: #fff !important;
    }
    body.page-pos.print-low-stock .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
    }
    body.page-pos.print-low-stock .modal-content {
        border: 0 !important;
        box-shadow: none !important;
    }
    body.page-pos.print-low-stock .low-stock-brand-block {
        page-break-inside: avoid;
    }
}
body.page-pos .image-preview {
    max-height: 200px;
}
body.page-pos .free-badge {
    font-size: 0.6rem;
}
body.page-pos .cart-qty-text {
    padding: 0 8px;
    font-weight: bold;
}
body.page-pos .history-order-id {
    font-size: 0.9rem;
}
body.page-pos .history-items-list {
    list-style-type: square;
}

body.page-playalot .score-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
body.page-playalot .score-modal-header {
    background-color: var(--luzz-oxford-blue);
    color: white;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
body.page-playalot .score-modal-footer {
    border-top: none;
    padding: 0 20px 20px;
}
body.page-playalot .leaderboard-rank.rank-gold { color: #FFD700; }
body.page-playalot .leaderboard-rank.rank-silver { color: #C0C0C0; }
body.page-playalot .leaderboard-rank.rank-bronze { color: #CD7F32; }
body.page-playalot .leaderboard-rank.rank-default { color: #cccccc; }
body.page-playalot .gender-icon {
    font-weight: bold;
}
body.page-playalot .gender-icon.is-male { color: #1cabe2; }
body.page-playalot .gender-icon.is-female { color: #ff69b4; }
body.page-playalot .gender-icon.is-unknown { color: #60778d; }
body.page-playalot .paused-badge {
    font-size: 0.6rem;
}
body.page-playalot .leaderboard-action-btn {
    height: 25px;
    border-radius: 6px;
}
body.page-playalot .match-player-line {
    margin-bottom: 4px;
    line-height: 1.1;
}
body.page-playalot .match-player-name {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-dark);
}
body.page-playalot .match-player-gender {
    font-size: 0.7rem;
}
body.page-playalot .match-player-record {
    font-size: 0.65rem;
    color: #888;
    font-weight: 600;
}
body.page-playalot .history-score-separator {
    color: #ddd;
    margin: 0 4px;
}

body.page-kotc .court-badge.is-top {
    background: #bfe800;
    color: #002752;
}
body.page-kotc .court-badge.is-bottom {
    background: #dc3545;
    color: #F3F5F7;
}
body.page-kotc .court-badge.is-middle {
    background: #002752;
    color: #F3F5F7;
}
body.page-kotc .modal-field-spacer {
    margin-bottom: 20px;
}
body.page-kotc .modal-section-spacer {
    margin-top: 20px;
    margin-bottom: 20px;
}

body.page-tournament .eb-final-match-slot {
    margin-top: 75px;
    margin-bottom: 75px;
}

body.page-leaderboard .avatar-player-1 { background: #17314f; }
body.page-leaderboard .avatar-player-2 { background: #0071e3; }
body.page-leaderboard .avatar-player-3 { background: #6b5bd6; }
body.page-leaderboard .avatar-player-4 { background: #1f9d55; }
body.page-leaderboard .avatar-player-5 { background: #087f8c; }
body.page-leaderboard .avatar-player-6 { background: #b36b00; }
body.page-leaderboard .avatar-player-7 { background: #c2416b; }
body.page-leaderboard .avatar-player-8 { background: #334155; }
body.page-leaderboard .avatar-player-9 { background: #d64545; }
body.page-leaderboard .avatar-player-10 { background: #4e3fc2; }
body.page-leaderboard .avatar-player-11 { background: #0f766e; }
body.page-leaderboard .avatar-player-12 { background: #8a4f00; }

body.page-admin-leaderboard .template-columns-title {
    margin: 18px 0 10px;
    font-size: 14px;
}
body.page-admin-leaderboard .button-row-offset {
    margin-top: 14px;
}

/* =========================================================
   LIQUID GLASS UNIVERSAL POLISH
   Apple-inspired glass aesthetic applied to pages that previously
   lacked the polish of booking/coach (leaderboard, admin/*, pos,
   ranking_simulator, admin-home). Uses the existing brand palette
   (marian blue #1cabe2 + pickleball green #bfe800 + oxford ink).
   Booking/coach/eventregister/playevent keep their existing styles.
   ========================================================= */

:root {
    /* Liquid glass design tokens (brand-aligned) */
    --lg-brand: #1cabe2;
    --lg-brand-soft: #7ad7f5;
    --lg-accent: #bfe800;
    --lg-accent-soft: #e3ff62;
    --lg-ink: #0d263f;
    --lg-ink-strong: #002752;
    --lg-muted: #56708a;
    --lg-bg-a: #eaf2fb;
    --lg-bg-b: #dfe9f4;
    --lg-card: rgba(255, 255, 255, 0.62);
    --lg-card-strong: rgba(255, 255, 255, 0.82);
    --lg-glass-edge: rgba(255, 255, 255, 0.55);
    --lg-glass-edge-soft: rgba(255, 255, 255, 0.32);
    --lg-line: rgba(18, 49, 79, 0.08);
    --lg-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 36px rgba(18, 49, 79, 0.08),
        0 32px 80px rgba(18, 49, 79, 0.1);
    --lg-shadow-soft:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 6px 18px rgba(18, 49, 79, 0.06);
    --lg-radius-panel: 28px;
    --lg-radius-card: 18px;
    --lg-radius-pill: 999px;
    --lg-font: var(--dal-font);
}

/* --- Pages that get the polish (skip the already-polished ones) --- */
body.page-leaderboard,
body.page-admin-leaderboard,
body.page-admin-players,
body.page-admin-membership,
body.page-admin-home,
body.page-pos,
body.page-ranking-simulator {
    background:
        radial-gradient(120% 60% at 10% 0%, rgba(28, 171, 226, 0.18), transparent 50%),
        radial-gradient(80% 50% at 90% 0%, rgba(191, 232, 0, 0.14), transparent 55%),
        radial-gradient(80% 60% at 50% 100%, rgba(122, 215, 245, 0.16), transparent 60%),
        linear-gradient(180deg, var(--lg-bg-a) 0%, var(--lg-bg-b) 100%) !important;
    background-attachment: fixed !important;
    color: var(--lg-ink) !important;
    font-family: var(--lg-font) !important;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
}

/* --- Frosted topbar --- */
body.page-leaderboard .topbar,
body.page-admin-leaderboard .topbar,
body.page-admin-players .topbar,
body.page-admin-membership .topbar,
body.page-admin-home .admin-topbar,
body.page-pos .pos-topbar,
body.page-ranking-simulator .topbar {
    background: rgba(255, 255, 255, 0.62) !important;
    border-bottom: 1px solid var(--lg-glass-edge) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 8px 24px rgba(18, 49, 79, 0.06) !important;
    color: var(--lg-ink) !important;
}

body.page-leaderboard .topbar .brand,
body.page-admin-leaderboard .topbar .brand,
body.page-admin-players .topbar .brand,
body.page-admin-membership .topbar .brand,
body.page-ranking-simulator .topbar .brand {
    color: var(--lg-ink) !important;
}

body.page-leaderboard .topbar .nav-links a,
body.page-admin-leaderboard .topbar .nav-links a,
body.page-admin-players .topbar .nav-links a,
body.page-admin-membership .topbar .nav-links a {
    color: var(--lg-ink);
    opacity: 0.78;
    padding: 6px 12px;
    border-radius: var(--lg-radius-pill);
    transition: background 0.18s ease, opacity 0.18s ease;
    text-decoration: none;
    font-weight: 600;
}

body.page-leaderboard .topbar .nav-links a:hover,
body.page-admin-leaderboard .topbar .nav-links a:hover,
body.page-admin-players .topbar .nav-links a:hover,
body.page-admin-membership .topbar .nav-links a:hover {
    background: rgba(28, 171, 226, 0.12);
    opacity: 1;
}

body.page-leaderboard .topbar .nav-links a.is-active,
body.page-admin-leaderboard .topbar .nav-links a.is-active,
body.page-admin-players .topbar .nav-links a.is-active,
body.page-admin-membership .topbar .nav-links a.is-active {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.24), rgba(28, 171, 226, 0.12));
    border: 1px solid rgba(28, 171, 226, 0.36);
    opacity: 1;
}

/* --- Glass panel: targets common .panel class across leaderboard + admin pages --- */
body.page-leaderboard .panel,
body.page-admin-leaderboard .panel,
body.page-admin-players .panel,
body.page-admin-membership .panel,
body.page-pos .panel,
body.page-ranking-simulator .panel {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.38) 100%) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: var(--lg-radius-panel) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    overflow: hidden;
    isolation: isolate;
    color: var(--lg-ink) !important;
}

body.page-leaderboard .panel::before,
body.page-admin-leaderboard .panel::before,
body.page-admin-players .panel::before,
body.page-admin-membership .panel::before,
body.page-pos .panel::before,
body.page-ranking-simulator .panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 28%),
        radial-gradient(100% 60% at 0% 0%, rgba(255, 255, 255, 0.45), transparent 50%);
    pointer-events: none;
    z-index: -1;
}

body.page-leaderboard .panel-header,
body.page-admin-leaderboard .panel-header,
body.page-admin-players .panel-header,
body.page-admin-membership .panel-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--lg-line) !important;
}

body.page-leaderboard .panel-title,
body.page-admin-leaderboard .panel-title,
body.page-admin-players .panel-title,
body.page-admin-membership .panel-title {
    color: var(--lg-ink-strong) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-leaderboard .panel-body,
body.page-admin-leaderboard .panel-body,
body.page-admin-players .panel-body,
body.page-admin-membership .panel-body {
    padding: 18px 20px 20px !important;
}

/* --- Metric cards (summary widgets) --- */
body.page-leaderboard .summary,
body.page-admin-leaderboard .summary,
body.page-admin-players .summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

body.page-leaderboard .metric,
body.page-admin-leaderboard .metric,
body.page-admin-players .metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: var(--lg-radius-card) !important;
    padding: 14px 16px !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: var(--lg-shadow-soft) !important;
    display: grid;
    gap: 4px;
}

body.page-leaderboard .metric-label,
body.page-admin-leaderboard .metric-label,
body.page-admin-players .metric-label {
    color: var(--lg-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

body.page-leaderboard .metric-value,
body.page-admin-leaderboard .metric-value,
body.page-admin-players .metric-value {
    color: var(--lg-ink-strong) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* --- Liquid glass buttons --- */
body.page-leaderboard .btn,
body.page-admin-leaderboard .btn,
body.page-admin-players .btn,
body.page-admin-membership .btn,
body.page-pos .btn,
body.page-ranking-simulator .btn {
    border-radius: var(--lg-radius-pill) !important;
    padding: 10px 18px !important;
    border: 1px solid var(--lg-glass-edge) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)) !important;
    color: var(--lg-ink) !important;
    font-weight: 700 !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 16px rgba(18, 49, 79, 0.08) !important;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

body.page-leaderboard .btn:hover,
body.page-admin-leaderboard .btn:hover,
body.page-admin-players .btn:hover,
body.page-admin-membership .btn:hover,
body.page-pos .btn:hover,
body.page-ranking-simulator .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 24px rgba(18, 49, 79, 0.12) !important;
}

body.page-leaderboard .btn.primary,
body.page-admin-leaderboard .btn.primary,
body.page-admin-players .btn.primary,
body.page-admin-membership .btn.primary,
body.page-pos .btn.primary,
body.page-ranking-simulator .btn.primary {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.78)) !important;
    border-color: rgba(28, 171, 226, 0.6) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

body.page-leaderboard .btn.primary:hover,
body.page-admin-leaderboard .btn.primary:hover,
body.page-admin-players .btn.primary:hover,
body.page-admin-membership .btn.primary:hover {
    background: linear-gradient(180deg, rgba(28, 171, 226, 1), rgba(28, 171, 226, 0.86)) !important;
}

body.page-leaderboard .btn.danger,
body.page-admin-leaderboard .btn.danger,
body.page-admin-players .btn.danger,
body.page-admin-membership .btn.danger {
    background: linear-gradient(180deg, rgba(214, 69, 69, 0.92), rgba(214, 69, 69, 0.74)) !important;
    border-color: rgba(214, 69, 69, 0.6) !important;
    color: #ffffff !important;
}

body.page-leaderboard .btn.secondary,
body.page-admin-leaderboard .btn.secondary,
body.page-admin-players .btn.secondary,
body.page-admin-membership .btn.secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.32)) !important;
}

/* --- Inputs --- */
body.page-leaderboard input,
body.page-leaderboard select,
body.page-leaderboard .input,
body.page-leaderboard .select,
body.page-admin-leaderboard input,
body.page-admin-leaderboard select,
body.page-admin-leaderboard .input,
body.page-admin-leaderboard .select,
body.page-admin-players input,
body.page-admin-players select,
body.page-admin-players .input,
body.page-admin-players .select,
body.page-admin-membership input,
body.page-admin-membership select,
body.page-admin-membership .input,
body.page-admin-membership .select,
body.page-ranking-simulator input,
body.page-ranking-simulator select,
body.page-ranking-simulator .input,
body.page-ranking-simulator .select {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    color: var(--lg-ink) !important;
    font-family: var(--lg-font) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 6px rgba(18, 49, 79, 0.04) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    outline: none;
}

body.page-leaderboard input:focus,
body.page-leaderboard select:focus,
body.page-leaderboard .input:focus,
body.page-leaderboard .select:focus,
body.page-admin-leaderboard input:focus,
body.page-admin-leaderboard select:focus,
body.page-admin-leaderboard .input:focus,
body.page-admin-leaderboard .select:focus,
body.page-admin-players input:focus,
body.page-admin-players select:focus,
body.page-admin-players .input:focus,
body.page-admin-players .select:focus,
body.page-admin-membership input:focus,
body.page-admin-membership select:focus,
body.page-admin-membership .input:focus,
body.page-admin-membership .select:focus {
    border-color: rgba(28, 171, 226, 0.5) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 4px rgba(28, 171, 226, 0.14) !important;
}

/* --- Status pills / mini pills / badges --- */
body.page-leaderboard .status-pill,
body.page-admin-leaderboard .status-pill,
body.page-admin-players .mini-pill,
body.page-admin-leaderboard .mini-pill,
body.page-admin-members .mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--lg-radius-pill);
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.22), rgba(28, 171, 226, 0.1));
    border: 1px solid rgba(28, 171, 226, 0.36);
    color: #0c5b80;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* --- Eyebrow / subtitle / titles --- */
body.page-leaderboard .eyebrow,
body.page-admin-leaderboard .eyebrow,
body.page-admin-players .eyebrow,
body.page-admin-membership .eyebrow {
    color: var(--lg-brand) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}

body.page-leaderboard .page-title-row h1,
body.page-admin-leaderboard .page-title-row h1,
body.page-admin-players .page-title-row h1,
body.page-admin-membership .page-title-row h1 {
    color: var(--lg-ink-strong) !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin: 0 !important;
}

body.page-leaderboard .subtitle,
body.page-admin-leaderboard .subtitle,
body.page-admin-players .subtitle,
body.page-admin-membership .subtitle {
    color: var(--lg-muted) !important;
    margin: 8px 0 0 !important;
    line-height: 1.55 !important;
}

/* --- Leaderboard player card polish --- */
body.page-leaderboard .player {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42)) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: var(--lg-radius-card) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow: var(--lg-shadow-soft) !important;
    padding: 12px 14px !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

body.page-leaderboard .player:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 24px rgba(18, 49, 79, 0.1) !important;
}

body.page-leaderboard .rating {
    color: var(--lg-ink-strong) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

body.page-leaderboard .badge {
    border-radius: var(--lg-radius-pill);
    padding: 4px 10px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
}

/* --- Player result card (admin/players) --- */
body.page-admin-players .player-result-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.38)) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: var(--lg-radius-card) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    box-shadow: var(--lg-shadow-soft) !important;
    transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.2s ease !important;
}

body.page-admin-players .player-result-card:hover,
body.page-admin-players .player-result-card.is-active {
    border-color: rgba(28, 171, 226, 0.5) !important;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 22px rgba(28, 171, 226, 0.18) !important;
}

/* --- Admin-home hub cards --- */
body.page-admin-home .admin-card,
body.page-admin-home .admin-grid-card {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.38) 100%) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    border-radius: var(--lg-radius-panel) !important;
    box-shadow: var(--lg-shadow) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}

/* --- POS topbar override --- */
body.page-pos .pos-topbar {
    color: var(--lg-ink) !important;
}

body.page-pos .pos-title {
    color: var(--lg-ink-strong) !important;
}

/* --- Ranking simulator: replace dark theme with glass --- */
body.page-ranking-simulator .topbar {
    color: var(--lg-ink) !important;
}

body.page-ranking-simulator .brand {
    color: var(--lg-ink) !important;
}

/* === END LIQUID GLASS UNIVERSAL POLISH === */

/* =========================================================
   POS LAYOUT POLISH (2026-05-21)
   Override liquid-glass defaults inside .pos-topbar, filter
   bar, and product cards so they stay tight and single-line
   on tablet / narrow desktop widths.
   ========================================================= */

/* ----- Topbar ----- */
body.page-pos .pos-topbar {
    padding: 10px 18px !important;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
}
body.page-pos .topbar-brand {
    flex: 0 0 auto;
    min-width: 0;
}
body.page-pos .pos-title {
    white-space: nowrap;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px;
}
body.page-pos .pos-title > span {
    font-size: 0.78rem !important;
    margin-left: 4px;
    opacity: 0.65;
}
body.page-pos .topbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.page-pos .topbar-actions .me-3,
body.page-pos .topbar-actions .me-2 {
    margin-right: 0 !important;
}
/* Defeat liquid-glass .btn for everything inside .pos-topbar */
body.page-pos .pos-topbar .btn {
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    min-height: 36px;
    gap: 6px;
    box-shadow: none !important;
}
body.page-pos .pos-topbar .btn:hover {
    transform: none;
    filter: brightness(1.04);
}
body.page-pos .pos-topbar .mode-switch {
    display: inline-flex;
    background: rgba(0, 39, 82, 0.06);
    border: 1px solid var(--lg-glass-edge);
    border-radius: 12px;
    padding: 3px;
    gap: 2px !important;
}
body.page-pos .pos-topbar .mode-switch .btn {
    border-radius: 9px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 14px !important;
    min-height: 32px;
    color: var(--lg-ink) !important;
    font-weight: 700 !important;
}
body.page-pos .pos-topbar .mode-switch .btn-mode-active {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.82)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(28, 171, 226, 0.35) !important;
}
body.page-pos .pos-topbar .btn-history {
    background: rgba(255, 193, 7, 0.92) !important;
    color: var(--lg-ink-strong) !important;
    border: 1px solid rgba(255, 193, 7, 0.55) !important;
}
body.page-pos .pos-topbar #btnStaffLogin.btn-login {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--lg-glass-edge) !important;
    color: var(--lg-ink) !important;
}
body.page-pos .pos-topbar #btnStaffLogin.btn-login.logged-in {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.82)) !important;
    color: #fff !important;
    border-color: rgba(28, 171, 226, 0.6) !important;
}
body.page-pos .pos-topbar #btnStaffLogout {
    padding: 7px 10px !important;
    min-width: 36px;
}
/* Restock topbar actions inside .pos-topbar */
body.page-pos .pos-topbar .btn-restock-action {
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    min-height: 36px;
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--lg-ink) !important;
    border: 1px solid var(--lg-glass-edge) !important;
}
body.page-pos .pos-topbar .btn-restock-action-warning {
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.96), rgba(255, 152, 0, 0.82)) !important;
    color: var(--lg-ink-strong) !important;
    border-color: rgba(255, 152, 0, 0.55) !important;
}

/* Tablet/mobile: allow wrap below ~860px so things still fit */
@media (max-width: 860px) {
    body.page-pos .pos-topbar { flex-wrap: wrap; }
    body.page-pos .topbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    body.page-pos .pos-topbar .mode-switch { width: 100%; }
    body.page-pos .pos-topbar .mode-switch .btn { flex: 1; }
}

/* ----- Filter bar ----- */
body.page-pos .filter-bar {
    margin-bottom: 10px;
    gap: 6px;
}
body.page-pos .brand-buttons-container,
body.page-pos .category-buttons-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
body.page-pos .brand-buttons-container::-webkit-scrollbar,
body.page-pos .category-buttons-container::-webkit-scrollbar {
    height: 4px;
}
body.page-pos .brand-buttons-container::-webkit-scrollbar-thumb,
body.page-pos .category-buttons-container::-webkit-scrollbar-thumb {
    background: rgba(13, 38, 63, 0.25);
    border-radius: 2px;
}
body.page-pos .btn-filter-chip {
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
    min-height: 30px;
    line-height: 1.1;
    white-space: nowrap;
    flex: 0 0 auto;
}
body.page-pos .btn-filter-chip.active {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.82)) !important;
    color: #fff !important;
    border-color: rgba(28, 171, 226, 0.6) !important;
    box-shadow: 0 2px 6px rgba(28, 171, 226, 0.28);
}
body.page-pos .filter-search-group {
    flex: 0 0 auto;
    width: auto;
    align-items: stretch;
}
body.page-pos .filter-search-group .filter-search {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    height: 34px;
    width: 0;
    min-width: 0;
    opacity: 0;
    margin-right: -1px;
    transition: width 0.22s ease, padding 0.22s ease, opacity 0.15s ease;
}
body.page-pos .filter-search-group.is-expanded .filter-search {
    width: 240px;
    padding: 6px 12px !important;
    opacity: 1;
    border-radius: 10px 0 0 10px !important;
    margin-right: 0;
}
body.page-pos .filter-search-group .filter-search-toggle {
    padding: 6px 12px !important;
    border-radius: 10px !important;
    min-height: 34px;
    box-shadow: none !important;
    flex: 0 0 auto;
}
body.page-pos .filter-search-group.is-expanded .filter-search-toggle {
    border-radius: 0 10px 10px 0 !important;
}
body.page-pos .filter-search-group.is-expanded .filter-search-toggle {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.82)) !important;
    color: #fff !important;
    border-color: rgba(28, 171, 226, 0.6) !important;
}

/* ----- Product cards ----- */
body.page-pos #productsGrid { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.6rem; }
body.page-pos .pos-product-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(18, 49, 79, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
}
body.page-pos .pos-product-card:hover {
    box-shadow: 0 6px 18px rgba(18, 49, 79, 0.10);
    transform: translateY(-1px);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
body.page-pos .product-info {
    padding: 8px 10px 10px;
    gap: 2px;
}
body.page-pos .product-title {
    font-size: 0.82rem;
    margin-bottom: 2px;
    line-height: 1.25;
}
body.page-pos .product-price {
    font-size: 0.98rem;
}
body.page-pos .stock-badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    top: 8px;
    right: 8px;
    letter-spacing: 0.02em;
}
body.page-pos .stock-low {
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.4);
}
body.page-pos .camera-icon-btn {
    width: 28px;
    height: 28px;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    font-size: 0.78rem;
}
body.page-pos .camera-icon-btn:hover {
    background: rgba(28, 171, 226, 0.85);
    transform: scale(1.05);
}
body.page-pos.is-restock-mode .pos-product-card {
    cursor: pointer;
}
body.page-pos.is-reorder-mode .pos-product-card {
    cursor: grab;
    border: 2px dashed rgba(28, 171, 226, 0.55) !important;
    box-shadow: 0 4px 12px rgba(18, 49, 79, 0.10);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
body.page-pos.is-reorder-mode .pos-product-card:hover { transform: translateY(-2px); }
body.page-pos.is-reorder-mode .pos-product-card::before {
    content: '\f0b2';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    background: rgba(28, 171, 226, 0.92);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(28, 171, 226, 0.4);
}
body.page-pos.is-reorder-mode .camera-icon-btn,
body.page-pos.is-reorder-mode .pos-product-card::after { display: none !important; }
body.page-pos .reorder-ghost {
    opacity: 0.25;
    filter: grayscale(0.6);
}
body.page-pos .reorder-chosen {
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(18, 49, 79, 0.18) !important;
}
body.page-pos .reorder-drag {
    cursor: grabbing;
    z-index: 100;
}
body.page-pos .btn-restock-action-reorder.is-active {
    background: linear-gradient(180deg, rgba(28, 171, 226, 0.96), rgba(28, 171, 226, 0.82)) !important;
    color: #fff !important;
    border-color: rgba(28, 171, 226, 0.6) !important;
}
body.page-pos.is-restock-mode:not(.is-reorder-mode) .pos-product-card::after {
    content: '✎';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: rgba(28, 171, 226, 0.92);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
body.page-pos.is-restock-mode .pos-product-card:hover::after { opacity: 1; }

/* === END POS LAYOUT POLISH === */

/* =========================================================
   POS: Cart-as-modal in sell mode (2026-05-21)
   Cart pane is hidden by default; opens as a centered modal
   via the floating cart FAB at bottom-right. Restock mode
   keeps its no-cart layout (.is-restock-mode handles that
   separately above).
   ========================================================= */

body.page-pos:not(.is-restock-mode) .products-pane {
    width: 100% !important;
}
body.page-pos:not(.is-restock-mode) .cart-pane {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: min(95vw, 460px) !important;
    max-width: 460px;
    height: min(88vh, 720px) !important;
    transform: translate(-50%, -42%) scale(0.96) !important;
    border-radius: 18px !important;
    border: 1px solid var(--lg-glass-edge) !important;
    box-shadow:
        0 24px 64px rgba(18, 49, 79, 0.28),
        0 4px 16px rgba(18, 49, 79, 0.16) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1050 !important;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    background: #fff !important;
}
body.page-pos.mobile-cart-open:not(.is-restock-mode) .cart-pane {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Backdrop visible whenever cart is open (any width) */
body.page-pos:not(.is-restock-mode) .mobile-cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18, 49, 79, 0.48);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1040;
}
body.page-pos.mobile-cart-open:not(.is-restock-mode) .mobile-cart-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Floating Cart FAB: always visible in sell mode, all widths */
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle {
    display: inline-flex !important;
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    right: 24px !important;
    left: auto !important;
    width: auto !important;
    min-width: 220px;
    max-width: calc(100vw - 48px);
    padding: 14px 20px !important;
    background: #049df0 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 32px rgba(4, 157, 240, 0.5), 0 6px 14px rgba(18, 49, 79, 0.28) !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    z-index: 1030;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle:hover {
    transform: translateY(-2px);
    background: #0388d3 !important;
    box-shadow: 0 18px 40px rgba(4, 157, 240, 0.55), 0 8px 18px rgba(18, 49, 79, 0.3) !important;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle::before {
    content: '\f07a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.05rem;
    margin-right: 2px;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    flex: 1;
    min-width: 0;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle-title {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle-meta {
    font-size: 0.88rem !important;
    font-weight: 700;
}
body.page-pos:not(.is-restock-mode) .mobile-cart-toggle-total {
    font-size: 1.05rem !important;
    font-weight: 800;
    white-space: nowrap;
}

/* Cart Close button visible inside modal */
body.page-pos:not(.is-restock-mode) .mobile-cart-close-btn {
    display: inline-flex !important;
}

/* Restock mode: ensure FAB stays hidden (overrides above) */
body.page-pos.is-restock-mode .mobile-cart-toggle { display: none !important; }
body.page-pos.is-restock-mode .mobile-cart-backdrop { display: none !important; }

/* Reset products-pane padding so full-width grid breathes */
body.page-pos:not(.is-restock-mode) .products-pane {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* Cart modal — rectangular buttons + compact spacing in the footer */
body.page-pos .cart-pane .btn {
    border-radius: 8px !important;
    padding: 6px 12px !important;
}
body.page-pos .cart-pane #sellModeControls > .mb-2 {
    margin-bottom: 8px !important;
}
body.page-pos .cart-pane .cart-mode-panel {
    padding: 8px !important;
}
body.page-pos .cart-pane .cart-mode-panel > .mb-2 {
    margin-bottom: 6px !important;
}
body.page-pos .cart-pane .cart-footer > .d-flex.mb-3 {
    margin-bottom: 10px !important;
}
body.page-pos .cart-pane .form-label.mb-1 {
    margin-bottom: 2px !important;
}

/* Seller picker — square chips inside the cart */
body.page-pos .cart-seller-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-btn {
    padding: 4px 11px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
}
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-btn {
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-btn.is-active {
    background: var(--dal-primary, #049df0) !important;
    border-color: var(--dal-primary, #049df0) !important;
    color: #fff !important;
}
/* Long-press visual: red fill animates left→right over 3s while held */
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-btn.is-pressing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(220, 53, 69, 0.55);
    transform-origin: left center;
    transform: scaleX(0);
    animation: sellerLongPress 3s linear forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes sellerLongPress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* + button to add a new seller */
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-add-btn {
    color: var(--dal-primary, #049df0) !important;
    border: 1px dashed var(--dal-primary, #049df0) !important;
    background: transparent !important;
    min-width: 34px;
    padding: 4px 10px !important;
}
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-add-btn:hover,
body.page-pos .cart-pane .cart-seller-buttons .cart-seller-add-btn:focus {
    background: rgba(4, 157, 240, 0.08) !important;
    color: var(--dal-primary, #049df0) !important;
}

/* Cart modal — landscape split on tablet+ so items get more vertical room */
@media (min-width: 900px) {
    body.page-pos:not(.is-restock-mode) .cart-pane {
        width: min(95vw, 920px) !important;
        max-width: 920px;
        height: min(82vh, 640px) !important;
        display: grid !important;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header header"
            "items  footer";
    }
    body.page-pos:not(.is-restock-mode) .cart-pane .cart-header { grid-area: header; }
    body.page-pos:not(.is-restock-mode) .cart-pane .cart-items {
        grid-area: items;
        border-right: 1px solid #eee;
        min-height: 0;
    }
    body.page-pos:not(.is-restock-mode) .cart-pane .cart-footer {
        grid-area: footer;
        overflow-y: auto;
        min-height: 0;
    }
}

/* Out-of-stock product card: visually blocked without using opacity */
body.page-pos .pos-product-card.is-out-of-stock {
    cursor: not-allowed;
    background: #f3f5f8;
    border-color: #e2e8f0;
}
body.page-pos .pos-product-card.is-out-of-stock:hover {
    transform: none;
    box-shadow: none;
}
body.page-pos .pos-product-card.is-out-of-stock .product-img,
body.page-pos .pos-product-card.is-out-of-stock .no-image-placeholder {
    filter: grayscale(1);
}
body.page-pos .pos-product-card.is-out-of-stock .product-title,
body.page-pos .pos-product-card.is-out-of-stock .product-price {
    color: #94a3b8;
}
body.page-pos .pos-product-card .stock-out-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: inherit;
    pointer-events: none;
}

/* POS: force every text element to 25px (icon fonts excluded) */
body.page-pos,
body.page-pos *:not(i):not(.fa):not(.fas):not(.far):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(.bi):not([class*="bi-"]) {
    font-size: 25px !important;
}

/* === END POS CART-MODAL === */