/*
 * Shared visual safety net for the redesign.
 * This file avoids opinionated re-skins and focuses on stability,
 * accessibility, and responsive polish across the project.
 */

:root {
    --ui-focus-ring: rgba(11, 79, 140, 0.34);
    --ui-focus-shadow: rgba(11, 79, 140, 0.18);
    --ui-shell-header-h: 68px;
    --ui-shell-sidebar-w: 280px;
    --ui-shell-border: rgba(15, 35, 58, 0.12);
    --ui-shell-surface: rgba(255, 255, 255, 0.92);
    --ui-shell-surface-strong: rgba(255, 255, 255, 0.98);
    --ui-shell-text: #11263d;
    --ui-shell-text-soft: #60758d;
    --ui-shell-hover: rgba(11, 79, 140, 0.08);
    --ui-page-bg: #f4f7fb;
    --ui-page-bg-accent: #edf3f9;
    --ui-page-glow-a: rgba(96, 165, 250, 0.2);
    --ui-page-glow-b: rgba(16, 185, 129, 0.14);
    --ui-page-glow-c: rgba(255, 255, 255, 0.7);
    --ui-shell-shadow: 0 12px 28px -30px rgba(15, 23, 42, 0.42);
    --ui-panel-glow: 0 0 0 1px rgba(142, 193, 255, 0.34), 0 16px 34px -26px rgba(15, 23, 42, 0.24), 0 0 52px -26px rgba(16, 103, 179, 0.26), 0 0 26px -20px rgba(15, 138, 114, 0.16);
    --ui-panel-glow-soft: 0 0 0 1px rgba(142, 193, 255, 0.24), 0 14px 28px -24px rgba(15, 23, 42, 0.18), 0 0 34px -24px rgba(15, 138, 114, 0.16);
    --ui-panel-glow-hover: 0 0 0 1px rgba(176, 214, 255, 0.48), 0 22px 42px -24px rgba(15, 23, 42, 0.3), 0 0 72px -24px rgba(16, 103, 179, 0.36), 0 0 32px -18px rgba(15, 138, 114, 0.22);
}

