/* ==========================================================================
   PORRA MUNDIAL — APP.CSS
   Sistema visual tipo app deportiva
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Colores base */
    --pm-bg: #020617;
    --pm-bg-soft: #07111f;
    --pm-surface: #0b1220;
    --pm-card: #0f172a;
    --pm-card-soft: #111827;
    --pm-card-elevated: #111c2f;

    /* Bordes */
    --pm-border: rgba(148,163,184,0.16);
    --pm-border-strong: rgba(148,163,184,0.28);
    --pm-border-green: rgba(34,197,94,0.48);

    /* Texto */
    --pm-text: #f8fafc;
    --pm-text-soft: #cbd5e1;
    --pm-text-muted: #94a3b8;
    --pm-text-dim: #64748b;
    --pm-text-dark: #052e16;

    /* Acentos */
    --pm-green: #22c55e;
    --pm-green-strong: #16a34a;
    --pm-green-soft: rgba(34,197,94,0.16);
    --pm-blue: #3b82f6;
    --pm-blue-soft: rgba(59,130,246,0.18);
    --pm-gold: #fbbf24;
    --pm-gold-soft: rgba(251,191,36,0.16);
    --pm-red: #ef4444;
    --pm-red-strong: #dc2626;
    --pm-red-soft: rgba(239,68,68,0.16);

    /* Estados */
    --pm-status-open-bg: rgba(100,116,139,0.22);
    --pm-status-open-text: #cbd5e1;
    --pm-status-live-bg: rgba(251,191,36,0.18);
    --pm-status-live-text: #fbbf24;
    /*--pm-status-closed-bg: rgba(74,222,128,0.04);*/
    /*--pm-status-closed-text: rgba(187,247,208,0.78);*/
    --pm-status-closed-text: rgba(226,232,240,0.78);

    /* Radios */
    --pm-radius-xs: 8px;
    --pm-radius-sm: 12px;
    --pm-radius-md: 16px;
    --pm-radius-lg: 22px;
    --pm-radius-xl: 28px;
    --pm-radius-pill: 999px;

    /* Spacing */
    --pm-space-1: 4px;
    --pm-space-2: 8px;
    --pm-space-3: 12px;
    --pm-space-4: 16px;
    --pm-space-5: 20px;
    --pm-space-6: 24px;
    --pm-space-7: 32px;

    /* Sombras */
    --pm-shadow-sm: 0 8px 20px rgba(0,0,0,0.25);
    --pm-shadow-md: 0 18px 45px rgba(0,0,0,0.34);
    --pm-shadow-lg: 0 24px 70px rgba(0,0,0,0.46);
    --pm-shadow-green: 0 0 28px rgba(34,197,94,0.28);

    /* Tipografía */
    --pm-font: Inter, Arial, Helvetica, sans-serif;
    --pm-text-2xs: 10px;
    --pm-text-xs: 11px;
    --pm-text-sm: 12px;
    --pm-text-md: 14px;
    --pm-text-lg: 16px;
    --pm-text-xl: 20px;
    --pm-text-2xl: 24px;
    --pm-text-3xl: 30px;
    --pm-leading-tight: 1.05;
    --pm-leading-snug: 1.15;
    --pm-leading-normal: 1.35;

    /* Motion */
    --pm-transition-fast: 160ms ease;
    --pm-transition-normal: 220ms ease;

    /* Layout */
    --pm-content-max: 1180px;
    --pm-content-wide: 1350px;
    --pm-page-x: 16px;
    --pm-page-x-mobile: 12px;
    --pm-page-y: 18px;
    --pm-page-y-mobile: 12px;
    --pm-bottom-nav-height: 64px;
    --pm-bottom-nav-space: 92px;
    --pm-topbar-height: 46px;
    --pm-safe-top: env(safe-area-inset-top);
    --pm-safe-bottom: env(safe-area-inset-bottom);
    --pm-z-topbar: 9000;
    --pm-z-bottom-nav: 9999;
}

/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */

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

html {
    min-height: 100%;
    background: var(--pm-bg);
}

body {
    margin: 0;
    min-height: 100%;
    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: var(--pm-font);
    font-size: var(--pm-text-md);
    line-height: var(--pm-leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

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

a {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   03. APP TEMPLATE CLEAN MODE
   ========================================================================== */

body.pm-app-template {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background: var(--pm-bg) !important;
}

body.pm-app-template {
    overflow-x: hidden;
    color: var(--pm-text) !important;
}

/* Anti-theme WordPress: neutraliza wrappers, márgenes y fondos heredados */
body.pm-app-template #page,
body.pm-app-template .site,
body.pm-app-template .site-content,
body.pm-app-template .content-area,
body.pm-app-template .site-main,
body.pm-app-template .entry-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Oculta títulos/cabeceras que pueda inyectar el theme */
body.pm-app-template .entry-header,
body.pm-app-template .entry-title,
body.pm-app-template .page-title,
body.pm-app-template .wp-block-post-title,
body.pm-app-template .post-title,
body.pm-app-template .archive-title,
body.pm-app-template .site-header,
body.pm-app-template .site-footer,
body.pm-app-template .widget-area,
body.pm-app-template .comments-area,
body.pm-app-template .post-navigation {
    display: none !important;
}

/* Evita anchos/márgenes típicos de bloques de WordPress */
body.pm-app-template .wp-site-blocks,
body.pm-app-template .is-layout-constrained,
body.pm-app-template .wp-block-group,
body.pm-app-template .wp-block-post-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Control básico de bloques dentro de la app */
body.pm-app-template .entry-content > * {
    max-width: none !important;
}

/* Evita el clásico margen automático de Gutenberg */
body.pm-app-template .entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.pm-app-template * {
    box-sizing: border-box;
}

.pm-app-template .pm-app-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--pm-bg);
    color: var(--pm-text);
    padding-top: calc(var(--pm-topbar-height) + var(--pm-safe-top));
}

.pm-app-template .pm-app-main {
    width: 100%;
    max-width: var(--pm-content-max);
    margin: 0 auto;
    padding: var(--pm-page-y) var(--pm-page-x) var(--pm-bottom-nav-space);
}

.pm-page-dashboard + .pm-app-main {
    padding-top: 58px;
}

body.pm-ranking-no-dashboard .pm-app-main {
    padding-top: 16px;
}

@media (min-width: 900px) {
    .pm-app-template .pm-app-main {
        padding-bottom: 32px;
    }
}

@media (max-width: 768px) {
    .pm-page-dashboard + .pm-app-main {
        padding-top: 38px;
    }

    .pm-results-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        margin: -4px 0 8px;
        padding: 2px;
        border: 1px solid rgba(148,163,184,0.12);
        border-radius: 13px;
        background: rgba(15,23,42,0.42);
        box-shadow: none;
    }

    .pm-results-tabs button {
        min-height: 26px;
        border: 0;
        border-radius: 11px;
        padding: 0 8px;
        background: transparent;
        color: rgba(148,163,184,0.86);
        font-size: 12px;
        font-weight: 620;
        letter-spacing: -0.01em;
        text-transform: none;
    }

    .pm-results-tabs button.active {
        margin: 0;
        background: rgba(34,197,94,0.14);
        color: #bbf7d0;
        box-shadow: inset 0 -1px 0 rgba(34,197,94,0.36);
    }

    .pm-results-tabs button.active::before {
        display: none;
    }

    .pm-results-tabs button.active::after {
        left: 18px;
        right: 18px;
        bottom: 0;
        height: 1px;
        background: rgba(34,197,94,0.9);
        box-shadow: 0 0 10px rgba(34,197,94,0.45);
        clip-path: none;
    }
}

/* ==========================================================================
   04. PAGE LAYOUT
   ========================================================================== */

.pm-page {
    width: 100%;
    max-width: var(--pm-content-max);
    margin: 0 auto;
    padding: var(--pm-page-y) 14px;
    color: var(--pm-text);
    box-sizing: border-box;
}

.pm-page-header {
    margin-bottom: var(--pm-space-5);
}

.pm-page-header h1 {
    margin: 0 0 var(--pm-space-2);
    font-size: clamp(var(--pm-text-2xl), 5vw, var(--pm-text-3xl));
    line-height: var(--pm-leading-tight);
    font-weight: 950;
    letter-spacing: -0.055em;
}

.pm-page-header p {
    margin: 0;
    color: var(--pm-text-muted);
    font-size: var(--pm-text-md);
    line-height: var(--pm-leading-normal);
}

@media (max-width: 768px) {
    .pm-page {
        padding: 10px 0;
        overflow-x: hidden;
    }

    .pm-page-header {
        margin-bottom: var(--pm-space-5);
        text-align: left;
    }

    .pm-page-header h1 {
        font-size: var(--pm-text-2xl);
    }

    .pm-page-header p {
        font-size: var(--pm-text-md);
    }
}

/* ==========================================================================
   05. COMMON COMPONENTS
   ========================================================================== */

.pm-match-card,
.pm-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(8,13,28,0.98));
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    padding: 18px 16px;
    box-shadow: var(--pm-shadow-md);
}

.pm-card h2 {
    margin: 0 0 16px;
    color: var(--pm-text);
    font-size: var(--pm-text-xl);
    line-height: var(--pm-leading-snug);
    font-weight: 950;
    letter-spacing: -0.035em;
}

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

.pm-label {
    display: block;
    margin: 10px 0 6px;
    color: var(--pm-text-soft);
    font-size: var(--pm-text-sm);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pm-select,
.pm-score-inputs input,
.pm-admin-result-grid input,
.pm-admin-result-grid select,
.pm-results-page .pm-admin-result-grid input,
.pm-results-page .pm-admin-result-grid select,
.pm-results-page .pm-admin-scorers-form select,
.pm-results-page .pm-admin-scorers-form input {
    border: 1px solid var(--pm-border-strong);
    border-radius: var(--pm-radius-md);
    background: rgba(2, 6, 23, 0.84) !important;
    color: var(--pm-text) !important;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition:
        border-color var(--pm-transition-fast),
        box-shadow var(--pm-transition-fast),
        background var(--pm-transition-fast);
}

.pm-select:focus,
.pm-score-inputs input:focus,
.pm-admin-result-grid input:focus,
.pm-admin-result-grid select:focus,
.pm-results-page .pm-admin-result-grid input:focus,
.pm-results-page .pm-admin-result-grid select:focus,
.pm-results-page .pm-admin-scorers-form select:focus,
.pm-results-page .pm-admin-scorers-form input:focus {
    border-color: var(--pm-green);
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.pm-select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--pm-border-strong);
    border-radius: var(--pm-radius-md);
    background: var(--pm-bg);
    color: var(--pm-text);
    padding: 0 12px;
    font-size: var(--pm-text-md);
    font-weight: 800;
}

.pm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: var(--pm-radius-pill);
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--pm-green), var(--pm-green-strong));
    color: var(--pm-text-dark);
    font-size: var(--pm-text-md);
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(34, 197, 94, 0.26);
    transition:
        transform var(--pm-transition-fast),
        filter var(--pm-transition-fast),
        box-shadow var(--pm-transition-fast);
}

.pm-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-green);
}

.pm-button:active {
    transform: translateY(0);
}

.pm-button-danger,
.pm-results-page .pm-button-danger {
    background: linear-gradient(135deg, var(--pm-red), var(--pm-red-strong)) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(239, 68, 68, 0.24);
}

.pm-button-danger:hover,
.pm-results-page .pm-button-danger:hover {
    background: linear-gradient(135deg, #f87171, var(--pm-red-strong)) !important;
}

/* ==========================================================================
   06. PREDICTIONS / PRONÓSTICOS
   ========================================================================== */

.pm-special-warning-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(251,191,36,0.32);
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(251,191,36,0.20), transparent 42%),
        linear-gradient(180deg, rgba(38,29,8,0.78), rgba(15,23,42,0.92));
    box-shadow:
        0 16px 34px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.pm-special-warning-content {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pm-special-warning-title {
    color: #F8FAFC;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.pm-special-warning-text {
    margin-top: 4px;
    color: #94A3B8;
    font-size: 12px;
    line-height: 1.3;
}

.pm-special-warning-text strong {
    color: #F8FAFC;
    font-weight: 800;
}

.pm-special-warning-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    padding: 0 14px;
    background: #FBBF24;
    color: #111827;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(251,191,36,0.20);
}

.pm-special-warning-action:hover,
.pm-special-warning-action:focus,
.pm-special-warning-action:visited {
    color: #111827;
    text-decoration: none;
}

.pm-special-warning-action:hover {
    background: #FCD34D;
}

.pm-special-warning-action:active {
    transform: scale(.95);
}

.pm-results-page .pm-match-day-header {
    margin: 16px 2px 3px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-results-page .pm-matches-panel > .pm-match-day-header:first-child {
    margin-top: 0;
}

.pm-results-page .pm-match-day-header::after {
    background: rgba(203,213,225,0.42);
}

.pm-match-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 2px 0px;
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: none;
}

.pm-predictions .pm-matches-panel > .pm-match-day-header:first-child {
    margin-top: 0;
}

.pm-match-day-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(203,213,225,0.30);
}

.pm-specials-panel {
    display: none;
    max-width: 720px;
    margin: 0 auto;
}

.pm-predictions.is-specials-open .pm-special-warning-card,
.pm-predictions.is-specials-open .pm-matches-panel {
    display: none;
}

.pm-predictions.is-specials-open .pm-specials-panel {
    display: block;
}

.pm-predictions-layout {
    display: block;
}

.pm-matches-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-predictions .pm-match-card {
    padding: 9px 10px 8px;
    border-radius: 17px;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(59,130,246,0.13), transparent 62%),
        linear-gradient(180deg, rgba(18,29,52,0.99), rgba(8,13,28,0.99));
    border-color: rgba(148,163,184,0.22);
    box-shadow:
        0 14px 34px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-predictions .pm-match-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 44%);
}

.pm-match-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.pm-phase,
.pm-match-date {
    overflow: hidden;
    color: rgba(203,213,225,0.78);
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-phase {
    justify-self: start;
}

.pm-match-date {
    justify-self: center;
    color: rgba(226,232,240,0.84);
    font-size: 12px;
    font-weight: 720;
    text-align: center;
    text-transform: none;
    letter-spacing: -0.01em;
}

.pm-status {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 9px;
    border-radius: var(--pm-radius-pill);
    background: var(--pm-status-open-bg);
    color: var(--pm-status-open-text);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pm-status::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.pm-status.live {
    background: var(--pm-status-live-bg);
    color: var(--pm-status-live-text);
}

.pm-status.closed {
    background: var(--pm-status-closed-bg);
    color: var(--pm-status-closed-text);
}

.pm-status.open {
    background: var(--pm-status-open-bg);
    color: var(--pm-status-open-text);
}

.pm-match-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.pm-team {
    min-width: 0;
    color: var(--pm-text);
    font-size: 19px;
    line-height: 1.12;
    font-weight: 820;
    letter-spacing: -0.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-team-home {
    text-align: left;
}

.pm-team-away {
    text-align: right;
}

.pm-score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(248,250,252,0.82);
    font-size: 22px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
}

.pm-score-inputs input {
    width: 48px;
    height: 46px;
    text-align: center;
    border: 1px solid rgba(148,163,184,0.26);
    border-radius: 15px;
    background:
        radial-gradient(circle at top, rgba(59,130,246,0.08), transparent 54%),
        rgba(2,6,23,0.82) !important;
    color: var(--pm-text);
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.05em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 18px rgba(0,0,0,0.18);
}

.pm-scorer-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,0.13);
}

