/* =========================================================
   DASHBOARD CLEAN FIX - NO INTERNAL SCROLL / NO TALL TOWERS
   Paste at VERY END of app.css
========================================================= */

.bs-dashboard-top {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-bottom: 26px !important;
}

/* stop card clipping */
.bs-tile {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
}

/* reset old dashboard rules */
.dash-hero,
.dash-hero-clean,
.dash-hero-main,
.dash-side-stack {
    display: block !important;
    grid-template-columns: none !important;
    flex-direction: initial !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* better tile distribution */
.bs-tile-wide {
    grid-column: span 4 !important;
}

.bs-trade-tile-link {
    grid-column: span 3 !important;
}

.bs-funky-tile {
    grid-column: span 2 !important;
}

.bs-live-tile {
    grid-column: span 3 !important;
}

.bs-dues-tile {
    grid-column: span 4 !important;
}

.bs-score-tile {
    grid-column: span 8 !important;
}

/* make live card not look like a vertical tower */
.bs-live-tile {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 250px !important;
}

.bs-live-score-box {
    margin-bottom: 52px !important;
}

.bs-live-tile .bs-tile-action {
    position: static !important;
    margin-top: auto !important;
}

/* dues must grow naturally, never scroll */
.bs-dues-list,
.compact-dues-alert .dash-dues-list {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

.bs-dues-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 10px !important;
    padding-right: 0 !important;
}

/* make due rows readable */
.bs-dues-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
}

.bs-dues-item em {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
}

/* score radar must grow naturally, never scroll */
.bs-score-grid {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 14px !important;
}

.bs-score-mini {
    min-height: 142px !important;
}

/* reduce wasted white space in score cards */
.bs-score-value {
    margin: 6px 0 !important;
}

.bs-score-value span {
    font-size: 28px !important;
}

.bs-score-mini-top strong {
    max-width: 155px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* trade card tile cleaner */
.bs-trade-tile {
    min-height: 250px !important;
}

.bs-trade-tile .bs-tile-action {
    position: static !important;
    margin-top: 24px !important;
}

/* funky card not too tall */
.bs-funky-tile {
    min-height: 120px !important;
    align-items: center !important;
}

.bs-funky-value {
    max-width: 100% !important;
}

/* responsive */
@media (max-width: 1200px) {
    .bs-tile-wide,
    .bs-trade-tile-link,
    .bs-funky-tile,
    .bs-live-tile,
    .bs-dues-tile,
    .bs-score-tile {
        grid-column: span 6 !important;
    }
}

@media (max-width: 760px) {
    .bs-dashboard-top {
        grid-template-columns: 1fr !important;
    }

    .bs-tile-wide,
    .bs-trade-tile-link,
    .bs-funky-tile,
    .bs-live-tile,
    .bs-dues-tile,
    .bs-score-tile {
        grid-column: auto !important;
    }

    .bs-dues-list,
    .bs-score-grid {
        grid-template-columns: 1fr !important;
    }
}





/* =========================================
   BALANCESQUAD DESIGN SYSTEM
========================================= */



/* =========================================
   GLOBAL BASE
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
}

a {
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}



/* =========================================
   AUTH PAGES
========================================= */

.auth-page {
    margin: 0;
    min-height: 100vh;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--secondary-color)
        );
}

.auth-container {
    width: 100%;
    max-width: 460px;
}

.auth-card {
    background: var(--surface);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-heavy);
}

.auth-header {
    padding: 42px 28px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--secondary-color)
        );
    color: white;
}

.auth-logo {
    font-size: 52px;
    margin-bottom: 12px;
}

.auth-header h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
}

.auth-header p {
    margin-top: 10px;
    opacity: 0.9;
    font-size: 14px;
}

.auth-body {
    padding: 34px;
}

.auth-form-group {
    margin-bottom: 22px;
}

.auth-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.auth-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text-main);
    font-size: 15px;
    transition: 0.25s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
}

.auth-check-row {
    margin-bottom: 20px;
}

.auth-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-check-input {
    width: 18px;
    height: 18px;
}

.auth-forgot {
    text-align: right;
    margin-bottom: 22px;
}

.auth-forgot a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.auth-forgot a:hover {
    opacity: 0.85;
}

.auth-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
}

.auth-divider {
    margin: 28px 0 20px;
    position: relative;
    text-align: center;
}

.auth-divider span {
    background: var(--surface);
    padding: 0 14px;
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border);
}

.auth-description {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.auth-footer {
    padding: 24px;
    text-align: center;
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
}

.auth-footer p {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-footer a {
    display: inline-block;
    margin-bottom: 14px;
    font-weight: 800;
    text-decoration: none;
    color: var(--primary-color);
}

.auth-footer small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 576px) {

    .auth-page {
        padding: 16px;
    }

    .auth-body {
        padding: 24px;
    }

    .auth-header {
        padding: 34px 22px;
    }

    .auth-header h1 {
        font-size: 28px;
    }

}


.auth-info-box {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-left: 5px solid var(--info);
    padding: 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 22px;
}

.auth-input-error {
    border-color: var(--danger) !important;
    background: var(--alert-error-bg) !important;
}

.auth-field-error {
    color: var(--danger);
    font-size: 13px;
    font-weight: 800;
    margin-top: 7px;
}

.auth-error-list {
    margin: 8px 0 0 18px;
    padding: 0;
}

.password-strength {
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    margin-top: 10px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0;
    transition: 0.25s ease;
}

.strength-weak {
    background: var(--danger);
}

.strength-medium {
    background: var(--warning);
}

.strength-good {
    background: var(--success);
}

.password-requirements {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.password-requirements ul {
    margin: 8px 0 0 18px;
}

.password-requirements li {
    margin: 5px 0;
}

.auth-check-ok {
    color: var(--success);
    font-weight: 900;
}

.auth-live-message {
    font-size: 13px;
    font-weight: 800;
    margin-top: 7px;
}

.auth-live-success {
    color: var(--success);
}

.auth-live-error {
    color: var(--danger);
}

.auth-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}


.auth-container-wide {
    max-width: 560px;
}

.auth-success-header {
    background: linear-gradient(135deg, var(--success), #38a169);
}

.auth-bounce {
    animation: authBounce 1.2s infinite;
}

@keyframes authBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.auth-warning-box {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-left: 5px solid var(--warning);
    padding: 15px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.auth-info-panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    margin-bottom: 26px;
}

.auth-funky-display {
    background: var(--bg-gradient);
    color: white;
    padding: 18px;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;
    word-break: break-word;
    margin: 12px 0;
}

.auth-info-panel p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.auth-section-title {
    color: var(--text-main);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 16px;
}

.auth-step-list {
    display: grid;
    gap: 14px;
}

.auth-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-soft);
}

.auth-step-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

.auth-step h4 {
    color: var(--text-main);
    font-weight: 900;
    margin: 0 0 5px;
}

.auth-step p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.auth-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.auth-action-row a {
    flex: 1;
    text-align: center;
}



/* =========================================
   FUN ERROR PAGE
========================================= */

.error-page {
    margin: 0;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg-gradient);
    display: flex;
    justify-content: center;
    align-items: center;
}

.fun-error-card {
    width: 100%;
    max-width: 680px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 34px;
    box-shadow: var(--shadow-main);
    text-align: center;
    color: var(--text-main);
}

.fun-error-scene {
    position: relative;
    height: 110px;
    margin-bottom: 8px;
}

.fun-ball,
.fun-whistle,
.fun-face {
    position: absolute;
    font-size: 46px;
}

.fun-ball {
    left: 18%;
    top: 22px;
    animation: errorBounce 1.2s infinite;
}

.fun-whistle {
    right: 18%;
    top: 20px;
    animation: errorShake 0.9s infinite;
}

.fun-face {
    left: 50%;
    transform: translateX(-50%);
    top: 42px;
    font-size: 58px;
}

@keyframes errorBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-16px) rotate(12deg);
    }
}

@keyframes errorShake {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(8deg);
    }

    75% {
        transform: rotate(-8deg);
    }
}

.fun-error-card h1 {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-main);
    margin: 8px 0 14px;
}

.fun-status-pill {
    display: inline-block;
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 900;
    margin-bottom: 22px;
}

.fun-message-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 18px;
    padding: 18px;
    text-align: left;
    margin-bottom: 16px;
}

.fun-message-box strong {
    display: block;
    color: var(--text-main);
    margin-bottom: 8px;
}

.fun-message-box p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.fun-hint-box {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-radius: 16px;
    padding: 14px;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 18px;
}

.fun-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.fun-meta div {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    text-align: left;
}

.fun-meta span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.fun-meta strong {
    color: var(--text-main);
    font-size: 13px;
    word-break: break-word;
}

.fun-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fun-copy-msg {
    display: none;
    margin-top: 16px;
    color: var(--success);
    font-weight: 900;
    font-size: 13px;
}

@media(max-width: 576px) {
    .fun-error-card {
        padding: 24px;
    }

    .fun-error-card h1 {
        font-size: 26px;
    }

    .fun-ball {
        left: 8%;
    }

    .fun-whistle {
        right: 8%;
    }
}

/* =========================================
   DARK MODE CSS
========================================= */

.app-theme-toggle {
    background: rgba(255,255,255,0.22);
}




:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;

    --bg-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #e2e8f0;

    --text-main: #2d3748;
    --text-muted: #718096;

    --success: #48bb78;
    --warning: #ed8936;
    --danger: #f56565;
    --info: #667eea;

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 11px;

    --shadow-main: 0 20px 70px rgba(0,0,0,0.25);
    --shadow-soft: 0 8px 18px rgba(0,0,0,0.06);

    --alert-success-bg: #f0fff4;
    --alert-success-text: #166534;

    --alert-error-bg: #fef2f2;
    --alert-error-text: #991b1b;

    --alert-warning-bg: #fffbeb;
    --alert-warning-text: #92400e;

    --alert-info-bg: #edf2ff;
    --alert-info-text: #3730a3;
}

body.dark-mode {
    --bg-gradient: linear-gradient(135deg, #111827, #1f2937);
    --surface: #111827;
    --surface-soft: #1f2937;
    --border: #374151;

    --text-main: #e5e7eb;
    --text-muted: #9ca3af;

    --alert-success-bg: rgba(34, 197, 94, 0.14);
    --alert-success-text: #bbf7d0;

    --alert-error-bg: rgba(239, 68, 68, 0.14);
    --alert-error-text: #fecaca;

    --alert-warning-bg: rgba(245, 158, 11, 0.14);
    --alert-warning-text: #fde68a;

    --alert-info-bg: rgba(99, 102, 241, 0.16);
    --alert-info-text: #c7d2fe;

    background: var(--bg-gradient) !important;
    color: var(--text-main) !important;
}

/* =========================================
   GLOBAL PAGE SHELL
========================================= */

.app-page {
    min-height: 100vh;
    padding: 20px;
    background: var(--bg-gradient);
}

.app-shell {
    max-width: 1250px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-main);
}

.app-content {
    padding: 35px;
    background: var(--surface);
    color: var(--text-main);
}

/* =========================================
   GLOBAL HEADER
========================================= */

.app-header {
    background: var(--bg-gradient);
    color: white;
    padding: 30px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-brand-icon {
    font-size: 42px;
}

.app-brand h1 {
    font-size: 30px;
    font-weight: 900;
    margin: 0;
    color: white;
}

.app-brand p {
    margin: 4px 0 0;
    opacity: 0.92;
    font-size: 14px;
    color: white;
}

.app-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.app-header-btn {
    text-decoration: none;
    border: none;
    background: rgba(255,255,255,0.18);
    color: white;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
}

.app-header-btn:hover {
    background: white;
    color: var(--primary-color);
}

.app-logout-form {
    display: inline;
    margin: 0;
}

.app-logout-btn {
    background: rgba(245,101,101,0.92);
}

/* =========================================
   GLOBAL TOOLBAR / PAGE TITLE
========================================= */

.app-toolbar {
    background: linear-gradient(135deg, var(--surface-soft), var(--surface));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.app-eyebrow {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.app-toolbar-title {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0 0 6px;
}

.app-toolbar-subtitle {
    color: var(--text-muted);
    margin: 0;
    font-size: 15px;
}

/* =========================================
   GLOBAL BUTTONS
========================================= */

.app-primary-btn {
    text-decoration: none;
    border: none;
    background: var(--bg-gradient);
    color: white;
    padding: 13px 18px;
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(102,126,234,0.25);
    transition: 0.25s ease;
}

.app-primary-btn:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(102,126,234,0.35);
}

.app-secondary-btn {
    text-decoration: none;
    border: none;
    background: #edf2ff;
    color: var(--primary-color);
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

/* =========================================
   GLOBAL ALERTS
========================================= */

.app-alert {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 16px;
    border-radius: 14px;
    border-left: 5px solid;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
}

.app-alert-icon {
    font-size: 22px;
    line-height: 1;
}

.app-alert-content {
    flex: 1;
}

.app-alert-title {
    font-weight: 900;
    margin-bottom: 4px;
}

.app-alert-message {
    font-size: 14px;
    line-height: 1.5;
}

.app-alert-success {
    background: var(--alert-success-bg);
    border-left-color: var(--success);
    color: var(--alert-success-text);
}

.app-alert-error {
    background: var(--alert-error-bg);
    border-left-color: var(--danger);
    color: var(--alert-error-text);
}

.app-alert-warning {
    background: var(--alert-warning-bg);
    border-left-color: var(--warning);
    color: var(--alert-warning-text);
}

.app-alert-info {
    background: var(--alert-info-bg);
    border-left-color: var(--info);
    color: var(--alert-info-text);
}

.app-alert-close {
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s ease;
    padding: 0;
    line-height: 1;
    color: inherit;
}

.app-alert-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* =========================================
   DARK MODE GENERAL FALLBACKS
========================================= */

body.dark-mode .top-card,
body.dark-mode .main-card,
body.dark-mode .profile-card,
body.dark-mode .sport-card,
body.dark-mode .fixture-card,
body.dark-mode .info-card,
body.dark-mode .feature-card,
body.dark-mode .team-card,
body.dark-mode .fixture-info,
body.dark-mode .welcome-box,
body.dark-mode .empty-box,
body.dark-mode .admin-panel,
body.dark-mode .stats-box {
    background: var(--surface-soft) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode label,
body.dark-mode .section-title {
    color: var(--text-main) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background: var(--surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

body.dark-mode table,
body.dark-mode tr,
body.dark-mode td,
body.dark-mode th {
    background: var(--surface-soft) !important;
    color: var(--text-main) !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 650px) {
    .app-page {
        padding: 10px;
    }

    .app-content {
        padding: 22px;
    }

    .app-header {
        padding: 24px 20px;
    }

    .app-header-actions {
        width: 100%;
    }

    .app-header-btn,
    .app-logout-form,
    .app-logout-btn {
        width: 100%;
        text-align: center;
    }
}


/* =========================================
   GLOBAL RATING / FORM CARDS
========================================= */

.info-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 16px;
    padding: 18px;
    color: var(--text-main);
    margin-bottom: 24px;
}

.player-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
}

.player-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.player-title h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 900;
    color: var(--text-main);
}

.player-title p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.rating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.rating-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px;
}

.rating-item label {
    display: block;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 8px;
}

.rating-item select {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
}

body.dark-mode .rating-item,
body.dark-mode .player-card,
body.dark-mode .info-box {
    background: var(--surface-soft);
    border-color: var(--border);
}

body.dark-mode .rating-item select {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--border);
}


.app-stats-grid,
.app-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.app-stat-card,
.app-action-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.app-stat-card span {
    display: block;
    color: var(--text-muted);
    font-weight: 800;
    margin-bottom: 10px;
}

.app-stat-card strong {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 34px;
    font-weight: 900;
    color: var(--primary-color);
}

.app-action-card h4 {
    color: var(--text-main);
    font-weight: 900;
    margin-bottom: 10px;
}

.app-action-card p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 18px;
}

