@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --navy-900: #10203a;
    --navy-800: #1d355f;
    --navy-700: #2b4c84;
    --green-600: #0f8a5f;
    --green-500: #17986a;
    --green-300: #8dd7bd;
    --gold-500: #d9b550;
    --gold-300: #e9d7a3;
    --red-500: #c84a52;
    --blue-200: #d6e2f7;
    --ink-900: #11253f;
    --ink-700: #42566f;
    --ink-500: #6b7d94;
    --white: #ffffff;
    --surface: #f3f6f9;
    --surface-strong: #edf2f7;
    --border: #d7e0ea;
    --shadow-soft: 0 10px 22px rgba(10, 30, 58, 0.08);
    --shadow-hard: 0 12px 28px rgba(7, 21, 41, 0.16);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --container: 1200px;
    --transition-fast: 0.18s ease;
    --transition-med: 0.28s ease;
    --teal-700: #0c6d68;
    --footer-branding-height: clamp(16rem, 28vw, 24rem);
}

:root[data-theme="dark"] {
    --navy-900: #0a1528;
    --navy-800: #12233f;
    --navy-700: #1f3560;
    --green-600: #17986a;
    --green-500: #24af7e;
    --green-300: #7cd9b6;
    --gold-500: #d9b550;
    --gold-300: #e4d4a4;
    --red-500: #e06a72;
    --blue-200: #223d67;
    --ink-900: #eaf2ff;
    --ink-700: #c6d4e8;
    --ink-500: #8da2bf;
    --white: #152b4d;
    --surface: #0f213d;
    --surface-strong: #142947;
    --border: #2b456b;
    --shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.26);
    --shadow-hard: 0 16px 32px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--ink-900);
    background: #f3f6f9;
}

body.app-loading {
    overflow: hidden;
}

:root[data-theme="dark"] body {
    background: #0d1b33;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

input,
textarea,
select {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--white) 90%, transparent);
    padding: 0.72rem 0.8rem;
    outline: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.45rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
        linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
    background-position:
        calc(100% - 1rem) calc(50% - 0.12rem),
        calc(100% - 0.72rem) calc(50% - 0.12rem);
    background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
    background-repeat: no-repeat;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

select::-ms-expand {
    display: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-500) 20%, transparent);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    line-height: 1.05;
    letter-spacing: 0.03em;
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-weight: 400;
}

p {
    margin: 0;
    color: var(--ink-700);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

main {
    padding: 1rem 0 4.8rem;
    flex: 1 0 auto;
}

.container {
    width: min(var(--container), calc(100% - 1.2rem));
    margin-inline: auto;
}

.section {
    margin-top: 1rem;
}

.surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
}

.grid {
    display: grid;
    gap: 0.9rem;
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.muted {
    color: var(--ink-500);
}

.small {
    font-size: 0.86rem;
}

.center {
    text-align: center;
}

.mt-1 {
    margin-top: 0.35rem;
}

.mt-2 {
    margin-top: 0.7rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.4rem;
}

.page-title {
    font-size: clamp(2rem, 7vw, 3rem);
}

.section-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
}

.section-subtitle {
    margin-top: 0.35rem;
    color: var(--ink-500);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.site-header.is-compact {
    box-shadow: var(--shadow-soft);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0;
    transition: padding var(--transition-fast);
}

.site-header.is-compact .header-inner {
    padding: 0.45rem 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.brand-logo {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--green-500) 62%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(18, 79, 70, 0.16) 0%, rgba(31, 127, 103, 0.28) 100%);
    box-shadow: 0 10px 22px rgba(15, 97, 78, 0.16);
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-copy {
    min-width: 0;
}

.brand-name {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-tag {
    display: block;
    margin-top: -0.2rem;
    color: var(--ink-500);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.menu-toggle {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--white) 88%, transparent);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.menu-toggle span {
    width: 1.05rem;
    height: 0.13rem;
    background: var(--ink-900);
    display: block;
    position: relative;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle span::before,
.menu-toggle span::after {
    content: "";
    width: 1.05rem;
    height: 0.13rem;
    background: var(--ink-900);
    position: absolute;
    left: 0;
    transition: transform var(--transition-fast);
}

.menu-toggle span::before {
    top: -0.32rem;
}

.menu-toggle span::after {
    top: 0.32rem;
}

body.menu-open .menu-toggle span {
    background: transparent;
}

body.menu-open .menu-toggle span::before {
    transform: translateY(0.32rem) rotate(45deg);
}

body.menu-open .menu-toggle span::after {
    transform: translateY(-0.32rem) rotate(-45deg);
}

.site-nav {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: calc(100% + 0.3rem);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow-hard);
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
}

body.menu-open .site-nav {
    display: flex;
    animation: drop-nav 0.2s ease;
}

@keyframes drop-nav {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-link,
.nav-btn,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink-700);
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.nav-link:hover,
.nav-btn:hover,
.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--green-500) 35%, var(--border));
    color: var(--ink-900);
}