.pm-scorer-label {
    margin: 0;
    color: rgba(203,213,225,0.88);
    font-size: 12px;
    font-weight: 850;
    text-transform: none;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.pm-scorer-row .pm-select {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 35px;
    height: 35px;
    border-radius: 14px;
    padding: 0 34px 0 12px;
    font-size: 13px;
    font-weight: 800;
}

.pm-match-card-detail-link {
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    white-space: nowrap;
}

.pm-match-card-detail-link:hover,
.pm-match-card-detail-link:focus,
.pm-match-card-detail-link:active {
    color: rgba(226,232,240,0.92);
    text-decoration: none;
}

.pm-match-card-detail-link:active {
    transform: scale(0.97);
}

.pm-save-state {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    color: rgba(148,163,184,0.72);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.pm-save-state.is-saved {
    color: rgba(148,163,184,0.52);
}

.pm-save-state.is-unsaved {
    color: rgba(248,113,113,0.48);
}

.pm-save-state.is-saving {
    color: rgba(251,191,36,0.48);
}

.pm-save-state.is-error {
    color: rgba(248,113,113,0.62);
}

.pm-save-state.is-closed {
    color: rgba(251,191,36,0.48);
}

.pm-match-locked {
    opacity: 0.74;
    border-color: var(--pm-border-strong);
}

.pm-match-locked .pm-status {
    background: rgba(51, 65, 85, 0.58);
    color: var(--pm-text-soft);
}

.pm-match-locked input,
.pm-match-locked select {
    cursor: not-allowed;
    opacity: 0.75;
}

.pm-match-locked .pm-save-state {
    color: var(--pm-gold);
}

.pm-specials-panel {
    display: none;
    max-width: 720px;
    margin: 0 auto;
}

.pm-specials-page .pm-specials-panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    position: relative;
    width: 100%;
}

.pm-specials-page .pm-specials-card {
    display: block;
}

.pm-specials-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    min-height: 24px;
    margin: -8px 0 4px 0px;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(148,163,184,0.78);
    font-size: 12px;
    line-height: 1;
    font-weight: 760;
    cursor: pointer;
}

.pm-specials-back svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-specials-back:hover {
    color: rgba(226,232,240,0.92);
}

.pm-specials-back,
.pm-specials-back:visited,
.pm-specials-back:hover,
.pm-specials-back:focus {
    text-decoration: none;
}

.pm-specials-card {
    padding: 14px 12px 13px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.pm-specials-card-header h2 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(226,232,240,0.92);
}

.pm-specials-group {
    display: grid;
    gap: 10px;
}

.pm-specials-group-top {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(148,163,184,0.13);
}

.pm-special-row {
    display: grid;
    grid-template-columns: 85px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
}

.pm-special-row-main {
    display: contents;
}

.pm-special-icon {
    display: none;
}

.pm-special-label {
    color: rgba(226,232,240,0.90);
    font-size: 13px;
    font-weight: 680;
    line-height: 1;
}

.pm-special-points {
    min-width: 42px;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border: 1px solid rgba(251,191,36,0.14);
    border-radius: 999px;
    background: rgba(251,191,36,0.045);
    color: rgba(251,191,36,0.68);
    font-size: 11px;
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
}

.pm-special-row .pm-select {
    width: calc(100% - 8px);
    justify-self: stretch;
    height: 32px;
    min-height: 32px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 680;
}

.pm-special-bonus {
    margin-top: 14px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid rgba(148,163,184,0.12);
    background: transparent;
}

.pm-special-bonus-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pm-special-bonus span {
    color: rgba(134,239,172,0.70);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .06em;
}

.pm-special-bonus strong {
    margin-right: 6px;
    color: rgba(134,239,172,0.74);
    font-size: 11px;
    font-weight: 720;
}

.pm-special-bonus p {
    margin: 0;
    color: rgba(148,163,184,0.72);
    font-size: 12px;
    line-height: 1.35;
}

.pm-special-save-state {
    margin-top: 10px;
    text-align: right;
    color: rgba(148,163,184,0.52);
    display: block;
    margin-top: 14px;
    padding-top: 6px;
    text-align: right;
}

.pm-special-locked-notice {
    margin: 20px 4px 0;
    text-align: center;
    color: rgba(100,116,139,0.85);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
}

@media (max-width: 768px) {
    .pm-predictions-layout {
        display: block;
    }
    
    .pm-matches-panel.active {
        display: flex;
    }
    
    .pm-match-card,
    .pm-card {
        padding: 14px 12px;
        border-radius: 20px;
    }
    
    .pm-match-top {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }

    .pm-phase {
        font-size: 11px;
    }

    .pm-match-date {
        font-size: 12px;
    }
    
    .pm-status {
        min-height: 23px;
        padding: 5px 8px;
        font-size: 10px;
    }
    
    .pm-match-teams {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        overflow: hidden;
    }
    
    .pm-team {
        font-size: 17px;
        line-height: 1.12;
        font-weight: 780;
    }
    
    .pm-score-inputs {
        gap: 7px;
    }
    
    .pm-score-inputs input {
        width: 45px;
        height: 44px;
        font-size: 21px;
    }
    
    .pm-scorer-row {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 5px;
    }
    
    .pm-match-card-detail-link {
        grid-column: 2;
        justify-self: end;
    }
    
    .pm-save-state {
        grid-column: 1;
        justify-self: start;
        font-size: 11px;
    }

    .pm-special-save-state {
        display: block;
        margin-top: 10px;
        padding-top: 6px;
        text-align: right;
        grid-column: auto;
        justify-self: end;
    }

    .pm-special-warning-card {
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: 14px;
    }

    .pm-special-warning-action {
        min-width: 88px;
    }

    .pm-predictions .pm-specials-panel {
        display: none;
    }

    .pm-predictions.is-specials-open .pm-specials-panel {
        display: block;
    }

    .pm-predictions.is-specials-open .pm-matches-panel {
        display: none;
    }
}

@media (max-width: 420px) {
    .pm-team {
        font-size: 16px;
        font-weight: 780;
    }
    
    .pm-score-inputs {
        gap: 6px;
        font-size: 20px;
    }
    
    .pm-score-inputs input {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    
    .pm-scorer-row .pm-select {
        min-height: 35px;
        height: 35px;
        font-size: 13px;
    }
}

/* ==========================================================================
   07. RESULTS / RESULTADOS
   ========================================================================== */

.pm-results-page {
    margin-top: 3px;
}

.pm-results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pm-space-5);
    align-items: start;
}

.pm-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pm-result-card {
    margin: 0;
}

.pm-results-page article.pm-result-card {
    margin-bottom: 18px;
}

.pm-results-page article.pm-result-card:last-child {
    margin-bottom: 0;
}

.pm-results-empty-state {
    padding: 18px 20px;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 16px;
    background: rgba(15,23,42,0.55);
    color: rgba(226,232,240,0.82);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.pm-result-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pm-result-link:hover,
.pm-result-link:focus,
.pm-result-link:visited {
    color: inherit;
    text-decoration: none;
}

.pm-result-link .pm-match-card {
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.pm-result-link:hover .pm-match-card {
    border-color: rgba(59,130,246,0.75);
    transform: translateY(-1px);
    box-shadow:
        0 18px 38px rgba(0,0,0,0.38),
        0 0 22px rgba(59,130,246,0.16);
}

.pm-result-link:active .pm-match-card,
.pm-result-link:focus .pm-match-card,
.pm-result-link:focus-visible .pm-match-card {
    border-color: rgba(59,130,246,0.75);
    box-shadow:
        0 18px 38px rgba(0,0,0,0.38),
        0 0 22px rgba(59,130,246,0.16);
    outline: none;
}

.pm-results-page .pm-result-score {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(248,250,252,0.96);
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.055em;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
}

.pm-results-page .pm-result-card {
    padding: 13px 12px 12px;
    border-radius: 20px;
    position: relative;
    overflow: visible;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(59,130,246,0.13), transparent 62%),
        linear-gradient(180deg, rgba(18,29,52,0.99), rgba(8,13,28,0.99));
    border-color: rgba(148,163,184,0.22);
    box-shadow:
        0 14px 34px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-results-page .pm-result-card::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 28px;
    background:
        radial-gradient(
            ellipse at top,
            rgba(59,130,246,0.10) 0%,
            rgba(59,130,246,0.04) 45%,
            transparent 75%
        );
    filter: blur(16px);
    pointer-events: none;
}

.pm-results-page .pm-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 44%);
}

.pm-results-page .pm-result-card .pm-team {
    font-size: 18px;
}

.pm-results-page .pm-result-card-live {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(251,191,36,0.12), transparent 62%),
        linear-gradient(180deg, rgba(18,29,52,0.99), rgba(8,13,28,0.99));
}

.pm-results-page .pm-result-card-closed {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(59,130,246,0.13), transparent 62%),
        linear-gradient(180deg, rgba(18,29,52,0.99), rgba(8,13,28,0.99));
}

.pm-results-page .pm-result-card-open {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(148,163,184,0.08), transparent 62%),
        linear-gradient(180deg, rgba(18,29,52,0.99), rgba(8,13,28,0.99));
}

.pm-match-predictions-card {
    margin-top: -4px;
    padding: 12px 10px 10px;
    border-radius: 18px;
}

.pm-results-page article.pm-result-card-user-detail {
    margin-bottom: 0;
}

.pm-results-page .pm-match-predictions-card-user {
    margin-top: -18px;
}

.pm-predictions-card-head {
    min-height: 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0;
}

.pm-predictions-card-head > span {
    color: rgba(248,250,252,0.98);
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.pm-predictions-card-head em {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: rgba(148,163,184,0.72);
    font-style: normal;
    font-size: 11.2px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 14px;
}

.pm-predictions-card-head em span {
    color: rgba(148,163,184,0.72);
    font-size: 11.2px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pm-predictions-card-head em strong {
    color: rgba(251,191,36,0.82);
    font-size: 11.2px;
    font-weight: 720;
}

.pm-predictions-card-head h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1;
    font-weight: 820;
    letter-spacing: -0.035em;
}

.pm-match-predictions-card .pm-table th,
.pm-match-predictions-card .pm-table td {
    padding: 9px 8px;
    font-size: 12px;
}

/* Resultado centrado */
.pm-match-predictions-card .pm-table th:nth-child(2),
.pm-match-predictions-card .pm-table td:nth-child(2) {
    text-align: center;
}

/* Goleador centrado */
.pm-match-predictions-card .pm-table th:nth-child(3),
.pm-match-predictions-card .pm-table td:nth-child(3) {
    text-align: center;
}

/* Puntos centrado */
.pm-match-predictions-card .pm-table th:nth-child(4),
.pm-match-predictions-card .pm-table td:nth-child(4) {
    text-align: center;
}

.pm-match-predictions-card .pm-table th:nth-child(2) .pm-table-sort-link,
.pm-match-predictions-card .pm-table th:nth-child(3) .pm-table-sort-link,
.pm-match-predictions-card .pm-table th:nth-child(4) .pm-table-sort-link {
    justify-content: center;
}

.pm-match-predictions-card .pm-table {
    table-layout: fixed;
}

.pm-match-predictions-card .pm-table th:nth-child(1),
.pm-match-predictions-card .pm-table td:nth-child(1) {
    width: 30%;
}

.pm-match-predictions-card .pm-table th:nth-child(2),
.pm-match-predictions-card .pm-table td:nth-child(2) {
    width: 20%;
}

.pm-match-predictions-card .pm-table th:nth-child(3),
.pm-match-predictions-card .pm-table td:nth-child(3) {
    width: 34%;
}

.pm-match-predictions-card .pm-table th:nth-child(4),
.pm-match-predictions-card .pm-table td:nth-child(4) {
    width: 16%;
}

.pm-match-predictions-card .pm-table th {
    color: rgba(148,163,184,0.86);
    font-size: 9px;
    font-weight: 850;
}

.pm-match-predictions-card .pm-table td {
    color: rgba(248,250,252,0.94);
    font-weight: 620;
}

.pm-match-predictions-card .pm-table td:last-child {
    color: rgba(226,232,240,0.86);
    font-weight: 760;
    text-align: center;
}

.pm-prediction-detail-panel {
    gap: 12px;
    align-items: stretch;
}

.pm-prediction-detail-panel > .pm-specials-back {
    align-self: flex-start;
    width: fit-content;
    max-width: fit-content;
}

.pm-prediction-detail-match-card {
    margin-bottom: 0;
}

.pm-prediction-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pm-prediction-detail-stats > div {
    min-width: 0;
    padding: 11px 10px;
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 18px;
    background: rgba(15,23,42,0.42);
}

.pm-prediction-detail-stats span {
    display: block;
    margin-bottom: 5px;
    color: rgba(148,163,184,0.78);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-prediction-detail-stats strong {
    display: block;
    color: rgba(248,250,252,0.96);
    font-size: 18px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-prediction-detail-table-card {
    margin-top: 0;
}

.pm-prediction-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pm-prediction-user-cell .pm-user-avatar-custom {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    line-height: 1;
}

.pm-prediction-user-cell .pm-user-avatar-custom span {
    display: block;
    line-height: 1;
    transform: translateY(1px);
}

.pm-prediction-user-cell > span {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: rgba(248,250,252,0.94);
    font-weight: 760;
}

.pm-prediction-user-cell small {
    color: rgba(251,191,36,0.82);
    font-size: 10px;
    font-weight: 850;
}

.pm-prediction-detail-table tr.is-current-user td {
    background: rgba(251,191,36,0.035);
}

.pm-prediction-detail-table td:nth-child(2),
.pm-prediction-detail-table td:nth-child(3) {
    color: rgba(226,232,240,0.86);
    font-weight: 760;
}

.pm-prediction-detail-table td:nth-child(2) {
    text-align: center;
}

.pm-prediction-detail-table td:nth-child(3) {
    text-align: left;
}

.pm-prediction-detail-table th:nth-child(2),
.pm-prediction-detail-table td:nth-child(2) {
    text-align: center;
}

.pm-prediction-detail-table th:nth-child(3),
.pm-prediction-detail-table td:nth-child(3) {
    text-align: left;
}

.pm-prediction-detail-table th,
.pm-prediction-detail-table td {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.05;
}

.pm-prediction-detail-table th {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pm-prediction-user-cell {
    gap: 7px;
}

.pm-prediction-user-cell .pm-user-avatar-custom {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 9px;
}

.pm-prediction-user-cell > span {
    line-height: 1.05;
}

.pm-prediction-detail-table td:nth-child(2),
.pm-prediction-detail-table td:nth-child(3) {
    line-height: 1.05;
}

.pm-results-tabs {
    display: none;
    gap: 6px;
    margin-bottom: 14px;
}

@media (min-width: 900px) {
    .pm-results-page {
        max-width: 1180px;
    }

    .pm-results-page .pm-results-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 18px;
        align-items: start;
    }

    .pm-results-page .pm-matches-panel {
        min-width: 0;
    }

    .pm-results-page .pm-results-specials-panel {
        min-width: 0;
        align-self: start;
        position: sticky;
        top: 64px;
    }
}

@media (max-width: 768px) {
    .pm-results-page {
        margin-top: 3px;
    }
    
    .pm-results-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 10px;
        padding: 0px;
        border: 1px solid var(--pm-border);
        border-radius: 14px;
        background: rgba(15, 23, 42, 0.62);
        box-shadow: none;
    }

    .pm-results-tabs button {
        position: relative;
        overflow: hidden;
        flex: 1;
        min-height: 32px;
        border: 0;
        border-radius: 14px;
        padding: 0 10px;
        background: transparent;
        color: var(--pm-text-muted);
        font-size: 12px;
        font-weight: 620;
    }

    .pm-results-tabs button.active {
        position: relative;
        margin: -1px;
        background:
            radial-gradient(
                ellipse at center,
                rgba(36,202,87,0.24) 0%,
                rgba(36,202,87,0.16) 45%,
                rgba(36,202,87,0.07) 100%
            );
        color: #B7FCBE;
        box-shadow:
            inset 0 -10px 10px rgba(34,197,94,0.08);
    }

    .pm-results-tabs button.active::before {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        top: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            rgba(21,93,60,0) 0%,
            rgba(21,93,60,0.85) 18%,
            #155D3C 50%,
            rgba(21,93,60,0.85) 82%,
            rgba(21,93,60,0) 100%
        );
    }

    .pm-results-tabs button.active::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0px;
        height: 2px;
        background: #24CA57;
        clip-path: polygon(
            3px 0,
            calc(100% - 3px) 0,
            100% 100%,
            0 100%
        );
        box-shadow:
            0 0 10px rgba(36,202,87,0.9),
            0 0 20px rgba(36,202,87,0.45);
    }

    .pm-results-layout {
        display: block;
    }

    .pm-results-tab-panel {
        display: none;
    }

    .pm-results-tab-panel.active {
        display: block;
    }
    
    .pm-prediction-detail-stats {
        grid-template-columns: 1fr;
    }

    .pm-predictions-card-head {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }
    
    .pm-predictions-card-head em {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   07B. RESULTS SPECIALS
   ========================================================================== */

.pm-results-specials-panel.pm-results-tab-panel.active {
    display: grid;
    gap: 12px;
}

.pm-results-specials-panel {
    display: grid;
    gap: 16px;
}

.pm-results-special-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(148,163,184,0.20);
    border-radius: 20px;
    margin-bottom: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(59,130,246,0.13), transparent 46%),
        radial-gradient(circle at 100% 0%, rgba(34,197,94,0.055), transparent 38%),
        linear-gradient(180deg, rgba(18,29,52,0.96), rgba(5,10,24,0.98));
    box-shadow:
        0 18px 38px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-results-special-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 42%);
}