/* =========================================
   PROFILE
========================================= */

.profile-summary-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-soft);
}

.profile-big-avatar {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    flex-shrink: 0;
}

.profile-summary-card h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
}

.profile-summary-card p {
    margin: 0;
    color: var(--text-muted);
    word-break: break-word;
}

.app-section-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-main);
    margin: 28px 0 18px;
}

/* =========================================
   DASHBOARD WELCOME
========================================= */

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}




.welcome-left {
    flex: 1;
    min-width: 260px;
}

.welcome-funky-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    min-width: 260px;
    box-shadow: var(--shadow-soft);
}

.funky-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.funky-copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.funky-id-blink {
    display: inline-block;
    background: #edf2ff;
    color: var(--primary-color);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 15px;
    animation: funkyPulse 1.6s infinite;
}

@keyframes funkyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102,126,234,0.45);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(102,126,234,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102,126,234,0);
    }
}

.copy-funky-btn {
    border: none;
    background: var(--bg-gradient);
    color: white;
    padding: 9px 13px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}

.copy-message {
    display: none;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--success);
}

body.dark-mode .welcome-funky-box {
    background: var(--surface-soft);
    border-color: var(--border);
}

body.dark-mode .funky-id-blink {
    background: rgba(99,102,241,0.18);
    color: #c7d2fe;
}




.app-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.app-table th,
.app-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-main);
}

.app-table th {
    background: var(--surface-soft);
    color: var(--text-muted);
    font-weight: 900;
}

.app-badge {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.app-badge-success {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
}

.app-badge-error {
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
}

.app-badge-warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

.app-badge-info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
}

.app-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-mini-btn {
    border: none;
    padding: 8px 11px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    font-size: 12px;
}

.app-mini-primary {
    background: var(--primary-color);
    color: white;
}

.app-mini-danger {
    background: var(--danger);
    color: white;
}

.app-mini-warning {
    background: var(--warning);
    color: white;
}

.app-pagination {
    display: flex;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.app-page-link {
    text-decoration: none;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    font-weight: 900;
}

.app-page-link.active {
    background: var(--primary-color);
    color: white;
}



/* =========================================
   LOGS
========================================= */

.logs-filter-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.logs-filter-btn {
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 999px;
    font-weight: 900;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text-main);
    transition: 0.2s ease;
}

.logs-filter-btn.active {
    background: var(--bg-gradient);
    color: white;
    border-color: transparent;
}

.logs-grid {
    display: grid;
    gap: 16px;
}

.log-card {
    display: grid;
    grid-template-columns: 140px 1fr 170px;
    gap: 18px;
    align-items: center;

    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;

    box-shadow: var(--shadow-soft);
}

.log-left {
    display: flex;
    justify-content: center;
}

.log-action {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 8px;
}

.log-message {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
    word-break: break-word;
}

.log-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.log-right {
    text-align: right;
}

.log-time {
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 4px;
}

.log-time-small {
    font-size: 13px;
    color: var(--text-muted);
}

@media(max-width: 900px) {

    .log-card {
        grid-template-columns: 1fr;
    }

    .log-left {
        justify-content: flex-start;
    }

    .log-right {
        text-align: left;
    }
}



/* =========================================
   TEAMS PAGE
========================================= */

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.team-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-soft);
    box-shadow: var(--shadow-soft);
}

.team-header {
    padding: 18px 20px;
    color: white;
    font-weight: 900;
    font-size: 20px;
    background: var(--bg-gradient);
}

.player-row {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.player-row:last-child {
    border-bottom: none;
}

.team-player-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.player-name {
    font-weight: 900;
    color: var(--text-main);
}

.player-score {
    background: var(--alert-info-bg);
    color: var(--primary-color);
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
}

.substitute-box {
    margin-top: 14px;
    padding: 14px;
    background: var(--alert-warning-bg);
    border: 1px solid var(--warning);
    border-radius: 14px;
}

.substitute-title {
    font-weight: 900;
    color: var(--alert-warning-text);
    margin-bottom: 8px;
}

.substitute-note {
    color: var(--alert-warning-text);
    font-size: 13px;
    margin-bottom: 12px;
}

.substitute-status {
    color: var(--text-main);
    font-size: 13px;
    margin-bottom: 12px;
}

.substitute-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.app-select {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    min-width: 160px;
    font-weight: 700;
}


/* =========================================
   SPORT PLAYERS PAGE
========================================= */

.player-add-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.app-input {
    flex: 1;
    min-width: 240px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    font-weight: 700;
}

.app-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

.players-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}

.player-compact-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-soft);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.player-compact-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.player-compact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.player-compact-info {
    min-width: 0;
}

.player-compact-info h4 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 900;
    color: var(--text-main);
    word-break: break-word;
}

.player-compact-info p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 13px;
    word-break: break-word;
}

.player-remove-mini {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 12px;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

.player-remove-mini:hover {
    background: var(--danger);
    color: white;
}

body.dark-mode .player-compact-card {
    background: var(--surface-soft);
    border-color: var(--border);
}

body.dark-mode .app-input {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--border);
}


/* =========================================
   MANAGE SPORT PAGE
========================================= */

.management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.management-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.management-box h3 {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 18px;
}

.app-form-group {
    margin-bottom: 16px;
}

.app-form-group label {
    display: block;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 8px;
}

.app-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    resize: vertical;
    font-weight: 700;
}

.app-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

.feature-compact-list {
    display: grid;
    gap: 12px;
}

.feature-compact-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.feature-compact-name {
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 8px;
}

body.dark-mode .management-box,
body.dark-mode .feature-compact-item {
    background: var(--surface-soft);
    border-color: var(--border);
}


/* =========================================
   RAW LOG VIEWER
========================================= */

.raw-log-filter {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center;
}

.raw-log-summary {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    color: var(--text-main);
    font-weight: 800;
}

.raw-log-summary strong {
    color: var(--primary-color);
}

.raw-log-box {
    background: #0b1020;
    color: #d1d5db;
    border-radius: 18px;
    padding: 18px;
    max-height: 680px;
    overflow: auto;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.raw-log-line {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.raw-log-line:last-child {
    border-bottom: none;
}

.raw-error {
    color: #fecaca;
    font-weight: 900;
    background: rgba(239,68,68,0.08);
}

.raw-warn {
    color: #fde68a;
    font-weight: 900;
    background: rgba(245,158,11,0.08);
}

.raw-info {
    color: #bfdbfe;
}

body.dark-mode .raw-log-summary {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text-main);
}


/* =========================================
   MATCH SETTLEMENT
========================================= */

.settlement-fixture-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);

    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.settlement-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.settlement-fixture-card h3 {
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 900;
    color: var(--text-main);
}

.settlement-fixture-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.settlement-status-pill {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    padding: 10px 15px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
}

.settlement-status-pill.pending {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

.settlement-create-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.settlement-create-card h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 900;
    color: var(--text-main);
}

.settlement-create-card p {
    color: var(--text-muted);
    margin-bottom: 18px;
}

.settlement-create-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.settlement-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.settlement-summary-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.settlement-summary-card span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.settlement-summary-card strong {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-color);
}

.settlement-team-result-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.settlement-team-result-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.settlement-team-result-card h4 {
    margin: 0 0 8px;
    font-weight: 900;
    color: var(--text-main);
}

.team-result-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.settlement-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.settlement-payment-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.payment-player-line {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.payment-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.payment-player-info {
    min-width: 0;
}

.payment-player-info h4 {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 900;
    word-break: break-word;
}

.payment-player-info p {
    margin: 0 0 9px;
    color: var(--text-muted);
    font-size: 13px;
    word-break: break-word;
}

.payment-amount-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px;
    margin-bottom: 14px;
}

.payment-amount-box span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.payment-amount-box strong {
    font-size: 22px;
    color: var(--primary-color);
    font-weight: 900;
}

.payment-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.payment-lock-text {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
}

.settlement-mini-btn {
    text-decoration: none;
    background: var(--bg-gradient);
    color: white;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.settlement-mini-btn:hover {
    color: white;
    transform: translateY(-1px);
}



/* =========================================
   MATCH HISTORY
========================================= */

.history-grid {
    display: grid;
    gap: 18px;
}

.history-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.history-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.history-top h3 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-weight: 900;
}

.history-top p {
    margin: 0;
    color: var(--text-muted);
}

.history-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.history-details div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.history-details span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.history-details strong {
    color: var(--text-main);
    font-weight: 900;
}

.history-payment-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}


/* =========================================
   GAME RESULTS
========================================= */

.game-result-create-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
}

.game-result-create-box h3 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-weight: 900;
}

.game-result-create-box p {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.game-result-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.draw-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: var(--text-main);
}

.game-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.game-result-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.game-result-card h4 {
    color: var(--text-main);
    font-weight: 900;
    margin: 0 0 8px;
}

.game-result-card p {
    color: var(--text-muted);
    margin: 6px 0;
}




.history-settlement-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.history-settlement-summary div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.history-settlement-summary span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.history-settlement-summary strong {
    color: var(--primary-color);
    font-weight: 900;
    font-size: 18px;
}

.history-game-results {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
}

.history-subtitle {
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 10px;
}

.history-muted {
    color: var(--text-muted);
    font-size: 13px;
}

.history-result-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.history-result-pill {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================
   POST MATCH FEEDBACK
========================================= */

.feedback-fixture-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.feedback-fixture-card h3 {
    color: var(--text-main);
    font-weight: 900;
    margin: 0 0 8px;
}

.feedback-fixture-card p {
    color: var(--text-muted);
    margin: 0;
}

.feedback-icon {
    font-size: 44px;
    flex-shrink: 0;
}

.feedback-player-list {
    display: grid;
    gap: 18px;
}

.feedback-player-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.feedback-player-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.feedback-player-head h3 {
    color: var(--text-main);
    font-weight: 900;
    margin: 0 0 5px;
}

.feedback-player-head p {
    color: var(--text-muted);
    margin: 0;
    font-size: 14px;
}

.compact-rating-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sticky-action-bar {
    position: sticky;
    bottom: 16px;
    margin-top: 26px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-main);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sticky-action-bar strong {
    display: block;
    color: var(--text-main);
    margin-bottom: 4px;
}

.sticky-action-bar span {
    color: var(--text-muted);
    font-size: 13px;
}

body.dark-mode .sticky-action-bar,
body.dark-mode .feedback-player-card,
body.dark-mode .feedback-fixture-card {
    background: var(--surface-soft);
    border-color: var(--border);
}


/* =========================================
   SHARED APP FORMS
========================================= */

.app-form-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.app-select-full {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    font-weight: 700;
}

.app-full-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.form-hint {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.feature-builder-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}

.feature-builder-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.feature-builder-row:last-child {
    margin-bottom: 0;
}

.feature-remove-btn {
    border: none;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    border-radius: 12px;
    width: 44px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

.feature-remove-btn:hover {
    background: var(--danger);
    color: white;
}

@media(max-width: 576px) {
    .app-form-card {
        padding: 18px;
    }

    .feature-builder-row {
        flex-direction: column;
    }

    .feature-remove-btn {
        width: 100%;
        padding: 10px;
    }
}


/* =========================================
   MODERN FIXTURES
========================================= */

.fixture-modern-grid,
.sports-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
    gap: 22px;
}

.fixture-modern-card{
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.fixture-modern-top {
    padding: 22px;
    border-bottom: 1px solid var(--border);

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.fixture-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.fixture-title-row h3,
.sports-modern-top h3 {
    margin: 0;
    font-weight: 900;
    color: var(--text-main);
}

.fixture-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fixture-status-pill {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.fixture-modern-body {
    padding: 22px;
}

.fixture-modern-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.fixture-info-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    gap: 8px;
    align-items: center;
}

.fixture-time-list {
    display: grid;
    gap: 12px;
}

.fixture-time-list div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}

.fixture-time-list strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-main);
}