.nav-link.active,
.mobile-nav-link.active {
    color: #f5fbff;
    background: var(--navy-700);
    border-color: var(--navy-700);
}

.nav-btn {
    width: 100%;
}

.theme-toggle {
    width: 100%;
}

.mobile-bottom-nav {
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.55rem;
    z-index: 1200;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: var(--shadow-hard);
    padding: 0.35rem;
}

.mobile-nav-grid {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mobile-nav-link {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.3rem 0.15rem;
    border-radius: 0.8rem;
    border: 1px solid transparent;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ink-500);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link span:last-child {
    display: block;
    max-width: 100%;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

.mobile-nav-link .dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
}

.mobile-nav-link.active {
    color: #f6fbff;
}

.mobile-nav-link.active .dot {
    background: #f6fbff;
}

.footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    min-height: var(--footer-branding-height);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--green-500) 10%, #ffffff) 0%, transparent 52%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--red-500) 10%, #ffffff) 0%, transparent 58%),
        #ffffff;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.56)),
        url("../assets/images/footer-cricket-celebration.png") center center / 100% 100% no-repeat;
    opacity: 0.58;
    filter: saturate(0.95);
}

.footer-inner {
    position: relative;
    z-index: 1;
    min-height: var(--footer-branding-height);
    padding: 1.35rem 0 1.2rem;
    display: grid;
    align-content: center;
    gap: 0.55rem;
}

.footer-branding {
    justify-items: center;
    text-align: center;
    min-height: var(--footer-branding-height);
}

.footer-tagline,
.footer-subtagline {
    margin: 0;
    font-family: "Segoe Script", "Lucida Handwriting", "Brush Script MT", cursive;
    letter-spacing: 0.02em;
    line-height: 1.18;
    text-wrap: balance;
}

.footer-tagline {
    font-size: clamp(1.12rem, 2.5vw, 1.32rem);
    color: #186057;
}

.footer-subtagline {
    font-size: clamp(1rem, 2.25vw, 1.18rem);
    color: #8e2f38;
}

.footer-subtagline-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #186057;
}

.footer-subtagline-heart {
    color: #8e2f38;
}

.footer-flag-badge {
    width: 1.55rem;
    height: 1.05rem;
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    border-radius: 0.2rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(17, 37, 63, 0.12);
    flex: 0 0 auto;
}

.footer-flag-stripe {
    position: relative;
    display: block;
}

.footer-flag-saffron {
    background: #ff9933;
}

.footer-flag-white {
    background: #ffffff;
    display: grid;
    place-items: center;
}

.footer-flag-green {
    background: #138808;
}

.footer-flag-wheel {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    border: 1.4px solid #000080;
    box-sizing: border-box;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.2rem;
}

.footer-social-link {
    --footer-social-accent: var(--green-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--green-500) 30%, var(--border));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 242, 247, 0.94));
    color: #1b645b;
    box-shadow: 0 12px 24px rgba(10, 30, 58, 0.1);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.footer-social-link[aria-label="Instagram"] {
    --footer-social-accent: #dd2a7b;
    border-color: rgba(221, 42, 123, 0.28);
    background: linear-gradient(135deg, #515bd4 0%, #8134af 32%, #dd2a7b 64%, #f58529 100%);
    color: #ffffff;
}

.footer-social-link[aria-label="YouTube"] {
    --footer-social-accent: #ff0033;
    border-color: rgba(255, 0, 51, 0.28);
    background: linear-gradient(135deg, #ff4b4b 0%, #d40022 100%);
    color: #ffffff;
}

.footer-social-link[aria-label="X"] {
    --footer-social-accent: #111827;
    border-color: rgba(17, 24, 39, 0.22);
    background: linear-gradient(135deg, #384152 0%, #111827 100%);
    color: #ffffff;
}

.footer-social-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    stroke: none;
}

.footer-social-icon-fill {
    fill: currentColor;
    stroke: none;
}

.footer-social-link:hover {
    transform: translateY(-2px) scale(1.03);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--footer-social-accent) 62%, #ffffff);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--footer-social-accent) 18%, rgba(10, 30, 58, 0.16));
    filter: saturate(1.06) brightness(1.02);
}

.footer-social-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--footer-social-accent) 52%, #ffffff);
    outline-offset: 3px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.footer-link {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    color: var(--ink-700);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-link:hover {
    color: var(--ink-900);
    border-color: color-mix(in srgb, var(--green-500) 35%, var(--border));
}

.footer-support-links {
    margin-top: 0.25rem;
}

.btn {
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 800;
    padding: 0.65rem 1.05rem;
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-primary {
    color: #f5fbff;
    background: var(--green-600);
    box-shadow: none;
}

.btn-secondary {
    color: #f6fbff;
    background: var(--navy-700);
    box-shadow: none;
}

.btn-outline {
    color: var(--ink-700);
    background: color-mix(in srgb, var(--white) 90%, transparent);
    border: 1px solid var(--border);
}

.btn-warning {
    color: #fffdf6;
    background: #b9792d;
}

.btn-danger {
    color: #fff5f5;
    background: #b9454b;
}

.btn-link {
    color: var(--green-600);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-strong) 85%, transparent);
    color: var(--ink-700);
    font-size: 0.74rem;
    font-weight: 700;
}