.pm-results-special-card-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 12px 12px 6px;
}

.pm-results-special-card-head span {
    color: rgba(248,250,252,0.96);
    font-size: 15px;
    font-weight: 660;
    letter-spacing: -0.025em;
}

/* CUADRO DE HONOR */
.pm-results-honour-card {
    padding: 0 12px 14px;
}

.pm-results-honour-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 14px;
    padding: 2px 0 14px;
}

.pm-results-honour-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.pm-results-honour-item.is-champion {
    border: 0;
    background: transparent;
}

.pm-results-honour-item span {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    color: rgba(198,200,222,0.88);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.01em;
    text-transform: none;
}

.pm-results-honour-item strong {
    grid-column: auto;
    max-width: 100%;
    overflow: hidden;
    color: rgba(248,250,252,0.96);
    font-size: 14px;
    font-weight: 680;
    letter-spacing: -0.02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-results-honour-item::after {
    display: none;
}

/* Puntos por puesto */
.pm-results-top4-block {
    display: grid;
    gap: 10px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(148,163,184,0.16)
}

.pm-honour-points {
    margin-left: 5px;
}

.pm-honour-points--champion {
    margin-left: 1px;
}

.pm-honour-points--second {
    margin-left: 0px;
}

.pm-honour-points--third {
    margin-left: 6px;
}

.pm-honour-points--fourth {
    margin-left: 13px;
}

.pm-results-top4-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: rgba(134,239,172,0.76);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-results-top4-title span,
.pm-results-top4-title em {
    display: inline-block;
}

.pm-results-honour-item span em,
.pm-results-top4-title em {
    color: rgba(251,191,36,0.78);
    font-style: normal;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

.pm-results-top4-title span {
    min-width: 0;
}

.pm-results-top4-flags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 0 32px;
}

.pm-results-top4-flags span {
    min-height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 19px;
    line-height: 1;
}

.pm-results-top4-flags span.is-empty {
    color: rgba(148,163,184,0.28);
    font-size: 18px;
}

/* PREMIOS */
.pm-results-awards-card {
    padding: 0 12px 8px;
}

.pm-results-awards-list {
    display: grid;
    gap: 0;
}

.pm-results-award-row {
    min-height: 40px;
    display: grid;
    grid-template-columns: 100px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(148,163,184,0.13);
}

.pm-results-award-row:last-child {
    border-bottom: 0;
}

.pm-results-award-row span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: rgba(198,200,222,0.88);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.01em;
    text-transform: none;
}

.pm-results-award-row strong {
    min-width: 0;
    overflow: hidden;
    color: rgba(248,250,252,0.96);
    font-size: 14px;
    font-weight: 680;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-results-award-row em {
    color: rgba(251,191,36,0.78);
    font-style: normal;
    font-size: 11px;
    font-weight: 620;
    white-space: nowrap;
    text-align: right;
}

/* PARTICIPANTES */

.pm-results-special-predictions-card {
    padding: 0 0 6px;
}

.pm-results-special-predictions-card .pm-results-special-card-head {
    padding-left: 14px;
    padding-right: 14px;
}

.pm-results-special-predictions-card .pm-muted {
    margin: 8px 14px 14px;
    padding: 10px 2px 0;
    color: rgba(248,250,252,0.88);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    text-align: left;
}

.pm-results-special-users {
    display: grid;
    gap: 0;
    padding: 0 8px 8px;
}

.pm-results-special-user-row {
    overflow: hidden;
    border: 0;
    border-top: 1px solid rgba(148,163,184,0.12);
    border-radius: 0;
    background: rgba(15,23,42,0.38);
    box-shadow: none;
}

.pm-results-special-user-row:last-child {
    border-bottom: 1px solid rgba(148,163,184,0.12);
}

.pm-results-special-user-row[open] {
    border-color: rgba(59,130,246,0.34);
    background:
        radial-gradient(circle at right,
        rgba(59,130,246,0.10),
        transparent 42%),
        rgba(15,23,42,0.52);
}

.pm-results-special-user-row summary {
    min-height: 48px;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto 12px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    cursor: pointer;
    list-style: none;
}

.pm-results-special-user-row summary::-webkit-details-marker {
    display: none;
}

.pm-results-special-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-results-special-avatar .pm-user-avatar-custom {
    width: 24px;
    height: 24px;
    font-size: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 5px 10px rgba(0,0,0,0.22);
}

.pm-results-special-user-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pm-results-special-user-top {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
}

.pm-results-special-user-top strong {
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 13px;
    line-height: 1;
    font-weight: 720;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-results-special-flags-line {
    justify-self: end;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 14px;
}

.pm-results-special-flags-line span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    color: rgba(148,163,184,0.45);
    font-size: 13px;
    line-height: 1;
}

.pm-results-special-user-main small {
    min-width: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    column-gap: 20px;
    color: rgba(148,163,184,0.82);
    font-size: 10px;
    font-weight: 580;
    line-height: 1.05;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.pm-special-mini-item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 3px;
    overflow: hidden;
    white-space: nowrap;
}

.pm-special-mini-item:last-child {
    justify-self: start;
    overflow: visible;
    position: relative;
    z-index: 4;
}

.pm-special-mini-item span {
    color: rgba(148,163,184,0.72);
}

.pm-special-mini-item svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    fill: none;
    stroke: rgba(148,163,184,0.78);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-results-special-user-points {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    min-width: 50px;
    white-space: nowrap;

    color: rgba(248,250,252,0.98);
    font-size: 15px;
    line-height: 1;
    font-weight: 740;
    letter-spacing: -0.035em;

    position: relative;
    z-index: 1;
}

.pm-results-special-user-row[open] .pm-results-special-user-points strong {
    color: #60A5FA;
}

.pm-results-special-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: rgba(148,163,184,0.56);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--pm-transition-fast), color var(--pm-transition-fast);
}

.pm-results-special-user-row[open] .pm-results-special-chevron {
    color: rgba(96,165,250,0.90);
    transform: rotate(225deg) translateY(-1px);
}

.pm-results-special-user-breakdown {
    display: grid;
    gap: 0;
    padding: 9px 14px 12px;
    border-top: 1px solid rgba(148,163,184,0.10);
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.16), transparent 42%),
        linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.90));
    animation: pmRankingBreakdownIn 180ms ease;
}

.pm-results-special-breakdown-head {
    display: grid;
    grid-template-columns: minmax(84px,0.75fr) minmax(0,1fr) 54px;
    align-items: center;
    padding: 5px 8px 4px;
}

.pm-results-special-breakdown-head span {
    color: rgba(198,200,222,0.88);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-results-special-breakdown-head span:last-child {
    text-align: right;
}

.pm-results-special-breakdown-list {
    display: grid;
    gap: 0;
}

.pm-results-special-breakdown-row {
    min-height: 27px;
    display: grid;
    grid-template-columns: minmax(84px,0.75fr) minmax(0,1fr) 54px;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(148,163,184,0.18);
    background: transparent;
}

.pm-results-special-breakdown-row:last-child {
    border-bottom: 0;
}

.pm-results-special-breakdown-row span {
    overflow: hidden;
    color: rgba(198,200,222,0.88);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-results-special-breakdown-row strong {
    overflow: hidden;
    color: rgba(248,250,252,0.94);
    font-size: 12px;
    line-height: 1;
    font-weight: 740;
    letter-spacing: -0.025em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-results-special-breakdown-row em {
    color: rgba(248,250,252,0.96);
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 780;
    letter-spacing: -0.035em;
    text-align: right;
    white-space: nowrap;
}

.pm-results-special-breakdown-separator {
    height: 7px;
    border-bottom: 1px solid rgba(148,163,184,0.10);
    margin-bottom: 4px;
}

.pm-results-special-breakdown-row-top4 {
    height: 7px;
    border-top: 1px solid rgba(74,222,128,0.35);

}

@media (max-width: 768px) {
    .pm-results-page .pm-results-specials-panel.pm-results-tab-panel {
        display: none;
    }

    .pm-results-page .pm-results-specials-panel.pm-results-tab-panel.active {
        display: grid;
    }

    .pm-results-page .pm-matches-panel.pm-results-tab-panel {
        display: none;
    }

    .pm-results-page .pm-matches-panel.pm-results-tab-panel.active {
        display: flex;
    }
}

/* ==========================================================================
   08. TABLES
   ========================================================================== */

.pm-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.pm-table {
    width: 100%;
    border-collapse: collapse;
}

.pm-table th,
.pm-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--pm-border);
    color: var(--pm-text-soft);
    text-align: left;
}

.pm-table th {
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pm-table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    font: inherit;
    white-space: nowrap;
}

.pm-table-sort-link.is-active {
    color: #bfdbfe;
}

.pm-table tr:last-child td {
    border-bottom: 0;
}

/* ==========================================================================
   09. SCORERS
   ========================================================================== */

.pm-results-page .pm-match-goals {
    min-height: 58px;
    margin-top: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid rgba(148,163,184,0.13);
}

.pm-results-page .pm-match-goals-split {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
}

.pm-results-page .pm-match-goals-team {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 8px;
}

.pm-results-page .pm-goal-row {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0,auto) 20px;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 780;
    color: rgba(248,250,252,0.96);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pm-results-page .pm-match-goals-team-home {
    justify-items: start;
}

.pm-results-page .pm-match-goals-team-away {
    justify-items: end;
}

.pm-results-page .pm-match-goals-team-home .pm-goal-row {
    grid-template-columns: 20px minmax(0, auto);
}

.pm-results-page .pm-match-goals-team-home .pm-goal-count {
    order: 1;
    text-align: right;
    transform: translateX(-3px);
}

.pm-results-page .pm-match-goals-team-away .pm-goal-count {
    transform: translateX(3px);
}

.pm-results-page .pm-match-goals-team-home .pm-goal-player {
    order: 2;
}

.pm-results-page .pm-match-goals-team-away .pm-goal-row {
    justify-content: end;
}

.pm-results-page .pm-goal-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-results-page .pm-goal-count {
    width: 20px;
    color: rgba(248,250,252,0.96);
    font-size: 13px;
    font-weight: 780;
    text-align: left;
    white-space: nowrap;
}

.pm-results-page .pm-match-goals-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(148,163,184,0.72);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}

/* ==========================================================================
   10. ADMIN RESULTS PANEL
   ========================================================================== */

.pm-admin-results-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
    margin-top: -22px;
    border: 1px solid rgba(59,130,246,0.24);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(59,130,246,0.12), transparent 62%),
        linear-gradient(180deg,rgba(15,23,42,0.86),rgba(2,6,23,0.96));
    box-shadow:
        0 16px 36px rgba(0,0,0,0.30),
        0 0 22px rgba(59,130,246,0.10),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-admin-results-panel::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    border-radius: 30px;
    background:
        radial-gradient(
            ellipse at top,
            rgba(59,130,246,0.22) 0%,
            rgba(59,130,246,0.08) 42%,
            transparent 76%
        );
    filter: blur(18px);
    pointer-events: none;
}