.fixture-time-list span {
    color: var(--text-muted);
    font-size: 14px;
}

.fixture-notes-modern {
    margin-top: 18px;
    background: var(--surface);
    border-radius: 14px;
    padding: 14px;
    border-left: 4px solid var(--primary-color);
    color: var(--text-muted);
    line-height: 1.6;
}

.fixture-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.fixture-small-btn {
    padding: 10px 14px;
    font-size: 13px;
}

.fixture-danger-btn {
    border: none;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}

.fixture-danger-btn:hover {
    background: var(--danger);
    color: white;
}

.sports-modern-top {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px;
}

.sports-modern-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--bg-gradient);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    flex-shrink: 0;
}

.sports-modern-top p {
    margin: 6px 0 0;
    color: var(--text-muted);
}

.sports-feature-section {
    padding: 0 22px 22px;
}

.sports-feature-title {
    font-weight: 900;
    margin-bottom: 12px;
    color: var(--text-main);
}

.stats-modern-box {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 24px;
}

.stats-modern-number {
    font-size: 34px;
    font-weight: 900;
    color: var(--primary-color);
}

.stats-modern-text {
    color: var(--text-muted);
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.sports-modern-card {
    display: flex;
    flex-direction: column;
}

.sports-feature-section {
    flex: 1;
}

.sports-modern-actions {
    padding: 0 22px 22px;
    margin-top: auto;
}


/* =========================================
   DASHBOARD
========================================= */

.dash-hero-clean {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.dash-hero-main,
.dash-side-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-welcome-card,
.compact-funky-card,
.compact-live-card,
.compact-dues-alert,
.compact-score-card,
.dash-mini-trade-card {
    background: var(--app-card-bg, rgba(255,255,255,0.06));
    color: var(--app-text, inherit);
    border: 1px solid var(--app-border, rgba(255,255,255,0.12));
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

.dash-welcome-card {
    border-radius: 24px;
    padding: 22px;
}

.dash-welcome-card h2 {
    margin: 6px 0 8px;
}

.dash-welcome-card p {
    max-width: 680px;
    margin: 0;
    opacity: .74;
}

.compact-score-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.compact-score-card {
    border-radius: 20px;
    padding: 14px;
    min-height: auto;
}

.compact-score-card .dash-score-number {
    margin: 8px 0;
}

.compact-score-card .dash-score-number span {
    font-size: 34px;
}

.dash-mini-trade-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.dash-mini-trade-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 118px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,210,80,.40), transparent 28%),
        linear-gradient(135deg, rgba(16,24,48,.98), rgba(28,38,72,.96));
    color: #fff;
}

html:not(.dark) .dash-mini-trade-card,
body:not(.dark) .dash-mini-trade-card {
    background:
        radial-gradient(circle at 90% 10%, rgba(255,187,45,.55), transparent 28%),
        linear-gradient(135deg, #fff7df, #f7e1a2 48%, #d85b5b);
    color: #29150d;
}

.mini-trade-bg {
    position: absolute;
    inset: -70%;
    background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.28), transparent 60%);
    transform: rotate(14deg);
    pointer-events: none;
}

.mini-trade-kicker {
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffd86b;
}

html:not(.dark) .mini-trade-kicker,
body:not(.dark) .mini-trade-kicker {
    color: #a30f1d;
}

.mini-trade-title {
    font-size: 22px;
    font-weight: 1000;
    margin-top: 4px;
}

.mini-trade-sub {
    font-size: 12px;
    margin-top: 3px;
    opacity: .75;
    font-weight: 900;
}

.mini-trade-thumb {
    position: relative;
    width: 82px;
    height: 106px;
    border-radius: 15px;
    flex: 0 0 auto;
    background: linear-gradient(145deg, #ffdf68, #c62236 58%, #10172d);
    border: 3px solid rgba(255,232,150,.95);
    transform: rotate(5deg);
}

.mini-trade-rating {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff4aa;
    color: #a30f1d;
    display: grid;
    place-items: center;
    font-weight: 1000;
    font-size: 13px;
}

.mini-trade-avatar {
    position: absolute;
    inset: 34px 16px 28px;
    border-radius: 11px;
    background: rgba(8,13,28,.75);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 1000;
    font-size: 25px;
}

.mini-trade-name {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 6px;
    font-size: 9px;
    color: #fff;
    text-align: center;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-funky-card,
.compact-live-card,
.compact-dues-alert {
    border-radius: 22px;
    padding: 14px;
}

.compact-live-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
}

.compact-live-card .dash-live-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.compact-live-card .dash-live-main h3 {
    font-size: 16px;
    margin: 3px 0;
}

.compact-live-card .dash-live-main p {
    font-size: 12px;
    margin: 0;
    opacity: .72;
}

.compact-live-card .dash-live-score {
    grid-column: 1 / -1;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,0.06);
}

.compact-live-card .dash-live-open {
    grid-column: 1 / -1;
    justify-content: center;
}


.compact-dues-alert .dash-dues-item {
    padding: 9px 0;
}

@media (max-width: 1000px) {
    .dash-hero-clean {
        grid-template-columns: 1fr;
    }

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

    .compact-dues-alert,
    .compact-live-zone {
        grid-column: span 2;
    }
}

@media (max-width: 650px) {
    .dash-side-stack {
        grid-template-columns: 1fr;
    }

    .compact-dues-alert,
    .compact-live-zone {
        grid-column: auto;
    }

    .dash-mini-trade-card {
        min-height: 104px;
    }
}





.dash-hero {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.dash-hero h2 {
    color: var(--text-main);
    font-size: 30px;
    font-weight: 900;
    margin: 0 0 8px;
}

.dash-hero p {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.dash-funky-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    min-width: 260px;
}

.funky-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}

.funky-copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.copy-funky-btn {
    border: none;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
}

.copy-message {
    display: none;
    margin-top: 10px;
    color: var(--success);
    font-weight: 900;
    font-size: 13px;
}

.dashboard-section-head {
    margin: 30px 0 16px;
}

.dashboard-section-head h3 {
    color: var(--text-main);
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 5px;
}

.dashboard-section-head p {
    color: var(--text-muted);
    margin: 0;
}

.dash-card-grid,
.dash-fixture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
}

.dash-mini-card,
.dash-fixture-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.dash-mini-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-mini-card h4,
.dash-fixture-card h4 {
    color: var(--text-main);
    font-weight: 900;
    margin: 0 0 8px;
}

.dash-mini-card p {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.dash-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--bg-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
}

.dash-card-icon.small {
    width: 42px;
    height: 42px;
    font-size: 20px;
}

.dash-card-btn {
    width: fit-content;
    margin-top: auto;
}

.dash-fixture-card.warning {
    border-left: 5px solid var(--warning);
}

.dash-fixture-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.dash-status-pill {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.dash-status-pill.pending {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

.dash-info-list {
    display: grid;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.dash-info-list div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.dash-countdown {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-radius: 14px;
    padding: 12px;
    font-weight: 900;
    margin-bottom: 16px;
    text-align: center;
}

.dash-team-reveal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}

.dash-team-reveal h5 {
    color: var(--text-main);
    font-weight: 900;
    margin-bottom: 10px;
}

.dash-team-list {
    color: var(--text-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.dash-team-list:last-child {
    border-bottom: none;
}

.dash-rsvp-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
	margin-top: 12px;
}

.dash-rsvp-row form {
    display: inline-flex;
}

.dash-rsvp-btn {
    padding: 10px 13px;
    font-size: 13px;
}

.dash-danger-btn {
    border: none;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    border-radius: 12px;
    padding: 10px 13px;
    font-weight: 900;
    cursor: pointer;
}

.dash-danger-btn:hover {
    background: var(--danger);
    color: white;
}

.dash-locked-box {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-radius: 14px;
    padding: 12px;
    font-weight: 900;
    text-align: center;
}

@media(max-width: 576px) {
    .dash-hero {
        padding: 18px;
    }

    .dash-hero h2 {
        font-size: 24px;
    }

    .dash-funky-card {
        width: 100%;
        min-width: 0;
    }

    .dash-card-grid,
    .dash-fixture-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PROFILE PAGE
========================================= */

.profile-hero-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary-color);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 28px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.profile-funky-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    min-width: 260px;
}

.profile-hero-card .app-toolbar-title {
    margin-bottom: 4px;
}

@media(max-width: 576px) {
    .profile-funky-card {
        width: 100%;
        min-width: 0;
    }
}


.fixture-lock-hint {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    font-size: 13px;
    font-weight: 800;
    border-left: 4px solid var(--warning);
}


/* CSS FOR VS TEAMS */

.history-team-tabs {
    display: grid;
    gap: 10px;
    min-width: 260px;
}

.history-team-detail {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
}

.history-team-detail summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--text-main);
}

.history-team-detail summary strong {
    color: var(--primary-color);
}

.history-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.history-member-pill {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

/* fixture-response page */

.rsvp-summary-grid,
.rsvp-response-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.rsvp-summary-card,
.rsvp-response-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.rsvp-summary-card {
    color: var(--text-main);
    display: block;
}

.rsvp-summary-card span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.rsvp-summary-card strong {
    color: var(--primary-color);
    font-size: 30px;
    font-weight: 900;
}

.rsvp-summary-card.active {
    border-left: 5px solid var(--primary-color);
    background: var(--alert-info-bg);
}

.rsvp-status-row {
    margin: 14px 0;
}

.rsvp-note-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-color);
    border-radius: 14px;
    padding: 12px;
    color: var(--text-muted);
    margin-top: 12px;
}

.rsvp-time-text {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

/* fixture response div CSS */

.fixture-card-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.rsvp-mini-btn {
    text-decoration: none;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.rsvp-mini-btn:hover {
    background: var(--primary-color);
    color: white;
}

@media(max-width: 650px) {
    .fixture-card-actions {
        width: 100%;
        justify-items: stretch;
    }

    .rsvp-mini-btn,
    .settlement-mini-btn {
        text-align: center;
    }
}

/* Player Score Introduced CSS */

.dash-score-strip {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px;
    margin-top: 12px;
}

.dash-score-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.dash-score-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dash-score-top > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bg-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.dash-score-top strong {
    color: var(--text-main);
    font-weight: 900;
}

.dash-score-top p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.dash-score-number {
    font-size: 34px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.dash-score-number small {
    font-size: 13px;
    color: var(--text-muted);
}

.dash-score-breakdown {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.dash-score-breakdown strong {
    color: var(--text-main);
}

.dash-score-impact {
    padding: 9px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.dash-score-impact.positive {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
}

.dash-score-impact.negative {
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
}


/* Feedback */

.feedback-mini-btn {
    text-decoration: none;
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.feedback-mini-btn:hover {
    background: var(--warning);
    color: white;
}

.feedback-status-grid,
.feedback-status-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.feedback-status-card,
.feedback-status-panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.feedback-status-card span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
}

.feedback-status-card strong {
    display: block;
    font-size: 34px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.feedback-status-card p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.feedback-status-card.submitted {
    border-left: 5px solid var(--success);
}

.feedback-status-card.pending,
.feedback-status-panel.warning {
    border-left: 5px solid var(--warning);
}

.feedback-status-card.total {
    border-left: 5px solid var(--primary-color);
}

.feedback-status-panel h3 {
    color: var(--text-main);
    font-weight: 900;
    margin-bottom: 14px;
}

.feedback-user-row {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}

.feedback-user-row strong {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.feedback-user-row span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 3px;
}

/*Logout CSS */

.app-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.header-logout-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
}

.header-logout-name {
    color: white;
    font-weight: 900;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-logout-divider {
    color: white;
    opacity: 0.6;
}

@media(max-width: 768px) {
    .app-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .app-header-actions > a,
    .app-header-actions > button,
    .app-logout-form,
    .header-logout-user-btn {
        width: 100%;
    }

    .header-logout-user-btn {
        justify-content: center;
        max-width: none;
    }

    .header-logout-name {
        max-width: 140px;
    }
}

/* Temp Password */
.temp-password-box {
    width: 100%;
    background: var(--alert-warning-bg);
    border: 1px solid var(--warning);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.temp-password-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--alert-warning-text);
    text-transform: uppercase;
}

.temp-password-box code {
    background: var(--surface);
    color: var(--text-main);
    padding: 7px 9px;
    border-radius: 8px;
    font-weight: 900;
    word-break: break-all;
}



.dash-dues-alert {
    width: min(360px, 100%);
    background: var(--alert-error-bg);
    border: 1px solid var(--danger);
    border-left: 5px solid var(--danger);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.dash-dues-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.dash-dues-head h3 {
    margin: 0;
    color: var(--alert-error-text);
    font-weight: 900;
}

.dash-dues-link {
    background: var(--surface);
    color: var(--danger);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.dash-dues-total {
    background: var(--surface);
    color: var(--alert-error-text);
    border-radius: 14px;
    padding: 12px;
    font-weight: 900;
    margin-bottom: 10px;
}

.dash-dues-total strong {
    font-size: 24px;
}

.dash-dues-waiting {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 900;
    margin-bottom: 10px;
}

.dash-dues-list {
    display: grid;
    gap: 8px;
}

.dash-dues-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    background: var(--surface);
    border-radius: 12px;
    padding: 10px;
}

.dash-dues-item span {
    min-width: 0;
}

.dash-dues-item strong {
    display: block;
    color: var(--text-main);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-dues-item small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 3px;
}

.dash-dues-item b {
    color: var(--danger);
    font-size: 13px;
    white-space: nowrap;
}

.dash-dues-item em {
    font-style: normal;
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.dash-dues-item em.waiting {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

@media(max-width: 650px) {
    .dash-dues-alert {
        width: 100%;
    }

    .dash-dues-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* CSS for scores */

.scorer-mini-btn {
    text-decoration: none;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.scorer-mini-btn:hover {
    background: var(--primary-color);
    color: white;
}



.scorecard-shell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 18px;
}

.scorecard-panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.scorecard-panel h3 {
    color: var(--text-main);
    font-weight: 900;
    margin-bottom: 14px;
}

.scorecard-innings-row,
.scorecard-ball-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    display: grid;
    gap: 5px;
}

.scorecard-innings-row strong,
.scorecard-ball-row strong {
    color: var(--primary-color);
}

.scorecard-innings-row span,
.scorecard-ball-row span,
.scorecard-innings-row small,
.scorecard-ball-row small {
    color: var(--text-muted);
}


.score-ball-form {
    width: 100%;
}

.score-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 14px;
}


.score-live-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
}

.score-live-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.score-live-head h3 {
    margin: 0;
    color: var(--text-main);
    font-weight: 900;
}

.score-live-head p {
    margin: 5px 0 0;
    color: var(--text-muted);
}

.score-big-total {
    font-size: 42px;
    color: var(--primary-color);
    font-weight: 900;
}

.next-ball-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--alert-info-bg);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    margin-bottom: 16px;
}

.score-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.quick-run-pad,
.quick-special-pad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.quick-run-pad button,
.quick-special-pad button {
    border: none;
    border-radius: 16px;
    padding: 18px 12px;
    font-weight: 900;
    cursor: pointer;
    background: var(--bg-gradient);
    color: white;
    box-shadow: var(--shadow-soft);
}

.quick-special-pad button.special {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

.quick-special-pad button.danger {
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
}

.wicket-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px dashed var(--danger);
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}


.current-player-panel {
    background: var(--surface);
    border: 1px dashed var(--primary-color);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
}

.current-player-panel h3 {
    color: var(--text-main);
    font-weight: 900;
    margin-bottom: 14px;
}

.current-player-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.current-player-strip div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
}

.current-player-strip span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.current-player-strip strong {
    color: var(--text-main);
    font-weight: 900;
}


.over-summary-list {
    display: grid;
    gap: 10px;
}

.over-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 12px;
}

.over-summary-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.over-ball-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.over-ball-chip.wide,
.over-ball-chip.noball {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
}

.over-ball-chip.wicket {
    background: var(--alert-error-bg);
    color: var(--alert-error-text);
}

.over-summary-meta {
    text-align: right;
    white-space: nowrap;
}

.over-summary-meta strong {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.over-summary-meta span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}


.toss-btn {
    position: relative;
}

.toss-btn:hover {
    animation: coinFlip 0.7s ease-in-out;
}

@keyframes coinFlip {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.08); }
    100% { transform: rotateY(360deg) scale(1); }
}