.chip.live {
    border-color: color-mix(in srgb, var(--red-500) 45%, var(--border));
    background: color-mix(in srgb, var(--red-500) 12%, transparent);
    color: #b83030;
}

.chip.ready {
    border-color: color-mix(in srgb, var(--green-500) 45%, var(--border));
    background: color-mix(in srgb, var(--green-500) 12%, transparent);
    color: #137d4b;
}

.chip.pending {
    border-color: color-mix(in srgb, var(--gold-500) 55%, var(--border));
    background: color-mix(in srgb, var(--gold-500) 20%, transparent);
    color: #9a6a0f;
}

.chip.accepted {
    border-color: color-mix(in srgb, var(--green-500) 45%, var(--border));
    background: color-mix(in srgb, var(--green-500) 15%, transparent);
    color: #0f7143;
}

.chip.rejected {
    border-color: color-mix(in srgb, var(--red-500) 45%, var(--border));
    background: color-mix(in srgb, var(--red-500) 15%, transparent);
    color: #b43737;
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    padding: 0.9rem;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--green-500) 35%, var(--border));
    box-shadow: var(--shadow-soft);
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
}

.kpi-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
}

.kpi-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-500);
}

.kpi-value {
    margin-top: 0.3rem;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
}

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
    background: var(--white);
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
}

th,
td {
    padding: 0.68rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 0.88rem;
    vertical-align: top;
}

th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--ink-500);
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}

.form-grid {
    display: grid;
    gap: 0.7rem;
}

.form-grid.two {
    grid-template-columns: 1fr;
}

.form-grid.three {
    grid-template-columns: 1fr;
}

.field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

label {
    font-size: 0.78rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.notice {
    border-radius: var(--radius-sm);
    padding: 0.62rem 0.7rem;
    border: 1px solid transparent;
    font-size: 0.84rem;
    line-height: 1.35;
}

.notice.info {
    color: #194f90;
    background: color-mix(in srgb, #c9dcf8 70%, transparent);
    border-color: #94b6e4;
}

.notice.success {
    color: #0f7143;
    background: color-mix(in srgb, #c7f0d9 72%, transparent);
    border-color: #8fd0ac;
}

.notice.error {
    color: #a43535;
    background: color-mix(in srgb, #f8d2d2 72%, transparent);
    border-color: #e8a7a7;
}

.hidden {
    display: none !important;
}

.modal-open {
    overflow: hidden;
}

.player-name-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink-900);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.player-name-link:hover {
    color: var(--teal-700);
}

.player-name-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 42%, var(--border));
    outline-offset: 2px;
}

.player-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(16, 32, 58, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: grid;
    place-items: center;
    padding: 0.8rem;
}

.player-modal-overlay-centered {
    padding: clamp(0.8rem, 3vw, 1.2rem);
    place-items: center;
    align-content: center;
}

.player-modal {
    width: min(700px, 100%);
    max-height: min(90vh, 840px);
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-hard);
    padding: 1rem;
}

.player-modal-overlay-centered .player-modal {
    width: min(720px, calc(100vw - 1.6rem));
    max-height: min(84vh, 820px);
    margin: 0 auto;
}

.player-modal > .card-title-row {
    position: sticky;
    top: -1rem;
    z-index: 3;
    margin: -1rem -1rem 0;
    padding: 0.9rem 1rem 0.82rem;
    border-bottom: 1px solid color-mix(in srgb, var(--teal-500) 12%, var(--border));
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.96));
    backdrop-filter: blur(16px);
}

.player-modal > .section-subtitle,
.player-modal > .team-create-helper {
    margin-inline: 0.08rem;
}