.pm-admin-results-toggle {
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 760;
    border: 0;
    background: transparent;
    color: var(--pm-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.pm-admin-results-content {
    display: none;
    border-top: 1px solid rgba(148,163,184,0.10);
    padding: 10px 12px 12px;
}

.pm-admin-results-panel.open .pm-admin-results-content {
    display: block;
}

.pm-admin-results-form {
    display: grid;
    gap: 6px;
}

.pm-admin-score-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 8px;
}

.pm-admin-team {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pm-admin-team:first-child {
    justify-content: flex-end;
}

.pm-admin-team:last-child {
    justify-content: flex-start;
}

.pm-admin-team-name {
    min-width: 0;
    max-width: 82px;
    font-size: 12px;
    font-weight: 720;
    overflow: hidden;
    color: rgba(248,250,252,0.92);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-admin-score-separator {
    color: rgba(248,250,252,0.58);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.pm-admin-score-input,
.pm-admin-balance-input,
.pm-admin-select {
    border: 1px solid rgba(148,163,184,0.22) !important;
    background: rgba(15,23,42,0.82) !important;
    color: var(--pm-text) !important;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.pm-admin-score-input {
    width: 36px;
    height: 32px;
    padding: 0;
    border-radius: 11px;
    font-size: 17px;
    font-weight: 760;
    text-align: center;
}

.pm-admin-status {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    gap: 8px;
    align-items: center;
}

.pm-admin-label,
.pm-admin-section-title {
    color: rgba(203,213,225,0.78);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.pm-admin-scorers {
    display: grid;
    gap: 6px;
}

.pm-admin-add-scorer {
    display: grid;
    grid-template-columns: minmax(0,1fr) 38px;
    gap: 6px;
    align-items: center;
}

.pm-admin-select {
    width: 100%;
    height: 34px;
    min-height: 34px;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 680;
}

.pm-admin-balance-input {
    width: 42px;
    height: 30px;
    padding: 0;
    text-align: center;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 760;
}

.pm-admin-existing-scorers {
    display: grid;
    gap: 0;
    margin-top: 2px;
    border-top: 1px solid rgba(148,163,184,0.10);
}

.pm-admin-scorer-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 42px 28px;
    gap: 8px;
    min-height: 32px;
    padding: 2px 2px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(148,163,184,0.10);
    border-radius: 0;
    background: transparent;
}

.pm-admin-scorer-name {
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 12.5px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-admin-delete {
    width: 28px;
    height: 28px;
    border-radius: 8px
    display: grid;
    place-items: center;
    background: transparent;
    color: #f87171;
    cursor: pointer;
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}


.pm-admin-delete {

}

.pm-admin-delete svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-admin-save-button {
    width: 100%;
    min-height: 36px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 760;
    border: 0;
    background: #3B82F6;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(59,130,246,0.22);
    transition: transform 90ms ease,filter 90ms ease,box-shadow 90ms ease;
}

.pm-admin-save-button:active {
    transform: scale(0.985);
    filter: brightness(0.94);
    box-shadow: 0 4px 10px rgba(59,130,246,0.18);
}

.pm-admin-select option,
.pm-admin-select optgroup,
.pm-results-page select option,
.pm-results-page select optgroup {
    background: #ffffff;
    color: #0f172a;
}

.pm-admin-scorer-row.is-deleting {
    opacity: 0.42;
    transform: scale(0.985);
    pointer-events: none;
    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.pm-admin-delete:disabled {
    opacity: 0.45;
    cursor: wait;
}

.pm-admin-notice-success {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    min-width: 220px;
    max-width: calc(100vw - 32px);

    padding: 12px 18px;

    border: 1px solid rgba(34,197,94,0.28);
    border-radius: 14px;

    background: rgba(22,163,74,0.96);
    backdrop-filter: blur(14px);

    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;

    box-shadow:
        0 12px 32px rgba(0,0,0,0.35),
        0 0 20px rgba(34,197,94,0.20);

    animation: pm-toast-success 3s forwards;
}

@keyframes pm-toast-success {

    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
        visibility: hidden;
    }
}

@media (max-width: 420px) {
    .pm-results-page .pm-match-goals {
        min-height: 64px;
        padding-bottom: 14px;
    }
    
    .pm-admin-results-content {
        padding: 10px 12px 12px;
    }

    .pm-admin-results-form {
        gap: 8px;
    }

    .pm-admin-score-row {
        gap: 6px;
    }

    .pm-admin-team-name {
        min-width: 0;
        max-width: 82px;
        font-size: 12px;
        font-weight: 720;
    }

    .pm-admin-score-input {
        width: 36px;
        height: 32px;
        font-size: 17px;
    }

    .pm-admin-status {
        grid-template-columns: 58px minmax(0,1fr);
    }

    .pm-admin-select {
        height: 34px;
        min-height: 34px;
        font-size: 12.5px;
    }

    .pm-admin-balance-input {
        width: 38px;
        height: 34px;
    }

    .pm-admin-save-button {
        min-height: 36px;
    }
}

/* ==========================================================================
   11. USER AVATARS — Sistema global
   ========================================================================== */

.pm-user-avatar-custom {
    width: var(--pm-avatar-size, 52px);
    height: var(--pm-avatar-size, 52px);
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,0.42), transparent 34%),
        radial-gradient(circle at 50% 42%, var(--pm-avatar-bg) 0%, color-mix(in srgb, 
        var(--pm-avatar-bg) 78%, #020617) 56%, #020617 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -4px 8px rgba(0,0,0,0.18),
        inset 0 0 16px color-mix(in srgb, var(--pm-avatar-bg) 55%, transparent),
        0 0 0 1px rgba(255,255,255,0.16),
        0 5px 10px rgba(0,0,0,0.18);
}

.pm-user-avatar-custom::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--pm-avatar-bg) 40%, rgba(255,255,255,0.28)), transparent 44%),
        radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--pm-avatar-bg) 42%, transparent), transparent 64%);
    pointer-events: none;
    z-index: 1;
}

.pm-user-avatar-custom::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 50%,
            color-mix(in srgb, var(--pm-avatar-bg) 70%, transparent) 0%,
            color-mix(in srgb, var(--pm-avatar-bg) 60%, transparent) 70%,
            color-mix(in srgb, var(--pm-avatar-bg) 50%, transparent) 100%
        ),
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--pm-avatar-bg) 34%, transparent) 0%,
            color-mix(in srgb, var(--pm-avatar-bg) 26%, transparent) 54%,
            rgba(0,0,0,0.08) 100%
        );
    mix-blend-mode: multiply;
    opacity: 0.30;
    pointer-events: none;
    z-index: 4;
}

.pm-user-avatar-custom img {
    position: relative;
    z-index: 3;
    width: 128%;
    height: 128%;
    display: block;
    object-fit: contain;
    object-position: center 58%;
    transform: translateY(4%) scale(1.16);
    filter:
        contrast(1.02)
        brightness(1.10)
        drop-shadow(0 2px 3px rgba(0,0,0,0.18))
        drop-shadow(0 0 5px color-mix(in srgb, var(--pm-avatar-bg) 32%, transparent));
}

.pm-user-avatar-custom--xs { --pm-avatar-size: 24px; }
.pm-user-avatar-custom--sm { --pm-avatar-size: 40px; }
.pm-user-avatar-custom--md { --pm-avatar-size: 52px; }
.pm-user-avatar-custom--lg { --pm-avatar-size: 58px; }
.pm-user-avatar-custom--xl { --pm-avatar-size: 84px; }

/* ============================================================================
   12. RANKING — APP PREMIUM MOBILE FIRST
   ============================================================================ */

.pm-ranking-page {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Views */
.pm-ranking-full-view {
    display: none;
}

#pm-ranking-full-toggle:checked ~ .pm-ranking-quick-view {
    display: none;
}

#pm-ranking-full-toggle:checked ~ .pm-ranking-full-view {
    display: block;
}

/* Podio */
.pm-ranking-podium {
    display: grid;
    grid-template-columns: 0.72fr 0.79fr 0.72fr;
    align-items: end;
    gap: 9px;
    margin: 2px 0 20px;
}

.pm-ranking-podium-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 148px;
    display: grid;
    grid-template-rows: 66px auto auto auto;
    justify-items: center;
    align-content: end;
    row-gap: 2px;
    padding: 10px 5px 10px;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,0.045), transparent 34%),
        linear-gradient(180deg, rgba(13,18,32,0.96), rgba(2,6,23,1));
    box-shadow:
        0 18px 34px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.035);
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.pm-ranking-podium-card:focus,
.pm-ranking-podium-card:focus-visible,
.pm-ranking-podium-card:active {
    outline: none;
}

.pm-ranking-podium-card.pm-rank-1 {
    height: 160px;
    grid-template-rows: 76px auto auto auto;
    z-index: 3;
    transform: translateY(5px);
    border-color: rgba(251,191,36,0.82);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 18%, rgba(251,191,36,0.12), transparent 58%),
        radial-gradient(circle at 50% 75%, rgba(251,191,36,0.10), transparent 48%),
        linear-gradient(
            180deg,
            rgba(38,29,8,0.98) 0%,
            rgba(22,18,9,0.98) 42%,
            rgba(2,6,23,1) 100%
        );
    box-shadow:
        0 22px 40px rgba(0,0,0,0.50),
        0 0 16px rgba(251,191,36,0.06),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-ranking-podium-card.pm-rank-1 h2 {
    font-size: 16px;
    transform: translateY(-7px);
}

.pm-ranking-podium-card.pm-rank-1 > strong {
    transform: translateY(-5px);
}

.pm-ranking-podium-card.pm-rank-1 p {
    transform: translateY(-1.8px);
}

.pm-ranking-podium-card.pm-rank-2 {
    height: 148px;
    transform: translateY(3px);
    border-color: rgba(226,232,240,0.72);
    background:
        radial-gradient(circle at 50% 18%, rgba(226,232,240,0.12), transparent 56%),
        linear-gradient(
            180deg,
            rgba(24,31,44,0.98) 0%,
            rgba(15,23,42,0.98) 46%,
            rgba(2,6,23,1) 100%
        );
    box-shadow:
        0 18px 34px rgba(0,0,0,0.42),
        0 0 16px rgba(226,232,240,0.06),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.pm-ranking-podium-card.pm-rank-3 {
    height: 148px;
    transform: translateY(3px);
    border-color: rgba(251,146,60,0.70);
    background:
        radial-gradient(circle at 50% 18%, rgba(251,146,60,0.08), transparent 56%),
        linear-gradient(
            180deg,
            rgba(40,24,14,0.98) 0%,
            rgba(22,17,13,0.98) 44%,
            rgba(2,6,23,1) 100%
        );
    box-shadow:
        0 18px 34px rgba(0,0,0,0.42),
        0 0 14px rgba(251,146,60,0.05),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

.pm-ranking-podium-card.pm-rank-1::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(
            circle,
            rgba(251,191,36,0.08) 0%,
            rgba(251,191,36,0.03) 38%,
            transparent 70%
        );
    filter: blur(14px);
}

.pm-ranking-podium-card.pm-rank-2::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(
            circle,
            rgba(226,232,240,0.09) 0%,
            transparent 70%
        );
    filter: blur(14px);
}

.pm-ranking-podium-card.pm-rank-3::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
    border-radius: 20px;
    background:
        radial-gradient(
            circle,
            rgba(251,146,60,0.09) 0%,
            transparent 70%
        );
    filter: blur(14px);
}

/* FX sci-fi podium */
.pm-ranking-podium-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.pm-ranking-avatar-lg,
.pm-ranking-podium-card h2,
.pm-ranking-podium-card > strong,
.pm-ranking-podium-card p {
    position: relative;
    z-index: 4;
}

.pm-ranking-medal {
    z-index: 5;
}

.pm-ranking-podium-fx::before {
    content: "";
    position: absolute;
    left: 50%;
    top:-1px;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.78;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.05))
        saturate(1.02);
}

.pm-rank-1 .pm-ranking-podium-fx::before {
    width: 102px;
    height: 102px;
    top: -4px;
    opacity: 0.84;
    background-image: url('../img/podium/Fondo_Oro2_700.webp');
}

.pm-rank-2 .pm-ranking-podium-fx::before {
    background-image: url('../img/podium/Fondo_Plata_700.webp');
}

.pm-rank-3 .pm-ranking-podium-fx::before {
    background-image: url('../img/podium/Fondo_Bronce_700.webp');
}


.pm-ranking-podium-card.is-current-user {
    box-shadow:
        0 18px 34px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

.pm-ranking-podium-card.pm-rank-1.is-current-user {
    box-shadow:
        0 22px 40px rgba(0,0,0,0.50),
        0 0 22px rgba(251,191,36,0.10),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.pm-ranking-podium-card.is-current-user h2 {
    color: var(--pm-green);
}

/* Medallas */
.pm-ranking-medal {
    position: absolute;
    top: -10px;
    left: -11px;
    z-index: 5;
    width: 55px;
    height: 55px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.34));
}

.pm-rank-1 .pm-ranking-medal {
    top: -13px;
    left: -12px;
    width: 61px;
    height: 61px;
    background-image: url('../img/Medalla1_256.webp');
}

.pm-rank-2 .pm-ranking-medal {
    background-image: url('../img/Medalla2_256.webp');
}

.pm-rank-3 .pm-ranking-medal {
    background-image: url('../img/Medalla3_256.webp');
}

/* Avatares podio */
.pm-ranking-avatar-lg {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: start center;
    margin-bottom: 0;
    padding-top: 2px;
    transform: none;
    
}

.pm-ranking-podium-card .pm-user-avatar-custom {
    width: 44px;
    height: 44px;
    font-size: 14px;
    border: 1px solid rgba(2,6,23,0.92);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.055),
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 9px 18px rgba(0,0,0,0.34);
}

.pm-ranking-podium-card.pm-rank-1 .pm-user-avatar-custom {
    border-color: rgba(92,63,8,0.92);
    box-shadow:
        0 0 0 1px rgba(251,191,36,0.24),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 9px 18px rgba(0,0,0,0.34);
}

.pm-ranking-podium-card.pm-rank-2 .pm-user-avatar-custom {
    border-color: rgba(2,6,23,0.94);
    box-shadow:
        0 0 0 1px rgba(226,232,240,0.20),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 16px rgba(0,0,0,0.32);
}

.pm-ranking-podium-card.pm-rank-3 .pm-user-avatar-custom {
    border-color: rgba(2,6,23,0.94);
    box-shadow:
        0 0 0 1px rgba(251,146,60,0.20),
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 8px 16px rgba(0,0,0,0.32);
}

.pm-ranking-podium-card.pm-rank-1 .pm-user-avatar-custom {
    width: 52px;
    height: 52px;
    font-size: 16px;
    border-color: rgba(2,6,23,0.95);
}

/* Texto podio */
.pm-ranking-podium-card h2 {
    position: relative;
    z-index: 4;
    max-width: 100%;
    margin: 0 0 2px;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 13px;
    line-height: 1.05;
    font-weight: 720;
    letter-spacing: -0.025em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(-6px);
}

.pm-ranking-podium-card > strong {
    position: relative;
    z-index: 4;
    color: var(--pm-text);
    font-size: 16px;
    line-height: 1.05;
    font-weight: 760;
    letter-spacing: -0.04em;
    white-space: nowrap;
    transform: translateY(-5px);
}

.pm-ranking-podium-card.pm-rank-1 > strong {
    color: var(--pm-gold);
    font-size: 19px;
    font-weight: 820;
}

.pm-ranking-podium-card p {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--pm-text-muted);
    font-size: 10px;
    line-height: 1.15;
    font-weight: 620;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detalle podio */