.toss-game-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.toss-game-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-weight: 800;
}

.toss-game-chip strong {
    color: var(--primary-color);
}

.toss-game-chip span {
    color: var(--text-muted);
}



.cricket-score-hero {
    background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(59,130,246,.16));
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
}

.cricket-score-hero h2 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 30px;
    font-weight: 950;
}

.cricket-score-hero p {
    color: var(--text-muted);
    margin: 0;
    font-weight: 800;
}

.cricket-result-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px 18px;
    min-width: 220px;
    text-align: right;
}

.cricket-result-box span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.cricket-result-box strong {
    display: block;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 950;
    margin-top: 4px;
}

.broadcast-innings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
}

.broadcast-team-score {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.broadcast-team-score strong {
    color: var(--text-main);
    font-size: 19px;
    font-weight: 950;
}

.broadcast-team-score span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.broadcast-score-number {
    color: var(--primary-color);
    font-size: 34px;
    font-weight: 950;
    white-space: nowrap;
}

.broadcast-score-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.broadcast-score-meta span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
}

.broadcast-status-pill {
    color: var(--primary-color) !important;
}

@media (max-width: 700px) {
    .cricket-score-hero,
    .broadcast-team-score {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .cricket-result-box {
        width: 100%;
        text-align: left;
    }
}

/* Live Score Template */

.bs-tv {
    display: grid;
    gap: 14px;
}

.bs-tv-hero {
    min-height: 190px;
    background:
        radial-gradient(circle at 8% 18%, rgba(74, 222, 128, .38), transparent 27%),
        radial-gradient(circle at 88% 18%, rgba(251, 191, 36, .25), transparent 25%),
        linear-gradient(135deg, #06190f, #0f3b27 48%, #1e1b4b);
    border-radius: 34px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 18px;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.bs-tv-hero::after {
    content: "🏏";
    position: absolute;
    right: 30%;
    top: -30px;
    font-size: 165px;
    opacity: .08;
    transform: rotate(-16deg);
}

.bs-tv-badge {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.13);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bs-tv-hero h1 {
    margin: 14px 0 8px;
    font-size: clamp(32px, 5vw, 62px);
    line-height: .95;
    font-weight: 950;
    color: white;
}

.bs-tv-hero p {
    color: rgba(255,255,255,.78);
    margin: 0;
    font-weight: 850;
}

.bs-tv-comic {
    margin-top: 14px;
    border: 1px dashed rgba(255,255,255,.32);
    background: rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 12px;
    font-weight: 900;
}

.bs-tv-scorebox {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 28px;
    padding: 20px;
    text-align: right;
    backdrop-filter: blur(10px);
}

.bs-score-value {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 6px;

    color: white;
    font-weight: 1000;
    line-height: .9;

    margin: 14px 0;
}

.bs-score-value #liveRuns {
    font-size: 96px;
}

.bs-score-value .slash {
    font-size: 92px;
    opacity: .9;
}

.bs-score-value #liveWickets {
    font-size: 54px;
}

.bs-tv-scorebox > span {
    display: block;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 950;
}

.bs-tv-scorebox strong {
    display: block;
    color: white;
    font-size: clamp(50px, 7vw, 80px);
    line-height: 1;
    font-weight: 950;
    margin: 10px 0;
}

.bs-tv-scorebox small {
    color: #bbf7d0;
    font-size: 17px;
    font-weight: 950;
}

.bs-tv-scorebox em {
    display: inline-flex;
    margin-top: 10px;
    background: #ef4444;
    color: white;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.bs-tv-result {
    background: linear-gradient(135deg, #facc15, #fb7185);
    color: #431407;
    border-radius: 24px;
    padding: 18px 20px;
    font-size: 24px;
    font-weight: 950;
    box-shadow: var(--shadow-soft);
}

.bs-tv-score-strip {
    display: grid;
    grid-template-columns: 1.15fr .9fr 1fr;
    gap: 14px;
}

.bs-tv-strip-card,
.bs-tv-panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
    min-width: 0;
}

.bs-tv-strip-card > span,
.bs-tv-panel-head span,
.bs-tv-mini-title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bs-tv-strip-card.main > strong {
    display: block;
    color: var(--text-main);
    font-size: 28px;
    font-weight: 950;
    margin-top: 6px;
}

.bs-tv-strip-card.main > b {
    display: block;
    color: var(--primary-color);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 950;
    line-height: 1;
    margin-top: 8px;
}

.bs-tv-strip-card.main > small {
    display: inline-flex;
    margin-top: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--text-muted);
    font-weight: 850;
}

.bs-tv-strip-card.players {
    display: grid;
    gap: 9px;
}

.bs-tv-strip-card.players div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 10px 12px;
}

.bs-tv-strip-card.players span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-strip-card.players strong {
    color: var(--text-main);
    font-size: 17px;
    font-weight: 950;
}

.bs-tv-alerts {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.bs-tv-alerts span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 9px 11px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 850;
}

.bs-tv-board-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 14px;
}

.bs-tv-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.bs-tv-panel-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 950;
}

.bs-tv-panel-head.scorebook {
    align-items: flex-start;
}

.bs-tv-game-board {
    display: grid;
    gap: 10px;
}

.bs-tv-board-game {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 20px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease;
}

.bs-tv-board-game:hover {
    transform: translateY(-2px);
}

.bs-tv-board-game.active {
    border-color: rgba(34,197,94,.7);
    background: linear-gradient(135deg, rgba(34,197,94,.10), var(--surface));
}

.bs-tv-board-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bs-tv-board-top span {
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-board-top b {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 950;
}

.bs-tv-board-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.bs-tv-board-teams div {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px;
}

.bs-tv-board-teams strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 950;
}

.bs-tv-board-teams em {
    color: var(--primary-color);
    font-size: 13px;
    font-style: normal;
    font-weight: 950;
}

.bs-tv-board-game small {
    display: block;
    color: var(--text-muted);
    font-weight: 800;
    margin-top: 9px;
}

.bs-tv-over-board {
    display: grid;
    gap: 9px;
}

.bs-tv-over-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.bs-tv-over-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bs-tv-ball {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
	overflow: hidden;
}

.bs-tv-ball.dot {
    background: #cbd5e1;
    color: #0f172a;
}

.bs-tv-ball.four {
    background: #16a34a;
}

.bs-tv-ball.six {
    background: #f59e0b;
}

.bs-tv-ball.wicket {
    background: #ef4444;
    font-size: 14px;
}

.bs-tv-ball.wide,
.bs-tv-ball.noball {
    background: #fef3c7;
    color: #92400e;
}

.bs-tv-over-meta {
    text-align: right;
    white-space: nowrap;
}

.bs-tv-over-meta strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.bs-tv-over-meta span {
    color: var(--text-muted);
    font-weight: 850;
}

.bs-tv-game-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.bs-tv-game-tabs button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 950;
}

.bs-tv-game-tabs button.active {
    background: var(--bg-gradient);
    color: white;
    border-color: transparent;
}

.bs-tv-game-shell {
    border: 1px solid var(--border);
    border-radius: 26px;
    overflow: hidden;
    background: var(--surface);
}