.player-modal-dismiss {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--teal-500) 18%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-strong) 90%, #ffffff);
    color: var(--ink-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.player-modal-dismiss:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--teal-500) 32%, var(--border));
    background: color-mix(in srgb, var(--teal-500) 8%, #ffffff);
    color: var(--teal-800);
}

.player-modal-dismiss:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal-500) 40%, var(--border));
    outline-offset: 2px;
}

.player-modal-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
    padding: 0.75rem;
}

.player-modal-grid {
    display: grid;
    gap: 0.35rem;
}

.app-confirm-overlay,
.app-picker-overlay {
    z-index: 1505;
}

.app-confirm-modal {
    width: min(420px, 100%);
    display: grid;
    gap: 0.9rem;
}

.app-confirm-head {
    display: grid;
    gap: 0.22rem;
}

.app-confirm-kicker,
.app-picker-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.app-confirm-copy {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-700);
}

.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.app-confirm-actions .btn {
    min-width: 124px;
}

.modal-form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-form-actions .btn {
    min-width: 132px;
}

.app-picker-overlay {
    align-items: center;
    justify-items: center;
    padding: 1rem;
    background: rgba(12, 22, 36, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.app-picker-sheet {
    width: min(22rem, calc(100vw - 1.6rem));
    max-height: min(60vh, 28rem);
    border-radius: 1.2rem;
    padding: 0.7rem;
    display: grid;
    gap: 0.5rem;
}

.app-picker-options {
    display: grid;
    gap: 0.36rem;
    overflow: auto;
    padding-right: 0.04rem;
}

.app-picker-option {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--border);
    border-radius: 0.92rem;
    background: color-mix(in srgb, var(--white) 95%, transparent);
    text-align: left;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink-900);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.app-picker-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--teal-500) 35%, var(--border));
}

.app-picker-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.app-picker-option.is-selected {
    border-color: color-mix(in srgb, var(--teal-500) 42%, var(--border));
    background: linear-gradient(180deg, rgba(223, 244, 242, 0.92), rgba(255, 255, 255, 0.98));
    color: var(--teal-700);
}

.app-picker-option-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-picker-option-mark {
    min-width: 1.2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: var(--teal-700);
}

.app-picker-empty {
    padding: 1rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--teal-500) 18%, var(--border));
    border-radius: 0.92rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--ink-500);
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #ffffff 56%, transparent), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

.toast-stack {
    position: fixed;
    top: 4.6rem;
    right: 0.7rem;
    z-index: 1300;
    display: grid;
    gap: 0.45rem;
    width: min(320px, calc(100% - 1.4rem));
}

.toast {
    padding: 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--white) 93%, transparent);
    box-shadow: var(--shadow-hard);
    animation: toast-up 0.22s ease;
    font-size: 0.84rem;
}

.toast.success {
    border-color: #84c8a7;
}

.toast.error {
    border-color: #e1a3a3;
}

.toast.info {
    border-color: #9fbee7;
}

@keyframes toast-up {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.live-ticker {
    border: 1px solid color-mix(in srgb, var(--gold-500) 40%, var(--border));
    border-radius: var(--radius-pill);
    background: #f9f4e7;
    padding: 0.45rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.2rem;
}

.ticker-dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 50%;
    background: var(--red-500);
    box-shadow: 0 0 0 0 rgba(222, 77, 77, 0.7);
    animation: pulse 1.4s infinite;
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 8px rgba(222, 77, 77, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(222, 77, 77, 0);
    }
}

.ticker-text {
    font-size: 0.82rem;
    font-weight: 700;
}

.timeline {
    display: grid;
    gap: 0.6rem;
}

.timeline-item {
    border-left: 3px solid color-mix(in srgb, var(--green-500) 45%, var(--border));
    padding: 0.4rem 0 0.4rem 0.7rem;
}

.empty-state {
    border: 1px dashed color-mix(in srgb, var(--ink-500) 30%, var(--border));
    border-radius: var(--radius-md);
    padding: 0.95rem;
    color: var(--ink-500);
    text-align: center;
    background: color-mix(in srgb, var(--surface-strong) 85%, transparent);
}

.empty-state .btn,
.empty-state a.btn {
    margin-top: 0.65rem;
}

.support-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.support-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr);
}