.pm-ranking-podium-card {
    cursor: pointer;
    transition:
        transform var(--pm-transition-fast),
        border-color var(--pm-transition-fast),
        box-shadow var(--pm-transition-fast),
        filter var(--pm-transition-fast);
}

.pm-ranking-podium-card:active {
    filter: brightness(1.04);
}

.pm-ranking-podium-card.is-selected {
    transform: translateY(-2px);

    box-shadow:
        0 24px 44px rgba(0,0,0,0.54),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.pm-ranking-podium-card.pm-rank-1.is-selected {
    transform: translateY(2px);
    box-shadow:
        0 24px 44px rgba(0,0,0,0.56),
        0 0 24px rgba(251,191,36,0.16),
        inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: rgba(251,191,36,1);
}

.pm-ranking-podium-card.pm-rank-2.is-selected {
    transform: translateY(-1px);
    box-shadow:
        0 24px 44px rgba(0,0,0,0.54),
        0 0 18px rgba(226,232,240,0.10),
        inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: rgba(226,232,240,0.95);
}

.pm-ranking-podium-card.pm-rank-3.is-selected {
    transform: translateY(-1px);
    box-shadow:
        0 24px 44px rgba(0,0,0,0.54),
        0 0 16px rgba(251,146,60,0.08),
        inset 0 1px 0 rgba(255,255,255,0.05);
    border-color: rgba(251,146,60,0.90);
}

.pm-ranking-podium-detail {
    margin: -6px 0 12px;
}

.pm-ranking-podium-detail-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0;
    padding: 13px;
    border: 1px solid rgba(148,163,184,0.16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.92));
    box-shadow:
        0 16px 34px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

.pm-ranking-podium-detail-panel .pm-ranking-panel-summary {
    padding-bottom: 8px;
}

.pm-ranking-podium-detail-panel .pm-ranking-phase-header {
    padding-top: 7px;
}