.bs-tv-game-head {
    background:
        radial-gradient(circle at left, rgba(34,197,94,.18), transparent 34%),
        linear-gradient(135deg, #14532d, #1e293b);
    color: white;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.bs-tv-game-head span {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-game-head h3 {
    margin: 4px 0 0;
    color: white;
    font-size: 25px;
    font-weight: 950;
}

.bs-tv-game-head strong {
    font-size: 17px;
    font-weight: 950;
    text-align: right;
}

.bs-tv-toss-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.bs-tv-toss-strip div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 11px;
}

.bs-tv-toss-strip span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-toss-strip strong {
    display: block;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 950;
    margin-top: 4px;
}

.bs-tv-innings-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}

.bs-tv-innings-panel {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    overflow: hidden;
    min-width: 0;
}

.bs-tv-innings-panel.waiting {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-tv-innings-head {
    background: linear-gradient(135deg, rgba(20,83,45,.95), rgba(30,41,59,.95));
    color: white;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.bs-tv-innings-head span {
    color: rgba(255,255,255,.7);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-innings-head h4 {
    margin: 3px 0;
    color: white;
    font-size: 22px;
    font-weight: 950;
}

.bs-tv-innings-head p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 850;
}

.bs-tv-innings-head strong {
    font-size: 24px;
    font-weight: 950;
    white-space: nowrap;
}

.bs-tv-innings-head small {
    color: rgba(255,255,255,.74);
    font-size: 13px;
}

.bs-tv-innings-content {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr);
}

.bs-tv-table-box,
.bs-tv-bowler-box {
    min-width: 0;
}

.bs-tv-bowler-box {
    border-left: 1px solid var(--border);
}

.bs-tv-mini-title {
    padding: 9px 12px;
    background: var(--surface-soft);
    color: var(--text-main);
}

.bs-tv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.bs-tv-table th,
.bs-tv-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    color: var(--text-main);
    font-weight: 850;
    font-size: 13px;
}

.bs-tv-table th:first-child,
.bs-tv-table td:first-child {
    text-align: left;
    width: 42%;
}

.bs-tv-table th {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-tv-table td strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.bs-tv-table td span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.bs-tv-table td em {
    display: inline-block;
    margin-top: 4px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.bs-tv-bowler-stack {
    display: grid;
    gap: 8px;
    padding: 9px;
}

.bs-tv-bowler-card {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) repeat(4, auto);
    gap: 7px;
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 9px;
}

.bs-tv-bowler-card strong {
    color: var(--text-main);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.bs-tv-bowler-card span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

.bs-tv-bowler-card b {
    color: var(--primary-color);
    font-weight: 950;
}

.bs-tv-waiting,
.bs-tv-empty {
    color: var(--text-muted);
    font-weight: 850;
}

.bs-tv-waiting {
    text-align: center;
    padding: 24px;
}

.bs-tv-waiting div {
    font-size: 42px;
}

.bs-tv-waiting h3 {
    color: var(--text-main);
    margin: 8px 0;
}

@media (max-width: 1280px) {
    .bs-tv-innings-pair {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1050px) {
    .bs-tv-score-strip,
    .bs-tv-board-grid {
        grid-template-columns: 1fr;
    }

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

    .bs-tv-innings-content {
        grid-template-columns: 1fr;
    }

    .bs-tv-bowler-box {
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 760px) {
    .bs-tv-hero {
        grid-template-columns: 1fr;
    }

    .bs-tv-scorebox {
        text-align: left;
    }

    .bs-tv-game-head,
    .bs-tv-innings-head {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .bs-tv-game-head strong {
        text-align: left;
    }

    .bs-tv-toss-strip {
        grid-template-columns: 1fr;
    }

    .bs-tv-board-teams {
        grid-template-columns: 1fr;
    }

    .bs-tv-bowler-card {
        grid-template-columns: 1fr 1fr;
    }
}

/* Wicket Icons */

.bs-wicket-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
}

.bs-wicket-legend span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 9px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 850;
}

.bs-wicket-legend b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bs-wicket-legend .wicket-scene {
    width: 20px;
    height: 20px;
}

.bs-tv-ball.wicket {
    background: #ef4444;
}

.bs-tv-ball.bowled {
    background: #dc2626;
}

.bs-tv-ball.caught {
    background: #f97316;
}

.bs-tv-ball.runout {
    background: #7c3aed;
}

.bs-tv-ball.stumped {
    background: #0891b2;
}

.bs-tv-ball.lbw {
    background: #ca8a04;
}

.bs-tv-ball.hitwicket {
    background: #be123c;
}

.bs-tv-ball.retired {
    background: #64748b;
}



.wicket-scene {
    width: 28px;
    height: 28px;
}

.wicket-scene line,
.wicket-scene path,
.wicket-scene circle {
    stroke: currentColor;
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wicket-scene circle {
    fill: currentColor;
}

.wicket-scene .bail {
    stroke-width: 5;
    animation: bailPop .8s ease-in-out infinite alternate;
}

.wicket-scene .bat {
    stroke-width: 6;
}

.wicket-scene .hands {
    stroke-width: 5;
}

.wicket-scene .leg {
    stroke-width: 6;
}

.wicket-scene .arrow {
    stroke-width: 5;
}

@keyframes bailPop {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-3px);
    }
}

.bs-extras-banner {
    grid-column: 1 / -1;
    margin: 10px;
    background:
        linear-gradient(135deg, rgba(251,191,36,.18), rgba(34,197,94,.10));
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 18px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bs-extras-banner span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bs-extras-banner strong {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 950;
}

.bs-extras-banner em {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

/* Wicket Legend Toggle */

.bs-wicket-help {
    margin-top: 12px;
}

.bs-help-toggle {
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: var(--surface);
    border: 1px solid var(--border);

    color: var(--text-main);

    padding: 10px 14px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 900;

    transition: all .2s ease;
}

.bs-help-toggle:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.bs-wicket-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px dashed var(--border);
}

/* scorecard page */

.sc-console-hero,
.sc-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow-soft);
}

.sc-console-hero {
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    background:
        radial-gradient(circle at left, rgba(34,197,94,.14), transparent 30%),
        var(--surface-soft);
}

.sc-console-hero h2 {
    margin: 5px 0;
    color: var(--text-main);
    font-size: 30px;
    font-weight: 950;
}

.sc-console-hero p {
    color: var(--text-muted);
    margin: 0;
    font-weight: 850;
}

.sc-console-result {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 13px 16px;
    text-align: right;
    min-width: 220px;
}

.sc-console-result span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.sc-console-result strong {
    display: block;
    color: var(--primary-color);
    font-size: 17px;
    font-weight: 950;
}

.sc-setup-grid,
.sc-current-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.sc-current-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
}

.sc-card {
    padding: 16px;
    min-width: 0;
}

.sc-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sc-card-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 950;
}

.sc-card-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.sc-setup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sc-auto-game {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 12px;
}

.sc-auto-game span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.sc-auto-game strong {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 950;
}

.sc-setup-form button {
    grid-column: 1 / -1;
}

.sc-game-board {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px;
    margin-bottom: 10px;
}

.sc-game-board.latest {
    border-color: rgba(34,197,94,.55);
    background: linear-gradient(135deg, rgba(34,197,94,.08), var(--surface));
}

.sc-game-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.sc-game-top span {
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.sc-game-top strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.sc-game-top b {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 950;
    text-align: right;
}

.sc-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 9px 0;
}

.sc-game-meta span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 9px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
}

.sc-mini-innings-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sc-mini-innings {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 9px;
}

.sc-mini-innings.active {
    border-color: rgba(99,102,241,.6);
}

.sc-mini-innings span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
}

.sc-mini-innings strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.sc-mini-innings b {
    color: var(--primary-color);
    float: right;
}

.sc-mini-innings small {
    display: block;
    color: var(--text-muted);
    font-weight: 800;
}

.sc-start-next-form {
    margin-top: 10px;
}

.sc-current-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.sc-current-head h3 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 26px;
    font-weight: 950;
}

.sc-current-head p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.sc-current-score {
    color: var(--primary-color);
    font-size: 48px;
    font-weight: 950;
    text-align: right;
    line-height: 1;
}

.sc-current-score small {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 900;
    margin-top: 5px;
}

.sc-ball-status-row {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.sc-current-side {
    align-self: start;
}

.sc-over-stack {
    display: grid;
    gap: 9px;
}

.sc-over-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.sc-over-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sc-over-meta {
    text-align: right;
    white-space: nowrap;
}

.sc-over-meta strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.sc-over-meta span {
    color: var(--text-muted);
    font-weight: 850;
}

@media (max-width: 1100px) {
    .sc-setup-grid,
    .sc-current-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .sc-console-hero,
    .sc-current-head,
    .sc-game-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .sc-console-result,
    .sc-current-score,
    .sc-game-top b {
        text-align: left;
    }

    .sc-setup-form,
    .sc-mini-innings-pair {
        grid-template-columns: 1fr;
    }
}


/* Score correction Page */

.correction-game {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 16px;
}

.correction-game-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.correction-game-head span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.correction-game-head h3 {
    margin: 5px 0;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 950;
}

.correction-game-head p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.correction-setup-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.correction-innings-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.correction-innings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
}

.correction-innings-head {
    background: linear-gradient(135deg, #14532d, #1e293b);
    color: white;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.correction-innings-head span {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 950;
}

.correction-innings-head h4 {
    color: white;
    margin: 4px 0;
    font-size: 20px;
    font-weight: 950;
}

.correction-innings-head p {
    color: rgba(255,255,255,.72);
    margin: 0;
    font-weight: 800;
}

.correction-innings-head strong {
    color: white;
    font-size: 24px;
    font-weight: 950;
    white-space: nowrap;
}

.correction-innings-head small {
    color: rgba(255,255,255,.72);
}



@media (max-width: 1100px) {
    .correction-setup-grid,
    .correction-innings-tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .correction-game-head,
    .correction-innings-head {
        flex-direction: column;
    }
}


.correction-ball-card-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.correction-ball-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
}

.correction-ball-card-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.correction-ball-identity,
.correction-mini-readonly {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px 10px;
    min-height: 58px;
}

.correction-ball-identity strong {
    display: block;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 950;
}

.correction-ball-identity small,
.correction-mini-readonly span,
.correction-field label {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.correction-mini-readonly b {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 950;
}

.correction-field .app-select,
.correction-field .app-input {
    min-height: 46px;
    height: 46px;
    width: 100%;
    border-radius: 14px;
}

.correction-field.small {
    max-width: none;
}

.correction-field,
.correction-mini-readonly,
.correction-ball-identity {
    min-width: 0;
}

.correction-field .app-select,
.correction-field .app-input {
    width: 100%;
    min-width: 0;
}

.correction-actions {
    display: flex;
    align-items: end;
}

.correction-actions .app-mini-btn,
.correction-delete-form .app-mini-btn {
    min-height: 42px;
    border-radius: 13px;
}

.correction-delete-form {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1500px) {
    .correction-ball-card-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .correction-field.small {
        max-width: none;
    }

    .correction-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .correction-ball-card-form {
        grid-template-columns: 1fr;
    }

    .correction-delete-form {
        justify-content: flex-start;
    }
}


/*/


/* Add this to your main CSS if these classes are not already present */
.audit-list {
    display: grid;
    gap: 10px;
}

.audit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.audit-card.restored {
    opacity: .7;
}

.audit-card strong {
    color: var(--primary-color);
    font-weight: 950;
}

.audit-card span,
.audit-card small {
    display: block;
    color: var(--text-muted);
    font-weight: 850;
}

.audit-card em {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 950;
}

/* Live Score Admin Sharing Page */

.public-score-grid {
    display: grid;
    gap: 14px;
}

.public-score-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
    gap: 14px;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.public-score-card span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.public-score-card h3 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 950;
}

.public-score-card p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.public-score-actions {
    display: flex;
    gap: 8px;
}

.public-url-box {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

@media (max-width: 850px) {
    .public-score-card {
        grid-template-columns: 1fr;
    }

    .public-score-actions,
    .public-url-box {
        flex-direction: column;
    }
}

/* Player Rating Review Page */

.rating-review-grid {
    display: grid;
    gap: 18px;
}

.rating-player-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.rating-player-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.rating-player-head span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.rating-player-head h3 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 26px;
    font-weight: 950;
}

.rating-player-head p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.rating-score-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background:
        conic-gradient(var(--primary-color) calc(var(--score) * 10%), rgba(148,163,184,.18) 0);
    display: grid;
    place-items: center;
    position: relative;
}

.rating-score-ring::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--surface-soft);
}

.rating-score-ring strong,
.rating-score-ring small {
    position: relative;
    z-index: 1;
}

.rating-score-ring strong {
    color: var(--text-main);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.rating-score-ring small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    margin-top: -24px;
}

.rating-impact-strip {
    display: grid;
    grid-template-columns: 1fr 1fr .8fr;
    gap: 12px;
    margin-bottom: 14px;
}

.rating-impact-strip > div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
}

.rating-impact-strip span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.rating-impact-strip strong {
    display: block;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 950;
}

.rating-impact-strip small {
    color: var(--text-muted);
    font-weight: 800;
}

.rating-bar {
    height: 9px;
    background: rgba(148,163,184,.18);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.rating-bar i {
    display: block;
    height: 100%;
    background: var(--primary-color);
    border-radius: inherit;
}

.rating-detail-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    margin-top: 10px;
    overflow: hidden;
}

.rating-detail-box summary {
    cursor: pointer;
    padding: 13px 15px;
    color: var(--text-main);
    font-weight: 950;
}

.rating-detail-box summary b {
    float: right;
    color: var(--primary-color);
}

.rating-table-wrap {
    overflow-x: auto;
}

.rating-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.rating-table th,
.rating-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    vertical-align: middle;
}

.rating-table th {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.rating-table td strong {
    color: var(--primary-color);
    font-weight: 950;
}

@media (max-width: 800px) {
    .rating-player-head,
    .rating-impact-strip {
        grid-template-columns: 1fr;
        display: grid;
    }

    .rating-score-ring {
        width: 92px;
        height: 92px;
    }
}


.rating-filter-panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    gap: 12px;
    align-items: end;
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
}

.rating-filter-panel label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.rating-filter-panel .app-select {
    width: 100%;
}

.rating-empty-state h3 {
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 950;
}

.rating-empty-state p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.rating-selected-fixture {
    background: rgba(99,102,241,.08);
    border: 1px dashed rgba(99,102,241,.32);
    border-radius: 18px;
    padding: 12px 14px;
    margin: 12px 0;
}

.rating-selected-fixture span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.rating-selected-fixture strong {
    color: var(--text-main);
    font-weight: 950;
}

.rating-selected-fixture.muted {
    color: var(--text-muted);
    font-weight: 850;
}

.rating-pending-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 14px;
    margin-top: 12px;
}

.rating-pending-head span {
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.rating-pending-head h4 {
    margin: 4px 0 12px;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 950;
}

.rating-pending-clear {
    color: var(--text-muted);
    font-weight: 850;
}

.rating-pending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rating-pending-list span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 11px;
}

.rating-pending-list b {
    color: var(--text-main);
    font-weight: 950;
}

.rating-pending-list small {
    color: var(--text-muted);
    margin-left: 6px;
}

@media (max-width: 900px) {
    .rating-filter-panel {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Live Score Card for Logged Users */

.dash-live-score-zone {
    margin-bottom: 18px;
}

.dash-live-mini-card {
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.16), transparent 34%),
        var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 16px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(190px, .45fr) auto;
    gap: 14px;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.dash-live-mini-card.is-live {
    border-color: rgba(34,197,94,.55);
    background:
        radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 34%),
        var(--surface-soft);
}

.dash-live-mini-card.is-completed {
    border-color: rgba(245,158,11,.55);
    background:
        radial-gradient(circle at top left, rgba(245,158,11,.18), transparent 34%),
        var(--surface-soft);
}

.dash-live-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    font-size: 27px;
}

.dash-live-main h3 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 950;
}

.dash-live-main p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 850;
}

.dash-live-score {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 11px 13px;
}

.dash-live-score span {
    display: block;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.dash-live-score strong {
    display: block;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 950;
}

.dash-live-score small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.dash-live-open {
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 950;
    white-space: nowrap;
}

.dash-live-open.disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .dash-live-mini-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .dash-live-open {
        text-align: center;
    }
}

/* Tiles in common dashboard for Pending match feedback,upcoming fixture */

.dashboard-section-head.compact {
    margin-top: 18px;
    margin-bottom: 10px;
}

.compact-empty {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
}

.compact-empty .emoji {
    font-size: 24px;
}

.compact-empty h3 {
    margin: 0 0 3px;
    font-size: 19px;
}

.compact-empty p {
    margin: 0;
}

.compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.compact-card {
    padding: 14px;
    border-radius: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.compact-card .dash-fixture-top {
    margin-bottom: 10px;
}

.compact-card h4 {
    font-size: 18px;
    margin-bottom: 4px;
}

.compact-info {
    gap: 7px;
    margin: 10px 0;
}

.compact-info div {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 13px;
}

.compact-btn {
	min-height: 42px;
	padding: 10px 16px;
	width: fit-content;
	margin-top: auto;
	align-self: flex-start;
}

.dash-reveal-time {
    background: rgba(99,102,241,.08);
    border: 1px dashed rgba(99,102,241,.35);
    color: var(--text-main);
    border-radius: 15px;
    padding: 14px 18px;
    font-weight: 850;
    margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 58px;
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
}

.dash-reveal-time strong {
    color: var(--primary-color);
	display: inline-block;
	margin-left: 4px;
}

.compact-teams {
    margin-top: 12px;
}

.compact-teams h5 {
    margin-bottom: 10px;
}

.dash-team-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dash-team-mini {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 11px;
}

.dash-team-mini strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 8px;
}

.dash-team-mini.floating {
    border-style: dashed;
    opacity: .92;
}

.dash-player-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-player-chip {
    background: rgba(99,102,241,.10);
    color: var(--text-main);
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 850;
}

@media (max-width: 720px) {
    .dash-team-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* admin dashboard score correction div CSS */
.admin-fixture-link-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-fixture-link {
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.admin-fixture-link strong {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.admin-fixture-link small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.admin-fixture-link em {
    color: var(--primary-color);
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

/* Public Page Section */

.public-page {
    display: grid;
    gap: 18px;
}

.public-hero {
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 36%),
        var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.public-hero h1 {
    margin: 6px 0 10px;
    color: var(--text-main);
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 950;
    letter-spacing: -1.2px;
}

.public-hero p {
    margin: 0;
    color: var(--text-muted);
    max-width: 780px;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 800;
}

.public-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.public-info-card,
.public-text-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.public-info-card h3,
.public-text-card h2 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-weight: 950;
}

.public-info-card p,
.public-text-card p {
    margin: 0 0 16px;
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 800;
}

.public-text-card h2 {
    margin-top: 22px;
}

.public-text-card h2:first-child {
    margin-top: 0;
}

.public-text-card strong {
    color: var(--primary-color);
}

@media (max-width: 850px) {
    .public-card-grid {
        grid-template-columns: 1fr;
    }

    .public-hero {
        padding: 22px;
    }
}



/* =========================
   PUBLIC WEBSITE HEADER
   ========================= */

.public-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    background: var(--surface-soft);
    border: 1px solid var(--border);

    border-radius: 24px;
    padding: 16px 22px;

    margin-bottom: 18px;
    box-shadow: var(--shadow-soft);
}

.public-logo {
    text-decoration: none;
    color: var(--text-main);

    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.5px;
}

.public-header nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.public-header nav a {
    text-decoration: none;

    color: var(--text-muted);
    font-weight: 850;
    font-size: 14px;

    padding: 10px 14px;
    border-radius: 12px;

    transition: .2s ease;
}

.public-header nav a:hover {
    background: rgba(99,102,241,.08);
    color: var(--primary-color);
}

.public-header nav a:last-child {
    background: var(--primary-color);
    color: #fff;
    font-weight: 900;
}

.public-header nav a:last-child:hover {
    transform: translateY(-1px);
}

/* =========================
   PUBLIC FOOTER
   ========================= */

.public-footer {
    margin-top: 24px;

    background: var(--surface-soft);
    border: 1px solid var(--border);

    border-radius: 24px;
    padding: 18px;

    text-align: center;
}

.public-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
}

.public-footer-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 850;
    font-size: 14px;
}

.public-footer-links a:hover {
    color: var(--primary-color);
}

.public-footer small {
    color: var(--text-muted);
    font-weight: 800;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .public-header {
        flex-direction: column;
        align-items: stretch;
    }

    .public-logo {
        text-align: center;
    }

    .public-header nav {
        justify-content: center;
    }

    .public-header nav a {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* Public Homepage CSS */

.bs-home-hero {
    background:
        radial-gradient(circle at top left,
        rgba(99,102,241,.20),
        transparent 35%),
        var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: 30px;

    padding: 40px;
    text-align: center;

    box-shadow: var(--shadow-soft);
}

.bs-home-hero h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    margin: 12px 0 20px;
    font-weight: 950;
    color: var(--text-main);
}

.bs-home-hero p {
    max-width: 720px;
    margin: auto;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.8;
}

.bs-home-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bs-btn-primary,
.bs-btn-secondary {
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 900;
}

.bs-btn-primary {
    background: var(--primary-color);
    color: white;
}

.bs-btn-secondary {
    border: 1px solid var(--border);
    color: var(--text-main);
}

.bs-home-highlight {
    margin-top: 10px;
}

.bs-highlight-card {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
}

.bs-highlight-card h2 {
    margin-top: 0;
}

.bs-highlight-card ul {
    margin: 16px 0 0;
    padding-left: 18px;
}

.bs-highlight-card li {
    margin-bottom: 10px;
    font-weight: 800;
    color: var(--text-muted);
}

/* Team Reveal Waiting */

.dash-rsvp-pending-box {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.12);
}

.dash-rsvp-pending-head {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffd166;
}

.dash-rsvp-pending-text {
    font-size: 14px;
    margin-bottom: 10px;
    color: #cfd6e4;
}

/* Walkin Players */
.walkin-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.14);
}

.walkin-chip {
    border: 1px solid rgba(255, 209, 102, 0.65);
}

.reserve-chip {
    border: 1px solid rgba(120, 220, 255, 0.55);
}

.dash-player-chip small {
    margin-left: 5px;
    font-size: 10px;
    opacity: 0.85;
}


/* ACtion Buttons in UserList */

.user-action-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 260px;
}

.user-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
}

.user-action-label {
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* View Teams CSS inside moderator Page */

.player-tag {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.walkin-tag {
    background: rgba(255, 209, 102, 0.15);
    border: 1px solid rgba(255, 209, 102, 0.55);
}

.reserve-tag {
    background: rgba(120, 220, 255, 0.14);
    border: 1px solid rgba(120, 220, 255, 0.5);
}

/* manual-teams.html CSS  */
.manual-team-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.manual-builder-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 0.9fr;
    gap: 14px;
    align-items: stretch;
}

.manual-column {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 12px;
    min-height: 360px;
}

.manual-column-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.manual-column-head strong {
    font-size: 15px;
}

.manual-column-head span {
    font-size: 12px;
    opacity: 0.75;
}

.manual-drop-zone {
    min-height: 300px;
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manual-player-chip {
    cursor: grab;
    user-select: none;
    padding: 10px 11px;
    border-radius: 13px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.manual-player-chip:active {
    cursor: grabbing;
}

.manual-player-chip small {
    opacity: 0.7;
    font-size: 11px;
}

.manual-summary-box {
    margin-top: 16px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.manual-action-row {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .manual-builder-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .manual-team-name-grid,
    .manual-builder-grid {
        grid-template-columns: 1fr;
    }
}

/* player-card/cricket-card.html */

.card-teaser-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 18px;
}

.card-teaser {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 18px;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 215, 90, 0.45), transparent 28%),
        linear-gradient(135deg, rgba(10,16,34,0.98), rgba(26,38,76,0.96));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}

.card-teaser-glow {
    position: absolute;
    inset: -60%;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.20), transparent 60%);
    transform: rotate(12deg);
}

.card-teaser-kicker {
    color: #ffd86b;
    font-weight: 1000;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
}

.card-teaser-title {
    font-size: 27px;
    font-weight: 1000;
    color: #fff;
    margin-top: 6px;
}

.card-teaser-sub {
    color: rgba(255,255,255,0.72);
    margin-top: 5px;
}

.card-teaser-thumb {
    position: relative;
    width: 126px;
    height: 164px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,0.8), transparent 28%),
        linear-gradient(150deg, #ffd85d, #c72031 55%, #141b3a);
    border: 4px solid rgba(255,232,148,0.95);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    flex: 0 0 auto;
    transform: rotate(5deg);
}

.mini-card-rating {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff1a6;
    color: #b11222;
    font-weight: 1000;
}

.mini-card-avatar {
    position: absolute;
    inset: 46px 22px 40px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(12,20,42,0.72);
    color: white;
    font-size: 42px;
    font-weight: 1000;
}

.mini-card-name {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 9px;
    text-align: center;
    font-size: 11px;
    font-weight: 1000;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-public-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,213,93,0.18), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(111,125,255,0.24), transparent 28%),
        linear-gradient(135deg, #050711, #10182c 45%, #090b14);
}

.card-public-shell,
.card-private-shell {
    min-height: 100vh;
}

.card-stage {
    min-height: 100vh;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-top-actions {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-top-note {
    color: #ffd86b;
    font-weight: 900;
}

.mega-card-layout {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 38px;
    align-items: center;
}

.card-orbit {
    position: relative;
}

.card-orbit::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 40px;
    background: radial-gradient(circle, rgba(255,214,90,0.35), transparent 64%);
    filter: blur(24px);
}

.card-flip-scene {
    width: min(500px, 92vw);
    height: 720px;
    perspective: 1800px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.card-flip-scene.flipped .ultimate-card {
    transform: rotateY(180deg);
}

.ultimate-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .85s cubic-bezier(.16,1,.3,1);
}

.ultimate-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 34px;
    overflow: hidden;
    box-shadow:
        0 40px 110px rgba(0,0,0,.65),
        0 0 0 1px rgba(255,255,255,.18);
}

.ultimate-front {
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), transparent 19%),
        radial-gradient(circle at 68% 32%, rgba(255,224,88,.9), transparent 18%),
        linear-gradient(145deg, #fbe27d, #d62d35 52%, #131936 100%);
    padding: 14px;
}

.ultimate-back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at 70% 20%, rgba(255,230,120,.28), transparent 25%),
        linear-gradient(145deg, #10172c, #050711);
    padding: 14px;
}

.ultimate-border {
    height: 100%;
    border-radius: 26px;
    border: 2px solid rgba(255,255,255,.48);
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}

.holo-sweep {
    position: absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.38), transparent 60%);
    transform: rotate(15deg);
    animation: holoSweep 4.6s infinite;
}

@keyframes holoSweep {
    0%, 35% { translate: -45% 0; opacity: 0; }
    48% { opacity: 1; }
    75%, 100% { translate: 45% 0; opacity: 0; }
}

.noise-layer {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

.ultimate-top-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px;
    position: relative;
    z-index: 2;
}

.ultimate-rating {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff4a8, #ffcf38);
    color: #a71020;
    display: grid;
    place-items: center;
    border: 4px solid rgba(108,13,25,.8);
    box-shadow: inset 0 0 18px rgba(255,255,255,.55);
}

.ultimate-rating span {
    font-size: 42px;
    font-weight: 1000;
    line-height: 1;
}

.ultimate-rating small {
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .14em;
}

.ultimate-tier {
    color: #fff4ad;
    font-size: 20px;
    font-weight: 1000;
    letter-spacing: .10em;
}

.ultimate-id {
    margin-top: 4px;
    color: rgba(255,255,255,.8);
    font-weight: 900;
}

.ultimate-player-zone {
    margin: 12px 24px 0;
    height: 310px;
    border-radius: 30px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.85), transparent 26%),
        linear-gradient(135deg, #0f6eb3, #73d4ff 48%, #f7fbff);
    border: 3px solid rgba(255,255,255,.62);
}

.energy-ring {
    width: 220px;
    height: 220px;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,.62);
    box-shadow: 0 0 40px rgba(255,255,255,.5);
    position: absolute;
}

.ultimate-player-avatar {
    width: 132px;
    height: 160px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #0a1020, #253f7f);
    color: #fff;
    font-size: 72px;
    font-weight: 1000;
    border: 5px solid #ffec9e;
    z-index: 2;
    transform: translateX(-54px) rotate(-5deg);
}

.bat-slash {
    position: absolute;
    right: 54px;
    bottom: 48px;
    font-size: 108px;
    z-index: 3;
    filter: drop-shadow(0 20px 20px rgba(0,0,0,.35));
}

.ultimate-nameplate {
    margin: 20px 24px 0;
    padding: 14px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(90deg, #fff0a4, #ffd33f, #fff0a4);
    border: 3px solid rgba(120,20,20,.65);
}

.ultimate-nameplate h1 {
    margin: 0;
    color: #a70e1c;
    font-size: 31px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ultimate-nameplate p {
    margin: 4px 0 0;
    color: #143c78;
    font-weight: 1000;
    letter-spacing: .16em;
}

.ultimate-power-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 24px 0;
}

.ultimate-power-row div {
    border-radius: 18px;
    padding: 12px 8px;
    text-align: center;
    background: rgba(5,9,22,.72);
    border: 1px solid rgba(255,255,255,.18);
}

.ultimate-power-row strong {
    display: block;
    color: #ffda64;
    font-size: 31px;
}

.ultimate-power-row span {
    color: white;
    font-weight: 1000;
    font-size: 12px;
}

.ultimate-footer {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 16px;
    text-align: center;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 900;
}

.ultimate-back-inner {
    height: 100%;
    border-radius: 26px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.16);
    position: relative;
    z-index: 2;
}

.back-title {
    text-align: center;
    margin-bottom: 14px;
}

.back-title h2 {
    margin: 0;
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 28px;
}

.back-title span {
    color: rgba(255,255,255,.72);
    font-weight: 800;
}