.support-card {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.support-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.support-action-row .btn {
    flex: 1 1 10rem;
    justify-content: center;
}

.support-form {
    display: grid;
    gap: 0.75rem;
}

.support-form textarea {
    min-height: 11rem;
}

.page-support {
    overflow-y: auto;
    touch-action: pan-y;
}

.page-support::before,
.page-support::after {
    content: none;
    display: none;
}

.page-support main {
    min-height: auto;
}

.page-support .footer {
    background: #ffffff;
}

.page-support .footer::before {
    background: none;
    opacity: 0;
}

.fade-in {
    animation: fade-in-up 0.3s ease;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-auth="guest"],
[data-auth="user"] {
    display: none;
}

.auth-guest [data-auth="guest"] {
    display: inline-flex;
}

.auth-user [data-auth="user"] {
    display: inline-flex;
}

.auth-user [data-auth="user-block"] {
    display: block;
}

.auth-guest [data-auth="guest-block"] {
    display: block;
}

@media (max-width: 359px) {
    .container {
        width: calc(100% - 0.9rem);
    }

    .brand-name {
        font-size: 1.16rem;
    }

    .brand-tag {
        font-size: 0.6rem;
    }

    .surface,
    .card {
        padding: 0.78rem;
    }

    .btn {
        padding: 0.58rem 0.86rem;
        font-size: 0.8rem;
    }

    .kpi-value {
        font-size: 1.55rem;
    }

    .mobile-nav-link {
        font-size: 0.62rem;
    }

    .table-wrap table {
        min-width: 520px;
    }
}

@media (max-width: 767px) {
    .table-wrap table {
        min-width: 560px;
    }

    .card-title-row {
        align-items: flex-start;
    }

    .form-grid.two,
    .form-grid.three {
        grid-template-columns: 1fr;
    }

    .toast-stack {
        top: 4.2rem;
        right: 0.45rem;
        width: min(320px, calc(100% - 0.9rem));
    }
}

@media (min-width: 375px) {
    .container {
        width: min(var(--container), calc(100% - 1.4rem));
    }

    .mobile-nav-link {
        font-size: 0.68rem;
    }

    .card {
        padding: 1rem;
    }
}

@media (min-width: 390px) and (max-width: 767px) {
    .container {
        width: min(var(--container), calc(100% - 1.6rem));
    }

    .surface {
        padding: 1.05rem;
    }

    .mobile-nav-link {
        font-size: 0.7rem;
    }
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }

    main {
        padding: 1.2rem 0 2rem;
    }

    .container {
        width: min(var(--container), calc(100% - 2.2rem));
    }

    .header-inner {
        gap: 1rem;
    }

    .menu-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }

    body.menu-open .site-nav {
        display: flex;
        animation: none;
    }

    .nav-btn,
    .theme-toggle {
        width: auto;
    }

    .mobile-bottom-nav {
        display: none;
    }

    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .player-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid.three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .surface {
        padding: 1.2rem;
    }

    .card {
        padding: 1.05rem;
    }
}

@media (min-width: 1200px) {
    main {
        padding-top: 1.4rem;
    }

    .header-inner {
        padding: 0.8rem 0;
    }

    .section {
        margin-top: 1.2rem;
    }

    .surface {
        padding: 1.35rem;
    }
}

/* CricHeroes-style UX refresh */
:root {
    --app-red: #d6242f;
    --app-red-dark: #bc1e28;
    --app-red-soft: #fcecef;
    --teal-600: #0f8f87;
    --teal-500: #15a39b;
    --teal-100: #dff4f2;
    --ui-bg: #f5f7f9;
    --ui-surface: #ffffff;
    --ui-border: #dde4ec;
    --ui-text: #1f2b36;
    --ui-muted: #697989;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Manrope", "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

body {
    background: var(--ui-bg);
    color: var(--ui-text);
}

main {
    padding-top: 0.8rem;
}

.site-header {
    background: linear-gradient(180deg, var(--app-red), var(--app-red-dark));
    border-bottom: 0;
    color: #fff;
    box-shadow: 0 10px 24px rgba(159, 18, 34, 0.28);
}

.site-header.is-compact {
    box-shadow: 0 8px 18px rgba(133, 15, 29, 0.3);
}

.site-header .brand {
    color: #fff;
}

.brand-logo {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 10px 24px rgba(7, 15, 27, 0.22);
}

.brand-name {
    font-family: "Manrope", "Segoe UI", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.brand-tag {
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1em;
}

.menu-toggle {
    border-color: rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.12);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
    background: #fff;
}

.site-nav {
    top: calc(100% + 0.38rem);
    border-radius: 0.95rem;
}

.nav-link,
.nav-btn,
.theme-toggle {
    border-color: var(--ui-border);
    font-weight: 700;
}

.nav-link.active,
.mobile-nav-link.active {
    background: var(--teal-600);
    border-color: var(--teal-600);
}

.mobile-bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem 1rem 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
}

.mobile-nav-link {
    padding: 0.36rem 0.15rem;
    color: #515f71;
}