/* Oro */
.pm-ranking-podium-detail-panel.pm-rank-1 {
    border-color: rgba(251,191,36,0.42);

    background:
        radial-gradient(circle at top left, rgba(251,191,36,0.14), transparent 42%),
        linear-gradient(
            180deg,
            rgba(38,29,8,0.92) 0%,
            rgba(22,18,9,0.96) 42%,
            rgba(2,6,23,1) 100%
        );

    box-shadow:
        0 18px 38px rgba(0,0,0,0.34),
        0 0 24px rgba(251,191,36,0.10),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Plata */
.pm-ranking-podium-detail-panel.pm-rank-2 {
    border-color: rgba(226,232,240,0.30);

    background:
        radial-gradient(circle at top left, rgba(226,232,240,0.10), transparent 42%),
        linear-gradient(
            180deg,
            rgba(24,31,44,0.94) 0%,
            rgba(15,23,42,0.96) 44%,
            rgba(2,6,23,1) 100%
        );

    box-shadow:
        0 18px 36px rgba(0,0,0,0.32),
        0 0 18px rgba(226,232,240,0.06),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Bronce */
.pm-ranking-podium-detail-panel.pm-rank-3 {
    border-color: rgba(251,146,60,0.22);

    background:
        radial-gradient(circle at top left, rgba(251,146,60,0.07), transparent 40%),
        linear-gradient(
            180deg,
            rgba(28,20,15,0.92) 0%,
            rgba(18,15,14,0.96) 44%,
            rgba(2,6,23,1) 100%
        );

    box-shadow:
        0 18px 36px rgba(0,0,0,0.32),
        0 0 14px rgba(251,146,60,0.035),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.pm-ranking-podium-detail-head {
    min-height: 36px;
    display: grid;
    grid-template-columns: 24px 34px minmax(0, 1fr) 92px 28px;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.pm-ranking-podium-detail-head:active {
    opacity: .9;
}

.pm-ranking-podium-detail-rank {
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.pm-ranking-podium-detail-head .pm-user-avatar-custom {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.pm-ranking-podium-detail-name {
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 780;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-ranking-podium-detail-points {
    color: var(--pm-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 820;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-align: right;
}

.pm-ranking-podium-detail-head .pm-ranking-chevron {
    color: rgba(251,191,36,0.82);
    transform: rotate(225deg) translateY(-1px);
}

/* Colores por puesto en cabecera del panel */
.pm-ranking-podium-detail-panel.pm-rank-1 .pm-ranking-podium-detail-rank,
.pm-ranking-podium-detail-panel.pm-rank-1 .pm-ranking-podium-detail-points {
    color: var(--pm-gold);
}

.pm-ranking-podium-detail-panel.pm-rank-2 .pm-ranking-podium-detail-rank,
.pm-ranking-podium-detail-panel.pm-rank-2 .pm-ranking-podium-detail-points {
    color: #e2e8f0;
}

.pm-ranking-podium-detail-panel.pm-rank-3 .pm-ranking-podium-detail-rank,
.pm-ranking-podium-detail-panel.pm-rank-3 .pm-ranking-podium-detail-points {
    color: #fb923c;
}

.pm-ranking-podium-detail {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.pm-ranking-podium-detail[hidden] {
    display: block;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.pm-ranking-podium-detail-panel {
    animation: pmPodiumPanelIn 180ms ease;
}

.pm-ranking-podium-detail-panel[hidden] {
    display: none;
}

@keyframes pmPodiumPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }

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

/* Lista resumida */
.pm-ranking-list {
    display: grid;
    gap: 3px;
}

.pm-ranking-row {
    overflow: hidden;
    border: 1px solid rgba(148,163,184,0.11);
    border-radius: 6px;
    background:
        radial-gradient(circle at right, rgba(59,130,246,0.045), transparent 34%),
        rgba(15,23,42,0.44);
    box-shadow: 0 8px 18px rgba(0,0,0,0.13);
}

.pm-ranking-row[open],
.pm-ranking-row.is-current-user {
    border-color: rgba(59,130,246,0.75);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    background:
        radial-gradient(circle at right, rgba(59,130,246,0.12), transparent 40%),
        linear-gradient(
            180deg,
            rgba(17,37,74,0.45),
            rgba(2,6,23,0.85)
        );
}

.pm-ranking-row summary {
    min-height: 46px;
    display: grid;
    grid-template-columns: 24px 36px minmax(0, 1fr) 84px 16px;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    cursor: pointer;
    list-style: none;
}

.pm-ranking-row summary::-webkit-details-marker {
    display: none;
}

.pm-ranking-row .pm-user-avatar-custom {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.pm-ranking-row,
.pm-ranking-row summary {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.pm-ranking-row summary:focus,
.pm-ranking-row summary:focus-visible,
.pm-ranking-row summary:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.pm-ranking-row:focus,
.pm-ranking-row:focus-visible,
.pm-ranking-row:active {
    outline: none;
    box-shadow: none;
}

.pm-ranking-position {
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.pm-ranking-user-main {
    min-width: 0;
    display: grid;
    gap: 4px;
    transform: translateY(2px);
}

.pm-ranking-user-main strong {
    overflow: hidden;
    color: var(--pm-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: -0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-ranking-user-main small {
    overflow: hidden;
    color: var(--pm-text-muted);
    font-size: 10px;
    line-height: 1.05;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(1px);
}

.pm-ranking-points {
    color: var(--pm-text);
    font-size: 14px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: -0.045em;
    white-space: nowrap;
    text-align: right;
}

.pm-ranking-row.is-current-user .pm-ranking-points,
.pm-ranking-row[open] .pm-ranking-points {
    color: #60A5FA;
}

.pm-ranking-points-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    column-gap: -6px;
}

.pm-ranking-points-wrap .pm-ranking-points {
    grid-column: 1;
    justify-self: end;
    margin-right: -2px;
}

.pm-ranking-points-wrap .pm-rank-move {
    grid-column: 2;
    justify-self: end;
    transform: translate(2.5px, 1.5px);
}

.pm-ranking-chevron {
    width: 9px;
    height: 9px;
    margin-left: 0px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: rgba(148,163,184,0.62);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--pm-transition-fast), color var(--pm-transition-fast);
}

.pm-ranking-row[open] .pm-ranking-chevron {
    color: rgba(96,165,250,0.90);
    transform: rotate(225deg) translateY(-1px);
}

/* Desplegable */
.pm-ranking-breakdown {
    display: grid;
    gap: 0;
    padding: 9px 14px 12px;
    border-top: 1px solid rgba(148,163,184,0.10);
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.16), transparent 42%),
        linear-gradient(180deg, rgba(15,23,42,0.72), rgba(2,6,23,0.90));
    animation: pmRankingBreakdownIn 180ms ease;
}

@keyframes pmRankingBreakdownIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.99);
    }

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

.pm-ranking-panel-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    align-items: center;
    gap: 0;
    padding: 2px 0 8px;
}

.pm-ranking-panel-summary div:not(:last-child) {
    border-right: 2px solid rgba(255,255,255,0.10);
}

.pm-ranking-panel-summary div {
    min-width: 0;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 2px;
    padding: 0;
}

.pm-ranking-panel-summary span {
    color: var(--pm-text-muted);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-ranking-panel-summary strong {
    color: var(--pm-text);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.pm-ranking-phase-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) 54px 34px 28px;
    align-items: center;
    padding: 7px 22px 2px;
    margin: 0;
}

.pm-ranking-phase-header span {
    text-align: center;
    color: rgba(148,163,184,0.82);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-ranking-phase-header span:first-child {
    text-align: left;
}

.pm-ranking-phase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
}

.pm-ranking-breakdown-item {
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 54px 34px 28px;
    align-items: center;
    gap: 0;
    padding: 0 22px;
    border: 0;
    border-bottom: 1px solid rgba(148,163,184,0.24);
    background: transparent;
}

.pm-ranking-breakdown-item:last-child {
    border-bottom: 0;
}

.pm-ranking-breakdown-item span {
    overflow: hidden;
    color: var(--pm-text-soft);
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-ranking-breakdown-item .pm-col-pts,
.pm-ranking-breakdown-item .pm-col-re,
.pm-ranking-breakdown-item .pm-col-g {
    text-align: center;
    color: var(--pm-text);
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
}

/* Movimiento ranking */
.pm-rank-move {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 24px;
    height: 14px;
    padding: 0;
    gap: -1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.03em;
    white-space: nowrap;
    transform: translateY(1.5px);
}

.pm-rank-arrow {
    display: inline-block;
    font-size: 12.5px;
    line-height: 1;
    transform: translateY(-0.95px);
}

.pm-rank-number {
    display: inline-block;
    font-size: 9.5px;
    line-height: 1;
}

.pm-rank-move.is-up {
    color: #4aa96c;
}

.pm-rank-move.is-down {
    color: #c96b6b;
}

/* Tabla completa */
.pm-ranking-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    background: linear-gradient(180deg, rgba(15,23,42,0.82), rgba(2,6,23,0.92));
    box-shadow: var(--pm-shadow-md);
    -webkit-overflow-scrolling: touch;
}

.pm-ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--pm-text-soft);
    font-size: 13px;
}

.pm-ranking-table-full {
    min-width: 1180px;
}

.pm-ranking-table th,
.pm-ranking-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--pm-border);
    text-align: center;
    white-space: nowrap;
}

.pm-ranking-table thead th {
    background: rgba(15,23,42,0.98);
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pm-ranking-table tbody tr:nth-child(even) {
    background: rgba(15,23,42,0.48);
}

.pm-ranking-table tbody tr:hover,
.pm-ranking-table tbody tr.is-current-user {
    background: rgba(34,197,94,0.10);
}

.pm-ranking-table tbody tr:last-child td {
    border-bottom: 0;
}

.pm-ranking-table th:nth-child(2),
.pm-ranking-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 160px;
    background: #050b16;
    color: var(--pm-text);
    text-align: left;
    font-weight: 950;
}

.pm-ranking-table thead th:nth-child(2) {
    z-index: 4;
    background: rgba(15,23,42,1);
}

.pm-ranking-table tbody tr:nth-child(even) td:nth-child(2) {
    background: #0b1220;
}

.pm-ranking-table tbody tr.is-current-user td:nth-child(2) {
    background: #062719;
}

.pm-rank-total {
    color: #4ade80;
    font-size: 16px;
    font-weight: 950;
}

/* Ajustes móviles pequeños */
@media (max-width: 420px) {
    .pm-ranking-podium {
        grid-template-columns: 0.70fr 0.77fr 0.70fr;
        gap: 8px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .pm-ranking-podium-card {
        height: 146px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .pm-ranking-podium-card.pm-rank-1 {
        height: 158px;
        transform: translateY(5px);
    }
    
    .pm-ranking-podium-card.pm-rank-2,
    .pm-ranking-podium-card.pm-rank-3 {
        height: 146px;
    }
    
    .pm-ranking-medal {
        top: -10px;
        left: -11px;
        width: 55px;
        height: 55px;
    }
    
    .pm-rank-1 .pm-ranking-medal {
        top: -13px;
        left: -12px;
        width: 61px;
        height: 61px;
    }

    .pm-ranking-podium-card .pm-user-avatar-custom {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    .pm-ranking-podium-card.pm-rank-1 .pm-user-avatar-custom {
        width: 52px;
        height: 52px;
        font-size: 16px;
    }

    .pm-ranking-row summary {
        grid-template-columns: 22px 34px minmax(0, 1fr) 78px 14px;
        gap: 7px;
        padding: 6px 7px;
    }

    .pm-ranking-row .pm-user-avatar-custom {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}

/* Ajustes desktop */
@media (min-width: 900px) {
    .pm-ranking-page {
        max-width: 980px;
        margin: 0 auto;
    }

    .pm-ranking-podium {
        margin-left: 0;
        margin-right: 0;
        gap: 12px;
    }

    .pm-ranking-podium-card {
        height: 168px;
    }

    .pm-ranking-podium-card.pm-rank-1 {
        height: 190px;
    }

    .pm-ranking-podium-card.pm-rank-2 {
        height: 170px;
    }

    .pm-ranking-podium-card.pm-rank-3 {
        height: 170px;
    }

    .pm-ranking-podium-card .pm-user-avatar-custom {
        width: 54px;
        height: 54px;
        font-size: 18px;
    }

    .pm-ranking-podium-card.pm-rank-1 .pm-user-avatar-custom {
        width: 62px;
        height: 62px;
        font-size: 20px;
    }
    
    .pm-ranking-podium-card .pm-ranking-avatar-lg {
        position: relative;
        top: -7px;
    }
    
    .pm-ranking-podium-fx::before {
        top: 26px;
    }

    .pm-rank-1 .pm-ranking-podium-fx::before {
        top: 30px;
    }

    .pm-ranking-phase-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   13. AUTH / PROFILE
   Login, registro, recuperar contraseña y perfil básico
   ========================================================================== */
   
.pm-auth-page,
.pm-profile-page {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 2px 16px 96px;
}

.pm-auth-card,
.pm-profile-card {
    width: 100%;
    border-radius: 28px;
    padding: 20px;
}

.pm-auth-header {
    margin-bottom: 14px;
}

.pm-profile-header {
    margin-bottom: 26px;
}

.pm-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.pm-profile-header {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

.pm-auth-logo {
    display: inline-flex;
    width: 44px;
    height: 44px;
}

.pm-auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pm-auth-wordmark {
    color: #ffffff;
    font-size: 28px;
    font-weight: 1000;
    letter-spacing: -0.06em;
    line-height: 1;
    text-transform: uppercase;
    transform: skewX(-5deg);
    transform-origin: left center;
    text-shadow: 0 0 18px rgba(59,130,246,.12);
}

body.pm-auth-template .pm-app-main {
    padding-top: 0;
}

body.pm-auth-template .pm-auth-page,
body.pm-auth-template .pm-profile-page {
    padding-top: 0;
}

/* Glow azul inferior en pantallas auth*/
body.pm-auth-template .pm-app-shell {
    position: relative;
    z-index: 1;
    background: transparent;
}

body.pm-auth-template {
    background:
        radial-gradient(
            circle at bottom center,
            rgba(59, 130, 246, 0.22),
            transparent 52%
        ),
        var(--pm-bg) !important;
}

.pm-auth-header h1,
.pm-profile-header h1 {
    margin: 0;
    margin-bottom: 6px;
    color: var(--pm-text);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.pm-auth-header p,
.pm-profile-header p,
.pm-form-section p {
    margin: 8px 0 0;
    color: var(--pm-text-muted);
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.45;
}

.pm-auth-form {
    display: grid;
    gap: 10px;
}

.pm-profile-form {
    display: grid;
    gap: 18px;
}

.pm-auth-form label,
.pm-profile-form label {
    display: grid;
    gap: 7px;
}

.pm-auth-form label span,
.pm-profile-form label span {
    color: var(--pm-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.pm-auth-form .pm-password-field > label,
.pm-profile-form .pm-password-field > label {
    color: var(--pm-text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.pm-auth-form input,
.pm-profile-form input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.58);
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 800;
    padding: 0 14px;
    outline: none;
}

.pm-auth-form input:focus,
.pm-profile-form input:focus {
    border-color: rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.pm-required {
    color: #f87171;
    font-style: normal;
    font-weight: 950;
}

.pm-optional {
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 800;
    opacity: 0.72;
}

.pm-auth-check {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 10px !important;
    margin: 2px 0;
    margin-top: -4px;
}

.pm-auth-check input {
    width: 16px;
    height: 16px;
    min-height: auto;
    padding: 0;
}

.pm-auth-submit {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #3B82F6;
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    margin-top: 4px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
    transition:
        transform 80ms ease-out,
        filter 80ms ease-out,
        box-shadow 80ms ease-out;
}

.pm-auth-submit:hover {
    filter: brightness(1.04);
}

.pm-auth-submit:focus,
.pm-auth-submit:focus-visible {
    outline: none;
}

.pm-auth-submit:active {
    transform: scale(0.97);
    filter: brightness(0.92);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
}

.pm-auth-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.pm-auth-links a {
    color: var(--pm-text-muted);
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.pm-auth-links a:hover {
    color: var(--pm-text);
}

.pm-auth-message {
    margin-bottom: 16px;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.pm-auth-message--success {
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.12);
    color: #bbf7d0;
}

.pm-auth-message--error {
    border: 1px solid rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.pm-profile-account {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.38);
}

.pm-profile-avatar {
    flex: 0 0 auto;
}

.pm-profile-account-text {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pm-profile-account-text strong {
    overflow: hidden;
    color: var(--pm-text);
    font-size: 16px;
    line-height: 1.1;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-profile-account-text span {
    overflow: hidden;
    color: var(--pm-text-muted);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-profile-footer {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    text-align: center;
}

.pm-profile-logout {
    color: rgba(239, 68, 68, 0.92);
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: opacity .18s ease;
}

.pm-profile-logout:hover {
    opacity: .78;
}

.pm-form-section {
    display: grid;
    gap: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    padding-top: 18px;
}

.pm-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.pm-form-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-form-section--account h2::before,
.pm-form-section--security h2::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: 0.9;
}

.pm-form-section--account h2::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.2 0-7.5 2.1-7.5 4.7 0 .5.4.8.8.8h13.4c.4 0 .8-.3.8-.8 0-2.6-3.3-4.7-7.5-4.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.2 0-7.5 2.1-7.5 4.7 0 .5.4.8.8.8h13.4c.4 0 .8-.3.8-.8 0-2.6-3.3-4.7-7.5-4.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pm-form-section--security h2::before {
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1Zm-8 0V7a3 3 0 0 1 6 0v2H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1Zm-8 0V7a3 3 0 0 1 6 0v2H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pm-form-section--security {
    margin-top: 10px;
}

.pm-form-section--avatar h2::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: 0.9;
    border-radius: 999px;
}

.pm-avatar-picker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.pm-avatar-picker-item {
    position: relative;
    display: grid !important;
    place-items: center;
    gap: 0 !important;
    min-height: 58px;
    padding: 5px;
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 18px;
    background: rgba(15,23,42,0.42);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.pm-avatar-picker-item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.pm-avatar-picker-item:hover {
    border-color: rgba(59,130,246,0.42);
    background: rgba(15,23,42,0.62);
    transform: translateY(-1px);
}

.pm-avatar-picker-item.is-selected {
    border-color: color-mix(in srgb, var(--pm-avatar-bg) 86%, white);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pm-avatar-bg) 18%, transparent), transparent 60%),
        rgba(15,23,42,0.72);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pm-avatar-bg) 38%, transparent),
        0 0 14px color-mix(in srgb, var(--pm-avatar-bg) 24%, transparent),
        0 10px 22px rgba(0,0,0,0.22);
}

.pm-avatar-picker-item.is-pending {
    border-color: #39FF14;
    transform: translateY(-2px) scale(1.04);
    background:
        radial-gradient(circle at 50% 0%, rgba(57,255,20,0.26), transparent 62%),
        rgba(15,23,42,0.78);
    box-shadow:
        0 0 0 1px rgba(57,255,20,0.62),
        0 0 22px rgba(57,255,20,0.42),
        0 12px 26px rgba(0,0,0,0.26);
}

.pm-avatar-picker-preview {
    pointer-events: none;
}

.pm-password-field {
    position: relative;
    display: grid;
    gap: 7px;
}

.pm-password-input {
    padding-right: 52px !important;
}

.pm-password-toggle {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--pm-text-muted);
    opacity: 0.9;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.pm-password-toggle svg {
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    display: none;
}

.pm-password-toggle:hover {
    color: var(--pm-text);
    opacity: 1;
}

.pm-password-field .pm-eye-open {
    display: block;
}

.pm-password-field.is-visible .pm-eye-open {
    display: none;
}

.pm-password-field.is-visible .pm-eye-closed {
    display: block;
}

.pm-password-toggle:focus,
.pm-password-toggle:focus-visible,
.pm-password-toggle:active {
    outline: none;
    box-shadow: none;
    color: var(--pm-text-muted);
    opacity: 0.9;
}

.pm-password-toggle:disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

.pm-password-toggle:disabled svg {
    opacity: 0.55;
}

.pm-password-input::-ms-reveal,
.pm-password-input::-ms-clear {
    display: none;
}

@media (max-width: 480px) {
    .pm-auth-page,
    .pm-profile-page {
        padding-top: 18px;
    }

    .pm-auth-card,
    .pm-profile-card {
        border-radius: 24px;
        padding: 18px;
    }

    .pm-profile-header {
        align-items: flex-start;
    }

    .pm-auth-header h1,
    .pm-profile-header h1 {
        font-size: 25px;
    }
    
    .pm-avatar-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
    }

    .pm-avatar-picker-item {
        min-height: 56px;
        border-radius: 16px;
    }
}

/* ==========================================================================
   14. BOTTOM NAV
   ========================================================================== */

.pm-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--pm-z-bottom-nav);
    width: 100%;
    height: calc(var(--pm-bottom-nav-height) + var(--pm-safe-bottom));
    min-height: var(--pm-bottom-nav-height);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 10px calc(6px + var(--pm-safe-bottom));
    border-top: 1px solid rgba(148,163,184,0.18);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.98));
    backdrop-filter: blur(18px);
    box-shadow: 0 -18px 42px rgba(0,0,0,0.36);
}

.pm-bottom-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 22px;
    color: var(--pm-text-muted) !important;
    text-decoration: none !important;
    font-size: var(--pm-text-xs);
    font-weight: 850;
    transition:
        background var(--pm-transition-fast),
        color var(--pm-transition-fast),
        transform var(--pm-transition-fast),
        box-shadow var(--pm-transition-fast);
}

.pm-bottom-nav-item > span {
    display: grid;
    place-items: center;
    line-height: 1;
}

.pm-bottom-nav-item strong {
    font-size: var(--pm-text-2xs);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.pm-bottom-nav-item:hover,
.pm-bottom-nav-item:focus {
    background: rgba(59, 130, 246, 0.14);
    color: var(--pm-text) !important;
    transform: translateY(-1px);
}

.pm-bottom-nav-item.is-active {
    background: transparent;
    color: var(--pm-green) !important;
    box-shadow: none;
}

.pm-bottom-nav-item.is-active::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 34px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: var(--pm-radius-pill);
    background: var(--pm-green);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.8);
}

.pm-bottom-nav-item.is-active span {
    filter: none;
}

.pm-nav-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 26px;
    color: currentColor;
}

.pm-nav-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pm-nav-icon-wide svg {
    width: 34px;
    height: 26px;
}

.pm-bottom-nav-item.is-active .pm-nav-icon {
    color: var(--pm-green);
}

@media (min-width: 900px) {
    .pm-bottom-nav {
        display: none;
    }
}

@media (max-width: 380px) {
    .pm-bottom-nav {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        height: 66px;
        min-height: 66px;
        border: 1px solid rgba(148,163,184,0.18);
        border-radius: 24px;
        padding: 7px 8px;
    }

    .pm-bottom-nav-item strong {
        font-size: 9px;
        letter-spacing: -0.02em;
    }

    .pm-nav-icon,
    .pm-nav-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   15B. HOME
   Home completa + ajustes finos integrados
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout general
   -------------------------------------------------------------------------- */

.pm-page-home {
    min-height: calc(100dvh - var(--pm-topbar-height) - var(--pm-bottom-nav-height) - var(--pm-safe-top) - var(--pm-safe-bottom) - 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 0;
}

.pm-home-kicker,
.pm-section-kicker {
    display: block;
    margin-bottom: 6px;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.pm-home-kicker-warning {
    color: #fde68a;
}

/* --------------------------------------------------------------------------
   Aviso de pago pendiente
   -------------------------------------------------------------------------- */

.pm-page-home .pm-home-payment {
    position: relative;
    overflow: hidden;
    display: grid;
    padding: 10px;
    gap: 0px;
    border: 1px solid rgba(251,191,36,0.34);
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(251,191,36,0.18), transparent 38%),
        linear-gradient(135deg, rgba(120,53,15,0.36), rgba(15,23,42,0.78));
    box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}

.pm-page-home .pm-home-payment::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.08), transparent);
}

.pm-page-home .pm-home-payment-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding-right: 128px;
}

.pm-page-home .pm-home-payment-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(251,191,36,0.18);
    color: #fbbf24;
    font-size: 20px;
    font-weight: 1000;
    box-shadow: 0 0 24px rgba(251,191,36,0.20);
}

.pm-page-home .pm-home-payment h2,
.pm-home-empty-card h2 {
    margin: 0;
    color: var(--pm-text);
    font-size: 16px;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.pm-page-home .pm-home-payment p,
.pm-home-empty-card p {
    margin: 5px 0 0;
    color: var(--pm-text-soft);
    font-size: 11.5px;
    line-height: 1.35;
}

.pm-page-home .pm-home-payment-details {
    position: static;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.pm-page-home .pm-home-payment-details summary {
    position: absolute;
    z-index: 2;
    top: 35px;
    right: 13px;
    width: fit-content;
    min-height: 28px;
    margin: 0;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(251,191,36,0.80);
    color: #111827;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    list-style: none;
}

.pm-page-home .pm-home-payment-details summary::-webkit-details-marker {
    display: none;
}

.pm-page-home .pm-home-payment-details[open] {
    margin-top: 0;
}

.pm-page-home .pm-home-payment-box {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 7px;
    margin-top: 9px;
    padding: 10px 11px;
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 15px;
    background: rgba(2,6,23,0.35);
}

.pm-page-home .pm-home-payment-box span {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: rgba(203,213,225,0.82);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    padding-left: 50px;
}

.pm-page-home .pm-home-payment-box strong {
    justify-self: start;
    min-width: 0;
    color: var(--pm-text);
    font-size: 13px;
    font-weight: 950;
    text-align: left;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Dashboard superior
   -------------------------------------------------------------------------- */

.pm-home-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pm-page-home .pm-home-stat {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 12px 24px 22px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    min-height: 74px;
    padding: 10px 8px 9px;
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 46%),
        rgba(15,23,42,0.55);
    color: inherit;
    text-decoration: none;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    transition: transform var(--pm-transition-fast), border-color var(--pm-transition-fast), background var(--pm-transition-fast);
}

.pm-page-home .pm-home-stat > span:first-child {
    align-self: end;
    min-width: 0;
    overflow: hidden;
    color: #bfdbfe;
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-page-home .pm-home-stat:hover {
    transform: translateY(-1px);
    border-color: rgba(59,130,246,0.26);
}

.pm-page-home .pm-home-stat-primary {
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.10), transparent 48%),
        rgba(15,23,42,0.57);
}

.pm-page-home .pm-home-stat span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-page-home .pm-home-stat strong {
    align-self: center;
    color: var(--pm-text);
    font-size: 23px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.065em;
    text-align: center;
}

.pm-page-home .pm-home-stat small {
    align-self: start;
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    text-overflow: ellipsis;
    white-space: normal;
}

.pm-home-stat-done {
    color: var(--pm-green) !important;
}

/* --------------------------------------------------------------------------
   Grid principal
   -------------------------------------------------------------------------- */

.pm-home-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
    gap: 14px;
}

.pm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pm-space-3);
    margin-bottom: var(--pm-space-4);
}

.pm-home-card-header-tight {
    margin-bottom: 13px;
}

.pm-home-current-user-marker {
    opacity: .8;
    font-size: 9px;
    margin-left: 2px;
}

.pm-card-header h2 {
    margin: 0;
    color: var(--pm-text);
    font-size: 20px;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.pm-card-header a {
    flex: 0 0 auto;
    color: var(--pm-text);
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Siguiente partido
   -------------------------------------------------------------------------- */

.pm-page-home .pm-home-next-match,
.pm-page-home .pm-home-ranking {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(59,130,246,0.24);
    background:
        radial-gradient(ellipse at 18% 0%, rgba(59,130,246,0.18), transparent 58%),
        radial-gradient(ellipse at 86% 12%, rgba(34,197,94,0.07), transparent 44%),
        linear-gradient(180deg, rgba(18,29,52,0.98), rgba(5,10,24,0.99));
    box-shadow:
        0 18px 42px rgba(0,0,0,0.38),
        0 0 28px rgba(59,130,246,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.pm-page-home .pm-home-next-match::before,
.pm-page-home .pm-home-ranking::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 42%);
}

.pm-page-home .pm-home-next-match::after,
.pm-page-home .pm-home-ranking::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -2;
    border-radius: 30px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at top,
            rgba(59,130,246,0.18) 0%,
            rgba(59,130,246,0.07) 42%,
            transparent 76%
        );
    filter: blur(18px);
}