.back-rating-strip {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1.1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.back-rating-strip div {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 10px;
    text-align: center;
}

.back-rating-strip strong {
    display: block;
    color: #fff;
    font-size: 17px;
}

.back-rating-strip span {
    color: #ffde6b;
    font-size: 10px;
    font-weight: 1000;
}

.back-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.back-stat-panel {
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    padding: 12px;
}

.back-stat-panel h3 {
    margin: 0 0 8px;
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 15px;
}

.back-stat-panel div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.back-stat-panel b {
    color: #fff;
}

.back-footer {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    color: #ffde6b;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.card-side-panel {
    color: white;
}

.side-kicker {
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 1000;
    font-size: 12px;
}

.card-side-panel h2 {
    margin: 10px 0;
    font-size: clamp(34px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.05em;
}

.card-side-panel p {
    color: rgba(255,255,255,.72);
    font-size: 17px;
    max-width: 520px;
}

.side-stat-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.side-stat-mini div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}

.side-stat-mini strong {
    display: block;
    color: #ffde6b;
    font-size: 28px;
}

.side-stat-mini span {
    color: rgba(255,255,255,.72);
    font-weight: 800;
}

.card-share-panel {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.public-url-box {
    display: flex;
    gap: 8px;
    width: 100%;
}

.public-brand {
    margin-top: 22px;
    color: #ffde6b;
    font-weight: 900;
}

@media (max-width: 980px) {
    .mega-card-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .card-side-panel {
        text-align: center;
    }
}

@media (max-width: 560px) {
    .card-stage {
        padding: 14px;
    }

    .card-flip-scene {
        height: 690px;
    }

    .ultimate-player-zone {
        height: 270px;
    }

    .ultimate-nameplate h1 {
        font-size: 25px;
    }

    .back-stat-grid {
        grid-template-columns: 1fr;
    }

    .ultimate-back {
        overflow-y: auto;
    }

    .public-url-box {
        flex-direction: column;
    }
}


.card-private-page,
.card-private-shell,
.card-public-page,
.card-public-shell,
.card-stage {
    background:
        radial-gradient(circle at 20% 10%, rgba(255,213,93,0.18), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(111,125,255,0.24), transparent 28%),
        linear-gradient(135deg, #050711, #10182c 45%, #090b14) !important;
    color: #fff;
}

.card-side-panel,
.card-side-panel h2,
.card-side-panel p,
.card-top-note {
    color: #fff;
}


/* =========================================================
   BALANCESQUAD DASHBOARD + PLAYER CARD FINAL OVERRIDE
   Place this at the VERY END of app.css.
========================================================= */

/* ---------- Dashboard restructure ---------- */

.bs-dashboard-top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.bs-tile {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    border-radius: 24px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(248,250,252,0.96));
    border: 1px solid rgba(99,102,241,0.18);
    color: var(--text-main);
    box-shadow: 0 18px 45px rgba(15,23,42,0.10);
}

body.dark-mode .bs-tile {
    background: linear-gradient(145deg, rgba(17,24,39,0.98), rgba(31,41,55,0.94));
    border-color: rgba(255,255,255,0.10);
    color: var(--text-main);
    box-shadow: 0 22px 55px rgba(0,0,0,0.38);
}

.bs-tile-wide { grid-column: span 7; }
.bs-score-tile { grid-column: span 7; min-height: 220px; }
.bs-trade-tile-link { grid-column: span 3; display: block; color: inherit; text-decoration: none; }
.bs-trade-tile-link .bs-tile { height: 100%; }
.bs-funky-tile { grid-column: span 2; }
.bs-live-tile { grid-column: span 3; }
.bs-dues-tile { grid-column: span 2; }

.bs-tile-glow,
.bs-trade-shine {
    position: absolute;
    inset: -65%;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.35), transparent 60%);
    transform: rotate(15deg);
}

.bs-welcome-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 170px;
    background:
        radial-gradient(circle at 90% 10%, rgba(102,126,234,0.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.96));
}

body.dark-mode .bs-welcome-tile {
    background:
        radial-gradient(circle at 90% 10%, rgba(102,126,234,0.28), transparent 34%),
        linear-gradient(145deg, rgba(17,24,39,0.98), rgba(31,41,55,0.94));
}

.bs-welcome-copy { position: relative; z-index: 2; }

.bs-welcome-copy h2 {
    margin: 6px 0 8px;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.04;
    color: var(--text-main);
}

.bs-welcome-copy p {
    margin: 0;
    color: var(--text-muted);
    max-width: 640px;
    line-height: 1.55;
}

.bs-welcome-orb {
    width: 82px;
    height: 82px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--bg-gradient);
    color: #fff;
    font-size: 34px;
    box-shadow: 0 18px 45px rgba(102,126,234,0.34);
}

.bs-mini-kicker {
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.bs-trade-tile {
    min-height: 220px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 10%, rgba(255,230,128,0.88), transparent 23%),
        radial-gradient(circle at 20% 90%, rgba(102,126,234,0.60), transparent 30%),
        linear-gradient(145deg, #10172d, #72283c 48%, #e4513c);
    border-color: rgba(255,232,150,0.56);
}

.bs-trade-copy {
    position: relative;
    z-index: 2;
    padding-right: 92px;
}

.bs-trade-copy .bs-mini-kicker { color: #ffe78a; }

.bs-trade-copy h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    color: #fff;
}

.bs-trade-copy p {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.78);
    font-weight: 900;
}

.bs-mini-card {
    position: absolute;
    right: 14px;
    top: 16px;
    width: 86px;
    height: 118px;
    border-radius: 17px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.86), transparent 28%),
        linear-gradient(150deg, #ffe16c, #d71937 58%, #11162c);
    border: 3px solid rgba(255,236,158,0.95);
    box-shadow: 0 18px 34px rgba(0,0,0,0.30);
    transform: rotate(6deg);
}

.bs-mini-rating {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #fff3a8;
    color: #a60f20;
    font-size: 13px;
    font-weight: 1000;
}

.bs-mini-avatar {
    position: absolute;
    inset: 39px 17px 30px;
    border-radius: 12px;
    background: rgba(7,13,29,0.82);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 27px;
    font-weight: 1000;
}

.bs-mini-name {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    color: #fff;
    text-align: center;
    font-size: 9px;
    font-weight: 1000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-tile-action {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    border: none;
    border-radius: 14px;
    padding: 10px 12px;
    text-align: center;
    background: rgba(255,255,255,0.18);
    color: inherit;
    font-weight: 1000;
    cursor: pointer;
}

.bs-tile-action.disabled {
    opacity: .62;
    cursor: default;
}

.bs-funky-tile {
    min-height: 170px;
    display: flex;
    align-items: center;
}

.bs-funky-value-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bs-funky-value {
    display: inline-block;
    background: rgba(102,126,234,0.12);
    color: var(--primary-color);
    padding: 9px 12px;
    border-radius: 999px;
    font-weight: 1000;
    font-size: 13px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .bs-funky-value {
    background: rgba(99,102,241,0.20);
    color: #c7d2fe;
}

.bs-copy-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 13px;
    background: var(--bg-gradient);
    color: #fff;
    cursor: pointer;
}

.bs-live-tile h3,
.bs-dues-tile h3,
.bs-score-tile h3 {
    color: var(--text-main);
    margin: 0;
}

.bs-live-head,
.bs-dues-head,
.bs-score-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.bs-live-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(102,126,234,0.13);
}

.bs-live-tile p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 10px 0;
}

.bs-live-score-box {
    border-radius: 16px;
    padding: 11px;
    background: rgba(102,126,234,0.09);
    margin-bottom: 44px;
}

.bs-live-score-box span {
    display: block;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .10em;
    color: var(--primary-color);
}

.bs-live-score-box strong {
    display: block;
    color: var(--text-main);
    margin: 4px 0;
}

.bs-live-score-box small { color: var(--text-muted); }

.bs-dues-total,
.bs-dues-waiting {
    border-radius: 14px;
    padding: 9px 10px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 900;
}

.bs-dues-total {
    background: rgba(245,101,101,0.12);
    color: var(--danger);
}

.bs-dues-waiting {
    background: rgba(237,137,54,0.13);
    color: var(--warning);
}

.bs-small-link {
    background: rgba(102,126,234,0.12);
    color: var(--primary-color);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 1000;
}

.bs-dues-list {
    margin-top: 10px;
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
	padding-right: 3px; 
}

.bs-dues-item {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 7px;
    align-items: center;
    padding: 7px;
    border-radius: 12px;
    background: rgba(0,0,0,0.035);
}

body.dark-mode .bs-dues-item { background: rgba(255,255,255,0.055); }

.bs-dues-item strong,
.bs-dues-item small {
    display: block;
}

.bs-dues-item strong {
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bs-dues-item small {
    color: var(--text-muted);
    font-size: 10px;
}

.bs-dues-item b {
    color: var(--danger);
    font-size: 11px;
}

.bs-dues-item em {
    font-style: normal;
    font-size: 10px;
    font-weight: 1000;
    color: var(--danger);
}

.bs-dues-item em.waiting { color: var(--warning); }

.bs-score-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    
    padding-right: 3px;
}

.bs-score-mini {
    border-radius: 18px;
    padding: 12px;
    background: rgba(102,126,234,0.08);
    border: 1px solid rgba(102,126,234,0.14);
}

body.dark-mode .bs-score-mini {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.09);
}

.bs-score-mini-top {
    display: flex;
    gap: 9px;
    align-items: center;
}

.bs-score-mini-top > span {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bg-gradient);
}

.bs-score-mini-top strong {
    color: var(--text-main);
    display: block;
    font-size: 13px;
}

.bs-score-mini-top small {
    color: var(--text-muted);
    display: block;
    font-size: 10px;
}

.bs-score-value { margin: 10px 0; }

.bs-score-value span {
    color: var(--primary-color);
    font-size: 30px;
    font-weight: 1000;
}

.bs-score-value small {
    color: var(--text-muted);
    font-weight: 900;
}

.bs-score-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
}

.bs-score-meta b { color: var(--text-main); }

.bs-score-impact {
    margin-top: 8px;
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 1000;
    background: rgba(72,187,120,0.12);
    color: #15803d;
}

.bs-score-impact.negative {
    background: rgba(245,101,101,0.12);
    color: #b91c1c;
}