.mobile-nav-link.active {
    background: color-mix(in srgb, var(--teal-500) 16%, #fff);
    color: var(--teal-600);
    border-color: color-mix(in srgb, var(--teal-500) 28%, #fff);
}

.mobile-nav-link.active .dot {
    background: var(--teal-600);
}

.surface,
.card {
    border-radius: 0.95rem;
    border-color: var(--ui-border);
    box-shadow: 0 6px 20px rgba(21, 31, 44, 0.06);
}

.section {
    margin-top: 0.82rem;
}

.page-title {
    font-size: clamp(1.45rem, 5vw, 2.05rem);
}

.section-title {
    font-size: clamp(1.2rem, 3.5vw, 1.55rem);
}

.btn {
    border-radius: 0.72rem;
    font-weight: 700;
}

.btn-primary {
    background: var(--teal-600);
}

.btn-secondary {
    background: #34495e;
}

.btn-outline {
    background: var(--ui-surface);
}

.chip {
    background: #f4f7fa;
    border-color: var(--ui-border);
    border-radius: 999px;
}

.chip.live,
.chip.accepted,
.chip.ready {
    color: #0d7777;
    border-color: color-mix(in srgb, var(--teal-500) 35%, #dbe4ee);
    background: color-mix(in srgb, var(--teal-100) 80%, #fff);
}

.chip.pending {
    color: #a0731f;
}

.btn-link {
    color: var(--teal-600);
}

.kpi-card {
    background: #f8fafb;
}

.notice.info {
    background: #e9f8ff;
    border-color: #bfdff0;
    color: #155b7e;
}

.notice.success {
    background: #e8f7ee;
    border-color: #b9dfc6;
    color: #165739;
}

.notice.error {
    background: #fdecee;
    border-color: #f4c3c9;
    color: #8d2530;
}

.footer {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--green-500) 10%, #ffffff) 0%, transparent 52%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--red-500) 10%, #ffffff) 0%, transparent 58%),
        #ffffff;
}

@media (min-width: 768px) {
    .site-nav {
        background: transparent;
    }

    .site-nav .nav-link,
    .site-nav .theme-toggle,
    .site-nav .nav-btn {
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        padding: 0.44rem 0.72rem;
    }

    .site-nav .nav-link:hover,
    .site-nav .theme-toggle:hover,
    .site-nav .nav-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        transform: none;
    }

    .site-nav .nav-link.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        border: 0;
    }
}

/* Stadium-night shell refresh */
:root {
    --stadium-night: #07131f;
    --stadium-deep: #0f2131;
    --stadium-glow: rgba(17, 163, 155, 0.18);
    --stadium-ember: rgba(214, 36, 47, 0.18);
}

body {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.08), transparent 22%),
        radial-gradient(circle at top left, rgba(214, 36, 47, 0.06), transparent 18%),
        linear-gradient(180deg, #f7fafc 0%, #f1f6fa 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background:
        radial-gradient(circle at 18% 10%, rgba(214, 36, 47, 0.06), transparent 18%),
        radial-gradient(circle at 82% 14%, rgba(17, 163, 155, 0.08), transparent 22%);
}

body::after {
    opacity: 0.05;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 28%);
}

main,
.site-header,
.mobile-bottom-nav,
.notification-panel,
.toast-stack,
.footer {
    position: relative;
    z-index: 1;
}

.surface,
.card,
.player-modal {
    backdrop-filter: blur(14px);
}

.header-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
}

.header-utility-btn {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.55rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.header-utility-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.42);
}

.notification-toggle {
    position: relative;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.notification-toggle:hover,
.notification-toggle[aria-expanded="true"] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.notification-toggle-icon,
.notification-icon-svg {
    width: 1.16rem;
    height: 1.16rem;
    display: block;
}

.notification-icon-svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-toggle-count {
    position: absolute;
    top: -0.08rem;
    right: -0.08rem;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #ffd964;
    color: #1e2530;
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(11, 19, 30, 0.24);
}

.notification-panel {
    position: fixed;
    z-index: 1250;
    top: calc(4.35rem + env(safe-area-inset-top));
    right: 0.85rem;
    width: min(380px, calc(100vw - 1.2rem));
    max-height: min(72vh, 640px);
    overflow: hidden;
    border: 1px solid rgba(201, 213, 227, 0.72);
    border-radius: 1.2rem;
    background: rgba(248, 251, 253, 0.94);
    box-shadow: 0 28px 48px rgba(10, 18, 28, 0.24);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1175;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(244, 248, 251, 0.24);
    backdrop-filter: blur(18px) saturate(1.05);
    cursor: default;
}

body.notification-open main,
body.notification-open .footer,
body.notification-open .mobile-bottom-nav {
    filter: blur(10px) saturate(0.94);
    transition: filter var(--transition-med);
}

.notification-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem 0.8rem;
    border-bottom: 1px solid rgba(201, 213, 227, 0.82);
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 251, 0.9));
}