.pm-live-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: var(--pm-radius-pill);
    padding: 0 11px;
    background: rgba(34,197,94,0.14);
    color: #86efac;
    font-size: 12px;
    font-weight: 950;
    transform: translateY(2px);
}

.pm-live-pill.is-live {
    background: rgba(251,191,36,0.16);
    color: #fbbf24;
}

.pm-page-home .pm-home-next-match .pm-card-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 8px;
    margin-bottom: 13px;
}

.pm-page-home .pm-home-next-match .pm-card-header > div {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
}

.pm-page-home .pm-home-next-match .pm-home-kicker {
    margin-bottom: 5px;
    text-align: center;
}

.pm-page-home .pm-home-next-match .pm-card-header h2 {
    margin: 10px 0 0;
    color: rgba(148,163,184,0.78);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
}

.pm-page-home .pm-home-next-match .pm-live-pill {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: 0;
}

.pm-page-home .pm-match-preview {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: -2px;
    padding: 15px 12px;
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at center, rgba(59,130,246,0.12), transparent 58%),
        rgba(2,6,23,0.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 10px 24px rgba(0,0,0,0.18);
}

.pm-page-home .pm-team-preview,
.pm-page-home .pm-team-preview:first-child,
.pm-page-home .pm-team-preview:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 90px;
    text-align: center;
}

.pm-page-home .pm-team-preview .pm-flag {
    display: block;
    flex: 0 0 auto;
    margin: 0 auto;
    font-size: 32px;
    line-height: 1;
}

.pm-page-home .pm-team-preview strong {
    display: block;
    max-width: 100%;
    color: var(--pm-text);
    font-size: 20px;
    font-weight: 950;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
}

.pm-page-home .pm-match-center {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 72px;
    padding: 10px 11px;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 17px;
    background: rgba(15,23,42,0.76);
}

.pm-page-home .pm-match-center span {
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 950;
}

.pm-page-home .pm-match-center strong {
    color: var(--pm-text);
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.pm-home-match-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    margin-left: auto;
    padding-right: 6px;
}

.pm-home-match-footer span {
    font-size: 12px;
    font-weight: 950;
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-home-match-footer a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
}

.pm-home-match-footer a::after {
    content: ">";
    margin-left: 5px;
    font-size: 13px;
    line-height: 1;
    transform: translateY(-0.5px);
}

.pm-home-match-footer a:hover,
.pm-home-match-footer a:focus {
    color: #93c5fd;
    text-decoration: none;
}

.pm-home-match-footer a:active {
    transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   Ranking general
   -------------------------------------------------------------------------- */

.pm-page-home .pm-home-ranking .pm-card-header {
    display: block;
    margin-bottom: 12px;
    text-align: center;
}

.pm-page-home .pm-home-ranking .pm-home-kicker {
    display: block;
    text-align: center;
    margin-bottom: 0;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.pm-page-home .pm-home-ranking-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-right: 6px;
}

.pm-page-home .pm-home-ranking-footer a {
    display: inline-flex;
    align-items: center;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
}

.pm-page-home .pm-home-ranking-footer a::after {
    content: ">";
    margin-left: 5px;
    font-size: 13px;
    line-height: 1;
    transform: translateY(-0.5px);
}

.pm-page-home .pm-home-ranking-footer a:hover,
.pm-page-home .pm-home-ranking-footer a:focus {
    color: #93c5fd;
    text-decoration: none;
}

.pm-page-home .pm-home-ranking-list {
    display: grid;
    gap: 3px;
}

.pm-page-home .pm-home-ranking-row {
    display: grid;
    grid-template-columns: 34px 26px minmax(0, 1fr) auto 58px;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    border-radius: 10px;
}

.pm-page-home .pm-home-ranking-row.is-current-user {
    margin: 2px -6px;
    padding: 3px 6px;
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.25);
}

.pm-page-home .pm-home-rank-position {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.65;
}

.pm-page-home .pm-home-rank-position-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.pm-page-home .pm-home-rank-position-2,
.pm-page-home .pm-home-rank-position-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.pm-page-home .pm-home-rank-position-2 {
    color: #d1d5db;
}

.pm-page-home .pm-home-rank-position-3 {
    color: #cd7f10;
}

.pm-page-home .pm-home-ranking-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-page-home .pm-home-ranking-avatar .pm-user-avatar-custom {
    width: 24px;
    height: 24px;
    font-size: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 5px 10px rgba(0,0,0,0.22);
}

.pm-page-home .pm-player-name {
    min-width: 0;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-page-home .pm-home-ranking-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.pm-page-home .pm-home-ranking-meta em {
    color: rgba(203,213,225,0.82);
    font-size: 11.5px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.pm-page-home .pm-home-ranking-row strong {
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.04em;
    text-align: right;
    white-space: nowrap;
}

.pm-home-ranking-separator {
    height: 1px;
    margin: 3px 2px;
    background: rgba(148,163,184,0.16);
}

/* --------------------------------------------------------------------------
   Tarjetas inferiores
   -------------------------------------------------------------------------- */

.pm-home-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.pm-home-info-card {
    position: relative;
    overflow: hidden;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.07), transparent 42%),
        rgba(15,23,42,0.52);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.pm-home-prizes-card,
.pm-home-round-card {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.09), transparent 42%),
        rgba(15,23,42,0.54);
}

.pm-home-rules-card {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 42%),
        rgba(15,23,42,0.54);
}

.pm-home-participants-card {
    justify-content: flex-start;
    background:
        radial-gradient(circle at top left, rgba(168,85,247,0.10), transparent 42%),
        rgba(15,23,42,0.54);
}

.pm-home-participants-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.pm-home-participants-main strong {
    color: #ffffff;
    font-size: 22px;
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.pm-home-participants-main span {
    color: rgba(203,213,225,0.82);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.pm-page-home .pm-home-participants-status {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,0.10);
}

.pm-page-home .pm-home-participants-status span {
    color: rgba(191,219,254,0.92);
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
}

.pm-page-home .pm-home-participants-status small {
    color: rgba(148,163,184,0.78);
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
}

.pm-home-prize-list {
    display: grid;
    gap: 3px;
    margin-top: 4px;
    margin-bottom: 7px;
}

.pm-home-prize-list div {
    display: grid;
    grid-template-columns: 26px auto;
    align-items: center;
    column-gap: 12px;
    color: rgba(203,213,225,0.88);
    margin-left: 0;
}

.pm-home-prize-list span {
    justify-self: end;
    transform: translateX(8px);
}

.pm-home-prize-list span {
    color: #e0f2fe;
    font-size: 12px;
    font-weight: 850;
}

.pm-page-home .pm-home-prizes-card .pm-home-kicker {
    margin-bottom: 10px;
}

.pm-home-prize-list div:first-child strong {
    color: #fbbf24;
    font-size: 14px;
    font-weight: 900;
}

.pm-home-prize-list div:first-child strong {
    text-shadow: 0 0 12px rgba(251,191,36,0.25);
}

.pm-home-prize-list div:nth-child(2) strong {
    color: #fcd34d;
    font-size: 13px;
    font-weight: 850;
}

.pm-home-prize-list div:nth-child(3) strong {
    color: #fde68a;
    font-size: 12px;
    font-weight: 800;
}

.pm-home-prize-list strong {
    justify-self: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-right: 0;
    text-align: center;
    white-space: nowrap;
}

.pm-page-home .pm-home-prizes-card p {
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(148,163,184,0.10);
    color: rgba(148,163,184,0.76);
    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;
}

.pm-page-home .pm-home-prizes-card {
    min-height: 0;
    padding: 12px 14px;
}

.pm-home-info-card h3 {
    margin: 0;
    color: var(--pm-text);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.pm-page-home .pm-home-round-card {
    min-height: 0;
    padding: 12px 14px;
}

.pm-page-home .pm-home-round-card h3 {
    margin: 2px 0 0;
    color: rgba(148,163,184,0.78);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pm-page-home .pm-home-round-points {
    flex: initial;
    display: grid;
    align-content: start;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    width: 100%;
}

.pm-page-home .pm-home-round-points span {
    display: grid;
    grid-template-columns: 76px 48px;
    align-items: baseline;
    gap: 12px;
    color: rgba(203,213,225,0.90);
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1;
    min-height: 15px;
}

.pm-page-home .pm-home-round-points strong {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
}

.pm-home-info-card .pm-home-kicker {
    margin-bottom: 8px;
    font-size: 10.5px;
    letter-spacing: 0.07em;
}

.pm-home-info-card p {
    margin: auto 0 0;
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}

.pm-home-info-card small {
    display: block;
    margin-top: 5px;
    color: var(--pm-text-dim);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
}

.pm-page-home .pm-home-rules-card ul {
    display: grid;
    gap: 5px;
    margin: 2px 0 8px;
    padding: 0;
    list-style: none;
}

.pm-page-home .pm-home-rules-card li {
    position: relative;
    padding-left: 14px;
    color: var(--pm-text-soft);
    font-size: 10.5px;
    font-weight: 820;
    line-height: 1.18;
}

.pm-home-rules-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--pm-green);
    font-weight: 1000;
}

.pm-home-rules-card > strong {
    margin-top: auto;
    color: var(--pm-text);
    font-size: 12px;
    font-weight: 950;
}

.pm-home-rules-card > .pm-home-rules-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-top: auto;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Estados vacíos
   -------------------------------------------------------------------------- */

.pm-home-empty-card {
    display: grid;
    align-content: center;
    min-height: 128px;
}

.pm-home-empty-card.is-small {
    min-height: 96px;
}

/* --------------------------------------------------------------------------
   Footer legal de Home
   -------------------------------------------------------------------------- */

.pm-home-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    padding-top: 22px;
    padding-bottom: 8px;
    border-top: 1px solid rgba(148,163,184,0.08);
    color: var(--pm-text-muted);
    font-size: 11px;
    font-weight: 750;
    opacity: 0.55;
}

.pm-home-legal a {
    color: inherit;
    text-decoration: none;
}

.pm-home-legal a:hover {
    color: var(--pm-text-soft);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
    .pm-home-main-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .pm-page-home .pm-home-payment {
        padding: 12px;
        border-radius: 18px;
    }

    .pm-page-home .pm-home-payment p {
        font-size: 11.5px;
    }

    .pm-page-home .pm-home-stat {
        min-height: 73px;
        padding: 11px 8px;
        border-radius: 15px;
    }

    .pm-page-home .pm-home-stat strong {
        font-size: 21px;
    }

    .pm-page-home .pm-home-stat small {
        font-size: 10px;
    }

    .pm-card-header h2 {
        font-size: 18px;
    }

    .pm-page-home .pm-match-center {
        min-width: 70px;
        padding: 9px 10px;
    }

    .pm-page-home .pm-match-center strong {
        font-size: 22px;
    }

    .pm-page-home .pm-team-preview strong {
        font-size: 19px;
    }

    .pm-page-home .pm-home-ranking-row {
        grid-template-columns: 32px 25px minmax(0, 1fr) auto 56px;
        gap: 6px;
    }

    .pm-page-home .pm-home-ranking-meta em {
        font-size: 11px;
    }

    .pm-home-info-grid {
        gap: 10px;
    }

    .pm-home-info-card {
        min-height: 80px;
        padding: 13px;
        border-radius: 17px;
    }

    .pm-home-prize-list strong {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .pm-page-home .pm-home-payment {
        padding: 12px;
    }

    .pm-page-home .pm-home-payment-main {
        padding-right: 118px;
    }
    
    .pm-page-home .pm-home-payment-details summary {
        top: 64px;
        right: 12px;
        margin: 0;
        padding: 0 12px;
        font-size: 11px;
    }

    .pm-page-home .pm-home-payment-box span {
        grid-template-columns: 110px minmax(0, 1fr);
        font-size: 11px;
    }

    .pm-home-dashboard {
        gap: 6px;
    }

    .pm-page-home .pm-home-stat {
        padding: 10px 7px;
    }

    .pm-page-home .pm-home-stat strong {
        font-size: 19px;
    }

    .pm-page-home .pm-match-preview {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 7px;
        padding: 13px 9px;
    }

    .pm-page-home .pm-team-preview {
        gap: 5px;
        min-width: 0;
    }

    .pm-page-home .pm-team-preview .pm-flag {
        font-size: 26px;
    }

    .pm-page-home .pm-team-preview strong {
        font-size: 15px;
    }

    .pm-page-home .pm-match-center {
        min-width: 64px;
        padding: 8px 8px;
    }

    .pm-page-home .pm-match-center strong {
        font-size: 17px;
    }

    .pm-page-home .pm-home-ranking-row {
        grid-template-columns: 30px 23px minmax(0, 1fr) 42px 51px;
        gap: 5px;
    }

    .pm-page-home .pm-home-ranking-meta {
        display: grid;
        justify-items: end;
        gap: 2px;
    }

    .pm-page-home .pm-player-name,
    .pm-page-home .pm-home-ranking-row strong {
        font-size: 12.5px;
    }

    .pm-home-info-card {
        padding: 12px;
    }

    .pm-home-rules-card li,
    .pm-home-info-card p {
        font-size: 10px;
    }
}

/* ===========================================================================
   16. TOPBAR
   =========================================================================== */

.pm-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--pm-z-topbar);
    width: 100%;
    padding-top: var(--pm-safe-top);
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    background: var(--pm-bg);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    min-height: 0;
    transition:
        background var(--pm-transition-normal),
        border-color var(--pm-transition-normal),
        box-shadow var(--pm-transition-normal);
}

.pm-topbar.is-scrolled {
    background: var(--pm-bg);
    border-bottom-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
}

.pm-topbar-inner {
    width: 100%;
    max-width: var(--pm-content-max);
    height: var(--pm-topbar-height);
    min-height: 0;
    margin: 0 auto;
    padding: 0 var(--pm-page-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--pm-space-4);
}

.pm-topbar-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
    color: var(--pm-text);
    text-decoration: none;
}

.pm-topbar-logo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 7px;
    line-height: 1;
}

.pm-topbar-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pm-topbar-title {
    display: inline-block;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.05em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(59,130,246,.12);
    transform: skewX(-5deg);
    transform-origin: left center;
}

.pm-topbar-nav {
    display: none;
}

.pm-topbar-nav a {
    position: relative;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--pm-radius-pill);
    padding: 0 12px;
    color: var(--pm-text-muted);
    font-size: var(--pm-text-sm);
    font-weight: 900;
    text-decoration: none;
    transition:
        color var(--pm-transition-fast),
        background var(--pm-transition-fast);
}