body.dark-mode .bs-score-impact { color: #bbf7d0; }
body.dark-mode .bs-score-impact.negative { color: #fecaca; }

/* Neutralize older top-dashboard rules */
.dash-hero-clean {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ---------- Player card page redesign ---------- */

/* =========================================================
   PLAYER CRICKET CARD - FINAL MOBILE SAFE VERSION
   No 3D rotate. No mirror issue. No internal scrollbar.
========================================================= */

.bs-card-page {
    min-height: 100dvh;
    color: #fff;
    background:
        radial-gradient(circle at 14% 8%, rgba(255,214,92,0.24), transparent 28%),
        radial-gradient(circle at 90% 16%, rgba(102,126,234,0.26), transparent 34%),
        linear-gradient(135deg, #040712, #10182c 48%, #070812);
}

.bs-card-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: clamp(14px, 3vw, 34px);
}

.bs-card-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.bs-card-nav span {
    color: #ffdc6d;
    font-weight: 1000;
}

.bs-card-stage {
    min-height: calc(100dvh - 80px);
    display: grid;
    grid-template-columns: minmax(300px, 510px) minmax(280px, 1fr);
    gap: clamp(22px, 4vw, 58px);
    align-items: center;
}

.public-mode .bs-card-stage {
    min-height: calc(100dvh - 32px);
}

.bs-card-left {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bs-card-scene {
    width: min(500px, 94vw);
    cursor: pointer;
    outline: none;
}

.bs-pro-card {
    width: 100%;
}

.bs-pro-face {
    display: block;
    width: 100%;
    border-radius: clamp(24px, 5vw, 36px);
    overflow: hidden;
    box-shadow:
        0 45px 120px rgba(0,0,0,.68),
        0 0 0 1px rgba(255,255,255,.18);
    animation: bsCardIn .32s ease both;
}

.bs-card-scene:not(.show-stats) .bs-pro-back {
    display: none;
}

.bs-card-scene.show-stats .bs-pro-front {
    display: none;
}

@keyframes bsCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bs-pro-front {
    background:
        radial-gradient(circle at 50% 13%, rgba(255,255,255,.96), transparent 17%),
        radial-gradient(circle at 78% 31%, rgba(255,224,88,.92), transparent 18%),
        linear-gradient(145deg, #fce77c, #e3383c 52%, #111833 100%);
    padding: clamp(10px, 2.5vw, 16px);
}

.bs-pro-back {
    background:
        radial-gradient(circle at 75% 18%, rgba(255,222,107,.22), transparent 26%),
        linear-gradient(145deg, #10172c, #050711);
    padding: clamp(10px, 2.5vw, 16px);
}

.bs-pro-frame,
.bs-back-frame {
    position: relative;
    border-radius: clamp(18px, 4vw, 28px);
    border: 2px solid rgba(255,255,255,.42);
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
    overflow: hidden;
}

.bs-card-holo {
    position: absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.36), transparent 60%);
    transform: rotate(15deg);
    animation: bsHoloSweep 4.8s infinite;
    pointer-events: none;
}

@keyframes bsHoloSweep {
    0%, 35% { translate: -45% 0; opacity: 0; }
    48% { opacity: 1; }
    75%, 100% { translate: 45% 0; opacity: 0; }
}

.bs-card-texture {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 4px);
    pointer-events: none;
}

.bs-pro-header {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: clamp(14px, 3vw, 20px);
}

.bs-pro-rating {
    width: clamp(70px, 18vw, 92px);
    height: clamp(70px, 18vw, 92px);
    border-radius: clamp(18px, 5vw, 26px);
    background: linear-gradient(145deg, #fff5b0, #ffcf38);
    color: #a71020;
    display: grid;
    place-items: center;
    border: 4px solid rgba(108,13,25,.82);
    box-shadow: inset 0 0 18px rgba(255,255,255,.55);
    flex: 0 0 auto;
}

.bs-pro-rating strong {
    font-size: clamp(32px, 8vw, 46px);
    line-height: .8;
    font-weight: 1000;
}

.bs-pro-rating span {
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .14em;
}

.bs-pro-edition {
    min-width: 0;
}

.bs-pro-edition b {
    display: block;
    color: #fff4ad;
    font-size: clamp(15px, 4vw, 21px);
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.bs-pro-edition span {
    color: rgba(255,255,255,.82);
    font-weight: 900;
    font-size: clamp(12px, 3vw, 15px);
}

.bs-pro-hero {
    margin: 4px clamp(14px, 4vw, 26px) 0;
    height: clamp(230px, 52vw, 324px);
    border-radius: clamp(22px, 6vw, 32px);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.86), transparent 27%),
        linear-gradient(135deg, #0f6eb3, #73d4ff 48%, #f7fbff);
    border: 3px solid rgba(255,255,255,.62);
}

.bs-energy-circle {
    position: absolute;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,.62);
    box-shadow: 0 0 42px rgba(255,255,255,.52);
}

.bs-energy-circle.two {
    width: 72%;
    opacity: .42;
    border-style: dashed;
    animation: bsSpin 16s linear infinite;
}

@keyframes bsSpin {
    to { transform: rotate(360deg); }
}

.bs-player-cutout {
    width: clamp(104px, 30vw, 142px);
    height: clamp(132px, 38vw, 176px);
    border-radius: clamp(22px, 6vw, 32px);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #0a1020, #253f7f);
    color: #fff;
    font-size: clamp(54px, 15vw, 80px);
    font-weight: 1000;
    border: 5px solid #ffec9e;
    z-index: 2;
    transform: translateX(-34px) rotate(-5deg);
}

.bs-bat-mark {
    position: absolute;
    right: 10%;
    bottom: 17%;
    font-size: clamp(70px, 22vw, 118px);
    z-index: 3;
    filter: drop-shadow(0 20px 20px rgba(0,0,0,.35));
}

.bs-funky-chip {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 4;
    text-align: center;
}

.bs-funky-chip span {
    display: inline-block;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(5,9,22,.78);
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-name-plate {
    margin: 16px clamp(14px, 4vw, 26px) 0;
    padding: clamp(11px, 3vw, 15px);
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(90deg, #fff0a4, #ffd33f, #fff0a4);
    border: 3px solid rgba(120,20,20,.65);
}

.bs-name-plate h1 {
    margin: 0;
    color: #a70e1c;
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.bs-name-plate p {
    margin: 5px 0 0;
    color: #143c78;
    font-weight: 1000;
    letter-spacing: .12em;
    font-size: clamp(11px, 3vw, 14px);
}

.bs-ability-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 15px clamp(14px, 4vw, 26px) 0;
}

.bs-ability-row div {
    border-radius: 17px;
    padding: 10px 6px;
    text-align: center;
    background: rgba(5,9,22,.76);
    border: 1px solid rgba(255,255,255,.18);
}

.bs-ability-row strong {
    display: block;
    color: #ffda64;
    font-size: clamp(23px, 7vw, 34px);
}

.bs-ability-row span {
    color: #fff;
    font-weight: 1000;
    font-size: 11px;
}

.bs-pro-footer,
.bs-back-footer {
    text-align: center;
    color: rgba(255,255,255,.84);
    font-size: 11px;
    font-weight: 900;
    padding: 14px 18px 16px;
}

.bs-back-frame {
    padding: clamp(14px, 3vw, 18px);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-color: rgba(255,255,255,.16);
}

.bs-back-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.bs-back-header h2 {
    margin: 0;
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: clamp(20px, 6vw, 30px);
    overflow-wrap: anywhere;
}

.bs-back-header p {
    margin: 3px 0 0;
    color: rgba(255,255,255,.68);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.bs-back-rating {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #ffde6b;
    color: #9d1020;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.bs-back-rating strong {
    font-size: 27px;
    line-height: .8;
}

.bs-back-rating span {
    font-size: 9px;
    font-weight: 1000;
}

.bs-back-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.bs-back-strip div {
    border-radius: 15px;
    padding: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    text-align: center;
}

.bs-back-strip strong {
    display: block;
    color: #fff;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.bs-back-strip span {
    color: #ffde6b;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
}

.bs-stat-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bs-stat-panel {
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    padding: clamp(10px, 2.5vw, 12px);
}

.bs-stat-panel h3 {
    margin: 0 0 8px;
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 15px;
}

.bs-stat-panel div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.80);
    font-size: clamp(12px, 3vw, 13px);
}

.bs-stat-panel b {
    color: #fff;
    white-space: nowrap;
}

.bs-card-info {
    color: #fff;
}

.bs-side-kicker {
    color: #ffde6b;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 1000;
    font-size: 12px;
}

.bs-card-info h2 {
    margin: 10px 0;
    font-size: clamp(36px, 5vw, 68px);
    line-height: .92;
    letter-spacing: -.055em;
    color: #fff;
}

.bs-card-info p {
    color: rgba(255,255,255,.74);
    font-size: 17px;
    line-height: 1.6;
    max-width: 540px;
}

.bs-side-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.bs-side-stats div {
    padding: 15px;
    border-radius: 19px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
}

.bs-side-stats strong {
    display: block;
    color: #ffde6b;
    font-size: 30px;
}

.bs-side-stats span {
    color: rgba(255,255,255,.72);
    font-weight: 900;
}

.bs-share-zone {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bs-public-url {
    width: 100%;
    display: flex;
    gap: 8px;
}

.bs-public-brand {
    color: #ffde6b;
    font-weight: 1000;
    margin-top: 18px;
}

/* No motion preference */
@media (prefers-reduced-motion: reduce) {
    .bs-card-holo,
    .bs-energy-circle.two,
    .bs-pro-face {
        animation: none !important;
    }
}

/* Tablet and mobile */
@media (max-width: 980px) {
    .bs-card-stage {
        grid-template-columns: 1fr;
        min-height: auto;
        justify-items: center;
    }

    .bs-card-info {
        text-align: center;
        width: min(560px, 100%);
    }

    .bs-card-info p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* iPhone / small Android */
@media (max-width: 560px) {
    .bs-card-shell {
        padding: 12px;
    }

    .bs-card-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .bs-card-scene {
        width: 100%;
    }

    .bs-pro-hero {
        height: 230px;
    }

    .bs-player-cutout {
        transform: translateX(-26px) rotate(-4deg);
    }

    .bs-bat-mark {
        right: 7%;
        bottom: 18%;
    }

    .bs-stat-panels {
        grid-template-columns: 1fr;
    }

    .bs-side-stats {
        grid-template-columns: 1fr;
    }

    .bs-public-url {
        flex-direction: column;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .bs-pro-header {
        gap: 10px;
    }

    .bs-pro-rating {
        width: 64px;
        height: 64px;
    }

    .bs-pro-rating strong {
        font-size: 30px;
    }

    .bs-pro-hero {
        height: 210px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .bs-name-plate,
    .bs-ability-row {
        margin-left: 10px;
        margin-right: 10px;
    }

    .bs-name-plate h1 {
        font-size: 21px;
    }

    .bs-ability-row {
        gap: 6px;
    }

    .bs-ability-row div {
        padding: 8px 4px;
    }

    .bs-stat-panel div {
        font-size: 12px;
    }
}
/*----------------------*/
/* Css for new settlement update */

.settlement-create-form-wide {
    display: block;
}

.settlement-player-review {
    margin: 18px 0;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.settlement-player-review h4 {
    margin: 0 0 6px;
    color: var(--text-main);
    font-weight: 900;
}

.settlement-player-review p {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.settlement-player-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.settlement-player-review-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 15px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.settlement-player-review-card strong {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.settlement-player-review-card span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.settlement-player-review-card.walkin-player {
    border-color: rgba(237,137,54,0.45);
    background: var(--alert-warning-bg);
}

.settlement-include-pill {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.settlement-include-pill.fixed {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
}

.settlement-walkin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 900;
}

.settlement-walkin-toggle input {
    width: 17px;
    height: 17px;
}

/* Team players in history page */
.history-player-tag {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.history-player-tag.walkin {
    background: rgba(245,158,11,.15);
    color: #f59e0b;
}

.history-player-tag.reserve {
    background: rgba(59,130,246,.15);
    color: #3b82f6;
}



.bs-card-funky-stack {
    grid-column: span 3 !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    gap: 14px !important;
}

.bs-card-funky-stack .bs-trade-tile-link {
    grid-column: auto !important;
    height: auto !important;
}

.bs-card-funky-stack .bs-trade-tile {
    height: 100% !important;
    min-height: 250px !important;
}

.bs-card-funky-stack .bs-funky-tile {
    grid-column: auto !important;
    min-height: 112px !important;
}

.bs-live-tile {
    grid-column: span 4 !important;
    min-height: 376px !important;
    height: 100% !important;
}

.bs-live-tile .bs-tile-action {
    position: static !important;
    margin-top: auto !important;
}

.bs-live-score-box {
    margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
    .bs-card-funky-stack,
    .bs-live-tile {
        grid-column: span 6 !important;
    }
}

@media (max-width: 760px) {
    .bs-card-funky-stack,
    .bs-live-tile {
        grid-column: auto !important;
    }

    .bs-live-tile {
        min-height: auto !important;
    }
}


/* FINAL DASHBOARD TOP ROW FIX */

.bs-dashboard-top {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.bs-tile-wide {
    grid-column: span 4 !important;
}

.bs-card-funky-stack {
    grid-column: span 3 !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    gap: 14px !important;
}

.bs-card-funky-stack .bs-trade-tile-link {
    grid-column: auto !important;
    display: block !important;
    height: 100% !important;
}

.bs-card-funky-stack .bs-trade-tile {
    height: 100% !important;
    min-height: 248px !important;
}

.bs-card-funky-stack .bs-funky-tile {
    grid-column: auto !important;
    min-height: 112px !important;
}

.bs-live-tile {
    grid-column: span 5 !important;
    min-height: 374px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.bs-live-score-box {
    margin-bottom: 0 !important;
}

.bs-live-tile .bs-tile-action {
    position: static !important;
    margin-top: auto !important;
}

.bs-dues-tile {
    grid-column: span 4 !important;
}

.bs-score-tile {
    grid-column: span 8 !important;
}

.bs-trade-tile-link {
    grid-column: auto !important;
}

.bs-funky-tile {
    grid-column: auto !important;
}

/* responsive */
@media (max-width: 1200px) {
    .bs-tile-wide {
        grid-column: span 12 !important;
    }

    .bs-card-funky-stack {
        grid-column: span 5 !important;
    }

    .bs-live-tile {
        grid-column: span 7 !important;
    }

    .bs-dues-tile,
    .bs-score-tile {
        grid-column: span 12 !important;
    }
}

@media (max-width: 760px) {
    .bs-dashboard-top {
        grid-template-columns: 1fr !important;
    }

    .bs-tile-wide,
    .bs-card-funky-stack,
    .bs-live-tile,
    .bs-dues-tile,
    .bs-score-tile {
        grid-column: auto !important;
    }

    .bs-live-tile {
        min-height: auto !important;
    }
}


.user-search-bar {
    margin-bottom: 18px;
}

.user-search-bar form {
    display:flex;
    gap:10px;
    align-items:center;
}

.user-actions-dropdown summary {
    cursor:pointer;
    list-style:none;
}

.user-actions-dropdown summary::-webkit-details-marker {
    display:none;
}

.user-status-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.user-action-panel {
    margin-top:10px;
    display:grid;
    gap:14px;
    min-width:260px;
}

.user-action-group {
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:10px;
}

.user-action-label {
    font-weight:700;
    margin-bottom:8px;
}

.scorer-picker-form {
    display: grid;
    gap: 14px;
}

.scorer-picker-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.scorer-counter {
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 900;
    white-space: nowrap;
}

.scorer-counter strong {
    color: var(--primary-color);
}

.selected-scorer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 8px;
}

.selected-scorer-chip {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--bg-gradient);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.scorer-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.scorer-option-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.scorer-option-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 14px 32px rgba(102,126,234,0.18);
}

.scorer-option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.scorer-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--bg-gradient);
    color: #fff;
    flex: 0 0 auto;
}

.scorer-card-info {
    min-width: 0;
}

.scorer-card-info strong {
    display: block;
    color: var(--text-main);
    font-weight: 1000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scorer-card-info span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    margin-top: 3px;
}

.scorer-selected-mark {
    margin-left: auto;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .18s ease, transform .18s ease;
}

.scorer-option-card.selected {
    border-color: var(--primary-color);
    background: rgba(102,126,234,0.12);
}

.scorer-option-card.selected .scorer-selected-mark {
    opacity: 1;
    transform: scale(1);
}

.scorer-option-card.selection-disabled {
    opacity: .48;
}

.scorer-option-card.selection-disabled:hover {
    transform: none;
    box-shadow: none;
}

.scorer-assign-btn {
    width: fit-content;
}

@media (max-width: 640px) {
    .scorer-picker-top {
        grid-template-columns: 1fr;
    }

    .scorer-card-grid {
        grid-template-columns: 1fr;
    }

    .scorer-assign-btn {
        width: 100%;
    }
}