.notification-panel-head h3 {
    font-size: 1.08rem;
    line-height: 1.1;
}

.notification-panel-kicker {
    margin-bottom: 0.16rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.notification-clear-btn {
    min-height: 2.2rem;
    padding-inline: 0.82rem;
    white-space: nowrap;
}

.notification-panel-body {
    display: grid;
    gap: 0.65rem;
    max-height: calc(min(72vh, 640px) - 78px);
    overflow: auto;
    padding: 0.9rem 1rem 1rem;
}

.notification-card {
    display: grid;
    gap: 0.34rem;
    padding: 0.82rem 0.88rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(205, 214, 226, 0.88);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 22px rgba(17, 27, 41, 0.06);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.notification-card:hover {
    transform: translateY(-1px);
    border-color: rgba(21, 163, 155, 0.28);
    box-shadow: 0 16px 28px rgba(17, 27, 41, 0.09);
}

.notification-card.is-unread {
    border-color: rgba(21, 163, 155, 0.34);
    background: linear-gradient(180deg, rgba(228, 249, 247, 0.96), rgba(255, 255, 255, 0.98));
}

.notification-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.notification-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    background: rgba(21, 163, 155, 0.12);
    color: var(--teal-700);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.notification-time {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ui-muted);
}

.notification-card strong {
    font-size: 0.94rem;
    line-height: 1.28;
}

.notification-card p {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ui-muted);
}

.notification-empty {
    border: 1px dashed rgba(189, 201, 214, 0.94);
    border-radius: 0.95rem;
    padding: 1rem;
    text-align: center;
    color: var(--ui-muted);
    background: rgba(255, 255, 255, 0.84);
}

.nav-link,
.mobile-nav-link {
    gap: 0.38rem;
}

.nav-icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.nav-icon svg {
    width: 1.02rem;
    height: 1.02rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-label {
    line-height: 1.08;
}

.site-nav .nav-link {
    gap: 0.42rem;
}

.site-header .theme-toggle,
.site-header .nav-btn[data-action="logout"] {
    display: none !important;
}

.mobile-inline-footer {
    display: none;
}

.mobile-nav-link {
    gap: 0.16rem;
}

.mobile-nav-link .nav-icon svg {
    width: 1.12rem;
    height: 1.12rem;
}

.mobile-nav-link .nav-label {
    display: block;
    max-width: 100%;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

.button-loading-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.button-loader-cricket {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
    animation: cricket-spin 0.9s linear infinite;
}

.button-loader-cricket::before,
.button-loader-cricket::after {
    display: none;
}

.btn-outline .button-loader-cricket,
.btn-danger .button-loader-cricket,
.btn-warning .button-loader-cricket {
    border-color: currentColor;
}

.btn.is-loading {
    transform: none;
}

.app-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    background: rgba(242, 247, 251, 0.68);
    backdrop-filter: blur(20px) saturate(1.1);
}

.app-loader-shell {
    position: relative;
    overflow: hidden;
    width: min(22rem, calc(100vw - 1.5rem));
    display: grid;
    justify-items: center;
    gap: 0.82rem;
    padding: 1.18rem 1.12rem 1.06rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(197, 211, 224, 0.88);
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.96));
    box-shadow: 0 28px 56px rgba(15, 28, 41, 0.18);
    text-align: center;
}

.app-loader-spinner {
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--teal-500) 18%, rgba(17, 37, 63, 0.05));
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: cricket-spin 1.2s linear infinite;
}

.app-loader-spinner::before,
.app-loader-spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.app-loader-spinner::before {
    inset: 0.34rem;
    border: 2px solid color-mix(in srgb, var(--teal-500) 20%, rgba(17, 37, 63, 0.02));
    border-left-color: var(--teal-600);
    border-right-color: transparent;
    animation: cricket-spin 0.9s linear infinite reverse;
}

.app-loader-spinner::after {
    width: 0.56rem;
    height: 0.56rem;
    top: 0.24rem;
    right: 0.32rem;
    background: linear-gradient(180deg, #ffffff, #d9b550);
    box-shadow: 0 0 0 4px rgba(217, 181, 80, 0.12);
    animation: app-loader-pulse 1.1s ease-in-out infinite;
}

.app-loader-progress {
    width: min(17rem, 84%);
    height: 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--teal-500) 12%, #dbe4ee);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.app-loader-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -42%;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(21, 163, 155, 0), rgba(21, 163, 155, 0.82), rgba(21, 163, 155, 0));
    animation: app-loader-sweep 1.35s ease-in-out infinite;
}