body.page-login .page-shell {
    width: min(1480px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(520px, 0.88fr) !important;
    gap: 36px !important;
    align-items: center !important;
}

body.page-login .promo-panel {
    min-height: 700px !important;
    justify-content: space-between !important;
    padding: 34px 34px 30px !important;
    box-shadow:
        0 34px 70px rgba(3, 10, 27, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .promo-content h1 {
    max-width: 8.6ch !important;
    font-size: clamp(3.25rem, 5vw, 5.2rem) !important;
    line-height: 0.88 !important;
}

body.page-login .login-panel {
    padding: 28px !important;
    background:
        radial-gradient(300px 180px at 0% 0%, rgba(247, 195, 85, 0.12), transparent 70%),
        radial-gradient(340px 220px at 100% 8%, rgba(59, 130, 246, 0.14), transparent 72%),
        linear-gradient(160deg, rgba(10, 21, 46, 0.96), rgba(6, 15, 33, 0.98)) !important;
    box-shadow:
        0 30px 68px rgba(3, 10, 27, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .login-card {
    overflow: visible !important;
    padding: 30px 30px 26px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(8, 19, 41, 0.94), rgba(9, 16, 31, 0.9)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 46px rgba(0, 0, 0, 0.24) !important;
}

body.page-login .login-head {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

body.page-login .login-head h2 {
    font-size: clamp(2rem, 2.5vw, 2.45rem) !important;
    line-height: 0.92 !important;
}

body.page-login .login-head p {
    max-width: 42ch !important;
    font-size: 0.94rem !important;
}

body.page-login .login-signal-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.page-login .login-signal-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(166, 189, 235, 0.22) !important;
    background: rgba(13, 28, 58, 0.72) !important;
    color: #dce8fb !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

body.page-login .input-with-icon {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(11, 27, 58, 0.78), rgba(8, 19, 40, 0.82)) !important;
    border: 1px solid rgba(145, 170, 221, 0.16) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.page-login .input-with-icon:focus-within {
    transform: translateY(-1px) !important;
    border-color: rgba(112, 188, 255, 0.42) !important;
    box-shadow: 0 14px 28px rgba(9, 18, 38, 0.26) !important;
}

body.page-login .input-with-icon input {
    min-height: 50px !important;
    padding-left: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-login .login-btn:not(.login-btn-secondary) {
    min-height: 54px !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    font-size: 0.96rem !important;
    box-shadow:
        0 22px 36px rgba(247, 195, 85, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

body.page-login .login-btn:not(.login-btn-secondary):hover {
    transform: translateY(-2px) !important;
}

body.page-login .section-divider--cta {
    overflow: visible !important;
    margin-top: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(160, 183, 233, 0.16) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(9, 21, 46, 0.9), rgba(7, 18, 39, 0.82)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 34px rgba(2, 8, 25, 0.22) !important;
}

body.page-login .section-divider--cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(26, 176, 126, 0.9), rgba(247, 195, 85, 0.9)) !important;
}

body.page-login .login-cta-grid {
    display: grid !important;
    gap: 14px !important;
    justify-items: center !important;
}

body.page-login .login-cta-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    align-items: start !important;
    gap: 14px 12px !important;
    width: min(100%, 410px) !important;
    min-height: 136px !important;
    margin-top: 0 !important;
    padding: 18px 18px 16px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(160, 183, 233, 0.14) !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow:
        0 18px 34px rgba(2, 8, 25, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 90px at 0% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(21, 54, 116, 0.9), rgba(10, 29, 64, 0.96)) !important;
}

body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 100px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(15, 64, 60, 0.94), rgba(12, 31, 51, 0.98)) !important;
}

body.page-login .login-cta-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(189, 211, 255, 0.28) !important;
}

body.page-login .login-cta-icon,
body.page-login .login-cta-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.page-login .login-cta-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

body.page-login .login-cta-copy {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

body.page-login .login-cta-copy strong {
    color: #f8fbff !important;
    font-size: 0.95rem !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
}

body.page-login .login-cta-copy small {
    color: rgba(214, 227, 251, 0.82) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

body.page-login .login-cta-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(247, 251, 255, 0.96) !important;
    font-size: 0.9rem !important;
    align-self: start !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html[data-theme="light"] body.page-login .login-panel {
    background:
        radial-gradient(320px 200px at 0% 0%, rgba(247, 195, 85, 0.15), transparent 68%),
        radial-gradient(300px 200px at 100% 8%, rgba(31, 95, 154, 0.14), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-card,
html[data-theme="light"] body.page-login .section-divider--cta {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94)) !important;
}

html[data-theme="light"] body.page-login .login-signal-chip {
    background: rgba(247, 250, 255, 0.92) !important;
    border-color: rgba(146, 166, 201, 0.24) !important;
    color: #153252 !important;
}

html[data-theme="light"] body.page-login .input-with-icon {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(241, 246, 255, 0.96)) !important;
    border-color: rgba(146, 166, 201, 0.2) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 100px at 0% 0%, rgba(31, 95, 154, 0.16), transparent 70%),
        linear-gradient(135deg, rgba(223, 236, 255, 0.96), rgba(239, 246, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(229, 247, 241, 0.98), rgba(241, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-copy strong {
    color: #102a43 !important;
}

html[data-theme="light"] body.page-login .login-cta-copy small {
    color: #486581 !important;
}

html[data-theme="light"] body.page-login .login-cta-icon,
html[data-theme="light"] body.page-login .login-cta-arrow {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(146, 166, 201, 0.22) !important;
    color: #123154 !important;
}

@media (min-width: 900px) {
    body.page-login .login-cta-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    body.page-login .page-shell {
        width: min(760px, calc(100% - 28px)) !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.page-login .promo-panel {
        min-height: auto !important;
    }
}

@media (max-width: 640px) {
    body.page-login .login-panel {
        padding: 16px !important;
    }

    body.page-login .login-card {
        padding: 22px 18px 20px !important;
        border-radius: 22px !important;
    }

    body.page-login .login-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    }

    body.page-login .login-cta-card {
        width: 100% !important;
        min-height: 122px !important;
        padding: 16px !important;
    }

    body.page-login .login-cta-arrow {
        justify-self: end !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-login .input-with-icon:focus-within,
    body.page-login .login-btn:not(.login-btn-secondary):hover,
    body.page-login .login-cta-card:hover {
        transform: none !important;
    }
}

/* Final viewport-safe login override */
body.page-login {
    overflow-y: auto !important;
}

body.page-login .page-shell {
    width: min(1180px, calc(100% - 28px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 440px) !important;
    gap: 20px !important;
    align-items: start !important;
}

body.page-login .promo-panel,
body.page-login .login-panel,
body.page-login .login-card,
body.page-login .section-divider--cta,
body.page-login .promo-proof-card,
body.page-login .login-cta-card {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

body.page-login .promo-panel {
    min-height: 0 !important;
    padding: 22px 22px 18px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

body.page-login .promo-content h1 {
    max-width: 9.2ch !important;
    font-size: clamp(2.35rem, 3.4vw, 3.45rem) !important;
    margin: 10px 0 8px !important;
    line-height: 0.9 !important;
}

body.page-login .promo-content p {
    max-width: 33ch !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

body.page-login .promo-list {
    gap: 8px !important;
}

body.page-login .promo-list li {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.34 !important;
}

body.page-login .promo-actions {
    padding-top: 0 !important;
}

body.page-login .promo-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

body.page-login .promo-proof-card {
    padding: 11px 11px 12px !important;
    border-radius: 15px !important;
}

body.page-login .promo-proof-label {
    margin-bottom: 6px !important;
    font-size: 0.62rem !important;
}

body.page-login .promo-proof-card strong {
    margin-bottom: 4px !important;
    font-size: clamp(0.96rem, 1.2vw, 1.2rem) !important;
}

body.page-login .promo-proof-card p {
    font-size: 0.73rem !important;
    line-height: 1.3 !important;
}

body.page-login .login-panel {
    min-height: 0 !important;
    padding: 14px !important;
}

body.page-login .login-card {
    padding: 20px 20px 16px !important;
    border-radius: 20px !important;
}

body.page-login .login-head {
    gap: 8px !important;
    margin-bottom: 12px !important;
}

body.page-login .login-head h2 {
    font-size: clamp(1.7rem, 2vw, 2rem) !important;
}

body.page-login .login-head p {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
}

body.page-login .login-signal-row {
    gap: 8px !important;
}

body.page-login .login-signal-chip {
    min-height: 29px !important;
    padding: 5px 9px !important;
    font-size: 0.66rem !important;
}

body.page-login .form-group {
    margin-bottom: 10px !important;
}

body.page-login .form-group label {
    margin-bottom: 4px !important;
    font-size: 0.67rem !important;
}

body.page-login .input-with-icon input {
    min-height: 43px !important;
    font-size: 0.89rem !important;
}

body.page-login .login-btn:not(.login-btn-secondary) {
    min-height: 46px !important;
    margin-top: 4px !important;
    font-size: 0.88rem !important;
}

body.page-login .login-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

body.page-login .section-divider--cta {
    margin-top: 12px !important;
    padding: 12px !important;
    gap: 8px !important;
    border-radius: 18px !important;
}

body.page-login .section-divider--cta h3 {
    font-size: 0.9rem !important;
}

body.page-login .section-divider--cta p {
    font-size: 0.77rem !important;
    line-height: 1.34 !important;
}

body.page-login .login-cta-grid {
    gap: 8px !important;
    justify-items: stretch !important;
}

body.page-login .login-cta-card {
    width: 100% !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    grid-template-columns: 42px minmax(0, 1fr) 30px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 10px !important;
}

body.page-login .login-cta-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 0.92rem !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

body.page-login .login-cta-copy {
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 2px !important;
}

body.page-login .login-cta-copy strong {
    font-size: 0.84rem !important;
    line-height: 1.18 !important;
}

body.page-login .login-cta-copy small {
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
}

body.page-login .login-cta-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.72rem !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
}

body.page-login .copyright {
    margin-top: 8px !important;
    font-size: 0.7rem !important;
}

@media (max-width: 1100px) {
    body.page-login .page-shell {
        width: min(760px, calc(100% - 24px)) !important;
        grid-template-columns: 1fr !important;
    }
}

/* Absolute final login fix */
body.page-login {
    overflow-y: auto !important;
}

body.page-login .page-shell {
    width: min(1180px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 460px) !important;
    gap: 18px !important;
    align-items: start !important;
}

body.page-login .promo-panel,
body.page-login .login-panel,
body.page-login .login-card,
body.page-login .section-divider--cta,
body.page-login .promo-proof-card,
body.page-login .login-cta-card {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

body.page-login .promo-panel {
    min-height: 0 !important;
    padding: 20px 20px 16px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

body.page-login .promo-content h1 {
    max-width: 9.6ch !important;
    font-size: clamp(2.2rem, 3.1vw, 3.2rem) !important;
    line-height: 0.9 !important;
    margin: 8px 0 6px !important;
}

body.page-login .promo-content p {
    max-width: 32ch !important;
    font-size: 0.88rem !important;
    line-height: 1.42 !important;
}

body.page-login .promo-list {
    gap: 7px !important;
}

body.page-login .promo-list li {
    padding: 9px 11px !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
}

body.page-login .promo-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

body.page-login .promo-proof-card {
    padding: 10px 10px 11px !important;
    border-radius: 14px !important;
}

body.page-login .promo-proof-label {
    margin-bottom: 5px !important;
    font-size: 0.6rem !important;
}

body.page-login .promo-proof-card strong {
    margin-bottom: 3px !important;
    font-size: 1rem !important;
}

body.page-login .promo-proof-card p {
    font-size: 0.71rem !important;
    line-height: 1.24 !important;
}

body.page-login .login-panel {
    width: min(100%, 460px) !important;
    justify-self: end !important;
    min-height: 0 !important;
    padding: 12px !important;
}

body.page-login .login-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 18px 14px !important;
    border-radius: 18px !important;
}

body.page-login .login-head {
    gap: 7px !important;
    margin-bottom: 10px !important;
}

body.page-login .login-head h2 {
    font-size: clamp(1.55rem, 1.9vw, 1.9rem) !important;
}

body.page-login .login-head p {
    font-size: 0.83rem !important;
    line-height: 1.38 !important;
}

body.page-login .login-signal-row {
    gap: 6px !important;
}

body.page-login .login-signal-chip {
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: 0.62rem !important;
}

body.page-login .form-group {
    margin-bottom: 9px !important;
}

body.page-login .form-group label {
    margin-bottom: 4px !important;
    font-size: 0.66rem !important;
}

body.page-login .input-with-icon input {
    min-height: 42px !important;
    font-size: 0.88rem !important;
}

body.page-login .login-btn:not(.login-btn-secondary) {
    min-height: 44px !important;
    margin-top: 4px !important;
    font-size: 0.86rem !important;
}

body.page-login .login-footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
}

body.page-login .section-divider--cta {
    margin-top: 10px !important;
    padding: 10px !important;
    gap: 7px !important;
    border-radius: 16px !important;
}

body.page-login .section-divider--cta h3 {
    font-size: 0.86rem !important;
    margin: 0 !important;
}

body.page-login .section-divider--cta p {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

body.page-login .login-cta-grid {
    gap: 8px !important;
    justify-items: stretch !important;
}

body.page-login .login-cta-card {
    width: 100% !important;
    min-height: 76px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.page-login .login-cta-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    font-size: 0.88rem !important;
    flex: 0 0 38px !important;
}

body.page-login .login-cta-copy {
    display: grid !important;
    gap: 1px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.page-login .login-cta-copy strong {
    font-size: 0.8rem !important;
    line-height: 1.14 !important;
}

body.page-login .login-cta-copy small {
    font-size: 0.6rem !important;
    letter-spacing: 0.07em !important;
}

body.page-login .login-cta-arrow {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.68rem !important;
    flex: 0 0 28px !important;
}

body.page-login .copyright {
    margin-top: 8px !important;
    font-size: 0.68rem !important;
}

@media (max-width: 1100px) {
    body.page-login .page-shell {
        width: min(760px, calc(100% - 20px)) !important;
        grid-template-columns: 1fr !important;
    }

    body.page-login .login-panel {
        width: 100% !important;
        justify-self: stretch !important;
    }
}

@media (min-width: 1024px) and (min-height: 700px) {
    body.page-login {
        padding: 14px !important;
        overflow-y: auto !important;
    }

    body.page-login .page-shell {
        width: min(1320px, calc(100vw - 28px)) !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 1fr) minmax(440px, 0.86fr) !important;
        gap: 22px !important;
        align-items: start !important;
    }

    body.page-login .promo-panel,
    body.page-login .login-panel {
        min-height: 0 !important;
        height: auto !important;
    }

    body.page-login .promo-panel {
        padding: 24px 24px 20px !important;
        gap: 14px !important;
    }

    body.page-login .promo-content h1 {
        max-width: 9.4ch !important;
        font-size: clamp(2.45rem, 3.8vw, 3.8rem) !important;
        margin: 10px 0 8px !important;
        line-height: 0.9 !important;
    }

    body.page-login .promo-content p {
        max-width: 34ch !important;
        font-size: 0.9rem !important;
        line-height: 1.52 !important;
    }

    body.page-login .promo-list {
        gap: 8px !important;
    }

    body.page-login .promo-list li {
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 0.83rem !important;
        line-height: 1.35 !important;
    }

    body.page-login .promo-proof {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-login .promo-proof-card {
        padding: 12px 12px 13px !important;
        border-radius: 16px !important;
    }

    body.page-login .promo-proof-label {
        margin-bottom: 8px !important;
        font-size: 0.64rem !important;
    }

    body.page-login .promo-proof-card strong {
        font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
        margin-bottom: 4px !important;
    }

    body.page-login .promo-proof-card p {
        font-size: 0.75rem !important;
        line-height: 1.34 !important;
    }

    body.page-login .login-panel {
        padding: 16px !important;
    }

    body.page-login .login-card {
        height: auto !important;
        padding: 22px 22px 18px !important;
        border-radius: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    body.page-login .login-head {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    body.page-login .login-head h2 {
        font-size: clamp(1.7rem, 2vw, 2.05rem) !important;
    }

    body.page-login .login-head p {
        max-width: none !important;
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    body.page-login .login-signal-row {
        gap: 8px !important;
    }

    body.page-login .login-signal-chip {
        min-height: 30px !important;
        padding: 6px 10px !important;
        font-size: 0.68rem !important;
    }

    body.page-login .form-group {
        margin-bottom: 10px !important;
    }

    body.page-login .form-group label {
        margin-bottom: 5px !important;
        font-size: 0.68rem !important;
    }

    body.page-login .input-with-icon input {
        min-height: 44px !important;
        font-size: 0.9rem !important;
    }

    body.page-login .login-btn:not(.login-btn-secondary) {
        min-height: 48px !important;
        margin-top: 6px !important;
        font-size: 0.9rem !important;
    }

    body.page-login .login-footer {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    body.page-login .section-divider--cta {
        margin-top: 12px !important;
        padding: 14px !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }

    body.page-login .section-divider--cta h3 {
        font-size: 0.92rem !important;
        margin-bottom: 0 !important;
    }

    body.page-login .section-divider--cta p {
        font-size: 0.79rem !important;
        line-height: 1.38 !important;
        margin-bottom: 0 !important;
    }

    body.page-login .login-cta-grid {
        gap: 10px !important;
    }

    body.page-login .login-cta-card {
        width: 100% !important;
        min-height: 88px !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        grid-template-columns: 48px minmax(0, 1fr) 34px !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        gap: 12px !important;
    }

    body.page-login .login-cta-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
        font-size: 1rem !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.page-login .login-cta-copy {
        grid-column: auto !important;
        grid-row: auto !important;
        gap: 3px !important;
    }

    body.page-login .login-cta-copy strong {
        font-size: 0.9rem !important;
        line-height: 1.22 !important;
    }

    body.page-login .login-cta-copy small {
        font-size: 0.68rem !important;
        letter-spacing: 0.1em !important;
    }

    body.page-login .login-cta-arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.8rem !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
    }

    body.page-login .copyright {
        margin-top: 10px !important;
        font-size: 0.72rem !important;
    }
}

body.page-login .page-shell {
    width: min(1480px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(520px, 0.88fr) !important;
    gap: 36px !important;
    align-items: center !important;
}

body.page-login .promo-panel {
    min-height: 700px !important;
    justify-content: space-between !important;
    padding: 34px 34px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 34px 70px rgba(3, 10, 27, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .promo-content h1 {
    max-width: 8.6ch !important;
    font-size: clamp(3.25rem, 5vw, 5.2rem) !important;
    letter-spacing: 0.015em !important;
    line-height: 0.88 !important;
}

body.page-login .promo-content p {
    max-width: 40ch !important;
    font-size: 0.98rem !important;
}

body.page-login .login-panel {
    position: relative !important;
    padding: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background:
        radial-gradient(300px 180px at 0% 0%, rgba(247, 195, 85, 0.12), transparent 70%),
        radial-gradient(340px 220px at 100% 8%, rgba(59, 130, 246, 0.14), transparent 72%),
        linear-gradient(160deg, rgba(10, 21, 46, 0.96), rgba(6, 15, 33, 0.98)) !important;
    box-shadow:
        0 30px 68px rgba(3, 10, 27, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .login-card {
    position: relative !important;
    overflow: visible !important;
    padding: 30px 30px 26px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(169, 190, 236, 0.18) !important;
    background: linear-gradient(180deg, rgba(8, 19, 41, 0.94), rgba(9, 16, 31, 0.9)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 46px rgba(0, 0, 0, 0.24) !important;
}

body.page-login .login-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(247, 195, 85, 0), rgba(247, 195, 85, 0.8), rgba(59, 130, 246, 0.75), rgba(247, 195, 85, 0)) !important;
    opacity: 1 !important;
}

body.page-login .login-card::after {
    content: "" !important;
    position: absolute !important;
    width: 220px !important;
    height: 220px !important;
    right: -110px !important;
    top: -80px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(247, 195, 85, 0.18) 0%, rgba(247, 195, 85, 0) 72%) !important;
    pointer-events: none !important;
}

body.page-login .login-head {
    position: relative !important;
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    z-index: 1 !important;
}

body.page-login .login-head h2 {
    font-size: clamp(2rem, 2.5vw, 2.45rem) !important;
    line-height: 0.92 !important;
}

body.page-login .login-head p {
    max-width: 42ch !important;
    font-size: 0.94rem !important;
}

body.page-login .login-signal-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 2px !important;
}

body.page-login .login-signal-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(166, 189, 235, 0.22) !important;
    background: rgba(13, 28, 58, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: #dce8fb !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

body.page-login .login-signal-chip i {
    color: rgba(247, 195, 85, 0.95) !important;
}

body.page-login .input-with-icon {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(11, 27, 58, 0.78), rgba(8, 19, 40, 0.82)) !important;
    border: 1px solid rgba(145, 170, 221, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.page-login .input-with-icon:focus-within {
    transform: translateY(-1px) !important;
    border-color: rgba(112, 188, 255, 0.42) !important;
    box-shadow:
        0 14px 28px rgba(9, 18, 38, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.page-login .input-with-icon input {
    min-height: 50px !important;
    padding-left: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-login .login-btn:not(.login-btn-secondary) {
    min-height: 54px !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    font-size: 0.96rem !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        0 22px 36px rgba(247, 195, 85, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

body.page-login .login-btn:not(.login-btn-secondary):hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 28px 42px rgba(247, 195, 85, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

body.page-login .section-divider--cta {
    position: relative !important;
    overflow: visible !important;
    margin-top: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(160, 183, 233, 0.16) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(9, 21, 46, 0.9), rgba(7, 18, 39, 0.82)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 34px rgba(2, 8, 25, 0.22) !important;
}

body.page-login .section-divider--cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(26, 176, 126, 0.9), rgba(247, 195, 85, 0.9)) !important;
}

body.page-login .section-divider--cta h3,
body.page-login .section-divider--cta p,
body.page-login .login-cta-grid {
    position: relative !important;
    z-index: 1 !important;
}

body.page-login .section-divider--cta h3 {
    margin-bottom: 6px !important;
    font-size: 1.04rem !important;
}

body.page-login .section-divider--cta p {
    margin-bottom: 14px !important;
    max-width: 54ch !important;
    font-size: 0.86rem !important;
}

body.page-login .login-cta-grid {
    display: grid !important;
    gap: 14px !important;
}

body.page-login .login-cta-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 92px !important;
    margin-top: 0 !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(160, 183, 233, 0.14) !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow:
        0 18px 34px rgba(2, 8, 25, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

body.page-login .login-cta-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    pointer-events: none !important;
}

body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 90px at 0% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(21, 54, 116, 0.9), rgba(10, 29, 64, 0.96)) !important;
}

body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 100px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(15, 64, 60, 0.94), rgba(12, 31, 51, 0.98)) !important;
}

body.page-login .login-cta-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(189, 211, 255, 0.28) !important;
    box-shadow:
        0 24px 42px rgba(2, 8, 25, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .login-cta-icon,
body.page-login .login-cta-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.page-login .login-cta-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.page-login .login-cta-copy {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body.page-login .login-cta-copy strong,
body.page-login .login-cta-copy small {
    display: block !important;
}

body.page-login .login-cta-copy strong {
    color: #f8fbff !important;
    font-size: 0.95rem !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
}

body.page-login .login-cta-copy small {
    color: rgba(214, 227, 251, 0.82) !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

body.page-login .login-cta-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(247, 251, 255, 0.96) !important;
    font-size: 0.9rem !important;
}

body.page-login .login-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
}

html[data-theme="light"] body.page-login .login-panel {
    background:
        radial-gradient(320px 200px at 0% 0%, rgba(247, 195, 85, 0.15), transparent 68%),
        radial-gradient(300px 200px at 100% 8%, rgba(31, 95, 154, 0.14), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94)) !important;
    border-color: rgba(146, 166, 201, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 24px 44px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] body.page-login .login-signal-chip {
    background: rgba(247, 250, 255, 0.92) !important;
    border-color: rgba(146, 166, 201, 0.24) !important;
    color: #153252 !important;
}

html[data-theme="light"] body.page-login .input-with-icon {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(241, 246, 255, 0.96)) !important;
    border-color: rgba(146, 166, 201, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="light"] body.page-login .section-divider--cta {
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(241, 246, 255, 0.94)) !important;
    border-color: rgba(146, 166, 201, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 18px 34px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 100px at 0% 0%, rgba(31, 95, 154, 0.16), transparent 70%),
        linear-gradient(135deg, rgba(223, 236, 255, 0.96), rgba(239, 246, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(229, 247, 241, 0.98), rgba(241, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-copy strong {
    color: #102a43 !important;
}

html[data-theme="light"] body.page-login .login-cta-copy small {
    color: #486581 !important;
}

html[data-theme="light"] body.page-login .login-cta-icon,
html[data-theme="light"] body.page-login .login-cta-arrow {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(146, 166, 201, 0.22) !important;
    color: #123154 !important;
}

@media (min-width: 900px) {
    body.page-login .login-cta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    body.page-login .page-shell {
        width: min(760px, calc(100% - 28px)) !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.page-login .promo-panel {
        min-height: auto !important;
    }
}

@media (max-width: 640px) {
    body.page-login .login-panel {
        padding: 16px !important;
    }

    body.page-login .login-card {
        padding: 22px 18px 20px !important;
        border-radius: 22px !important;
    }

    body.page-login .login-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    }

    body.page-login .login-cta-card {
        grid-template-columns: auto 1fr !important;
        padding: 16px !important;
    }

    body.page-login .login-cta-arrow {
        grid-column: 2 !important;
        justify-self: end !important;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

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

body {
    min-height: 100vh;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

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

textarea {
    resize: vertical;
}

a,
button,
input,
select,
textarea {
    transition: outline-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

:focus-visible {
    outline: 3px solid var(--ui-focus-ring);
    outline-offset: 3px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.nav-item:focus-visible {
    box-shadow: 0 0 0 4px var(--ui-focus-shadow);
}

table {
    width: 100%;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-wrap {
        padding-bottom: 0.2rem;
    }
}

html[data-theme="dark"] {
    --ui-shell-border: rgba(148, 163, 184, 0.18);
    --ui-shell-surface: rgba(15, 23, 42, 0.9);
    --ui-shell-surface-strong: rgba(15, 23, 42, 0.96);
    --ui-shell-text: #e6eefb;
    --ui-shell-text-soft: #9eb1c8;
    --ui-shell-hover: rgba(96, 165, 250, 0.12);
    --ui-page-bg: #0b1220;
    --ui-page-bg-accent: #0f172a;
    --ui-page-glow-a: rgba(59, 130, 246, 0.24);
    --ui-page-glow-b: rgba(16, 185, 129, 0.16);
    --ui-page-glow-c: rgba(15, 23, 42, 0.2);
    --ui-panel-glow: 0 0 0 1px rgba(96, 165, 250, 0.22), 0 24px 44px -26px rgba(2, 6, 23, 0.74), 0 0 54px -22px rgba(59, 130, 246, 0.32), 0 0 28px -18px rgba(16, 185, 129, 0.22);
    --ui-panel-glow-soft: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 20px 34px -26px rgba(2, 6, 23, 0.64), 0 0 38px -24px rgba(16, 185, 129, 0.18);
    --ui-panel-glow-hover: 0 0 0 1px rgba(147, 197, 253, 0.32), 0 30px 50px -24px rgba(2, 6, 23, 0.82), 0 0 78px -18px rgba(96, 165, 250, 0.42), 0 0 34px -16px rgba(16, 185, 129, 0.26);
}

/*
 * Shared app-shell redesign:
 * flatter, full-width top bar + left-attached sidebar.
 */

body.page-classes .app-container,
body.page-jugadores .app-container,
body.page-teacher-home .app-container,
body.page-player-home .app-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-home .home-shell,
body.page-teacher-courses .teacher-courses-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-home,
body.page-teacher-home,
body.page-player-home,
body.page-teacher-courses,
body.page-classes,
body.page-jugadores,
body.page-dashboard {
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(1200px 720px at -10% -16%, var(--ui-page-glow-a), transparent 58%),
        radial-gradient(980px 620px at 112% -8%, var(--ui-page-glow-b), transparent 54%),
        radial-gradient(900px 520px at 50% 118%, color-mix(in srgb, var(--ui-page-glow-c) 78%, transparent), transparent 62%),
        linear-gradient(180deg, var(--ui-page-bg) 0%, var(--ui-page-bg-accent) 100%) !important;
}

body.page-home::before,
body.page-teacher-home::before,
body.page-player-home::before,
body.page-teacher-courses::before,
body.page-classes::before,
body.page-jugadores::before,
body.page-dashboard::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(680px 380px at 12% 12%, color-mix(in srgb, var(--ui-page-glow-a) 92%, transparent), transparent 62%),
        radial-gradient(560px 320px at 88% 22%, color-mix(in srgb, var(--ui-page-glow-b) 88%, transparent), transparent 60%),
        radial-gradient(720px 420px at 50% 100%, color-mix(in srgb, var(--ui-page-glow-c) 60%, transparent), transparent 72%) !important;
    opacity: 0.88 !important;
}

body.page-home::after,
body.page-teacher-home::after,
body.page-player-home::after,
body.page-teacher-courses::after,
body.page-classes::after,
body.page-jugadores::after,
body.page-dashboard::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.34 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 160px 160px, 160px 160px !important;
    mask-image: radial-gradient(circle at center, black 44%, transparent 96%) !important;
}

body.page-classes .app-container,
body.page-jugadores .app-container,
body.page-teacher-home .app-container,
body.page-player-home .app-container,
body.page-home .home-shell,
body.page-teacher-courses .teacher-courses-shell,
body.page-dashboard .sidebar,
body.page-dashboard .main-content {
    position: relative !important;
    z-index: 1 !important;
}

body.page-classes .header,
body.page-jugadores .header,
body.page-teacher-home .header,
body.page-player-home .header,
body.page-home .home-header,
body.page-teacher-courses .teacher-courses-header,
body.page-dashboard .main-header {
    min-height: var(--ui-shell-header-h) !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-shell-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--ui-panel-glow-soft) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    background: var(--ui-shell-surface) !important;
    color: var(--ui-shell-text) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1400 !important;
}

body.page-classes .header-left,
body.page-jugadores .header-left,
body.page-teacher-home .header-left,
body.page-player-home .header-left,
body.page-dashboard .main-header .header-left,
body.page-teacher-courses .header-copy,
body.page-home .brand-copy {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body.page-classes .header-right,
body.page-jugadores .header-right,
body.page-teacher-home .header-right,
body.page-player-home .header-right,
body.page-dashboard .header-right,
body.page-teacher-courses .header-actions,
body.page-home .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.page-home .brand-mark,
body.page-teacher-home .brand-mark,
body.page-classes .sidebar-brand-icon,
body.page-jugadores .sidebar-brand-icon {
    box-shadow: none !important;
}

body.page-teacher-courses .teacher-courses-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

body.page-classes .header-left h1,
body.page-jugadores .header-left h1,
body.page-teacher-home .header-left h1,
body.page-player-home .header-left h1,
body.page-home .home-header h1,
body.page-dashboard .main-header .header-left h2,
body.page-teacher-courses .teacher-courses-header h1 {
    margin: 0 !important;
    color: var(--ui-shell-text) !important;
    font-size: clamp(1.02rem, 1.2vw + 0.8rem, 1.28rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
}

body.page-classes .user-role,
body.page-jugadores .user-role,
body.page-home .brand-top,
body.page-dashboard .main-header #user-role {
    color: var(--ui-shell-text-soft) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

body.page-home .brand-sub,
body.page-teacher-home .subtitle,
body.page-player-home .subtitle,
body.page-dashboard .main-header #page-subtitle {
    color: var(--ui-shell-text-soft) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: 68ch !important;
}

body.page-classes .header-left h1 i,
body.page-jugadores .header-left h1 i,
body.page-teacher-home .header-left h1 i,
body.page-player-home .header-left h1 i,
body.page-teacher-courses .teacher-courses-header h1 i {
    opacity: 0.9 !important;
    font-size: 0.9em !important;
}

body.page-classes .header-right > *,
body.page-jugadores .header-right > *,
body.page-teacher-home .header-right > *,
body.page-player-home .header-right > *,
body.page-dashboard .header-right > *,
body.page-teacher-courses .header-actions > *,
body.page-home .header-actions > * {
    flex-shrink: 0 !important;
}

body.page-classes .main-content,
body.page-jugadores .main-content {
    display: grid !important;
    grid-template-columns: var(--ui-shell-sidebar-w) minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 0 !important;
    min-height: calc(100vh - var(--ui-shell-header-h));
}

body.page-classes .sidebar,
body.page-jugadores .sidebar {
    position: sticky !important;
    top: var(--ui-shell-header-h) !important;
    align-self: stretch !important;
    min-height: calc(100vh - var(--ui-shell-header-h)) !important;
    height: calc(100vh - var(--ui-shell-header-h)) !important;
    margin: 0 !important;
    padding: 18px 12px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-shell-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ui-shell-surface-strong) !important;
}

body.page-classes .sidebar-brand,
body.page-jugadores .sidebar-brand {
    padding: 0 8px 16px !important;
    margin-bottom: 4px !important;
}

body.page-classes .sidebar-nav,
body.page-jugadores .sidebar-nav {
    gap: 4px !important;
}

body.page-classes .nav-item,
body.page-jugadores .nav-item {
    border-radius: 12px !important;
}

body.page-classes .content-area,
body.page-jugadores .content-area {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 28px !important;
}

body.page-home .home-main,
body.page-teacher-home .content-area,
body.page-player-home .content-area,
body.page-teacher-courses .teacher-courses-main {
    width: min(1280px, calc(100% - 2rem)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 24px 0 32px !important;
}

body.page-dashboard .sidebar {
    border-radius: 0 !important;
    border-right-color: var(--ui-shell-border) !important;
    box-shadow: none !important;
}

body.page-dashboard .main-content {
    margin-top: 0 !important;
}

body.page-dashboard .content-area {
    padding: 24px 28px !important;
}

body.page-home .header-actions .btn,
body.page-teacher-home .header-right .btn,
body.page-player-home .header-right .btn,
body.page-teacher-courses .header-actions .btn,
body.page-teacher-courses .header-actions .nav-chip,
body.page-dashboard .header-right .btn,
body.page-classes .header-right .btn-dashboard,
body.page-jugadores .header-right .btn-logout,
.profile-menu-trigger {
    min-height: 46px !important;
    padding: 0.42rem 0.82rem 0.42rem 0.5rem !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

@media (min-width: 901px) {
    body.page-home .home-header {
        min-height: 82px !important;
        padding: 0 24px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 18px !important;
    }

    body.page-home .brand-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    body.page-home .brand-copy {
        display: grid !important;
        align-content: center !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    body.page-home .brand-mark {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #0f4c81, #0f8a72) !important;
        color: #f8fbff !important;
        box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.46) !important;
    }

    body.page-home .brand-top {
        margin: 0 !important;
        font-size: 0.63rem !important;
        letter-spacing: 0.16em !important;
        color: color-mix(in srgb, var(--ui-shell-text-soft) 88%, white 12%) !important;
    }

    body.page-home .home-header h1 {
        margin: 0 !important;
        font-size: 1.15rem !important;
        letter-spacing: -0.03em !important;
        line-height: 1.08 !important;
    }

    body.page-home .brand-sub {
        margin: 0 !important;
        font-size: 0.8rem !important;
        color: var(--ui-shell-text-soft) !important;
        line-height: 1.22 !important;
        max-width: 52ch !important;
    }

    body.page-home .header-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        padding: 6px 0 6px 18px !important;
        margin-left: auto !important;
        border-left: 1px solid color-mix(in srgb, var(--ui-shell-border) 82%, transparent) !important;
        align-self: stretch !important;
    }

    body.page-home .header-actions .btn,
    body.page-teacher-home .header-right .btn,
    body.page-player-home .header-right .btn,
    body.page-teacher-courses .header-actions .btn,
    body.page-teacher-courses .header-actions .nav-chip,
    body.page-dashboard .header-right .btn,
    body.page-classes .header-right .btn-dashboard,
    body.page-jugadores .header-right .btn-logout {
        min-height: 38px !important;
        padding: 0.52rem 0.84rem !important;
        border-radius: 11px !important;
        border: 1px solid color-mix(in srgb, var(--ui-shell-border) 82%, var(--ui-shell-text) 18%) !important;
        background: color-mix(in srgb, var(--ui-shell-surface) 90%, white 10%) !important;
        color: var(--ui-shell-text) !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.45) !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.01em !important;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
    }

    body.page-home .header-actions .btn:hover,
    body.page-teacher-home .header-right .btn:hover,
    body.page-player-home .header-right .btn:hover,
    body.page-teacher-courses .header-actions .btn:hover,
    body.page-teacher-courses .header-actions .nav-chip:hover,
    body.page-dashboard .header-right .btn:hover,
    body.page-classes .header-right .btn-dashboard:hover,
    body.page-jugadores .header-right .btn-logout:hover {
        transform: translateY(-1px) !important;
        border-color: color-mix(in srgb, var(--ui-shell-text) 24%, var(--ui-shell-border) 76%) !important;
        background: color-mix(in srgb, var(--ui-shell-surface) 82%, white 18%) !important;
        box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.52) !important;
    }

    body.page-home .header-actions .btn i,
    body.page-teacher-home .header-right .btn i,
    body.page-player-home .header-right .btn i,
    body.page-teacher-courses .header-actions .btn i,
    body.page-teacher-courses .header-actions .nav-chip i,
    body.page-dashboard .header-right .btn i,
    body.page-classes .header-right .btn-dashboard i,
    body.page-jugadores .header-right .btn-logout i {
        opacity: 0.82 !important;
    }

    body.page-home .header-actions .btn {
        gap: 7px !important;
    }

    body.page-home .header-actions .btn i {
        width: 18px !important;
        text-align: center !important;
    }

    body.page-home #home-portal-btn {
        background: linear-gradient(135deg, #0f4c81, #0f8a72) !important;
        border-color: transparent !important;
        color: #f8fbff !important;
        box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.48) !important;
    }

    body.page-home #home-portal-btn:hover {
        background: linear-gradient(135deg, #12588f, #12977d) !important;
        box-shadow: 0 20px 34px -24px rgba(15, 23, 42, 0.54) !important;
    }

    body.page-home .header-actions > .btn:not(#home-portal-btn) {
        background: color-mix(in srgb, var(--ui-shell-surface) 84%, white 16%) !important;
    }

    body.page-home #profile-menu-anchor {
        margin-left: 4px !important;
    }
}

body.page-home .hero-grid,
body.page-home .content-grid,
body.page-teacher-home .stats-grid,
body.page-teacher-home .grid-2,
body.page-player-home .stats-grid,
body.page-player-home .grid-2,
body.page-teacher-courses .stats-grid,
body.page-teacher-courses .content-grid,
body.page-classes .dashboard-summary-grid,
body.page-jugadores .summary-grid,
body.page-jugadores .history-metrics,
body.page-jugadores .compare-overview {
    gap: 16px !important;
}

body.page-home .hero-card,
body.page-home .content-grid > *,
body.page-teacher-home .panel,
body.page-player-home .panel,
body.page-teacher-courses .panel,
body.page-teacher-courses .stat-card,
body.page-teacher-home .stat-card,
body.page-player-home .stat-card,
body.page-classes .classes-hero,
body.page-classes .summary-card,
body.page-classes .alerts-panel,
body.page-jugadores .content-section,
body.page-jugadores .summary-card,
body.page-jugadores .compare-card,
body.page-jugadores .history-metric,
body.page-dashboard .revenue-card,
body.page-dashboard .stat-card,
body.page-dashboard .table-container,
body.page-dashboard .sql-ops-panel,
body.page-dashboard .sql-kpi-card,
body.page-dashboard .sql-list-card,
body.page-dashboard .players-insight-card,
body.page-dashboard .class-card {
    background: var(--ui-shell-surface-strong) !important;
    border: 1px solid var(--ui-shell-border) !important;
    box-shadow: var(--ui-panel-glow) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
}

body.page-home .hero-card::before,
body.page-home .content-grid > *::before,
body.page-teacher-home .panel::before,
body.page-player-home .panel::before,
body.page-teacher-courses .panel::before,
body.page-teacher-courses .stat-card::before,
body.page-teacher-courses .hero-panel::before,
body.page-classes .classes-hero::before,
body.page-classes .summary-card::before,
body.page-classes .alerts-panel::before,
body.page-jugadores .content-section::before,
body.page-jugadores .summary-card::before,
body.page-jugadores .compare-card::before,
body.page-jugadores .history-metric::before,
body.page-dashboard .revenue-card::before,
body.page-dashboard .stat-card::before,
body.page-dashboard .table-container::before,
body.page-dashboard .sql-ops-panel::before,
body.page-dashboard .sql-kpi-card::before,
body.page-dashboard .sql-list-card::before,
body.page-dashboard .players-insight-card::before,
body.page-dashboard .class-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(96, 165, 250, 0.14), transparent 56%),
        radial-gradient(90% 70% at 100% 100%, rgba(16, 185, 129, 0.1), transparent 52%) !important;
    opacity: 0.96 !important;
}

body.page-home .content-grid > *::after,
body.page-teacher-home .panel::after,
body.page-player-home .panel::after,
body.page-player-home .panel-photo::after,
body.page-teacher-courses .panel::after,
body.page-teacher-courses .stat-card::after,
body.page-teacher-courses .hero-panel::after,
body.page-classes .classes-hero::after,
body.page-classes .summary-card::after,
body.page-classes .alerts-panel::after,
body.page-dashboard .revenue-card::after,
body.page-dashboard .stat-card::after,
body.page-dashboard .table-container::after,
body.page-dashboard .sql-ops-panel::after,
body.page-dashboard .players-insight-card::after,
body.page-dashboard .class-card::after {
    display: none !important;
}

body.page-teacher-home .hero.panel,
body.page-player-home .hero.panel,
body.page-teacher-courses .hero-panel,
body.page-classes .classes-hero {
    background: var(--ui-shell-surface-strong) !important;
    padding: 22px !important;
}

body.page-home .panel,
body.page-teacher-home .panel,
body.page-player-home .panel,
body.page-teacher-courses .panel,
body.page-dashboard .table-container,
body.page-dashboard .sql-ops-panel {
    padding: 18px !important;
}

body.page-home .panel-head,
body.page-teacher-home .panel-head,
body.page-player-home .panel-head,
body.page-teacher-courses .panel-head,
body.page-dashboard .table-header,
body.page-dashboard .sql-ops-head {
    margin-bottom: 14px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

body.page-home .metric-card,
body.page-teacher-home .stat-card,
body.page-player-home .stat-card,
body.page-teacher-courses .stat-card,
body.page-dashboard .stat-card,
body.page-dashboard .sql-kpi-card {
    border-radius: 14px !important;
    box-shadow: var(--ui-panel-glow-soft) !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
}

body.page-home .metric-card,
body.page-teacher-home .stat-card,
body.page-player-home .stat-card,
body.page-teacher-courses .stat-card,
body.page-dashboard .stat-card {
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 92%, transparent) !important;
}

body.page-teacher-home .stat-card:hover,
body.page-player-home .stat-card:hover,
body.page-teacher-courses .stat-card:hover,
body.page-dashboard .stat-card:hover,
body.page-dashboard .class-card:hover,
body.page-home .panel:hover,
body.page-teacher-home .panel:hover,
body.page-player-home .panel:hover,
body.page-teacher-courses .panel:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--ui-panel-glow-hover) !important;
    border-color: color-mix(in srgb, var(--ui-shell-border) 74%, var(--ui-shell-text) 26%) !important;
}

body.page-home .hero-card:hover,
body.page-home .content-grid > *:hover,
body.page-classes .classes-hero:hover,
body.page-classes .summary-card:hover,
body.page-classes .alerts-panel:hover,
body.page-jugadores .content-section:hover,
body.page-jugadores .summary-card:hover,
body.page-jugadores .compare-card:hover,
body.page-jugadores .history-metric:hover,
body.page-dashboard .revenue-card:hover,
body.page-dashboard .table-container:hover,
body.page-dashboard .sql-ops-panel:hover,
body.page-dashboard .sql-kpi-card:hover,
body.page-dashboard .sql-list-card:hover,
body.page-dashboard .players-insight-card:hover {
    box-shadow: var(--ui-panel-glow-hover) !important;
    border-color: color-mix(in srgb, var(--ui-shell-border) 74%, var(--ui-shell-text) 26%) !important;
}

body.page-home .hero-tags span,
body.page-teacher-home .hero-tag,
body.page-teacher-home .hero-tags span,
body.page-player-home .hero-tag,
body.page-player-home .hero-tags span,
body.page-teacher-courses .hero-tags span,
body.page-classes .classes-hero-tag {
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.page-dashboard .table-container table,
body.page-dashboard .table-container .form-control,
body.page-dashboard .players-metric-select {
    box-shadow: none !important;
}

@media (max-width: 980px) {
    body.page-home .home-header,
    body.page-teacher-courses .teacher-courses-header,
    body.page-dashboard .main-header,
    body.page-classes .header,
    body.page-jugadores .header,
    body.page-teacher-home .header,
    body.page-player-home .header {
        padding: 12px 16px !important;
    }

    body.page-home .home-main,
    body.page-teacher-home .content-area,
    body.page-player-home .content-area,
    body.page-teacher-courses .teacher-courses-main,
    body.page-dashboard .content-area,
    body.page-classes .content-area,
    body.page-jugadores .content-area {
        width: calc(100% - 1.25rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 900px) {
    body.page-home .mobile-nav-toggle,
    body.page-teacher-home .mobile-nav-toggle,
    body.page-player-home .mobile-nav-toggle,
    body.page-teacher-courses .mobile-nav-toggle,
    body.page-classes .mobile-nav-toggle,
    body.page-jugadores .mobile-nav-toggle,
    body.page-dashboard .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.page-home .mobile-nav-toggle:hover,
    body.page-home .mobile-nav-toggle:focus-visible,
    body.page-teacher-home .mobile-nav-toggle:hover,
    body.page-teacher-home .mobile-nav-toggle:focus-visible,
    body.page-player-home .mobile-nav-toggle:hover,
    body.page-player-home .mobile-nav-toggle:focus-visible,
    body.page-teacher-courses .mobile-nav-toggle:hover,
    body.page-teacher-courses .mobile-nav-toggle:focus-visible,
    body.page-classes .mobile-nav-toggle:hover,
    body.page-classes .mobile-nav-toggle:focus-visible,
    body.page-jugadores .mobile-nav-toggle:hover,
    body.page-jugadores .mobile-nav-toggle:focus-visible,
    body.page-dashboard .mobile-menu-btn:hover,
    body.page-dashboard .mobile-menu-btn:focus-visible,
    body.page-dashboard .mobile-menu-btn.menu-open {
        border: 0 !important;
        background: color-mix(in srgb, var(--ui-shell-text) 10%, transparent) !important;
        box-shadow: none !important;
    }

    body.page-classes .main-content,
    body.page-jugadores .main-content {
        grid-template-columns: 1fr !important;
    }

    body.page-home .header-actions,
    body.page-teacher-home .header-right,
    body.page-player-home .header-right,
    body.page-teacher-courses .header-actions,
    body.page-classes .header-right,
    body.page-jugadores .header-right,
    body.page-dashboard .header-right {
        display: none !important;
    }

    body.page-classes .header-right,
    body.page-classes .user-role,
    body.page-jugadores .user-role,
    body.page-home .brand-top,
    body.page-home .brand-sub,
    body.page-home .brand-mark,
    body.page-teacher-home .subtitle,
    body.page-player-home .subtitle,
    body.page-teacher-courses .eyebrow,
    body.page-dashboard .main-header #page-subtitle,
    body.page-dashboard .main-header #user-role {
        display: none !important;
    }

    body.page-home .brand-wrap,
    body.page-teacher-home .header-left,
    body.page-player-home .header-left,
    body.page-teacher-courses .header-main,
    body.page-classes .header-left,
    body.page-jugadores .header-left,
    body.page-dashboard .main-header .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    body.page-home .home-header h1,
    body.page-teacher-home .header-left h1,
    body.page-player-home .header-left h1,
    body.page-teacher-courses .teacher-courses-header h1,
    body.page-classes .header-left h1,
    body.page-jugadores .header-left h1,
    body.page-dashboard .main-header .header-left h2 {
        margin: 0 !important;
        font-size: 1.02rem !important;
        line-height: 1.15 !important;
    }

    body.page-classes .header-left h1 i,
    body.page-jugadores .header-left h1 i,
    body.page-teacher-home .header-left h1 i,
    body.page-player-home .header-left h1 i,
    body.page-teacher-courses .teacher-courses-header h1 i {
        display: none !important;
    }

    body.page-classes .sidebar {
        position: fixed !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

@media (max-width: 1024px) {
    body.page-jugadores .sidebar {
        position: fixed !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

/*
 * Editorial typography refinement:
 * cleaner titles, calmer supporting copy, and stronger data labels.
 */

body.page-classes .content-section h2,
body.page-jugadores .section-head h2,
body.page-teacher-courses .panel h3,
body.page-teacher-courses .detail-hero h2,
body.page-teacher-courses .course-card h4,
body.page-teacher-courses .certificate-card h4,
body.page-teacher-courses .topic-card h4,
body.page-teacher-courses .result-card h4,
body.page-teacher-courses .program-card strong {
    letter-spacing: -0.02em !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
}

body.page-classes .content-section h2 i,
body.page-jugadores .section-head h2 i,
body.page-teacher-courses .panel h3 i,
body.page-teacher-courses .detail-hero h2 i {
    opacity: 0.78 !important;
    font-size: 0.9em !important;
}

body.page-classes .section-subtitle,
body.page-jugadores .summary-card .label,
body.page-jugadores .history-metric .label,
body.page-jugadores .history-item .date,
body.page-teacher-courses .panel-kicker,
body.page-teacher-courses .detail-progress-label,
body.page-teacher-courses .detail-metric-label,
body.page-teacher-courses .course-meta,
body.page-teacher-courses .certificate-meta,
body.page-teacher-courses .topic-meta,
body.page-teacher-courses .result-meta,
body.page-teacher-courses .detail-meta {
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

body.page-classes .filters input,
body.page-classes .filters select,
body.page-classes .content-filters select,
body.page-jugadores select,
body.page-jugadores input,
body.page-teacher-courses input,
body.page-teacher-courses select,
body.page-teacher-courses textarea {
    font-size: 0.9rem !important;
}

/*
 * Micro-detail consistency:
 * pills, empty states, loading boxes, helper copy, and alerts.
 */

body.page-home .hero-kicker,
body.page-teacher-home .hero-kicker,
body.page-player-home .hero-kicker,
body.page-teacher-courses .hero-kicker,
body.page-classes .classes-hero-eyebrow,
body.page-dashboard .revenue-label,
body.page-dashboard .sql-ops-updated {
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.69rem !important;
    font-weight: 800 !important;
}

body.page-teacher-home .badge,
body.page-player-home .badge,
body.page-classes .badge,
body.page-classes .content-badge,
body.page-classes .chip,
body.page-jugadores .score-pill,
body.page-teacher-courses .status-pill,
body.page-teacher-courses .topic-badge,
body.page-teacher-courses .course-badge,
body.page-teacher-courses .detail-chip,
body.page-dashboard .badge,
body.page-dashboard .status-badge,
body.page-dashboard .futbol-badge,
body.page-dashboard .score-pill,
body.page-dashboard .players-trend-pill {
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

body.page-classes .badge,
body.page-classes .content-badge,
body.page-classes .chip,
body.page-teacher-home .badge,
body.page-player-home .badge,
body.page-dashboard .badge,
body.page-dashboard .futbol-badge,
body.page-dashboard .players-trend-pill,
body.page-dashboard .score-pill {
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
}

body.page-classes .empty-state,
body.page-classes .content-empty,
body.page-classes .content-loading,
body.page-jugadores .empty,
body.page-teacher-courses .empty-state,
body.page-teacher-courses .loading-box,
body.page-dashboard .empty-state,
body.page-dashboard .sql-empty,
body.page-dashboard .notification,
body.page-teacher-home .empty,
body.page-player-home .empty {
    border-radius: 16px !important;
    box-shadow: none !important;
}

body.page-classes .empty-state,
body.page-classes .content-empty,
body.page-classes .content-loading,
body.page-jugadores .empty,
body.page-teacher-courses .empty-state,
body.page-teacher-courses .loading-box,
body.page-dashboard .empty-state,
body.page-dashboard .sql-empty,
body.page-teacher-home .empty,
body.page-player-home .empty {
    border: 1px dashed color-mix(in srgb, var(--ui-shell-border) 92%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 92%, transparent) !important;
    color: var(--ui-shell-text-soft) !important;
}

body.page-classes .empty-state h3,
body.page-classes .content-empty p,
body.page-classes .content-loading p,
body.page-jugadores .empty,
body.page-teacher-courses .empty-state p,
body.page-teacher-courses .loading-box,
body.page-dashboard .empty-state,
body.page-dashboard .sql-empty,
body.page-teacher-home .empty,
body.page-player-home .empty {
    line-height: 1.55 !important;
    font-size: 0.9rem !important;
}

body.page-classes .empty-state i,
body.page-classes .content-empty i,
body.page-classes .content-loading i,
body.page-teacher-courses .loading-box i,
body.page-dashboard .empty-state i {
    box-shadow: none !important;
    border-radius: 14px !important;
}

body.page-dashboard .notification {
    border-radius: 16px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

body.page-home .brand-sub,
body.page-teacher-home .subtitle,
body.page-player-home .subtitle,
body.page-dashboard .main-header #page-subtitle,
body.page-home .hero-copy,
body.page-teacher-home .hero-copy,
body.page-player-home .hero-copy,
body.page-teacher-courses .hero-text {
    text-wrap: balance;
}

/* ─── Text selection ─── */
::selection {
    background: rgba(11, 79, 140, 0.18);
    color: inherit;
}

html[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.24);
}

/* ─── Scrollbar refinement (Chromium / WebKit) ─── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 35, 58, 0.16);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 35, 58, 0.28);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.36);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 35, 58, 0.16) transparent;
}

html[data-theme="dark"] * {
    scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}

/* ─── Subtle card hover feedback ─── */
body.page-home .hero-card:hover,
body.page-home .content-grid > *:hover,
body.page-teacher-home .panel:hover,
body.page-player-home .panel:hover,
body.page-teacher-courses .panel:hover,
body.page-teacher-courses .stat-card:hover,
body.page-teacher-home .stat-card:hover,
body.page-player-home .stat-card:hover,
body.page-classes .summary-card:hover,
body.page-jugadores .summary-card:hover,
body.page-jugadores .content-section:hover,
body.page-dashboard .stat-card:hover,
body.page-dashboard .class-card:hover,
body.page-dashboard .sql-kpi-card:hover {
    border-color: rgba(11, 79, 140, 0.22) !important;
}

html[data-theme="dark"] body.page-home .hero-card:hover,
html[data-theme="dark"] body.page-home .content-grid > *:hover,
html[data-theme="dark"] body.page-teacher-home .panel:hover,
html[data-theme="dark"] body.page-player-home .panel:hover,
html[data-theme="dark"] body.page-teacher-courses .panel:hover,
html[data-theme="dark"] body.page-teacher-courses .stat-card:hover,
html[data-theme="dark"] body.page-teacher-home .stat-card:hover,
html[data-theme="dark"] body.page-player-home .stat-card:hover,
html[data-theme="dark"] body.page-classes .summary-card:hover,
html[data-theme="dark"] body.page-jugadores .summary-card:hover,
html[data-theme="dark"] body.page-jugadores .content-section:hover,
html[data-theme="dark"] body.page-dashboard .stat-card:hover,
html[data-theme="dark"] body.page-dashboard .class-card:hover,
html[data-theme="dark"] body.page-dashboard .sql-kpi-card:hover {
    border-color: rgba(96, 165, 250, 0.28) !important;
}

/* ─── Gentle page entrance ─── */
@keyframes ui-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.page-home .home-main,
body.page-teacher-home .content-area,
body.page-player-home .content-area,
body.page-teacher-courses .teacher-courses-main,
body.page-classes .content-area,
body.page-jugadores .content-area,
body.page-dashboard .content-area {
    animation: ui-fade-in 0.35s ease-out both;
}

/* ─── Professional quality pass (non-invasive) ─── */
body.page-home .hero-kicker,
body.page-classes .classes-hero-eyebrow,
body.page-player-home .hero-kicker,
body.page-teacher-home .hero-kicker {
    letter-spacing: 0.1em !important;
    font-weight: 800 !important;
}

body.page-home h2,
body.page-home h3,
body.page-classes h2,
body.page-classes h3,
body.page-player-home h2,
body.page-player-home h3,
body.page-teacher-home h2,
body.page-teacher-home h3 {
    letter-spacing: -0.02em !important;
    line-height: 1.16 !important;
}

body.page-home .metric-card strong,
body.page-player-home .stat-card h3,
body.page-teacher-home .stat-card h3,
body.page-classes .summary-value,
body.page-classes .stat-value {
    font-variant-numeric: tabular-nums;
}

body.page-home .hero-card,
body.page-home .panel,
body.page-classes .content-section,
body.page-classes .class-card,
body.page-player-home .panel,
body.page-player-home .stat-card,
body.page-teacher-home .panel,
body.page-teacher-home .workflow-card,
body.page-teacher-home .stat-card {
    transition: border-color 0.24s ease, box-shadow 0.24s ease !important;
}

body.page-home .hero-card:hover,
body.page-home .panel:hover,
body.page-classes .content-section:hover,
body.page-classes .class-card:hover,
body.page-player-home .panel:hover,
body.page-player-home .stat-card:hover,
body.page-teacher-home .panel:hover,
body.page-teacher-home .workflow-card:hover,
body.page-teacher-home .stat-card:hover {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 14px 34px -14px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="dark"] body.page-home .hero-card:hover,
html[data-theme="dark"] body.page-home .panel:hover,
html[data-theme="dark"] body.page-classes .content-section:hover,
html[data-theme="dark"] body.page-classes .class-card:hover,
html[data-theme="dark"] body.page-player-home .panel:hover,
html[data-theme="dark"] body.page-player-home .stat-card:hover,
html[data-theme="dark"] body.page-teacher-home .panel:hover,
html[data-theme="dark"] body.page-teacher-home .workflow-card:hover,
html[data-theme="dark"] body.page-teacher-home .stat-card:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 14px 34px -14px rgba(0, 0, 0, 0.36) !important;
}

/*
 * Premium finish layer:
 * strengthens hierarchy, depth and consistency across the public pages
 * without changing the application structure.
 */

:root {
    --ui-premium-border: rgba(15, 35, 58, 0.12);
    --ui-premium-border-strong: rgba(37, 99, 235, 0.18);
    --ui-premium-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 250, 255, 0.95) 100%);
    --ui-premium-surface-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(242, 247, 253, 0.9) 100%);
    --ui-premium-shadow: 0 22px 50px -30px rgba(15, 23, 42, 0.34), 0 12px 24px -20px rgba(37, 99, 235, 0.18);
    --ui-premium-shadow-strong: 0 26px 64px -32px rgba(15, 23, 42, 0.42), 0 18px 36px -26px rgba(13, 139, 117, 0.2);
    --ui-premium-shadow-hover: 0 28px 72px -34px rgba(15, 23, 42, 0.46), 0 18px 40px -24px rgba(37, 99, 235, 0.24);
    --ui-premium-ring: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    --ui-premium-highlight: linear-gradient(90deg, rgba(247, 195, 85, 0.75), rgba(59, 130, 246, 0.72), rgba(16, 185, 129, 0.72));
}

html[data-theme="dark"] {
    --ui-premium-border: rgba(148, 163, 184, 0.18);
    --ui-premium-border-strong: rgba(96, 165, 250, 0.28);
    --ui-premium-surface: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
    --ui-premium-surface-soft: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.82) 100%);
    --ui-premium-shadow: 0 26px 58px -34px rgba(2, 6, 23, 0.82), 0 14px 26px -24px rgba(59, 130, 246, 0.24);
    --ui-premium-shadow-strong: 0 30px 72px -36px rgba(2, 6, 23, 0.9), 0 18px 42px -24px rgba(16, 185, 129, 0.2);
    --ui-premium-shadow-hover: 0 34px 82px -36px rgba(2, 6, 23, 0.94), 0 20px 46px -24px rgba(96, 165, 250, 0.28);
    --ui-premium-ring: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.page-home .hero-card,
body.page-home .panel,
body.page-home .metric-card,
body.page-teacher-home .panel,
body.page-teacher-home .workflow-card,
body.page-teacher-home .stat-card,
body.page-player-home .panel,
body.page-player-home .stat-card,
body.page-player-home .hero-highlight-card,
body.page-player-home .hero-side,
body.page-classes .content-section,
body.page-classes .class-card,
body.page-classes .summary-card,
body.page-classes .alerts-panel,
body.page-classes .management-table,
body.page-classes .table-wrapper,
body.page-teacher-courses .panel,
body.page-teacher-courses .stat-card,
body.page-teacher-courses .detail-metric-card,
body.page-dashboard .revenue-card,
body.page-dashboard .stat-card,
body.page-dashboard .class-card,
body.page-dashboard .table-container,
body.page-dashboard .sql-ops-panel,
body.page-dashboard .sql-kpi-card,
body.page-dashboard .sql-list-card,
body.page-dashboard .players-insight-card {
    background: var(--ui-premium-surface) !important;
    border: 1px solid var(--ui-premium-border) !important;
    box-shadow: var(--ui-premium-shadow), var(--ui-premium-ring) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}

body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel,
body.page-teacher-courses .detail-hero,
body.page-dashboard .main-header {
    border: 1px solid var(--ui-premium-border-strong) !important;
    box-shadow: var(--ui-premium-shadow-strong), var(--ui-premium-ring) !important;
}

body.page-home .hero-card:hover,
body.page-home .panel:hover,
body.page-home .metric-card:hover,
body.page-teacher-home .hero:hover,
body.page-teacher-home .panel:hover,
body.page-teacher-home .workflow-card:hover,
body.page-teacher-home .stat-card:hover,
body.page-player-home .hero:hover,
body.page-player-home .panel:hover,
body.page-player-home .stat-card:hover,
body.page-player-home .hero-highlight-card:hover,
body.page-player-home .hero-side:hover,
body.page-classes .classes-hero:hover,
body.page-classes .content-section:hover,
body.page-classes .class-card:hover,
body.page-classes .summary-card:hover,
body.page-classes .alerts-panel:hover,
body.page-teacher-courses .hero-panel:hover,
body.page-teacher-courses .panel:hover,
body.page-teacher-courses .stat-card:hover,
body.page-teacher-courses .detail-metric-card:hover,
body.page-dashboard .revenue-card:hover,
body.page-dashboard .stat-card:hover,
body.page-dashboard .class-card:hover,
body.page-dashboard .table-container:hover,
body.page-dashboard .sql-ops-panel:hover,
body.page-dashboard .sql-kpi-card:hover,
body.page-dashboard .sql-list-card:hover,
body.page-dashboard .players-insight-card:hover {
    box-shadow: var(--ui-premium-shadow-hover), var(--ui-premium-ring) !important;
}

body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel,
body.page-teacher-courses .detail-hero {
    position: relative !important;
    overflow: hidden !important;
}

body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 28px 70px -34px rgba(15, 23, 42, 0.42),
        0 18px 34px -26px rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="dark"] body.page-home .hero-card,
html[data-theme="dark"] body.page-teacher-home .hero,
html[data-theme="dark"] body.page-player-home .hero,
html[data-theme="dark"] body.page-classes .classes-hero,
html[data-theme="dark"] body.page-teacher-courses .hero-panel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 32px 78px -34px rgba(2, 6, 23, 0.9),
        0 18px 38px -22px rgba(59, 130, 246, 0.22) !important;
}

body.page-home .hero-card,
body.page-home .panel,
body.page-home .metric-card,
body.page-teacher-home .hero,
body.page-teacher-home .panel,
body.page-teacher-home .workflow-card,
body.page-teacher-home .stat-card,
body.page-player-home .hero,
body.page-player-home .panel,
body.page-player-home .stat-card,
body.page-player-home .hero-highlight-card,
body.page-player-home .hero-side,
body.page-classes .classes-hero,
body.page-classes .content-section,
body.page-classes .class-card,
body.page-classes .summary-card,
body.page-classes .alerts-panel,
body.page-teacher-courses .hero-panel,
body.page-teacher-courses .panel,
body.page-teacher-courses .stat-card,
body.page-teacher-courses .detail-hero,
body.page-teacher-courses .detail-metric-card,
body.page-dashboard .revenue-card,
body.page-dashboard .stat-card,
body.page-dashboard .class-card,
body.page-dashboard .table-container,
body.page-dashboard .sql-ops-panel,
body.page-dashboard .sql-kpi-card,
body.page-dashboard .sql-list-card,
body.page-dashboard .players-insight-card {
    border-radius: 24px !important;
}

body.page-home .metric-card strong,
body.page-teacher-home .stat-card h3,
body.page-player-home .stat-card h3,
body.page-classes .summary-value,
body.page-classes .stat-value,
body.page-teacher-courses .stat-card strong,
body.page-teacher-courses .detail-metric-card strong,
body.page-dashboard .stat-card .stat-number,
body.page-dashboard .revenue-value,
body.page-dashboard .sql-kpi-value {
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
    color: var(--ui-shell-text) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-theme="dark"] body.page-home .metric-card strong,
html[data-theme="dark"] body.page-teacher-home .stat-card h3,
html[data-theme="dark"] body.page-player-home .stat-card h3,
html[data-theme="dark"] body.page-classes .summary-value,
html[data-theme="dark"] body.page-classes .stat-value,
html[data-theme="dark"] body.page-teacher-courses .stat-card strong,
html[data-theme="dark"] body.page-teacher-courses .detail-metric-card strong,
html[data-theme="dark"] body.page-dashboard .stat-card .stat-number,
html[data-theme="dark"] body.page-dashboard .revenue-value,
html[data-theme="dark"] body.page-dashboard .sql-kpi-value {
    text-shadow: none;
}

body.page-home .metric-card,
body.page-teacher-home .stat-card,
body.page-player-home .stat-card,
body.page-teacher-courses .stat-card,
body.page-dashboard .stat-card,
body.page-dashboard .sql-kpi-card {
    min-height: 148px !important;
}

body.page-home .panel-head,
body.page-teacher-home .panel-head,
body.page-player-home .panel-head,
body.page-teacher-courses .panel-head,
body.page-dashboard .table-header,
body.page-dashboard .sql-ops-head {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
}

body.page-home .hero-kicker,
body.page-teacher-home .hero-kicker,
body.page-player-home .hero-kicker,
body.page-classes .classes-hero-eyebrow,
body.page-teacher-courses .hero-kicker,
body.page-teacher-courses .panel-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 88%, rgba(255, 255, 255, 0.74)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

body.page-home .btn,
body.page-teacher-home .btn,
body.page-player-home .btn,
body.page-classes .btn-primary,
body.page-classes .btn-secondary,
body.page-classes .chip,
body.page-teacher-courses .btn,
body.page-dashboard .header-right .btn,
body.page-dashboard .header-right button,
body.page-login .btn,
body.page-login .login-btn,
body.page-login .login-btn-secondary,
body.page-student-register .btn-link,
body.page-student-register .submit-btn,
body.page-alianza .btn {
    border-radius: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease !important;
}

body.page-home .btn:hover,
body.page-teacher-home .btn:hover,
body.page-player-home .btn:hover,
body.page-classes .btn-primary:hover,
body.page-classes .btn-secondary:hover,
body.page-classes .chip:hover,
body.page-teacher-courses .btn:hover,
body.page-dashboard .header-right .btn:hover,
body.page-dashboard .header-right button:hover,
body.page-login .btn:hover,
body.page-login .login-btn:hover,
body.page-login .login-btn-secondary:hover,
body.page-student-register .btn-link:hover,
body.page-student-register .submit-btn:hover,
body.page-alianza .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 34px -22px rgba(15, 23, 42, 0.36) !important;
}

body.page-home .btn-primary,
body.page-teacher-home .btn-primary,
body.page-player-home .btn-primary,
body.page-classes .btn-primary,
body.page-teacher-courses .btn-primary,
body.page-login .login-btn,
body.page-student-register .submit-btn,
body.page-alianza .btn-primary {
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    background-image: linear-gradient(135deg, #0b4f8c 0%, #1c6bb1 45%, #0d8b75 100%) !important;
    box-shadow: 0 20px 38px -26px rgba(11, 79, 140, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.page-home .btn-secondary,
body.page-teacher-home .btn-secondary,
body.page-player-home .btn-secondary,
body.page-classes .btn-secondary,
body.page-classes .chip,
body.page-teacher-courses .btn-secondary,
body.page-dashboard .header-right .btn,
body.page-dashboard .header-right button,
body.page-login .btn-outline,
body.page-login .login-btn-secondary,
body.page-student-register .btn-link,
body.page-alianza .btn-outline {
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 88%, rgba(255, 255, 255, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

body.page-dashboard .table-container table,
body.page-classes table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.page-dashboard .table-container th,
body.page-dashboard .table-container td,
body.page-classes table th,
body.page-classes table td {
    border-bottom: 1px solid color-mix(in srgb, var(--ui-shell-border) 82%, transparent) !important;
}

body.page-dashboard .table-container th,
body.page-classes table th {
    color: var(--ui-shell-text) !important;
    font-weight: 800 !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 92%, transparent) !important;
}

body.page-login {
    background:
        radial-gradient(980px 540px at 10% 8%, rgba(79, 134, 255, 0.3), transparent 58%),
        radial-gradient(860px 500px at 92% 14%, rgba(26, 176, 126, 0.18), transparent 56%),
        radial-gradient(720px 420px at 50% 118%, rgba(247, 195, 85, 0.12), transparent 64%),
        linear-gradient(180deg, #061121 0%, #08172d 52%, #0b1d34 100%) !important;
}

body.page-login .page-shell {
    width: min(1440px, 100%) !important;
    gap: 32px !important;
    align-items: stretch !important;
}

body.page-login .promo-panel,
body.page-login .login-panel {
    position: relative !important;
    isolation: isolate !important;
    border-radius: 32px !important;
    border: 1px solid rgba(162, 188, 238, 0.18) !important;
    box-shadow:
        0 32px 80px -36px rgba(2, 8, 25, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
}

body.page-login .promo-panel::before,
body.page-login .login-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.03) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body.page-login .promo-panel > *,
body.page-login .login-panel > * {
    position: relative !important;
    z-index: 1 !important;
}

body.page-login .promo-panel {
    padding: 44px 42px !important;
}

body.page-login .login-panel {
    padding: 32px !important;
}

body.page-login .login-card {
    padding: 38px 34px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(168, 190, 232, 0.2) !important;
    background:
        radial-gradient(ellipse at 30% -10%, rgba(79, 134, 255, 0.08), transparent 55%),
        radial-gradient(ellipse at 80% 110%, rgba(26, 176, 126, 0.05), transparent 50%),
        rgba(9, 19, 40, 0.65) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.page-login .login-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
    letter-spacing: -0.04em !important;
    background: linear-gradient(135deg, #ffffff 0%, #c8deff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.page-login .login-head p,
body.page-login .promo-content p,
body.page-login .copyright {
    color: #bfd0f0 !important;
}

body.page-login .promo-list li,
body.page-login .section-divider {
    border-radius: 16px !important;
    border: 1px solid rgba(168, 190, 232, 0.16) !important;
    background: rgba(8, 16, 36, 0.55) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.page-login .promo-list li i {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(26, 176, 126, 0.12) !important;
    border: 1px solid rgba(26, 176, 126, 0.2) !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
}

body.page-login .input-with-icon {
    border-radius: 16px !important;
    border: 1px solid rgba(168, 190, 232, 0.18) !important;
    background: rgba(7, 16, 34, 0.72) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.page-login .input-with-icon input {
    min-height: 52px !important;
    background: transparent !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

body.page-login .login-btn,
body.page-login .login-btn-secondary,
body.page-login .btn-outline {
    min-height: 52px !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    gap: 10px !important;
    border-radius: 14px !important;
}

body.page-login .login-btn {
    background-image: linear-gradient(135deg, #0d5ca0 0%, #1e80cc 35%, #10a37f 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 18px 36px -16px rgba(13, 92, 160, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.page-login .login-btn-secondary {
    border: 1px solid rgba(168, 190, 232, 0.22) !important;
    background: rgba(12, 26, 52, 0.75) !important;
    color: #dbe8ff !important;
    box-shadow:
        0 10px 24px -14px rgba(2, 8, 25, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    font-weight: 700 !important;
}

body.page-login .login-btn-secondary:hover {
    border-color: rgba(168, 190, 232, 0.36) !important;
    background: rgba(16, 34, 66, 0.85) !important;
    box-shadow:
        0 14px 30px -14px rgba(2, 8, 25, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.page-login .btn-outline {
    border: 1px solid rgba(168, 190, 232, 0.22) !important;
    background: rgba(10, 22, 46, 0.6) !important;
    color: #ccdcf5 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    font-weight: 700 !important;
}

body.page-login .btn-outline:hover {
    border-color: rgba(168, 190, 232, 0.36) !important;
    background: rgba(14, 28, 56, 0.78) !important;
}

body.page-login .brand-pill {
    box-shadow:
        0 14px 32px -22px rgba(79, 134, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(168, 190, 232, 0.22) !important;
    background: rgba(8, 16, 36, 0.72) !important;
    backdrop-filter: blur(12px) !important;
}

/* ── Login visual refinements ── */

@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes brandDotPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(247, 195, 85, 0.2); }
    50%      { box-shadow: 0 0 0 10px rgba(247, 195, 85, 0.08); }
}

body.page-login .promo-panel {
    animation: loginFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

body.page-login .login-panel {
    animation: loginFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both !important;
}

body.page-login .brand-dot {
    animation: brandDotPulse 3s ease-in-out infinite !important;
}

body.page-login .promo-list li {
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
}

body.page-login .promo-list li:hover {
    background: rgba(8, 18, 40, 0.82) !important;
    border-color: rgba(168, 190, 232, 0.38) !important;
    transform: translateX(4px) !important;
}

body.page-login .promo-list li i {
    transition: transform 0.22s ease !important;
}

body.page-login .promo-list li:hover i {
    transform: scale(1.15) !important;
}

body.page-login .input-with-icon {
    transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease !important;
}

body.page-login .input-with-icon:focus-within {
    border-color: rgba(16, 163, 127, 0.48) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(16, 163, 127, 0.1),
        0 0 20px -6px rgba(16, 163, 127, 0.15) !important;
    background: rgba(7, 16, 34, 0.82) !important;
}

body.page-login .input-with-icon i {
    transition: color 0.24s ease !important;
}

body.page-login .input-with-icon:focus-within i {
    color: #10a37f !important;
}

body.page-login .login-btn {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease !important;
}

body.page-login .login-btn::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 50%) !important;
    opacity: 0 !important;
    transition: opacity 0.24s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.page-login .login-btn:hover::after {
    opacity: 1 !important;
}

body.page-login .login-btn:hover {
    box-shadow:
        0 22px 44px -18px rgba(13, 92, 160, 0.55),
        0 0 28px -8px rgba(16, 163, 127, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.page-login .login-btn:active {
    transform: translateY(1px) scale(0.99) !important;
}

body.page-login .login-card {
    border-color: rgba(168, 190, 232, 0.28) !important;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(79, 134, 255, 0.06), transparent 60%),
        rgba(9, 19, 40, 0.68) !important;
}

body.page-login .login-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16, 163, 127, 0.22) !important;
    background: rgba(16, 163, 127, 0.08) !important;
    color: #6ee7b7 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body.page-login .login-badge i {
    font-size: 0.68rem !important;
}

body.page-login .section-divider {
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-top-color: rgba(154, 178, 232, 0.12) !important;
    padding: 22px 0 !important;
}

body.page-login .section-divider .login-btn-secondary {
    margin-bottom: 8px !important;
}

body.page-login .login-footer {
    border-top-style: solid !important;
    border-top-color: rgba(154, 178, 232, 0.12) !important;
}

body.page-login .login-footer a {
    transition: color 0.2s ease !important;
}

body.page-login .login-footer a:hover {
    color: #10a37f !important;
    text-decoration: none !important;
}

body.page-login .copyright {
    opacity: 0.7 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.68rem !important;
    margin-top: 16px !important;
}

body.page-login .promo-proof-card {
    transition: border-color 0.22s ease, transform 0.22s ease !important;
}

body.page-login .promo-proof-card:hover {
    border-color: rgba(168, 190, 232, 0.34) !important;
    transform: translateY(-2px) !important;
}

/* ── Login light-theme refinements ── */

:root[data-theme="light"] body.page-login .promo-list li:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(151, 168, 190, 0.48) !important;
}

:root[data-theme="light"] body.page-login .input-with-icon:focus-within {
    border-color: rgba(31, 95, 154, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 0 0 3px rgba(31, 95, 154, 0.1), 0 0 18px -8px rgba(31, 95, 154, 0.12) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body.page-login .input-with-icon:focus-within i {
    color: #0b4f8c !important;
}

:root[data-theme="light"] body.page-login .login-footer a:hover {
    color: #0b4f8c !important;
}

:root[data-theme="light"] body.page-login .login-badge {
    border-color: rgba(16, 163, 127, 0.24) !important;
    background: rgba(16, 163, 127, 0.06) !important;
    color: #047857 !important;
}

:root[data-theme="light"] body.page-login .login-head h2 {
    background: linear-gradient(135deg, #0f2b47 0%, #1a4a6e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

:root[data-theme="light"] body.page-login .promo-list li i {
    background: rgba(16, 163, 127, 0.08) !important;
    border-color: rgba(16, 163, 127, 0.16) !important;
}

:root[data-theme="light"] body.page-login .promo-proof-card:hover {
    border-color: rgba(151, 168, 190, 0.44) !important;
}

:root[data-theme="light"] body.page-login .login-btn-secondary {
    border-color: rgba(151, 168, 190, 0.32) !important;
    background: linear-gradient(135deg, #f0f6ff, #e8f0fb) !important;
    color: #1a3a5c !important;
    box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

:root[data-theme="light"] body.page-login .login-btn-secondary:hover {
    border-color: rgba(151, 168, 190, 0.48) !important;
    background: linear-gradient(135deg, #e6effa, #dce8f6) !important;
}

:root[data-theme="light"] body.page-login .btn-outline {
    border-color: rgba(151, 168, 190, 0.32) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #1a3a5c !important;
    box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="light"] body.page-login .btn-outline:hover {
    border-color: rgba(31, 95, 154, 0.36) !important;
    background: rgba(240, 246, 255, 0.94) !important;
}

body.page-student-register .page-shell {
    width: min(1280px, 100% - 32px) !important;
    gap: 24px !important;
}

body.page-student-register .info-panel,
body.page-student-register .form-panel {
    position: relative !important;
    border-radius: 30px !important;
    border: 1px solid var(--ui-premium-border-strong) !important;
    background: var(--ui-premium-surface) !important;
    box-shadow: var(--ui-premium-shadow-strong), var(--ui-premium-ring) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}

body.page-student-register .info-panel {
    overflow: hidden !important;
}

body.page-student-register .form-head h2,
body.page-student-register .info-panel h1 {
    letter-spacing: -0.04em !important;
    line-height: 1.06 !important;
}

body.page-student-register .section-title,
body.page-student-register .checkbox-row {
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 90%, rgba(255, 255, 255, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

body.page-student-register .input-with-icon {
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 94%, rgba(255, 255, 255, 0.76)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
}

body.page-student-register .input-with-icon input,
body.page-student-register .input-with-icon select,
body.page-student-register .input-with-icon textarea {
    min-height: 54px !important;
    background: transparent !important;
}

body.page-student-register .input-with-icon textarea {
    min-height: 132px !important;
}

body.page-student-register .info-list li,
body.page-student-register .alert {
    border-radius: 18px !important;
}

body.page-alianza .topbar {
    position: sticky !important;
    top: 14px !important;
    z-index: 70 !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(168, 190, 232, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(8, 19, 39, 0.72) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    box-shadow: 0 22px 54px -36px rgba(2, 8, 25, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.page-alianza .hero-panel,
body.page-alianza .stat-card,
body.page-alianza .section,
body.page-alianza .card,
body.page-alianza .benefit-card,
body.page-alianza .partner,
body.page-alianza .quote,
body.page-alianza .intro-note,
body.page-alianza .intro-photo,
body.page-alianza .alliance-portrait,
body.page-alianza .alliance-insight,
body.page-alianza .final-cta {
    border: 1px solid rgba(168, 190, 232, 0.18) !important;
    box-shadow: 0 24px 56px -34px rgba(2, 8, 25, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
}

body.page-alianza .hero-visual-main,
body.page-alianza .hero-visual-card {
    border: 1px solid rgba(168, 190, 232, 0.16) !important;
    box-shadow: 0 26px 52px -30px rgba(2, 8, 25, 0.58) !important;
}

body.page-alianza .hero-copy h1,
body.page-alianza h2,
body.page-alianza h3 {
    letter-spacing: -0.04em !important;
    line-height: 1.04 !important;
}

body.page-alianza .nav a {
    opacity: 0.92 !important;
}

body.page-alianza .nav a:hover {
    transform: translateY(-1px) !important;
}

@media (max-width: 980px) {
    body.page-login .page-shell,
    body.page-student-register .page-shell {
        grid-template-columns: 1fr !important;
    }

    body.page-login .promo-panel,
    body.page-login .login-panel,
    body.page-student-register .info-panel,
    body.page-student-register .form-panel {
        border-radius: 24px !important;
    }

    body.page-alianza .topbar {
        border-radius: 24px !important;
    }
}

/*
 * Brand and motion layer:
 * adds a stronger signature, meaningful motion and richer interactive polish.
 */

:root {
    --ui-brand-navy: #0a2b57;
    --ui-brand-blue: #1c6bb1;
    --ui-brand-teal: #0d8b75;
    --ui-brand-gold: #f7c355;
    --ui-brand-ink: #10243b;
}

@keyframes ui-card-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ui-float-soft {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -6px, 0);
    }
}

@keyframes ui-sheen-pass {
    0% {
        transform: translateX(-170%) skewX(-24deg);
        opacity: 0;
    }
    18% {
        opacity: 0.18;
    }
    45% {
        opacity: 0.36;
    }
    100% {
        transform: translateX(260%) skewX(-24deg);
        opacity: 0;
    }
}

@keyframes ui-pan-slow {
    0%, 100% {
        background-position: 50% 50%;
    }
    50% {
        background-position: 54% 46%;
    }
}

@keyframes ui-orb-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(247, 195, 85, 0.22);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(247, 195, 85, 0);
        transform: scale(1.04);
    }
}

body.page-home .brand-mark,
body.page-home .sidebar-brand-icon,
body.page-teacher-home .sidebar-brand-icon,
body.page-player-home .sidebar-brand-icon,
body.page-classes .sidebar-brand-icon,
body.page-jugadores .sidebar-brand-icon,
body.page-teacher-courses .sidebar-brand-icon,
body.page-dashboard .logo-icon {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28), transparent 30%),
        linear-gradient(145deg, var(--ui-brand-navy) 0%, var(--ui-brand-blue) 54%, var(--ui-brand-teal) 100%) !important;
    box-shadow:
        0 16px 34px -24px rgba(10, 43, 87, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.page-home .brand-mark::before,
body.page-home .sidebar-brand-icon::before,
body.page-teacher-home .sidebar-brand-icon::before,
body.page-player-home .sidebar-brand-icon::before,
body.page-classes .sidebar-brand-icon::before,
body.page-jugadores .sidebar-brand-icon::before,
body.page-teacher-courses .sidebar-brand-icon::before,
body.page-dashboard .logo-icon::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -8px -12px auto !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 30% 30%, #fff4ca 0%, var(--ui-brand-gold) 58%, #cb931d 100%) !important;
    opacity: 0.92 !important;
    animation: ui-orb-pulse 3.8s ease-in-out infinite !important;
}

body.page-home .brand-pill,
body.page-login .brand-pill,
body.page-student-register .brand-pill,
body.page-alianza .brand {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 18px 36px -26px rgba(15, 23, 42, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.page-home .brand-pill::after,
body.page-login .brand-pill::after,
body.page-student-register .brand-pill::after,
body.page-alianza .brand::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.14) 42%, transparent 58%) !important;
    animation: ui-sheen-pass 7.2s linear infinite !important;
    pointer-events: none !important;
}

body.page-home .brand-dot,
body.page-login .brand-dot,
body.page-student-register .brand-dot,
body.page-alianza .brand-dot {
    animation: ui-orb-pulse 3.4s ease-in-out infinite !important;
}

body.page-home .btn,
body.page-teacher-home .btn,
body.page-player-home .btn,
body.page-classes .btn-primary,
body.page-classes .btn-secondary,
body.page-classes .chip,
body.page-teacher-courses .btn,
body.page-dashboard .header-right .btn,
body.page-dashboard .header-right button,
body.page-login .btn,
body.page-login .login-btn,
body.page-login .login-btn-secondary,
body.page-student-register .btn-link,
body.page-student-register .submit-btn,
body.page-alianza .btn {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

body.page-home .btn > *,
body.page-teacher-home .btn > *,
body.page-player-home .btn > *,
body.page-classes .btn-primary > *,
body.page-classes .btn-secondary > *,
body.page-teacher-courses .btn > *,
body.page-dashboard .header-right .btn > *,
body.page-dashboard .header-right button > *,
body.page-login .btn > *,
body.page-login .login-btn > *,
body.page-login .login-btn-secondary > *,
body.page-student-register .btn-link > *,
body.page-student-register .submit-btn > *,
body.page-alianza .btn > * {
    position: relative !important;
    z-index: 1 !important;
}

body.page-home .btn::after,
body.page-teacher-home .btn::after,
body.page-player-home .btn::after,
body.page-classes .btn-primary::after,
body.page-classes .btn-secondary::after,
body.page-classes .chip::after,
body.page-teacher-courses .btn::after,
body.page-dashboard .header-right .btn::after,
body.page-dashboard .header-right button::after,
body.page-login .btn::after,
body.page-login .login-btn::after,
body.page-login .login-btn-secondary::after,
body.page-student-register .btn-link::after,
body.page-student-register .submit-btn::after,
body.page-alianza .btn::after {
    content: "" !important;
    position: absolute !important;
    top: -30% !important;
    bottom: -30% !important;
    left: -80% !important;
    width: 42% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent) !important;
    transform: skewX(-24deg) !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
    pointer-events: none !important;
}

body.page-home .btn:hover::after,
body.page-teacher-home .btn:hover::after,
body.page-player-home .btn:hover::after,
body.page-classes .btn-primary:hover::after,
body.page-classes .btn-secondary:hover::after,
body.page-classes .chip:hover::after,
body.page-teacher-courses .btn:hover::after,
body.page-dashboard .header-right .btn:hover::after,
body.page-dashboard .header-right button:hover::after,
body.page-login .btn:hover::after,
body.page-login .login-btn:hover::after,
body.page-login .login-btn-secondary:hover::after,
body.page-student-register .btn-link:hover::after,
body.page-student-register .submit-btn:hover::after,
body.page-alianza .btn:hover::after {
    animation: ui-sheen-pass 0.9s ease !important;
}

body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel,
body.page-login .promo-panel,
body.page-login .login-panel,
body.page-student-register .info-panel,
body.page-student-register .form-panel,
body.page-alianza .hero-panel,
body.page-alianza .section,
body.page-alianza .stat-card {
    background-size: 100% 100%, cover !important;
}

body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel,
body.page-alianza .hero-visual-main,
body.page-alianza .hero-visual-card,
body.page-home .hero-photo-tile,
body.page-teacher-home .hero-photo-card,
body.page-player-home .panel-photo::before,
body.page-classes .classes-hero-main-photo,
body.page-classes .hero-film-card {
    animation: ui-float-soft 8s ease-in-out infinite !important;
    will-change: transform !important;
}

body.page-alianza .hero-visual-main,
body.page-alianza .hero-visual-card,
body.page-home .hero-photo-tile,
body.page-teacher-home .hero-photo-card,
body.page-classes .classes-hero-main-photo,
body.page-classes .hero-film-card {
    animation-name: ui-float-soft, ui-pan-slow !important;
    animation-duration: 8s, 16s !important;
    animation-timing-function: ease-in-out, ease-in-out !important;
    animation-iteration-count: infinite, infinite !important;
}

body.page-home .content-grid > *,
body.page-home .metric-grid > *,
body.page-teacher-home .workflow-grid > *,
body.page-teacher-home .stats-grid > *,
body.page-player-home .stats-grid > *,
body.page-player-home .grid-2 > *,
body.page-classes .summary-grid > *,
body.page-classes .class-grid > *,
body.page-classes .classes-hero-filmstrip > *,
body.page-teacher-courses .stats-grid > *,
body.page-teacher-courses .panel-grid > *,
body.page-dashboard .stats-grid > *,
body.page-dashboard .charts-grid > *,
body.page-login .promo-list > *,
body.page-alianza .stats > *,
body.page-alianza .grid-2 > * {
    animation: ui-card-enter 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

body.page-home .content-grid > *:nth-child(1),
body.page-home .metric-grid > *:nth-child(1),
body.page-teacher-home .workflow-grid > *:nth-child(1),
body.page-teacher-home .stats-grid > *:nth-child(1),
body.page-player-home .stats-grid > *:nth-child(1),
body.page-player-home .grid-2 > *:nth-child(1),
body.page-classes .summary-grid > *:nth-child(1),
body.page-classes .class-grid > *:nth-child(1),
body.page-classes .classes-hero-filmstrip > *:nth-child(1),
body.page-teacher-courses .stats-grid > *:nth-child(1),
body.page-login .promo-list > *:nth-child(1),
body.page-alianza .stats > *:nth-child(1),
body.page-alianza .grid-2 > *:nth-child(1) {
    animation-delay: 0.06s !important;
}

body.page-home .content-grid > *:nth-child(2),
body.page-home .metric-grid > *:nth-child(2),
body.page-teacher-home .workflow-grid > *:nth-child(2),
body.page-teacher-home .stats-grid > *:nth-child(2),
body.page-player-home .stats-grid > *:nth-child(2),
body.page-player-home .grid-2 > *:nth-child(2),
body.page-classes .summary-grid > *:nth-child(2),
body.page-classes .class-grid > *:nth-child(2),
body.page-classes .classes-hero-filmstrip > *:nth-child(2),
body.page-teacher-courses .stats-grid > *:nth-child(2),
body.page-login .promo-list > *:nth-child(2),
body.page-alianza .stats > *:nth-child(2),
body.page-alianza .grid-2 > *:nth-child(2) {
    animation-delay: 0.12s !important;
}

body.page-home .content-grid > *:nth-child(3),
body.page-home .metric-grid > *:nth-child(3),
body.page-teacher-home .workflow-grid > *:nth-child(3),
body.page-teacher-home .stats-grid > *:nth-child(3),
body.page-player-home .stats-grid > *:nth-child(3),
body.page-classes .summary-grid > *:nth-child(3),
body.page-classes .class-grid > *:nth-child(3),
body.page-classes .classes-hero-filmstrip > *:nth-child(3),
body.page-teacher-courses .stats-grid > *:nth-child(3),
body.page-login .promo-list > *:nth-child(3),
body.page-alianza .stats > *:nth-child(3) {
    animation-delay: 0.18s !important;
}

body.page-home .content-grid > *:nth-child(4),
body.page-home .metric-grid > *:nth-child(4),
body.page-teacher-home .workflow-grid > *:nth-child(4),
body.page-teacher-home .stats-grid > *:nth-child(4),
body.page-player-home .stats-grid > *:nth-child(4),
body.page-classes .summary-grid > *:nth-child(4),
body.page-classes .class-grid > *:nth-child(4),
body.page-teacher-courses .stats-grid > *:nth-child(4),
body.page-alianza .stats > *:nth-child(4) {
    animation-delay: 0.24s !important;
}

body.page-home .content-grid > *:nth-child(5),
body.page-teacher-home .workflow-grid > *:nth-child(5),
body.page-teacher-home .stats-grid > *:nth-child(5),
body.page-player-home .stats-grid > *:nth-child(5) {
    animation-delay: 0.3s !important;
}

body.page-home .hero-card h2,
body.page-teacher-home .hero h2,
body.page-player-home .hero h2,
body.page-classes .classes-hero h2,
body.page-teacher-courses .hero-panel h2,
body.page-login .promo-content h1,
body.page-login .login-head h2,
body.page-student-register .info-panel h1,
body.page-student-register .form-head h2,
body.page-alianza .hero-copy h1 {
    text-wrap: balance !important;
}

body.page-login .promo-content,
body.page-student-register .info-panel,
body.page-alianza .hero-copy,
body.page-home .hero-card,
body.page-teacher-home .hero,
body.page-player-home .hero,
body.page-classes .classes-hero {
    position: relative !important;
}

body.page-login .promo-content::after,
body.page-student-register .info-panel::after,
body.page-alianza .hero-copy::after,
body.page-home .hero-card::after,
body.page-teacher-home .hero::after,
body.page-player-home .hero::after,
body.page-classes .classes-hero::after {
    content: "RFA" !important;
    position: absolute !important;
    right: 18px !important;
    bottom: 14px !important;
    font-family: "Sora", "Manrope", sans-serif !important;
    font-size: clamp(2.6rem, 5vw, 5rem) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.08em !important;
    color: rgba(255, 255, 255, 0.08) !important;
    pointer-events: none !important;
    user-select: none !important;
}

html[data-theme="light"] body.page-home .hero-card::after,
html[data-theme="light"] body.page-teacher-home .hero::after,
html[data-theme="light"] body.page-player-home .hero::after,
html[data-theme="light"] body.page-classes .classes-hero::after,
html[data-theme="light"] body.page-student-register .info-panel::after {
    color: rgba(10, 43, 87, 0.06) !important;
}

body.page-dashboard .logo-text h2,
body.page-home .brand-copy h1,
body.page-teacher-home .header-left h1,
body.page-player-home .header-left h1,
body.page-classes .header-left h1,
body.page-teacher-courses .teacher-courses-header h1 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

html[data-theme="dark"] body.page-dashboard .logo-text h2,
html[data-theme="dark"] body.page-home .brand-copy h1,
html[data-theme="dark"] body.page-teacher-home .header-left h1,
html[data-theme="dark"] body.page-player-home .header-left h1,
html[data-theme="dark"] body.page-classes .header-left h1,
html[data-theme="dark"] body.page-teacher-courses .teacher-courses-header h1 {
    text-shadow: none !important;
}

body.page-login .promo-proof {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.page-login .promo-proof-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 18px 18px 20px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(168, 190, 232, 0.14) !important;
    background:
        linear-gradient(180deg, rgba(8, 16, 36, 0.78) 0%, rgba(9, 20, 42, 0.68) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 32px -22px rgba(2, 8, 25, 0.65) !important;
}

body.page-login .promo-proof-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(16, 163, 127, 0.7), rgba(30, 128, 204, 0.6), rgba(247, 195, 85, 0.5)) !important;
    opacity: 1 !important;
}

body.page-login .promo-proof-label {
    display: inline-flex !important;
    margin-bottom: 10px !important;
    color: rgba(191, 208, 240, 0.88) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

body.page-login .promo-proof-card strong {
    display: block !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
}

body.page-login .promo-proof-card p {
    margin: 0 !important;
    color: #bfd0f0 !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
}

body.page-alianza .hero-proof-strip,
body.page-dashboard .dashboard-executive-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.page-alianza .hero-proof-strip {
    margin-top: 18px !important;
}

body.page-alianza .hero-proof-strip span,
body.page-dashboard .dashboard-executive-strip span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--ui-shell-border) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 88%, rgba(255, 255, 255, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

body.page-alianza .hero-proof-strip i,
body.page-dashboard .dashboard-executive-strip i {
    color: var(--ui-brand-gold) !important;
}

body.page-dashboard .dashboard-executive-strip {
    margin-top: 10px !important;
}

body.page-dashboard .dashboard-executive-strip span {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.01em !important;
}

body.page-dashboard .main-header .header-left {
    gap: 6px !important;
}

body.page-dashboard .revenue-card {
    position: relative !important;
    overflow: hidden !important;
}

body.page-dashboard .revenue-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(400px 180px at 12% 12%, rgba(247, 195, 85, 0.14), transparent 65%),
        radial-gradient(340px 180px at 88% 24%, rgba(16, 185, 129, 0.12), transparent 60%) !important;
    pointer-events: none !important;
}

body.page-dashboard .revenue-card > * {
    position: relative !important;
    z-index: 1 !important;
}

body.page-dashboard .stats-grid .stat-card,
body.page-dashboard .sql-kpi-card {
    position: relative !important;
    overflow: hidden !important;
}

body.page-dashboard .stats-grid .stat-card::after,
body.page-dashboard .sql-kpi-card::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 18px 0 18px !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0 !important;
    background: linear-gradient(90deg, rgba(247, 195, 85, 0.86), rgba(59, 130, 246, 0.72), rgba(16, 185, 129, 0.78)) !important;
    opacity: 0.84 !important;
}

/*
 * Directional art layer:
 * elite academy for login/landing and executive sports control for dashboard.
 */

:root {
    --ui-photo-elite-a: url("/assets/WhatsApp%20Image%202026-03-19%20at%209.02.01%20PM%20%281%29.jpeg");
    --ui-photo-elite-b: url("/assets/WhatsApp%20Image%202026-03-19%20at%209.02.00%20PM%20%281%29.jpeg");
    --ui-photo-elite-c: url("/assets/WhatsApp%20Image%202026-03-19%20at%209.02.18%20PM%20%283%29.jpeg");
}

body.page-login .promo-panel {
    background:
        linear-gradient(135deg, rgba(5, 11, 24, 0.94), rgba(10, 27, 56, 0.88)),
        radial-gradient(circle at 18% 18%, rgba(247, 195, 85, 0.16), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(16, 185, 129, 0.16), transparent 34%),
        var(--ui-photo-elite-a) center / cover no-repeat !important;
}

body.page-login .promo-panel::after {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: inherit !important;
    border: 0 !important;
    background:
        linear-gradient(180deg, rgba(4, 10, 23, 0.16), rgba(4, 10, 23, 0.58)),
        linear-gradient(90deg, rgba(247, 195, 85, 0.12), transparent 28%, transparent 72%, rgba(16, 185, 129, 0.1)) !important;
    opacity: 1 !important;
}

body.page-login .promo-content h1,
body.page-login .login-head h2,
body.page-alianza .hero-copy h1,
body.page-alianza .section h2,
body.page-alianza .hero-panel h3 {
    font-family: "Barlow Condensed", "Sora", "Manrope", sans-serif !important;
    text-transform: uppercase !important;
}

body.page-login .promo-content h1 {
    max-width: 10ch !important;
    font-size: clamp(3rem, 5.2vw, 4.8rem) !important;
    line-height: 0.9 !important;
    letter-spacing: 0.01em !important;
}

body.page-login .promo-content p {
    max-width: 38ch !important;
}

body.page-login .login-card {
    position: relative !important;
}

body.page-login .login-card::before {
    display: none !important;
}

body.page-alianza .hero-copy {
    position: relative !important;
    padding-left: 20px !important;
}

body.page-alianza .hero-copy::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px auto 22px 0 !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: var(--ui-premium-highlight) !important;
    box-shadow: 0 0 24px rgba(247, 195, 85, 0.26) !important;
}

body.page-alianza .hero-copy h1 {
    font-size: clamp(3.2rem, 6vw, 5.4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.01em !important;
    max-width: 11ch !important;
}

body.page-alianza .section h2 {
    font-size: clamp(2.1rem, 3.8vw, 3.4rem) !important;
    letter-spacing: 0.02em !important;
}

body.page-alianza .stats {
    margin-top: -42px !important;
    position: relative !important;
    z-index: 4 !important;
}

body.page-alianza .stat-card {
    min-height: 172px !important;
}

body.page-dashboard .sidebar {
    background:
        radial-gradient(420px 220px at 8% 8%, rgba(247, 195, 85, 0.08), transparent 65%),
        linear-gradient(180deg, rgba(6, 14, 31, 0.98) 0%, rgba(10, 24, 48, 0.96) 100%) !important;
}

body.page-dashboard .nav-section {
    margin: 0 12px 14px !important;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.page-dashboard .nav-title {
    margin-bottom: 10px !important;
    color: var(--ui-brand-gold) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
}

body.page-dashboard .nav-link {
    margin: 0 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
}

body.page-dashboard .nav-link:hover {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

body.page-dashboard .nav-link.active {
    background: linear-gradient(135deg, rgba(11, 79, 140, 0.96), rgba(13, 139, 117, 0.88)) !important;
    box-shadow: 0 18px 30px -22px rgba(11, 79, 140, 0.9) !important;
}

body.page-dashboard .revenue-card {
    background:
        linear-gradient(135deg, rgba(6, 14, 31, 0.9), rgba(10, 39, 67, 0.8)),
        var(--ui-photo-elite-c) center / cover no-repeat !important;
    border: 1px solid rgba(247, 195, 85, 0.18) !important;
}

body.page-dashboard .revenue-card h3,
body.page-dashboard .revenue-amount,
body.page-dashboard .futbol-badge {
    color: #f8fbff !important;
}

body.page-dashboard .revenue-label {
    color: rgba(226, 232, 240, 0.84) !important;
}

body.page-dashboard .stat-card .stat-info p,
body.page-dashboard .sql-kpi-card p {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ui-shell-text-soft) !important;
}

body.page-dashboard .table-container {
    overflow: hidden !important;
}

body.page-dashboard .table-container thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    backdrop-filter: blur(12px) !important;
}

/*
 * Compact login tuning:
 * reduces the horizontal stretch and improves desktop proportions.
 */

body.page-login .page-shell {
    width: min(1440px, calc(100% - 48px)) !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr) !important;
    gap: 32px !important;
    align-items: center !important;
}

body.page-login .promo-panel {
    min-height: auto !important;
    padding: 30px 30px 24px !important;
    gap: 16px !important;
    justify-content: flex-start !important;
}

body.page-login .promo-content h1 {
    max-width: 9ch !important;
    font-size: clamp(2.5rem, 4.2vw, 3.8rem) !important;
}

body.page-login .promo-content p {
    max-width: 36ch !important;
    font-size: 0.94rem !important;
}

body.page-login .promo-list {
    gap: 10px !important;
}

body.page-login .promo-list li {
    padding: 11px 13px !important;
    font-size: 0.87rem !important;
}

body.page-login .promo-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-login .promo-proof-card {
    padding: 14px 14px 16px !important;
}

body.page-login .promo-proof-card strong {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
}

body.page-login .promo-proof-card p {
    font-size: 0.79rem !important;
}

body.page-login .login-panel {
    width: 100% !important;
    justify-self: end !important;
    padding: 24px !important;
}

body.page-login .login-card {
    padding: 28px 26px 24px !important;
    border-radius: 22px !important;
}

body.page-login .login-head {
    margin-bottom: 16px !important;
}

body.page-login .login-head h2 {
    font-size: clamp(1.75rem, 2.1vw, 2.15rem) !important;
}

body.page-login .form-group {
    margin-bottom: 14px !important;
}

body.page-login .input-with-icon input {
    min-height: 44px !important;
}

body.page-login .login-btn,
body.page-login .login-btn-secondary,
body.page-login .btn-outline {
    min-height: 46px !important;
}

body.page-login .section-divider {
    margin-top: 16px !important;
    padding-top: 14px !important;
}

body.page-login .section-divider h3 {
    font-size: 0.98rem !important;
}

body.page-login .section-divider {
    display: grid !important;
    gap: 10px !important;
}

body.page-login .section-divider > a.login-btn-secondary:last-of-type,
body.page-login .section-divider > a.login-btn-secondary:nth-of-type(2) {
    margin-top: 0 !important;
}

body.page-login .section-divider .login-btn-secondary {
    min-height: 44px !important;
}

@media (min-width: 981px) {
    body.page-login .section-divider {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    body.page-login .section-divider h3,
    body.page-login .section-divider p {
        grid-column: 1 / -1 !important;
    }
}

body.page-login .login-footer,
body.page-login .copyright {
    margin-top: 14px !important;
}

@media (max-width: 980px) {
    body.page-login .page-shell {
        width: min(720px, calc(100% - 24px)) !important;
        grid-template-columns: 1fr !important;
    }

    body.page-login .promo-proof {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body.page-alianza .hero-proof-strip,
    body.page-dashboard .dashboard-executive-strip {
        gap: 8px !important;
    }

    body.page-alianza .hero-proof-strip span,
    body.page-dashboard .dashboard-executive-strip span {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.page-alianza .hero-copy {
        padding-left: 0 !important;
    }

    body.page-alianza .hero-copy::before {
        display: none !important;
    }

    body.page-alianza .stats {
        margin-top: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-home .brand-dot,
    body.page-login .brand-dot,
    body.page-student-register .brand-dot,
    body.page-alianza .brand-dot,
    body.page-home .brand-pill::after,
    body.page-login .brand-pill::after,
    body.page-student-register .brand-pill::after,
    body.page-alianza .brand::after,
    body.page-home .hero-card,
    body.page-teacher-home .hero,
    body.page-player-home .hero,
    body.page-classes .classes-hero,
    body.page-teacher-courses .hero-panel,
    body.page-alianza .hero-visual-main,
    body.page-alianza .hero-visual-card,
    body.page-home .hero-photo-tile,
    body.page-teacher-home .hero-photo-card,
    body.page-player-home .panel-photo::before,
    body.page-classes .classes-hero-main-photo,
    body.page-classes .hero-film-card,
    body.page-home .content-grid > *,
    body.page-home .metric-grid > *,
    body.page-teacher-home .workflow-grid > *,
    body.page-teacher-home .stats-grid > *,
    body.page-player-home .stats-grid > *,
    body.page-player-home .grid-2 > *,
    body.page-classes .summary-grid > *,
    body.page-classes .class-grid > *,
    body.page-classes .classes-hero-filmstrip > *,
    body.page-teacher-courses .stats-grid > *,
    body.page-dashboard .stats-grid > *,
    body.page-dashboard .charts-grid > *,
    body.page-login .promo-list > *,
    body.page-alianza .stats > *,
    body.page-alianza .grid-2 > * {
        animation: none !important;
    }

    body.page-home .btn::after,
    body.page-teacher-home .btn::after,
    body.page-player-home .btn::after,
    body.page-classes .btn-primary::after,
    body.page-classes .btn-secondary::after,
    body.page-classes .chip::after,
    body.page-teacher-courses .btn::after,
    body.page-dashboard .header-right .btn::after,
    body.page-dashboard .header-right button::after,
    body.page-login .btn::after,
    body.page-login .login-btn::after,
    body.page-login .login-btn-secondary::after,
    body.page-student-register .btn-link::after,
    body.page-student-register .submit-btn::after,
    body.page-alianza .btn::after {
        display: none !important;
    }
}

/* ============================================================
   SUBTLE DESIGN REFINEMENTS — v2
   Non-drastic polish: micro-interactions, spacing, consistency.
   ============================================================ */

/* ─── 1. Smoother global transitions ─── */
a,
button,
.btn,
.nav-item,
.stat-card,
.panel,
.class-card,
.workflow-card,
.summary-card,
.hero-card,
.metric-card,
input,
select,
textarea {
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* ─── 2. Better input focus transition ─── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease !important;
}

input[type="text"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
    border-color: color-mix(in srgb, var(--ui-shell-border) 60%, var(--ui-shell-text) 40%) !important;
}

/* ─── 3. Sidebar nav item polish ─── */
.nav-item,
.sidebar-nav a {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

.nav-item:active,
.sidebar-nav a:active {
    transform: scale(0.97) !important;
}

/* ─── 4. Button press feedback ─── */
.btn:active,
button.btn:active,
a.btn:active,
.login-btn:active,
.submit-btn:active {
    transform: translateY(0px) scale(0.97) !important;
    transition-duration: 0.08s !important;
}

/* ─── 5. Better table row transitions ─── */
tr {
    transition: background-color 0.15s ease !important;
}

tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--ui-shell-surface-strong) 94%, var(--ui-page-bg-accent) 6%) !important;
}

html[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--ui-shell-surface-strong) 92%, var(--ui-page-bg-accent) 8%) !important;
}

/* ─── 6. Stat card number polish ─── */
.stat-card h3,
.stat-number,
.summary-value,
.stat-value,
.sql-kpi-value,
.revenue-value,
.metric-card strong {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}

/* ─── 7. Better empty state styling ─── */
.empty-state,
.content-empty,
.content-loading,
.empty,
.loading-box,
.sql-empty {
    text-align: center !important;
    padding: 40px 24px !important;
}

.empty-state i,
.content-empty i,
.content-loading i {
    font-size: 2rem !important;
    opacity: 0.4 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* ─── 8. Tooltip-style badge hover ─── */
.badge,
.chip,
.hero-tag,
.content-badge,
.status-pill,
.score-pill,
.date-pill,
.futbol-badge {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.badge:hover,
.chip:hover,
.hero-tag:hover,
.status-pill:hover,
.score-pill:hover {
    transform: translateY(-1px) !important;
}

/* ─── 9. Staggered card entrance animations ─── */
@keyframes ui-card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-grid > *,
.content-grid > *,
.grid-2 > *,
.workflow-grid > *,
.metric-grid > *,
.hero-grid > *,
.hero-highlight-grid > *,
.quick-grid > *,
.summary-grid > *,
.dashboard-summary-grid > *,
.class-grid > * {
    animation: ui-card-enter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}

.stats-grid > *:nth-child(1),
.content-grid > *:nth-child(1),
.grid-2 > *:nth-child(1),
.workflow-grid > *:nth-child(1),
.summary-grid > *:nth-child(1),
.class-grid > *:nth-child(1) { animation-delay: 0.04s !important; }
.stats-grid > *:nth-child(2),
.content-grid > *:nth-child(2),
.grid-2 > *:nth-child(2),
.workflow-grid > *:nth-child(2),
.summary-grid > *:nth-child(2),
.class-grid > *:nth-child(2) { animation-delay: 0.08s !important; }
.stats-grid > *:nth-child(3),
.content-grid > *:nth-child(3),
.grid-2 > *:nth-child(3),
.workflow-grid > *:nth-child(3),
.summary-grid > *:nth-child(3),
.class-grid > *:nth-child(3) { animation-delay: 0.12s !important; }
.stats-grid > *:nth-child(4),
.content-grid > *:nth-child(4),
.grid-2 > *:nth-child(4),
.workflow-grid > *:nth-child(4),
.summary-grid > *:nth-child(4),
.class-grid > *:nth-child(4) { animation-delay: 0.16s !important; }
.stats-grid > *:nth-child(n+5),
.content-grid > *:nth-child(n+5),
.grid-2 > *:nth-child(n+5),
.workflow-grid > *:nth-child(n+5),
.summary-grid > *:nth-child(n+5),
.class-grid > *:nth-child(n+5) { animation-delay: 0.2s !important; }

/* ─── 10. Smoother modal/dropdown appearance ─── */
.pm-dropdown,
.home-mobile-menu,
.teacher-mobile-menu,
.profile-menu-dropdown {
    animation: ui-dropdown-enter 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
}

@keyframes ui-dropdown-enter {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── 11. Subtle divider refinement ─── */
hr {
    border: none !important;
    border-top: 1px solid color-mix(in srgb, var(--ui-shell-border) 70%, transparent) !important;
    margin: 12px 0 !important;
}

/* ─── 12. Better alert styling ─── */
.alert,
.notification {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.5 !important;
}

.alert.success,
.alert.error,
.alert.warning {
    border-left: 3px solid currentColor !important;
    border-radius: 4px 12px 12px 4px !important;
}

/* ─── 13. Header subtle separator line ─── */
.header,
.home-header,
.teacher-courses-header,
.main-header {
    border-bottom-color: color-mix(in srgb, var(--ui-shell-border) 80%, transparent) !important;
}

/* ─── 14. Better icon alignment in buttons ─── */
.btn i,
button i,
.nav-item i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ─── 15. Smooth image loading ─── */
img {
    transition: opacity 0.3s ease !important;
}

img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src]:not([src=""]) {
    opacity: 1;
}

/* ─── 16. Better panel header alignment ─── */
.panel-head h3,
.panel-head h2,
.section-head h2,
.content-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ─── 17. Smoother sidebar scroll ─── */
.sidebar {
    scroll-behavior: smooth !important;
    overscroll-behavior: contain !important;
}

/* ─── 18. Better hero section spacing ─── */
.hero h2,
.classes-hero-copy h2,
.hero-card h2 {
    text-wrap: balance !important;
}

.hero p,
.hero-copy,
.classes-hero-copy p {
    text-wrap: pretty !important;
}

/* ─── 19. Subtle active nav indicator ─── */
.nav-item.active {
    position: relative !important;
}

.nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 60% !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--m-primary, #0b4f8c) !important;
    opacity: 0.8 !important;
}

/* ─── 20. Selection color consistency ─── */
::selection {
    background: rgba(11, 79, 140, 0.16) !important;
    color: inherit !important;
}

html[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.22) !important;
}

/* ─── Respect user preferences ─── */
@media (prefers-reduced-motion: reduce) {
    .stats-grid > *,
    .content-grid > *,
    .grid-2 > *,
    .workflow-grid > *,
    .metric-grid > *,
    .hero-grid > *,
    .hero-highlight-grid > *,
    .quick-grid > *,
    .summary-grid > *,
    .dashboard-summary-grid > *,
    .class-grid > *,
    .pm-dropdown,
    .home-mobile-menu,
    .teacher-mobile-menu,
    .profile-menu-dropdown {
        animation: none !important;
    }

    .nav-item:active,
    .sidebar-nav a:active,
    .btn:active,
    button.btn:active {
        transform: none !important;
    }
}

/* ============================================================
   DESIGN REFINEMENTS v3 — Depth, hierarchy & micro-details
   ============================================================ */

/* ─── 21. Refined header glassmorphism ─── */
body.page-home .home-header,
body.page-classes .header,
body.page-jugadores .header,
body.page-teacher-home .header,
body.page-player-home .header,
body.page-teacher-courses .teacher-courses-header,
body.page-dashboard .main-header {
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    background: color-mix(in srgb, var(--ui-shell-surface) 88%, transparent) !important;
}

html[data-theme="dark"] body.page-home .home-header,
html[data-theme="dark"] body.page-classes .header,
html[data-theme="dark"] body.page-jugadores .header,
html[data-theme="dark"] body.page-teacher-home .header,
html[data-theme="dark"] body.page-player-home .header,
html[data-theme="dark"] body.page-teacher-courses .teacher-courses-header,
html[data-theme="dark"] body.page-dashboard .main-header {
    background: color-mix(in srgb, var(--ui-shell-surface) 82%, transparent) !important;
}

/* ─── 22. Gradient accent strip on hero sections ─── */
body.page-home .hero-card.spotlight,
body.page-teacher-home .hero.panel,
body.page-player-home .hero.panel,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel {
    position: relative !important;
}

body.page-home .hero-card.spotlight::after,
body.page-teacher-home .hero.panel::after,
body.page-player-home .hero.panel::after,
body.page-classes .classes-hero::after,
body.page-teacher-courses .hero-panel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0b4f8c, #0d8b75, #c98b18) !important;
    border-radius: 0 0 24px 24px !important;
    opacity: 0.65 !important;
    z-index: 2 !important;
}

html[data-theme="dark"] body.page-home .hero-card.spotlight::after,
html[data-theme="dark"] body.page-teacher-home .hero.panel::after,
html[data-theme="dark"] body.page-player-home .hero.panel::after,
html[data-theme="dark"] body.page-classes .classes-hero::after,
html[data-theme="dark"] body.page-teacher-courses .hero-panel::after {
    opacity: 0.45 !important;
}

/* ─── 23. Stat card icon refined backgrounds ─── */
.stat-icon,
.stat-card .icon,
.stat-card > i,
.summary-card .icon {
    background: linear-gradient(135deg, rgba(11, 79, 140, 0.12), rgba(13, 139, 117, 0.1)) !important;
    color: var(--m-primary, #0b4f8c) !important;
    border: 1px solid rgba(11, 79, 140, 0.1) !important;
}

html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .stat-card .icon,
html[data-theme="dark"] .stat-card > i,
html[data-theme="dark"] .summary-card .icon {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(55, 198, 163, 0.12)) !important;
    color: #5a9fd4 !important;
    border-color: rgba(96, 165, 250, 0.15) !important;
}

/* ─── 24. Better profile menu polish ─── */
.profile-menu-trigger {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.profile-menu-dropdown {
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

.profile-menu-dropdown .profile-menu-user {
    border-bottom: 1px solid color-mix(in srgb, var(--ui-shell-border) 60%, transparent) !important;
    padding-bottom: 12px !important;
    margin-bottom: 8px !important;
}

.profile-menu-dropdown button,
.profile-menu-dropdown a {
    border-radius: 10px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* ─── 25. Improved sidebar brand area ─── */
.sidebar-brand-icon,
.brand-mark {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.sidebar-brand-icon:hover,
.brand-mark:hover {
    transform: scale(1.06) !important;
}

/* ─── 26. Card content spacing refinement ─── */
.panel > *:first-child,
.content-section > *:first-child {
    margin-top: 0 !important;
}

.panel > *:last-child,
.content-section > *:last-child {
    margin-bottom: 0 !important;
}

/* ─── 27. Better focus ring for accessibility ─── */
:focus-visible {
    outline: 2px solid rgba(11, 79, 140, 0.5) !important;
    outline-offset: 2px !important;
}

html[data-theme="dark"] :focus-visible {
    outline-color: rgba(96, 165, 250, 0.6) !important;
}

.btn:focus-visible,
.nav-item:focus-visible,
.profile-menu-trigger:focus-visible,
.mobile-nav-toggle:focus-visible {
    outline: 2px solid rgba(11, 79, 140, 0.5) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(11, 79, 140, 0.12) !important;
}

html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .nav-item:focus-visible,
html[data-theme="dark"] .profile-menu-trigger:focus-visible,
html[data-theme="dark"] .mobile-nav-toggle:focus-visible {
    outline-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15) !important;
}

/* ─── 28. Workflow card icon color refinement ─── */
.workflow-card i:first-child {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(11, 79, 140, 0.1), rgba(13, 139, 117, 0.08)) !important;
    color: var(--m-primary, #0b4f8c) !important;
    font-size: 0.95rem !important;
}

html[data-theme="dark"] .workflow-card i:first-child {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(55, 198, 163, 0.1)) !important;
    color: #5a9fd4 !important;
}

/* ─── 29. Panel list item hover line indicator ─── */
.list > *:hover,
.stack-list > *:hover {
    border-left: 3px solid var(--m-primary, #0b4f8c) !important;
    padding-left: 17px !important;
}

html[data-theme="dark"] .list > *:hover,
html[data-theme="dark"] .stack-list > *:hover {
    border-left-color: #5a9fd4 !important;
}

/* ─── 30. Login page refinement ─── */
body.page-login .login-card {
    max-width: 420px !important;
    margin: 0 auto !important;
}

body.page-login .login-head {
    text-align: center !important;
    margin-bottom: 24px !important;
}

body.page-login .login-head h2 {
    margin-bottom: 6px !important;
}

body.page-login .input-with-icon {
    position: relative !important;
    margin-bottom: 16px !important;
}

body.page-login .input-with-icon i {
    transition: color 0.2s ease !important;
}

body.page-login .input-with-icon:focus-within i {
    color: var(--m-primary, #0b4f8c) !important;
}

body.page-login .login-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
}

/* ─── 31. Dashboard sidebar active state ─── */
body.page-dashboard .sidebar .nav-item.active,
body.page-dashboard .sidebar a.active {
    position: relative !important;
}

body.page-dashboard .sidebar .nav-item.active::before,
body.page-dashboard .sidebar a.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 55% !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--m-primary, #0b4f8c) !important;
}

/* ─── 32. Better kicker/eyebrow dot accent ─── */
.hero-kicker::before,
.classes-hero-eyebrow::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0b4f8c, #0d8b75) !important;
    flex-shrink: 0 !important;
}

/* ─── 33. Table header sticky behavior ─── */
body.page-classes table thead th,
body.page-dashboard .table-container thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: color-mix(in srgb, var(--ui-shell-surface-strong) 98%, var(--ui-page-bg) 2%) !important;
}

/* ─── 34. Smooth panel expand/collapse (for JS driven toggles) ─── */
[data-collapsed="true"],
.panel-body.collapsed,
.collapsed-content {
    overflow: hidden !important;
    transition: max-height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease !important;
}

/* ─── 35. Better class-card styling ─── */
body.page-classes .class-card,
body.page-dashboard .class-card {
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}

body.page-classes .class-card:hover,
body.page-dashboard .class-card:hover {
    transform: translateY(-2px) !important;
}

/* ─── 36. Hide mobile menu close button ─── */
.mobile-menu-close-btn {
    display: none !important;
}

/* ─── 37. Loading skeleton shimmer effect ─── */
@keyframes ui-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.content-loading,
.loading-box,
.mobile-skeleton {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ui-shell-surface-strong) 95%, transparent) 0%,
        color-mix(in srgb, var(--ui-shell-surface-strong) 80%, var(--ui-page-bg-accent) 20%) 50%,
        color-mix(in srgb, var(--ui-shell-surface-strong) 95%, transparent) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: ui-shimmer 1.8s ease-in-out infinite !important;
}

/* ─── 38. Tooltip-style title attributes ─── */
[title] {
    position: relative !important;
}

/* ─── 39. Better date-pill and timestamp styling ─── */
.date-pill,
time,
.timestamp {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
    white-space: nowrap !important;
}

/* ─── 40. Content section header with bottom border ─── */
.content-section h2,
.section-head h2 {
    padding-bottom: 10px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-shell-border) 50%, transparent) !important;
    margin-bottom: 16px !important;
}

/* ─── 41. Smoother page background transition on theme change ─── */
body {
    transition: background-color 0.35s ease, color 0.25s ease !important;
}

.header,
.home-header,
.sidebar,
.panel,
.stat-card,
.hero,
.hero-card,
.content-section,
.class-card,
.workflow-card,
.summary-card,
.metric-card,
.profile-menu-trigger,
.profile-menu-dropdown,
.nav-item,
input,
select,
textarea {
    transition-property: background-color, border-color, color, box-shadow, transform !important;
    transition-duration: 0.25s !important;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* ─── 42. Better spacing between sections ─── */
body.page-home .home-main > * + *,
body.page-teacher-home .content-area > * + *,
body.page-player-home .content-area > * + *,
body.page-teacher-courses .teacher-courses-main > * + * {
    margin-top: 20px !important;
}

/* ─── 43. Mobile bottom safe area spacing ─── */
@media (max-width: 900px) {
    body.page-home .home-main,
    body.page-teacher-home .content-area,
    body.page-player-home .content-area,
    body.page-teacher-courses .teacher-courses-main,
    body.page-classes .content-area,
    body.page-jugadores .content-area,
    body.page-dashboard .content-area {
        padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
    }
}

/* ─── 44. Better empty grid placeholder ─── */
.class-grid:empty::before,
.content-grid:empty::before,
.stats-grid:empty::before {
    content: "" !important;
    display: block !important;
    min-height: 120px !important;
    grid-column: 1 / -1 !important;
}

/* ─── 45. Improved link underline animation ─── */
.panel a:not(.btn):not(.nav-item),
.content-section a:not(.btn):not(.nav-item) {
    text-decoration: none !important;
    background-image: linear-gradient(var(--m-primary, #0b4f8c), var(--m-primary, #0b4f8c)) !important;
    background-position: 0% 100% !important;
    background-repeat: no-repeat !important;
    background-size: 0% 1px !important;
    transition: background-size 0.25s ease !important;
}

.panel a:not(.btn):not(.nav-item):hover,
.content-section a:not(.btn):not(.nav-item):hover {
    background-size: 100% 1px !important;
}

/* ─── 46. Hero stat number animation on load ─── */
@keyframes ui-count-pop {
    from {
        transform: scale(0.85);
        opacity: 0;
    }
    60% {
        transform: scale(1.04);
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.stat-card h3,
.stat-number,
.summary-value,
.stat-value,
.metric-card strong,
.revenue-value {
    animation: ui-count-pop 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both !important;
    animation-delay: 0.15s !important;
}

/* ─── 47. Primary button gradient shimmer ─── */
@keyframes ui-btn-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

body.page-home .btn-primary,
body.page-teacher-home .btn-primary,
body.page-player-home .btn-primary,
body.page-classes .btn-primary,
body.page-teacher-courses .btn-primary,
body.page-login .login-btn:not(.login-btn-secondary) {
    background-size: 200% auto !important;
    position: relative !important;
    overflow: hidden !important;
}

body.page-home .btn-primary:hover,
body.page-teacher-home .btn-primary:hover,
body.page-player-home .btn-primary:hover,
body.page-classes .btn-primary:hover,
body.page-teacher-courses .btn-primary:hover,
body.page-login .login-btn:not(.login-btn-secondary):hover {
    animation: ui-btn-shimmer 1.5s ease-in-out !important;
}

/* ─── 48. Better kicker line-height and spacing ─── */
.hero-kicker,
.classes-hero-eyebrow,
.panel-kicker,
.eyebrow {
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

/* ─── 49. Refined mobile hamburger menu transitions ─── */
@media (max-width: 900px) {
    .home-mobile-menu,
    .teacher-mobile-menu,
    .teacher-courses-sidebar,
    #classes-sidebar,
    #jugadores-sidebar {
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease !important;
    }

    .home-mobile-overlay,
    .teacher-mobile-overlay,
    .teacher-courses-mobile-overlay,
    .sidebar-overlay {
        transition: opacity 0.25s ease !important;
    }
}

/* ─── 50. Better print styles ─── */
@media print {
    body::before,
    body::after,
    .header,
    .home-header,
    .sidebar,
    .mobile-nav-toggle,
    .profile-menu-trigger,
    .header-actions,
    .header-right,
    .btn-logout,
    .btn-dashboard {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .content-area,
    .home-main,
    .teacher-courses-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-content {
        grid-template-columns: 1fr !important;
    }

    .panel,
    .stat-card,
    .hero-card,
    .class-card,
    .content-section,
    .summary-card {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    a[href]::after {
        content: " (" attr(href) ")" !important;
        font-size: 0.75rem !important;
        color: #666 !important;
    }
}

/* ─── Respect reduced motion for new animations ─── */
@media (prefers-reduced-motion: reduce) {
    .stat-card h3,
    .stat-number,
    .summary-value,
    .stat-value,
    .metric-card strong,
    .revenue-value {
        animation: none !important;
    }

    body.page-home .btn-primary:hover,
    body.page-teacher-home .btn-primary:hover,
    body.page-player-home .btn-primary:hover,
    body.page-classes .btn-primary:hover,
    body.page-teacher-courses .btn-primary:hover,
    body.page-login .login-btn:hover {
        animation: none !important;
    }

    .content-loading,
    .loading-box,
    .mobile-skeleton {
        animation: none !important;
    }

    body {
        transition: none !important;
    }

    .header,
    .home-header,
    .sidebar,
    .panel,
    .stat-card,
    .hero,
    .hero-card,
    .content-section,
    .class-card,
    .workflow-card,
    .summary-card,
    .metric-card,
    .profile-menu-trigger,
    .profile-menu-dropdown,
    .nav-item,
    input,
    select,
    textarea {
        transition: none !important;
    }
}

body.page-login .page-shell {
    width: min(1480px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(520px, 0.88fr) !important;
    gap: 36px !important;
    align-items: center !important;
}

body.page-login .promo-panel {
    min-height: 700px !important;
    justify-content: space-between !important;
    padding: 34px 34px 30px !important;
    box-shadow: 0 34px 70px rgba(3, 10, 27, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-login .promo-content h1 {
    max-width: 8.6ch !important;
    font-size: clamp(3.25rem, 5vw, 5.2rem) !important;
    line-height: 0.88 !important;
}

body.page-login .login-panel {
    padding: 28px !important;
    background:
        radial-gradient(300px 180px at 0% 0%, rgba(247, 195, 85, 0.12), transparent 70%),
        radial-gradient(340px 220px at 100% 8%, rgba(59, 130, 246, 0.14), transparent 72%),
        linear-gradient(160deg, rgba(10, 21, 46, 0.96), rgba(6, 15, 33, 0.98)) !important;
}

body.page-login .login-card {
    overflow: visible !important;
    padding: 30px 30px 26px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(8, 19, 41, 0.94), rgba(9, 16, 31, 0.9)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 46px rgba(0, 0, 0, 0.24) !important;
}

body.page-login .login-head {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

body.page-login .login-head h2 {
    font-size: clamp(2rem, 2.5vw, 2.45rem) !important;
    line-height: 0.92 !important;
}

body.page-login .login-head p {
    max-width: 42ch !important;
    font-size: 0.94rem !important;
}

body.page-login .login-signal-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.page-login .login-signal-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(166, 189, 235, 0.22) !important;
    background: rgba(13, 28, 58, 0.72) !important;
    color: #dce8fb !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

body.page-login .input-with-icon {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(11, 27, 58, 0.78), rgba(8, 19, 40, 0.82)) !important;
    border: 1px solid rgba(145, 170, 221, 0.16) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.page-login .input-with-icon:focus-within {
    transform: translateY(-1px) !important;
    border-color: rgba(112, 188, 255, 0.42) !important;
    box-shadow: 0 14px 28px rgba(9, 18, 38, 0.26) !important;
}

body.page-login .input-with-icon input {
    min-height: 50px !important;
    padding-left: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-login .login-btn:not(.login-btn-secondary) {
    min-height: 54px !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    font-size: 0.96rem !important;
    box-shadow: 0 22px 36px rgba(247, 195, 85, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

body.page-login .login-btn:not(.login-btn-secondary):hover {
    transform: translateY(-2px) !important;
}

body.page-login .section-divider--cta {
    overflow: visible !important;
    margin-top: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(160, 183, 233, 0.16) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(9, 21, 46, 0.9), rgba(7, 18, 39, 0.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 34px rgba(2, 8, 25, 0.22) !important;
}

body.page-login .section-divider--cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(26, 176, 126, 0.9), rgba(247, 195, 85, 0.9)) !important;
}

body.page-login .login-cta-grid {
    display: grid !important;
    gap: 16px !important;
}

body.page-login .login-cta-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 112px !important;
    margin-top: 0 !important;
    padding: 20px 20px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(160, 183, 233, 0.14) !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: 0 18px 34px rgba(2, 8, 25, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.22s ease, border-color 0.22s ease !important;
}

body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 90px at 0% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(21, 54, 116, 0.9), rgba(10, 29, 64, 0.96)) !important;
}

body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 100px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(15, 64, 60, 0.94), rgba(12, 31, 51, 0.98)) !important;
}

body.page-login .login-cta-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(189, 211, 255, 0.28) !important;
}

body.page-login .login-cta-icon,
body.page-login .login-cta-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.page-login .login-cta-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
}

body.page-login .login-cta-copy {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body.page-login .login-cta-copy strong {
    color: #f8fbff !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

body.page-login .login-cta-copy small {
    color: rgba(214, 227, 251, 0.82) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

body.page-login .login-cta-arrow {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(247, 251, 255, 0.96) !important;
    font-size: 0.95rem !important;
}

html[data-theme="light"] body.page-login .login-panel {
    background:
        radial-gradient(320px 200px at 0% 0%, rgba(247, 195, 85, 0.15), transparent 68%),
        radial-gradient(300px 200px at 100% 8%, rgba(31, 95, 154, 0.14), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-card,
html[data-theme="light"] body.page-login .section-divider--cta {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94)) !important;
}

html[data-theme="light"] body.page-login .login-signal-chip {
    background: rgba(247, 250, 255, 0.92) !important;
    border-color: rgba(146, 166, 201, 0.24) !important;
    color: #153252 !important;
}

html[data-theme="light"] body.page-login .input-with-icon {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(241, 246, 255, 0.96)) !important;
    border-color: rgba(146, 166, 201, 0.2) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--register {
    background:
        radial-gradient(160px 100px at 0% 0%, rgba(31, 95, 154, 0.16), transparent 70%),
        linear-gradient(135deg, rgba(223, 236, 255, 0.96), rgba(239, 246, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-card--payment {
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(247, 195, 85, 0.18), transparent 70%),
        linear-gradient(135deg, rgba(229, 247, 241, 0.98), rgba(241, 248, 255, 0.98)) !important;
}

html[data-theme="light"] body.page-login .login-cta-copy strong {
    color: #102a43 !important;
}

html[data-theme="light"] body.page-login .login-cta-copy small {
    color: #486581 !important;
}

html[data-theme="light"] body.page-login .login-cta-icon,
html[data-theme="light"] body.page-login .login-cta-arrow {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(146, 166, 201, 0.22) !important;
    color: #123154 !important;
}

@media (min-width: 900px) {
    body.page-login .login-cta-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    body.page-login .page-shell {
        width: min(760px, calc(100% - 28px)) !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.page-login .promo-panel {
        min-height: auto !important;
    }
}

@media (max-width: 640px) {
    body.page-login .login-panel {
        padding: 16px !important;
    }

    body.page-login .login-card {
        padding: 22px 18px 20px !important;
        border-radius: 22px !important;
    }

    body.page-login .login-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    }

    body.page-login .login-cta-card {
        grid-template-columns: auto 1fr !important;
        padding: 16px !important;
        min-height: 102px !important;
    }

    body.page-login .login-cta-arrow {
        grid-column: 2 !important;
        justify-self: end !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-login .input-with-icon:focus-within,
    body.page-login .login-btn:not(.login-btn-secondary):hover,
    body.page-login .login-cta-card:hover {
        transform: none !important;
    }
}

/* ─── CTA cards: compact + stretch right ─── */
body.page-login .section-divider--cta {
    padding: 10px 0 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

body.page-login .section-divider--cta::before {
    display: none !important;
}

body.page-login .section-divider--cta h3,
body.page-login .section-divider--cta p {
    display: none !important;
}

body.page-login .login-cta-grid {
    gap: 8px !important;
    justify-items: stretch !important;
}

body.page-login .login-cta-card {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
}

body.page-login .login-cta-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

body.page-login .login-cta-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 0 !important;
}

body.page-login .login-cta-copy strong {
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
}

body.page-login .login-cta-copy small {
    display: none !important;
}

body.page-login .login-cta-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.78rem !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
}

@media (min-width: 981px) {
    body.page-login .section-divider.section-divider--cta {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-login .section-divider.section-divider--cta .login-cta-grid {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.page-login .section-divider.section-divider--cta .login-cta-card {
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

@media (max-width: 1100px) {
    body.page-login .login-panel {
        order: 1 !important;
    }

    body.page-login .promo-panel {
        order: 2 !important;
        min-height: auto !important;
        padding: 20px !important;
        gap: 14px !important;
    }

    body.page-login .promo-panel::after {
        width: 220px !important;
        height: 220px !important;
        right: -120px !important;
        bottom: -140px !important;
    }

    body.page-login .promo-content h1 {
        max-width: 10.5ch !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        font-size: clamp(1.85rem, 7vw, 2.9rem) !important;
        line-height: 0.92 !important;
    }

    body.page-login .promo-content p {
        font-size: 0.9rem !important;
    }

    body.page-login .promo-list {
        gap: 8px !important;
    }

    body.page-login .promo-list li {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
    }

    body.page-login .promo-actions {
        gap: 8px !important;
    }

    body.page-login .promo-proof {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-login .promo-proof-card {
        padding: 10px 10px 9px !important;
        min-height: 0 !important;
    }

    body.page-login .promo-proof-card strong {
        font-size: 1rem !important;
    }

    body.page-login .promo-proof-card p {
        display: none !important;
    }

    body.page-login .promo-proof-label {
        font-size: 0.62rem !important;
    }
}

@media (max-width: 640px) {
    body.page-login .promo-panel {
        order: 2 !important;
        padding: 18px !important;
        gap: 12px !important;
    }

    body.page-login .promo-content h1 {
        font-size: clamp(1.7rem, 9vw, 2.35rem) !important;
        max-width: 11ch !important;
    }

    body.page-login .promo-proof {
        grid-template-columns: 1fr !important;
    }
}

/* European Test-inspired shared shell pass */
:root {
    --et-shared-primary: #0d4e89;
    --et-shared-primary-strong: #083962;
    --et-shared-secondary: #0f8f78;
    --et-shared-gold: #c98b18;
    --et-shared-bg: #edf4fb;
    --et-shared-bg-soft: #f8fbff;
    --et-shared-surface: rgba(255, 255, 255, 0.94);
    --et-shared-surface-soft: rgba(240, 246, 252, 0.96);
    --et-shared-ink: #0f2b46;
    --et-shared-ink-soft: #4c6781;
    --et-shared-border: rgba(215, 227, 239, 0.92);
    --et-shared-shadow-sm: 0 16px 30px rgba(12, 29, 49, 0.08);
    --et-shared-shadow-md: 0 24px 50px rgba(10, 28, 49, 0.12);
}

body.page-home,
body.page-teacher-home,
body.page-player-home,
body.page-classes,
body.page-jugadores,
body.page-teacher-courses,
body.page-dashboard {
    background:
        radial-gradient(circle at 10% 12%, rgba(13, 78, 137, 0.12), transparent 38%),
        radial-gradient(circle at 88% 8%, rgba(15, 143, 120, 0.1), transparent 34%),
        linear-gradient(150deg, var(--et-shared-bg) 0%, var(--et-shared-bg-soft) 100%) !important;
}

body.page-home::before,
body.page-teacher-home::before,
body.page-player-home::before,
body.page-classes::before,
body.page-jugadores::before,
body.page-teacher-courses::before,
body.page-dashboard::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 20% 86%, rgba(201, 139, 24, 0.08), transparent 34%) !important;
}

html[data-theme="dark"] body.page-home,
html[data-theme="dark"] body.page-teacher-home,
html[data-theme="dark"] body.page-player-home,
html[data-theme="dark"] body.page-classes,
html[data-theme="dark"] body.page-jugadores,
html[data-theme="dark"] body.page-teacher-courses,
html[data-theme="dark"] body.page-dashboard {
    background:
        radial-gradient(circle at 10% 12%, rgba(79, 134, 255, 0.12), transparent 38%),
        radial-gradient(circle at 88% 8%, rgba(15, 143, 120, 0.12), transparent 34%),
        linear-gradient(160deg, #081321 0%, #0c1b2f 100%) !important;
}

body.page-home .home-header,
body.page-classes .header,
body.page-jugadores .header,
body.page-teacher-home .header,
body.page-player-home .header,
body.page-teacher-courses .teacher-courses-header,
body.page-dashboard .main-header {
    top: 0.7rem !important;
    padding: 0.95rem 1.15rem !important;
    border: 1px solid var(--et-shared-border) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 18px 40px rgba(10, 28, 49, 0.1) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

html[data-theme="dark"] body.page-home .home-header,
html[data-theme="dark"] body.page-classes .header,
html[data-theme="dark"] body.page-jugadores .header,
html[data-theme="dark"] body.page-teacher-home .header,
html[data-theme="dark"] body.page-player-home .header,
html[data-theme="dark"] body.page-teacher-courses .teacher-courses-header,
html[data-theme="dark"] body.page-dashboard .main-header {
    border-color: rgba(164, 188, 226, 0.16) !important;
    background: rgba(9, 18, 34, 0.88) !important;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28) !important;
}

body.page-home .panel,
body.page-home .metric-card,
body.page-home .announcement-card,
body.page-teacher-home .panel,
body.page-teacher-home .stat-card,
body.page-teacher-home .workflow-card,
body.page-player-home .panel,
body.page-player-home .stat-card,
body.page-classes .content-section,
body.page-classes .summary-card,
body.page-classes .class-card,
body.page-jugadores .content-section,
body.page-jugadores .summary-card,
body.page-teacher-courses .panel,
body.page-teacher-courses .stat-card,
body.page-dashboard .stat-card,
body.page-dashboard .class-card,
body.page-dashboard .notification,
body.page-dashboard .sql-kpi-card,
body.page-dashboard .table-container {
    background: linear-gradient(180deg, var(--et-shared-surface), var(--et-shared-surface-soft)) !important;
    border: 1px solid var(--et-shared-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--et-shared-shadow-md) !important;
}

html[data-theme="dark"] body.page-home .panel,
html[data-theme="dark"] body.page-home .metric-card,
html[data-theme="dark"] body.page-home .announcement-card,
html[data-theme="dark"] body.page-teacher-home .panel,
html[data-theme="dark"] body.page-teacher-home .stat-card,
html[data-theme="dark"] body.page-teacher-home .workflow-card,
html[data-theme="dark"] body.page-player-home .panel,
html[data-theme="dark"] body.page-player-home .stat-card,
html[data-theme="dark"] body.page-classes .content-section,
html[data-theme="dark"] body.page-classes .summary-card,
html[data-theme="dark"] body.page-classes .class-card,
html[data-theme="dark"] body.page-jugadores .content-section,
html[data-theme="dark"] body.page-jugadores .summary-card,
html[data-theme="dark"] body.page-teacher-courses .panel,
html[data-theme="dark"] body.page-teacher-courses .stat-card,
html[data-theme="dark"] body.page-dashboard .stat-card,
html[data-theme="dark"] body.page-dashboard .class-card,
html[data-theme="dark"] body.page-dashboard .notification,
html[data-theme="dark"] body.page-dashboard .sql-kpi-card,
html[data-theme="dark"] body.page-dashboard .table-container {
    background: linear-gradient(180deg, rgba(14, 29, 51, 0.96), rgba(11, 22, 40, 0.98)) !important;
    border-color: rgba(164, 188, 226, 0.14) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26) !important;
}

body.page-home .hero-card.spotlight,
body.page-teacher-home .hero.panel,
body.page-player-home .hero.panel,
body.page-classes .classes-hero,
body.page-teacher-courses .hero-panel,
body.page-dashboard .class-header {
    border: 1px solid rgba(149, 178, 225, 0.22) !important;
    box-shadow: 0 24px 52px rgba(10, 28, 49, 0.16) !important;
}

body.page-classes .sidebar,
body.page-teacher-courses .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 252, 0.98)) !important;
    border: 1px solid var(--et-shared-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--et-shared-shadow-sm) !important;
}

html[data-theme="dark"] body.page-classes .sidebar,
html[data-theme="dark"] body.page-teacher-courses .sidebar {
    background: linear-gradient(180deg, rgba(14, 29, 51, 0.94), rgba(11, 22, 40, 0.98)) !important;
    border-color: rgba(164, 188, 226, 0.14) !important;
}

body.page-classes .sidebar .nav-item,
body.page-teacher-courses .sidebar .nav-item {
    border-radius: 12px !important;
}

body.page-home .btn,
body.page-teacher-home .btn,
body.page-player-home .btn,
body.page-teacher-courses .btn,
body.page-classes .btn-primary,
body.page-classes .btn-secondary,
body.page-dashboard .header-right .btn,
body.page-dashboard .header-right button,
body.page-dashboard .mobile-top-logout,
body.page-dashboard .mobile-tab-link {
    border-radius: 14px !important;
}

body.page-home .btn-primary,
body.page-teacher-home .btn-primary,
body.page-player-home .btn-primary,
body.page-teacher-courses .btn-primary,
body.page-classes .btn-primary,
body.page-dashboard .header-right .btn-primary,
body.page-dashboard .mobile-top-logout {
    background-image: linear-gradient(135deg, var(--et-shared-primary) 0%, #1b6aac 45%, var(--et-shared-secondary) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 18px 34px -18px rgba(13, 78, 137, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
}

body.page-home .btn-secondary,
body.page-home .btn-ghost,
body.page-teacher-home .btn-secondary,
body.page-player-home .btn-secondary,
body.page-teacher-courses .btn-secondary,
body.page-classes .btn-secondary,
body.page-dashboard .header-right .btn:not(.btn-primary),
body.page-dashboard .header-right button:not(.btn-primary),
body.page-dashboard .mobile-tab-link {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 246, 252, 0.96)) !important;
    border: 1px solid rgba(215, 227, 239, 0.96) !important;
    color: var(--et-shared-ink) !important;
    box-shadow: var(--et-shared-shadow-sm) !important;
}

html[data-theme="dark"] body.page-home .btn-secondary,
html[data-theme="dark"] body.page-home .btn-ghost,
html[data-theme="dark"] body.page-teacher-home .btn-secondary,
html[data-theme="dark"] body.page-player-home .btn-secondary,
html[data-theme="dark"] body.page-teacher-courses .btn-secondary,
html[data-theme="dark"] body.page-classes .btn-secondary,
html[data-theme="dark"] body.page-dashboard .header-right .btn:not(.btn-primary),
html[data-theme="dark"] body.page-dashboard .header-right button:not(.btn-primary),
html[data-theme="dark"] body.page-dashboard .mobile-tab-link {
    background: linear-gradient(180deg, rgba(20, 39, 66, 0.9), rgba(16, 29, 49, 0.96)) !important;
    border-color: rgba(164, 188, 226, 0.14) !important;
    color: #edf4ff !important;
}

body.page-home .badge,
body.page-teacher-home .badge,
body.page-player-home .badge,
body.page-classes .badge,
body.page-classes .chip,
body.page-jugadores .score-pill,
body.page-teacher-courses .status-pill,
body.page-teacher-courses .topic-badge,
body.page-teacher-courses .course-badge,
body.page-dashboard .badge,
body.page-dashboard .status-badge,
body.page-dashboard .futbol-badge,
body.page-dashboard .players-trend-pill {
    background: rgba(240, 246, 252, 0.92) !important;
    border: 1px solid rgba(215, 227, 239, 0.96) !important;
    color: var(--et-shared-ink) !important;
}

html[data-theme="dark"] body.page-home .badge,
html[data-theme="dark"] body.page-teacher-home .badge,
html[data-theme="dark"] body.page-player-home .badge,
html[data-theme="dark"] body.page-classes .badge,
html[data-theme="dark"] body.page-classes .chip,
html[data-theme="dark"] body.page-jugadores .score-pill,
html[data-theme="dark"] body.page-teacher-courses .status-pill,
html[data-theme="dark"] body.page-teacher-courses .topic-badge,
html[data-theme="dark"] body.page-teacher-courses .course-badge,
html[data-theme="dark"] body.page-dashboard .badge,
html[data-theme="dark"] body.page-dashboard .status-badge,
html[data-theme="dark"] body.page-dashboard .futbol-badge,
html[data-theme="dark"] body.page-dashboard .players-trend-pill {
    background: rgba(20, 39, 66, 0.88) !important;
    border-color: rgba(164, 188, 226, 0.14) !important;
    color: #edf4ff !important;
}

body.page-home .panel:hover,
body.page-home .metric-card:hover,
body.page-teacher-home .panel:hover,
body.page-teacher-home .stat-card:hover,
body.page-teacher-home .workflow-card:hover,
body.page-player-home .panel:hover,
body.page-player-home .stat-card:hover,
body.page-classes .content-section:hover,
body.page-classes .summary-card:hover,
body.page-classes .class-card:hover,
body.page-jugadores .content-section:hover,
body.page-jugadores .summary-card:hover,
body.page-teacher-courses .panel:hover,
body.page-teacher-courses .stat-card:hover,
body.page-dashboard .stat-card:hover,
body.page-dashboard .class-card:hover,
body.page-dashboard .sql-kpi-card:hover {
    border-color: rgba(149, 178, 225, 0.98) !important;
    box-shadow: 0 28px 56px rgba(10, 28, 49, 0.14) !important;
}

@media (max-width: 900px) {
    body.page-home .home-header,
    body.page-classes .header,
    body.page-jugadores .header,
    body.page-teacher-home .header,
    body.page-player-home .header,
    body.page-teacher-courses .teacher-courses-header,
    body.page-dashboard .main-header {
        top: 0.5rem !important;
        padding: 0.9rem !important;
        border-radius: 20px !important;
    }

    body.page-classes .sidebar,
    body.page-teacher-courses .sidebar {
        border-radius: 20px !important;
    }
}

/* Restore attached top system bars */
body.page-home .home-header,
body.page-classes .header,
body.page-jugadores .header,
body.page-teacher-home .header,
body.page-player-home .header,
body.page-teacher-courses .teacher-courses-header,
body.page-dashboard .main-header {
    top: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 900px) {
    body.page-home .home-header,
    body.page-classes .header,
    body.page-jugadores .header,
    body.page-teacher-home .header,
    body.page-player-home .header,
    body.page-teacher-courses .teacher-courses-header,
    body.page-dashboard .main-header {
        top: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* Final dashboard desktop layout fix */
@media (min-width: 901px) {
    body.page-dashboard .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-width) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        z-index: 1200 !important;
    }

    body.page-dashboard .main-content {
        position: relative !important;
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        min-height: 100vh !important;
        flex: 0 0 calc(100% - var(--sidebar-width)) !important;
    }

    body.page-dashboard .nav-menu {
        padding: 1.1rem 1rem 1.35rem !important;
    }

    body.page-dashboard .user-profile {
        min-height: 76px !important;
    }

    body.page-dashboard .main-header,
    body.page-dashboard .content-area {
        width: 100% !important;
        max-width: none !important;
    }

    body.page-dashboard .main-header {
        left: auto !important;
        right: auto !important;
        min-height: 84px !important;
        padding: 14px 30px 14px 26px !important;
        gap: 18px !important;
        align-items: center !important;
        border-bottom-width: 1px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
    }

    body.page-dashboard .main-header .header-left {
        gap: 5px !important;
        padding-right: 16px !important;
    }

    body.page-dashboard .header-right {
        gap: 12px !important;
    }

    body.page-dashboard .dashboard-executive-strip {
        margin-top: 8px !important;
        gap: 8px !important;
    }

    body.page-dashboard .dashboard-executive-strip span {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    body.page-dashboard .content-area {
        padding: 28px 30px 34px !important;
    }
}