.pm-topbar-nav a:hover,
.pm-topbar-nav a:focus {
    background: rgba(148, 163, 184, 0.10);
    color: var(--pm-text);
}

.pm-topbar-nav a.is-active {
    background: rgba(34, 197, 94, 0.12);
    color: var(--pm-green);
}

.pm-topbar-user {
    position: relative;
    flex: 0 0 auto;
    justify-self: end;
}

.pm-auth-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pm-radius-pill);
    color: rgba(96,165,250,0.92);
    text-decoration: none;
    font-size: 19px;
    line-height: 1;
    transition:
        color var(--pm-transition-fast),
        background var(--pm-transition-fast),
        transform var(--pm-transition-fast);
}

.pm-auth-icon:hover,
.pm-auth-icon:focus {
    background: rgba(59,130,246,0.12);
    color: #93c5fd;
    transform: translateY(-0.5px);
}

.pm-auth-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.pm-user-button {
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
    min-height: 34px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: var(--pm-text);
    cursor: pointer;
}

.pm-user-button.is-open .pm-user-avatar {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
    transform: scale(1.04);
}

.pm-user-meta {
    display: grid;
    gap: 1px;
    text-align: right;
}

.pm-user-meta strong {
    max-width: 74px;
    overflow: hidden;
    font-size: var(--pm-text-xs);
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-user-meta small {
    color: var(--pm-green);
    opacity: 0.82;
    font-size: var(--pm-text-xs);
    line-height: 1;
    font-weight: 900;
}

.pm-user-avatar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--pm-radius-pill);
    background: linear-gradient(135deg, var(--pm-green), var(--pm-green-strong));
    color: var(--pm-text-dark);
    font-size: var(--pm-text-sm);
    font-weight: 950;
    transition:
        transform var(--pm-transition-fast),
        box-shadow var(--pm-transition-fast);
}

.pm-user-menu {
    position: absolute;
    top: calc(100% + var(--pm-space-2));
    right: 0;
    min-width: 190px;
    display: grid;
    padding: var(--pm-space-2);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;
}

.pm-user-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pm-user-menu a {
    display: flex;
    align-items: center;
    min-height: 38px;
    border-radius: var(--pm-radius-md);
    padding: 0 var(--pm-space-3);
    color: var(--pm-text-soft);
    font-size: var(--pm-text-sm);
    font-weight: 850;
    text-decoration: none;
}

.pm-user-menu a:hover {
    background: rgba(34, 197, 94, 0.1);
    color: var(--pm-text);
}

.pm-user-menu a[href*="logout"] {
    color: #ef4444;
}

.pm-user-menu a[href*="logout"]:hover {
    background: rgba(239, 68, 68, 0.12);
}


@media (min-width: 900px) {
    .pm-topbar-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .pm-topbar-brand {
        justify-self: start;
    }
}

@media (max-width: 899px) {
    .pm-topbar-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0px var(--pm-page-x-mobile);
    }

    .pm-topbar-nav {
        display: none;
    }

    .pm-topbar-brand {
        min-width: 0;
    }

    .pm-topbar-user {
        justify-self: end;
    }

    .pm-topbar-title {
        font-size: 15px;
    }

    .pm-user-meta strong {
        max-width: 74px;
    }

    .pm-auth-actions a {
        padding: 0 var(--pm-space-2);
    }
}

@media (max-width: 380px) {
    .pm-user-meta {
        display: none;
    }

    .pm-auth-actions a:first-child {
        display: none;
    }
}

/* ===========================================================================
   17. PAGE DASHBOARD / SEGUNDA BARRA
   =========================================================================== */

.pm-page-dashboard {
    position: fixed;
    top: calc(var(--pm-topbar-height) + var(--pm-safe-top));
    left: 0;
    right: 0;
    z-index: calc(var(--pm-z-topbar) - 1);
    margin-bottom: 0;
    margin-top: -1px;
    background: var(--pm-bg);
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    transition:
        opacity var(--pm-transition-normal),
        visibility var(--pm-transition-normal),
        transform var(--pm-transition-normal);
}

.pm-page-dashboard.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
}

.pm-page-dashboard-inner {
    width: 100%;
    max-width: var(--pm-content-max);
    margin: 0 auto;
    padding: 8px var(--pm-page-x) 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pm-space-4);
}

.pm-page-dashboard-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.pm-page-dashboard-kicker {
    color: rgba(74, 222, 128, 0.72);
    font-size: var(--pm-text-2xs);
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pm-page-dashboard h1 {
    margin: 0;
    overflow: hidden;
    color: var(--pm-text);
    font-size: var(--pm-text-lg);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-page-dashboard p {
    margin: 0;
    overflow: hidden;
    color: var(--pm-text-muted);
    font-size: var(--pm-text-sm);
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-page-dashboard-stats {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pm-page-dashboard-stat {
    min-width: 72px;
    min-height: 42px;
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--pm-radius-md);
    background: rgba(15, 23, 42, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.pm-page-dashboard-stat strong {
    color: var(--pm-text);
    font-size: var(--pm-text-md);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.pm-page-dashboard-stat span {
    color: var(--pm-text-dim);
    font-size: var(--pm-text-2xs);
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.pm-results-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.pm-page-dashboard .pm-results-summary-row h1 {
    min-width: 0;
    flex: 1 1 auto;
}

.pm-page-dashboard .pm-results-summary-side {
    min-width: 0;
    flex: 0 1 auto;
}

.pm-page-dashboard .pm-results-summary-row h1 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pm-text);
}

.pm-page-dashboard .pm-results-summary-side {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: rgba(203,213,225,0.72);
    text-align: right;
    white-space: nowrap;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-text {
    display: none;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-inner {
    grid-template-columns: 1fr;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-stats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-stat {
    min-width: 0;
    min-height: 25px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
    overflow: visible;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-stat strong {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-stat span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: -4px;
}

.pm-dashboard-hot-predictions .pm-page-dashboard-stat:nth-child(3) strong {
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pm-page-dashboard-inner {
        padding: 6px var(--pm-page-x-mobile) 8px;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .pm-page-dashboard h1 {
        font-size: var(--pm-text-md);
    }

    .pm-page-dashboard p {
        font-size: var(--pm-text-xs);
    }

    .pm-page-dashboard-stats {
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pm-page-dashboard-stats::-webkit-scrollbar {
        display: none;
    }

    .pm-page-dashboard-stat {
        min-width: 0;
        min-height: 34px;
        grid-template-columns: auto auto;
        align-items: baseline;
        gap: 5px;
        padding: 6px 9px;
        border-radius: var(--pm-radius-pill);
        white-space: nowrap;
    }

    .pm-page-dashboard-stat strong {
        font-size: var(--pm-text-sm);
    }

    .pm-page-dashboard-stat span {
        font-size: 9px;
    }
    
    .pm-dashboard-hot-predictions .pm-page-dashboard-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        overflow: visible;
    }

    .pm-dashboard-hot-predictions .pm-page-dashboard-stat {
        min-height: 26px;
        padding: 0 4px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        justify-items: center;
        gap: 8px;
        text-align: center;
    }

    .pm-dashboard-hot-predictions .pm-page-dashboard-stat strong {
        font-size: 12px;
    }

    .pm-dashboard-hot-predictions .pm-page-dashboard-stat span {
        font-size: 8px;
        margin-top: -4px;
    }
}

/* ===========================================================================
   18. LEGAL FOOTER — PREPARADO PARA SIGUIENTE FASE
   =========================================================================== */

/* ==========================================================================
   19. RULES / NORMAS
   ========================================================================== */

.pm-rules-page {
    max-width: 820px;
    margin: 0 auto;
}

.pm-rules-page .pm-card {
    margin-bottom: 12px;
    padding: 16px 14px;
    border-radius: 20px;
}

.pm-rules-page .pm-card h2 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.pm-rules-page .pm-card p {
    margin: 0 0 10px;
    color: rgba(203,213,225,0.88);
    font-size: 13px;
    line-height: 1.45;
}

.pm-rules-page .pm-card p:last-child {
    margin-bottom: 0;
}

.pm-rules-page ul,
.pm-rules-page ol {
    display: grid;
    gap: 7px;
    margin: 0 0 10px;
    padding-left: 18px;
}

.pm-rules-page li {
    color: rgba(203,213,225,0.9);
    font-size: 13px;
    line-height: 1.35;
}

.pm-rules-page strong {
    color: var(--pm-text);
    font-weight: 850;
}

.pm-rules-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(2,6,23,0.34);
}

.pm-rules-table th,
.pm-rules-table td {
    padding: 10px 9px;
    border-bottom: 1px solid rgba(148,163,184,0.13);
    text-align: center;
    font-size: 12px;
}

.pm-rules-table th {
    color: rgba(148,163,184,0.9);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pm-rules-table td {
    color: rgba(248,250,252,0.94);
    font-weight: 720;
}

.pm-rules-table th:first-child,
.pm-rules-table td:first-child {
    text-align: left;
}

.pm-rules-table tr:last-child td {
    border-bottom: 0;
}

.pm-rules-result {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 44%),
        rgba(15,23,42,0.48);
}

.pm-rules-result span {
    color: rgba(148,163,184,0.9);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pm-rules-result strong {
    font-size: 16px;
    line-height: 1.1;
}

.pm-rules-result em {
    color: rgba(203,213,225,0.84);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.pm-rules-example {
    display: grid;
    gap: 10px;
}

.pm-rules-example-box {
    padding: 11px 12px;
    border: 1px solid rgba(148,163,184,0.14);
    border-radius: 16px;
    background: rgba(15,23,42,0.44);
}

.pm-rules-example-box.is-good {
    border-color: rgba(34,197,94,0.22);
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.10), transparent 44%),
        rgba(15,23,42,0.48);
}

.pm-rules-example-box strong {
    display: block;
    margin-bottom: 6px;
}

.pm-rules-total {
    display: inline-flex;
    margin-top: 6px;
    color: #bfdbfe;
    font-size: 15px;
    font-weight: 900;
}

.pm-rules-example-box.is-good .pm-rules-total {
    color: #86efac;
}

@media (max-width: 768px) {
    .pm-rules-page {
        max-width: none;
    }

    .pm-rules-page .pm-card {
        margin-bottom: 10px;
        padding: 14px 12px;
    }

    .pm-rules-page .pm-card h2 {
        font-size: 17px;
    }

    .pm-rules-table th,
    .pm-rules-table td {
        padding: 9px 7px;
        font-size: 11.5px;
    }

    .pm-rules-table th {
        font-size: 9px;
    }
}

/* ==========================================================================
   20. CONTACTO
   ========================================================================== */

.pm-contact-page {
    max-width: 720px;
    margin: 0 auto;
}

.pm-contact-card p {
    margin: 0 0 14px;
    color: rgba(203,213,225,0.88);
    font-size: 13px;
    line-height: 1.45;
}

.pm-contact-form {
    margin-top: 14px;
}

.pm-contact-form form {
    display: grid;
    gap: 12px;
}

.pm-contact-form p {
    margin: 0;
}

.pm-contact-form label {
    display: grid;
    gap: 6px;
    color: rgba(203,213,225,0.86);
    font-size: 12px;
    font-weight: 800;
}

.pm-contact-form input,
.pm-contact-form textarea {
    width: 100%;
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 14px;
    background: rgba(2,6,23,0.74);
    color: var(--pm-text);
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
}

.pm-contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.pm-contact-form input:focus,
.pm-contact-form textarea:focus {
    border-color: rgba(59,130,246,0.8);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.14);
}

.pm-contact-form input[type="submit"] {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: #3B82F6;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.pm-contact-email {
    margin-top: 16px !important;
    padding-top: 14px;
    border-top: 1px solid rgba(148,163,184,0.12);
}

.pm-contact-email a {
    color: #93c5fd;
    font-weight: 850;
    text-decoration: none;
}

.wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 700;
}

.wpcf7-response-output {
    margin: 12px 0 0 !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    color: var(--pm-text) !important;
    font-size: 13px;
}

/* ==========================================================================
   AVATAR TEST PAGE
   ========================================================================== */

.pm-avatar-test-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.pm-avatar-test-avatar {
    width: var(--pm-avatar-size);
    height: var(--pm-avatar-size);
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,0.42), transparent 34%),
        radial-gradient(circle at 50% 42%, var(--pm-avatar-bg) 0%, color-mix(in srgb, var(--pm-avatar-bg) 78%, #020617) 56%, #020617 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -4px 8px rgba(0,0,0,0.18),
        inset 0 0 16px color-mix(in srgb, var(--pm-avatar-bg) 55%, transparent),
        0 0 0 1px rgba(255,255,255,0.16),
        0 5px 10px rgba(0,0,0,0.18);
}

.pm-avatar-test-avatar::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--pm-avatar-bg) 40%, rgba(255,255,255,0.28)), transparent 44%),
        radial-gradient(circle at 50% 66%, color-mix(in srgb, var(--pm-avatar-bg) 42%, transparent), transparent 64%);
    pointer-events: none;
    z-index: 1;
}

.pm-avatar-test-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 50%,
            color-mix(in srgb, var(--pm-avatar-bg) 70%, transparent) 0%,
            color-mix(in srgb, var(--pm-avatar-bg) 60%, transparent) 70%,
            color-mix(in srgb, var(--pm-avatar-bg) 50%, transparent) 100%
        ),
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--pm-avatar-bg) 34%, transparent) 0%,
            color-mix(in srgb, var(--pm-avatar-bg) 26%, transparent) 54%,
            rgba(0,0,0,0.08) 100%
        );
    mix-blend-mode: multiply;
    opacity: 0.50;
    pointer-events: none;
    z-index: 4;
}

.pm-avatar-test-avatar img {
    position: relative;
    z-index: 3;
    width: 128%;
    height: 128%;
    display: block;
    object-fit: contain;
    object-position: center 58%;
    transform: translateY(4%) scale(1.16);
    filter:
        contrast(1.02)
        brightness(1.10)
        drop-shadow(0 2px 3px rgba(0,0,0,0.18))
        drop-shadow(0 0 5px color-mix(in srgb, var(--pm-avatar-bg) 32%, transparent));
}

.pm-avatar-test-header {
    margin-bottom: 24px;
}

.pm-avatar-test-header h1 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: rgba(248,250,252,0.96);
}

.pm-avatar-test-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(148,163,184,0.86);
}

.pm-avatar-test-section {
    margin-top: 28px;
}

.pm-avatar-test-section h2 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(226,232,240,0.92);
}

.pm-avatar-test-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pm-avatar-test-card {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(59,130,246,0.08), transparent 42%),
        linear-gradient(180deg, rgba(15,23,42,0.68), rgba(2,6,23,0.72));
    border: 1px solid rgba(148,163,184,0.13);
    box-shadow:
        0 10px 26px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

.pm-avatar-test-samples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.pm-avatar-test-name {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: rgba(226,232,240,0.86);
    white-space: nowrap;
    align-self: flex-end;
}

@media (min-width: 720px) {
    .pm-avatar-test-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}