.app-loader-title {
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 800;
}

.app-loader-copy {
    color: var(--ui-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

select[data-location-locked="1"] {
    pointer-events: none;
    padding-right: 0.8rem;
    background-image: none;
}

.auth-location-note {
    grid-column: 1 / -1;
    margin: -0.05rem 0 0;
    font-size: 0.78rem;
    color: var(--ui-muted);
}

.consent-banner {
    position: fixed;
    right: 0.85rem;
    bottom: 1rem;
    z-index: 1250;
    width: min(420px, calc(100vw - 1.2rem));
}

.consent-banner-card {
    display: grid;
    gap: 0.78rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(201, 213, 227, 0.78);
    background:
        radial-gradient(circle at top right, rgba(21, 163, 155, 0.12), transparent 42%),
        rgba(250, 252, 253, 0.96);
    box-shadow: 0 24px 40px rgba(16, 26, 39, 0.2);
    backdrop-filter: blur(18px);
}

.consent-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.consent-banner h3 {
    font-size: 1.08rem;
    line-height: 1.18;
}

.consent-copy,
.consent-note {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--ui-muted);
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@keyframes cricket-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes app-loader-sweep {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(340%);
    }
}

@keyframes app-loader-pulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.82;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 767px) {
    :root {
        --mobile-shell-header: 4.2rem;
        --mobile-shell-footer: 4.7rem;
    }

    body.has-mobile-nav {
        min-height: 100dvh;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100svh;
        height: 100svh;
        max-height: 100svh;
        overflow: hidden;
    }

    body.has-mobile-nav main {
        flex: none;
        width: 100%;
        min-height: 0;
        height: calc(100dvh - var(--mobile-shell-header) - var(--mobile-shell-footer));
        height: calc(100svh - var(--mobile-shell-header) - var(--mobile-shell-footer));
        margin-top: var(--mobile-shell-header);
        padding-top: 0.65rem;
        padding-bottom: 0.8rem;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    body.has-mobile-nav main > .container {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    body.has-mobile-nav .menu-toggle,
    body.has-mobile-nav .site-nav {
        display: none !important;
    }

    body.has-mobile-nav .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1300;
        backdrop-filter: blur(18px);
    }

    body.has-mobile-nav .header-inner {
        gap: 0.65rem;
        min-height: var(--mobile-shell-header);
        padding-block: 0.62rem;
    }

    .header-tools {
        gap: 0.42rem;
    }

    .notification-panel {
        top: calc(var(--mobile-shell-header) + 0.15rem);
        right: 0.55rem;
        width: min(100vw - 1rem, 380px);
    }

    .notification-panel-head {
        padding: 0.82rem 0.86rem 0.72rem;
    }

    .notification-panel-body {
        padding: 0.78rem 0.86rem 0.92rem;
    }

    .notification-clear-btn {
        padding-inline: 0.65rem;
        font-size: 0.76rem;
    }

    .consent-banner {
        left: 0.5rem;
        right: 0.5rem;
        bottom: calc(var(--mobile-shell-footer) + 0.55rem);
        width: auto;
    }

    .consent-banner-card {
        padding: 0.88rem;
        gap: 0.68rem;
        border-radius: 1rem;
    }

    .consent-actions .btn {
        flex: 1 1 9rem;
    }

    body.has-mobile-nav .mobile-bottom-nav {
        left: 0;
        right: 0;
        bottom: 0;
        min-height: var(--mobile-shell-footer);
        height: var(--mobile-shell-footer);
        border-radius: 1.15rem 1.15rem 0 0;
        box-shadow: 0 -10px 28px rgba(16, 26, 39, 0.18);
        backdrop-filter: blur(18px);
        padding: 0.14rem 0.28rem max(0.12rem, env(safe-area-inset-bottom));
    }

    body.has-mobile-nav .mobile-nav-grid {
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }

    body.has-mobile-nav .mobile-nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
        height: 100%;
        padding: 0.2rem 0.12rem;
    }

    body.has-mobile-nav .footer {
        display: none;
    }

    body.has-mobile-nav .mobile-inline-footer {
        display: block;
        margin-top: auto;
        margin-bottom: 0;
        border-top: 0;
        border-radius: 1.05rem;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(17, 27, 41, 0.08);
    }

    body.has-mobile-nav .mobile-inline-footer .footer-inner {
        min-height: clamp(8rem, 31vw, 10.4rem);
        padding: 0.95rem 0 0.85rem;
    }

    body.modal-open.has-mobile-nav main {
        overflow: hidden;
    }

    .site-nav .nav-link {
        justify-content: flex-start;
    }
}